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

<script lang="ts">
  import stuffLogClient from "../clients/stufflog";
  import Modal from "../components/Modal.svelte";
  import modalStore from "../stores/modal";
  import type { GoalResult } from "../models/goal";
  import { formatFormTime, nextMonth } from "../utils/time";
  import GroupSelect from "../components/GroupSelect.svelte";
  import markStale from "../stores/markStale";
import Checkbox from "../components/Checkbox.svelte";
import GroupItemSelect from "../components/GroupItemSelect.svelte";
import groupStore from "../stores/group";
import type { GroupResult } from "../models/group";

  export let deletion = false;
  export let creation = false;

  const md = $modalStore;

  let goal: GoalResult = {
    id: "",
    groupId: "",
    startTime: nextMonth(new Date()).toISOString(),
    endTime: new Date(nextMonth(nextMonth(new Date())).getTime() - 1).toISOString(),
    amount: 1,
    name: "",
    description: "",
    completedAmount: 0,
    unweighted: false,
    compositionMode: "item",
    itemId: null,
    group: {id: "", name: "", icon: "question", description: ""},
    items: [],
    logs: [],
  };
  let verb = "Add";
  if (md.name === "goal.edit" || md.name === "goal.delete") {
    goal = md.goal;
    verb = (md.name === "goal.edit") ? "Edit" : "Delete";
  } else if (md.name !== "goal.add") {
    throw new Error("Wrong form")
  }

  let name = goal.name;
  let description = goal.description;
  let groupId = goal.groupId;
  let amount = goal.amount;
  let unweighted = goal.unweighted;
  let itemId = goal.itemId || "";
  let compositionMode = goal.compositionMode;
  let startTime = formatFormTime(goal.startTime);
  let endTime = formatFormTime(goal.endTime);
  
  let error = null;
  let loading = false;
  let selectedGroup: GroupResult = null;

  function onSubmit() {
    loading = true;

    if (creation) {
      stuffLogClient.createGoal({
        startTime: new Date(startTime), 
        endTime: new Date(endTime),
        itemId: itemId || null,
        groupId, name, description, amount, unweighted, compositionMode
      }).then(() => {
        markStale("goal");
        modalStore.close();
      }).catch(err => {
        error = err.message ? err.message : err.toString();
      }).finally(() => {
        loading = false;
      })
    } else if (deletion) {
      stuffLogClient.deleteGoal(goal.id).then(() => {
        markStale("goal");
        modalStore.close();
      }).catch(err => {
        error = err.message ? err.message : err.toString();
      }).finally(() => {
        loading = false;
      })
    } else {
      stuffLogClient.updateGoal(goal.id, {
        startTime: new Date(startTime), 
        endTime: new Date(endTime),
        itemId: itemId || null,
        clearItemId: itemId === "",
        name, description, amount, compositionMode, unweighted,
      }).then(() => {
        markStale("goal");
        modalStore.close();
      }).catch(err => {
        error = err.message ? err.message : err.toString();
      }).finally(() => {
        loading = false;
      })
    }

    error = null;
  }

  function onClose() {
    modalStore.close();
  }

  $: selectedGroup = $groupStore.groups.find(g => g.id === groupId);
</script>

<Modal show title="{verb} Goal" 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="groupId">Group</label>
    <GroupSelect disabled={!creation} name="groupId" bind:value={groupId}/>
    <label for="groupId">Specific Item</label>
    <GroupItemSelect disabled={deletion} optional optionalLabel="Whole Group" group={selectedGroup} name="itemId" bind:value={itemId}/>
    <label for="amount">Amount</label>
    <input disabled={deletion} name="amount" type="number" bind:value={amount} />
    <label for="compositionMode">Composition Mode (does nothing right now)</label>
    <select name="compositionMode" bind:value={compositionMode} disabled={deletion}>
      <option value="item" selected={"item" === compositionMode}>Item</option>
      <option value="task" selected={"task" === compositionMode}>Task</option>
    </select>
    <label for="startTime">Start Time</label>
    <input disabled={deletion} name="startTime" type="datetime-local" bind:value={startTime} />
    <label for="endTime">End Time</label>
    <input disabled={deletion} name="endTime" type="datetime-local" bind:value={endTime} />
    <Checkbox bind:checked={unweighted} label="Unweighted (All items count as 1)" />

    <hr />

    <button disabled={loading} type="submit">{verb} Goal</button>
  </form>
</Modal>