clean up item form.

svelte-ui/src/App.svelte

@@ -11,9 +11,6 @@
 	import TaskAddForm from "./forms/TaskAddForm.svelte";
 	import TaskEditForm from "./forms/TaskEditForm.svelte";
 	import TaskDeleteForm from "./forms/TaskDeleteForm.svelte";
-	import ItemAddForm from "./forms/ItemAddForm.svelte";
-	import ItemEditForm from "./forms/ItemEditForm.svelte";
-	import ItemDeleteForm from "./forms/ItemDeleteForm.svelte";
 	import GroupForm from "./forms/GroupForm.svelte";
 	import GoalForm from "./forms/GoalForm.svelte";
 	import LogForm from "./forms/LogForm.svelte";
@@ -25,6 +22,7 @@
 	import Menu from "./components/Menu.svelte";
 
 	import authStore from "./stores/auth";
+import ItemForm from "./forms/ItemForm.svelte";
 
 	onMount(() => {
 		authStore.check()
@@ -53,9 +51,9 @@
 		<ModalRoute name="project.add"> <ProjectForm creation/> </ModalRoute>
 		<ModalRoute name="project.edit"> <ProjectForm/> </ModalRoute>
 		<ModalRoute name="project.delete"> <ProjectForm deletion/> </ModalRoute>
-		<ModalRoute name="item.add"> <ItemAddForm/> </ModalRoute>
-		<ModalRoute name="item.edit"> <ItemEditForm/> </ModalRoute>
-		<ModalRoute name="item.delete"> <ItemDeleteForm/> </ModalRoute>
+		<ModalRoute name="item.add"> <ItemForm creation/> </ModalRoute>
+		<ModalRoute name="item.edit"> <ItemForm/> </ModalRoute>
+		<ModalRoute name="item.delete"> <ItemForm deletion/> </ModalRoute>
 		<ModalRoute name="group.add"> <GroupForm creation/> </ModalRoute>
 		<ModalRoute name="group.edit"> <GroupForm/> </ModalRoute>
 		<ModalRoute name="group.delete"> <GroupForm deletion/> </ModalRoute>

svelte-ui/src/components/ItemEntry.svelte

@@ -19,8 +19,8 @@
     }
   });
   
-  $: mdItemEdit = {name: "item.edit", item, group};
-  $: mdItemDelete = {name: "item.delete", item, group};
+  $: mdItemEdit = {name: "item.edit", item: {...item, group}};
+  $: mdItemDelete = {name: "item.delete", item: {...item, group}};
 </script>
 
 <div class="item">

svelte-ui/src/forms/GoalForm.svelte

@@ -2,15 +2,10 @@
   import stuffLogClient from "../clients/stufflog";
   import Modal from "../components/Modal.svelte";
   import modalStore from "../stores/modal";
-  import goalStore, { fpGoalStore } from "../stores/goal";
-  import groupStore from "../stores/goal";
-  import IconSelect from "../components/IconSelect.svelte";
-  import { DEFAULT_ICON } from "../external/icons";
-  import type { IconName } from "../external/icons";
   import type { GoalResult } from "../models/goal";
-  import projectStore, { fpProjectStore } from "../stores/project";
-import { formatFormTime, nextMonth } from "../utils/time";
-import GroupSelect from "../components/GroupSelect.svelte";
+  import { formatFormTime, nextMonth } from "../utils/time";
+  import GroupSelect from "../components/GroupSelect.svelte";
+  import markStale from "../stores/markStale";
 
   export let deletion = false;
   export let creation = false;
