@vc-shell/framework 1.0.191 → 1.0.193

package/shared/modules/dynamic/index.ts

@@ -44,6 +44,7 @@ const register = (
     composables: { [key: string]: (...args: any[]) => any };
     json: DynamicSchema;
     options?: { router: any };
+    moduleUid: string;
   },
   appModuleContent:
     | {
@@ -73,7 +74,9 @@ const register = (
     name: bladeName,
     isWorkspace: "isWorkspace" in json.settings && json.settings.isWorkspace,
     menuItem: ("menuItem" in json.settings && json.settings.menuItem) ?? undefined,
+    moduleUid: args.moduleUid,
     routable: json.settings.routable ?? true,
+    composables: args.composables,
     setup: (props: ComponentProps<typeof bladeComponent>, ctx) =>
       (bladeComponent?.setup &&
         bladeComponent.setup(
@@ -146,6 +149,7 @@ export const createDynamicAppModule = (args: {
         notificationTemplates: args?.notificationTemplates,
         moduleComponents: args?.moduleComponents,
       };
+      const moduleUid = _.uniqueId("module_");
       Object.entries(schemaCopy).forEach(([, JsonSchema], index) => {
         const blade = register(
           {
@@ -154,6 +158,7 @@ export const createDynamicAppModule = (args: {
             composables: { ...args.composables },
             json: JsonSchema,
             options,
+            moduleUid,
           },
           index === 0 ? appModuleContent : undefined,
         );

package/shared/modules/dynamic/pages/dynamic-blade-form.vue

@@ -97,7 +97,6 @@ import { VcSelect } from "../../../../ui/components";
 import { useToolbarReducer } from "../composables/useToolbarReducer";
 import { useBeforeUnload } from "../../../../core/composables/useBeforeUnload";
 import * as _ from "lodash-es";
-import { IBladeToolbar } from "../../../../core/types";
 import { useNotifications } from "../../../../core/composables";
 import { notification } from "../../../components";
 
@@ -132,6 +131,9 @@ const { showConfirmation } = usePopup();
 
 const widgetsRefs = useTemplateRefsList<{ el: HTMLDivElement; component: ConcreteComponent }>();
 
+if (typeof props.composables?.[props.model?.settings?.composable ?? ""] === "undefined") {
+  throw new Error(`Composable ( ${props.model?.settings?.composable} ) is not defined`);
+}
 const { loading, item, validationState, scope, load, remove, saveChanges, bladeTitle } = props.composables
   ? (props.composables?.[props.model?.settings?.composable ?? ""]({ emit, props, mounted: useMounted() }) as UseDetails<
       Record<string, any>,
@@ -147,6 +149,7 @@ const { loading, item, validationState, scope, load, remove, saveChanges, bladeT
       saveChanges: undefined,
       bladeTitle: undefined,
     } as unknown as UseDetails<Record<string, any>, DetailsBaseBladeScope>);
+
 const { onBeforeClose } = useBladeNavigation();
 const title = ref();
 const isReady = ref(false);

package/shared/modules/dynamic/pages/dynamic-blade-list.vue

@@ -169,11 +169,11 @@ import { useFilterBuilder, useTableTemplates } from "../composables";
 import { useFunctions, useNotifications } from "../../../../core/composables";
 import { IActionBuilderResult, ITableColumns } from "../../../../core/types";
 import { useToolbarReducer } from "../composables/useToolbarReducer";
-import { notification, usePopup } from "../../../components";
+import { notification, useBladeNavigation, usePopup } from "../../../components";
 import { ListBaseBladeScope, ListBladeContext, UseList } from "../factories/types";
 import { IParentCallArgs } from "../../../index";
 import * as _ from "lodash-es";
-import { reactiveComputed, toReactive, useMounted } from "@vueuse/core";
+import { toReactive, useMounted } from "@vueuse/core";
 import { safeIn } from "../helpers/safeIn";
 
 export interface Props {
@@ -219,6 +219,7 @@ const itemsProxy = ref<Record<string, any>[]>();
 const modified = shallowRef(false);
 
 const { moduleNotifications, markAsRead } = useNotifications(settings.value?.pushNotificationType);
+const { setNavigationQuery, getNavigationQuery } = useBladeNavigation();
 
 watch(
   moduleNotifications,
@@ -252,6 +253,10 @@ const stateKey =
     throw new Error('Table id is not defined. Please provide "id" property in table schema');
   });
 
+if (typeof props.composables?.[props.model?.settings?.composable ?? ""] === "undefined") {
+  throw new Error(`Composable ( ${props.model?.settings?.composable} ) is not defined`);
+}
+
 const { load, remove, items, loading, pagination, query, scope } = props.composables
   ? (props.composables?.[props.model?.settings?.composable ?? ""]({
       emit,
@@ -377,7 +382,7 @@ const toolbarComputed =
   [];
 
 onBeforeMount(async () => {
-  if (props.composables) await load({ sort: sort.value, ...query.value });
+  if (props.composables) await load({ sort: sort.value, ...query.value, ...getNavigationQuery() });
 });
 
 watch(
@@ -526,10 +531,12 @@ const onPaginationClick = async (page: number) => {
 
       return;
     }
-    await load({
+    const queryObj = {
       ...query.value,
       skip: (page - 1) * query.value.take,
-    });
+    };
+    setNavigationQuery(queryObj);
+    await load(queryObj);
   }
 };
 

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue

@@ -48,15 +48,15 @@
       :key="i"
     >
       <router-link
-        v-if="$hasAccess(nested.permissions!)"
-        :to="nested.url!"
+        v-if="$hasAccess(nested.permissions!) && nested.url"
+        :to="nested.url"
         custom
       >
         <div
           :key="i"
           :class="[
             {
-              'vc-app-menu-item__child-item_active': isActive(nested.url!),
+              'vc-app-menu-item__child-item_active': isActive(nested.url ?? ''),
             },
             'vc-app-menu-item__child-item',
           ]"
@@ -94,6 +94,7 @@ const emit = defineEmits<Emits>();
 
 const isOpened = ref(false);
 const route = useRoute();
+const params = Object.fromEntries(Object.entries(route.params).filter(([key]) => key !== "pathMatch"));
 
 watch(
   () => route.path,
@@ -114,16 +115,18 @@ function onMenuItemClick() {
 }
 
 const isActive = (url: string) => {
-  if (url) {
-    const splitted = url.split("/").filter((part) => part !== "");
-    const active = route.path.split("/").filter((part) => part !== "")[0] === splitted[0];
+  let path = route.path;
+  if (Object.values(params).length) {
+    path = path.replace(Object.values(params)[0] as string, "");
+  }
 
-    if (active && props.children?.length) {
-      isOpened.value = true;
-    }
+  const active = path.endsWith(url);
+
+  if (active && props.children?.length) {
+    isOpened.value = true;
+  }
 
-    return active;
-  } else return false;
+  return active;
 };
 </script>
 

package/ui/components/organisms/vc-app/vc-app.vue

@@ -167,7 +167,14 @@ const onMenuItemClick = function (item: MenuItem) {
       true,
     );
   } else if (!item.routeId && item.url) {
-    router.push(item.url);
+    const menuRoute = router.getRoutes().find((r) => {
+      return "/" + r.path.split("/").filter((part) => part !== "")[1] === item.url || r.path === item.url;
+    });
+    if (typeof menuRoute === "undefined") {
+      openRoot();
+    } else {
+      router.replace({ name: menuRoute?.name, params: route.params });
+    }
   }
 };
 

package/ui/components/organisms/vc-table/vc-table.vue

@@ -382,7 +382,7 @@
             </div>
             <VcButton
               v-if="notfound?.action"
-              @click="notfound.clickHandler"
+              @click="notfound?.clickHandler"
             >
               {{ notfound.action }}
             </VcButton>
@@ -402,7 +402,7 @@
             </div>
             <VcButton
               v-if="empty?.action"
-              @click="empty.clickHandler"
+              @click="empty?.clickHandler"
             >
               {{ empty.action }}
             </VcButton>