improve $notifications

core/static/bundled/utils/notifications.ts

@@ -1,30 +1,40 @@
+import { Alpine } from "alpinejs";
+
 export enum NotificationLevel {
   Error = "error",
   Warning = "warning",
   Success = "success",
 }
 
-export function createNotification(message: string, level: NotificationLevel) {
-  const element = document.getElementById("quick-notifications");
-  if (element === null) {
-    return false;
-  }
-  return element.dispatchEvent(
-    new CustomEvent("quick-notification-add", {
-      detail: { text: message, tag: level },
-    }),
-  );
+export interface NotificationPlugin {
+  error: (message: string) => void;
+  warning: (message: string) => void;
+  success: (message: string) => void;
+  clear: () => void;
+  addMany: (notifs: Notification[]) => void;
+  getAll: () => Notification[];
 }
 
-export function deleteNotifications() {
-  const element = document.getElementById("quick-notifications");
-  if (element === null) {
-    return false;
-  }
-  return element.dispatchEvent(new CustomEvent("quick-notification-delete"));
+export interface Notification {
+  tag: NotificationLevel;
+  text: string;
 }
 
-export function alpinePlugin() {
+Alpine.store("notifications", [] as Notification[]);
+
+function createNotification(message: string, level: NotificationLevel) {
+  (Alpine.store("notifications") as Notification[]).push({ text: message, tag: level });
+}
+
+function deleteNotifications() {
+  Alpine.store("notifications", []);
+}
+
+function getNotifications() {
+  return Alpine.store("notifications") as Notification[];
+}
+
+export function alpinePlugin(): NotificationPlugin {
   return {
     error: (message: string) => createNotification(message, NotificationLevel.Error),
     warning: (message: string) =>
@@ -32,5 +42,10 @@ export function alpinePlugin() {
     success: (message: string) =>
       createNotification(message, NotificationLevel.Success),
     clear: () => deleteNotifications(),
+    addMany: (notifs: Notification[]) =>
+      notifs.forEach((n) => {
+        createNotification(n.text, n.tag);
+      }),
+    getAll: () => getNotifications(),
   };
 }