atsebay.t/ui/src/routes/works/index.svelte

<script>
 import { goto } from '$app/navigation';

 import { user } from '$lib/stores/user';
 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}>
                <option value="">-</option>
                {#each promos as promo, pid (pid)}
                    <option value={promo}>{promo}</option>
                {/each}
            </select>
        </div>
    {/await}
{/if}
<h2>
  Travaux
</h2>

{#await getWorks()}
    <div class="text-center">
        <div class="spinner-border text-danger mx-3" role="status"></div>
        <span>Chargement des travaux &hellip;</span>
    </div>
{:then works}
    <table class="table table-sm table-striped table-hover">
        <thead>
            <tr>
                <th>Intitulé</th>
                <th>Date</th>
                {#if $user}
                    <th>Score</th>
                {/if}
            </tr>
        </thead>
        <tbody style="cursor: pointer;">
            {#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-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}
                            {work.title}
                            {#if work.group}<span class="badge bg-secondary">{work.group}</span>{/if}
                            {#if work.startAvailability() < Date.now()}
                                <SubmissionStatus {work} user={$user} />
                            {/if}
                            <SurveyBadge survey={work} class="float-end" />
                        </td>
                        {#if work.startAvailability() > Date.now()}
                            <td title="Ce travail sera disponible à partir du {work.start_availability}">
                                <DateFormat date={work.start_availability} dateStyle="medium" timeStyle="medium" />
                                <i class="bi bi-arrow-bar-right"></i>
                            </td>
                        {:else}
                            <td title="La date de rendu de ce travail est établie au {work.end_availability}">
                                <i class="bi bi-arrow-bar-left"></i>
                                <DateFormat date={work.end_availability} dateStyle="medium" timeStyle="medium" />
                            </td>
                        {/if}
                        {#if $user}
                            {#if !work.corrected}
                                <td>N/A</td>
                            {:else}
                                <td>
                                    {#await getScore(work)}
                                        <div class="spinner-border spinner-border-sm" role="status"></div>
                                    {:then score}
                                        {score.score}
                                    {:catch error}
                                        <i class="bi text-warning bi-exclamation-triangle-fill" title={error}></i>
                                    {/await}
                                </td>
                            {/if}
                        {/if}
                    </tr>
                  {/if}
                {/if}
            {/each}
        </tbody>
    </table>
{:catch error}
    <div class="text-center text-danger">
        {error.message}
    </div>
{/await}