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

<script>
 import { createEventDispatcher } from '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 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 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 class="btn btn-sm btn-success ms-1 float-end" on:click={saveQuestion}>
                    <i class="bi bi-check"></i>
                </button>
            {:else}
                <button class="btn btn-sm btn-primary ms-1 float-end" on:click={editQuestion}>
                    <i class="bi bi-pencil"></i>
                </button>
            {/if}
        {/if}
    </QuestionHeader>
    <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 == 'text' || question.kind == 'int'}
                <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}
                {#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
                        bind:value={value}
                    />
                {/await}
            {/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}
                    bind:value={value}
                />
            {/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}>
        {:else}
            <textarea class="form-control" rows="6" bind:value={value} placeholder={question.placeholder}></textarea>
        {/if}

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

        {#if false}
            <div ng-controller="ProposalsController" ng-if="question.kind == 'ucq' || question.kind == 'mcq'">
                <div class="form-group form-check" ng-if="!question.edit && question.kind == 'mcq'" ng-repeat="proposal in proposals">
                    <input type="checkbox" class="form-check-input" id="p{proposal.id}" ng-model="question['p' + proposal.id]" disabled={readonly}>
                    <label class="form-check-label" for="p{proposal.id}">{proposal.label}</label>
                </div>
                <div class="form-group form-check" ng-if="!question.edit && question.kind == 'ucq'" ng-repeat="proposal in proposals">
                    <input type="radio" class="form-check-input" name="proposals{question.id}" id="p{proposal.id}" ng-model="question.value" value="{proposal.id}" disabled={survey.readonly}>
                    <label class="form-check-label" for="p{proposal.id}">{proposal.label}</label>
                </div>
                <div class="form-group row" ng-if="question.edit" ng-repeat="proposal in proposals">
                    <div class="col">
                        <input type="text" class="form-control" id="pi{proposal.id}" placeholder="Label" ng-model="proposal.label">
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-success ml-1" ng-click="saveProposal()" ng-if="question.edit && (question.kind == 'ucq' || question.kind == 'mcq')"><i class="bi bi-check" ></i></button>
                        <button type="button" class="btn btn-danger ml-1" ng-click="deleteProposal()" ng-if="question.edit && (question.kind == 'ucq' || question.kind == 'mcq')"><i class="bi bi-trash-fill"></i></button>
                    </div>
                </div>
                <button type="button" class="btn btn-info ml-1" ng-click="addProposal()" ng-if="question.edit && (question.kind == 'ucq' || question.kind == 'mcq')" ng-disabled="!question.id"><i class="bi bi-plus"></i> Ajouter des proposals
                </button><span ng-show="question.edit && (question.kind == 'ucq' || question.kind == 'mcq') && !question.id" class="ml-2" style="font-style:italic"> Créez la question pour ajouter des propositions</span>
            </div>
            <div class="ml-3 card-text alert alert-success" ng-if="!question.edit && (question.response.score_explaination || question.response.score)">
                <div class="row">
                    <div class="col-auto">
                        <strong>{question.response.score}&nbsp;%</strong>
                    </div>
                    <p class="col mb-0" style="white-space: pre-line">{question.response.score_explaination}</p>
                </div>
            </div>
        {/if}
    </div>
</div>