@vc-shell/framework 1.0.128 → 1.0.130

package/core/interceptors/index.ts

@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Router } from "vue-router";
+import { useUser } from "../composables/useUser";
+import { notification } from "../../shared";
+
+export function registerInterceptors(router: Router) {
+  const { fetch } = window;
+  const { signOut, isAuthenticated } = useUser();
+
+  window.fetch = async (...args) => {
+    /**
+     * Overrides the global `fetch` function to handle API calls in demo mode.
+     * If `window.__DEMO_MODE__` is true, the fetch is cancelled and a warning is logged.
+     * Otherwise, the original `fetch` function is called.
+     * @param args - The arguments passed to the `fetch` function.
+     * @returns A promise that resolves to the response from the API call.
+     */
+    if (window.__DEMO_MODE__) {
+      console.warn("CANCELLED FETCH WHILE IN __DEMO_MODE__: ", ...args);
+      console.warn("Please logout and add APP_PLATFORM_URL into .env file of your application to enable API calls");
+      return new Promise((resolve: any) => {
+        /**
+         * This conditions are mocking login, currentuser API calls for demo purposes.
+         */
+        if (args[0] === "/api/platform/security/login") {
+          resolve({
+            status: 200,
+            text: async () => JSON.stringify({ succeeded: true }),
+          });
+        } else if (args[0] === "/api/platform/security/currentuser") {
+          notification.warning(
+            "You are currently in DEMO mode until the first page refresh. \n All API calls are disabled. Please log out and add APP_PLATFORM_URL to your application's .env file to enable API calls.",
+            {
+              timeout: 10000,
+            },
+          );
+          resolve({
+            status: 200,
+            text: async () => JSON.stringify({ id: "demo_user_id", userName: "DEMO_USER" }),
+          });
+        } else {
+          resolve({
+            status: 200,
+            text: async () => JSON.stringify({}),
+          });
+        }
+      });
+    } else {
+      const response = await fetch(...args);
+
+      /**
+       * If the response is unauthorized, logout the user
+       */
+      if (response.status === 401) {
+        //logout user
+        if (isAuthenticated.value) {
+          signOut().then(() => {
+            // redirect to login page if it exists
+            if (router && router.getRoutes().some((route) => route.path === "/login" || route.name === "Login")) {
+              router.currentRoute.value.path !== "/login" && router.push("/login");
+            } else {
+              // Use the origin to redirect to the root of the application if no login page exists.
+              // Usually this is the case when the application is used as a module.
+              window.location.href = window.location.origin + "/";
+            }
+          });
+        }
+      }
+
+      return response;
+    }
+  };
+
+  return window.fetch;
+}

package/core/plugins/i18n/index.ts

@@ -5,6 +5,7 @@ const i18n = createI18n({
   globalInjection: true,
   locale: "en",
   fallbackLocale: "en",
+  formatFallbackMessages: true,
 });
 
 export { i18n };

package/core/plugins/modularity/index.ts

@@ -1,18 +1,17 @@
-import { App, Component } from "vue";
+import { App, Component, defineComponent, h } from "vue";
 import { i18n } from "./../i18n";
 import { Router } from "vue-router";
 import { BladeInstanceConstructor } from "./../../../shared/components/blade-navigation/types";
 import { kebabToPascal } from "./../../utilities";
+import { useMenuService } from "../../composables";
+import { ComponentProps } from "../../../shared/utilities/vueUtils";
+import { reactiveComputed } from "@vueuse/core";
 
