From 55ee22a2f7588164d8650c8c2049a0ac3414299c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Reuiller?= <sebastien@reuiller.email>
Date: Wed, 2 Oct 2024 15:39:21 +0200
Subject: [PATCH] adapt siae activities list and delete modal to dsfr

---
 lemarche/static/js/siae_activity_delete.js    | 45 ++++++-----
 .../_siae_activity_delete_modal.html          | 59 +++++++++-----
 .../dashboard/siae_edit_activities.html       | 19 ++---
 .../templates/siaes/_siae_activity_card.html  | 81 ++++++++++---------
 4 files changed, 117 insertions(+), 87 deletions(-)

diff --git a/lemarche/static/js/siae_activity_delete.js b/lemarche/static/js/siae_activity_delete.js
index 11821fbfc..118e730db 100644
--- a/lemarche/static/js/siae_activity_delete.js
+++ b/lemarche/static/js/siae_activity_delete.js
@@ -1,23 +1,30 @@
-document.addEventListener("DOMContentLoaded", function() {
-    $('#siae_activity_delete_modal').on('show.bs.modal', function (event) {
-        // Button that triggered the modal
-        var button = $(event.relatedTarget);
+document.addEventListener('alpine:init', function () {
+    Alpine.data('activityItem', () => ({
+        siaeSlug: null,
+        siaeActivityId: null,
+        siaeActivityNameDisplay: null,
 
-        // Extract info from data-* attributes
-        var siaeId = button.data('siae-id');
-        var siaeSlug = button.data('siae-slug');
-        var siaeActivityId = button.data('siae-activity-id');
-        var siaeActivityNameDisplay = button.data('siae-activity-name-display');
+        initOptions(siaeSlug, siaeActivityId, siaeActivityNameDisplay) {
+            this.siaeSlug = siaeSlug;
+            this.siaeActivityId = siaeActivityId;
+            this.siaeActivityNameDisplay = siaeActivityNameDisplay;
+        },
+        remove() {
+            // Update the modal's content
+            // - siae activity name display
+            // - edit the form action url
+            // - open the modal
+            let modalID = 'siae_activity_delete_modal';
+            let modal = document.querySelector(`#${modalID}`);
+            let modalForm = modal.querySelector('form');
+            if (modal.querySelector('#siae-activity-name-display')) {
+                modal.querySelector('#siae-activity-name-display').textContent = this.siaeActivityNameDisplay;
+            }
+            let formActionUrl = modalForm.getAttribute('data-action');
+            modalForm.setAttribute('action', formActionUrl.replace('siae-slug-to-replace', this.siaeSlug).replace('siae-activity-id-to-replace', this.siaeActivityId));
 
-        // Update the modal's content
-        // - siae name display
-        // - edit the form action url
-        var modal = document.querySelector('#siae_activity_delete_modal');
-        var modalForm = modal.querySelector('form');
-        if (modal.querySelector('#siae-activity-name-display')) {
-            modal.querySelector('#siae-activity-name-display').textContent = siaeActivityNameDisplay;
+            const modalDialog = document.getElementById(modalID);
+            dsfr(modalDialog).modal.disclose();
         }
-        var formActionUrl = modalForm.getAttribute('action');
-        modalForm.setAttribute('action', formActionUrl.replace('siae-slug-to-replace', siaeSlug).replace('siae-activity-id-to-replace', siaeActivityId));
-    });
+    }));
 });
diff --git a/lemarche/templates/dashboard/_siae_activity_delete_modal.html b/lemarche/templates/dashboard/_siae_activity_delete_modal.html
index a6621ff61..301df3e10 100644
--- a/lemarche/templates/dashboard/_siae_activity_delete_modal.html
+++ b/lemarche/templates/dashboard/_siae_activity_delete_modal.html
@@ -1,23 +1,42 @@
-<div class="modal fade modal-siae" id="siae_activity_delete_modal" tabindex="-1" role="dialog" aria-modal="true" data-backdrop="static" data-keyboard="false" aria-labelledby="modalTitle">
-    <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h3 class="modal-title" id="modalTitle">Supprimer</h3>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
-                    <i class="ri-close-line"></i>
-                </button>
-            </div>
-            <form method="POST" action="{% url 'dashboard_siaes:siae_edit_activities_delete' siae.slug|default:'siae-slug-to-replace' activity.id|default:'siae-activity-id-to-replace' %}">
-                {% csrf_token %}
-                <div class="modal-body home-content-body">
-                    <p class="font-weight-bold">Voulez-vous supprimer cette activité ?</p>
-                    <i><span id="siae-activity-name-display"></span></i>
-                </div>
-                <div class="modal-footer">
-                    <button class="btn btn-sm btn-outline-primary" type="button" data-dismiss="modal" aria-label="Fermer">Annuler</button>
-                    <button class="btn btn-sm btn-primary" type="submit">Confirmer</button>
+<dialog class="fr-modal"
+        id="siae_activity_delete_modal"
+        role="dialog"
+        aria-modal="true"
+        data-backdrop="static"
+        data-keyboard="false"
+        aria-labelledby="siae_activity_delete_modal_title">
+    <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_activity_delete_modal">Fermer</button>
+                    </div>
+                    <div class="fr-modal__content">
+                        <h3 id="siae_activity_delete_modal_title" class="fr-modal__title">Supprimer</h3>
+                        <p>
+                            Voulez-vous supprimer l'activité <strong><span id="siae-activity-name-display"></span></strong> ?
+                        </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"
+                                  data-action="{% url 'dashboard_siaes:siae_edit_activities_delete' siae.slug|default:'siae-slug-to-replace' activity.id|default:'siae-activity-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_activity_delete_modal"
+                                    aria-label="Fermer">Annuler</button>
+                        </div>
+                    </div>
                 </div>
-            </form>
+            </div>
         </div>
     </div>
-</div>
+</dialog>
+<!-- button needed for modal to be triggered -->
+<button data-fr-opened="false"
+        aria-controls="siae_activity_delete_modal"
+        class="fr-hidden"></button>
diff --git a/lemarche/templates/dashboard/siae_edit_activities.html b/lemarche/templates/dashboard/siae_edit_activities.html
index 3588afe68..baf991fea 100644
--- a/lemarche/templates/dashboard/siae_edit_activities.html
+++ b/lemarche/templates/dashboard/siae_edit_activities.html
@@ -1,30 +1,31 @@
 {% extends "dashboard/siae_edit_base.html" %}
-{% load static bootstrap4 %}
+{% load static %}
 {% block content_siae_form %}
-    <div class="fr-grid-row mb-3">
+    <div class="fr-grid-row fr-grid-row--gutters fr-mb-4v">
         <div class="fr-col-lg-8">
             <h3>Ajoutez vos secteurs d'activité et recevez des opportunités commerciales ciblées</h3>
         </div>
         <div class="fr-col-lg-4">
             <a href="{% url 'dashboard_siaes:siae_edit_activities_create' siae.slug %}"
                id="siae-activities-create-btn"
-               class="btn btn-primary w-100 btn-ico mt-2">
-                <i class="ri-add-fill ri-lg mr-2"></i>Ajouter un secteur d'activité
-            </a>
+               class="fr-btn fr-fi-add-circle-line fr-btn--icon-right fr-mt-1w">Ajouter un secteur d'activité</a>
         </div>
     </div>
     {% if siae.activities.count %}
-        <div class="fr-grid-row mb-3 mb-lg-5">
+        <div class="fr-grid-row fr-grid-row--gutters fr-mb-4v">
             {% for activity in siae.activities.all %}
                 <div class="fr-col-12 fr-col-lg-8">{% include "siaes/_siae_activity_card.html" with activity=activity %}</div>
             {% endfor %}
         </div>
     {% endif %}
-{% endblock %}
+{% endblock content_siae_form %}
 {% block modals %}
     {% include "dashboard/_siae_activity_delete_modal.html" %}
-{% endblock %}
+{% 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_activity_delete.js' %}"></script>
-{% endblock %}
+{% endblock extra_js %}
diff --git a/lemarche/templates/siaes/_siae_activity_card.html b/lemarche/templates/siaes/_siae_activity_card.html
index 1553cd7b1..e5ea1776d 100644
--- a/lemarche/templates/siaes/_siae_activity_card.html
+++ b/lemarche/templates/siaes/_siae_activity_card.html
@@ -1,43 +1,46 @@
 {% load static siae_sectors_display %}
-<div class="bg-white d-block rounded-lg shadow-lg fr-p-3 mb-3">
-    <div class="fr-grid-row">
-        <div class="fr-col-12 fr-col-lg-8">
-            <p class="h4 lh-sm">{{ activity.sector_group }}</p>
-            <ul>
-                {% siae_sectors_display activity display_max=6 output_format='li' %}
-            </ul>
-            <p class="mb-0">
-                <i class="ri-briefcase-4-line mr-1"></i>
-                <span class="sr-only">Type(s) de prestation :</span>
-                <span>{{ activity.presta_type_display }}</span>
-            </p>
-            <p class="mb-0">
-                <i class="ri-map-2-line"></i>
-                <span class="sr-only">Intervient sur : {{ siae.geo_range_pretty_title }}</span>
-                <span>{{ siae.geo_range_pretty_display }}</span>
-            </p>
-        </div>
-        {% if not hide_actions %}
-            <div class="fr-col-12 fr-col-lg-4 text-right">
-                <a href="{% url 'dashboard_siaes:siae_edit_activities_edit' activity.siae.slug activity.id %}"
-                   id="siae-activity-edit-btn"
-                   class="btn"
-                   title="Modifier l'activité">
-                    <i class="ri-pencil-fill ri-xl"></i>
-                </a>
-                <a href="#"
-                   id="siae-activity-delete-modal-btn"
-                   class="btn"
-                   data-toggle="modal"
-                   data-target="#siae_activity_delete_modal"
-                   data-siae-id="{{ activity.siae.id }}"
-                   data-siae-slug="{{ activity.siae.slug }}"
-                   data-siae-activity-id="{{ activity.id }}"
-                   data-siae-activity-name-display="{{ activity.sector_group }}"
-                   title="Supprimer l'activité">
-                    <i class="ri-delete-bin-line ri-xl"></i>
-                </a>
+<div class="fr-card fr-card--horizontal">
+    <div class="fr-card__body">
+        <div class="fr-card__content">
+            <div class="fr-grid-row">
+                <div class="fr-col-12 fr-col-lg-10">
+                    <h4>{{ activity.sector_group }}</h4>
+                    <ul class="fr-my-4v">
+                        {% siae_sectors_display activity display_max=6 output_format='li' %}
+                    </ul>
+                    <p>
+                        <span class="fr-icon-briefcase-line" aria-hidden="true"></span>
+                        <span class="fr-sr-only ">Type(s) de prestation :</span>
+                        <span>{{ activity.presta_type_display }}</span>
+                    </p>
+                    <p>
+                        <span class="fr-icon-map-pin-2-line" aria-hidden="true"></span>
+                        <span class="fr-sr-only">Intervient sur :</span>{{ activity.geo_range_pretty_title }}
+                        <span class="fr-icon-road-map-line fr-ml-2w" aria-hidden="true"></span>
+                        <span>{{ activity.geo_range_pretty_display }}</span>
+                    </p>
+                </div>
+                <div class="fr-col-12 fr-col-lg-2">
+                    <ul class="fr-btns-group fr-btns-group--inline-sm lemarche--align-right">
+                        <li>
+                            <a href="{% url 'dashboard_siaes:siae_edit_activities_edit' activity.siae.slug activity.id %}"
+                               id="siae-activity-edit-btn"
+                               class="fr-btn fr-btn--sm fr-btn--tertiary-no-outline fr-icon-pencil-fill"
+                               title="Modifier l'activité">Modifier l'activité</a>
+                        </li>
+                        <li>
+                            <button id="siae-activity-delete-modal-btn"
+                                    class="fr-btn fr-btn--sm fr-btn--tertiary-no-outline fr-icon-delete-line"
+                                    x-data="activityItem"
+                                    x-init="initOptions('{{ activity.siae.slug }}','{{ activity.id }}','{{ activity.sector_group|escapejs }}')"
+                                    @click="remove"
+                                    title="Supprimer l'activité">
+                                <i class="ri-delete-bin-line ri-xl"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
             </div>
-        {% endif %}
+        </div>
     </div>
 </div>