clean up logs modals and fix progress bars counting on completed but N<M/M task progress.

svelte-ui/src/App.svelte

@@ -5,10 +5,7 @@
 	import FrontPage from "./pages/FrontPage.svelte";
 	import ProjectPage from "./pages/ProjectPage.svelte";
 	import ModalRoute from "./components/ModalRoute.svelte";
-	import LogAddForm from "./forms/LogAddForm.svelte";
 	import LogsPage from "./pages/LogsPage.svelte";
-	import LogEditForm from "./forms/LogEditForm.svelte";
-	import LogDeleteForm from "./forms/LogDeleteForm.svelte";
 	import TaskAddForm from "./forms/TaskAddForm.svelte";
 	import TaskEditForm from "./forms/TaskEditForm.svelte";
 	import TaskDeleteForm from "./forms/TaskDeleteForm.svelte";
@@ -22,6 +19,7 @@
 	import GroupForm from "./forms/GroupForm.svelte";
 	import GoalPage from "./pages/GoalPage.svelte";
 	import GoalForm from "./forms/GoalForm.svelte";
+	import LogForm from "./forms/LogForm.svelte";
 	import LoginForm from "./forms/LoginForm.svelte";
 	import authStore from "./stores/auth";
 	import FocusHandler from "./components/FocusHandler.svelte";
@@ -44,9 +42,9 @@ import FocusHandler from "./components/FocusHandler.svelte";
 				<Route path="/items/" component={GroupPage} />
 			</main>
 		</Router>
-		<ModalRoute name="log.add"> <LogAddForm/> </ModalRoute>
-		<ModalRoute name="log.edit"> <LogEditForm/> </ModalRoute>
-		<ModalRoute name="log.delete"> <LogDeleteForm/> </ModalRoute>
+		<ModalRoute name="log.add"> <LogForm creation/> </ModalRoute>
+		<ModalRoute name="log.edit"> <LogForm/> </ModalRoute>
+		<ModalRoute name="log.delete"> <LogForm deletion/> </ModalRoute>
 		<ModalRoute name="task.add"> <TaskAddForm/> </ModalRoute>
 		<ModalRoute name="task.edit"> <TaskEditForm/> </ModalRoute>
 		<ModalRoute name="task.delete"> <TaskDeleteForm/> </ModalRoute>

svelte-ui/src/components/ProjectEntry.svelte

@@ -30,7 +30,10 @@
   $: mdAddTask = {name:"task.add", project};
   $: mdProjectEdit = {name:"project.edit", project};
   $: mdProjectDelete = {name:"project.delete", project};
-  $: progressAmount = project.tasks.map(t => Math.min(t.completedAmount, t.itemAmount) * t.item.groupWeight).reduce((n,m) => n+m, 0);
+  $: progressAmount = project.tasks.map(t => t.active 
+    ? Math.min(t.completedAmount, t.itemAmount) * t.item.groupWeight 
+    : t.itemAmount * t.item.groupWeight
+  ).reduce((n,m) => n+m, 0);
   $: progressTarget = Math.max(project.tasks.map(t => t.itemAmount * t.item.groupWeight).reduce((n,m) => n+m, 0), 1);
 </script>
 

svelte-ui/src/forms/LogAddForm.svelte

@@ -1,72 +0,0 @@
-<script lang="ts">
-  import stuffLogClient from "../clients/stufflog";
-import Checkbox from "../components/Checkbox.svelte";
-  import Modal from "../components/Modal.svelte";
-  import goalStore, { fpGoalStore } from "../stores/goal";
-  import logStore from "../stores/logs";
-  import modalStore from "../stores/modal";
-  import projectStore, { fpProjectStore } from "../stores/project";
-  import taskStore, { fpTaskStore } from "../stores/tasks";
-  import { formatFormTime } from "../utils/time";
-
-  const md = $modalStore;
-  if (md.name !== "log.add") {
-    throw new Error("Wrong form");
-  }
-  const task = md.task;
-
-  let loggedTime = formatFormTime(new Date);
-  let description = "";
-  let markInactive = task.completedAmount >= (task.itemAmount - 1);
-  let error = null;
-  let loading = false;
-
-  function onSubmit() {
-    loading = true;
-
-    stuffLogClient.createLog({
-      taskId: task.id, 
-      loggedTime: new Date(loggedTime).toISOString(),
-      description,
-    }).then(() => {
-      if (markInactive) {
-        return stuffLogClient.updateTask(task.id, {active: false})
-      }
-    }).then(() => {
-      modalStore.close();
-    }).finally(() => {
-      projectStore.markStale();
-      fpProjectStore.markStale();
-      goalStore.markStale();
-      fpGoalStore.markStale();
-      taskStore.markStale();
-      fpTaskStore.markStale();
-      logStore.markStale();
-    }).finally(() => {
-      loading = false;
-    })
-
-    error = null;
-  }
-
-  function onClose() {
-    modalStore.close();
-  }
-</script>
-
-<Modal show title="Add Log" error={error} closable on:close={onClose}>
-  <form on:submit|preventDefault={onSubmit}>
-    <label for="taskName">Task</label>
-    <input disabled name="taskName" type="text" bind:value={task.name} />
-
-    <label for="loggedTime">Logged Time</label>
-    <input name="loggedTime" type="datetime-local" bind:value={loggedTime} />
-    <label for="description">Description</label>
-    <textarea name="description" bind:value={description} />
-    <Checkbox bind:checked={markInactive} label="Mark task inactive/completed." />
-
-    <hr />
-
-    <button disabled={loading} type="submit">Add Log</button>
-  </form>
-</Modal>

