You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<script lang="ts"> import { tick } from "svelte";
import stuffLogClient from "../clients/stufflog"; import type Project from "../models/project"; import type { TaskResult, TaskUpdate } from "../models/task"; import markStale from "../stores/markStale"; import type { ModalData } from "../stores/modal"; import ChildEntry from "./ChildEntry.svelte"; import DateSpan from "./DateSpan.svelte"; import ItemLink from "./ItemLink.svelte"; import Markdown from "./Markdown.svelte"; import Option from "./Option.svelte"; import OptionRow from "./OptionRow.svelte"; import StatusColor from "./StatusColor.svelte"; import TaskIcon from "./TaskIcon.svelte";
export let task: TaskResult = null; export let project: Project = null; export let showAllOptions: boolean = false;
let showLogs = false; let mdLogAdd: ModalData; let mdTaskEdit: ModalData; let mdTaskDelete: ModalData; let isMoving = false;
function toggleShowLogs() { showLogs = !showLogs; }
function updateTask(update: TaskUpdate) { isMoving = true; stuffLogClient.updateTask(task.id, update).finally(() => { markStale("task", "project"); tick().then(() => { isMoving = false; }); }); }
function moveToActive() { updateTask({clearStatusTag: true, active: true}); }
function moveToToDo() { updateTask({statusTag: "to do", active: false}); }
function moveToOnHold() { updateTask({statusTag: "on hold", active: false}); }
function moveToFailed() { updateTask({statusTag: "failed", active: false}); }
function moveToDeclined() { updateTask({statusTag: "declined", active: false}); }
$: mdLogAdd = {name: "log.add", task: {...task, project}}; $: mdTaskEdit = {name: "task.edit", task: {...task, project}}; $: mdTaskDelete = {name: "task.delete", task: {...task, project}}; </script>
<StatusColor affects="task" entry={task}> <ChildEntry entry={task}> <div slot="icon"> <TaskIcon task={task} /> </div> <ItemLink item={task.item} /> <OptionRow> {#if task.logs.length > 0} <Option on:click={toggleShowLogs}>{showLogs ? "Hide Logs" : "Show Logs"}</Option> {/if} <Option open={mdLogAdd}>Add Log</Option> {#if showAllOptions} <Option open={mdTaskEdit}>Edit</Option> <Option open={mdTaskDelete}>Delete</Option> · {#if !isMoving && (!task.active) } <Option on:click={moveToActive}>Active</Option> {/if} {#if !isMoving && (task.statusTag !== "to do") } <Option on:click={moveToToDo}>To Do</Option> {/if} {#if !isMoving && (task.statusTag !== "on hold") } <Option on:click={moveToOnHold}>On Hold</Option> {/if} {#if !isMoving && (task.statusTag !== "declined") } <Option on:click={moveToDeclined}>Won't Do</Option> {/if} {#if !isMoving && (task.statusTag !== "failed") } <Option on:click={moveToFailed}>Failed</Option> {/if} {/if} </OptionRow> {#if showLogs && task.logs.length > 0} <div class="log-list"> {#each task.logs as log (log.id)} <div class="log"> <div class="log-time"><DateSpan time={log.loggedTime} /></div> <div class="log-description"> <Markdown source={log.description} /> </div> </div> {/each} </div> {/if} </ChildEntry> </StatusColor>
<style> div.log-list { padding: 0.5em 0; } div.log { padding: 0.25em 1ch; } div.log-time { font-size: 0.75em; font-weight: 800; } </style>
|