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

<script lang="ts" context="module">
  let lastQuest = "";
</script>

<script lang="ts">
  import type { ProjectResult } from "../models/project";
  import selectionStore from "../stores/selection";
  import ProjectEntry from "./ProjectEntry.svelte";
  import QlList from "./QLList.svelte";
  import Boi from "../components/Boi.svelte";
  import type { ModalData } from "../stores/modal";

  export let projects: ProjectResult[];
  
  const mdProjectAdd: ModalData = {name: "project.add"};

  let expiringProjects: ProjectResult[];
  let activeProjects: ProjectResult[];
  let inactiveProjects: ProjectResult[];
  let completedProjects: ProjectResult[];
  let failedProjects: ProjectResult[];
  let onholdProjects: ProjectResult[];
  let ideaProjects: ProjectResult[];
  let project: ProjectResult = null;

  function sortProjects(a: ProjectResult, b: ProjectResult) {
    const aName = `${a.tags.slice(0, 1).map(t => t+":").join("")} ${a.name}`.trim();
    const bName = `${b.tags.slice(0, 1).map(t => t+":").join("")} ${b.name}`.trim();

    console.log(aName, bName)
    
    return aName.localeCompare(bName);
  }

  $: project = $selectionStore.hash.startsWith("P") ? projects.find(p => p.id === $selectionStore.hash) : null;
  $: expiringProjects = projects.filter(p => p.active && p.endTime).sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime));
  $: activeProjects = projects.filter(p => p.active && !p.endTime).sort(sortProjects);
  $: inactiveProjects = projects.filter(p => !p.active).sort(sortProjects);
  $: completedProjects = inactiveProjects.filter(p => p.statusTag === "completed" || p.statusTag == null);
  $: failedProjects = inactiveProjects.filter(p => p.statusTag === "failed" || p.statusTag === "declined");
  $: onholdProjects = inactiveProjects.filter(p => p.statusTag === "on hold" || p.statusTag === "onhold").sort(sortProjects);
  $: ideaProjects = inactiveProjects.filter(p => p.statusTag === "to do" || p.statusTag === "idea").sort(sortProjects);
  $: backgroundProjects = inactiveProjects.filter(p => p.statusTag === "background").sort(sortProjects);
  $: progressProjects = inactiveProjects.filter(p => p.statusTag === "progress").sort(sortProjects);

  $: {
    if (project === null && projects.length > 0) {
      if (lastQuest !== "") {
        project = projects.find(p => p.id === lastQuest) || null;
      }

      if (project === null) {
        project = expiringProjects[0] || activeProjects[0] || completedProjects[0] || null;
      }
      
      if (project !== null) {
        selectionStore.change("hash", project.id);
      }
    }
  }

  $: {
    if ($selectionStore.hash.startsWith("P")) {
      lastQuest = $selectionStore.hash;
    }
  }
</script>

<div class="quest-log">
  <div class="list">
    <Boi compacter open={mdProjectAdd}>Add Project</Boi>
    <QlList label="Deadlines" projects={expiringProjects} />
    <QlList label="Active" projects={activeProjects} />
    <QlList label="Background" projects={backgroundProjects} />
    <QlList label="Progress" projects={progressProjects} />
    <QlList label="To Do" projects={ideaProjects} />
    <QlList label="On Hold" projects={onholdProjects} />
    <QlList label="Completed" projects={completedProjects} />
    <QlList label="Failed" projects={failedProjects} />
  </div>
  <div class="body">
    {#if project != null}
      <ProjectEntry removeHook hideIcon project={project} showAllOptions />
    {/if}
  </div>
</div>

<style>
  div.quest-log {
    display: flex;
    flex-direction: row;
  }

  div.list {
    flex-shrink: 0;
    width: 32ch;
  }

  div.body {
    flex-grow: 1;
    margin: 1em 1ch;
  }
</style>