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

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

 import { getCategories } from '$lib/categories';
 import { getQuestions } from '$lib/questions';
 import DateTimeInput from './DateTimeInput.svelte';
 import { ToastsStore } from '$lib/stores/toasts';

 const dispatch = createEventDispatcher();
 export let survey = null;

 function saveSurvey() {
     survey.save().then((response) => {
         dispatch('saved', response);
     }, (error) => {
         ToastsStore.addErrorToast({
             msg: error,
         });
     })
 }

 let deleteInProgress = false;
 function deleteSurvey() {
     deleteInProgress = true;
     survey.delete().then((response) => {
         deleteInProgress = false;
         goto(`surveys`);
     }, (error) => {
         deleteInProgress = false;
         ToastsStore.addErrorToast({
             msg: error,
         });
     })
 }

 function duplicateSurvey() {
     survey.duplicate().then((response) => {
         goto(`surveys/${response.id}`);
     }).catch((error) => {
         ToastsStore.addErrorToast({
             msg: error,
         });
     })
 }

</script>

<form on:submit|preventDefault={saveSurvey}>

    {#if survey.id}
        <div class="row">
            <div class="col-sm-3 text-sm-end">
                <label for="title" class="col-form-label col-form-label-sm">Identifiant du questionnaire</label>
            </div>
            <div class="col-sm-8">
                <input type="text" class="form-control-plaintext form-control-sm" id="title" value={survey.id}>
            </div>
        </div>
    {/if}

    <div class="row">
        <div class="col-sm-3 text-sm-end">
            <label for="title" class="col-form-label col-form-label-sm">Titre du questionnaire</label>
        </div>
        <div class="col-sm-8">
            <input type="text" class="form-control form-control-sm" id="title" bind:value={survey.title}>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3 text-sm-end">
            <label for="category" class="col-form-label col-form-label-sm">Catégorie</label>
        </div>
        <div class="col-sm-8 col-md-4 col-lg-2">
            {#await getCategories() then categories}
                <select id="category" class="form-select form-select-sm" bind:value={survey.id_category}>
                    {#each categories as category (category.id)}
                        <option value={category.id}>{category.label} {category.promo}</option>
                    {/each}
                </select>
            {/await}
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3 text-sm-end">
            <label for="promo" class="col-form-label col-form-label-sm">Promo</label>
        </div>
        <div class="col-sm-8 col-md-4 col-lg-2">
            <input type="number" step="1" min="0" max="2068" class="form-control form-control-sm" id="promo" bind:value={survey.promo}>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3 text-sm-end">
            <label for="group" class="col-form-label col-form-label-sm">Restreindre au groupe</label>
        </div>
        <div class="col-sm-8 col-md-4 col-lg-2">
            <input class="form-control form-control-sm" id="group" bind:value={survey.group}>
        </div>
    </div>

    {#if survey.id}
        <div class="row">
            <div class="col-sm-3 text-sm-end">
                <label for="direct" class="col-form-label col-form-label-sm">Question en direct</label>
            </div>
            <div class="col-sm-8">
                {#await getQuestions(survey.id) then questions}
                    <select id="direct" class="form-select form-select-sm" bind:value={survey.direct}>
                        <option value={null}>Pas de direct</option>
                        <option value={0}>Pause</option>
                        {#each questions as question (question.id)}
                            <option value={question.id}>{question.id} - {question.title}</option>
                        {/each}
                    </select>
                {/await}
            </div>
        </div>
    {/if}

    <div class="row">
        <div class="col-sm-3 text-sm-end">
            <label for="start_availability" class="col-form-label col-form-label-sm">Date de début</label>
        </div>
        <div class="col-sm-8">
            <DateTimeInput class="form-control form-control-sm" id="start_availability" bind:date={survey.start_availability} />
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3 text-sm-end">
            <label for="end_availability" class="col-form-label col-form-label-sm">Date de fin</label>
        </div>
        <div class="col-8">
            <DateTimeInput class="form-control form-control-sm" id="end_availability" bind:date={survey.end_availability} />
        </div>
    </div>

    <div class="row row-cols-3 mx-1 my-2">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="shown" bind:checked={survey.shown}>
            <label class="form-check-label" for="shown">
                Afficher le questionnaire
            </label>
        </div>

        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="corrected" bind:checked={survey.corrected}>
            <label class="form-check-label" for="corrected">
                Marqué comme corrigé
            </label>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">Enregistrer</button>
            {#if survey.id}
                <button type="button" class="btn btn-danger" on:click={deleteSurvey} disabled={deleteInProgress}>
                    {#if deleteInProgress}
                        <div class="spinner-border spinner-border-sm text-light me-1" role="status"></div>
                    {/if}
                    Supprimer
                </button>
                <button type="button" class="btn btn-secondary" on:click={duplicateSurvey}>Dupliquer avec ces nouveaux paramètres</button>
            {/if}
        </div>
    </div>

</form>
<hr>