Merge pull request #1191 from ae-utbm/notifications

Add macro to refresh messages from htmx swap

core/static/bundled/alpine-index.js

@@ -1,9 +1,9 @@
-import { alpinePlugin } from "#core:utils/notifications";
+import { alpinePlugin as notificationPlugin } from "#core:utils/notifications";
 import sort from "@alpinejs/sort";
 import Alpine from "alpinejs";
 
 Alpine.plugin(sort);
-Alpine.magic("notifications", alpinePlugin);
+Alpine.magic("notifications", notificationPlugin);
 window.Alpine = Alpine;
 
 window.addEventListener("DOMContentLoaded", () => {

core/templates/core/base/notifications.jinja

@@ -13,10 +13,10 @@
              }"
      @quick-notification-add="(e) => messages.push(e?.detail)"
      @quick-notification-delete="messages = []">
-  <template x-for="message in messages">
-    <div x-data="{show: true}" class="alert" :class="`alert-${message.tag}`" x-show="show" x-transition>
+  <template x-for="(message, index) in messages">
+    <div class="alert" :class="`alert-${message.tag}`" x-transition>
       <span class="alert-main" x-text="message.text"></span>
-      <span class="clickable" @click="show = false">
+      <span class="clickable" @click="messages = messages.filter((item, i) => i !== index)">
         <i class="fa fa-close"></i>
       </span>
     </div>

core/templates/core/macros.jinja

@@ -245,3 +245,26 @@
   <button type="button" onclick="checkbox_{{form_id}}(true);">{% trans %}Select All{% endtrans %}</button>
   <button type="button" onclick="checkbox_{{form_id}}(false);">{% trans %}Unselect All{% endtrans %}</button>
 {% endmacro %}
+
+{% macro update_notifications(messages, clear) %}
+  {# Update notification area from new messages sent by django backend
+     This is useful when performing fragment swaps to keep messages up to date
+     Without this, the fragment would need to take control of the notification area and
+     this would be an issue when having more than one fragment
+
+     Parameters:
+      messages: messages from django.contrib
+      clear   : optional boolean that controls if notifications should be cleared first. True is the default
+  #}
+  {% set clear = clear|default(true) %}
+  {% if messages %}
+    <div x-init="() => {
+                 {% if clear %}
+                   $notifications.clear()
+                 {% endif %}
+                 {% for message in messages %}
+                   $notifications.{{ message.tags }}('{{ message }}')
+                 {% endfor %}
+                 }"></div>
+  {% endif %}
+{% endmacro %}