@vc-shell/framework 1.1.22 → 1.1.23

package/shared/components/blade-navigation/composables/useBladeNavigation/internal/bladeActions.ts

@@ -0,0 +1,151 @@
+import { h, Component, isVNode } from "vue";
+import { reactifyObject, reactiveComputed } from "@vueuse/core";
+import * as _ from "lodash-es";
+import { RouteLocationNormalized, Router, LocationQuery, NavigationFailure, RouteParams } from "vue-router";
+import { useAppInsights } from "../../../../../../core/composables";
+import { i18n } from "../../../../../../core/plugins/i18n";
+import type { notification as NotificationServiceType } from "../../../../notifications";
+import type { BladeVNode, IBladeEvent, BladeInstanceConstructor } from "../../../types";
+import type { _createBladeStateManagement } from "./bladeState";
+import type { _createRouterUtils } from "./routerUtils";
+
+// --- Blade Actions Module ---
+export function _createBladeActions(
+  router: Router,
+  route: RouteLocationNormalized,
+  bladeState: ReturnType<typeof _createBladeStateManagement>,
+  routerUtils: ReturnType<typeof _createRouterUtils>,
+  ensureBladeComponent: <Blade extends Component>(
+    bladeInput: BladeInstanceConstructor<Blade> | { name: string } | null | undefined,
+  ) => BladeInstanceConstructor<Blade>,
+  hasAccess: (permissions?: string | string[]) => boolean,
+  notificationServiceInstance: typeof NotificationServiceType,
+  i18nInstance: typeof i18n,
+  setupPageTrackingInstance: ReturnType<typeof useAppInsights>["setupPageTracking"],
+) {
+  async function openWorkspace<Blade extends Component>(
+    { blade: bladeInput, param, options }: IBladeEvent<Blade>,
+    query: LocationQuery | undefined = undefined,
+    routeParams: RouteParams = {},
+    replace = false,
+  ): Promise<NavigationFailure | void> {
+    const bladeComponent = ensureBladeComponent(bladeInput);
+    const componentProps = reactifyObject({
+      param,
+      options,
+      navigation: { idx: 0 },
+    });
+    const createdComponent = h(bladeComponent, componentProps) as BladeVNode;
+
+    try {
+      const isPrevented = await bladeState.removeBladesStartingFrom(0);
+      if (isPrevented) {
+        return;
+      }
+
+      if (createdComponent.type?.url) {
+        if (hasAccess(bladeComponent.permissions)) {
+          if (bladeState.blades.value.length > 0 && bladeState.blades.value[0].type.url === createdComponent.type.url) {
+            return;
+          }
+          bladeState.setActiveWorkspaceBlade(createdComponent);
+
+          const targetRoute = routerUtils.allRoutes.find((r) => r.path.endsWith(createdComponent.type?.url as string));
+          if (targetRoute && targetRoute.components) {
+            (targetRoute.components as Record<string, Component | BladeVNode>).default = createdComponent;
+          }
+
+          return router.push({
+            name: targetRoute?.name,
+            params: { ...routeParams, ...route.params },
+            query,
+            replace,
+          });
+        } else {
+          notificationServiceInstance.error(i18nInstance.global.t("PERMISSION_MESSAGES.ACCESS_RESTRICTED"), {
+            timeout: 3000,
+          });
+        }
+      }
+    } catch (e) {
+      console.error(e);
+      const bladeNameForError =
+        bladeComponent?.type?.name ||
+        (typeof bladeInput === "object" && "name" in bladeInput ? bladeInput.name : "Unknown");
+      throw new Error(`Opening workspace '${bladeNameForError}' is prevented or failed.`);
+    }
+  }
+
+  async function openBlade<Blade extends Component>(
+    args: IBladeEvent<Blade>,
+    isWorkspaceTarget = false,
+    sourceBladeInstance?: BladeVNode,
+  ): Promise<void | NavigationFailure> {
+    const { blade: bladeInput, param, options, onOpen, onClose, replaceCurrentBlade = false } = args;
+    const bladeComponent = ensureBladeComponent(bladeInput);
+
+    if (isWorkspaceTarget) {
+      return openWorkspace({ blade: bladeComponent, param, options });
+    }
+
+    try {
+      const instanceComponent = sourceBladeInstance || bladeState.activeWorkspace.value;
+
+      if (!instanceComponent) {
+        console.error("No active workspace or source blade instance provided to open a blade into.");
+        throw new Error("No workspace or source blade context to open blade.");
+      }
+      if (!isVNode(instanceComponent)) {
+        console.error("Source blade instance or active workspace is not a valid VNode.", instanceComponent);
+        throw new Error("Internal error: Invalid instanceComponent for opening blade.");
+      }
+
+      const instanceComponentIndex = _.findLastIndex(bladeState.blades.value, (x): x is BladeVNode => {
+        if (!x) return false;
+        return _.isEqual(x.type, instanceComponent.type);
+      });
+
+      const parentBladeIndex = instanceComponentIndex >= 0 ? instanceComponentIndex : -1;
+      const childBladeIndex = parentBladeIndex + 1;
+
+      let isPrevented = false;
+      if (bladeState.blades.value[childBladeIndex]) {
+        isPrevented = await bladeState.removeBladesStartingFrom(childBladeIndex);
+      }
+
+      const currentBladeIdx = parentBladeIndex;
+
+      const bladeNode = h(
+        bladeComponent,
+        Object.assign(
+          {},
+          reactiveComputed(() => ({ options, param })),
+          { navigation: { onOpen, onClose, idx: currentBladeIdx + 1, isVisible: true } },
+        ),
+      ) as BladeVNode;
+
+      if (!isPrevented) {
+        if (hasAccess(bladeComponent.permissions)) {
+          if (replaceCurrentBlade && currentBladeIdx >= 0 && bladeState.blades.value[currentBladeIdx]) {
+            if (bladeState.blades.value[currentBladeIdx]) {
+              bladeState.blades.value[currentBladeIdx].props.navigation.isVisible = false;
+            }
+          }
+          setupPageTrackingInstance.beforeEach({ name: bladeNode.type.name! });
+          bladeState.addBlade(bladeNode);
+        } else {
+          notificationServiceInstance.error(i18nInstance.global.t("PERMISSION_MESSAGES.ACCESS_RESTRICTED"), {
+            timeout: 3000,
+          });
+        }
+      }
+    } catch (e) {
+      console.error("Error in openBlade:", e);
+    }
+  }
+
+  return {
+    openWorkspace,
+    openBlade,
+  };
+}

