atsebay.t/ui/src/components/QuestionForm.svelte

<script>
 import { createEventDispatcher } from 'svelte';

 import ListInput from './ListInput.svelte';
 import QuestionHeader from './QuestionHeader.svelte';
 import QuestionProposals from './QuestionProposals.svelte';
 import ResponseCorrected from './ResponseCorrected.svelte';
 import { user } from '../stores/user';

 const dispatch = createEventDispatcher();

 let className = '';
 export { className as class };
 export let question;
 export let qid;
 export let response_history = null;
 export let readonly = false;
 export let corrections = null;
 export let survey = null;
 export let value = "";

 export let edit = false;

 function saveQuestion() {
     question.save().then((response) => {
         question.description = response.description;
         question = question;
         edit = false;
     })
 }
 function editQuestion() {
     edit = true;
 }
</script>

<div class="card my-3 {className}">
    <QuestionHeader
        bind:question={question}
        {qid}
        {edit}
    >
        {#if $user && $user.is_admin}
            <button type="button" class="btn btn-sm btn-danger ms-1 float-end" on:click={() => dispatch('delete')}>
                <i class="bi bi-trash-fill"></i>
            </button>
            {#if edit}
                <button type="button" class="btn btn-sm btn-success ms-1 float-end" on:click={saveQuestion}>
                    <i class="bi bi-check"></i>
                </button>
            {:else}
                <button type="button" class="btn btn-sm btn-primary ms-1 float-end" on:click={editQuestion}>
                    <i class="bi bi-pencil"></i>
                </button>
            {/if}
        {/if}
    </QuestionHeader>
    <slot></slot>
    <div class="card-body">
        {#if false && response_history}
            <div class="d-flex justify-content-end mb-2">
                <div class="col-auto">
                    Historique&nbsp;:
	            <select class="form-select">
                        <option value="new">Actuel</option>
                        {#each response_history as history (history.id)}
                            <option value={history.id}>{new Intl.DateTimeFormat('default', { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric'}).format(new Date(history.time_submit))}</option>
                        {/each}
                    </select>
                </div>
            </div>
        {/if}
        {#if edit}
            {#if question.kind && (question.kind == 'text' || question.kind == 'int' || question.kind.startsWith('list'))}
                <div class="form-group row">
	            <label class="col-2 col-form-label" for="q{qid}placeholder">Placeholder</label>
	            <div class="col">
	                <input class="form-control" id="q{qid}placeholder" bind:value={question.placeholder}>
	            </div>
                </div>
            {:else if question.kind}
                {#if !question.id}
                    Veuillez enregistrer la question pour pouvoir ajouter des propositions.
                {:else}
                    {#await question.getProposals()}
                        <div class="text-center">
                            <div class="spinner-border text-primary mx-3" role="status"></div>
                            <span>Chargement des choix &hellip;</span>
                        </div>
                    {:then proposals}
                        <QuestionProposals
                            edit
                            id_question={question.id}
                            kind={question.kind}
                            {proposals}
                            readonly
                            live={survey.direct !== null}
                            {corrections}
                            bind:value={value}
                            on:change={() => { dispatch("change"); }}
                        />
                    {/await}
                {/if}
            {/if}
        {:else if question.kind == 'mcq' || question.kind == 'ucq'}
            {#await question.getProposals()}
                <div class="text-center">
                    <div class="spinner-border text-primary mx-3" role="status"></div>
                    <span>Chargement des choix &hellip;</span>
                </div>
            {:then proposals}
                <QuestionProposals
                    kind={question.kind}
                    {proposals}
                    {readonly}
                    live={survey.direct !== null}
                    {corrections}
                    bind:value={value}
                    on:change={() => { dispatch("change"); }}
                />
            {/await}
        {:else if readonly}
            <p class="card-text alert alert-secondary" style="white-space: pre-line">{value}</p>
        {:else if question.kind == 'int'}
            <input
                class="ml-5 col-sm-2 form-control"
                type="number"
                bind:value={value}
                placeholder={question.placeholder}
                on:change={() => { dispatch("change"); }}
            >
        {:else if question.kind && question.kind.startsWith('list')}
            <ListInput
                class="ml-5 col-sm-2 form-control my-1"
                kind={question.kind}
                bind:value={value}
                placeholder={question.placeholder}
                on:change={() => { dispatch("change"); }}
            />
        {:else}
            <textarea
                class="form-control"
                rows="6"
                bind:value={value}
                placeholder={question.placeholder}
                on:change={() => { dispatch("change"); }}
            ></textarea>
        {/if}

        {#if survey && survey.corrected && response_history}
            <ResponseCorrected
                response={response_history}
                {survey}
            />
        {/if}
    </div>
</div>