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

<script lang="ts">
  import type { ProjectResult } from "../models/project";
  import type { TaskResult } from "../models/task";
  import type { ModalData } from "../stores/modal";
  import IS_MOBILE from "../utils/phone-check";
  import Option from "./Option.svelte";
  import OptionRow from "./OptionRow.svelte";
  import ParentEntry from "./ParentEntry.svelte";
  import StatusColor from "./StatusColor.svelte";
  import TaskList from "./TaskList.svelte";

  export let project: ProjectResult = null;
  export let showAllOptions: boolean = false;
  export let hideInactive: boolean = false;
  export let hideProgress: boolean = false;
  export let linkProject: boolean = false;
  export let hideIcon: boolean = false;
  export let isFake: boolean = false;
  export let removeHook: boolean = false;

  let mdAddTask: ModalData;
  let mdProjectEdit: ModalData;
  let mdProjectDelete: ModalData;
  let linkTarget: string = "";
  let activeTasks: TaskResult[] = [];
  let inactiveTasks: TaskResult[] = [];
  let todoTasks: TaskResult[] = [];
  let completedTasks: TaskResult[] = [];
  let onholdTasks: TaskResult[] = [];
  let failedTasks: TaskResult[] = [];
  let nonHiddenTasks: TaskResult[] = [];

  $: mdAddTask = {name:"task.add", project};
  $: mdProjectEdit = {name:"project.edit", project};
  $: mdProjectDelete = {name:"project.delete", project};

  $: {
    activeTasks = project.tasks.filter(t => t.active);
    inactiveTasks = project.tasks.filter(t => !t.active);

    todoTasks = inactiveTasks.filter(t => t.statusTag === "to do" || t.statusTag === "idea");
    onholdTasks = inactiveTasks.filter(t => t.statusTag === "on hold");
    completedTasks = inactiveTasks.filter(t => t.statusTag === "completed" || t.statusTag == null);
    failedTasks = inactiveTasks.filter(t => t.statusTag === "failed" || t.statusTag === "declined");

    nonHiddenTasks = [...activeTasks, ...todoTasks, ...onholdTasks];
  }

  $: linkTarget = IS_MOBILE ? `/questlog#${project.id}` : `/projects#${project.id}` 
</script>

<StatusColor affects="project" entry={project}>
  <ParentEntry 
    full={showAllOptions} 
    entry={project} 
    headerLink={linkProject ? linkTarget : ""}
    hideProgress={hideProgress}
    hideIcon={hideIcon}
    showTimeProgress={!hideProgress}
    removeHook={removeHook}
    annotations={isFake ? ["list"] : []}
  >
    {#if showAllOptions}
      <OptionRow>
        <Option open={mdAddTask}>Add Task</Option>
        <Option open={mdProjectEdit}>Edit</Option>
        <Option open={mdProjectDelete}>Delete</Option>
      </OptionRow>
    {/if}
    {#if hideInactive}
      <TaskList header="" tasks={nonHiddenTasks} project={project} showAllOptions={showAllOptions} />
    {:else}
      <TaskList header="Active" tasks={activeTasks} project={project} showAllOptions={showAllOptions} />
      <TaskList header="To Do" tasks={todoTasks} project={project} showAllOptions={showAllOptions} />
      <TaskList header="On Hold" tasks={onholdTasks} project={project} showAllOptions={showAllOptions} />
      <TaskList header="Completed" tasks={completedTasks} project={project} showAllOptions={showAllOptions} />
      <TaskList header="Failed" tasks={failedTasks} project={project} showAllOptions={showAllOptions} />
    {/if}
  </ParentEntry>
</StatusColor>