atsebay.t/atsebayt/src/routes/surveys/[sid]/responses/[rid].svelte

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

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

<script lang="ts">
 import Correction from '../../../../components/Correction.svelte';
 import CorrectionReference from '../../../../components/CorrectionReference.svelte';
 import SurveyBadge from '../../../../components/SurveyBadge.svelte';
 import QuestionHeader from '../../../../components/QuestionHeader.svelte';
 import { getCorrectionTemplates } from '../../../../lib/correctionTemplates';
 import { getQuestion } from '../../../../lib/questions';

 export let surveyP;
 export let rid;

 let showResponses = false;
 let showStudent = false;
 let notCorrected = false;
 let nb_responses = 0;

 let child;
 let waitApply = false;
 let ctpls = getCorrectionTemplates(rid);
 let filter = "";

 let cts = { };
 ctpls.then((ctpls) => {
     for (const tpl of ctpls) {
         cts[tpl.id] = { };
         tpl.getCorrections().then((c) => {
             if (c) {
                 for (const d of c) {
                     cts[tpl.id][d.id_user] = d;
                 }
             }
         })
     }
     cts = cts;
 });
</script>

{#await surveyP then survey}
    {#await getQuestion(rid)}
        <div class="text-center">
            <div class="spinner-border text-primary mx-3" role="status"></div>
            <span>Chargement de la question&hellip;</span>
        </div>
    {:then question}
        {#await ctpls}
            <div class="text-center">
                <div class="spinner-border text-primary mx-3" role="status"></div>
                <span>Chargement de la question&hellip;</span>
            </div>
        {:then correctionTemplates}
            <div class="float-end">
                <input
                    class="form-control"
                    placeholder="filtre"
                    bind:value={filter}
                >
            </div>
            <div class="d-flex align-items-center">
                <h2>
                    <a href="surveys/{survey.id}/responses" class="text-muted" style="text-decoration: none">&lt;</a>
                    {survey.title}
                    <small class="text-muted">Corrections</small>
                </h2>
                <SurveyBadge class="ms-2" {survey} />
            </div>

            <div class="card sticky-top">
                <QuestionHeader
                    {question}
                >
                    <button
                        class="btn btn-sm btn-link float-start"
                        on:click={() => showResponses = !showResponses}
                    >
                        <i
                            class="bi"
                            class:bi-chevron-right={!showResponses}
                            class:bi-chevron-down={showResponses}
                        ></i>
                    </button>
                    {#if showResponses}
                        <button
                            type="button"
                            class="btn btn-sm btn-success float-end ms-3 me-1"
                            title="Appliquer les corrections par regexp"
                            on:click={() => {waitApply = true; child.applyCorrections().then(() => { waitApply = false; })} }
                            disabled={waitApply}
                        >
                            {#if waitApply}
                                <div class="spinner-border spinner-border-sm" role="status"></div>
                            {:else}
                                <i class="bi bi-check-all"></i>
                            {/if}
                        </button>
                    {/if}
                    <button
                        type="button"
                        class="btn btn-sm float-end mx-1"
                        class:btn-outline-info={!showStudent}
                        class:btn-info={showStudent}
                        on:click={() => showStudent = !showStudent}
                        title="Afficher les étudiants"
                    >
                        <i class="bi bi-people"></i>
                    </button>
                    <button
                        type="button"
                        class="btn btn-sm float-end mx-1"
                        class:btn-outline-info={!notCorrected}
                        class:btn-info={notCorrected}
                        on:click={() => notCorrected = !notCorrected}
                        title="Afficher les réponses corrigées"
                    >
                        <i class="bi bi-files"></i>
                    </button>
                </QuestionHeader>
                {#if showResponses}
                    <CorrectionReference
                        class="card-body"
                        {cts}
                        bind:filter={filter}
                        {nb_responses}
                        {question}
                        templates={correctionTemplates}
                    />
                {/if}
            </div>

            <Correction
                {cts}
                {filter}
                {question}
                {showStudent}
                {notCorrected}
                bind:child={child}
                templates={correctionTemplates}
                on:nb_responses={(v) => { nb_responses = v.detail; } }
            />
        {/await}
    {/await}
{/await}

<div class="mb-5"></div>