168 lines
8.0 KiB
Svelte
168 lines
8.0 KiB
Svelte
|
<script>
|
||
|
import { createEventDispatcher } from 'svelte';
|
||
|
|
||
|
import QuestionProposals from '../components/QuestionProposals.svelte';
|
||
|
import { user } from '../stores/user';
|
||
|
|
||
|
const dispatch = createEventDispatcher();
|
||
|
let className = '';
|
||
|
export { className as class };
|
||
|
export let question;
|
||
|
export let qid;
|
||
|
export let response_history = null;
|
||
|
export let readonly = false;
|
||
|
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}">
|
||
|
<div class="card-header">
|
||
|
{#if $user.is_admin}
|
||
|
<button class="btn btn-sm btn-danger ms-1 float-end" on:click={() => dispatch('delete')}>
|
||
|
<i class="bi bi-trash-fill"></i>
|
||
|
</button>
|
||
|
{#if edit}
|
||
|
<button class="btn btn-sm btn-success ms-1 float-end" on:click={saveQuestion}>
|
||
|
<i class="bi bi-check"></i>
|
||
|
</button>
|
||
|
{:else}
|
||
|
<button class="btn btn-sm btn-primary ms-1 float-end" on:click={editQuestion}>
|
||
|
<i class="bi bi-pencil"></i>
|
||
|
</button>
|
||
|
{/if}
|
||
|
{/if}
|
||
|
|
||
|
{#if edit}
|
||
|
<div class="card-title row">
|
||
|
<label for="q{qid}title" class="col-auto col-form-label font-weight-bold">Titre :</label>
|
||
|
<div class="col"><input id="q{qid}title" class="form-control" bind:value={question.title}></div>
|
||
|
</div>
|
||
|
{:else}
|
||
|
<h4 class="card-title mb-0">{qid + 1}. {question.title}</h4>
|
||
|
{/if}
|
||
|
|
||
|
{#if edit}
|
||
|
<div class="form-group row">
|
||
|
<label class="col-2 col-form-label" for="q{qid}kind">Type de réponse</label>
|
||
|
<div class="col">
|
||
|
<select class="form-select" id="q{qid}kind" bind:value={question.kind}>
|
||
|
<option value="text">Texte</option>
|
||
|
<option value="int">Entier</option>
|
||
|
<option value="ucq">QCU</option>
|
||
|
<option value="mcq">QCM</option>
|
||
|
</select>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<textarea class="form-control mb-2" bind:value={question.desc_raw} placeholder="Description de la question"></textarea>
|
||
|
{:else if question.description}
|
||
|
<p class="card-text mt-2">{@html question.description}</p>
|
||
|
{/if}
|
||
|
</div>
|
||
|
<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>
|
||
|
{: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}
|
||
|
/>
|
||
|
{/await}
|
||
|
{/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}
|
||
|
/>
|
||
|
{/await}
|
||
|
{:else if readonly}
|
||
|
<p class="card-text alert alert-secondary" style="white-space: pre-line">{value}</p>
|
||
|
{:else if question.kind == 'int'}
|
||
|
<input class="ml-5 col-sm-2 form-control" type="number" bind:value={value} placeholder={question.placeholder}>
|
||
|
{:else}
|
||
|
<textarea class="form-control" rows="6" bind:value={value} placeholder={question.placeholder}></textarea>
|
||
|
{/if}
|
||
|
|
||
|
{#if false}
|
||
|
<div ng-controller="ProposalsController" ng-if="question.kind == 'ucq' || question.kind == 'mcq'">
|
||
|
<div class="form-group form-check" ng-if="!question.edit && question.kind == 'mcq'" ng-repeat="proposal in proposals">
|
||
|
<input type="checkbox" class="form-check-input" id="p{proposal.id}" ng-model="question['p' + proposal.id]" disabled={readonly}>
|
||
|
<label class="form-check-label" for="p{proposal.id}">{proposal.label}</label>
|
||
|
</div>
|
||
|
<div class="form-group form-check" ng-if="!question.edit && question.kind == 'ucq'" ng-repeat="proposal in proposals">
|
||
|
<input type="radio" class="form-check-input" name="proposals{question.id}" id="p{proposal.id}" ng-model="question.value" value="{proposal.id}" disabled={survey.readonly}>
|
||
|
<label class="form-check-label" for="p{proposal.id}">{proposal.label}</label>
|
||
|
</div>
|
||
|
<div class="form-group row" ng-if="question.edit" ng-repeat="proposal in proposals">
|
||
|
<div class="col">
|
||
|
<input type="text" class="form-control" id="pi{proposal.id}" placeholder="Label" ng-model="proposal.label">
|
||
|
</div>
|
||
|
<div class="col-auto">
|
||
|
<button type="button" class="btn btn-success ml-1" ng-click="saveProposal()" ng-if="question.edit && (question.kind == 'ucq' || question.kind == 'mcq')"><i class="bi bi-check" ></i></button>
|
||
|
<button type="button" class="btn btn-danger ml-1" ng-click="deleteProposal()" ng-if="question.edit && (question.kind == 'ucq' || question.kind == 'mcq')"><i class="bi bi-trash-fill"></i></button>
|
||
|
</div>
|
||
|
</div>
|
||
|
<button type="button" class="btn btn-info ml-1" ng-click="addProposal()" ng-if="question.edit && (question.kind == 'ucq' || question.kind == 'mcq')" ng-disabled="!question.id"><i class="bi bi-plus"></i> Ajouter des proposals
|
||
|
</button><span ng-show="question.edit && (question.kind == 'ucq' || question.kind == 'mcq') && !question.id" class="ml-2" style="font-style:italic"> Créez la question pour ajouter des propositions</span>
|
||
|
</div>
|
||
|
<div class="ml-3 card-text alert alert-success" ng-if="!question.edit && (question.response.score_explaination || question.response.score)">
|
||
|
<div class="row">
|
||
|
<div class="col-auto">
|
||
|
<strong>{question.response.score} %</strong>
|
||
|
</div>
|
||
|
<p class="col mb-0" style="white-space: pre-line">{question.response.score_explaination}</p>
|
||
|
</div>
|
||
|
</div>
|
||
|
{/if}
|
||
|
</div>
|
||
|
</div>
|