svelte-ui/src/forms/LogDeleteForm.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-  import stuffLogClient from "../clients/stufflog";
-  import Modal from "../components/Modal.svelte";
-  import modalStore from "../stores/modal";
-  import goalStore, { fpGoalStore } from "../stores/goal";
-  import projectStore, { fpProjectStore } from "../stores/project";
-  import { formatFormTime } from "../utils/time";
-  import logStore from "../stores/logs";
-  import taskStore, { fpTaskStore } from "../stores/tasks";
-
-  const md = $modalStore;
-  if (md.name !== "log.delete") {
-    throw new Error("Wrong form");
-  }
-
-  let loggedTime = formatFormTime(new Date(md.log.loggedTime));
-  let description = md.log.description;
-  let error = null;
-  let loading = false;
-
-  function onSubmit() {
-    const md = $modalStore;
-    if (md.name !== "log.delete") {
-      throw new Error("Wrong form");
-    }
-
-    loading = true;
-
-    stuffLogClient.deleteLog(md.log.id).then(() => {
-      projectStore.markStale();
-      fpProjectStore.markStale();
-      goalStore.markStale();
-      fpGoalStore.markStale();
-      logStore.markStale();
-      taskStore.markStale();
-      fpTaskStore.markStale();
-
-      modalStore.close();
-    }).finally(() => {
-      loading = false;
-    })
-
-    error = null;
-  }
-
-  function onClose() {
-    modalStore.close();
-  }
-</script>
-
-<Modal show title="Delete Log" error={error} closable on:close={onClose}>
-  <form on:submit|preventDefault={onSubmit}>
-    <label for="taskName">Task</label>
-    <input disabled name="taskName" type="text" bind:value={md.log.task.name} />
-    <label for="loggedTime">Logged Time</label>
-    <input disabled name="loggedTime" type="datetime-local" bind:value={loggedTime} />
-    <label for="description">Description</label>
-    <textarea disabled name="description" bind:value={description} />
-
-    <hr />
-
-    <button disabled={loading} type="submit">Delete Log</button>
-  </form>
-</Modal>

svelte-ui/src/forms/LogEditForm.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-  import stuffLogClient from "../clients/stufflog";
-  import Modal from "../components/Modal.svelte";
-  import modalStore from "../stores/modal";
-  import goalStore, { fpGoalStore } from "../stores/goal";
-  import projectStore, { fpProjectStore } from "../stores/project";
-  import { formatFormTime } from "../utils/time";
-  import logStore from "../stores/logs";
-  import taskStore, { fpTaskStore } from "../stores/tasks";
-
-  const md = $modalStore;
-  if (md.name !== "log.edit") {
-    throw new Error("Wrong form");
-  }
-
-  let loggedTime = formatFormTime(new Date(md.log.loggedTime));
-  let description = md.log.description;
-  let error = null;
-  let loading = false;
-
-  function onSubmit() {
-    const md = $modalStore;
-    if (md.name !== "log.edit") {
-      throw new Error("Wrong form");
-    }
-
-    loading = true;
-
-    stuffLogClient.updateLog(md.log.id, { 
-      loggedTime: new Date(loggedTime).toISOString(),
-      description,
-    }).then(() => {
-      projectStore.markStale();
-      fpProjectStore.markStale();
-      goalStore.markStale();
-      fpGoalStore.markStale();
-      taskStore.markStale();
-      fpTaskStore.markStale();
-      logStore.markStale();
-
-      modalStore.close();
-    }).finally(() => {
-      loading = false;
-    })
-
-    error = null;
-  }
-
-  function onClose() {
-    modalStore.close();
-  }
-</script>
-
-<Modal show title="Edit Log" error={error} closable on:close={onClose}>
-  <form on:submit|preventDefault={onSubmit}>
-    <label for="taskName">Task</label>
-    <input disabled name="taskName" type="text" bind:value={md.log.task.name} />
-    <label for="loggedTime">Logged Time</label>
-    <input name="loggedTime" type="datetime-local" bind:value={loggedTime} />
-    <label for="description">Description</label>
-    <textarea name="description" bind:value={description} />
-
-    <hr />
-
-    <button disabled={loading} type="submit">Edit Log</button>
-  </form>
-</Modal>

