add project groups to frontend.

svelte-ui/src/forms/ProjectForm.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+  import { navigate } from "svelte-routing";
+
   import stuffLogClient from "../clients/stufflog";
   import Checkbox from "../components/Checkbox.svelte";
   import DeadlineSelect from "../components/DeadlineSelect.svelte";
   import IconSelect from "../components/IconSelect.svelte";
   import Modal from "../components/Modal.svelte";
+  import ProjectGroupSelect from "../components/ProjectGroupSelect.svelte";
   import StartTimeSelect from "../components/StartTimeSelect.svelte";
   import StatusTagSelect from "../components/StatusTagSelect.svelte";
   import { DEFAULT_ICON } from "../external/icons";
@@ -18,6 +21,7 @@
   const md = $modalStore;
   let project: ProjectResult = {
     id: "",
+    groupId: null,
     name: "",
     description: "",
     icon: DEFAULT_ICON,
@@ -33,7 +37,9 @@
   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") {
+  } else if (md.name === "project.add") {
+    project.groupId = md.groupId;
+  } else {
     throw new Error("Wrong form")
   }
 
@@ -45,6 +51,7 @@
   let icon = project.icon;
   let favorite = project.favorite;
   let subtractAmount = project.subtractAmount;
+  let groupId = project.groupId || "";
   let error = null;
   let loading = false;
   let tags = project.tags.join(", ");
@@ -58,6 +65,7 @@
     if (creation) {
       stuffLogClient.createProject({
         active: statusTag === "",
+        groupId: groupId || void(0),
         startTime: ( startTime == "" ) ? null : new Date(startTime),
         endTime: ( endTime == "" ) ? null : new Date(endTime),
         statusTag: statusTag !== "" ? statusTag : null,
@@ -65,9 +73,11 @@
         tags: tags.length > 0 ? tags.split(",").map(t => t.trim()) : [],
 
         name, description, icon, favorite,
-      }).then(() => {
+      }).then(newProject => {
         markStale("project", "task");
         modalStore.close();
+
+        navigate(`/questlog/${newProject.groupId || "META_UNGROUPED"}/${newProject.id}`);
       }).catch(err => {
         error = err.message ? err.message : err.toString();
       }).finally(() => {
@@ -84,6 +94,7 @@
       })
     } else {
       stuffLogClient.updateProject(project.id, {
+        groupId: groupId || "",
         endTime: ( endTime == "" ) ? null : new Date(endTime),
         clearEndTime: ( endTime == "" ),
         startTime: ( startTime == "" ) ? null : new Date(startTime),
@@ -101,6 +112,8 @@
           markStale("log");
         }
         modalStore.close();
+
+        navigate(`/questlog/${groupId || "META_UNGROUPED"}/${project.id}`);
       }).catch(err => {
         error = err.message ? err.message : err.toString();
       }).finally(() => {
@@ -116,6 +129,8 @@
 
 <Modal show title="{verb} Project" error={error} closable on:close={onClose}>
   <form on:submit|preventDefault={onSubmit}>
+    <label for="group">Project Group</label>
+    <ProjectGroupSelect optional name="group" disabled={deletion} bind:value={groupId} />
     <label for="name">Name</label>
     <input disabled={deletion} name="name" type="text" bind:value={name} />
     <label for="description">Description</label>

svelte-ui/src/forms/ProjectGroupForm.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { navigate } from "svelte-routing";
+
+  import stuffLogClient from "../clients/stufflog";
+  import Modal from "../components/Modal.svelte";
+  import type ProjectGroup from "../models/projectgroup";
+  import markStale from "../stores/markStale";
+  import modalStore from "../stores/modal";
+
+  export let deletion = false;
+  export let creation = false;
+
+  const md = $modalStore;
+  let group: ProjectGroup = {
+    id: "",
+    name: "",
+    description: "",
+    abbreviation: "",
+    categoryNames: {},
+  }
+  let verb = "Add";
+  if (md.name === "projectgroup.edit" || md.name === "projectgroup.delete") {
+    group = md.projectGroup;
+    verb = (md.name === "projectgroup.edit") ? "Edit" : "Delete";
+  } else if (md.name !== "projectgroup.add") {
+    throw new Error("Wrong form")
+  }
+
+  let name = group.name;
+  let description = group.description;
+  let abbreviation = group.abbreviation;
+  let categoryNames = group.categoryNames || {};
+  let error = null;
+  let loading = false;
+  
+  function onSubmit() {
+    loading = true;
+    error = null;
+
+    if (creation) {
+      stuffLogClient.createProjectGroup({
+        name, abbreviation, description, categoryNames
+      }).then(newGroup => {
+        markStale("project");
+        modalStore.close();
+        navigate(`/questlog/${newGroup.id}`);
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
+      })
+    } else if (deletion) {
+      stuffLogClient.deleteProjectGroup(group.id).then(() => {
+        markStale("project");
+        modalStore.close();
+        navigate("/questlog/");
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
+      })
+    } else {
+      stuffLogClient.updateProjectGroup(group.id, {
+        name, abbreviation, description,
+        setCategoryNames: categoryNames,
+      }).then(() => {
+        markStale("project");
+        modalStore.close();
+      }).catch(err => {
+        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
+      })
+    }
+  }
+
+  function onClose() {
+    modalStore.close();
+  }
+</script>
+
+<Modal show title="{verb} Project Group" 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="abbreviation">Abbreviation</label>
+    <input disabled={deletion} name="abbreviation" bind:value={abbreviation} />
+    <label for="description">Description</label>
+    <textarea disabled={deletion} name="description" bind:value={description} />
+
+    <label for="name">Custom Labels</label>
+    <input disabled={deletion} name="name" type="text" placeholder="Deadlines" bind:value={categoryNames["deadlines"]} />
+    <input disabled={deletion} name="name" type="text" placeholder="Active" bind:value={categoryNames["active"]} />
+    <input disabled={deletion} name="name" type="text" placeholder="Background" bind:value={categoryNames["background"]} />
+    <input disabled={deletion} name="name" type="text" placeholder="Progress" bind:value={categoryNames["progress"]} />
+    <input disabled={deletion} name="name" type="text" placeholder="To Do" bind:value={categoryNames["to do"]} />
+    <input disabled={deletion} name="name" type="text" placeholder="On Hold" bind:value={categoryNames["on hold"]} />
+    <input disabled={deletion} name="name" type="text" placeholder="Completed" bind:value={categoryNames["completed"]} />
+    <input disabled={deletion} name="name" type="text" placeholder="Failed" bind:value={categoryNames["failed"]} />
+
+    <hr />
+
+    <button disabled={loading} type="submit">{verb} Project Group</button>
+  </form>
+</Modal>