Browse Source

clean up item form.

main
Gisle Aune 4 years ago
parent
commit
ad34116598
  1. 10
      svelte-ui/src/App.svelte
  2. 4
      svelte-ui/src/components/ItemEntry.svelte
  3. 20
      svelte-ui/src/forms/GoalForm.svelte
  4. 14
      svelte-ui/src/forms/GroupForm.svelte
  5. 59
      svelte-ui/src/forms/ItemAddForm.svelte
  6. 55
      svelte-ui/src/forms/ItemDeleteForm.svelte
  7. 64
      svelte-ui/src/forms/ItemEditForm.svelte
  8. 95
      svelte-ui/src/forms/ItemForm.svelte
  9. 6
      svelte-ui/src/stores/modal.ts

10
svelte-ui/src/App.svelte

@ -11,9 +11,6 @@
import TaskAddForm from "./forms/TaskAddForm.svelte";
import TaskEditForm from "./forms/TaskEditForm.svelte";
import TaskDeleteForm from "./forms/TaskDeleteForm.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 GoalForm from "./forms/GoalForm.svelte";
import LogForm from "./forms/LogForm.svelte";
@ -25,6 +22,7 @@
import Menu from "./components/Menu.svelte";
import authStore from "./stores/auth";
import ItemForm from "./forms/ItemForm.svelte";
onMount(() => {
authStore.check()
@ -53,9 +51,9 @@
<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>
<ModalRoute name="item.add"> <ItemForm creation/> </ModalRoute>
<ModalRoute name="item.edit"> <ItemForm/> </ModalRoute>
<ModalRoute name="item.delete"> <ItemForm deletion/> </ModalRoute>
<ModalRoute name="group.add"> <GroupForm creation/> </ModalRoute>
<ModalRoute name="group.edit"> <GroupForm/> </ModalRoute>
<ModalRoute name="group.delete"> <GroupForm deletion/> </ModalRoute>

4
svelte-ui/src/components/ItemEntry.svelte

@ -19,8 +19,8 @@
}
});
$: mdItemEdit = {name: "item.edit", item, group};
$: mdItemDelete = {name: "item.delete", item, group};
$: mdItemEdit = {name: "item.edit", item: {...item, group}};
$: mdItemDelete = {name: "item.delete", item: {...item, group}};
</script>
<div class="item">

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