package/shared/components/blade-navigation/composables/useBladeNavigation/internal/bladeRouteResolver.ts

@@ -0,0 +1,243 @@
+import { Component, isVNode } from "vue";
+import * as _ from "lodash-es";
+import { RouteLocationNormalized, Router, RouteLocationRaw } from "vue-router";
+import { IBladeRegistry } from "../../../../../../core/composables/useBladeRegistry";
+import type { BladeInstanceConstructor, BladeVNode } from "../../../types";
+import type { _createBladeStateManagement } from "./bladeState";
+import type { _createRouterUtils } from "./routerUtils";
+import type { _createBladeActions } from "./bladeActions";
+
+/**
+ * Checks if a component is routable from URL
+ */
+function isComponentRoutable(component: BladeInstanceConstructor | undefined): boolean {
+  return !(component && typeof component.routable === "boolean" && !component.routable);
+}
+
+// --- Blade Route Resolver Module ---
+export function _createBladeRouteResolver(
+  router: Router,
+  route: RouteLocationNormalized,
+  bladeRegistry: IBladeRegistry,
+  routerUtils: ReturnType<typeof _createRouterUtils>,
+  bladeActions: ReturnType<typeof _createBladeActions>,
+  bladeState: ReturnType<typeof _createBladeStateManagement>,
+  ensureBladeComponent: <Blade extends Component>(
+    bladeInput: BladeInstanceConstructor<Blade> | { name: string } | null | undefined,
+  ) => BladeInstanceConstructor<Blade>,
+  hasAccess: (permissions?: string | string[]) => boolean,
+) {
+  // Internal helper to find a blade component based on a URL segment
+  function findBladeComponentByUrlSegment(segment: string): BladeInstanceConstructor | undefined {
+    try {
+      const allRoutes = router.getRoutes();
+      const segmentWithSlash = segment.startsWith("/") ? segment : `/${segment}`;
+      const segmentWithoutSlash = segment.startsWith("/") ? segment.substring(1) : segment;
+
+      // 1. Check router's resolved routes by path suffix.
+      for (const r of allRoutes) {
+        let resolvedComponent: unknown;
+        let componentToCheck: unknown;
+
+        try {
+          const resolvedRoute = router.resolve({ name: r.name || undefined, path: !r.name ? r.path : undefined });
+
+          if (resolvedRoute.matched.length > 0) {
+            resolvedComponent = resolvedRoute.matched[resolvedRoute.matched.length - 1]?.components?.default;
+          }
+
+          componentToCheck = resolvedComponent;
+          if (resolvedComponent && isVNode(resolvedComponent) && resolvedComponent.type) {
+            componentToCheck = resolvedComponent.type;
+          }
+        } catch (e) {
+          // Silently continue to next route if resolution fails
+          continue;
+        }
+
+        const comp = componentToCheck as BladeInstanceConstructor;
+
+        if (comp && comp.isBlade && typeof comp.url === "string") {
+          const compUrlNormalized = comp.url.startsWith("/") ? comp.url : `/${comp.url}`;
+          if (compUrlNormalized === segmentWithSlash) {
+            return comp;
+          }
+        }
+      }
+
+      const potentialNames = [segmentWithoutSlash];
+      if (segment && segment !== "/" && segment.includes("-")) potentialNames.push(segment);
+
+      for (const nameToTry of _.uniq(potentialNames.filter(Boolean))) {
+        const bladeByName = bladeRegistry.getBladeComponent(nameToTry);
+        if (bladeByName && bladeByName.isBlade && typeof bladeByName.url === "string") {
+          const bladeByNameUrlNormalized = bladeByName.url.startsWith("/") ? bladeByName.url : `/${bladeByName.url}`;
+          if (bladeByNameUrlNormalized === segmentWithSlash) {
+            return bladeByName;
+          }
+        }
+      }
+
+      const bladeByFullPath = bladeRegistry.getBlade(segmentWithSlash);
+      if (bladeByFullPath && bladeByFullPath.component && bladeByFullPath.component.isBlade) {
+        const componentUrlNormalized = bladeByFullPath.component.url?.startsWith("/")
+          ? bladeByFullPath.component.url
+          : `/${bladeByFullPath.component.url}`;
+        if (componentUrlNormalized === segmentWithSlash) {
+          return bladeByFullPath.component as BladeInstanceConstructor;
+        }
+      }
+
+      return undefined;
+    } catch (error) {
+      console.error("Error in findBladeComponentByUrlSegment:", error instanceof Error ? error.message : String(error));
+      return undefined;
+    }
+  }
+
+  async function routeResolver(to: RouteLocationNormalized): Promise<RouteLocationRaw | undefined> {
+    const { path: toPath, query: toQueryFromTo } = to;
+    let currentConstructedPath: string | undefined;
+    if (bladeState.activeWorkspace.value) {
+      currentConstructedPath = routerUtils.constructBladePath(
+        bladeState.activeWorkspace.value,
+        _.last(bladeState.blades.value) as BladeVNode | undefined,
+      );
+    }
+    const currentFullPath = currentConstructedPath
+      ? (routerUtils.mainRouteBaseParamURL.value &&
+        !currentConstructedPath.startsWith(routerUtils.mainRouteBaseParamURL.value)
+          ? routerUtils.mainRouteBaseParamURL.value
+          : "") + currentConstructedPath
+      : undefined;
+
+    if (
+      currentFullPath &&
+      decodeURIComponent(to.fullPath).startsWith(decodeURIComponent(currentFullPath)) &&
+      bladeState.blades.value.length > 0
+    ) {
+      const toPathDecoded = decodeURIComponent(to.path);
+      const currentPathDecoded = decodeURIComponent(currentFullPath);
+      const toSegments = toPathDecoded.split("/").filter(Boolean);
+      const currentSegments = currentPathDecoded.split("/").filter(Boolean);
+
+      if (toPathDecoded.startsWith(currentPathDecoded) && toSegments.length === currentSegments.length) {
+        const targetRoute = routerUtils.allRoutes.find((r) => r.name === to.name);
+        if (
+          targetRoute &&
+          bladeState.activeWorkspace.value &&
+          targetRoute.components?.default === bladeState.activeWorkspace.value.type
+        ) {
+          return undefined;
+        }
+      }
+    }
+
+    const parsedUrl = routerUtils.parseUrlParams(to.path, to.params);
+
+    if (!parsedUrl || !parsedUrl.workspace) {
+      const rootRoute = routerUtils.goToRoot();
+      if (typeof rootRoute === "object" && rootRoute.name && rootRoute.name === to.name) {
+        return undefined;
+      }
+      return rootRoute;
+    }
+
+    const workspaceSegment = parsedUrl.workspace;
+    const bladeSegment = parsedUrl.blade;
+    const paramSegment = parsedUrl.param;
+
+    const workspaceComponent = findBladeComponentByUrlSegment(workspaceSegment);
+
+    if (!isComponentRoutable(workspaceComponent)) {
+      await bladeState.removeBladesStartingFrom(0);
+      bladeState.clearActiveWorkspaceState();
+      return routerUtils.goToRoot();
+    }
+
+    if (!workspaceComponent || !workspaceComponent.isWorkspace) {
+      const rootRoute = routerUtils.goToRoot();
+      if (typeof rootRoute === "object" && rootRoute.name && rootRoute.name === to.name) {
+        return undefined;
+      }
+      return rootRoute;
+    }
+
+    if (!hasAccess(workspaceComponent.permissions)) {
+      return routerUtils.goToRoot();
+    }
+
+    // Determine the parameter to pass to the workspace.
+    // It depends on whether a bladeSegment exists and if that blade shares its param with the parent.
+    let paramForWorkspace: string | undefined = undefined;
+    if (bladeSegment) {
+      const childBladeComponent = findBladeComponentByUrlSegment(bladeSegment);
+      // Check if workspace and child blade are from the same module using moduleUid
+      // and if the child blade is routable
+      if (
+        workspaceComponent &&
+        childBladeComponent &&
+        isComponentRoutable(childBladeComponent) &&
+        Object.prototype.hasOwnProperty.call(workspaceComponent, "moduleUid") &&
+        Object.prototype.hasOwnProperty.call(childBladeComponent, "moduleUid") &&
+        (workspaceComponent as BladeInstanceConstructor & { moduleUid?: string }).moduleUid ===
+          (childBladeComponent as BladeInstanceConstructor & { moduleUid?: string }).moduleUid
+      ) {
+        paramForWorkspace = paramSegment;
+      } else {
+        paramForWorkspace = undefined; // Default: child blade exists, its param is not for the workspace
+      }
+    } else {
+      paramForWorkspace = paramSegment; // No child blade segment, workspace gets the param from URL if present
+    }
+
+    const openWorkspaceResult = await bladeActions.openWorkspace(
+      {
+        blade: ensureBladeComponent(workspaceComponent),
+        param: paramForWorkspace,
+      },
+      to.query,
+      to.params,
+      true,
+    );
+
+    if (openWorkspaceResult && "redirectedFrom" in openWorkspaceResult) {
+      return undefined;
+    }
+
+    let lastOpenedBladeComponent = workspaceComponent;
+    let effectiveBladeSegment = bladeSegment;
+
+    if (effectiveBladeSegment) {
+      const bladeComponent = findBladeComponentByUrlSegment(effectiveBladeSegment);
+
+      if (!isComponentRoutable(bladeComponent)) {
+        effectiveBladeSegment = undefined;
+      }
+
+      if (effectiveBladeSegment && bladeComponent && bladeComponent.isBlade) {
+        if (!hasAccess(bladeComponent.permissions)) {
+          // No access to blade, workspace remains open
+        } else {
+          await bladeActions.openBlade({
+            blade: ensureBladeComponent(bladeComponent),
+            param: paramSegment,
+          });
+          lastOpenedBladeComponent = bladeComponent;
+        }
+      }
+    }
+
+    if (lastOpenedBladeComponent.name && String(lastOpenedBladeComponent.name) === String(to.name)) {
+      return undefined;
+    }
+
+    const finalTargetRoute = routerUtils.allRoutes.find((r) => String(r.name) === String(to.name));
+    if (finalTargetRoute && bladeState.blades.value.some((b) => b.type === finalTargetRoute.components?.default)) {
+      return undefined;
+    }
+
+    return undefined;
+  }
+  return routeResolver;
+}

