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

<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 mdTaskUnlink: 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}};
  $: mdTaskUnlink = {name: "tasklink.delete", task, project};
  $: isLinked = task.projectId !== project.id;
</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>
        {#if isLinked}
          <Option open={mdTaskUnlink}>Unlink</Option>
        {:else}
          <Option open={mdTaskDelete}>Delete</Option>
          ·
          {#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}
        {/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>