stufflog2/svelte-ui/src/forms/ProjectGroupForm.svelte

<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>