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.
111 lines
3.0 KiB
111 lines
3.0 KiB
<script lang="ts">
|
|
import { tick } from "svelte";
|
|
import { navigate } from "svelte-routing";
|
|
|
|
import type { ProjectGroupResult } from "../models/projectgroup";
|
|
import modalStore from "../stores/modal";
|
|
import projectGroupStore from "../stores/projectGroup";
|
|
import { sortProjects } from "../utils/sorters";
|
|
import ColoredNumber from "./ColoredNumber.svelte";
|
|
|
|
export let groups: ProjectGroupResult[] = [];
|
|
export let selected: string;
|
|
|
|
let failedCount = 0;
|
|
|
|
function onClickAdd() {
|
|
modalStore.set({name: "projectgroup.add"});
|
|
}
|
|
|
|
function onNavigate(group: ProjectGroupResult) {
|
|
if (group.projects.length === 0) {
|
|
navigate(`/questlog/${group.id}`);
|
|
} else {
|
|
const projetcs = [...group.projects].sort(sortProjects);
|
|
|
|
navigate(`/questlog/${group.id}/${projetcs[0].id}`);
|
|
|
|
// There's some weirdness with navigate. This hack will just do a
|
|
// groups = [...groups] in the sttore to get the page to update.
|
|
tick().then(() => {
|
|
projectGroupStore.fakeRefresh();
|
|
})
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<div class="group-menu">
|
|
{#each groups as group (group.id)}
|
|
<div class="group-entry" on:click={() => onNavigate(group)} class:selected={selected === group.id}>
|
|
<div class="name">{group.abbreviation}</div>
|
|
<div class="counts">
|
|
<ColoredNumber selected={selected === group.id} status="active" number={group.projectCounts["active"]} />
|
|
<ColoredNumber selected={selected === group.id} status="background" number={group.projectCounts["background"]} />
|
|
<ColoredNumber selected={selected === group.id} status="progress" number={group.projectCounts["progress"]} />
|
|
<ColoredNumber selected={selected === group.id} status="to do" number={group.projectCounts["to do"]} />
|
|
<ColoredNumber selected={selected === group.id} status="on hold" number={group.projectCounts["on hold"]} />
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
|
|
<div class="group-entry add" on:click={onClickAdd}>
|
|
<div>+</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
div.group-menu {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 0 2ch;
|
|
border-bottom: 1px solid #333;
|
|
margin-bottom: 0.5em;
|
|
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
div.group-entry {
|
|
padding: 0.05em 1ch;
|
|
padding-bottom: 0.15em;
|
|
margin-right: 2ch;
|
|
border: 1px solid #333;
|
|
border-bottom: none;
|
|
border-top-left-radius: 0.5em;
|
|
border-top-right-radius: 0.5em;
|
|
cursor: pointer;
|
|
color: #777;
|
|
font-weight: 300;
|
|
}
|
|
div.group-entry.add {
|
|
color: #333;
|
|
}
|
|
div.group-entry.add > div {
|
|
font-size: 2em;
|
|
line-height: 1em;
|
|
}
|
|
div.group-entry.selected {
|
|
background-color: #191919;
|
|
color: #AAA;
|
|
}
|
|
div.group-entry:hover {
|
|
color: #CCC;
|
|
background-color: #222222;
|
|
}
|
|
|
|
div.name {
|
|
text-align: center;
|
|
padding: 0em 0.4ch;
|
|
}
|
|
|
|
div.counts {
|
|
font-size: 0.666em;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
}
|
|
div.counts :global(div) {
|
|
display: inline-block;
|
|
padding: 0em 0.2ch;
|
|
}
|
|
</style>
|