clean up project form.

svelte-ui/src/forms/LogForm.svelte

@@ -78,6 +78,8 @@
       }).then(() => {
         markStale("project", "task", "goal", "log");
         modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
       }).finally(() => {
         loading = false;
       })
@@ -89,7 +91,7 @@
   }
 </script>
 
-<Modal show title="Add Log" error={error} closable on:close={onClose}>
+<Modal show title="{verb} 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} />
@@ -101,6 +103,6 @@
 
     <hr />
 
-    <button disabled={loading} type="submit">Add Log</button>
+    <button disabled={loading} type="submit">{verb} Log</button>
   </form>
 </Modal>

svelte-ui/src/forms/ProjectAddForm.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-  import stuffLogClient from "../clients/stufflog";
-  import IconSelect from "../components/IconSelect.svelte";
-  import Modal from "../components/Modal.svelte";
-  import { iconNames } from "../external/icons";
-  import modalStore from "../stores/modal";
-  import projectStore, { fpProjectStore } from "../stores/project";
-
-  let endTime = "";
-  let name = "";
-  let description = "";
-  let icon = iconNames[0];
-  let error = null;
-  let loading = false;
-
-  function onSubmit() {
-    loading = true;
-
-    stuffLogClient.createProject({
-      active: true,
-      endTime: ( endTime == "" ) ? null : new Date(endTime),
-
-      name, description, icon,
-    }).then(() => {
-      projectStore.markStale();
-      if (endTime !== "") {
-        fpProjectStore.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="Add Project" error={error} closable on:close={onClose}>
-  <form on:submit|preventDefault={onSubmit}>
-    <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="itemId">Icon</label>
-    <IconSelect bind:value={icon} />
-    <label for="endTime">Deadline (Optional)</label>
-    <input name="endTime" type="datetime-local" bind:value={endTime} />
-
-    <hr />
-
-    <button disabled={loading} type="submit">Add Project</button>
-  </form>
-</Modal>

svelte-ui/src/forms/ProjectDeleteForm.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-  import stuffLogClient from "../clients/stufflog";
-  import IconSelect from "../components/IconSelect.svelte";
-  import Modal from "../components/Modal.svelte";
-  import type { IconName } from "../external/icons";
-  import modalStore from "../stores/modal";
-  import projectStore, { fpProjectStore } from "../stores/project";
-  import { formatFormTime } from "../utils/time";
-
-  const md = $modalStore;
-  if (md.name !== "project.delete") {
-    throw new Error("Wrong form");
-  }
-  const project = md.project;
-
-  let endTime = project.endTime ? formatFormTime(project.endTime) : "";
-  let name = project.name;
-  let description = project.description;
-  let icon = project.icon as IconName;
-  let error = null;
-  let loading = false;
-
-  function onSubmit() {
-    loading = true;
-
-    stuffLogClient.deleteProject(project.id).then(() => {
-      projectStore.markStale();
-      if (endTime !== "") {
-        fpProjectStore.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="Delete Project" error={error} closable on:close={onClose}>
-  <form on:submit|preventDefault={onSubmit}>
-    <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="itemId">Icon</label>
-    <IconSelect disabled value={icon} />
-    <label for="endTime">Deadline (Optional)</label>
-    <input disabled name="endTime" type="datetime-local" value={endTime} />
-
-    <hr />
-
-    <button disabled={loading} type="submit">Delete Project</button>
-  </form>
-</Modal>

svelte-ui/src/forms/ProjectEditForm.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-  import stuffLogClient from "../clients/stufflog";
-import Checkbox from "../components/Checkbox.svelte";
-  import IconSelect from "../components/IconSelect.svelte";
-  import Modal from "../components/Modal.svelte";
-  import type { IconName } from "../external/icons";
-  import modalStore from "../stores/modal";
-  import projectStore, { fpProjectStore } from "../stores/project";
-  import { formatFormTime } from "../utils/time";
-
-  const md = $modalStore;
-  if (md.name !== "project.edit") {
-    throw new Error("Wrong form");
-  }
-  const project = md.project;
-
-  let endTime = project.endTime ? formatFormTime(project.endTime) : "";
-  let active = project.active;
-  let name = project.name;
-  let description = project.description;
-  let icon = project.icon as IconName;
-  let error = null;
-  let loading = false;
-
-  function onSubmit() {
-    loading = true;
-
-    stuffLogClient.updateProject(project.id, {
-      endTime: ( endTime == "" ) ? null : new Date(endTime),
-      clearEndTime: ( endTime == "" ),
-
-      name, active, description, icon,
-    }).then(() => {
-      projectStore.markStale();
-      fpProjectStore.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 Project" error={error} closable on:close={onClose}>
-  <form on:submit|preventDefault={onSubmit}>
-    <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="itemId">Icon</label>
-    <IconSelect bind:value={icon} />
-    <label for="endTime">Deadline (Optional)</label>
-    <input name="endTime" type="datetime-local" bind:value={endTime} />
-    <Checkbox bind:checked={active} label="Project is active/incomplete." />
-
-    <hr />
-
-    <button disabled={loading} type="submit">Edit Project</button>
-  </form>
-</Modal>

svelte-ui/src/forms/ProjectForm.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import stuffLogClient from "../clients/stufflog";
+  import Checkbox from "../components/Checkbox.svelte";
+  import IconSelect from "../components/IconSelect.svelte";
+  import Modal from "../components/Modal.svelte";
+  import { iconNames } from "../external/icons";
+  import type { ProjectResult } from "../models/project";
+  import markStale from "../stores/markStale";
+  import modalStore from "../stores/modal";
+  import projectStore, { fpProjectStore } from "../stores/project";
+  import { formatFormTime } from "../utils/time";
+
+  export let deletion = false;
+  export let creation = false;
+
+  const md = $modalStore;
+  let project: ProjectResult = {
+    id: "",
+    name: "",
+    description: "",
+    icon: iconNames[0],
+    active: true,
+    createdTime: "",
+    tasks: [],
+  }
+  let verb = "Add";
+  if (md.name === "project.edit" || md.name === "project.delete") {
+    project = md.project;
+    verb = (md.name === "project.edit") ? "Edit" : "Delete";
+  } else if (md.name !== "project.add") {
+    throw new Error("Wrong form")
+  }
+
+  let endTime = formatFormTime(project.endTime);
+  let name = project.name;
+  let description = project.description;
+  let completed = !project.active;
+  let icon = project.icon;
+  let error = null;
+  let loading = false;
+
+  function onSubmit() {
+    loading = true;
+    error = null;
+
+    if (creation) {
+      stuffLogClient.createProject({
+        active: !completed,
+        endTime: ( endTime == "" ) ? null : new Date(endTime),
+
+        name, description, icon,
+      }).then(() => {
+        markStale("project", "task");
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
+      })
+    } else if (deletion) {
+      stuffLogClient.deleteProject(project.id).then(() => {
+        markStale("project", "task");
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
+      })
+    } else {
+      stuffLogClient.updateProject(project.id, {
+        endTime: ( endTime == "" ) ? null : new Date(endTime),
+        clearEndTime: ( endTime == "" ),
+        active: !completed,
+
+        name, description, icon,
+      }).then(() => {
+        projectStore.markStale();
+        fpProjectStore.markStale();
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
+      })
+    }
+  }
+
+  function onClose() {
+    modalStore.close();
+  }
+</script>
+
+<Modal show title="{verb} Project" error={error} closable on:close={onClose}>
+  <form on:submit|preventDefault={onSubmit}>
+    <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="itemId">Icon</label>
+    <IconSelect disabled={deletion} bind:value={icon} />
+    <label for="endTime">Deadline (Optional)</label>
+    <input disabled={deletion} name="endTime" type="datetime-local" bind:value={endTime} />
+    <Checkbox disabled={deletion} bind:checked={completed} label="Project is completed." />
+
+    <hr />
+
+    <button disabled={loading} type="submit">{verb} Project</button>
+  </form>
+</Modal>