atsebay.t/ui/src/lib/components/StudentGrades.svelte

<script>
 import { getCategories } from '$lib/categories';
 import { getSurveys } from '$lib/surveys';
 import { getUsers, getGrades, getPromos } from '$lib/users';

 export let promo = null;
 export let category = null;
</script>

{#await getPromos() then promos}
    <div class="float-end me-2">
        <select class="form-select" bind:value={promo}>
            <option value={null}>tous</option>
            {#each promos as promo, pid (pid)}
                <option value={promo}>{promo}</option>
            {/each}
        </select>
    </div>
{/await}
{#await getCategories() then categories}
    <div class="float-end me-2">
        <select class="form-select" bind:value={category}>
            <option value={null}>toutes</option>
            {#each categories as categ (categ.id)}
                {#if !promo || categ.promo == promo}
                    <option value={categ.id}>{categ.label}</option>
                {/if}
            {/each}
        </select>
    </div>
{/await}
<h2>
  Étudiants {#if promo !== null}{promo}{/if}
  <small class="text-muted">Notes</small>
</h2>

{#await getSurveys(true)}
    <div class="d-flex justify-content-center">
        <div class="spinner-border me-2" role="status"></div>
        Chargement des questionnaires corrigés&hellip;
    </div>
{:then surveys}
    {#await getGrades()}
        <div class="d-flex justify-content-center">
            <div class="spinner-border me-2" role="status"></div>
            Chargement des notes&hellip;
        </div>
    {:then grades}
        <div class="card mb-5">
            <table class="table table-striped table-hover mb-0">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Login</th>
                        {#each surveys as survey}
                            {#if survey.corrected && (!promo || survey.promo == promo) && (!category || survey.id_category == category)}
                                <th>
                                    {#if survey.kind == "survey"}
                                        <a href="surveys/{survey.id}" style="text-decoration: none">{survey.title}</a>
                                    {:else}
                                        <a href="works/{survey.id}" style="text-decoration: none">{survey.title}</a>
                                    {/if}
                                </th>
                            {/if}
                        {/each}
                    </tr>
                </thead>
                <tbody>
                    {#await getUsers()}
                        <tr>
                            <td colspan="20">
                                <div class="d-flex justify-content-center">
                                    <div class="spinner-border me-2" role="status"></div>
                                    Chargement des étudiants&hellip;
                                </div>
                            </td>
                        </tr>
                    {:then users}
                        {#each users as user (user.id)}
                            {#if !promo || user.promo == promo}
                            <tr>
                                <td><a href="users/{user.id}" style="text-decoration: none">{user.id}</a></td>
                                <td><a href="users/{user.login}" style="text-decoration: none">{user.login}</a></td>
                                {#each surveys as survey}
                                    {#if survey.corrected && (!promo || survey.promo == promo) && (!category || survey.id_category == category)}
                                        <td>
                                            {grades[user.id] && grades[user.id][survey.kind + "." + survey.id]?grades[user.id][survey.kind + "." + survey.id]:""}
                                        </td>
                                    {/if}
                                {/each}
                            </tr>
                            {/if}
                        {/each}
                    {/await}
                </tbody>
            </table>
        </div>
    {/await}
{/await}