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

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

 import { QuestionProposal } from '../lib/questions';

 export let edit = false;
 export let proposals = [];
 export let live = false;
 export let kind = 'mcq';
 export let prefixid = '';
 export let readonly = false;
 export let corrections = null;
 export let id_question = 0;
 export let value;

 let valueCheck = [];
 $: {
     if (value) {
         valueCheck = value.split(',');
     }
 }

 const dispatch = createEventDispatcher();

 function addProposal() {
     const p = new QuestionProposal();
     p.id_question = id_question;
     proposals.push(p);
     proposals = proposals;
 }
</script>

<div class:d-flex={live} class:justify-content-around={live}>
{#each proposals as proposal, pid (proposal.id)}
    <div class="form-check">
        {#if kind == 'mcq'}
            <input
                type="checkbox"
                class:btn-check={live}
                class:form-check-input={!live}
                disabled={readonly}
                name={prefixid + 'proposal' + proposal.id_question}
                id={prefixid + 'p' + proposal.id}
                bind:group={valueCheck}
                value={proposal.id?proposal.id.toString():''}
                on:change={() => { value = valueCheck.join(','); dispatch("change"); }}
            >
        {:else}
            <input
                type="radio"
                class:btn-check={live}
                class:form-check-input={!live}
                disabled={readonly}
                name={prefixid + 'proposal' + proposal.id_question}
                id={prefixid + 'p' + proposal.id}
                bind:group={value}
                value={proposal.id?proposal.id.toString():''}
                on:change={() => { dispatch("change"); }}
            >
        {/if}
        {#if edit}
            <form on:submit|preventDefault={() => { proposal.save().then(() => proposal = proposal);  } }>
                <div class="input-group input-group-sm mb-2">
                    <input
                        type="text"
                        class="form-control"
                        bind:value={proposal.label}
                        on:input={() => proposal.changed = true}
                    >
                    <button
                        type="button"
                        class="btn btn-outline-danger"
                        tabindex="-1"
                        disabled={!proposal.id}
                        on:click={() => { proposal.delete().then(() => { proposals.splice(pid, 1); proposals = proposals; }); }}
                    >
                        <i class="bi bi-trash"></i>
                    </button>
                    <button
                        type="submit"
                        class="btn"
                        class:btn-success={proposal.changed}
                        class:btn-outline-success={!proposal.changed}
                        disabled={!proposal.changed}
                    >
                        <i class="bi bi-check"></i>
                    </button>
                </div>
            </form>
        {:else}
            <label
                class:form-check-label={!live}
                class:btn={live}
                class:btn-lg={live}
                class:btn-primary={live && !corrections && value && value.indexOf(proposal.id.toString()) != -1}
                class:btn-outline-primary={live && !corrections && (!value || value.indexOf(proposal.id.toString()) == -1)}
                class:btn-success={live && corrections && corrections[proposal.id] == 0}
                class:btn-warning={live && corrections && corrections[proposal.id] != 0 && corrections[proposal.id] != -100 && value && value.indexOf(proposal.id.toString()) != -1}
                class:btn-danger={live && corrections && corrections[proposal.id] == -100 && value && value.indexOf(proposal.id.toString()) != -1}
                class:btn-outline-warning={live && corrections && corrections[proposal.id] != 0 && corrections[proposal.id] != -100 && (!value || value.indexOf(proposal.id.toString()) == -1)}
                class:btn-outline-danger={live && corrections && corrections[proposal.id] == -100 && (!value || value.indexOf(proposal.id.toString()) == -1)}
                for={prefixid + 'p' + proposal.id}
            >
                {proposal.label}
            </label>
        {/if}
    </div>
{/each}
</div>
{#if edit}
    {#if kind == 'mcq'}
        <input
            type="checkbox"
            class="form-check-input"
            disabled
            checked
        >
    {:else}
        <input
            type="radio"
            class="form-check-input"
            disabled
            checked
        >
    {/if}
    <button
        type="button"
        class="btn btn-sm btn-link"
        disabled={proposals.length > 0 && !proposals[proposals.length-1].id}
        on:click={addProposal}
    >
        ajouter
    </button>
{/if}