Browse Source

clean up project form.

main
Gisle Aune 4 years ago
parent
commit
59a4f905f8
  1. 24
      svelte-ui/src/App.svelte
  2. 6
      svelte-ui/src/forms/LogForm.svelte
  3. 59
      svelte-ui/src/forms/ProjectAddForm.svelte
  4. 61
      svelte-ui/src/forms/ProjectDeleteForm.svelte
  5. 67
      svelte-ui/src/forms/ProjectEditForm.svelte
  6. 109
      svelte-ui/src/forms/ProjectForm.svelte
  7. 6
      svelte-ui/src/utils/time.ts

24
svelte-ui/src/App.svelte

@ -1,28 +1,30 @@
<script lang="ts"> <script lang="ts">
import { Router, Link, Route } from "svelte-routing"; import { Router, Link, Route } from "svelte-routing";
import { onMount } from "svelte"; import { onMount } from "svelte";
import Menu from "./components/Menu.svelte";
import FrontPage from "./pages/FrontPage.svelte"; import FrontPage from "./pages/FrontPage.svelte";
import ProjectPage from "./pages/ProjectPage.svelte"; import ProjectPage from "./pages/ProjectPage.svelte";
import ModalRoute from "./components/ModalRoute.svelte";
import LogsPage from "./pages/LogsPage.svelte"; import LogsPage from "./pages/LogsPage.svelte";
import GroupPage from "./pages/GroupPage.svelte";
import GoalPage from "./pages/GoalPage.svelte";
import TaskAddForm from "./forms/TaskAddForm.svelte"; import TaskAddForm from "./forms/TaskAddForm.svelte";
import TaskEditForm from "./forms/TaskEditForm.svelte"; import TaskEditForm from "./forms/TaskEditForm.svelte";
import TaskDeleteForm from "./forms/TaskDeleteForm.svelte"; import TaskDeleteForm from "./forms/TaskDeleteForm.svelte";
import ProjectAddForm from "./forms/ProjectAddForm.svelte";
import ProjectEditForm from "./forms/ProjectEditForm.svelte";
import ProjectDeleteForm from "./forms/ProjectDeleteForm.svelte";
import GroupPage from "./pages/GroupPage.svelte";
import ItemAddForm from "./forms/ItemAddForm.svelte"; import ItemAddForm from "./forms/ItemAddForm.svelte";
import ItemEditForm from "./forms/ItemEditForm.svelte"; import ItemEditForm from "./forms/ItemEditForm.svelte";
import ItemDeleteForm from "./forms/ItemDeleteForm.svelte"; import ItemDeleteForm from "./forms/ItemDeleteForm.svelte";
import GroupForm from "./forms/GroupForm.svelte"; import GroupForm from "./forms/GroupForm.svelte";
import GoalPage from "./pages/GoalPage.svelte";
import GoalForm from "./forms/GoalForm.svelte"; import GoalForm from "./forms/GoalForm.svelte";
import LogForm from "./forms/LogForm.svelte"; import LogForm from "./forms/LogForm.svelte";
import ProjectForm from "./forms/ProjectForm.svelte";
import LoginForm from "./forms/LoginForm.svelte"; import LoginForm from "./forms/LoginForm.svelte";
import authStore from "./stores/auth";
import ModalRoute from "./components/ModalRoute.svelte";
import FocusHandler from "./components/FocusHandler.svelte"; import FocusHandler from "./components/FocusHandler.svelte";
import Menu from "./components/Menu.svelte";
import authStore from "./stores/auth";
onMount(() => { onMount(() => {
authStore.check() authStore.check()
@ -48,9 +50,9 @@
<ModalRoute name="task.add"> <TaskAddForm/> </ModalRoute> <ModalRoute name="task.add"> <TaskAddForm/> </ModalRoute>
<ModalRoute name="task.edit"> <TaskEditForm/> </ModalRoute> <ModalRoute name="task.edit"> <TaskEditForm/> </ModalRoute>
<ModalRoute name="task.delete"> <TaskDeleteForm/> </ModalRoute> <ModalRoute name="task.delete"> <TaskDeleteForm/> </ModalRoute>
<ModalRoute name="project.add"> <ProjectAddForm/> </ModalRoute>
<ModalRoute name="project.edit"> <ProjectEditForm/> </ModalRoute>
<ModalRoute name="project.delete"> <ProjectDeleteForm/> </ModalRoute>
<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.add"> <ItemAddForm/> </ModalRoute>
<ModalRoute name="item.edit"> <ItemEditForm/> </ModalRoute> <ModalRoute name="item.edit"> <ItemEditForm/> </ModalRoute>
<ModalRoute name="item.delete"> <ItemDeleteForm/> </ModalRoute> <ModalRoute name="item.delete"> <ItemDeleteForm/> </ModalRoute>

6
svelte-ui/src/forms/LogForm.svelte

@ -78,6 +78,8 @@
}).then(() => { }).then(() => {
markStale("project", "task", "goal", "log"); markStale("project", "task", "goal", "log");
modalStore.close(); modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();
}).finally(() => { }).finally(() => {
loading = false; loading = false;
}) })
@ -89,7 +91,7 @@
} }
</script> </script>
<Modal show title="Add Log" error={error} closable on:close={onClose}>
<Modal show title="{verb} Log" error={error} closable on:close={onClose}>
<form on:submit|preventDefault={onSubmit}> <form on:submit|preventDefault={onSubmit}>
<label for="taskName">Task</label> <label for="taskName">Task</label>
<input disabled name="taskName" type="text" value={log.task.name} /> <input disabled name="taskName" type="text" value={log.task.name} />
@ -101,6 +103,6 @@
<hr /> <hr />
<button disabled={loading} type="submit">Add Log</button>
<button disabled={loading} type="submit">{verb} Log</button>
</form> </form>
</Modal> </Modal>

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

