2021-11-18 11:12:28 +00:00
|
|
|
<script>
|
2022-02-28 18:00:30 +00:00
|
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
|
2021-11-18 11:12:28 +00:00
|
|
|
import { QuestionProposal } from '../lib/questions';
|
|
|
|
|
|
|
|
export let edit = false;
|
|
|
|
export let proposals = [];
|
2022-09-01 17:15:53 +00:00
|
|
|
export let live = false;
|
2021-11-18 11:12:28 +00:00
|
|
|
export let kind = 'mcq';
|
2022-02-28 09:52:27 +00:00
|
|
|
export let prefixid = '';
|
2021-11-18 11:12:28 +00:00
|
|
|
export let readonly = false;
|
|
|
|
export let id_question = 0;
|
|
|
|
export let value;
|
|
|
|
|
|
|
|
let valueCheck = [];
|
|
|
|
$: {
|
|
|
|
if (value) {
|
|
|
|
valueCheck = value.split(',');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-02-28 18:00:30 +00:00
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
|
2021-11-18 11:12:28 +00:00
|
|
|
function addProposal() {
|
|
|
|
const p = new QuestionProposal();
|
|
|
|
p.id_question = id_question;
|
|
|
|
proposals.push(p);
|
|
|
|
proposals = proposals;
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2022-09-01 17:15:53 +00:00
|
|
|
<div class:d-flex={live} class:justify-content-around={live}>
|
2021-11-18 11:12:28 +00:00
|
|
|
{#each proposals as proposal, pid (proposal.id)}
|
|
|
|
<div class="form-check">
|
|
|
|
{#if kind == 'mcq'}
|
|
|
|
<input
|
|
|
|
type="checkbox"
|
2022-09-01 18:53:15 +00:00
|
|
|
class:btn-check={live}
|
|
|
|
class:form-check-input={!live}
|
2021-11-18 11:12:28 +00:00
|
|
|
disabled={readonly}
|
2022-02-28 09:52:27 +00:00
|
|
|
name={prefixid + 'proposal' + proposal.id_question}
|
|
|
|
id={prefixid + 'p' + proposal.id}
|
2021-11-18 11:12:28 +00:00
|
|
|
bind:group={valueCheck}
|
2022-03-01 19:21:49 +00:00
|
|
|
value={proposal.id?proposal.id.toString():''}
|
2022-02-28 18:00:30 +00:00
|
|
|
on:change={() => { value = valueCheck.join(','); dispatch("change"); }}
|
2021-11-18 11:12:28 +00:00
|
|
|
>
|
|
|
|
{:else}
|
|
|
|
<input
|
|
|
|
type="radio"
|
2022-09-01 17:15:53 +00:00
|
|
|
class:btn-check={live}
|
|
|
|
class:form-check-input={!live}
|
2021-11-18 11:12:28 +00:00
|
|
|
disabled={readonly}
|
2022-02-28 09:52:27 +00:00
|
|
|
name={prefixid + 'proposal' + proposal.id_question}
|
|
|
|
id={prefixid + 'p' + proposal.id}
|
2021-11-18 11:12:28 +00:00
|
|
|
bind:group={value}
|
2022-03-01 19:21:49 +00:00
|
|
|
value={proposal.id?proposal.id.toString():''}
|
2022-02-28 18:00:30 +00:00
|
|
|
on:change={() => { dispatch("change"); }}
|
2021-11-18 11:12:28 +00:00
|
|
|
>
|
|
|
|
{/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
|
2022-09-01 17:15:53 +00:00
|
|
|
class:form-check-label={!live}
|
|
|
|
class:btn={live}
|
|
|
|
class:btn-lg={live}
|
2022-09-01 18:53:15 +00:00
|
|
|
class:btn-primary={live && value.indexOf(proposal.id.toString()) != -1}
|
|
|
|
class:btn-outline-primary={live && value.indexOf(proposal.id.toString()) == -1}
|
2022-02-28 09:52:27 +00:00
|
|
|
for={prefixid + 'p' + proposal.id}
|
2021-11-18 11:12:28 +00:00
|
|
|
>
|
|
|
|
{proposal.label}
|
|
|
|
</label>
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
{/each}
|
2022-09-01 17:15:53 +00:00
|
|
|
</div>
|
2021-11-18 11:12:28 +00:00
|
|
|
{#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"
|
2022-03-01 19:21:49 +00:00
|
|
|
disabled={proposals.length > 0 && !proposals[proposals.length-1].id}
|
2021-11-18 11:12:28 +00:00
|
|
|
on:click={addProposal}
|
|
|
|
>
|
|
|
|
ajouter
|
|
|
|
</button>
|
|
|
|
{/if}
|