@@ -57,8 +52,7 @@ import GroupSelect from "../components/GroupSelect.svelte";
         endTime: new Date(endTime),
         groupId, name, description, amount,
       }).then(() => {
-        goalStore.markStale();
-        fpGoalStore.markStale();
+        markStale("goal");
         modalStore.close();
       }).catch(err => {
         error = err.message ? err.message : err.toString();
@@ -67,8 +61,7 @@ import GroupSelect from "../components/GroupSelect.svelte";
       })
     } else if (deletion) {
       stuffLogClient.deleteGoal(goal.id).then(() => {
-        goalStore.markStale();
-        fpGoalStore.markStale();
+        markStale("goal");
         modalStore.close();
       }).catch(err => {
         error = err.message ? err.message : err.toString();
@@ -81,8 +74,7 @@ import GroupSelect from "../components/GroupSelect.svelte";
         endTime: new Date(endTime),
         name, description, amount,
       }).then(() => {
-        goalStore.markStale();
-        fpGoalStore.markStale();
+        markStale("goal");
         modalStore.close();
       }).catch(err => {
         error = err.message ? err.message : err.toString();

svelte-ui/src/forms/GroupForm.svelte

@@ -2,13 +2,11 @@
   import stuffLogClient from "../clients/stufflog";
   import Modal from "../components/Modal.svelte";
   import modalStore from "../stores/modal";
-  import goalStore, { fpGoalStore } from "../stores/goal";
-  import groupStore from "../stores/group";
   import IconSelect from "../components/IconSelect.svelte";
   import { DEFAULT_ICON } from "../external/icons";
   import type { IconName } from "../external/icons";
   import type { GroupResult } from "../models/group";
-import projectStore, { fpProjectStore } from "../stores/project";
+  import markStale from "../stores/markStale";
 
   export let deletion = false;
   export let creation = false;
@@ -42,7 +40,7 @@ import projectStore, { fpProjectStore } from "../stores/project";
       stuffLogClient.createGroup({
         name, description, icon,
       }).then(() => {
-        groupStore.markStale();
+        markStale("group");
         modalStore.close();
       }).catch(err => {
         error = err.message ? err.message : err.toString();
@@ -51,7 +49,7 @@ import projectStore, { fpProjectStore } from "../stores/project";
       })
     } else if (deletion) {
       stuffLogClient.deleteGroup(group.id).then(() => {
-        groupStore.markStale();
+        markStale("group");
         modalStore.close();
       }).catch(err => {
         error = err.message ? err.message : err.toString();
@@ -62,11 +60,7 @@ import projectStore, { fpProjectStore } from "../stores/project";
       stuffLogClient.updateGroup(group.id, {
         name, description, icon,
       }).then(() => {
-        groupStore.markStale();
-        goalStore.markStale();
-        fpGoalStore.markStale();
-        projectStore.markStale();
-        fpProjectStore.markStale();
+        markStale("group", "goal", "project", "task");
         modalStore.close();
       }).catch(err => {
         error = err.message ? err.message : err.toString();

svelte-ui/src/forms/ItemAddForm.svelte

@@ -1,59 +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 groupStore from "../stores/group";
-
-  const md = $modalStore;
-  if (md.name !== "item.add") {
-    throw new Error("Wrong form");
-  }
-
-  let group = md.group;
-  let name = "";
-  let description = "";
-  let groupWeight = 1;
-  let error = null;
-  let loading = false;
-
-  function onSubmit() {
-    loading = true;
-
-    stuffLogClient.createItem({
-      groupId: group.id, 
-
-      name, description, groupWeight,
-    }).then(() => {
-      groupStore.markStale();
-      goalStore.markStale();
-      fpGoalStore.markStale();
-      modalStore.close();
-    }).finally(() => {
-      loading = false;
-    })
-
-    error = null;
-  }
-
-  function onClose() {
-    modalStore.close();
-  }
-</script>
-
-<Modal show title="Add Item" error={error} closable on:close={onClose}>
-  <form on:submit|preventDefault={onSubmit}>
-    <label for="groupName">Group</label>
-    <input disabled name="groupName" type="text" value={group.name} />
-    <label for="name">Name</label>
-    <input name="name" type="text" bind:value={name} />
-    <label for="description">Description</label>
-    <textarea name="description" bind:value={description} />
-    <label for="groupWeight">Group Weight</label>
-    <input name="groupWeight" type="number" bind:value={groupWeight} />
-
-    <hr />
-
-    <button disabled={loading} type="submit">Add Item</button>
-  </form>
-</Modal>

svelte-ui/src/forms/ItemDeleteForm.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-  import stuffLogClient from "../clients/stufflog";
-  import Modal from "../components/Modal.svelte";
-  import modalStore from "../stores/modal";
-  import groupStore from "../stores/group";
-
-  const md = $modalStore;
-  if (md.name !== "item.delete") {
-    throw new Error("Wrong form");
-  }
-
-  let item = md.item;
-  let group = md.group;
-  let name = item.name;
-  let description = item.description;
-  let groupWeight = item.groupWeight;
-  let error = null;
-  let loading = false;
-
-  function onSubmit() {
-    loading = true;
-
-    stuffLogClient.deleteItem(item.id).then(() => {
-      groupStore.markStale();
-      modalStore.close();
-    }).catch(err => {
-      error = err.message ? err.message : err.toString();
-    }).finally(() => {
-      loading = false;
-    })
-
-    error = null;
-  }
-
-  function onClose() {
-    modalStore.close();
-  }
-</script>
-
-<Modal show title="Edit Item" error={error} closable on:close={onClose}>
-  <form on:submit|preventDefault={onSubmit}>
-    <label for="groupName">Group</label>
-    <input disabled name="groupName" type="text" value={group.name} />
-    <label for="name">Name</label>
-    <input disabled name="name" type="text" value={name} />
-    <label for="description">Description</label>
-    <textarea disabled name="description" value={description} />
-    <label for="groupWeight">Group Weight</label>
-    <input disabled name="groupWeight" type="number" value={groupWeight} />
-
-    <hr />
-
-    <button disabled={loading} type="submit">Delete Item</button>
-  </form>
-</Modal>

svelte-ui/src/forms/ItemEditForm.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 groupStore from "../stores/group";
-  import projectStore, { fpProjectStore } from "../stores/project";
-  import taskStore, { fpTaskStore } from "../stores/tasks";
-
-  const md = $modalStore;
-  if (md.name !== "item.edit") {
-    throw new Error("Wrong form");
-  }
-
-  let item = md.item;
-  let group = md.group;
-  let name = item.name;
-  let description = item.description;
-  let groupWeight = item.groupWeight;
-  let error = null;
-  let loading = false;
-
-  function onSubmit() {
-    loading = true;
-
-    stuffLogClient.updateItem(item.id, {
-      name, description, groupWeight,
-    }).then(() => {
-      groupStore.markStale();
-      goalStore.markStale();
-      fpGoalStore.markStale();
-      projectStore.markStale();
-      fpProjectStore.markStale();
-      taskStore.markStale();
-      fpTaskStore.markStale();
-      modalStore.close();
-    }).finally(() => {
-      loading = false;
-    })
-
-    error = null;
-  }
-
-  function onClose() {
-    modalStore.close();
-  }
-</script>
-
-<Modal show title="Edit Item" error={error} closable on:close={onClose}>
-  <form on:submit|preventDefault={onSubmit}>
-    <label for="groupName">Group</label>
-    <input disabled name="groupName" type="text" value={group.name} />
-    <label for="name">Name</label>
-    <input name="name" type="text" bind:value={name} />
-    <label for="description">Description</label>
-    <textarea name="description" bind:value={description} />
-    <label for="groupWeight">Group Weight</label>
-    <input name="groupWeight" type="number" bind:value={groupWeight} />
-
-    <hr />
-
-    <button disabled={loading} type="submit">Edit Item</button>
-  </form>
-</Modal>

svelte-ui/src/forms/ItemForm.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import Modal from "../components/Modal.svelte";
+  import modalStore from "../stores/modal";
+  import type { ItemResult } from "../models/item";
+  import markStale from "../stores/markStale";
+
+  export let deletion = false;
+  export let creation = false;
+
+  const md = $modalStore;
+  let item: ItemResult = {
+    id: "",
+    groupId: "",
+    groupWeight: 1,
+    name: "",
+    description: "",
+    icon: "question",
+    group: null,
+  }
+  let verb = "Add";
+  if (md.name === "item.edit" || md.name === "item.delete") {
+    item = md.item;
+    verb = (md.name === "item.edit") ? "Edit" : "Delete";
+  } else if (md.name === "item.add") {
+    item.group = md.group;
+  } else {
+    throw new Error("Wrong form")
+  }
+
+  let name = item.name;
+  let description = item.description;
+  let groupWeight = item.groupWeight;
+  let error = null;
+  let loading = false;
+
+  function onSubmit() {
+    loading = true;
+
+    if (creation) {
+      stuffLogClient.createItem({
+        groupId: item.group.id,
+        name, description, groupWeight,
+      }).then(() => {
+        markStale("goal", "group");
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
+      })
+    } else if (deletion) {
+      stuffLogClient.deleteItem(item.id).then(() => {
+        markStale("group");
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
+      })
+    } else {
+      stuffLogClient.updateItem(item.id, {
+        name, description, groupWeight,
+      }).then(() => {
+        markStale("goal", "group", "project", "task");
+        modalStore.close();
+      }).finally(() => {
+        loading = false;
+      })
+    }
+
+    error = null;
+  }
+
+  function onClose() {
+    modalStore.close();
+  }
+</script>
+
+<Modal show title="{verb} Item" error={error} closable on:close={onClose}>
+  <form on:submit|preventDefault={onSubmit}>
+    <label for="groupName">Group</label>
+    <input disabled name="groupName" type="text" value={item.group.name} />
+    <label for="name">Name</label>
+    <input disabled={deletion} name="name" type="text" bind:value={name} />
+    <label for="description">Description</label>
+    <textarea disabled={deletion} name="description" bind:value={description} />
+    <label for="groupWeight">Group Weight</label>
+    <input disabled={deletion} name="groupWeight" type="number" bind:value={groupWeight} />
+
+    <hr />
+
+    <button disabled={loading} type="submit">{verb} Item</button>
+  </form>
+</Modal>

svelte-ui/src/stores/modal.ts

@@ -1,7 +1,7 @@
 import { writable } from "svelte/store";
 import type { GoalResult } from "../models/goal";
 import type { GroupResult } from "../models/group";
-import type Item from "../models/item";
+import type { ItemResult } from "../models/item";
 import type { LogResult } from "../models/log";
 import type { ProjectResult } from "../models/project";
 import type { TaskResult } from "../models/task";
@@ -21,8 +21,8 @@ export type ModalData =
   | { name: "group.edit", group: GroupResult }
   | { name: "group.delete", group: GroupResult }
   | { name: "item.add", group: GroupResult }
-  | { name: "item.edit", item: Item, group: GroupResult }
-  | { name: "item.delete", item: Item, group: GroupResult }
+  | { name: "item.edit", item: ItemResult }
+  | { name: "item.delete", item: ItemResult }
   | { name: "goal.add" }
   | { name: "goal.edit", goal: GoalResult }
   | { name: "goal.delete", goal: GoalResult }