119 lines
3.5 KiB
Svelte
119 lines
3.5 KiB
Svelte
<script>
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
import { QuestionProposal } from '../lib/questions';
|
|
|
|
export let edit = false;
|
|
export let proposals = [];
|
|
export let kind = 'mcq';
|
|
export let prefixid = '';
|
|
export let readonly = false;
|
|
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>
|
|
|
|
{#each proposals as proposal, pid (proposal.id)}
|
|
<div class="form-check">
|
|
{#if kind == 'mcq'}
|
|
<input
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
disabled={readonly}
|
|
name={prefixid + 'proposal' + proposal.id_question}
|
|
id={prefixid + 'p' + proposal.id}
|
|
bind:group={valueCheck}
|
|
value={proposal.id.toString()}
|
|
on:change={() => { value = valueCheck.join(','); dispatch("change"); }}
|
|
>
|
|
{:else}
|
|
<input
|
|
type="radio"
|
|
class="form-check-input"
|
|
disabled={readonly}
|
|
name={prefixid + 'proposal' + proposal.id_question}
|
|
id={prefixid + 'p' + proposal.id}
|
|
bind:group={value}
|
|
value={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"
|
|
for={prefixid + 'p' + proposal.id}
|
|
>
|
|
{proposal.label}
|
|
</label>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
{#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"
|
|
on:click={addProposal}
|
|
>
|
|
ajouter
|
|
</button>
|
|
{/if}
|