114 lines
3.3 KiB
Svelte
114 lines
3.3 KiB
Svelte
|
<script>
|
||
|
import { QuestionProposal } from '../lib/questions';
|
||
|
|
||
|
export let edit = false;
|
||
|
export let proposals = [];
|
||
|
export let kind = 'mcq';
|
||
|
export let readonly = false;
|
||
|
export let id_question = 0;
|
||
|
export let value;
|
||
|
|
||
|
let valueCheck = [];
|
||
|
$: {
|
||
|
console.log(value);
|
||
|
if (value) {
|
||
|
valueCheck = value.split(',');
|
||
|
}
|
||
|
}
|
||
|
|
||
|
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={'proposal' + proposal.id_question}
|
||
|
id={'p' + proposal.id}
|
||
|
bind:group={valueCheck}
|
||
|
value={String(proposal.id)}
|
||
|
on:change={() => { value = valueCheck.join(',')}}
|
||
|
>
|
||
|
{:else}
|
||
|
<input
|
||
|
type="radio"
|
||
|
class="form-check-input"
|
||
|
disabled={readonly}
|
||
|
name={'proposal' + proposal.id_question}
|
||
|
id={'p' + proposal.id}
|
||
|
bind:group={value}
|
||
|
value={String(proposal.id)}
|
||
|
>
|
||
|
{/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={'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}
|