🚸(dashboard) refactor the consent manage page HTML

Refactored the consent manage page with the `dsfr`. Added app.css stylesheet.
MTES-MCT · Dec 6, 2024 · b2ee2c7 · b2ee2c7
1 parent b5cce85
commit b2ee2c7
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 37 deletions.
diff --git a/src/dashboard/apps/consent/static/consent/css/app.css b/src/dashboard/apps/consent/static/consent/css/app.css
@@ -0,0 +1,8 @@
+.consent-wrapper {
+  position: relative;
+  border: 1px solid grey;
+}
+
+.consent-wrapper__inner {
+  padding: 0 1.5rem;
+}
diff --git a/src/dashboard/apps/consent/templates/consent/base.html b/src/dashboard/apps/consent/templates/consent/base.html
@@ -1,4 +1,10 @@
 {% extends "base.html" %}
 
+{% load static %}
+
+{% block dashboard_extra_css %}
+  <link rel="stylesheet" href="{% static "consent/css/app.css" %}">
+{% endblock dashboard_extra_css %}
+
 {% block dashboard_content %}
 {% endblock dashboard_content %}
diff --git a/src/dashboard/apps/consent/templates/consent/manage.html b/src/dashboard/apps/consent/templates/consent/manage.html
@@ -5,62 +5,63 @@
 {% block dashboard_content %}
 <h2>{% trans "Manage consents" %}</h2>
 
+
+
 {% if entities %}
   <form action="" method="post">
     {% csrf_token %}
-    <fieldset class="fr-fieldset" id="checkboxes" aria-labelledby="checkboxes-legend checkboxes-messages">
-
-      <legend class="fr-fieldset__legend--regular fr-fieldset__legend"
-              id="checkboxes-legend"> {% trans "Legend for all elements" %}
-      </legend>
-
+
       {# toggle button #}
       <div class="fr-fieldset__element">
         <div class="fr-checkbox-group">
           <input type="checkbox" id="toggle-all" name="toggle-all" 
                  aria-describedby="toggle-all-messages" 
                  data-fr-js-checkbox-input="true" 
                  data-fr-js-checkbox-actionee="true">
-          <label class="fr-label" for="toggle-all">{% trans "Toggle All" %}</label>
+          <label class="fr-label" for="toggle-all"><strong>{% trans "Toggle All" %}</strong></label>
         </div>
       </div>
-
-      {% for entity in entities %}
-        <strong>{{ entity.name }}</strong>
-
-        {% for consent in entity.get_consents %}
-        <div class="fr-fieldset__element">
-          <div class="fr-checkbox-group">
-            <input type="checkbox"
-                   name="status"
-                   value="{{ consent.id }}"
-                   id="{{ consent.id }}"
-                  {% if consent.status == "VALIDATED" %} checked{% endif %}
-                  aria-describedby="{{ consent.id }}-messages"
-                  data-fr-js-checkbox-input="true"
-                  data-fr-js-checkbox-actionee="true"
-            >
-            <label class="fr-label" for="{{ consent.id }}">{{ consent.delivery_point.provider_assigned_id }} </label>
-            <div class="fr-messages-group" id="{{ consent.id }}-messages" aria-live="assertive"></div>
-          </div>
-        </div>
-        {% endfor %}
-      {% endfor %}
 
-      <div class="fr-messages-group" id="checkboxes-messages" aria-live="assertive">
-        {{ field.errors }}
-      </div>
-    </fieldset>
+      <div class="consent-wrapper fr-py-6v fr-mb-6v">
+        <div class="consent-wrapper__inner">
+          {% for entity in entities %}
+          <fieldset class="fr-fieldset" id="checkboxes" aria-labelledby="checkboxes-legend checkboxes-messages">
+
+            <legend class="fr-fieldset__legend--regular fr-fieldset__legend"
+                    id="checkboxes-legend">{{ entity.name }}</legend>
 
-    <button class="fr-btn" type="submit" name="submit"> {% trans "submit" %} </button>
+            {% for consent in entity.get_consents %}
+            <div class="fr-fieldset__element">
+              <div class="fr-checkbox-group">
+                <input type="checkbox"
+                       name="status"
+                       value="{{ consent.id }}"
+                       id="{{ consent.id }}"
+                      {% if consent.status == "VALIDATED" %} checked{% endif %}
+                      aria-describedby="{{ consent.id }}-messages"
+                      data-fr-js-checkbox-input="true"
+                      data-fr-js-checkbox-actionee="true"
+                >
+                <label class="fr-label" for="{{ consent.id }}">{{ consent.delivery_point.provider_assigned_id }} </label>
+                <div class="fr-messages-group" id="{{ consent.id }}-messages" aria-live="assertive"></div>
+              </div>
+            </div>
+            {% endfor %}
+
+            <div class="fr-messages-group" id="checkboxes-messages" aria-live="assertive">{{ field.errors }}</div>
+          </fieldset>
+          {% endfor %}
+        </div>
+      </div>
+      <button class="fr-btn" type="submit" name="submit"> {% trans "submit" %} </button>
   </form>
 
   {% else %}
     <p>{% trans "No consents to validate" %}</p>
   {% endif %}
 {% endblock dashboard_content %}
 
-{% block extra_dashboard_js %}  
+{% block dashboard_extra_js %}  
   <script src="{% static 'consent/js/app.js' %}">
   </script>  
-{% endblock extra_dashboard_js %}
+{% endblock dashboard_extra_js %}
diff --git a/src/dashboard/templates/base.html b/src/dashboard/templates/base.html
@@ -1,6 +1,10 @@
 {% extends "dsfr/base.html" %}
 {% load static i18n %}
 
+{% block extra_css %}
+  {% block dashboard_extra_css %}{% endblock dashboard_extra_css %}
+{% endblock extra_css %}
+
 {% block header %}
   {% include "blocks/header.html" %}
 {% endblock header %}
@@ -24,7 +28,7 @@
 {% block extra_js %}
   <script src="{% static 'dashboard/js/common.js' %}">
   </script>
-  {% block extra_dashboard_js %}{% endblock extra_dashboard_js %}
+  {% block dashboard_extra_js %}{% endblock dashboard_extra_js %}
 {% endblock extra_js %}
 
 {# djlint:off #}