@ -2,15 +2,10 @@
import stuffLogClient from "../clients/stufflog";
import Modal from "../components/Modal.svelte";
import modalStore from "../stores/modal";
import goalStore, { fpGoalStore } from "../stores/goal";
import groupStore from "../stores/goal";
import IconSelect from "../components/IconSelect.svelte";
import { DEFAULT_ICON } from "../external/icons";
import type { IconName } from "../external/icons";
import type { GoalResult } from "../models/goal";
import projectStore, { fpProjectStore } from "../stores/project";
import { formatFormTime, nextMonth } from "../utils/time";
import GroupSelect from "../components/GroupSelect.svelte";
import { formatFormTime, nextMonth } from "../utils/time";
import GroupSelect from "../components/GroupSelect.svelte";
import markStale from "../stores/markStale";
export let deletion = false;
export let creation = false;
@ -57,8 +52,7 @@ import GroupSelect from "../components/GroupSelect.svelte";
endTime: new Date(endTime),
groupId, name, description, amount,
}).then(() => {
goalStore.markStale();
fpGoalStore.markStale();
markStale("goal");
modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();
@ -67,8 +61,7 @@ import GroupSelect from "../components/GroupSelect.svelte";
})
} else if (deletion) {
stuffLogClient.deleteGoal(goal.id).then(() => {
goalStore.markStale();
fpGoalStore.markStale();
markStale("goal");
modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();
@ -81,8 +74,7 @@ import GroupSelect from "../components/GroupSelect.svelte";
endTime: new Date(endTime),
name, description, amount,
}).then(() => {
goalStore.markStale();
fpGoalStore.markStale();
markStale("goal");
modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();

14
svelte-ui/src/forms/GroupForm.svelte

@ -2,13 +2,11 @@
import stuffLogClient from "../clients/stufflog";
import Modal from "../components/Modal.svelte";
import modalStore from "../stores/modal";
import goalStore, { fpGoalStore } from "../stores/goal";
import groupStore from "../stores/group";
import IconSelect from "../components/IconSelect.svelte";
import { DEFAULT_ICON } from "../external/icons";
import type { IconName } from "../external/icons";
import type { GroupResult } from "../models/group";
import projectStore, { fpProjectStore } from "../stores/project";
import markStale from "../stores/markStale";
export let deletion = false;
export let creation = false;
@ -42,7 +40,7 @@ import projectStore, { fpProjectStore } from "../stores/project";
stuffLogClient.createGroup({
name, description, icon,
}).then(() => {
groupStore.markStale();
markStale("group");
modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();
@ -51,7 +49,7 @@ import projectStore, { fpProjectStore } from "../stores/project";
})
} else if (deletion) {
stuffLogClient.deleteGroup(group.id).then(() => {
groupStore.markStale();
markStale("group");
modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();
@ -62,11 +60,7 @@ import projectStore, { fpProjectStore } from "../stores/project";
stuffLogClient.updateGroup(group.id, {
name, description, icon,
}).then(() => {
groupStore.markStale();
goalStore.markStale();
fpGoalStore.markStale();
projectStore.markStale();
fpProjectStore.markStale();
markStale("group", "goal", "project", "task");
modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();

59
svelte-ui/src/forms/ItemAddForm.svelte

@ -1,59 +0,0 @@
<script lang="ts">
import stuffLogClient from "../clients/stufflog";
import Modal from "../components/Modal.svelte";
import modalStore from "../stores/modal";
import goalStore, { fpGoalStore } from "../stores/goal";
import groupStore from "../stores/group";
const md = $modalStore;
if (md.name !== "item.add") {
throw new Error("Wrong form");
}
let group = md.group;
let name = "";
let description = "";
let groupWeight = 1;
let error = null;
let loading = false;
function onSubmit() {
loading = true;
stuffLogClient.createItem({
groupId: group.id,
name, description, groupWeight,
}).then(() => {
groupStore.markStale();
goalStore.markStale();
fpGoalStore.markStale();
modalStore.close();
}).finally(() => {
loading = false;
})
error = null;
}
function onClose() {
modalStore.close();
}
</script>
<Modal show title="Add Item" error={error} closable on:close={onClose}>
<form on:submit|preventDefault={onSubmit}>
<label for="groupName">Group</label>
<input disabled name="groupName" type="text" value={group.name} />
<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="groupWeight">Group Weight</label>
<input name="groupWeight" type="number" bind:value={groupWeight} />
<hr />
<button disabled={loading} type="submit">Add Item</button>
</form>
</Modal>

55
svelte-ui/src/forms/ItemDeleteForm.svelte

@ -1,55 +0,0 @@
<script lang="ts">
import stuffLogClient from "../clients/stufflog";
import Modal from "../components/Modal.svelte";
import modalStore from "../stores/modal";
import groupStore from "../stores/group";
const md = $modalStore;
if (md.name !== "item.delete") {
throw new Error("Wrong form");
}
let item = md.item;
let group = md.group;
let name = item.name;
let description = item.description;
let groupWeight = item.groupWeight;
let error = null;
let loading = false;
function onSubmit() {
loading = true;
stuffLogClient.deleteItem(item.id).then(() => {
groupStore.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 Item" error={error} closable on:close={onClose}>
<form on:submit|preventDefault={onSubmit}>
<label for="groupName">Group</label>
<input disabled name="groupName" type="text" value={group.name} />
<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="groupWeight">Group Weight</label>
<input disabled name="groupWeight" type="number" value={groupWeight} />
<hr />
<button disabled={loading} type="submit">Delete Item</button>
</form>
</Modal>

64
svelte-ui/src/forms/ItemEditForm.svelte

@ -1,64 +0,0 @@
<script lang="ts">
import stuffLogClient from "../clients/stufflog";
import Modal from "../components/Modal.svelte";
import modalStore from "../stores/modal";
import goalStore, { fpGoalStore } from "../stores/goal";
import groupStore from "../stores/group";
import projectStore, { fpProjectStore } from "../stores/project";
import taskStore, { fpTaskStore } from "../stores/tasks";
const md = $modalStore;
if (md.name !== "item.edit") {
throw new Error("Wrong form");
}
let item = md.item;
let group = md.group;
let name = item.name;
let description = item.description;
let groupWeight = item.groupWeight;
let error = null;
let loading = false;
function onSubmit() {
loading = true;
stuffLogClient.updateItem(item.id, {
name, description, groupWeight,
}).then(() => {
groupStore.markStale();
goalStore.markStale();
fpGoalStore.markStale();
projectStore.markStale();
fpProjectStore.markStale();
taskStore.markStale();
fpTaskStore.markStale();
modalStore.close();
}).finally(() => {
loading = false;
})
error = null;
}
function onClose() {
modalStore.close();
}
</script>
<Modal show title="Edit Item" error={error} closable on:close={onClose}>
<form on:submit|preventDefault={onSubmit}>
<label for="groupName">Group</label>
<input disabled name="groupName" type="text" value={group.name} />
<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="groupWeight">Group Weight</label>
<input name="groupWeight" type="number" bind:value={groupWeight} />
<hr />
<button disabled={loading} type="submit">Edit Item</button>
</form>
</Modal>

95
svelte-ui/src/forms/ItemForm.svelte

@ -0,0 +1,95 @@
<script lang="ts">
import stuffLogClient from "../clients/stufflog";
import Modal from "../components/Modal.svelte";
import modalStore from "../stores/modal";
import type { ItemResult } from "../models/item";
import markStale from "../stores/markStale";
export let deletion = false;
export let creation = false;
const md = $modalStore;
let item: ItemResult = {
id: "",
groupId: "",
groupWeight: 1,
name: "",
description: "",
icon: "question",
group: null,
}
let verb = "Add";
if (md.name === "item.edit" || md.name === "item.delete") {
item = md.item;
verb = (md.name === "item.edit") ? "Edit" : "Delete";
} else if (md.name === "item.add") {
item.group = md.group;
} else {
throw new Error("Wrong form")
}
let name = item.name;
let description = item.description;
let groupWeight = item.groupWeight;
let error = null;
let loading = false;
function onSubmit() {
loading = true;
if (creation) {
stuffLogClient.createItem({
groupId: item.group.id,
name, description, groupWeight,
}).then(() => {
markStale("goal", "group");
modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
})
} else if (deletion) {
stuffLogClient.deleteItem(item.id).then(() => {
markStale("group");
modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
})
} else {
stuffLogClient.updateItem(item.id, {
name, description, groupWeight,
}).then(() => {
markStale("goal", "group", "project", "task");
modalStore.close();
}).finally(() => {
loading = false;
})
}
error = null;
}
function onClose() {
modalStore.close();
}
</script>
<Modal show title="{verb} Item" error={error} closable on:close={onClose}>
<form on:submit|preventDefault={onSubmit}>
<label for="groupName">Group</label>
<input disabled name="groupName" type="text" value={item.group.name} />
<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="groupWeight">Group Weight</label>
<input disabled={deletion} name="groupWeight" type="number" bind:value={groupWeight} />
<hr />
<button disabled={loading} type="submit">{verb} Item</button>
</form>
</Modal>

6
svelte-ui/src/stores/modal.ts

@ -1,7 +1,7 @@
import { writable } from "svelte/store";
import type { GoalResult } from "../models/goal";
import type { GroupResult } from "../models/group";
import type Item from "../models/item";
import type { ItemResult } from "../models/item";
import type { LogResult } from "../models/log";
import type { ProjectResult } from "../models/project";
import type { TaskResult } from "../models/task";
@ -21,8 +21,8 @@ export type ModalData =
| { name: "group.edit", group: GroupResult }
| { name: "group.delete", group: GroupResult }
| { name: "item.add", group: GroupResult }
| { name: "item.edit", item: Item, group: GroupResult }
| { name: "item.delete", item: Item, group: GroupResult }
| { name: "item.edit", item: ItemResult }
| { name: "item.delete", item: ItemResult }
| { name: "goal.add" }
| { name: "goal.edit", goal: GoalResult }
| { name: "goal.delete", goal: GoalResult }

Loading…
Cancel
Save