makes modals idempotent

gip-inclusion · Jul 29, 2024 · 3fd994d · 3fd994d
1 parent 7e90867
commit 3fd994d
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 16 deletions.
diff --git a/lemarche/static/js/favorite_item_add.js b/lemarche/static/js/favorite_item_add.js
@@ -1,12 +1,13 @@
 document.addEventListener("DOMContentLoaded", function() {
-    $('#favorite_item_add_modal').on('show.bs.modal', function (event) {
+    document.getElementById('favorite_item_add_modal').addEventListener('dsfr.disclose', (event) => {
         // Button that triggered the modal
-        var button = $(event.relatedTarget);
+        var button = event.explicitOriginalTarget;
 
         // Extract info from data-* attributes
-        var siaeId = button.data('siae-id');
-        var siaeSlug = button.data('siae-slug');
-        var siaeNameDisplay = button.data('siae-name-display');
+        var siaeSlug = button.dataset["siaeSlug"];
+        var siaeNameDisplay = button.dataset["siaeNameDisplay"];
+        // Button that triggered the modal
+        var button = $(event.relatedTarget);
 
         // Update the modal's content
         // - siae name display
@@ -18,7 +19,7 @@ document.addEventListener("DOMContentLoaded", function() {
             modal.querySelector('#siae-name-display').textContent = siaeNameDisplay;
         }
         modalForms.forEach(form => {
-            var formActionUrl = form.getAttribute('action');
+            var formActionUrl = form.getAttribute('data-action');
             form.setAttribute('action', formActionUrl.replace('siae-slug-to-replace', siaeSlug));
         });
     });

diff --git a/lemarche/static/js/favorite_item_remove.js b/lemarche/static/js/favorite_item_remove.js
@@ -1,12 +1,11 @@
 document.addEventListener("DOMContentLoaded", function() {
-    $('#favorite_item_remove_modal').on('show.bs.modal', function (event) {
+    document.getElementById('favorite_item_remove_modal').addEventListener('dsfr.disclose', (event) => {
         // Button that triggered the modal
-        var button = $(event.relatedTarget);
+        var button = event.explicitOriginalTarget;
 
         // Extract info from data-* attributes
-        var siaeId = button.data('siae-id');
-        var siaeSlug = button.data('siae-slug');
-        var siaeNameDisplay = button.data('siae-name-display');
+        var siaeSlug = button.dataset["siaeSlug"];
+        var siaeNameDisplay = button.dataset["siaeNameDisplay"];
 
         // Update the modal's content
         // - siae name display
@@ -17,7 +16,7 @@ document.addEventListener("DOMContentLoaded", function() {
         if (modal.querySelector('#siae-name-display')) {
             modal.querySelector('#siae-name-display').textContent = siaeNameDisplay;
         }
-        var formActionUrl = modalForm.getAttribute('action');
+        var formActionUrl = modalForm.getAttribute('data-action');
         modalForm.setAttribute('action', formActionUrl.replace('siae-slug-to-replace', siaeSlug));
     });
 });
diff --git a/lemarche/templates/favorites/_favorite_item_add_modal.html b/lemarche/templates/favorites/_favorite_item_add_modal.html
@@ -11,7 +11,7 @@ <h3 id="favorite_item_add_modal_title" class="fr-modal__title">
                             Liste d'achat favoris
                         </h3>
                         <!-- New list -->
-                        <form method="post" action="{% url 'siae:favorite_lists' siae.slug|default:'siae-slug-to-replace' %}">
+                        <form method="post" data-action="{% url 'siae:favorite_lists' siae.slug|default:'siae-slug-to-replace' %}">
                             {% csrf_token %}
                             <div class="fr-input-group">
                                 <label class="fr-label" for="id_new_favorite_list">Créer une {% if user.favorite_list_count %}nouvelle {% endif %}liste</label>
@@ -22,7 +22,7 @@ <h3 id="favorite_item_add_modal_title" class="fr-modal__title">
 
                         <!-- Existing list(s) -->
                         {% if user.favorite_list_count %}
-                            <form method="post" action="{% url 'siae:favorite_lists' siae.slug|default:'siae-slug-to-replace' %}">
+                            <form method="post" data-action="{% url 'siae:favorite_lists' siae.slug|default:'siae-slug-to-replace' %}">
                                 {% csrf_token %}
                                 <p class="fr-hr-or">ou</p>
 

diff --git a/lemarche/templates/favorites/_favorite_item_remove_modal.html b/lemarche/templates/favorites/_favorite_item_remove_modal.html
@@ -16,7 +16,7 @@ <h3 id="favorite_item_remove_modal_title" class="fr-modal__title">
                     </div>
                     <div class="fr-modal__footer">
                         <div class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg">
-                            <form method="post" action="{% url 'dashboard_favorites:item_delete' favorite_list.slug|default:'favorite-list-slug' siae.slug|default:'siae-slug-to-replace' %}">
+                            <form method="post" data-action="{% url 'dashboard_favorites:item_delete' favorite_list.slug|default:'favorite-list-slug' siae.slug|default:'siae-slug-to-replace' %}">
                                 {% csrf_token %} 
                                 <button class="fr-btn fr-btn--icon-left" type="submit">
                                     Confirmer

diff --git a/lemarche/templates/favorites/dashboard_favorite_list_detail.html b/lemarche/templates/favorites/dashboard_favorite_list_detail.html
@@ -37,7 +37,11 @@ <h1>
                     {% dsfr_alert type="info" content="Vous n'avez pas encore ajouté de structures à cette liste !" %}
                 {% endif %}
                 {% for siae in favorite_list.siaes.all %}
-                    {% include "siaes/_card_search_result.html" with siae=siae from_profile="true" %}
+                    <div class="fr-grid-row fr-grid-row--gutters">
+                        <div class="fr-col-12">
+                            {% include "siaes/_card_search_result.html" with siae=siae from_profile="true" %}
+                        </div>
+                    </div>
                 {% endfor %}
             </div>
             <div class="fr-col-12 fr-col-lg-3">