|
|
<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 actualProject: Project | null = null; export let showAllOptions: boolean = false;
export let actualParent: Project | null = null;
let showLogs = false; let mdLogAdd: ModalData; let mdTaskEdit: ModalData; let mdTaskDelete: ModalData; let mdTaskUnlink: ModalData; let mdTaskLink: ModalData; let isMoving = false; let isLinked = 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 moveToCompleted() { updateTask({statusTag: "completed", 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}}; $: mdTaskLink = {name: "tasklink.add", task, project}; $: mdTaskUnlink = {name: "tasklink.delete", task, project}; $: isLinked = task.projectId !== project.id; $: actualParent = (actualProject != null && actualProject.id !== project.id) ? actualProject : null; </script>
<StatusColor affects="task" entry={task}> <ChildEntry entry={task} actualParent={actualParent} hideParentName={!showAllOptions}> <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> {#if isLinked} <Option open={mdTaskUnlink}>Unlink</Option> {:else} <Option open={mdTaskLink}>Link</Option> <Option open={mdTaskDelete}>Delete</Option> {/if} · {#if !isMoving && (!task.active) } <Option on:click={moveToActive}>Active</Option> {/if} {#if !isMoving && (task.statusTag !== "to do") } <Option color="yellow" on:click={moveToToDo}>To Do</Option> {/if} {#if !isMoving && (task.statusTag !== "on hold") } <Option color="blue" on:click={moveToOnHold}>On Hold</Option> {/if} {#if !isMoving && (task.statusTag !== "declined") } <Option color="purple" on:click={moveToDeclined}>Won't Do</Option> {/if} {#if !isMoving && task.active } <Option color="green" on:click={moveToCompleted}>Completed</Option> {/if} {#if !isMoving && (task.statusTag !== "failed") } <Option color="red" on:click={moveToFailed}>Failed</Option> {/if} {:else} · {#if !isMoving && (!task.active) } <Option on:click={moveToActive}>Active</Option> {/if} {#if !isMoving && (task.statusTag !== "to do") } <Option color="yellow" on:click={moveToToDo}>To Do</Option> {/if} {#if !isMoving && (task.statusTag !== "on hold") } <Option color="blue" on:click={moveToOnHold}>On Hold</Option> {/if} {#if !isMoving && task.active } <Option color="green" on:click={moveToCompleted}>Completed</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>
|