package/shared/components/blade-navigation/composables/useBladeNavigation/internal/bladeState.ts

@@ -0,0 +1,93 @@
+import { computed, shallowRef, Ref, toValue } from "vue";
+import type { Router } from "vue-router";
+import type { BladeVNode } from "../../../types";
+
+// --- Blade State Management Module ---
+export function _createBladeStateManagement(router: Router) {
+  const blades: Ref<BladeVNode[]> = shallowRef<BladeVNode[]>([]);
+  const activeWorkspace: Ref<BladeVNode | undefined> = shallowRef<BladeVNode | undefined>();
+
+  async function removeBladesStartingFrom(startIndex: number): Promise<boolean> {
+    if (blades.value.length === 0 || startIndex < 0) {
+      return false;
+    }
+
+    try {
+      const bladesToClose = blades.value.slice(startIndex).reverse();
+      let isPrevented = false;
+
+      for (const blade of bladesToClose) {
+        if (blade.props?.navigation?.onBeforeClose) {
+          const result = await blade.props.navigation.onBeforeClose();
+          if (result === false) {
+            isPrevented = true;
+            break; // Stop further checks if one blade prevents closing
+          }
+        }
+      }
+
+      if (!isPrevented) {
+        const prevBlade = blades.value[startIndex - 1];
+
+        if (startIndex > 0 && prevBlade?.props?.navigation?.isVisible === false) {
+          prevBlade.props.navigation.isVisible = true;
+        }
+
+        // Clear param of table blade when closing child blade to prevent table row selection from being preserved
+        if (
+          prevBlade &&
+          prevBlade.props?.navigation?.idx === 0 && // Is a workspace or first blade
+          toValue(prevBlade.props?.param) === toValue(blades.value[startIndex]?.props?.param)
+        ) {
+          prevBlade.props.param = undefined;
+        }
+
+        blades.value.splice(startIndex);
+        blades.value = [...blades.value]; // Trigger reactivity for watchers
+      }
+      return isPrevented;
+    } finally {
+      // Cleanup completed
+    }
+  }
+
+  function addBlade(bladeNode: BladeVNode): void {
+    blades.value.push(bladeNode);
+    blades.value = [...blades.value];
+  }
+
+  function replaceAllBlades(newBlades: BladeVNode[]): void {
+    blades.value = newBlades;
+  }
+
+  function setActiveWorkspaceBlade(workspaceBlade?: BladeVNode): void {
+    if (workspaceBlade && workspaceBlade.props?.navigation) {
+      workspaceBlade.props.navigation.idx = 0;
+    }
+    activeWorkspace.value = workspaceBlade;
+    if (workspaceBlade) {
+      blades.value = [workspaceBlade];
+      // Ensure subsequent blades are closed if workspace changes directly
+      removeBladesStartingFrom(1);
+    } else {
+      blades.value = [];
+    }
+  }
+
+  function clearActiveWorkspaceState(): void {
+    activeWorkspace.value = undefined;
+    blades.value = [];
+  }
+
+  return {
+    blades: computed(() => blades.value), // Expose as computed for readonly reactive access outside
+    _bladesRef: blades, // Internal ref for mutation
+    activeWorkspace: computed(() => activeWorkspace.value),
+    _activeWorkspaceRef: activeWorkspace,
+    removeBladesStartingFrom,
+    addBlade,
+    replaceAllBlades,
+    setActiveWorkspaceBlade,
+    clearActiveWorkspaceState,
+  };
+}

