On utilise un modal pour supprimer le vote

elections/forms.py

@@ -63,13 +63,16 @@ class OptionForm(forms.ModelForm):
 
 class DeleteVoteForm(forms.Form):
     def __init__(self, **kwargs):
-        voter = kwargs.pop("voter")
+        voter = kwargs.pop("voter", None)
         super().__init__(**kwargs)
-        self.fields["delete"].label = _("Supprimer le vote de {} ({}) ?").format(
-            voter.full_name, voter.get_username()
-        )
+        if voter is not None:
+            self.fields["delete"].label = _("Supprimer le vote de {} ({}) ?").format(
+                voter.full_name, voter.get_username()
+            )
 
-    delete = forms.ChoiceField(choices=(("non", _("Non")), ("oui", _("Oui"))))
+    delete = forms.ChoiceField(
+        label=_("Supprimer"), choices=(("non", _("Non")), ("oui", _("Oui")))
+    )
 
 
 class SelectVoteForm(forms.ModelForm):

elections/templates/elections/election_voters.html

@@ -52,7 +52,6 @@
         <tr>
       </thead>
       <tbody>
-        {% with voters=election.voters.all %}
         {% if election.restricted %}
         {% for v in election.registered_voters.all %}
         <tr>
@@ -79,18 +78,21 @@
           </td>
           {% if can_delete %}
           <td class="has-text-centered">
-            <a class="tag is-danger has-tooltip-primary" href="{% url 'election.delete-vote' election.pk v.pk forloop.counter %}" data-tooltip="{% trans "Supprimer le vote de " %}{{ v.full_name }}">
+            {% url 'election.delete-vote' election.pk v.pk forloop.counter as post_url %}
+            {% blocktrans with v_name=v.full_name asvar modal_title %}Supprimer le vote de {{ v_name }}{% endblocktrans %}
+            <a class="tag is-danger has-tooltip-primary modal-button" data-target="modal-{{ forloop.counter }}" data-tooltip="{{ modal_title }}">
               <span class="icon">
                 <i class="fas fa-user-minus"></i>
               </span>
             </a>
+            {% include "forms/modal-form.html" with modal_id=forloop.counter form=v.form %}
             {% endif %}
         </tr>
         {% endfor %}
         {% endif %}
-        {% endwith %}
     </table>
   </div>
 </div>
 
+
 {% endblock %}

elections/views.py

@@ -430,14 +430,22 @@ class ElectionVotersView(NotArchivedMixin, DetailView):
         user = self.request.user
         context = super().get_context_data(**kwargs)
         election = context["election"]
+        voters = list(election.voters.all())
 
         if user.is_authenticated:
-            context["can_delete"] = (
+            can_delete = (
                 not election.restricted
                 and election.created_by == user
                 and election.end_date < timezone.now()
                 and not election.tallied
             )
+            if can_delete:
+                # On rajoute le formulaire pour supprimer le vote
+                for v in voters:
+                    v.form = DeleteVoteForm()
+
+            context["voters"] = voters
+            context["can_delete"] = can_delete
         return context
 
 

shared/templates/base.html

@@ -45,14 +45,43 @@
         });
       });
 
+      // Interact with modals
+      var $modals = document.querySelectorAll('.modal') || [];
+      var $modalButtons = document.querySelectorAll('.modal-button') || [];
+      var $modalCloses = document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button-close') || [];
+
+      $modalButtons.forEach(function($el) {
+        $el.addEventListener('click', function() {
+          var target = $el.dataset.target;
+          var $target = document.getElementById(target);
+          document.documentElement.classList.add('is-clipped');
+          $target.classList.add('is-active');
+        });
+      });
+
+      $modalCloses.forEach(function($el) {
+        $el.addEventListener('click', (event) => {
+          event.stopPropagation();
+          document.documentElement.classList.remove('is-clipped');
+          $modals.forEach(function($el) {
+            $el.classList.remove('is-active');
+          });
+        });
+      });
+
       document.addEventListener('keydown', (event) => {
         var e = event || window.event;
         if (e.keyCode === 27) {
           $dropdowns.forEach(($dropdown) => {
             $dropdown.classList.remove('is-active');
           });
+          document.documentElement.classList.remove('is-clipped');
+          $modals.forEach(function($el) {
+            $el.classList.remove('is-active');
+          });
         }
       });
+
     });
 
   </script>

shared/templates/forms/modal-form.html

@@ -0,0 +1,35 @@
+{% load i18n %}
+
+<div class="modal" id="modal-{{ modal_id }}">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <form method="post" action="{{ post_url }}">
+      {% csrf_token %}
+
+      <header class="modal-card-head">
+        <p class="modal-card-title">{{ modal_title }}</p>
+        <a class="delete" aria-label="close"></a>
+      </header>
+
+      <section class="modal-card-body">
+        {% include "forms/form.html" %}
+      </section>
+
+      <footer class="modal-card-foot">
+        <button class="button is-fullwidth is-outlined is-primary is-light">
+          <span class="icon is-small">
+            <i class="fas fa-check"></i>
+          </span>
+          <span>{% trans "Enregistrer" %}</span>
+        </button>
+
+        <a class="button is-primary button-close">
+          <span class="icon is-small">
+            <i class="fas fa-undo-alt"></i>
+          </span>
+          <span>{% trans "Annuler" %}</span>
+        </a>
+      </footer>
+    </form>
+  </div>
+</div>