stufflog2/svelte-ui/src/components/ProjectGroupMenu.svelte

<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;

  function onClickAdd() {
    modalStore.set({name: "projectgroup.add"});
  }

  function onNavigate(group: ProjectGroupResult) {
    if (group.projects.length === 0) {
      navigate(`/questlog/${group.id}`);
    } else {
      const preferredId = localStorage.getItem(`sl2.projectgroup.${group.id}.last_project_id`);

      const projects = [...group.projects].sort(sortProjects);
      const project = projects.find(p => p.id === preferredId) || projects[0];

      navigate(`/questlog/${group.id}/${project.id}`);

      // There's some weirdness with navigate. This hack will just do a 
      // groups = [...groups] in the sttore to get the page to update.
      //
      // Edit: It doesn't seem to be needed anymore? Idk why, but I'll keep this in just in case.
      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>