@ -1,59 +0,0 @@
<script lang="ts">
import stuffLogClient from "../clients/stufflog";
import IconSelect from "../components/IconSelect.svelte";
import Modal from "../components/Modal.svelte";
import { iconNames } from "../external/icons";
import modalStore from "../stores/modal";
import projectStore, { fpProjectStore } from "../stores/project";
let endTime = "";
let name = "";
let description = "";
let icon = iconNames[0];
let error = null;
let loading = false;
function onSubmit() {
loading = true;
stuffLogClient.createProject({
active: true,
endTime: ( endTime == "" ) ? null : new Date(endTime),
name, description, icon,
}).then(() => {
projectStore.markStale();
if (endTime !== "") {
fpProjectStore.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 Project" 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="itemId">Icon</label>
<IconSelect bind:value={icon} />
<label for="endTime">Deadline (Optional)</label>
<input name="endTime" type="datetime-local" bind:value={endTime} />
<hr />
<button disabled={loading} type="submit">Add Project</button>
</form>
</Modal>

61
svelte-ui/src/forms/ProjectDeleteForm.svelte

@ -1,61 +0,0 @@
<script lang="ts">
import stuffLogClient from "../clients/stufflog";
import IconSelect from "../components/IconSelect.svelte";
import Modal from "../components/Modal.svelte";
import type { IconName } from "../external/icons";
import modalStore from "../stores/modal";
import projectStore, { fpProjectStore } from "../stores/project";
import { formatFormTime } from "../utils/time";
const md = $modalStore;
if (md.name !== "project.delete") {
throw new Error("Wrong form");
}
const project = md.project;
let endTime = project.endTime ? formatFormTime(project.endTime) : "";
let name = project.name;
let description = project.description;
let icon = project.icon as IconName;
let error = null;
let loading = false;
function onSubmit() {
loading = true;
stuffLogClient.deleteProject(project.id).then(() => {
projectStore.markStale();
if (endTime !== "") {
fpProjectStore.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 Project" 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="itemId">Icon</label>
<IconSelect disabled value={icon} />
<label for="endTime">Deadline (Optional)</label>
<input disabled name="endTime" type="datetime-local" value={endTime} />
<hr />
<button disabled={loading} type="submit">Delete Project</button>
</form>
</Modal>

67
svelte-ui/src/forms/ProjectEditForm.svelte

@ -1,67 +0,0 @@
<script lang="ts">
import stuffLogClient from "../clients/stufflog";
import Checkbox from "../components/Checkbox.svelte";
import IconSelect from "../components/IconSelect.svelte";
import Modal from "../components/Modal.svelte";
import type { IconName } from "../external/icons";
import modalStore from "../stores/modal";
import projectStore, { fpProjectStore } from "../stores/project";
import { formatFormTime } from "../utils/time";
const md = $modalStore;
if (md.name !== "project.edit") {
throw new Error("Wrong form");
}
const project = md.project;
let endTime = project.endTime ? formatFormTime(project.endTime) : "";
let active = project.active;
let name = project.name;
let description = project.description;
let icon = project.icon as IconName;
let error = null;
let loading = false;
function onSubmit() {
loading = true;
stuffLogClient.updateProject(project.id, {
endTime: ( endTime == "" ) ? null : new Date(endTime),
clearEndTime: ( endTime == "" ),
name, active, description, icon,
}).then(() => {
projectStore.markStale();
fpProjectStore.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 Project" 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="itemId">Icon</label>
<IconSelect bind:value={icon} />
<label for="endTime">Deadline (Optional)</label>
<input name="endTime" type="datetime-local" bind:value={endTime} />
<Checkbox bind:checked={active} label="Project is active/incomplete." />
<hr />
<button disabled={loading} type="submit">Edit Project</button>
</form>
</Modal>

109
svelte-ui/src/forms/ProjectForm.svelte

@ -0,0 +1,109 @@
<script lang="ts">
import stuffLogClient from "../clients/stufflog";
import Checkbox from "../components/Checkbox.svelte";
import IconSelect from "../components/IconSelect.svelte";
import Modal from "../components/Modal.svelte";
import { iconNames } from "../external/icons";
import type { ProjectResult } from "../models/project";
import markStale from "../stores/markStale";
import modalStore from "../stores/modal";
import projectStore, { fpProjectStore } from "../stores/project";
import { formatFormTime } from "../utils/time";
export let deletion = false;
export let creation = false;
const md = $modalStore;
let project: ProjectResult = {
id: "",
name: "",
description: "",
icon: iconNames[0],
active: true,
createdTime: "",
tasks: [],
}
let verb = "Add";
if (md.name === "project.edit" || md.name === "project.delete") {
project = md.project;
verb = (md.name === "project.edit") ? "Edit" : "Delete";
} else if (md.name !== "project.add") {
throw new Error("Wrong form")
}
let endTime = formatFormTime(project.endTime);
let name = project.name;
let description = project.description;
let completed = !project.active;
let icon = project.icon;
let error = null;
let loading = false;
function onSubmit() {
loading = true;
error = null;
if (creation) {
stuffLogClient.createProject({
active: !completed,
endTime: ( endTime == "" ) ? null : new Date(endTime),
name, description, icon,
}).then(() => {
markStale("project", "task");
modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
})
} else if (deletion) {
stuffLogClient.deleteProject(project.id).then(() => {
markStale("project", "task");
modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
})
} else {
stuffLogClient.updateProject(project.id, {
endTime: ( endTime == "" ) ? null : new Date(endTime),
clearEndTime: ( endTime == "" ),
active: !completed,
name, description, icon,
}).then(() => {
projectStore.markStale();
fpProjectStore.markStale();
modalStore.close();
}).catch(err => {
error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
})
}
}
function onClose() {
modalStore.close();
}
</script>
<Modal show title="{verb} Project" 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="itemId">Icon</label>
<IconSelect disabled={deletion} bind:value={icon} />
<label for="endTime">Deadline (Optional)</label>
<input disabled={deletion} name="endTime" type="datetime-local" bind:value={endTime} />
<Checkbox disabled={deletion} bind:checked={completed} label="Project is completed." />
<hr />
<button disabled={loading} type="submit">{verb} Project</button>
</form>
</Modal>

6
svelte-ui/src/utils/time.ts

@ -26,9 +26,15 @@ export function formatWeekdayDate(time: Date | string | number): string {
} }
export function formatFormTime(time: Date | string): string { export function formatFormTime(time: Date | string): string {
if (time === "") {
return "";
}
if (!(time instanceof Date)) { if (!(time instanceof Date)) {
time = new Date(time); time = new Date(time);
} }
if (Number.isNaN(time.getTime()) || time.getTime() < 86400000) {
return "";
}
return `${time.getFullYear()}-${pad(time.getMonth()+1)}-${pad(time.getDate())}T${pad(time.getHours())}:${pad(time.getMinutes())}`; return `${time.getFullYear()}-${pad(time.getMonth()+1)}-${pad(time.getDate())}T${pad(time.getHours())}:${pad(time.getMinutes())}`;
} }

Loading…
Cancel
Save