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.
147 lines
3.3 KiB
147 lines
3.3 KiB
<script lang="ts" context="module">
|
|
import type { IconName } from "../external/icons";
|
|
|
|
interface ToCGroup {
|
|
icon: IconName
|
|
href: string
|
|
name: string
|
|
completed: boolean
|
|
items: ToCItem[]
|
|
}
|
|
|
|
interface ToCItem {
|
|
href: string
|
|
name: string
|
|
completed: boolean
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import type { GroupResult } from "../models/group";
|
|
import type { ProjectResult } from "../models/project";
|
|
import Icon from "./Icon.svelte";
|
|
|
|
export let projects: ProjectResult[] = [];
|
|
export let groups: GroupResult[] = [];
|
|
export let hideInactive: boolean = false;
|
|
|
|
let tocGroups: ToCGroup[];
|
|
let show = false;
|
|
|
|
function toggleShow() {
|
|
show = !show;
|
|
}
|
|
|
|
$: {
|
|
tocGroups = [];
|
|
|
|
for (const project of projects) {
|
|
tocGroups.push({
|
|
icon: project.icon,
|
|
name: project.name,
|
|
href: `/projects#${project.id}`,
|
|
completed: !project.active && project.statusTag === "completed",
|
|
items: project.tasks.filter(t => !hideInactive || t.active).map(task => ({
|
|
name: task.name,
|
|
completed: !task.active && task.statusTag === "completed",
|
|
href: `/projects#${task.id}`,
|
|
})),
|
|
})
|
|
}
|
|
|
|
for (const group of groups) {
|
|
tocGroups.push({
|
|
icon: group.icon,
|
|
name: group.name,
|
|
href: `/items#${group.id}`,
|
|
completed: false,
|
|
items: group.items.map(item => ({
|
|
name: item.name,
|
|
completed: false,
|
|
href: `/items#${item.id}`,
|
|
})),
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="toc" class:show={show}>
|
|
<div class="show-button" on:click={toggleShow}>
|
|
<div class="icon"><Icon name={show ? "chevron_down" : "chevron_right"} /></div>
|
|
<div class="text">{show ? "Hide" : "Show"} Table of Contents</div>
|
|
</div>
|
|
{#if show}
|
|
{#each tocGroups as tocGroup (tocGroup.href)}
|
|
<div class="toc-group" class:completed={tocGroup.completed}>
|
|
<a href={tocGroup.href}>
|
|
<div class="icon">
|
|
<Icon name={tocGroup.icon} />
|
|
</div>
|
|
<div class="text">{tocGroup.name}</div>
|
|
</a>
|
|
</div>
|
|
{#each tocGroup.items as tocItem (tocItem.href)}
|
|
<div class="toc-item" class:completed={tocItem.completed}>
|
|
<a href={tocItem.href}>
|
|
<div class="text">{tocItem.name}</div>
|
|
</a>
|
|
</div>
|
|
{/each}
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
div.toc {
|
|
padding: 1em;
|
|
color: #777;
|
|
margin: 0 auto;
|
|
}
|
|
div.toc.show {
|
|
padding-bottom: 2em;
|
|
}
|
|
|
|
div.toc-item {
|
|
margin-left: 1.5ch;
|
|
padding-left: 1ch;
|
|
border-left: 2px solid #222;
|
|
}
|
|
div.toc-item + div.toc-group, div.toc-group + div.toc-group {
|
|
padding-top: 1em;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 0.125em 0.5ch;
|
|
}
|
|
a > div.icon {
|
|
padding: 0.125em 0.5ch;
|
|
}
|
|
a > div.text {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
div.show-button {
|
|
display: flex;
|
|
flex-direction: row;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
padding-bottom: 1em;
|
|
}
|
|
div.show-button div.icon {
|
|
margin-left: auto;
|
|
padding: 0 1ch;
|
|
padding-top: 0.25em;
|
|
}
|
|
div.show-button div.text {
|
|
margin-right: auto;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
div.completed {
|
|
color: #484;
|
|
}
|
|
</style>
|