Remove alerts instead of deactivating them

This removes the active state for an alert altogether, since it is no longer used anywhere.
Deltares · Dec 18, 2024 · 3bef4ed · 3bef4ed
1 parent 1625aca
commit 3bef4ed
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 16 deletions.
diff --git a/src/components/ssd/SchematicStatusDisplay.vue b/src/components/ssd/SchematicStatusDisplay.vue
@@ -115,7 +115,6 @@ function onAction(event: CustomEvent<SsdActionEventPayload>): void {
       id: `undefined-action-${now.toISOString()}`,
       type: 'error',
       message: 'No left click actions defined for this object',
-      active: true,
     })
     return
   }
@@ -135,7 +134,6 @@ function onAction(event: CustomEvent<SsdActionEventPayload>): void {
         id: `action-${results[0].type}-${now.toISOString()}`,
         type: 'error',
         message: `Action '${results[0].type}' not supported yet.`,
-        active: true,
       })
   }
 }

diff --git a/src/components/workflows/WorkflowsControl.vue b/src/components/workflows/WorkflowsControl.vue
@@ -435,7 +435,6 @@ function showErrorMessage(message: string) {
     id: `workflow-error-${userId.value}`,
     type: 'error',
     message,
-    active: true,
   })
 }
 
@@ -444,7 +443,6 @@ function showStartMessage(message: string) {
     id: `workflow-start-${userId.value}`,
     type: 'success',
     message,
-    active: true,
   })
 }
 
@@ -453,7 +451,6 @@ function showSuccessMessage(message: string) {
     id: `workflow-success-${userId.value}`,
     type: 'success',
     message,
-    active: true,
   })
 }
 

diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
@@ -147,9 +147,9 @@
       <Suspense>
         <router-view></router-view>
       </Suspense>
-      <div class="alerts__container" v-if="alertsStore.hasActiveAlerts">
+      <div class="alerts__container" v-if="alertsStore.hasAlerts">
         <v-alert
-          v-for="alert in alertsStore.activeAlerts"
+          v-for="alert in alertsStore.alerts"
           :type="alert.type"
           closable
           density="compact"
@@ -198,6 +198,17 @@ const logoSrc = ref('')
 const appBarStyle = ref<StyleValue>()
 const appBarColor = ref<string>('')
 
+alertsStore.addAlert({
+  id: crypto.randomUUID(),
+  type: 'success',
+  message: 'hallo dit is een bericht',
+})
+alertsStore.addAlert({
+  id: crypto.randomUUID(),
+  type: 'success',
+  message: 'hallo dit is een bericht',
+})
+
 function updateAppBarColor() {
   appBarColor.value = getComputedStyle(document.body).getPropertyValue(
     '--weboc-app-bar-bg-color',
@@ -279,7 +290,7 @@ const shouldRenderInfoMenu = computed(() => {
 })
 
 function onCloseAlert(alert: Alert) {
-  alertsStore.deactiveAlert(alert.id)
+  alertsStore.removeAlert(alert.id)
 }
 
 const useRail = computed(

diff --git a/src/stores/alerts.ts b/src/stores/alerts.ts
@@ -6,7 +6,6 @@ export interface Alert {
   id: string
   type: AlertType
   message: string
-  active: boolean
 }
 
 interface AlertState {
@@ -22,17 +21,13 @@ const useAlertsStore = defineStore('alerts', {
     addAlert(alert: Alert) {
       this.alerts.push(alert)
     },
-    deactiveAlert(id: string) {
-      const alert = this.alerts.find((alert) => alert.id === id)
-      if (alert) {
-        alert.active = false
-      }
+    removeAlert(id: string) {
+      this.alerts = this.alerts.filter((alert) => alert.id !== id)
     },
   },
 
   getters: {
-    activeAlerts: (state) => state.alerts.filter((alert) => alert.active),
-    hasActiveAlerts: (state) => state.alerts.some((alert) => alert.active),
+    hasAlerts: (state) => state.alerts.length > 0,
   },
 })