@vc-shell/framework 1.0.320 → 1.0.322

package/core/composables/useNotifications/index.ts

@@ -1,5 +1,5 @@
 import { PushNotification, PushNotificationClient } from "./../../api/platform";
-import { computed, ComputedRef, ref } from "vue";
+import { computed, ComputedRef, ref, onUnmounted } from "vue";
 import * as _ from "lodash-es";
 
 const notificationsClient = new PushNotificationClient();
@@ -11,12 +11,43 @@ interface INotifications {
   addNotification(message: PushNotification): void;
   markAsRead(message: PushNotification): void;
   markAllAsRead(): void;
+  setNotificationHandler(handler: (notification: PushNotification) => void): void;
 }
 
 const notifications = ref<PushNotification[]>([]);
 const pushNotifications = ref<PushNotification[]>([]);
 
+// Global subscribers storage and their handlers
+const subscribers = new Map<
+  string,
+  {
+    id: number;
+    handler?: (notification: PushNotification) => void;
+  }
+>();
+
+let subscriberCounter = 0;
+
 export function useNotifications(notifyType?: string | string[]): INotifications {
+  if (notifyType) {
+    const types = Array.isArray(notifyType) ? notifyType : [notifyType];
+
+    // Check existing subscriptions
+    types.forEach((type) => {
+      if (!subscribers.has(type)) {
+        subscribers.set(type, {
+          id: ++subscriberCounter,
+        });
+      }
+    });
+
+    onUnmounted(() => {
+      types.forEach((type) => {
+        subscribers.delete(type);
+      });
+    });
+  }
+
   async function loadFromHistory(take = 10) {
     // TODO temporary workaround to get push notifications without base type
     try {
@@ -41,7 +72,7 @@ export function useNotifications(notifyType?: string | string[]): INotifications
   function addNotification(message: PushNotification) {
     if (message.notifyType !== "IndexProgressPushNotification") {
       const existsNotification = notifications.value.find((x: PushNotification) => x.id == message.id);
-      const existPushNotification = pushNotifications.value.find((x) => x.id == message.id);
+      const existPushNotification = pushNotifications.value.find((x: PushNotification) => x.id == message.id);
 
       if (existsNotification) {
         message.isNew = existsNotification.isNew;
@@ -56,6 +87,14 @@ export function useNotifications(notifyType?: string | string[]): INotifications
       } else {
         pushNotifications.value.push(new PushNotification(message));
       }
+
+      // Check if there is a handler for this type of notification
+      if (message.isNew && message.notifyType && subscribers.has(message.notifyType)) {
+        const subscriber = subscribers.get(message.notifyType);
+        if (subscriber?.handler) {
+          subscriber.handler(message);
+        }
+      }
     }
   }
 
@@ -87,11 +126,29 @@ export function useNotifications(notifyType?: string | string[]): INotifications
     }
   }
 
+  function setNotificationHandler(handler: (notification: PushNotification) => void) {
+    if (notifyType) {
+      const types = Array.isArray(notifyType) ? notifyType : [notifyType];
+      types.forEach((type) => {
+        const subscriber = subscribers.get(type);
+        if (subscriber) {
+          subscriber.handler = handler;
+        }
+      });
+    }
+  }
+
   const moduleNotifications = computed(() => {
+    if (!notifyType) {
+      return [];
+    }
+
+    const types = Array.isArray(notifyType) ? notifyType : [notifyType];
+
     return (
       pushNotifications.value.filter(
         (item: PushNotification) =>
-          item.isNew && !!item.notifyType && !!notifyType && notifyType.includes(item.notifyType),
+          item.isNew && item.notifyType && types.includes(item.notifyType) && subscribers.has(item.notifyType),
       ) ?? []
     );
   });
@@ -103,5 +160,6 @@ export function useNotifications(notifyType?: string | string[]): INotifications
     addNotification,
     markAsRead,
     markAllAsRead,
+    setNotificationHandler,
   };
 }

package/core/plugins/modularity/index.ts

@@ -1,10 +1,11 @@
-import { App, Component, h } from "vue";
+import { App, Component, h, watch } from "vue";
 import { i18n } from "./../i18n";
 import { Router } from "vue-router";
 import { BladeInstanceConstructor, BladeVNode } from "./../../../shared/components/blade-navigation/types";
 import { kebabToPascal } from "./../../utilities";
-import { useMenuService } from "../../composables";
+import { useMenuService, useNotifications } from "../../composables";
 import * as _ from "lodash-es";