package/shared/components/blade-navigation/composables/useBladeNavigation/internal/bladeWatchers.ts

@@ -0,0 +1,90 @@
+import { watch, isVNode } from "vue";
+import { watchDebounced } from "@vueuse/core";
+import * as _ from "lodash-es";
+import { RouteLocationNormalized, Router } from "vue-router";
+import { useAppInsights } from "../../../../../../core/composables";
+import type { BladeVNode } from "../../../types";
+import type { _createBladeStateManagement } from "./bladeState";
+import type { _createRouterUtils } from "./routerUtils";
+
+// --- Watchers Module ---
+export function _createBladeWatchers(
+  router: Router,
+  route: RouteLocationNormalized,
+  bladeState: ReturnType<typeof _createBladeStateManagement>,
+  routerUtils: ReturnType<typeof _createRouterUtils>,
+  setupPageTracking: ReturnType<typeof useAppInsights>["setupPageTracking"],
+) {
+  watch(
+    () => route.path,
+    async (newPath, oldPath) => {
+      const newWorkspaceUrlSegment = routerUtils.parseWorkspaceUrlPath(newPath);
+      const currentActiveWorkspaceUrl = bladeState.activeWorkspace.value?.type.url;
+
+      if (newWorkspaceUrlSegment && newWorkspaceUrlSegment !== currentActiveWorkspaceUrl) {
+        const wsRouteComponent =
+          routerUtils.getResolvedRouteComponent(newWorkspaceUrlSegment) ||
+          (router.resolve({ path: newWorkspaceUrlSegment }).matched?.[1]?.components?.default as BladeVNode);
+
+        if (wsRouteComponent && isVNode(wsRouteComponent) && wsRouteComponent.type.isBlade) {
+          const isPrevented = await bladeState.removeBladesStartingFrom(0);
+          if (!isPrevented) {
+            bladeState.setActiveWorkspaceBlade(wsRouteComponent);
+          } else {
+            if (oldPath && oldPath !== newPath) router.push({ path: oldPath });
+          }
+        } else {
+          const isPrevented = await bladeState.removeBladesStartingFrom(0);
+          if (!isPrevented) {
+            bladeState.clearActiveWorkspaceState();
+          } else {
+            if (oldPath && oldPath !== newPath) router.push({ path: oldPath });
+          }
+        }
+      } else if (!newWorkspaceUrlSegment && bladeState.activeWorkspace.value) {
+        const isPrevented = await bladeState.removeBladesStartingFrom(0);
+        if (!isPrevented) {
+          bladeState.clearActiveWorkspaceState();
+        } else {
+          if (oldPath && oldPath !== newPath) router.push({ path: oldPath });
+        }
+      }
+    },
+    { immediate: true },
+  );
+
+  watchDebounced(
+    bladeState.blades,
+    (newBlades) => {
+      const workspace = newBlades[0];
+      const lastBladeWithUrl = _.findLast(
+        newBlades,
+        (b: BladeVNode) => b && b.type.url && b.props?.navigation?.isVisible !== false,
+      );
+
+      if (workspace?.type?.url) {
+        const constructedPath = routerUtils.constructBladePath(workspace, lastBladeWithUrl as BladeVNode | undefined);
+        if (constructedPath) {
+          const query = routerUtils.getURLQuery();
+          const fullPath =
+            (routerUtils.mainRouteBaseParamURL.value &&
+            !constructedPath.startsWith(routerUtils.mainRouteBaseParamURL.value)
+              ? routerUtils.mainRouteBaseParamURL.value
+              : "") +
+            constructedPath +
+            (query.params ? "?" + query.params : "");
+
+          if (route.fullPath !== fullPath) {
+            router.options.history.replace(fullPath);
+            if (lastBladeWithUrl && (lastBladeWithUrl as BladeVNode).type.name) {
+              setupPageTracking.afterEach({ name: (lastBladeWithUrl as BladeVNode).type.name!, fullPath });
+            } else if (workspace.type.name) {
+              setupPageTracking.afterEach({ name: workspace.type.name, fullPath });
+            }
+          }
+        }
+      }
+    },
+    { deep: true, debounce: 10, flush: "post" },
+  );
+}