stufflog3/frontend/src/lib/components/scope/ProjectMenu.svelte

<script lang="ts" context="module">
  import Status from "$lib/models/status";

  export const STATUS_ORDER = [
    Status.Active,
    Status.Background,
    Status.Available,
    Status.Blocked,
    Status.Completed,
    Status.Failed,
    Status.Dropped,
  ]
</script>

<script lang="ts">
  import type { ProjectEntry } from "$lib/models/project";
  import MenuCategory from "../common/MenuCategory.svelte";
  import MenuItem from "../common/MenuItem.svelte";
  import { getScopeContext } from "../contexts/ScopeContext.svelte";
  import { projectPrettyId, scopePrettyId } from "$lib/utils/prettyIds";
  import { getProjectListContext } from "../contexts/ProjectListContext.svelte";

  const {scope} = getScopeContext();
  const {projects} = getProjectListContext();

  let projectsByStatus: Record<Status, ProjectEntry[]>;
  let scopeUrlPrefix: string;

  $: projectsByStatus = $projects.reduce((p, c) => (
    {...p, [c.status]: [...p[c.status], c]}
  ), {0: [], 1: [], 2: [], 3: [], 4: [], 5: [], 6: []});

  $: scopeUrlPrefix = `/${scopePrettyId($scope)}`
</script>

{#each STATUS_ORDER as status (status)}
  {#if projectsByStatus[status].length > 0}
    <MenuCategory status={status}>
      {#each projectsByStatus[status] as project (project.id)}
        <MenuItem href="{scopeUrlPrefix}/projects/{projectPrettyId(project)}" subtitle={
          project.name.includes(": ") ? project.name.split(": ")[0] + ": " : ""
        }>{
          project.name.includes(": ") ? project.name.split(": ").slice(1).join(": ") : project.name
        }</MenuItem>
      {/each}
    </MenuCategory>
  {/if}
{/each}