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.2 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,
items: project.tasks.filter(t => !hideInactive || t.active).map(task => ({
name: task.name,
completed: !task.active,
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>