clean up project form.

svelte-ui/src/App.svelte

@@ -1,28 +1,30 @@
 <script lang="ts">
 	import { Router, Link, Route } from "svelte-routing";
 	import { onMount } from "svelte";
-	import Menu from "./components/Menu.svelte";
+
 	import FrontPage from "./pages/FrontPage.svelte";
 	import ProjectPage from "./pages/ProjectPage.svelte";
-	import ModalRoute from "./components/ModalRoute.svelte";
 	import LogsPage from "./pages/LogsPage.svelte";
+	import GroupPage from "./pages/GroupPage.svelte";
+	import GoalPage from "./pages/GoalPage.svelte";
+
 	import TaskAddForm from "./forms/TaskAddForm.svelte";
 	import TaskEditForm from "./forms/TaskEditForm.svelte";
 	import TaskDeleteForm from "./forms/TaskDeleteForm.svelte";
-	import ProjectAddForm from "./forms/ProjectAddForm.svelte";
-	import ProjectEditForm from "./forms/ProjectEditForm.svelte";
-	import ProjectDeleteForm from "./forms/ProjectDeleteForm.svelte";
-	import GroupPage from "./pages/GroupPage.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 GoalPage from "./pages/GoalPage.svelte";
 	import GoalForm from "./forms/GoalForm.svelte";
 	import LogForm from "./forms/LogForm.svelte";
+	import ProjectForm from "./forms/ProjectForm.svelte";
 	import LoginForm from "./forms/LoginForm.svelte";
-	import authStore from "./stores/auth";
+
+	import ModalRoute from "./components/ModalRoute.svelte";
 	import FocusHandler from "./components/FocusHandler.svelte";
+	import Menu from "./components/Menu.svelte";
+
+	import authStore from "./stores/auth";
 
 	onMount(() => {
 		authStore.check()
@@ -48,9 +50,9 @@
 		<ModalRoute name="task.add"> <TaskAddForm/> </ModalRoute>
 		<ModalRoute name="task.edit"> <TaskEditForm/> </ModalRoute>
 		<ModalRoute name="task.delete"> <TaskDeleteForm/> </ModalRoute>
-		<ModalRoute name="project.add"> <ProjectAddForm/> </ModalRoute>
-		<ModalRoute name="project.edit"> <ProjectEditForm/> </ModalRoute>
-		<ModalRoute name="project.delete"> <ProjectDeleteForm/> </ModalRoute>
+		<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>

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>

svelte-ui/src/utils/time.ts

@@ -26,9 +26,15 @@ export function formatWeekdayDate(time: Date | string | number): string {
 }
 
 export function formatFormTime(time: Date | string): string {
+  if (time === "") {
+    return "";
+  }
   if (!(time instanceof Date)) {
     time = new Date(time);
   }
+  if (Number.isNaN(time.getTime()) || time.getTime() < 86400000) {
+    return "";
+  }
 
   return `${time.getFullYear()}-${pad(time.getMonth()+1)}-${pad(time.getDate())}T${pad(time.getHours())}:${pad(time.getMinutes())}`;
 }