gisle
/
stufflog2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

clean up item form.
continuous-integration/drone/push Build is passing
Details

main
Gisle Aune 4 years ago
parent
59a4f905f8
commit
ad34116598
9 changed files with 114 additions and 213 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      svelte-ui/src/App.svelte
  2. 4
      svelte-ui/src/components/ItemEntry.svelte
  3. 16
      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
View File

@ -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
View File

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

16
svelte-ui/src/forms/GoalForm.svelte
View File

@ -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 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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

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

Write Preview
Loading…
Cancel
Save