386 lines
22 KiB
Twig
386 lines
22 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}Enquête{% endblock %}
|
|
|
|
|
|
|
|
{% block content %}
|
|
|
|
{% set prototypeHtml %}
|
|
{% include 'investigation/form-question.html.twig' with { formQtn: form.questions.vars.prototype } %}
|
|
{% endset %}
|
|
|
|
<style>
|
|
|
|
.save-question {
|
|
position: fixed; right: 80px; top: 65%; width:215px;
|
|
}
|
|
|
|
.add-question {
|
|
position: fixed; right: 80px; top: 73%;
|
|
}
|
|
|
|
.investigation-ready {
|
|
position: fixed; right: 80px; top: 81%; width:215px;
|
|
}
|
|
</style>
|
|
|
|
<!-- az-header -->
|
|
<div class="az-content">
|
|
<div class="container">
|
|
|
|
<div class="az-content-body d-flex flex-column">
|
|
<div class="az-content-breadcrumb">
|
|
<span>Enquête</span>
|
|
<span>Création</span>
|
|
</div>
|
|
<h2 class="az-content-title">Enquête</h2>
|
|
|
|
<div class="az-content-label mg-b-5"></div>
|
|
<p class="mg-b-20">Créer une nouvelle enquête</p>
|
|
|
|
|
|
{{ form_start(form) }}
|
|
<div class="tab-vertical mb-3" id="investigation-information">
|
|
<ul class="nav nav-tabs" id="myTab3" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="en-vertical-tab" data-toggle="tab" href="#en-vertical" role="tab" aria-controls="home" aria-selected="true">🇬🇧 English (UK)</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="fr-vertical-tab" data-toggle="tab" href="#fr-vertical" role="tab" aria-controls="profile" aria-selected="false">🇫🇷 Français</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="ar-vertical-tab" data-toggle="tab" href="#ar-vertical" role="tab" aria-controls="contact" aria-selected="false">🇸🇦 العربية</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent3">
|
|
<div class="tab-pane fade show active" id="en-vertical" role="tabpanel" aria-labelledby="en-vertical-tab">
|
|
<div class="form-group col-sm-12">
|
|
<label for="{{ form.name_en.vars.id }}">{{ form_label(form.name_en) }}</label>
|
|
{{ form_widget(form.name_en, {'attr': {'class': 'form-control' }}) }}
|
|
</div>
|
|
<div class="form-group col-sm-12">
|
|
<label for="{{ form.source_en.vars.id }}">{{ form_label(form.source_en) }}</label>
|
|
{{ form_widget(form.source_en, {'attr': {'class': 'form-control' }}) }}
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="fr-vertical" role="tabpanel" aria-labelledby="fr-vertical-tab">
|
|
<div class="form-group col-sm-12">
|
|
<label for="{{ form.name_fr.vars.id }}">{{ form_label(form.name_fr) }}</label>
|
|
{{ form_widget(form.name_fr, {'attr': {'class': 'form-control' }}) }}
|
|
</div>
|
|
<div class="form-group col-sm-12">
|
|
<label for="{{ form.source_fr.vars.id }}">{{ form_label(form.source_fr) }}</label>
|
|
{{ form_widget(form.source_fr, {'attr': {'class': 'form-control' }}) }}
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="ar-vertical" role="tabpanel" aria-labelledby="ar-vertical-tab">
|
|
<div class="form-group">
|
|
<label for="{{ form.name_ar.vars.id }}">{{ form_label(form.name_ar) }}</label>
|
|
{{ form_widget(form.name_ar, {'attr': {'class': 'form-control' }}) }}
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="{{ form.source_ar.vars.id }}">{{ form_label(form.source_ar) }}</label>
|
|
{{ form_widget(form.source_ar, {'attr': {'class': 'form-control' }}) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="questions-collection" data-prototype="{{ prototypeHtml|e('html_attr') }}" data-index="{{ form|length }}">
|
|
{% for formQuestion in form.questions %}
|
|
<div class="question-item">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="card border-left border-primary">
|
|
<div class="card-body">
|
|
<div class="form-group row">
|
|
<div class="col-md-3">
|
|
<h5 class="card-title mb-5 question-number">Question N: {{ loop.index }}</h5>
|
|
</div>
|
|
<div class="col-md-3 offset-2">
|
|
<button type="button" class="btn btn-outline-secondary rounded-pill mb-3">
|
|
<i class="fa fa-eye"></i>Afficher
|
|
</button>
|
|
</div>
|
|
<div class="col-md-2 offset-2">
|
|
<button type="button" class="btn btn-danger remove-question mb-3 float-right">
|
|
<i class="fa fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.title.vars.id }}">{{ form_label(formQuestion.title) }}:</label>
|
|
<div class="col-sm-8">
|
|
{{ form_widget(formQuestion.title, {'attr': {'class': 'form-control', 'placeholder': 'Visible que pour la createur du question' }}) }}
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.name_en.vars.id }}">{{ form_label(formQuestion.name_en) }}:</label>
|
|
<div class="col-sm-8">
|
|
{{ form_widget(formQuestion.name_en, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.name_fr.vars.id }}">{{ form_label(formQuestion.name_fr) }}:</label>
|
|
<div class="col-sm-8">
|
|
{{ form_widget(formQuestion.name_fr, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.name_ar.vars.id }}">{{ form_label(formQuestion.name_ar) }}:</label>
|
|
<div class="col-sm-8">
|
|
{{ form_widget(formQuestion.name_ar, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
|
|
</div>
|
|
</div>
|
|
<div class="row mt-5">
|
|
<div class="col-md-6">
|
|
<div class="form-group col-sm-10">
|
|
<label for="{{ formQuestion.amount.vars.id }}">{{ form_label(formQuestion.amount) }}</label>
|
|
{{ form_widget(formQuestion.amount, {'attr': {'class': 'form-control' }}) }}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group col-sm-10">
|
|
<label for="{{ formQuestion.max_participant.vars.id }}">{{ form_label(formQuestion.max_participant) }}</label>
|
|
{{ form_widget(formQuestion.max_participant, {'attr': {'class': 'form-control' }}) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h4 class="card-title mt-4">Modalité</h4>
|
|
<div class="row mt-3">
|
|
<div class="col-md-6">
|
|
<div class="form-group ">
|
|
<label>{{ form_label(formQuestion.type_modality) }}</label>
|
|
{{ form_widget(formQuestion.type_modality, {'attr': {'class': 'form-control form-control-sm mb-3"' }}) }}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mt-4">
|
|
<div class="form-group">
|
|
{% for key,child in formQuestion.choice %}
|
|
<div class="custom-control-inline">
|
|
{{ form_widget(child) }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% set prototype %}
|
|
<div class="modality-item border rounded p-3 mt-3 mb-3">
|
|
|
|
{# EN #}
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text">EN</span>
|
|
{{ form_widget(formQuestion.modalitys.vars.prototype.name_en, {
|
|
attr: {
|
|
class: 'form-control',
|
|
placeholder: 'Nom (EN)'
|
|
}
|
|
}) }}
|
|
</div>
|
|
{{ form_errors(formQuestion.modalitys.vars.prototype.name_en) }}
|
|
|
|
{# FR #}
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text">FR</span>
|
|
{{ form_widget(formQuestion.modalitys.vars.prototype.name_fr, {
|
|
attr: {
|
|
class: 'form-control',
|
|
placeholder: 'Nom (FR)'
|
|
}
|
|
}) }}
|
|
</div>
|
|
{{ form_errors(formQuestion.modalitys.vars.prototype.name_fr) }}
|
|
|
|
{# AR #}
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text">AR</span>
|
|
{{ form_widget(formQuestion.modalitys.vars.prototype.name_ar, {
|
|
attr: {
|
|
class: 'form-control',
|
|
placeholder: 'الاسم (AR)',
|
|
dir: 'rtl'
|
|
}
|
|
}) }}
|
|
</div>
|
|
{{ form_errors(formQuestion.modalitys.vars.prototype.name_ar) }}
|
|
|
|
|
|
</div>
|
|
{% endset %}
|
|
|
|
{# modalities #}
|
|
<div class="row mt-4">
|
|
<div class="col-md-8">
|
|
<div id="modalities" data-prototype="{{ prototype|e('html_attr') }}">
|
|
|
|
{% for modality in formQuestion.modalitys %}
|
|
<div class="modality-item border rounded p-3 mb-3">
|
|
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text">EN</span>
|
|
{{ form_widget(modality.name_en, {
|
|
attr: { class: 'form-control', placeholder: 'Nom (EN)' }
|
|
}) }}
|
|
</div>
|
|
{{ form_errors(modality.name_en) }}
|
|
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text">FR</span>
|
|
{{ form_widget(modality.name_fr, {
|
|
attr: { class: 'form-control', placeholder: 'Nom (FR)' }
|
|
}) }}
|
|
</div>
|
|
{{ form_errors(modality.name_fr) }}
|
|
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text">AR</span>
|
|
{{ form_widget(modality.name_ar, {
|
|
attr: {
|
|
class: 'form-control',
|
|
placeholder: 'الاسم (AR)',
|
|
dir: 'rtl'
|
|
}
|
|
}) }}
|
|
</div>
|
|
{{ form_errors(modality.name_ar) }}
|
|
|
|
<button type="button" class="remove-modality btn btn-danger btn-sm"> Supprimer </button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<button type="button" id="add-modality" class="btn btn-primary">Ajouter une modalité</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3"></div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-info rounded-pill add-question">
|
|
<i class="typcn typcn-folder"></i>
|
|
Ajouter un autre question
|
|
</button>
|
|
{{ form_row(form.save, {'attr': {'class': 'btn btn-success rounded-pill save-question' }}) }}
|
|
|
|
{{ form_end(form) }}
|
|
|
|
{% if app.request.attributes.get('_route') == 'app_investigation_edit' %}
|
|
<a href="{{ path('app_investigation_ready', {id: investigation.id}) }}" class="btn btn-secondary rounded-pill investigation-ready">
|
|
Enquête Prête
|
|
</a>
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{% block javascripts %}
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
|
|
var $collection = $('#questions-collection');
|
|
var $addButton = $('.add-question');
|
|
|
|
// Compter les questions existantes
|
|
$collection.data('index', $collection.find('.question-item').length);
|
|
|
|
|
|
$addButton.on('click', function() {
|
|
var index = $collection.data('index');
|
|
|
|
var prototype = $collection.data('prototype');
|
|
|
|
var newForm = prototype.replace(/__name__/g, index);
|
|
|
|
var $newElement = $('<div class="row question-item"></div>');
|
|
|
|
$newElement.append(newForm);
|
|
$collection.append($newElement);
|
|
|
|
// Mettre à jour l'index
|
|
$collection.data('index', index + 1);
|
|
|
|
// Afficher les boutons supprimer
|
|
$('.remove-question').show();
|
|
|
|
updateIndexes();
|
|
|
|
$("html, body").animate({
|
|
scrollTop: $(window).scrollTop() + 700
|
|
}, 400);
|
|
|
|
});
|
|
|
|
// Suppression des questions
|
|
$collection.on('click', '.remove-question', function() {
|
|
console.log($('.question-item').length);
|
|
if ($('.question-item').length > 1) {
|
|
$(this).closest('.question-item').remove();
|
|
console.log($(this).closest('.question-item').remove());
|
|
updateIndexes();
|
|
|
|
// Cacher le bouton supprimer s'il ne reste qu'une question
|
|
if ($('.question-item').length === 1) {
|
|
$('.remove-question').hide();
|
|
}
|
|
}
|
|
});
|
|
|
|
function updateIndexes() {
|
|
$('.question-item').each(function(index) {
|
|
$(this).find('h5').text('Question N: ' + (index + 1));
|
|
});
|
|
}
|
|
|
|
|
|
|
|
//modalities add-modality
|
|
const container = document.getElementById('modalities');
|
|
const addButton = document.getElementById('add-modality');
|
|
let index = container.children.length;
|
|
|
|
addButton.addEventListener('click', () => {
|
|
const prototype = container.dataset.prototype;
|
|
const html = prototype.replace(/__name__/g, index);
|
|
index++;
|
|
|
|
const div = document.createElement('div');
|
|
div.classList.add('modality-item');
|
|
div.innerHTML = html +
|
|
'<button type="button" class="remove-modality btn btn-danger">Supprimer</button>';
|
|
|
|
container.appendChild(div);
|
|
});
|
|
|
|
|
|
container.addEventListener('click', (e) => {
|
|
if (e.target.classList.contains('remove-modality')) {
|
|
e.target.closest('.modality-item').remove();
|
|
}
|
|
});
|
|
|
|
|
|
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% endblock %}
|
|
|