2021-11-18 11:12:28 +00:00
|
|
|
<script>
|
|
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
|
2022-02-28 09:52:27 +00:00
|
|
|
import QuestionHeader from './QuestionHeader.svelte';
|
|
|
|
import QuestionProposals from './QuestionProposals.svelte';
|
|
|
|
import ResponseCorrected from './ResponseCorrected.svelte';
|
2021-11-18 11:12:28 +00:00
|
|
|
import { user } from '../stores/user';
|
|
|
|
|
|
|
|
const dispatch = createEventDispatcher();
|
2022-02-28 09:52:27 +00:00
|
|
|
|
2021-11-18 11:12:28 +00:00
|
|
|
let className = '';
|
|
|
|
export { className as class };
|
|
|
|
export let question;
|
|
|
|
export let qid;
|
|
|
|
export let response_history = null;
|
|
|
|
export let readonly = false;
|
2022-02-28 09:52:27 +00:00
|
|
|
export let survey = null;
|
2021-11-18 11:12:28 +00:00
|
|
|
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}">
|
2022-02-28 09:52:27 +00:00
|
|
|
<QuestionHeader
|
|
|
|
bind:question={question}
|
|
|
|
{qid}
|
|
|
|
{edit}
|
|
|
|
>
|
|
|
|
{#if $user && $user.is_admin}
|
2022-03-01 19:21:49 +00:00
|
|
|
<button type="button" class="btn btn-sm btn-danger ms-1 float-end" on:click={() => dispatch('delete')}>
|
2021-11-18 11:12:28 +00:00
|
|
|
<i class="bi bi-trash-fill"></i>
|
|
|
|
</button>
|
|
|
|
{#if edit}
|
2022-03-01 19:21:49 +00:00
|
|
|
<button type="button" class="btn btn-sm btn-success ms-1 float-end" on:click={saveQuestion}>
|
2021-11-18 11:12:28 +00:00
|
|
|
<i class="bi bi-check"></i>
|
|
|
|
</button>
|
|
|
|
{:else}
|
2022-03-01 19:21:49 +00:00
|
|
|
<button type="button" class="btn btn-sm btn-primary ms-1 float-end" on:click={editQuestion}>
|
2021-11-18 11:12:28 +00:00
|
|
|
<i class="bi bi-pencil"></i>
|
|
|
|
</button>
|
|
|
|
{/if}
|
|
|
|
{/if}
|
2022-02-28 09:52:27 +00:00
|
|
|
</QuestionHeader>
|
2022-02-28 18:00:30 +00:00
|
|
|
<slot></slot>
|
2021-11-18 11:12:28 +00:00
|
|
|
<div class="card-body">
|
|
|
|
{#if false && response_history}
|
|
|
|
<div class="d-flex justify-content-end mb-2">
|
|
|
|
<div class="col-auto">
|
|
|
|
Historique :
|
|
|
|
<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>
|
2022-03-01 19:21:49 +00:00
|
|
|
{:else if question.kind}
|
|
|
|
{#if !question.id}
|
|
|
|
Veuillez enregistrer la question pour pouvoir ajouter des propositions.
|
|
|
|
{:else}
|
|
|
|
{#await question.getProposals()}
|
|
|
|
<div class="text-center">
|
|
|
|
<div class="spinner-border text-primary mx-3" role="status"></div>
|
|
|
|
<span>Chargement des choix …</span>
|
|
|
|
</div>
|
|
|
|
{:then proposals}
|
|
|
|
<QuestionProposals
|
|
|
|
edit
|
|
|
|
id_question={question.id}
|
|
|
|
kind={question.kind}
|
|
|
|
{proposals}
|
|
|
|
readonly
|
|
|
|
bind:value={value}
|
|
|
|
on:change={() => { dispatch("change"); }}
|
|
|
|
/>
|
|
|
|
{/await}
|
|
|
|
{/if}
|
2021-11-18 11:12:28 +00:00
|
|
|
{/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 …</span>
|
|
|
|
</div>
|
|
|
|
{:then proposals}
|
|
|
|
<QuestionProposals
|
|
|
|
kind={question.kind}
|
|
|
|
{proposals}
|
|
|
|
{readonly}
|
|
|
|
bind:value={value}
|
2022-02-28 18:00:30 +00:00
|
|
|
on:change={() => { dispatch("change"); }}
|
2021-11-18 11:12:28 +00:00
|
|
|
/>
|
|
|
|
{/await}
|
|
|
|
{:else if readonly}
|
|
|
|
<p class="card-text alert alert-secondary" style="white-space: pre-line">{value}</p>
|
|
|
|
{:else if question.kind == 'int'}
|
2022-02-28 18:00:30 +00:00
|
|
|
<input
|
|
|
|
class="ml-5 col-sm-2 form-control"
|
|
|
|
type="number"
|
|
|
|
bind:value={value}
|
|
|
|
placeholder={question.placeholder}
|
|
|
|
on:change={() => { dispatch("change"); }}
|
|
|
|
>
|
2021-11-18 11:12:28 +00:00
|
|
|
{:else}
|
2022-02-28 18:00:30 +00:00
|
|
|
<textarea
|
|
|
|
class="form-control"
|
|
|
|
rows="6"
|
|
|
|
bind:value={value}
|
|
|
|
placeholder={question.placeholder}
|
|
|
|
on:change={() => { dispatch("change"); }}
|
|
|
|
></textarea>
|
2021-11-18 11:12:28 +00:00
|
|
|
{/if}
|
|
|
|
|
2022-09-01 17:14:57 +00:00
|
|
|
{#if survey && survey.corrected && response_history}
|
2022-02-28 09:52:27 +00:00
|
|
|
<ResponseCorrected
|
|
|
|
response={response_history}
|
|
|
|
{survey}
|
|
|
|
/>
|
|
|
|
{/if}
|
2021-11-18 11:12:28 +00:00
|
|
|
</div>
|
|
|
|
</div>
|