svelte-ui/src/forms/LogForm.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import Checkbox from "../components/Checkbox.svelte";
+  import Modal from "../components/Modal.svelte";
+  import type { LogResult } from "../models/log";
+  import markStale from "../stores/markStale";
+  import modalStore from "../stores/modal";
+  import { formatFormTime } from "../utils/time";
+
+  export let deletion = false;
+  export let creation = false;
+
+  const md = $modalStore;
+  let log: LogResult = {
+    id: "",
+    taskId: "",
+    itemId: "",
+    loggedTime: new Date().toISOString(),
+    description: "",
+    task: null,
+    item: null,
+  }
+  let defaultMarkInactive = false;
+  let verb = "Add";
+  if (md.name === "log.edit" || md.name === "log.delete") {
+    log = md.log;
+    verb = (md.name === "log.edit") ? "Edit" : "Delete";
+  } else if (md.name === "log.add") {
+    defaultMarkInactive = md.task.completedAmount >= (md.task.itemAmount - 1);
+    log.task = md.task;
+  } else {
+    throw new Error("Wrong form")
+  }
+
+  let loggedTime = formatFormTime(log.loggedTime);
+  let description = log.description;
+  let markInactive = defaultMarkInactive;
+  let error = null;
+  let loading = false;
+
+  function onSubmit() {
+    loading = true;
+    error = null;
+
+    if (creation) {
+      stuffLogClient.createLog({
+        taskId: log.task.id, 
+        loggedTime: new Date(loggedTime).toISOString(),
+        description,
+      }).then(() => {
+        markStale("project", "task", "goal", "log");
+
+        if (markInactive) {
+          return stuffLogClient.updateTask(log.task.id, {active: false});
+        }
+      }).then(() => {
+        markStale("project", "task");
+
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
+      })
+    } else if (deletion) {
+      stuffLogClient.deleteLog(log.id).then(() => {
+        markStale("project", "task", "goal", "log");
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
+      })
+    } else {
+      stuffLogClient.updateLog(log.id, { 
+        loggedTime: new Date(loggedTime).toISOString(),
+        description,
+      }).then(() => {
+        markStale("project", "task", "goal", "log");
+        modalStore.close();
+      }).finally(() => {
+        loading = false;
+      })
+    }
+  }
+
+  function onClose() {
+    modalStore.close();
+  }
+</script>
+
+<Modal show title="Add Log" error={error} closable on:close={onClose}>
+  <form on:submit|preventDefault={onSubmit}>
+    <label for="taskName">Task</label>
+    <input disabled name="taskName" type="text" value={log.task.name} />
+    <label for="loggedTime">Logged Time</label>
+    <input disabled={deletion} name="loggedTime" type="datetime-local" bind:value={loggedTime} />
+    <label for="description">Description</label>
+    <textarea disabled={deletion} name="description" bind:value={description} />
+    <Checkbox disabled={deletion} bind:checked={markInactive} label="Mark task inactive/completed." />
+
+    <hr />
+
+    <button disabled={loading} type="submit">Add Log</button>
+  </form>
+</Modal>

svelte-ui/src/stores/markStale.ts

@@ -0,0 +1,31 @@
+import goalStore, { fpGoalStore } from "./goal";
+import groupStore from "./group";
+import logStore from "./logs";
+import projectStore, { fpProjectStore } from "./project";
+import taskStore, { fpTaskStore } from "./tasks";
+
+type ModelName = "goal" | "project" | "task" | "group" | "item" | "log"
+
+export default function markStale(...models: ModelName[]) {
+  if (models.includes("goal")) {
+    goalStore.markStale();
+    fpGoalStore.markStale();
+  }
+  if (models.includes("project")) {
+    projectStore.markStale();
+    fpProjectStore.markStale();
+  }
+  if (models.includes("task")) {
+    taskStore.markStale();
+    fpTaskStore.markStale();
+  }
+  if (models.includes("group")) {
+    groupStore.markStale();
+  }
+  if (models.includes("item")) {
+    // Do nothing.
+  }
+  if (models.includes("log")) {
+    logStore.markStale();
+  }
+}