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

<script lang="ts">
  import type { ProjectResult } from "../models/project";
  import ProjectEntry from "./ProjectEntry.svelte";
  import QlList from "./QLList.svelte";
  import Boi from "../components/Boi.svelte";
  import type { ModalData } from "../stores/modal";
  import type { ProjectGroupResult } from "../models/projectgroup";
  import ProjectGroupMenu from "./ProjectGroupMenu.svelte";
  import OptionRow from "./OptionRow.svelte";
  import Option from "./Option.svelte";
  import type ProjectGroup from "../models/projectgroup";

  export let groups: ProjectGroupResult[];
  export let projectId = "";
  export let groupId = "";
  
  let mdProjectAdd: ModalData = {name: "project.add", groupId: null};
  let mdGroupEdit: ModalData = {name: "projectgroup.edit", projectGroup: {} as ProjectGroup};
  let mdGroupDelete: ModalData = {name: "projectgroup.delete", projectGroup: {} as ProjectGroup};

  let visibleProjects: ProjectResult[] = [];
  let expiringProjects: ProjectResult[];
  let activeProjects: ProjectResult[];
  let inactiveProjects: ProjectResult[];
  let completedProjects: ProjectResult[];
  let failedProjects: ProjectResult[];
  let onholdProjects: ProjectResult[];
  let ideaProjects: ProjectResult[];
  let selectedProject: ProjectResult = null;
  let selectedGroup: ProjectGroupResult | null = 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();
    
    return aName.localeCompare(bName);
  }

  // Ensure a selection.
  $: if (groupId == "" && groups.length > 0) {     
    groupId = groups[0].id;
  }

  $: selectedGroup = groups.find(g => g.id === groupId)
  $: visibleProjects = selectedGroup?.projects || [];
  $: selectedProject = visibleProjects.find(p => p.id === projectId) || null;

  $: mdProjectAdd = { name: "project.add", groupId: groupId }
  $: mdGroupEdit = { name: "projectgroup.edit", projectGroup: selectedGroup }
  $: mdGroupDelete = { name: "projectgroup.delete", projectGroup: selectedGroup }

  $: expiringProjects = visibleProjects.filter(p => p.active && p.endTime).sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime));
  $: activeProjects = visibleProjects.filter(p => p.active && !p.endTime).sort(sortProjects);
  $: inactiveProjects = visibleProjects.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);
</script>

<ProjectGroupMenu selected={groupId} groups={groups} />
<div class="quest-log">
  <div class="list">
    <h2>{selectedGroup?.name || ""}</h2>
    {#if !!groupId && groupId !== "META_UNGROUPED"}
      <OptionRow centered>
        <Option open={mdGroupEdit}>Edit Group</Option>
        <Option open={mdGroupDelete}>Delete Group</Option>
      </OptionRow>
    {/if}
    <Boi compacter open={mdProjectAdd}>Add Project</Boi>
    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["deadlines"] || "Deadlines"} projects={expiringProjects} />
    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["active"] || "Active"} projects={activeProjects} />
    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["background"] || "Background"} projects={backgroundProjects} />
    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["progress"] || "Progress"} projects={progressProjects} />
    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["to do"] || "To Do"} projects={ideaProjects} />
    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["on hold"] || "On Hold"} projects={onholdProjects} />
    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["completed"] || "Completed"} projects={completedProjects} />
    <QlList selected={selectedProject?.id} label={selectedGroup?.categoryNames["failed"] || "Failed"} projects={failedProjects} />
  </div>
  <div class="body">
    {#if selectedProject != null}
      <ProjectEntry removeHook hideIcon project={selectedProject} showAllOptions />
    {/if}
  </div>
</div>

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

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

  h2 {
    font-weight: 200;
    margin: 0;
    padding-bottom: 0.2em;
    text-align: center;
  }

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