Merge pull request #1391 from ae-utbm/notifications-magic

improve `$notifications`

core/templates/core/base.jinja

@@ -37,7 +37,7 @@
       <script src="{{ url('javascript-catalog') }}"></script>
       <script type="module" src="{{ static("bundled/core/navbar-index.ts") }}"></script>
       <script type="module" src="{{ static("bundled/core/components/include-index.ts") }}"></script>
-      <script type="module" src="{{ static('bundled/alpine-index.js') }}"></script>
+      <script type="module" src="{{ static('bundled/alpine-index.ts') }}"></script>
       <script type="module" src="{{ static('bundled/htmx-index.js') }}"></script>
       <script type="module" src="{{ static('bundled/country-flags-index.ts') }}"></script>
       <script type="module" src="{{ static('bundled/core/tooltips-index.ts') }}"></script>

core/templates/core/base/notifications.jinja

@@ -1,16 +1,13 @@
 <div id="quick-notifications"
-     x-data='{
-             messages: [
+     x-init='$notifications.addMany([
              {%- for message in messages -%}
                {%- if not message.extra_tags -%}
-                 { tag: {{ message.tags|string|tojson }}, text: {{ message|string|tojson }} },
+                 { tag: "{{ message.tags }}", text: {{ message|string|tojson }} },
                {%- endif -%}
              {%- endfor -%}
-             ]
-             }'
-     @quick-notification-add="(e) => messages.push(e?.detail)"
-     @quick-notification-delete="messages = []">
-  <template x-for="(message, index) in messages">
+             ])'
+>
+  <template x-for="(message, index) in $notifications.getAll()">
     <div class="alert" :class="`alert-${message.tag}`" x-transition>
       <span class="alert-main" x-text="message.text"></span>
       <span class="clickable" @click="messages = messages.filter((item, i) => i !== index)">

core/templates/core/macros.jinja

@@ -226,7 +226,7 @@
   <button type="button" onclick="checkbox_{{form_id}}(false);">{% trans %}Unselect All{% endtrans %}</button>
 {% endmacro %}
 
-{% macro update_notifications(messages, clear) %}
+{% macro update_notifications(messages, clear = True) %}
   {# 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
@@ -236,16 +236,19 @@
       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>
+    <div x-init='() => {
+                 {%- if clear -%}
+                   $notifications.clear();
+                 {%- endif -%}
+                 $notifications.addMany([
+                 {%- for message in messages -%}
+                   {%- if not message.extra_tags -%}
+                     { tag: "{{ message.tags }}", text: {{ message|string|tojson }} },
+                   {%- endif -%}
+                 {%- endfor -%}
+                 ])
+                 }'></div>
   {% endif %}
 {% endmacro %}