You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<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"; 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 projects: ProjectResult[] = []; 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; 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) $: projects = selectedGroup?.projects || [];
$: mdProjectAdd = { name: "project.add", groupId: groupId } $: mdGroupEdit = { name: "projectgroup.edit", projectGroup: selectedGroup } $: mdGroupDelete = { name: "projectgroup.delete", projectGroup: selectedGroup }
$: 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);
$: project = selectedGroup?.projects.find(p => p.id === projectId) || null; </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={project?.id} label={selectedGroup?.categoryNames["deadlines"] || "Deadlines"} projects={expiringProjects} /> <QlList selected={project?.id} label={selectedGroup?.categoryNames["active"] || "Active"} projects={activeProjects} /> <QlList selected={project?.id} label={selectedGroup?.categoryNames["background"] || "Background"} projects={backgroundProjects} /> <QlList selected={project?.id} label={selectedGroup?.categoryNames["progress"] || "Progress"} projects={progressProjects} /> <QlList selected={project?.id} label={selectedGroup?.categoryNames["to do"] || "To Do"} projects={ideaProjects} /> <QlList selected={project?.id} label={selectedGroup?.categoryNames["on hold"] || "On Hold"} projects={onholdProjects} /> <QlList selected={project?.id} label={selectedGroup?.categoryNames["completed"] || "Completed"} projects={completedProjects} /> <QlList selected={project?.id} label={selectedGroup?.categoryNames["failed"] || "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; }
h2 { font-weight: 200; margin: 0; padding-bottom: 0.2em; text-align: center; }
div.body { flex-grow: 1; margin: 1em 1ch; } </style>
|