Utilisation d'un modal pour l'ajout et la modification d'options/questions

This commit is contained in:
Tom Hubrecht 2021-05-28 11:04:39 +02:00
parent b1488c7c8a
commit 6abfd035d7
4 changed files with 77 additions and 58 deletions

View file

@ -7,11 +7,23 @@
document.addEventListener('DOMContentLoaded', () => {
var $modalButtons = document.querySelectorAll('.modal-button') || [];
$modalButtons.forEach(function($el) {
$el.addEventListener('click', function() {
$modalButtons.forEach($el => {
$el.addEventListener('click', () => {
var $target = document.getElementById($el.dataset.target);
$target_form = $target.querySelector("form");
var $target_form = $target.querySelector("form");
var modal_title = '';
$target_form.action = $el.dataset.post_url;
$target.querySelector('.modal-card-title').innerHTML = $el.dataset.title;
if ($el.classList.contains('question')) {
$target_form.querySelector('#id_text_fr').value = $el.dataset.q_fr || '';
$target_form.querySelector('#id_text_en').value = $el.dataset.q_en || '';
$target_form.querySelector('#id_type').value = $el.dataset.type || 'assentiment';
} else if ($el.classList.contains('option')) {
$target_form.querySelector('#id_text_fr').value = $el.dataset.o_fr || '';
$target_form.querySelector('#id_text_en').value = $el.dataset.o_en || '';
$target_form.querySelector('#id_abbreviation').value = $el.dataset.abbr || '';
}
});
});
});
@ -179,7 +191,7 @@
</span>
</a>
<a class="tag is-outlined is-light is-info ml-1" href="{% url 'election.mod-question' q.pk %}">
<a class="tag is-outlined is-light is-info ml-1 modal-button question" data-post_url="{% url 'election.mod-question' q.pk %}" data-target="modal-question" data-type="{{ q.type }}" data-q_en="{{ q.text_en }}" data-q_fr="{{ q.text_fr }}" data-title="{% trans "Modifier la question" %}">
<span class="icon-text">
<span class="icon">
<i class="fas fa-edit"></i>
@ -207,7 +219,8 @@
<i class="fas fa-times"></i>
</span>
</a>
<a class="tag is-info is-light is-outlined has-tooltip-primary mb-0" data-tooltip="{% trans "Modifier" %}" href="{% url 'election.mod-option' o.pk %}">
<a class="tag is-info is-light is-outlined has-tooltip-primary mb-0 modal-button option" data-tooltip="{% trans "Modifier" %}" data-post_url="{% url 'election.mod-option' o.pk %}" data-target="modal-option" data-o_en="{{ o.text_en }}" data-o_fr="{{ o.text_fr }}" data-abbr="{{ o.abbreviation }}" data-title="{% trans "Modifier l'option" %}">
<span class="icon">
<i class="fas fa-edit"></i>
</span>
@ -246,7 +259,7 @@
{# Rajout d'une option #}
{% if election.start_date > current_time %}
<div class="panel-block">
<button class="button modal-button is-primary is-outlined is-fullwidth" data-post_url="{% url 'election.add-option' q.pk %}" data-target="modal-add_option">
<button class="button modal-button is-primary is-outlined is-fullwidth option" data-post_url="{% url 'election.add-option' q.pk %}" data-target="modal-option" data-title="{% trans "Rajouter une option" %}">
<span class="icon">
<i class="fas fa-plus"></i>
</span>
@ -262,16 +275,15 @@
{# Rajout d'une option #}
{% trans "Rajouter une option" as modal_title %}
{% include "forms/modal-form.html" with modal_id="add_option" form=o_form %}
{% include "forms/modal-form.html" with modal_id="option" form=o_form %}
{# Rajout d'une question #}
{% trans "Rajouter une question" as modal_title %}
{% include "forms/modal-form.html" with modal_id="add_question" form=q_form %}
{% include "forms/modal-form.html" with modal_id="question" form=q_form %}
<div class="columns is-centered" id="q_add">
<div class="column is-two-thirds">
<button class="button modal-button is-primary is-outlined is-fullwidth" data-post_url="{% url 'election.add-question' election.pk %}" data-target="modal-add_question">
<button class="button modal-button is-primary is-outlined is-fullwidth question" data-post_url="{% url 'election.add-question' election.pk %}" data-target="modal-question" data-title="{% trans "Rajouter une question" %}">
<span class="icon">
<i class="fas fa-question"></i>
</span>

View file

@ -13,8 +13,8 @@
$del_buttons.forEach($del => {
$del.addEventListener('click', () => {
$del_form.action = $del.dataset['post_url'];
$del_title.innerHTML = $del.dataset['tooltip'];
$del_form.action = $del.dataset.post_url;
$del_title.innerHTML = $del.dataset.tooltip;
});
});
});