From 73678aacabe9cb85bccccfb31292956e9249197b Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Sat, 30 Nov 2024 00:32:23 -0300
Subject: [PATCH] feat: improve multiple toasts on the same page from different
 sources

---
 app/templates/common/fragments/toasts.html | 34 ++++++++++------------
 app/templates/includes/toasts.html         |  7 +++--
 frontend/src/application/bootstrap.js      | 11 ++++---
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/app/templates/common/fragments/toasts.html b/app/templates/common/fragments/toasts.html
index dc8c248..84727bc 100644
--- a/app/templates/common/fragments/toasts.html
+++ b/app/templates/common/fragments/toasts.html
@@ -1,22 +1,20 @@
 {% load i18n %}
 {% load toast_bg %}
 {% if messages %}
-    <div class="toast-container position-fixed bottom-0 end-0 p-3">
-        {% for message in messages %}
-            <div class="toast align-items-center text-bg-{{ message.tags | toast_bg }} border-0"
-                 role="alert"
-                 aria-live="assertive"
-                 aria-atomic="true">
-                <div class="toast-header">
-                    <i class="{{ message.tags | toast_icon }} fa-fw me-1"></i>
-                    <strong class="me-auto">{{ message.tags | toast_title }}</strong>
-                    <button type="button"
-                            class="btn-close"
-                            data-bs-dismiss="toast"
-                            aria-label={% translate 'Close' %}></button>
-                </div>
-                <div class="toast-body">{{ message }}</div>
-            </div>
-        {% endfor %}
-    </div>
+  {% for message in messages %}
+      <div class="toast align-items-center text-bg-{{ message.tags | toast_bg }} border-0"
+           role="alert"
+           aria-live="assertive"
+           aria-atomic="true">
+          <div class="toast-header">
+              <i class="{{ message.tags | toast_icon }} fa-fw me-1"></i>
+              <strong class="me-auto">{{ message.tags | toast_title }}</strong>
+              <button type="button"
+                      class="btn-close"
+                      data-bs-dismiss="toast"
+                      aria-label={% translate 'Close' %}></button>
+          </div>
+          <div class="toast-body">{{ message }}</div>
+      </div>
+  {% endfor %}
 {% endif %}
diff --git a/app/templates/includes/toasts.html b/app/templates/includes/toasts.html
index 9b12568..010ad5b 100644
--- a/app/templates/includes/toasts.html
+++ b/app/templates/includes/toasts.html
@@ -1,3 +1,6 @@
-<div id="toasts" hx-get="{% url 'toasts' %}"
-     hx-trigger="load, toast from:window, toasts from:window">
+<div id="toasts">
+  <div class="toast-container position-fixed bottom-0 end-0 p-3" hx-trigger="load, updated from:window" hx-get="{% url 'toasts' %}" hx-swap="beforeend">
+
+  </div>
 </div>
+
diff --git a/frontend/src/application/bootstrap.js b/frontend/src/application/bootstrap.js
index 38b66ee..415c578 100644
--- a/frontend/src/application/bootstrap.js
+++ b/frontend/src/application/bootstrap.js
@@ -7,12 +7,15 @@ function initiateToasts() {
     const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl));  // eslint-disable-line no-undef
 
     for (let i = 0; i < toastList.length; i++) {
-        toastList[i].show();
-        toastList[i]._element.addEventListener('hidden.bs.toast', (event) => {
-            event.target.remove();
-        });
+        if (toastList[i].isShown() === false) {
+            toastList[i].show();
+            toastList[i]._element.addEventListener('hidden.bs.toast', (event) => {
+                event.target.remove();
+            });
+        }
     }
 }
 
+document.addEventListener('DOMContentLoaded', initiateToasts, false);
 document.addEventListener('htmx:afterSwap', initiateToasts, false);
 initiateToasts();