atsebay.t/ui/src/routes/works/[wid]/index.svelte

<script context="module">
 import { getWork } from '../../../lib/works';

 export async function load({ params, stuff }) {
     return {
         props: {
             work: stuff.work,
         },
     };
 }
</script>

<script lang="ts">
 import { goto } from '$app/navigation';

 import { user } from '../../../stores/user';
 import SurveyBadge from '../../../components/SurveyBadge.svelte';
 import WorkAdmin from '../../../components/WorkAdmin.svelte';
 import { getScore } from '../../../lib/users';

 export let work = null;
</script>

{#await work then w}
    <div class="d-flex align-items-center">
        <h2>
            <a href="works/" class="text-muted" style="text-decoration: none">&lt;</a>
            {w.title}
        </h2>
    </div>

    {#if $user && $user.is_admin}
        <WorkAdmin work={w} on:saved={() => edit = false} />

        <hr>
        <h3 class="mt-3">Notes</h3>
        <div class="card mt-3 mb-5">
            {#await w.getGrades()}
                <div class="text-center">
                    <div class="spinner-border text-primary mx-3" role="status"></div>
                    <span>Chargement des notes &hellip;</span>
                </div>
            {:then grades}
                <table class="table table-hover table-striped mb-0">
                    <thead>
                        <tr>
                            <th>Login</th>
                            <th>Note</th>
                            <th>Commentaire</th>
                            <th>Date de la note</th>
                        </tr>
                    </thead>
                    <tbody>
                        {#if !grades}
                            <div class="text-center">
                                Aucune note n'a encore été envoyée pour ce travail.
                            </div>
                        {:else}
                            {#each grades as grade, gid (grade.id)}
                                <tr>
                                    <td>
                                        <a href="users/{grade.id_user}">{grade.login}</a>
                                    </td>
                                    <td>{grade.score}</td>
                                    <td>{#if grade.comment}{grade.comment}{:else}-{/if}</td>
                                    <td>{grade.date}</td>
                                </tr>
                            {/each}
                        {/if}
                    </tbody>
                </table>
            {/await}
        </div>
    {:else}
        {#await getScore(w)}
            <div class="spinner-border spinner-border-sm" role="status"></div>
        {:then grade}
            <div class="alert alert-info">
                <strong>Note finale&nbsp;:</strong> <span title="Établie le {grade.date}">{grade.score}</span> {#if grade.comment}&ndash; {grade.comment}{/if}
            </div>
        {:catch error}
            <div class="alert alert-danger">
                <i class="bi text-warning bi-exclamation-triangle-fill" title={error}></i>
                <strong>{error.message}</strong>
            </div>
        {/await}
    {/if}
{/await}