-export const createModule = (
-  components: { [key: string]: BladeInstanceConstructor },
-  locales?: unknown,
-  isBladeComponent?: boolean
-) => ({
+export const createModule = (components: { [key: string]: BladeInstanceConstructor }, locales?: unknown) => ({
   install(app: App): void {
     // Register components
     Object.entries(components).forEach(([componentName, component]) => {
-      app.component(componentName, isBladeComponent ? { ...component, isBladeComponent: true } : component);
+      app.component(componentName, component);
     });
 
     // Load locales
@@ -28,10 +27,8 @@ export const createAppModule = (
   pages: { [key: string]: BladeInstanceConstructor },
   locales?: { [key: string]: object },
   notificationTemplates?: { [key: string]: Component },
-  moduleComponents?: { [key: string]: Component }
+  moduleComponents?: { [key: string]: Component },
 ) => {
-  const module = createModule(pages, locales, true);
-
   return {
     install(app: App, options?: { router: Router }): void {
       let routerInstance: Router;
@@ -43,24 +40,66 @@ export const createAppModule = (
 
       // Register pages
       Object.entries(pages).forEach(([key, page]) => {
-        app.config.globalProperties.pages?.push(page);
+        if (!page.url) {
+          app.config.globalProperties.pages?.push(page);
 
-        app.config.globalProperties.bladeRoutes?.push({
-          component: page,
-          route: page.url,
-          name: key,
-          isWorkspace: page.isWorkspace || false,
-        });
+          app.config.globalProperties.bladeRoutes?.push({
+            component: page,
+            name: page?.name,
+            isWorkspace: page.isWorkspace || false,
+          });
+
+          // Add to menu
+          if (page.menuItem) {
+            app.config.globalProperties.menuItems?.push({ ...page.menuItem, url: page.url, routeId: key });
+          }
+
+          app.component(page.name, page);
+        }
 
         // Dynamically add pages to vue router
         if (page.url) {
           const mainRouteName = routerInstance.getRoutes().find((r) => r.meta?.root)?.name;
 
+          if (!mainRouteName) {
+            throw new Error("No parent route is found. Make sure you have added `meta: {root: true}` to main route.");
+          }
+
+          const routeName = page.name || kebabToPascal(page.url.substring(1));
+
+          const BladeInstanceConstructor = Object.assign({}, page, { name: routeName });
+
+          const bladeVNode = h(BladeInstanceConstructor);
+
           if (routerInstance && mainRouteName) {
             routerInstance.addRoute(mainRouteName, {
-              name: kebabToPascal(page.url.substring(1)),
+              name: routeName,
               path: page.url.substring(1),
-              component: page,
+              components: { default: bladeVNode },
+              meta: {
+                permissions: page?.permissions,
+              },
+            });
+          }
+
+          app.config.globalProperties.pages?.push(bladeVNode);
+
+          app.config.globalProperties.bladeRoutes?.push({
+            component: bladeVNode,
+            route: page.url,
+            name: routeName,
+            isWorkspace: page.isWorkspace || false,
+          });
+
+          app.component(BladeInstanceConstructor.name, BladeInstanceConstructor);
+
+          // Add to menu
+          if (page.menuItem) {
+            const { addMenuItem } = useMenuService();
+            addMenuItem({
+              ...page.menuItem,
+              url: page.url,
+              routeId: routeName,
             });
           }
         }
@@ -80,7 +119,11 @@ export const createAppModule = (
         });
       }
 
-      module.install(app);
+      if (locales) {
+        Object.entries(locales).forEach(([key, message]) => {
+          i18n.global.mergeLocaleMessage(key, message);
+        });
+      }
     },
   };
 };

package/core/plugins/moment/moment.ts

@@ -1,4 +1,4 @@
-import { Duration, default as moment, argAccuracy } from "moment";
+import { Duration, default as moment, argAccuracy as argAcc } from "moment";
 import { humanize } from "./humanize";
 
 declare module "moment" {
@@ -23,7 +23,7 @@ moment.duration.fn.humanize = function (...args: unknown[]): string {
     return humanize.apply(this as Duration & number, args as [withSuffix?: boolean | undefined]);
   }
 
-  return humanizeOriginal.apply(this, args as [argAccuracy?: argAccuracy | undefined]);
+  return humanizeOriginal.apply(this, args as [argAccuracy?: argAcc | undefined]);
 };
 
 export default moment;

package/core/plugins/signalR/index.ts

@@ -1,11 +1,15 @@
+import { watch } from "vue";
 import { HubConnectionBuilder, LogLevel } from "@microsoft/signalr";
 import { PushNotification } from "../../api/platform";
 import { useNotifications } from "./../../composables/useNotifications";
+import { useUser } from "../../composables/useUser";
 
 const { addNotification } = useNotifications();
 
 export const signalR = {
   install() {
+    const { isAuthenticated } = useUser();
+    let reconnect = false;
     const connection = new HubConnectionBuilder()
       .withUrl("/pushNotificationHub")
       .withAutomaticReconnect()
@@ -24,14 +28,30 @@ export const signalR = {
         });
     };
 
+    async function stop() {
+      await connection.stop();
+    }
+
     connection.onclose(() => {
-      start();
+      if (reconnect) start();
     });
 
-    start();
-
     connection.on("Send", (message: PushNotification) => {
       addNotification(message);
     });
+
+    watch(
+      isAuthenticated,
+      async (value) => {
+        if (value) {
+          reconnect = true;
+          start();
+        } else {
+          reconnect = false;
+          await stop();
+        }
+      },
+      { immediate: true },
+    );
   },
 };

package/core/types/index.ts

@@ -1,5 +1,5 @@
-import { ComponentPublicInstance, ComputedRef, DefineComponent, Ref, UnwrapRef, Component } from "vue";
-import { CoreBladeExposed, ExtractedBladeOptions, BladeInstanceConstructor } from "./../../shared";
+import { Component, ComponentPublicInstance, ComputedRef, Ref } from "vue";
+import { BladeInstanceConstructor, CoreBladeExposed, ExtractedBladeOptions } from "./../../shared";
 import { ComponentPublicInstanceConstructor } from "../../shared/utilities/vueUtils";
 
 // Type instead of interface here is workaround for:
@@ -61,8 +61,7 @@ export interface BladeMenu<T extends Component = Component> {
   options?: ExtractedBladeOptions<InstanceType<BladeInstanceConstructor<T>>["$props"], "options">;
 }
 
-export interface IBladeToolbar<T extends ComponentPublicInstance = ComponentPublicInstance>
-  extends Omit<BladeMenu, "children" | "icon" | "options" | "component"> {
+export interface IBladeToolbar<T extends ComponentPublicInstance = ComponentPublicInstance> {
   id?: string;
   icon?: string | (() => string);
   isAccent?: boolean | ComputedRef<boolean>;
@@ -70,24 +69,12 @@ export interface IBladeToolbar<T extends ComponentPublicInstance = ComponentPubl
   disabled?: boolean | ComputedRef<boolean | undefined>;
   dropdownItems?: IBladeDropdownItem[];
   options?: InstanceType<ComponentPublicInstanceConstructor<T>>["$props"];
+  title?: string | Ref<string>;
+  isVisible?: boolean | Ref<boolean>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  clickHandler?(app?: Record<string, any> | CoreBladeExposed | null): 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 type ToolbarMenu<T> = T extends {
   component?: infer C extends ComponentPublicInstanceConstructor;
 }
@@ -135,21 +122,6 @@ export interface ICommonAsset {
   createdDate?: Date;
 }
 
-export interface AuthData {
-  accessToken?: string;
-  //alias for accessToken is used by platform and is required for sharing auth data between platform and custom apps
-  token?: string;
-  refreshToken?: string;
-  userName?: string;
-  expiresAt?: number;
-}
-
-export interface SignInResults {
-  succeeded: boolean;
-  error?: string;
-  errorCode?: string;
-}
-
 export interface RequestPasswordResult {
   succeeded: boolean;
   error?: string;
@@ -169,3 +141,14 @@ export type ITableColumns = {
   align?: "start" | "end" | "center" | "between" | "around" | "evenly";
   visible?: boolean;
 };
+
+export interface MenuItem {
+  icon: string;
+  id: number;
+  priority: number;
+  routeId: string;
+  title: ComputedRef<string> | string;
+  url: string;
+  groupId?: string;
+  children: MenuItem[];
+}

package/core/utilities/kebabToCamel.ts

@@ -2,6 +2,6 @@ export const kebabToCamel = (str: string) => str.replace(/-./g, (x) => x[1].toUp
 
 export function kebabToPascal(str: string) {
   const camelCase = kebabToCamel(str);
-  const pascalCase = camelCase[0].toUpperCase() + camelCase.substr(1);
+  const pascalCase = camelCase[0].toUpperCase() + camelCase.substring(1);
   return pascalCase;
 }