+import { notification } from "../../../shared";
 
 export const createModule = (components: { [key: string]: BladeInstanceConstructor }, locales?: unknown) => ({
   install(app: App): void {
@@ -34,7 +35,7 @@ export const createModule = (components: { [key: string]: BladeInstanceConstruct
 export const createAppModule = (
   pages: { [key: string]: BladeInstanceConstructor },
   locales?: { [key: string]: object },
-  notificationTemplates?: { [key: string]: Component },
+  notificationTemplates?: { [key: string]: Component & { notifyType: string } },
   moduleComponents?: { [key: string]: Component },
 ) => {
   return {
@@ -104,6 +105,24 @@ export const createAppModule = (
           page.moduleUid = uid;
         }
 
+        if (page.notifyType) {
+          const notifyTypes = Array.isArray(page.notifyType) ? page.notifyType : [page.notifyType];
+
+          if (notifyTypes.length > 0) {
+            const { markAsRead, setNotificationHandler } = useNotifications(notifyTypes);
+
+            setNotificationHandler((message) => {
+              if (message.title) {
+                notification(message.title, {
+                  onClose() {
+                    markAsRead(message);
+                  },
+                });
+              }
+            });
+          }
+        }
+
         // Dynamically add pages to Vue Router
         if (page.url) {
           const mainRoute = routerInstance.getRoutes().find((r) => r.meta?.root);
@@ -196,7 +215,7 @@ export const createAppModule = (
           // Remove existing template if it exists
           if (app.config.globalProperties.notificationTemplates) {
             const existingIndex = app.config.globalProperties.notificationTemplates.findIndex(
-              (t: Component) => t.name === template.name,
+              (t: Component & { notifyType: string }) => t.notifyType === template.notifyType,
             );
             if (existingIndex !== -1) {
               app.config.globalProperties.notificationTemplates.splice(existingIndex, 1);

package/core/plugins/signalR/index.ts

@@ -1,11 +1,31 @@
-import { App, watch } from "vue";
-import { HubConnectionBuilder, LogLevel } from "@microsoft/signalr";
+import { App, watch, ref, InjectionKey } from "vue";
+import { HubConnection, HubConnectionBuilder, LogLevel } from "@microsoft/signalr";
 import { PushNotification } from "../../api/platform";
 import { useNotifications } from "./../../composables/useNotifications";
 import { useUser } from "../../composables/useUser";
 import { useCypressSignalRMock } from "cypress-signalr-mock";
 
 const { addNotification } = useNotifications();
+const currentCreator = ref<string | undefined>();
+
+export const updateSignalRCreatorSymbol = Symbol("updateSignalRCreator") as InjectionKey<
+  (creator: string | undefined) => void
+>;
+
+function setupSystemEventsHandler(connection: HubConnection, creator?: string) {
+  // Unsubscribe from the previous handler if it was
+  connection.off("SendSystemEvents");
+
+  // Subscribe to events with the new creator
+  if (creator) {
+    console.log("[SignalR] Setup handler for creator: ", creator);
+    connection.on("SendSystemEvents", (message: PushNotification) => {
+      if (message.creator === creator) {
+        addNotification(message);
+      }
+    });
+  }
+}
 
 export const signalR = {
   install(
@@ -14,6 +34,7 @@ export const signalR = {
       creator?: string;
     },
   ) {
+    currentCreator.value = options?.creator;
     const { isAuthenticated } = useUser();
     let reconnect = false;
     const connection =
@@ -28,10 +49,11 @@ export const signalR = {
       connection
         .start()
         .then(() => {
-          console.log("SignalR Connected.");
+          console.log("[SignalR] Connected.");
+          setupSystemEventsHandler(connection, currentCreator.value);
         })
         .catch((err) => {
-          console.log("SignalR Connection Error: ", err);
+          console.log("[SignalR] Connection Error: ", err);
           setTimeout(() => start(), 5000);
         });
     };
@@ -48,13 +70,16 @@ export const signalR = {
       addNotification(message);
     });
 
-    if (options?.creator) {
-      connection.on("SendSystemEvents", (message: PushNotification) => {
-        if (message.creator === options.creator) {
-          addNotification(message);
+    // Watch for changes in the creator
+    watch(
+      currentCreator,
+      (newCreator) => {
+        if (newCreator && connection.state === "Connected") {
+          setupSystemEventsHandler(connection, newCreator);
         }
-      });
-    }
+      },
+      { immediate: true },
+    );
 
     watch(
       isAuthenticated,
@@ -69,5 +94,12 @@ export const signalR = {
       },
       { immediate: true },
     );
+
+    app.config.globalProperties.$updateSignalRCreator = (creator: string | undefined) => {
+      currentCreator.value = creator;
+    };
+    app.provide(updateSignalRCreatorSymbol, (creator: string | undefined) => {
+      currentCreator.value = creator;
+    });
   },
 };

package/dist/{azuread-DkJALKeY.js → azuread-BhAhqR2s.js}

@@ -1,6 +1,6 @@
 import { defineComponent as a, openBlock as i, createBlock as r, unref as t } from "vue";
-import { _ as p } from "./external-provider.vue_vue_type_script_setup_true_lang-DnfCYH2u.js";
-import { u as s } from "./index-CuqIbypI.js";
+import { _ as p } from "./external-provider.vue_vue_type_script_setup_true_lang-pVwhlqSS.js";
+import { u as s } from "./index-DfABrHB_.js";
 const g = /* @__PURE__ */ a({
   __name: "azuread",
   props: {