Déplace et améliore la gestions des messages

Déplace le templating des messages Django d'un template d'une vue au template générique de base afin de pouvoir profiter du système de messages dans l'ensemble des vues. Ajoute la gestions des différents styles (info, error, etc) via les tags.
betagouv · Jun 26, 2024 · cdce6f5 · cdce6f5
1 parent a8bea34
commit cdce6f5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/sv/static/sv/base.css b/sv/static/sv/base.css
@@ -6,6 +6,9 @@ header{
     justify-content: space-between;
     border-bottom: 2px solid #000091;
 }
+.alert-container{
+    margin: 2rem 1.5rem;
+}
 #en-tete{
     display: flex;
     align-items: center;

diff --git a/sv/templates/sv/base.html b/sv/templates/sv/base.html
@@ -59,6 +59,19 @@
                 </nav>
             </header>
 
+            {% if messages %}
+                <div class="alert-container">
+                    {% for message in messages %}
+                        <div class="fr-alert fr-alert--{{ message.tags }}">
+                            <h3 class="fr-alert__title">{{message}}</h3>
+                            <button class="fr-btn--close fr-btn" title="Masquer le message" onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)">
+                                Masquer le message
+                            </button>
+                        </div>
+                    {% endfor %}
+                </div>
+            {% endif %}
+
             {% block content %}{% endblock %}
 
             <script type="module" src="{% static 'dsfr.module.min.js' %}"></script>

diff --git a/sv/templates/sv/fichedetection_detail.html b/sv/templates/sv/fichedetection_detail.html
@@ -17,17 +17,6 @@
     <main>
         <div class="fiche-header">
             <div>
-                {% if messages %}
-                    {% for message in messages %}
-                        <div class="fiche-header__message fr-alert fr-alert--success">
-                            <h3 class="fr-alert__title">{{message}}</h3>
-                            <button class="fr-btn--close fr-btn" title="Masquer le message" onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)">
-                                Masquer le message
-                            </button>
-                        </div>
-                    {% endfor %}
-                {% endif %}
-
                 <h1 class="fiche-header__title">Fiche détection n° {{ fichedetection.numero }}</h1>
                 <p class="fr-badge fr-badge--{{fichedetection.etat.libelle|etat_fiche_detection_color}} fr-badge--no-icon">{{ fichedetection.etat }}</p>
             </div>