clean up item form.

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>