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.
121 lines
5.1 KiB
121 lines
5.1 KiB
<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>
|