@vc-shell/framework 1.0.69 → 1.0.70

package/core/composables/index.ts

@@ -8,3 +8,4 @@ export * from "./useAsync";
 export * from "./useApiClient";
 export * from "./useLoading";
 export * from "./useErrorHandler";
+export * from "./useMenuComposer";

package/core/composables/useMenuComposer/index.ts

@@ -0,0 +1,25 @@
+import { BladeMenu, IBladeToolbar, NavigationMenu, ToolbarMenu } from "./../../types";
+
+interface IUseMenuComposer {
+  navigationMenuComposer<T extends BladeMenu[]>(items: [...{ [I in keyof T]: NavigationMenu<T[I]> }]): BladeMenu[];
+  toolbarComposer<T extends IBladeToolbar[]>(items: [...{ [I in keyof T]: ToolbarMenu<T[I]> }]): IBladeToolbar[];
+}
+
+export function useMenuComposer(): IUseMenuComposer {
+  function navigationMenuComposer<T extends BladeMenu[]>(
+    items: [...{ [I in keyof T]: NavigationMenu<T[I]> }]
+  ): BladeMenu[] {
+    return items;
+  }
+
+  function toolbarComposer<T extends IBladeToolbar[]>(
+    items: [...{ [I in keyof T]: ToolbarMenu<T[I]> }]
+  ): IBladeToolbar[] {
+    return items;
+  }
+
+  return {
+    navigationMenuComposer,
+    toolbarComposer,
+  };
+}

package/core/composables/useNotifications/index.ts

@@ -1,25 +1,23 @@
 import { PushNotification, PushNotificationClient } from "./../../api";
 import { useUser } from "./../useUser";
-import { computed, ComputedRef, readonly, ref } from "vue";
+import { computed, ComputedRef, ref } from "vue";
 import * as _ from "lodash-es";
 
 const notificationsClient = new PushNotificationClient();
 
 interface INotifications {
-  readonly notifications: ComputedRef<Readonly<PushNotification[]>>;
-  readonly popupNotifications: ComputedRef<Readonly<PushNotification[]>>;
+  readonly notifications: ComputedRef<PushNotification[]>;
+  readonly moduleNotifications: ComputedRef<PushNotification[]>;
   loadFromHistory(take?: number): void;
   addNotification(message: PushNotification): void;
   markAsRead(message: PushNotification): void;
-  dismiss(message: PushNotification): void;
-  dismissAll(): void;
   markAllAsRead(): void;
 }
 
 const notifications = ref<PushNotification[]>([]);
-const popupNotifications = ref<PushNotification[]>([]);
+const pushNotifications = ref<PushNotification[]>([]);
 
