|
|
<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 { 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"; import DateRangeSelect from "../components/DateRangeSelect.svelte"; import { allOffsets, rangeFromDates } from "../utils/date-range";
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 range = rangeFromDates(new Date(goal.startTime), new Date(goal.endTime), allOffsets); let taskFilter = goal.taskFilter || ""; let itemFilter = goal.itemFilter || "";
let error = null; let loading = false; let selectedGroup: GroupResult = null;
function onSubmit() { loading = true; const [startTime, endTime] = range.calculate(new Date());
if (creation) { stuffLogClient.createGoal({ startTime, endTime, itemId: itemId || null, taskFilter: taskFilter.toLowerCase() || null, itemFilter: itemFilter.toLowerCase() || 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, endTime, itemId: itemId || null, clearItemId: itemId === "", taskFilter: taskFilter.toLowerCase() || null, clearTaskFilter: taskFilter === "", itemFilter: itemFilter.toLowerCase() || null, clearItemFilter: itemFilter === "", 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</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> <option value="project" selected={"project" === compositionMode}>Project</option> </select> <DateRangeSelect disabled={deletion} bind:value={range} /> <label for="taskFilter">Task Filter (Optional)</label> <input disabled={deletion} name="taskFilter" type="text" bind:value={taskFilter} /> <label for="itemFilter">Item Filter (Optional)</label> <input disabled={deletion} name="itemFilter" type="text" bind:value={itemFilter} /> <Checkbox bind:checked={unweighted} label="Unweighted (All items count as 1)" />
<hr />
<button disabled={loading} type="submit">{verb} Goal</button> </form> </Modal>
|