Browse Source

clean up task modal and add non-segmented progress bars.

main
Gisle Aune 3 years ago
parent
commit
98c7a66fd0
  1. 7
      models/task.go
  2. 18
      services/loader.go
  3. 12
      svelte-ui/src/App.svelte
  4. 3
      svelte-ui/src/components/ItemSelect.svelte
  5. 4
      svelte-ui/src/components/Modal.svelte
  6. 29
      svelte-ui/src/components/Progress.svelte
  7. 2
      svelte-ui/src/components/ProjectEntry.svelte
  8. 9
      svelte-ui/src/components/TaskEntry.svelte
  9. 82
      svelte-ui/src/forms/TaskAddForm.svelte
  10. 68
      svelte-ui/src/forms/TaskDeleteForm.svelte
  11. 74
      svelte-ui/src/forms/TaskEditForm.svelte
  12. 122
      svelte-ui/src/forms/TaskForm.svelte
  13. 2
      svelte-ui/src/models/task.ts

7
models/task.go

@ -52,9 +52,10 @@ type TaskUpdate struct {
type TaskResult struct {
Task
Item *Item `json:"item"`
Logs []*Log `json:"logs"`
CompletedAmount int `json:"completedAmount"`
Item *Item `json:"item"`
Logs []*Log `json:"logs"`
CompletedAmount int `json:"completedAmount"`
Project *Project `json:"project,omitempty"`
}
type TaskFilter struct {

18
services/loader.go

@ -329,6 +329,7 @@ func (l *Loader) FindTask(ctx context.Context, id string) (*models.TaskResult, e
result := &models.TaskResult{Task: *task}
result.Item, _ = l.DB.Items().Find(ctx, task.ItemID)
result.Project, _ = l.DB.Projects().Find(ctx, task.ProjectID)
result.Logs, err = l.DB.Logs().List(ctx, models.LogFilter{
UserID: task.UserID,
IDs: []string{task.ID},
@ -354,9 +355,11 @@ func (l *Loader) ListTasks(ctx context.Context, filter models.TaskFilter) ([]*mo
taskIDs := make([]string, 0, len(tasks))
itemIDs := stringset.New()
projectIDs := stringset.New()
for _, task := range tasks {
taskIDs = append(taskIDs, task.ID)
itemIDs.Add(task.ItemID)
projectIDs.Add(task.ProjectID)
}
logs, err := l.DB.Logs().List(ctx, models.LogFilter{
@ -375,6 +378,14 @@ func (l *Loader) ListTasks(ctx context.Context, filter models.TaskFilter) ([]*mo
return nil, err
}
projects, err := l.DB.Projects().List(ctx, models.ProjectFilter{
UserID: auth.UserID(ctx),
IDs: projectIDs.Strings(),
})
if err != nil {
return nil, err
}
results := make([]*models.TaskResult, 0, len(tasks))
for _, task := range tasks {
result := &models.TaskResult{
@ -395,6 +406,13 @@ func (l *Loader) ListTasks(ctx context.Context, filter models.TaskFilter) ([]*mo
}
}
for _, project := range projects {
if project.ID == task.ProjectID {
result.Project = project
break
}
}
result.CompletedAmount = len(result.Logs)
results = append(results, result)

12
svelte-ui/src/App.svelte

@ -8,13 +8,12 @@
import GroupPage from "./pages/GroupPage.svelte";
import GoalPage from "./pages/GoalPage.svelte";
import TaskAddForm from "./forms/TaskAddForm.svelte";
import TaskEditForm from "./forms/TaskEditForm.svelte";
import TaskDeleteForm from "./forms/TaskDeleteForm.svelte";
import GroupForm from "./forms/GroupForm.svelte";
import GoalForm from "./forms/GoalForm.svelte";
import LogForm from "./forms/LogForm.svelte";
import ProjectForm from "./forms/ProjectForm.svelte";
import ItemForm from "./forms/ItemForm.svelte";
import TaskForm from "./forms/TaskForm.svelte";
import LoginForm from "./forms/LoginForm.svelte";
import ModalRoute from "./components/ModalRoute.svelte";
@ -22,7 +21,6 @@
import Menu from "./components/Menu.svelte";
import authStore from "./stores/auth";
import ItemForm from "./forms/ItemForm.svelte";
onMount(() => {
authStore.check()
@ -45,9 +43,9 @@ import ItemForm from "./forms/ItemForm.svelte";
<ModalRoute name="log.add"> <LogForm creation/> </ModalRoute>
<ModalRoute name="log.edit"> <LogForm/> </ModalRoute>
<ModalRoute name="log.delete"> <LogForm deletion/> </ModalRoute>
<ModalRoute name="task.add"> <TaskAddForm/> </ModalRoute>
<ModalRoute name="task.edit"> <TaskEditForm/> </ModalRoute>
<ModalRoute name="task.delete"> <TaskDeleteForm/> </ModalRoute>
<ModalRoute name="task.add"> <TaskForm creation/> </ModalRoute>
<ModalRoute name="task.edit"> <TaskForm/> </ModalRoute>
<ModalRoute name="task.delete"> <TaskForm deletion/> </ModalRoute>
<ModalRoute name="project.add"> <ProjectForm creation/> </ModalRoute>
<ModalRoute name="project.edit"> <ProjectForm/> </ModalRoute>
<ModalRoute name="project.delete"> <ProjectForm deletion/> </ModalRoute>

3
svelte-ui/src/components/ItemSelect.svelte

@ -3,6 +3,7 @@
export let value = "";
export let name = "";
export let disabled = false;
$: {
if ($groupStore.stale && !$groupStore.loading) {
@ -20,7 +21,7 @@
}
</script>
<select name={name} bind:value={value} disabled={$groupStore.loading}>
<select name={name} bind:value={value} disabled={disabled || $groupStore.loading}>
{#each $groupStore.groups as group (group.id)}
<optgroup label={group.name}>
{#each group.items as item (item.id)}

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

@ -169,6 +169,10 @@ div.modal :global(input), div.modal :global(select), div.modal :global(textarea)
div.modal :global(select) {
padding-left: 0.5ch;
}
div.modal :global(select:disabled) {
background: #4a4a4a;
color: #aaa;
}
div.modal :global(input:disabled) {
background: #444;
color: #aaa;

29
svelte-ui/src/components/Progress.svelte

@ -18,6 +18,7 @@
let onClass = COLORS[1];
let ons = 0;
let offs = 1;
let nonSegmented = false;
$: {
let level = Math.floor(count / target);
@ -41,16 +42,27 @@
onClass = "green"
offClass = "none"
}
// Mark it non-segmented if the target is too high. This prevents a clunky progress bar,
// or a browser freeze if you set the target very high.
if (target > 50) {
nonSegmented = true;
}
}
</script>
<div class="bar" class:thin>
{#each {length: ons} as _}
<div class={"on " + onClass}></div>
{/each}
{#each {length: offs} as _}
<div class={"off " + offClass}></div>
{/each}
{#if nonSegmented}
<div style="flex: {ons}" class={"non-segmented on " + onClass}></div>
<div style="flex: {offs}" class={"non-segmented off " + offClass}></div>
{:else}
{#each {length: ons} as _}
<div class={"on " + onClass}></div>
{/each}
{#each {length: offs} as _}
<div class={"off " + offClass}></div>
{/each}
{/if}
</div>
<style>
@ -71,6 +83,11 @@
border: 1px solid #000;
}
div.non-segmented {
flex-grow: inherit;
flex-basis: inherit;
}
div.none { background-color: #555555; }
div.bronze { background-color: #f4b083; }
div.silver { background-color: #d8dce4; }

2
svelte-ui/src/components/ProjectEntry.svelte

@ -69,7 +69,7 @@
<div class="list" class:full={showAllOptions}>
{#each project.tasks as task (task.id)}
{#if !hideInactive || task.active}
<TaskEntry showAllOptions={showAllOptions} task={task} />
<TaskEntry showAllOptions={showAllOptions} task={task} project={project} />
{/if}
{/each}
</div>

9
svelte-ui/src/components/TaskEntry.svelte

@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from "svelte";
import { link } from "svelte-routing";
import type Project from "../models/project";
import type { TaskResult } from "../models/task";
import type { ModalData } from "../stores/modal";
import DateSpan from "./DateSpan.svelte";
@ -10,6 +10,7 @@
import OptionRow from "./OptionRow.svelte";
export let task: TaskResult = null;
export let project: Project = null;
export let showAllOptions: boolean = false;
let showLogs = false;
@ -28,9 +29,9 @@
showLogs = !showLogs;
}
$: mdLogAdd = {name: "log.add", task};
$: mdTaskEdit = {name: "task.edit", task};
$: mdTaskDelete = {name: "task.delete", task};
$: mdLogAdd = {name: "log.add", task: {...task, project}};
$: mdTaskEdit = {name: "task.edit", task: {...task, project}};
$: mdTaskDelete = {name: "task.delete", task: {...task, project}};
</script>
<div class="task">

82
svelte-ui/src/forms/TaskAddForm.svelte

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

68
svelte-ui/src/forms/TaskDeleteForm.svelte

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

74
svelte-ui/src/forms/TaskEditForm.svelte

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

122
svelte-ui/src/forms/TaskForm.svelte

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

2
svelte-ui/src/models/task.ts

@ -1,6 +1,7 @@
import type { IconName } from "../external/icons";
import type Item from "./item";
import type Log from "./log";
import type Project from "./project";
export default interface Task {
id: string
@ -18,6 +19,7 @@ export interface TaskResult extends Task {
item: Item
logs: Log[]
completedAmount: number
project?: Project
}
export interface TaskFilter {

Loading…
Cancel
Save