From 33c3e21e32934ac916fc56187c6bb0ddf2ec753b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Reuiller?= <sebastien@reuiller.email>
Date: Wed, 5 Feb 2025 15:05:54 +0100
Subject: [PATCH] use Alpine component to fix modals on every browsers

---
 lemarche/static/js/siae_user_modals.js        | 81 +++++++------------
 lemarche/templates/dashboard/siae_users.html  | 37 +++++----
 .../siaes/_siae_user_delete_modal.html        | 28 ++++---
 .../_siae_user_request_cancel_modal.html      | 31 +++----
 .../_siae_user_request_confirm_modal.html     | 31 +++----
 5 files changed, 102 insertions(+), 106 deletions(-)

diff --git a/lemarche/static/js/siae_user_modals.js b/lemarche/static/js/siae_user_modals.js
index 637e386ae..39f5b057d 100644
--- a/lemarche/static/js/siae_user_modals.js
+++ b/lemarche/static/js/siae_user_modals.js
@@ -1,52 +1,33 @@
-document.addEventListener("DOMContentLoaded", function() {
-    document.getElementById('siae_user_request_confirm_modal').addEventListener('dsfr.disclose', (event) => {
-        // Button that triggered the modal
-        var button = event.explicitOriginalTarget;
-        var siaeSlug = button.dataset["siaeSlug"];
-        var initiatorFullName = button.dataset["initiatorFullName"];
-        var siaeUserRequestId = button.dataset["siaeUserRequestId"];
+document.addEventListener('alpine:init', function () {
+    Alpine.data('siaeUserModals', () => ({
+        siaeSlug: null,
+        id: null,
+        fullName: null,
 
-        // Update the modal's content
-        // - siae user full name
-        // - edit the form action url
-        var modal = document.querySelector('#siae_user_request_confirm_modal');
-        modal.querySelector('#initiator-full-name-to-replace').textContent = initiatorFullName;
-        var modalForm = modal.querySelector('form');
-        var formActionUrl = modalForm.getAttribute('action');
-        modalForm.setAttribute('action', formActionUrl.replace('siae-slug-to-replace', siaeSlug).replace('siae-user-request-id-to-replace', siaeUserRequestId));
-    });
-
-    document.getElementById('siae_user_request_cancel_modal').addEventListener('dsfr.disclose', (event) => {
-        // Button that triggered the modal
-        var button = event.explicitOriginalTarget;
-        var siaeSlug = button.dataset["siaeSlug"];
-        var initiatorFullName = button.dataset["initiatorFullName"];
-        var siaeUserRequestId = button.dataset["siaeUserRequestId"];
-
-        // Update the modal's content
-        // - siae user full name
-        // - edit the form action url
-        var modal = document.querySelector('#siae_user_request_cancel_modal');
-        modal.querySelector('#initiator-full-name-to-replace').textContent = initiatorFullName;
-        var modalForm = modal.querySelector('form');
-        var formActionUrl = modalForm.getAttribute('action');
-        modalForm.setAttribute('action', formActionUrl.replace('siae-slug-to-replace', siaeSlug).replace('siae-user-request-id-to-replace', siaeUserRequestId));
-    });
-
-    document.getElementById('siae_user_delete_modal').addEventListener('dsfr.disclose', (event) => {
-        // Button that triggered the modal
-        var button = event.explicitOriginalTarget;
-        var siaeSlug = button.dataset["siaeSlug"];
-        var userFullName = button.dataset["userFullName"];
-        var siaeUserId = button.dataset["siaeUserId"];
-
-        // Update the modal's content
-        // - siae user full name
-        // - edit the form action url
-        var modal = document.querySelector('#siae_user_delete_modal');
-        modal.querySelector('#user-full-name-to-replace').textContent = userFullName;
-        var modalForm = modal.querySelector('form');
-        var formActionUrl = modalForm.getAttribute('action');
-        modalForm.setAttribute('action', formActionUrl.replace('siae-slug-to-replace', siaeSlug).replace('siae-user-id-to-replace', siaeUserId));
-    });
+        initOptions(siaeSlug, fullName, id) {
+            this.siaeSlug = siaeSlug;
+            this.fullName = fullName;
+            this.id = id;
+        },
+        openModal(modalID, replaceIdSelector) {
+            // Update the modal's content
+            // - edit the form action url
+            // - open the modal
+            let modal = document.querySelector(`#${modalID}`);
+            let modalForm = modal.querySelector('form');
+            let formActionUrl = modalForm.getAttribute('data-action');
+            modal.querySelector('#full-name-to-replace').textContent = this.fullName;
+            modalForm.setAttribute('action', formActionUrl.replace('siae-slug-to-replace', this.siaeSlug).replace(replaceIdSelector, this.id));
+            dsfr(modal).modal.disclose();
+        },
+        confirmUserRequest() {
+            this.openModal('siae_user_request_confirm_modal', 'siae-user-request-id-to-replace');
+        },
+        cancelUserRequest() {
+            this.openModal('siae_user_request_cancel_modal', 'siae-user-request-id-to-replace');
+        },
+        deleteUser() {
+            this.openModal('siae_user_delete_modal', 'siae-user-id-to-replace');
+        }
+    }));
 });
diff --git a/lemarche/templates/dashboard/siae_users.html b/lemarche/templates/dashboard/siae_users.html
index 24f512898..75408a314 100644
--- a/lemarche/templates/dashboard/siae_users.html
+++ b/lemarche/templates/dashboard/siae_users.html
@@ -25,6 +25,16 @@ <h1>Mes collaborateurs</h1>
             </div>
             <div class="fr-grid-row fr-grid-row--gutters">
                 <div class="fr-col-12 fr-col-lg-8">
+                    <!-- Hidden buttons needed to load modals mecanics -->
+                    <button data-fr-opened="false"
+                            aria-controls="siae_user_request_confirm_modal"
+                            class="fr-hidden"></button>
+                    <button data-fr-opened="false"
+                            aria-controls="siae_user_request_cancel_modal"
+                            class="fr-hidden"></button>
+                    <button data-fr-opened="false"
+                            aria-controls="siae_user_delete_modal"
+                            class="fr-hidden"></button>
                     {% if siae.siaeuserrequest_set.pending.count %}
                         <div class="fr-grid-row fr-mb-1w">
                             <div class="fr-col">
@@ -56,22 +66,18 @@ <h3 class="fr-card__title fr-icon-user-fill">{{ siaeuserrequest.initiator.full_n
                                                 <ul class="fr-btns-group--right fr-btns-group fr-btns-group--inline fr-btns-group--inline-reverse">
                                                     <li>
                                                         <button class="fr-btn fr-icon-checkbox-circle-line"
-                                                                data-fr-opened="false"
-                                                                aria-controls="siae_user_request_confirm_modal"
-                                                                data-siae-slug="{{ siae.slug }}"
-                                                                data-initiator-full-name="{{ siaeuserrequest.initiator.full_name }}"
-                                                                data-siae-user-request-id="{{ siaeuserrequest.id }}"
+                                                                x-data="siaeUserModals"
+                                                                x-init="initOptions('{{ siae.slug }}', '{{ siaeuserrequest.initiator.full_name|escapejs }}', {{ siaeuserrequest.id }})"
+                                                                @click="confirmUserRequest"
                                                                 title="Confirmer la demande">
                                                             Confirmer la demande
                                                         </button>
                                                     </li>
                                                     <li>
                                                         <button class="fr-btn fr-btn--secondary fr-icon-close-circle-line"
-                                                                data-fr-opened="false"
-                                                                aria-controls="siae_user_request_cancel_modal"
-                                                                data-siae-slug="{{ siae.slug }}"
-                                                                data-initiator-full-name="{{ siaeuserrequest.initiator.full_name }}"
-                                                                data-siae-user-request-id="{{ siaeuserrequest.id }}"
+                                                                x-data="siaeUserModals"
+                                                                x-init="initOptions('{{ siae.slug }}', '{{ siaeuserrequest.initiator.full_name|escapejs }}', {{ siaeuserrequest.id }})"
+                                                                @click="cancelUserRequest"
                                                                 title="Refuser la demande">Refuser la demande</button>
                                                     </li>
                                                 </ul>
@@ -103,11 +109,9 @@ <h3 class="fr-card__title fr-icon-user-fill">{{ siaeuser.user.full_name }}</h3>
                                                 <ul class="fr-btns-group--right fr-btns-group fr-btns-group--inline">
                                                     <li>
                                                         <button class="fr-btn fr-btn--secondary delete-bin-line"
-                                                                data-fr-opened="false"
-                                                                aria-controls="siae_user_delete_modal"
-                                                                data-siae-slug="{{ siae.slug }}"
-                                                                data-user-full-name="{{ siaeuser.user.full_name }}"
-                                                                data-siae-user-id="{{ siaeuser.id }}"
+                                                                x-data="siaeUserModals"
+                                                                x-init="initOptions('{{ siae.slug }}', '{{ siaeuser.user.full_name|escapejs }}', {{ siaeuser.id }})"
+                                                                @click="deleteUser"
                                                                 title="Supprimer le collaborateur">
                                                             Supprimer le collaborateur
                                                         </button>
@@ -139,5 +143,8 @@ <h3 class="fr-callout__title fr-text--sm">
     {% include "siaes/_siae_user_delete_modal.html" %}
 {% endblock modals %}
 {% block extra_js %}
+    <script type="text/javascript"
+            src="{% static 'vendor/alpinejs@3.11.1.min.js'%}"
+            defer></script>
     <script type="text/javascript" src="{% static 'js/siae_user_modals.js' %}"></script>
 {% endblock extra_js %}
diff --git a/lemarche/templates/siaes/_siae_user_delete_modal.html b/lemarche/templates/siaes/_siae_user_delete_modal.html
index c09e0c400..cf38bec5a 100644
--- a/lemarche/templates/siaes/_siae_user_delete_modal.html
+++ b/lemarche/templates/siaes/_siae_user_delete_modal.html
@@ -1,4 +1,7 @@
-<dialog aria-labelledby="siae_user_delete_modal-title" id="siae_user_delete_modal" class="fr-modal" role="dialog">
+<dialog aria-labelledby="siae_user_delete_modal-title"
+        id="siae_user_delete_modal"
+        class="fr-modal"
+        role="dialog">
     <div class="fr-container fr-container--fluid fr-container-md">
         <div class="fr-grid-row fr-grid-row--center">
             <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
@@ -7,22 +10,21 @@
                         <button class="fr-btn--close fr-btn" aria-controls="siae_user_delete_modal">Fermer</button>
                     </div>
                     <div class="fr-modal__content">
-                        <h3 id="siae_user_delete_modal-title" class="fr-modal__title">
-                            Supprimer le collaborateur
-                        </h3>
-                        <p><strong id="user-full-name-to-replace"></strong> ne sera plus rattaché à cette structure.</p>
+                        <h3 id="siae_user_delete_modal-title" class="fr-modal__title">Supprimer le collaborateur</h3>
+                        <p>
+                            <strong id="full-name-to-replace"></strong> ne sera plus rattaché à cette structure.
+                        </p>
                     </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_siaes:siae_user_delete' 'siae-slug-to-replace' 'siae-user-id-to-replace' %}">
-                                {% csrf_token %} 
-                                <button class="fr-btn fr-btn--icon-left" type="submit">
-                                    Confirmer
-                                </button>
+                            <form method="post"
+                                  data-action="{% url 'dashboard_siaes:siae_user_delete' 'siae-slug-to-replace' 'siae-user-id-to-replace' %}">
+                                {% csrf_token %}
+                                <button class="fr-btn fr-btn--icon-left" type="submit">Confirmer</button>
                             </form>
-                            <button class="fr-btn fr-btn--icon-left fr-btn--secondary" aria-controls="siae_user_request_confirm_modal" aria-label="Fermer">
-                                Annuler
-                            </button>
+                            <button class="fr-btn fr-btn--icon-left fr-btn--secondary"
+                                    aria-controls="siae_user_delete_modal"
+                                    aria-label="Fermer">Annuler</button>
                         </div>
                     </div>
                 </div>
diff --git a/lemarche/templates/siaes/_siae_user_request_cancel_modal.html b/lemarche/templates/siaes/_siae_user_request_cancel_modal.html
index cb56a4ce0..a85ae8ea3 100644
--- a/lemarche/templates/siaes/_siae_user_request_cancel_modal.html
+++ b/lemarche/templates/siaes/_siae_user_request_cancel_modal.html
@@ -1,28 +1,31 @@
-<dialog aria-labelledby="siae_user_request_cancel_modal-title" id="siae_user_request_cancel_modal" class="fr-modal" role="dialog">
+<dialog aria-labelledby="siae_user_request_cancel_modal-title"
+        id="siae_user_request_cancel_modal"
+        class="fr-modal"
+        role="dialog">
     <div class="fr-container fr-container--fluid fr-container-md">
         <div class="fr-grid-row fr-grid-row--center">
             <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
                 <div class="fr-modal__body">
                     <div class="fr-modal__header">
-                        <button class="fr-btn--close fr-btn" aria-controls="siae_user_request_cancel_modal">Fermer</button>
+                        <button class="fr-btn--close fr-btn"
+                                aria-controls="siae_user_request_cancel_modal">Fermer</button>
                     </div>
                     <div class="fr-modal__content">
-                        <h3 id="siae_user_request_cancel_modal-title" class="fr-modal__title">
-                            Refuser la demande
-                        </h3>
-                        <p>Souhaitez vous refuser <span id="initiator-full-name-to-replace"></span> comme collaborateur sur votre structure ?</p>
+                        <h3 id="siae_user_request_cancel_modal-title" class="fr-modal__title">Refuser la demande</h3>
+                        <p>
+                            Souhaitez vous refuser <span id="full-name-to-replace"></span> comme collaborateur sur votre structure ?
+                        </p>
                     </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_siaes:siae_user_request_cancel' 'siae-slug-to-replace' 'siae-user-request-id-to-replace' %}">
-                                {% csrf_token %} 
-                                <button class="fr-btn fr-btn--icon-left" type="submit">
-                                    Confirmer
-                                </button>
+                            <form method="post"
+                                  data-action="{% url 'dashboard_siaes:siae_user_request_cancel' 'siae-slug-to-replace' 'siae-user-request-id-to-replace' %}">
+                                {% csrf_token %}
+                                <button class="fr-btn fr-btn--icon-left" type="submit">Confirmer</button>
                             </form>
-                            <button class="fr-btn fr-btn--icon-left fr-btn--secondary" aria-controls="siae_user_request_cancel_modal" aria-label="Fermer">
-                                Annuler
-                            </button>
+                            <button class="fr-btn fr-btn--icon-left fr-btn--secondary"
+                                    aria-controls="siae_user_request_cancel_modal"
+                                    aria-label="Fermer">Annuler</button>
                         </div>
                     </div>
                 </div>
diff --git a/lemarche/templates/siaes/_siae_user_request_confirm_modal.html b/lemarche/templates/siaes/_siae_user_request_confirm_modal.html
index 4e64e5b5f..11605a0dd 100644
--- a/lemarche/templates/siaes/_siae_user_request_confirm_modal.html
+++ b/lemarche/templates/siaes/_siae_user_request_confirm_modal.html
@@ -1,28 +1,31 @@
-<dialog aria-labelledby="siae_user_request_confirm_modal-title" id="siae_user_request_confirm_modal" class="fr-modal" role="dialog">
+<dialog aria-labelledby="siae_user_request_confirm_modal-title"
+        id="siae_user_request_confirm_modal"
+        class="fr-modal"
+        role="dialog">
     <div class="fr-container fr-container--fluid fr-container-md">
         <div class="fr-grid-row fr-grid-row--center">
             <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
                 <div class="fr-modal__body">
                     <div class="fr-modal__header">
-                        <button class="fr-btn--close fr-btn" aria-controls="siae_user_request_confirm_modal">Fermer</button>
+                        <button class="fr-btn--close fr-btn"
+                                aria-controls="siae_user_request_confirm_modal">Fermer</button>
                     </div>
                     <div class="fr-modal__content">
-                        <h3 id="siae_user_request_confirm_modal-title" class="fr-modal__title">
-                            Accepter la demande
-                        </h3>
-                        <p><span id="initiator-full-name-to-replace"></span> pourra accéder à votre structure et modifier le contenu de sa fiche commerciale.</p>
+                        <h3 id="siae_user_request_confirm_modal-title" class="fr-modal__title">Accepter la demande</h3>
+                        <p>
+                            <span id="full-name-to-replace"></span> pourra accéder à votre structure et modifier le contenu de sa fiche commerciale.
+                        </p>
                     </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_siaes:siae_user_request_confirm' 'siae-slug-to-replace' 'siae-user-request-id-to-replace' %}">
-                                {% csrf_token %} 
-                                <button class="fr-btn fr-btn--icon-left" type="submit">
-                                    Confirmer
-                                </button>
+                            <form method="post"
+                                  data-action="{% url 'dashboard_siaes:siae_user_request_confirm' 'siae-slug-to-replace' 'siae-user-request-id-to-replace' %}">
+                                {% csrf_token %}
+                                <button class="fr-btn fr-btn--icon-left" type="submit">Confirmer</button>
                             </form>
-                            <button class="fr-btn fr-btn--icon-left fr-btn--secondary" aria-controls="siae_user_request_confirm_modal" aria-label="Fermer">
-                                Annuler
-                            </button>
+                            <button class="fr-btn fr-btn--icon-left fr-btn--secondary"
+                                    aria-controls="siae_user_request_confirm_modal"
+                                    aria-label="Fermer">Annuler</button>
                         </div>
                     </div>
                 </div>