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

clean up task modal and add non-segmented progress bars.
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
gisle
2021-01-10 13:11:52 +01:00
parent ad34116598
commit 98c7a66fd0
13 changed files with 186 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
svelte-ui/src/forms/TaskAddForm.svelte
-82
View File
@@ -1,82 +0,0 @@
<script lang="ts">
import stuffLogClient from "../clients/stufflog";
import ItemSelect from "../components/ItemSelect.svelte";
import Modal from "../components/Modal.svelte";
import type { ProjectResult } from "../models/project";
import modalStore from "../stores/modal";
import projectStore, { fpProjectStore } from "../stores/project";
import taskStore, { fpTaskStore } from "../stores/tasks";
let project: ProjectResult
let endTime = "";
let itemId = "";
let name = "";
let description = "";
let itemAmount = 1;
let error = null;
let loading = false;
function onSubmit() {
loading = true;
stuffLogClient.createTask({
projectId: project.id,
itemId: itemId,
active: true,
endTime: ( endTime == "") ? null : new Date(endTime),
name, description, itemAmount,
}).then(() => {
projectStore.markStale();
fpProjectStore.markStale();
taskStore.markStale();
fpTaskStore.markStale();
modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
})
error = null;
}
function onClose() {
modalStore.close();
}
$: {
const md = $modalStore;
if (md.name !== "task.add") {
throw new Error("Wrong form");
}
if (itemId === "") {
project = md.project;
if (project.tasks.length > 0) {
itemId = project.tasks[0].itemId;
}
}
}
</script>
<Modal show title="Add Task" error={error} closable on:close={onClose}>
<form on:submit|preventDefault={onSubmit}>
<label for="projectName">Project</label>
<input disabled name="projectName" type="text" value={project.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="itemId">Item</label>
<ItemSelect name="itemId" bind:value={itemId} />
<label for="itemAmount">Amount</label>
<input name="itemAmount" type="number" bind:value={itemAmount} />
<label for="endTime">Deadline (Optional)</label>
<input name="endTime" type="datetime-local" bind:value={endTime} />
<hr />
<button disabled={loading} type="submit">Add Task</button>
</form>
</Modal>
svelte-ui/src/forms/TaskDeleteForm.svelte
-68
View File
@@ -1,68 +0,0 @@
<script lang="ts">
import stuffLogClient from "../clients/stufflog";
import Checkbox from "../components/Checkbox.svelte";
import Modal from "../components/Modal.svelte";
import goalStore, { fpGoalStore } from "../stores/goal";
import modalStore from "../stores/modal";
import projectStore, { fpProjectStore } from "../stores/project";
import taskStore, { fpTaskStore } from "../stores/tasks";
import { formatFormTime } from "../utils/time";
const md = $modalStore;
if (md.name !== "task.delete") {
throw new Error("Wrong form");
}
let task = md.task
let name = task.name;
let description = task.description;
let itemAmount = task.itemAmount;
let completed = !task.active;
let endTime = task.endTime ? formatFormTime(task.endTime) : "";
let error = null;
let loading = false;
function onSubmit() {
loading = true;
stuffLogClient.deleteTask(task.id).then(() => {
projectStore.markStale();
fpProjectStore.markStale();
goalStore.markStale();
fpGoalStore.markStale();
taskStore.markStale();
fpTaskStore.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="Delete Task" error={error} closable on:close={onClose}>
<form on:submit|preventDefault={onSubmit}>
<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="name">Item</label>
<input disabled name="name" type="text" value={task.item.name} />
<label for="itemAmount">Amount</label>
<input disabled name="itemAmount" type="number" value={itemAmount} />
<label for="endTime">Deadline (Optional)</label>
<input disabled name="endTime" type="datetime-local" value={endTime} />
<Checkbox disabled bind:checked={completed} label="Task is completed." />
<hr />
<button disabled={loading} type="submit">Delete Task</button>
</form>
</Modal>
svelte-ui/src/forms/TaskEditForm.svelte
-74
View File
@@ -1,74 +0,0 @@
<script lang="ts">
import stuffLogClient from "../clients/stufflog";
import Checkbox from "../components/Checkbox.svelte";
import Modal from "../components/Modal.svelte";
import goalStore, { fpGoalStore } from "../stores/goal";
import modalStore from "../stores/modal";
import projectStore, { fpProjectStore } from "../stores/project";
import taskStore, { fpTaskStore } from "../stores/tasks";
import { formatFormTime } from "../utils/time";
const md = $modalStore;
if (md.name !== "task.edit") {
throw new Error("Wrong form");
}
let task = md.task
let name = task.name;
let description = task.description;
let itemAmount = task.itemAmount;
let completed = !task.active;
let endTime = task.endTime ? formatFormTime(task.endTime) : "";
let error = null;
let loading = false;
function onSubmit() {
loading = true;
stuffLogClient.updateTask(task.id, {
endTime: (endTime == "") ? null : new Date(endTime),
clearEndTime: endTime == "",
active: !completed,
name, description, itemAmount,
}).then(() => {
projectStore.markStale();
fpProjectStore.markStale();
goalStore.markStale();
fpGoalStore.markStale();
taskStore.markStale();
fpTaskStore.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="Add Task" error={error} closable on:close={onClose}>
<form on:submit|preventDefault={onSubmit}>
<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="name">Item</label>
<input disabled name="name" type="text" value={task.item.name} />
<label for="itemAmount">Amount</label>
<input name="itemAmount" type="number" bind:value={itemAmount} />
<label for="endTime">Deadline (Optional)</label>
<input name="endTime" type="datetime-local" bind:value={endTime} />
<Checkbox bind:checked={completed} label="Task is completed." />
<hr />
<button disabled={loading} type="submit">Add Task</button>
</form>
</Modal>
svelte-ui/src/forms/TaskForm.svelte
+122
View File
@@ -0,0 +1,122 @@
<script lang="ts">
import stuffLogClient from "../clients/stufflog";
import Checkbox from "../components/Checkbox.svelte";
import ItemSelect from "../components/ItemSelect.svelte";
import Modal from "../components/Modal.svelte";
import { iconNames } from "../external/icons";
import type { TaskResult } from "../models/task";
import markStale from "../stores/markStale";
import modalStore from "../stores/modal";
import { formatFormTime } from "../utils/time";
export let deletion = false;
export let creation = false;
const md = $modalStore;
let task: TaskResult = {
id: "",
itemId: "",
projectId: "",
itemAmount: 1,
name: "",
description: "",
icon: iconNames[0],
active: true,
createdTime: "",
item: null,
logs: [],
completedAmount: 0,
}
let verb = "Add";
if (md.name === "task.edit" || md.name === "task.delete") {
task = md.task;
verb = (md.name === "task.edit") ? "Edit" : "Delete";
} else if (md.name === "task.add") {
task.projectId = md.project.id;
task.project = md.project;
if (md.project.tasks.length > 0) {
task.itemId = md.project.tasks[0].itemId;
}
} else {
throw new Error("Wrong form")
}
let endTime = formatFormTime(task.endTime);
let itemId = task.itemId;
let name = task.name;
let description = task.description;
let itemAmount = task.itemAmount;
let completed = !task.active;
let error = null;
let loading = false;
function onSubmit() {
loading = true;
error = null;
if (creation) {
stuffLogClient.createTask({
projectId: task.projectId,
itemId: itemId,
active: !completed,
endTime: (endTime == "") ? null : new Date(endTime),
name, description, itemAmount,
}).then(() => {
markStale("project", "task");
modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
})
} else if (deletion) {
stuffLogClient.deleteTask(task.id).then(() => {
markStale("goal", "project", "task");
modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
})
} else {
stuffLogClient.updateTask(task.id, {
endTime: (endTime == "") ? null : new Date(endTime),
clearEndTime: endTime == "",
active: !completed,
name, description, itemAmount,
}).then(() => {
markStale("goal", "project", "task");
modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
})
}
}
</script>
<Modal show title="{verb} Task" error={error} closable on:close={modalStore.close}>
<form on:submit|preventDefault={onSubmit}>
<label for="projectName">Project</label>
<input disabled name="projectName" type="text" value={task.project.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="itemId">Item</label>
<ItemSelect disabled={!creation} name="itemId" bind:value={itemId} />
<label for="itemAmount">Amount</label>
<input disabled={deletion} name="itemAmount" type="number" bind:value={itemAmount} />
<label for="endTime">Deadline (Optional)</label>
<input disabled={deletion} name="endTime" type="datetime-local" bind:value={endTime} />
<Checkbox disabled={deletion} bind:checked={completed} label="Task is completed." />
<hr />
<button disabled={loading} type="submit">{verb} Task</button>
</form>
</Modal>