-export function useNotifications(): INotifications {
+export function useNotifications(notifyType?: string | string[]): INotifications {
   const { getAccessToken } = useUser();
 
   async function loadFromHistory(take = 10) {
@@ -50,43 +48,32 @@ export function useNotifications(): INotifications {
 
   function addNotification(message: PushNotification) {
     if (message.notifyType !== "IndexProgressPushNotification") {
-      const existsNotification = notifications.value.find((x) => x.id == message.id);
-      const existPushNotification = popupNotifications.value.find((x) => x.id == message.id);
+      const existsNotification = notifications.value.find((x: PushNotification) => x.id == message.id);
+      const existPushNotification = pushNotifications.value.find((x) => x.id == message.id);
 
       if (existsNotification) {
         message.isNew = existsNotification.isNew;
         Object.assign(existsNotification, message);
       } else {
-        notifications.value.unshift(message);
+        notifications.value.push(new PushNotification(message));
       }
 
       if (existPushNotification) {
-        message.isNew = true;
+        message.isNew = existPushNotification.isNew;
         Object.assign(existPushNotification, message);
       } else {
-        popupNotifications.value.unshift(message);
+        pushNotifications.value.push(new PushNotification(message));
       }
     }
   }
 
   function markAsRead(message: PushNotification) {
-    const mes = popupNotifications.value.find((x) => x.id === message.id);
-    if (mes) {
-      mes.isNew = false;
-      _.remove(popupNotifications.value, (x) => x.id == message.id);
+    const exists = pushNotifications.value.find((x) => x.id === message.id);
+    if (exists) {
+      Object.assign(exists, { ...message, isNew: false });
     }
   }
 
-  function dismiss(message: PushNotification) {
-    _.remove(popupNotifications.value, (x) => x.id == message.id);
-    _.remove(notifications.value, (x) => x.id == message.id);
-  }
-
-  function dismissAll() {
-    popupNotifications.value = [];
-    notifications.value = [];
-  }
-
   async function markAllAsRead() {
     const token = await getAccessToken();
     if (token) {
@@ -106,13 +93,20 @@ export function useNotifications(): INotifications {
     }
   }
 
+  const moduleNotifications = computed(
+    () =>
+      (notifyType &&
+        pushNotifications.value.filter(
+          (item: PushNotification) => item.isNew && notifyType.includes(item.notifyType)
+        )) ??
+      []
+  );
+
   return {
-    notifications: computed(() => readonly(_.orderBy(notifications.value, ["created"], ["desc"]))),
-    popupNotifications: computed(() => readonly(popupNotifications.value)),
+    notifications: computed(() => _.orderBy(notifications.value, ["created"], ["desc"])),
+    moduleNotifications,
     loadFromHistory,
     addNotification,
-    dismissAll,
-    dismiss,
     markAsRead,
     markAllAsRead,
   };

package/core/composables/useUser/index.ts

@@ -111,7 +111,7 @@ export function useUser(): IUseUser {
         console.log("[userUsers]: an user details has been loaded", user.value);
       } catch (e) {
         console.dir(e);
-        //TODO: log error
+        throw e;
       } finally {
         loading.value = false;
       }

package/core/directives/index.ts

@@ -1,4 +1,3 @@
 export * from "./permissions";
 export * from "./autofocus";
-export * from "./click-outside";
 export * from "./loading";

package/core/plugins/index.ts

@@ -2,4 +2,4 @@ export * from "./moment";
 export * from "./i18n";
 export * from "./validation";
 export * from "./modularity";
-export * from "./error-interceptor";
+export * from "./signalR";

package/core/plugins/modularity/index.ts

@@ -17,7 +17,7 @@ export const createModule = (components: unknown, locales?: unknown) => ({
   },
 });
 
-export const createAppModule = (pages: unknown, locales?: unknown) => {
+export const createAppModule = (pages: unknown, locales?: unknown, notificationTemplates?: unknown) => {
   const module = createModule(pages, locales);
 
   return {
@@ -26,6 +26,13 @@ export const createAppModule = (pages: unknown, locales?: unknown) => {
       Object.entries(pages).forEach(([, page]) => {
         app.config.globalProperties.pages?.push(page);
       });
+
+      if (notificationTemplates) {
+        // Register notification templates
+        Object.entries(notificationTemplates).forEach(([, template]) => {
+          app.config.globalProperties.notificationTemplates?.push(template);
+        });
+      }
       module.install(app);
     },
   };

package/core/plugins/signalR/index.ts

@@ -0,0 +1,32 @@
+import { HubConnectionBuilder, LogLevel } from "@microsoft/signalr";
+import { PushNotification } from "../../api";
+import { useNotifications } from "./../../composables/useNotifications";
+
+const { addNotification } = useNotifications();
+
+export const signalR = {
+  install() {
+    const connection = new HubConnectionBuilder()
+      .withUrl("/pushNotificationHub")
+      .withAutomaticReconnect()
+      .configureLogging(LogLevel.Information)
+      .build();
+
+    let startedPromise = null;
+
+    function start() {
+      startedPromise = connection.start().catch((err) => {
+        console.error("Failed to connect", err);
+        return new Promise((resolve, reject) => setTimeout(() => start().then(resolve).catch(reject), 5000));
+      });
+      return startedPromise;
+    }
+    connection.onclose(() => start());
+
+    start();
+
+    connection.on("Send", (message: PushNotification) => {
+      addNotification(message);
+    });
+  },
+};

package/core/types/index.ts

@@ -1,5 +1,11 @@
-import { ComputedRef } from "vue";
-import { IBladeElement, ExtendedComponent } from "./../../shared";
+import { ComponentPublicInstance, ComputedRef, Ref } from "vue";
+import {
+  CoreBladeExposed,
+  BladeConstructor,
+  ExtractedBladeOptions,
+  ComponentInstanceConstructor,
+  BladeInstanceConstructor,
+} from "./../../shared";
 
 // Type instead of interface here is workaround for:
 // https://github.com/microsoft/TypeScript/issues/15300
@@ -20,36 +26,69 @@ export type IValidationRules = {
   size?: number;
 };
 
-export interface IBladeToolbar {
+export interface IBladeDropdownItem {
+  id: string;
+  title: string;
+  icon?: string;
+  clickHandler?(): void;
+}
+
+export interface BladeMenu<T extends ComponentPublicInstance = ComponentPublicInstance> {
+  title?: string | Ref<string>;
+  icon?: string;
+  isVisible?: boolean | Ref<boolean>;
+  component?: BladeConstructor<T>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  clickHandler?(app?: Record<string, any> | CoreBladeExposed): void;
+  children?: BladeMenu<T>[];
+  options?: ExtractedBladeOptions<InstanceType<BladeConstructor<T>>["$props"], "options">;
+}
+
+export interface IBladeToolbar<T extends ComponentPublicInstance = ComponentPublicInstance>
+  extends Omit<BladeMenu, "children" | "icon" | "options" | "component"> {
   id?: string;
   icon?: string | (() => string);
-  title?: string | unknown;
-  isVisible?: boolean | unknown;
   isAccent?: boolean | ComputedRef<boolean>;
-  component?: ExtendedComponent;
-  bladeOptions?: Record<string, unknown>;
+  component?: ComponentInstanceConstructor<T>;
   disabled?: boolean | ComputedRef<boolean>;
   dropdownItems?: IBladeDropdownItem[];
-  clickHandler?(app?: Record<string, unknown> | IBladeElement): void;
+  options?: InstanceType<ComponentInstanceConstructor<T>>["$props"];
 }
 
-export interface IBladeDropdownItem {
-  id: string;
-  title: string;
-  icon?: string;
-  clickHandler?(): void;
+export type NavigationMenu<T> = T extends {
+  component?: infer C extends BladeInstanceConstructor;
 }
+  ? {
+      component?: C;
+      options?: ExtractedBladeOptions<InstanceType<C>["$props"], "options">;
+    } & BladeMenu
+  : T extends {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      children?: infer P extends [] | readonly any[];
+    } & BladeMenu
+  ? {
+      children?: readonly [...{ [I in keyof P]: NavigationMenu<P[I]> }];
+    } & BladeMenu
+  : T & { component?: BladeInstanceConstructor };
 
-export interface IMenuItems extends IBladeToolbar {
-  children?: IBladeToolbar[];
+export type ToolbarMenu<T> = T extends {
+  component?: infer C extends ComponentInstanceConstructor;
 }
+  ? {
+      component?: C;
+      options?: InstanceType<C>["$props"];
+    } & IBladeToolbar
+  : T & { component?: ComponentInstanceConstructor };
+
+export type NotificationTemplateConstructor = ComponentInstanceConstructor & { notifyType: string };
 
-export interface IActionBuilderResult {
+// eslint-disable-next-line @typescript-eslint/ban-types
+export interface IActionBuilderResult<T = {}> {
   icon: string;
   title: string;
   variant: string;
   leftActions?: boolean;
-  clickHandler(item?: { id?: string }): void;
+  clickHandler(item?: T): void;
 }
 
 export interface IImage {