Add categories to sort/filter works/surveys

ui/src/routes/categories/[cid]/index.svelte

@@ -0,0 +1,39 @@
+<script context="module">
+ import { getWork } from '$lib/works';
+
+ export async function load({ params }) {
+     return {
+         props: {
+             cid: params.cid,
+         },
+     };
+ }
+</script>
+
+<script>
+ import { goto } from '$app/navigation';
+
+ import { user } from '$lib/stores/user';
+ import CategoryAdmin from '$lib/components/CategoryAdmin.svelte';
+ import { Category, getCategory } from '$lib/categories';
+
+ export let cid;
+
+ let categoryP = null;
+ $: {
+     categoryP = getCategory(cid);
+ }
+</script>
+
+{#await categoryP then category}
+    <div class="d-flex align-items-center">
+        <h2>
+            <a href="categories/" class="text-muted" style="text-decoration: none">&lt;</a>
+            {category.label}
+        </h2>
+    </div>
+
+    {#if $user && $user.is_admin}
+        <CategoryAdmin {category} on:saved={(e) => { goto(`categories/`)}} />
+    {/if}
+{/await}

ui/src/routes/categories/index.svelte

@@ -0,0 +1,70 @@
+<script>
+ import { goto } from '$app/navigation';
+
+ import { user } from '$lib/stores/user';
+ import { getCategories } from '$lib/categories';
+ import { getPromos } from '$lib/users';
+
+ function showCategory(category) {
+     goto(`categories/${category.id}`)
+ }
+
+ let filterPromo = "";
+</script>
+
+{#if $user && $user.is_admin}
+    <a href="categories/new" class="btn btn-primary ml-1 float-end" title="Ajouter une catégorie">
+        <i class="bi bi-plus"></i>
+    </a>
+    {#await getPromos() then promos}
+        <div class="float-end me-2">
+            <select class="form-select" bind:value={filterPromo}>
+                <option value="">-</option>
+                {#each promos as promo, pid (pid)}
+                    <option value={promo}>{promo}</option>
+                {/each}
+            </select>
+        </div>
+    {/await}
+{/if}
+<h2>
+  Catégories // cours
+</h2>
+
+{#await getCategories()}
+    <div class="text-center">
+        <div class="spinner-border text-danger mx-3" role="status"></div>
+        <span>Chargement des catégories &hellip;</span>
+    </div>
+{:then categories}
+    <table class="table table-sm table-striped table-hover">
+        <thead>
+            <tr>
+                <th>ID</th>
+                <th>Nom</th>
+                <th>Promo</th>
+                <th>Étendre</th>
+            </tr>
+        </thead>
+        <tbody>
+            {#each categories.filter((c) => (filterPromo === "" || filterPromo === c.promo)) as c (c.id)}
+                <tr>
+                    <td>{c.id}</td>
+                    <td>
+                        <a href="categories/{c.id}">{c.label}</a>
+                    </td>
+                    <td>{c.promo}</td>
+                    <td>
+                        <span
+                            class="badge"
+                            class:bg-success={c.expand}
+                            class:bg-danger={!c.expand}
+                        >
+                            {c.expand?"Oui":"Non"}
+                        </span>
+                    </td>
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+{/await}

ui/src/routes/categories/new.svelte

@@ -0,0 +1,20 @@
+<script>
+ import { goto } from '$app/navigation';
+
+ import { user } from '$lib/stores/user';
+ import CategoryAdmin from '$lib/components/CategoryAdmin.svelte';
+ import { Category } from '$lib/categories';
+
+ let category = new Category();
+</script>
+
+<div class="d-flex align-items-center">
+    <h2>
+        <a href="categories/" class="text-muted" style="text-decoration: none">&lt;</a>
+        Nouvelle catégorie
+    </h2>
+</div>
+
+{#if $user && $user.is_admin}
+    <CategoryAdmin {category} on:saved={(e) => { goto(`categories/${e.detail.id}`)}} />
+{/if}

ui/src/routes/works/index.svelte

@@ -5,17 +5,28 @@
  import DateFormat from '$lib/components/DateFormat.svelte';
  import SurveyBadge from '$lib/components/SurveyBadge.svelte';
  import SubmissionStatus from '$lib/components/SubmissionStatus.svelte';
+ import { getCategories } from '$lib/categories';
  import { getWorks } from '$lib/works';
  import { getPromos } from '$lib/users';
  import { getScore } from '$lib/users';
 
  let filterPromo = "";
+
+ let categories = {};
+ getCategories().then((cs) => {
+     for (const c of cs) {
+         categories[c.id] = c;
+     }
+ });
 </script>
 
 {#if $user && $user.is_admin}
     <a href="works/new" class="btn btn-primary ml-1 float-end" title="Ajouter un travail">
         <i class="bi bi-plus"></i>
     </a>
+    <a href="categories/" class="btn btn-info mx-1 float-end" title="Modifier les catégories">
+        <i class="bi bi-filter-circle"></i>
+    </a>
     {#await getPromos() then promos}
         <div class="float-end me-2">
             <select class="form-select" bind:value={filterPromo}>
@@ -51,12 +62,30 @@
             {#each works as work, wid (work.id)}
                 {#if (work.shown || ($user && $user.is_admin)) && (!$user || (!$user.was_admin || $user.promo == work.promo) || $user.is_admin)}
                     {#if $user && $user.is_admin && (wid == 0 || works[wid-1].promo != work.promo)}
-                        <tr class="bg-info text-light">
+                        <tr class="bg-warning text-light">
                             <th colspan="5" class="fw-bold">
                                 {work.promo}
                             </th>
                         </tr>
                     {/if}
+                    {#if $user && (wid == 0 || works[wid-1].id_category != work.id_category) && categories[work.id_category]}
+                        <tr class="bg-primary text-light">
+                            <th colspan="5" class="fw-bold" on:click={() => categories[work.id_category].expand = !categories[work.id_category].expand}>
+                                {#if categories[work.id_category].expand}
+                                    <i class="bi bi-chevron-down"></i>
+                                {:else}
+                                    <i class="bi bi-chevron-right"></i>
+                                {/if}
+                                {categories[work.id_category].label}
+                                {#if $user && $user.is_admin}
+                                    <a href="categories/{work.id_category}" class="float-end btn btn-sm btn-light" style="margin: -6px;">
+                                        <i class="bi bi-pencil" on:click={() => categories[work.id_category].expand = !categories[work.id_category].expand}></i>
+                                    </a>
+                                {/if}
+                            </th>
+                        </tr>
+                    {/if}
+                    {#if categories[work.id_category] && categories[work.id_category].expand}
                     <tr on:click={e => goto(`works/${work.id}`)}>
                         <td>
                             {#if !work.shown}<i class="bi bi-eye-slash-fill" title="Ce travail n'est pas affiché aux étudiants"></i>{/if}
@@ -94,6 +123,7 @@
                             {/if}
                         {/if}
                     </tr>
+                  {/if}
                 {/if}
             {/each}
         </tbody>