Add alerts cache control

slovensko-digital · Dec 11, 2023 · 6bf6ea4 · 6bf6ea4
1 parent be480ad
commit 6bf6ea4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/app/components/common/alert_component.html.erb b/app/components/common/alert_component.html.erb
@@ -1,7 +1,7 @@
 <div class="fixed top-20 inset-x-0 m-4 z-50">
   <div class="flex flex-col items-end space-y-4">
     <% flash.each do |type, msg| %>
-      <div data-controller="dismissible-alert" class="max-w-sm w-full pointer-events-auto rounded-md <%= type == 'notice' ? "bg-green-50" : "bg-red-50" %> p-4">
+      <div data-controller="dismissible-alert" data-turbo-temporary-hide class="max-w-sm w-full pointer-events-auto rounded-md <%= type == 'notice' ? "bg-green-50" : "bg-red-50" %> p-4">
         <div class="flex">
           <div class="flex-shrink-0">
             <% if type == 'notice' %>

diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js
@@ -16,23 +16,34 @@ application.register('tabs', Tabs)
 application.register('popover', Popover)
 application.register('toggle', Toggle)
 application.register('slideover', Slideover)
-document.addEventListener('turbo:before-cache', function(event) {
+document.addEventListener('turbo:before-cache', function({ target}) {
     const setOpenAsFalse = (attribute) => {
-        const element = event.target.querySelector(`[${attribute}="true"]`)
+        const element = target.querySelector(`[${attribute}="true"]`)
         element?.setAttribute(attribute, "false")
     }
 
+    const queryAllAndModify = (selector, modify) => {
+        target.querySelectorAll(selector).forEach(modify)
+    }
+
     const addHiddenClass = () => {
-        event.target.querySelectorAll("[data-turbo-temporary-hide]").forEach((elm) => {
+        queryAllAndModify("[data-turbo-temporary-hide]", (elm) => {
             if (!elm.classList.contains('hidden')) {
                 elm.classList.add('hidden')
             }
         })
     }
 
+    const removeAlerts = () => {
+        queryAllAndModify("[data-controller=\"dismissible-alert\"][data-turbo-temporary-hide]", (elm) => {
+            elm.remove()
+        })
+    }
+
     addHiddenClass()
     setOpenAsFalse('data-slideover-open-value')
     setOpenAsFalse('data-dropdown-open-value')
+    removeAlerts()
 })
 
 export { application }