@vc-shell/framework 1.0.127 → 1.0.129

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

@@ -1,5 +1,6 @@
 <template>
   <VcBlade
+    v-if="!composables"
     v-loading="loading"
     :expanded="expanded"
     :closable="closable"
@@ -77,10 +78,21 @@ import {
 } from "vue";
 import { DynamicDetailsSchema, FormContentSchema, SettingsSchema } from "../types";
 import { reactiveComputed, useMounted } from "@vueuse/core";
-import { DetailsBladeContext, DetailsBaseBladeScope, IParentCallArgs, UseDetails, usePopup } from "../../../index";
+import {
+  DetailsBladeContext,
+  DetailsBaseBladeScope,
+  IParentCallArgs,
+  UseDetails,
+  usePopup,
+  useBladeNavigation,
+} from "../../../index";
 import SchemaRender from "../components/SchemaRender";
 import { VcSelect } from "../../../../ui/components";
 import { toolbarReducer } from "../helpers/toolbarReducer";
+import { onBeforeRouteLeave } from "vue-router";
+import { useBeforeUnload } from "../../../../core/composables/useBeforeUnload";
+import * as _ from "lodash-es";
+import { IBladeToolbar } from "../../../../core/types";
 
 interface Props {
   expanded?: boolean;
@@ -105,19 +117,29 @@ const props = withDefaults(defineProps<Props>(), {
   closable: true,
 });
 
-defineOptions({
-  isBladeComponent: true,
-});
-
 const emit = defineEmits<Emits>();
 
 const { t } = useI18n({ useScope: "global" });
 
 const { showConfirmation } = usePopup();
 
-const { loading, item, validationState, scope, load, remove, saveChanges, bladeTitle } = props.composables?.[
-  props.model?.settings?.composable ?? ""
-]({ emit, props, mounted: useMounted() }) as UseDetails<Record<string, any>, DetailsBaseBladeScope>;
+const { currentBladeNavigationData } = useBladeNavigation();
+
+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>,
+      DetailsBaseBladeScope
+    >)
+  : ({
+      loading: true,
+      item: undefined,
+      validationState: undefined,
+      scope: undefined,
+      load: undefined,
+      remove: undefined,
+      saveChanges: undefined,
+      bladeTitle: undefined,
+    } as unknown as UseDetails<Record<string, any>, DetailsBaseBladeScope>);
 
 const title = ref();
 const isReady = ref(false);
@@ -125,19 +147,26 @@ const isReady = ref(false);
 const unwatchTitle = watch(
   () => bladeTitle?.value,
   (newVal) => {
-    if (newVal) {
+    if (newVal && props.composables) {
       title.value = newVal;
 
       nextTick(() => unwatchTitle());
     }
   },
-  { immediate: true }
+  { immediate: true },
+);
+
+useBeforeUnload(
+  computed(() => {
+    const toolBarSave = _.get(toValue(scope)?.toolbarOverrides, "saveChanges") as unknown as IBladeToolbar;
+    return !unref(toolBarSave && "disabled" in toolBarSave && toolBarSave.disabled) || validationState.value.validated;
+  }),
 );
 
 const settings = computed(() => props.model?.settings);
 
 const form = computed(
-  (): FormContentSchema => props.model?.content.find((x) => x?.component === "vc-form") as FormContentSchema
+  (): FormContentSchema => props.model?.content.find((x) => x?.component === "vc-form") as FormContentSchema,
 );
 
 const widgets = computed(() => props.model?.content.find((x) => x?.component === "vc-widgets"));
@@ -201,48 +230,69 @@ const bladeOptions = reactive({
   status: bladeStatus,
 });
 
-const toolbarComputed = toolbarReducer({
-  defaultToolbarSchema: settings.value?.toolbar ?? [],
-  defaultToolbarBindings: {
-    saveChanges: {
-      async clickHandler() {
-        if (item.value) {
-          await saveChanges(item.value);
-
-          emit("parent:call", {
-            method: "reload",
-          });
-          if (!props.param) {
-            emit("close:blade");
-          }
-        }
-      },
-      disabled: computed(() => !validationState.value.validated),
-    },
-    remove: {
-      async clickHandler() {
-        if (
-          await showConfirmation(
-            computed(() => t(`${settings.value?.localizationPrefix.trim().toUpperCase()}.PAGES.DETAILS.ALERTS.DELETE`))
-          )
-        ) {
-          if (props.param) {
-            await remove?.({ id: props.param });
+const toolbarComputed =
+  props.composables &&
+  toolbarReducer({
+    defaultToolbarSchema: settings.value?.toolbar ?? [],
+    defaultToolbarBindings: {
+      saveChanges: {
+        async clickHandler() {
+          if (item.value) {
+            await saveChanges(item.value);
+
             emit("parent:call", {
               method: "reload",
             });
-            emit("close:blade");
+            if (!props.param) {
+              emit("close:blade");
+            }
+          }
+        },
+        // TODO validate fields without validation
+        disabled: computed(() => !validationState.value.validated),
+      },
+      remove: {
+        async clickHandler() {
+          if (
+            await showConfirmation(
+              computed(() => t(`${settings.value?.localizationPrefix.trim().toUpperCase()}.PAGES.ALERTS.DELETE`)),
+            )
+          ) {
+            if (props.param) {
+              await remove?.({ id: props.param });
+              emit("parent:call", {
+                method: "reload",
+              });
+              emit("close:blade");
+            }
           }
-        }
+        },
+        disabled: computed(() => toValue(scope)?.disabled),
       },
-      disabled: computed(() => toValue(scope)?.disabled),
     },
-  },
-  customToolbarConfig: toValue(scope)?.toolbarOverrides,
-  context: bladeContext.value,
-});
+    customToolbarConfig: toValue(scope)?.toolbarOverrides,
+    context: bladeContext.value,
+  });
 
 onBeforeMount(async () => {
+  if (props.composables) await init();
+});
+
+onBeforeRouteLeave(async (to, from) => {
+  if (
+    currentBladeNavigationData.value?.fullPath &&
+    !to.path.includes(currentBladeNavigationData.value?.fullPath) &&
+    validationState.value.modified
+  ) {
+    return await showConfirmation(
+      unref(
+        computed(() => t(`${settings.value?.localizationPrefix.trim().toUpperCase()}.PAGES.ALERTS.CLOSE_CONFIRMATION`)),
+      ),
+    );
+  }
+});
+
+async function init() {
   if (props.param) {
     await load({ id: props.param });
   }
@@ -250,21 +300,10 @@ onBeforeMount(async () => {
   await nextTick(() => {
     isReady.value = true;
   });
-});
-
-async function onBeforeClose() {
-  if (validationState.value.modified) {
-    return await showConfirmation(
-      unref(
-        computed(() => t(`${settings.value?.localizationPrefix.trim().toUpperCase()}.PAGES.ALERTS.CLOSE_CONFIRMATION`))
-      )
-    );
-  }
 }
 
 defineExpose({
-  title: bladeTitle,
-  onBeforeClose,
+  title: bladeTitle ?? "",
   ...scope?.value,
 });
 </script>

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

@@ -1,6 +1,7 @@
 <template>
   <component
     :is="isWidgetView ? 'template' : 'VcBlade'"
+    v-if="!composables"
     :expanded="expanded"
     :closable="closable"
     width="50%"
@@ -27,9 +28,9 @@
         class="tw-grow tw-basis-0"
         :loading="loading"
         :expanded="expanded"
-        :columns="(tableData?.columns as ITableColumns[])"
-        :state-key="stateKey"
-        :items="(itemsProxy as Record<string, any>[])"
+        :columns="(tableData?.columns as ITableColumns[]) ?? []"
+        :state-key="stateKey ?? ''"
+        :items="itemsProxy as Record<string, any>[]"
         :multiselect="isWidgetView ? false : tableData?.multiselect"
         :header="isWidgetView ? false : tableData?.header"
         :footer="!isWidgetView"
@@ -61,7 +62,7 @@
 
         <!-- Not found template -->
         <template #notfound>
-          <template v-if="bladeOptions.notFound">
+          <template v-if="bladeOptions?.notFound">
             <component
               :is="bladeOptions.notFound"
               @reset="resetSearch"
@@ -83,9 +84,12 @@
 
         <!-- Empty template -->
         <template #empty>
-          <template v-if="bladeOptions.empty">
+          <template v-if="bladeOptions?.empty">
             <component
               :is="bladeOptions.empty"
+              :class="{
+                'tw-py-6': isWidgetView,
+              }"
               @add="openDetailsBlade"
             ></component>
           </template>
@@ -113,7 +117,7 @@
         <!-- Override table mobile view -->
 
         <template
-          v-if="bladeOptions.mobileView"
+          v-if="bladeOptions?.mobileView"
           #mobile-item="itemData"
         >
           <component
@@ -129,7 +133,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   Ref,
-  VNode,
   computed,
   inject,
   onMounted,
@@ -144,6 +147,7 @@ import {
   ShallowRef,
   ConcreteComponent,
   ComputedRef,
+  onBeforeMount,
 } from "vue";
 import { useI18n } from "vue-i18n";
 import { DynamicGridSchema, ListContentSchema, SettingsSchema } from "../types";
@@ -189,20 +193,16 @@ const { debounce } = useFunctions();
 
 const emit = defineEmits<Emits>();
 
-defineOptions({
-  isBladeComponent: true,
-});
-
 const settings = computed(() => props.model?.settings);
 const title = computed(() => settings.value?.titleTemplate);
 const allSelected = ref(false);
 const searchValue = ref();
-const selectedItemId = ref();
-const sort = ref("createdDate:DESC");
-const selectedIds = ref<string[]>([]);
+const selectedItemId = shallowRef();
+const sort = shallowRef("createdDate:DESC");
+const selectedIds = shallowRef<string[]>([]);
 const isDesktop = inject("isDesktop") as Ref<boolean>;
 const itemsProxy = ref<Record<string, any>[]>();
-const modified = ref(false);
+const modified = shallowRef(false);
 
 const { moduleNotifications, markAsRead } = useNotifications(settings.value?.pushNotificationType);
 
@@ -210,7 +210,7 @@ watch(
   moduleNotifications,
   (newVal) => {
     newVal.forEach((message) => {
-      if (message.title) {
+      if (message.title && props.composables) {
         notification.success(message.title, {
           onClose() {
             markAsRead(message);
@@ -219,24 +219,67 @@ watch(
       }
     });
   },
-  { deep: true }
+  { deep: true },
 );
 
-const tableData = computed(() => props.model?.content.find((type: ListContentSchema) => type.component === "vc-table"));
-const stateKey = computed(() => {
-  if (tableData.value?.id) {
-    return tableData.value?.id + props.isWidgetView ? "_dashboard" : "";
-  }
+const tableData =
+  props.composables &&
+  computed(() => props.model?.content.find((type: ListContentSchema) => type.component === "vc-table"));
+const stateKey =
+  props.composables &&
+  computed(() => {
+    if (tableData?.value?.id) {
+      return tableData.value?.id + props.isWidgetView ? "_dashboard" : "";
+    }
 
-  throw new Error('Table id is not defined. Please provide "id" property in table schema');
-});
-const table = computed(() => {
-  const tableScope = {
-    columns: tableData.value?.columns,
-  };
+    throw new Error('Table id is not defined. Please provide "id" property in table schema');
+  });
 
-  return tableScope;
-});
+const { load, remove, items, loading, pagination, query, scope } = props.composables
+  ? (props.composables?.[props.model?.settings?.composable ?? ""]({
+      emit,
+      props,
+      mounted: useMounted(),
+    }) as UseList<Record<string, any>[], Record<string, any>, ListBaseBladeScope>)
+  : ({
+      load: ref(true),
+      remove: undefined,
+      items: undefined,
+      loading: undefined,
+      pagination: undefined,
+      query: undefined,
+      scope: undefined,
+    } as unknown as UseList<Record<string, any>[], Record<string, any>, ListBaseBladeScope>);
+
+if (props.isWidgetView) {
+  query.value.take = 5;
+}
+
+const calculateColumns = (columns: ListContentSchema["columns"]) => {
+  const result = columns?.map((column) => {
+    if (typeof column.visible !== "boolean" && column.visible?.method) {
+      const result =
+        typeof scope?.value[column.visible?.method] === "function"
+          ? scope?.value[column.visible?.method]()
+          : scope?.value[column.visible?.method];
+
+      column.visible = result;
+    }
+    return column;
+  });
+
+  return result;
+};
+
+const table =
+  props.composables &&
+  computed(() => {
+    const tableScope = {
+      columns: calculateColumns(tableData?.value?.columns),
+    };
+
+    return tableScope;
+  });
 
 const bladeOptions = reactive({
   tableData,
@@ -247,18 +290,6 @@ const bladeOptions = reactive({
   empty: resolveTemplateComponent("emptyTemplate"),
 });
 
-const { load, remove, items, loading, pagination, query, scope } = props.composables?.[
-  props.model?.settings?.composable ?? ""
-]({
-  emit,
-  props,
-  mounted: useMounted(),
-}) as UseList<Record<string, any>[], Record<string, any>, ListBaseBladeScope>;
-
-if (props.isWidgetView) {
-  query.value.take = 5;
-}
-
 const {
   filterComponent,
   activeFilterCount,
@@ -282,67 +313,53 @@ const bladeContext = ref<ListBladeContext>({
   settings: settings as ComputedRef<SettingsSchema>,
 });
 
-const toolbarComputed = toolbarReducer({
-  defaultToolbarSchema: settings.value?.toolbar ?? [],
-  defaultToolbarBindings: {
-    save: {
-      clickHandler() {
-        emit("close:blade");
+const toolbarComputed =
+  props.composables &&
+  toolbarReducer({
+    defaultToolbarSchema: settings.value?.toolbar ?? [],
+    defaultToolbarBindings: {
+      save: {
+        clickHandler() {
+          emit("close:blade");
+        },
+        disabled: computed(() => !modified.value),
       },
-      disabled: computed(() => !modified.value),
-    },
-    openAddBlade: {
-      async clickHandler() {
-        if (
-          scope &&
-          "openDetailsBlade" in toValue(scope) &&
-          toValue(scope).openDetailsBlade &&
-          typeof toValue(scope).openDetailsBlade === "function"
-        ) {
-          toValue(scope).openDetailsBlade();
-        } else throw new Error("openDetailsBlade method is not defined in scope");
+      openAddBlade: {
+        async clickHandler() {
+          if (
+            scope &&
+            "openDetailsBlade" in toValue(scope) &&
+            toValue(scope).openDetailsBlade &&
+            typeof toValue(scope).openDetailsBlade === "function"
+          ) {
+            toValue(scope).openDetailsBlade();
+          } else throw new Error("openDetailsBlade method is not defined in scope");
+        },
       },
-    },
-    refresh: {
-      async clickHandler() {
-        await reload();
+      refresh: {
+        async clickHandler() {
+          await reload();
+        },
       },
-    },
-    removeItems: {
-      async clickHandler() {
-        removeItems();
+      removeItems: {
+        async clickHandler() {
+          removeItems();
+        },
+        disabled: computed(() => !selectedIds.value?.length),
+        isVisible: isDesktop.value,
       },
-      disabled: computed(() => !selectedIds.value?.length),
-      isVisible: isDesktop.value,
     },
-  },
-  customToolbarConfig: toValue(scope)?.toolbarOverrides,
-  context: bladeContext.value,
-});
-
-onMounted(async () => {
-  await load({ ...query.value, sort: sort.value });
-});
-
-watch(
-  () => itemsProxy.value,
-  (newVal) => {
-    modified.value = !_.isEqual(newVal, items.value);
-  },
-  { deep: true }
-);
-
-watch(sort, async (value) => {
-  await load({ ...query.value, sort: value });
-});
+    customToolbarConfig: toValue(scope)?.toolbarOverrides,
+    context: bladeContext.value,
+  });
 
-watch(items, (newVal) => {
-  itemsProxy.value = newVal;
+onBeforeMount(async () => {
+  if (props.composables) await load({ ...query.value, sort: sort.value });
 });
 
 watch(
   () => props.param,
-  (newVal) => {
+  async (newVal) => {
     if (newVal) {
       if (
         scope &&
@@ -350,7 +367,7 @@ watch(
         toValue(scope).openDetailsBlade &&
         typeof toValue(scope).openDetailsBlade === "function"
       ) {
-        toValue(scope).openDetailsBlade({
+        await toValue(scope).openDetailsBlade({
           param: newVal,
           onOpen() {
             selectedItemId.value = newVal;
@@ -362,10 +379,26 @@ watch(
       }
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
-const openDetailsBlade = () => {
+watch(
+  () => itemsProxy.value,
+  (newVal) => {
+    modified.value = !_.isEqual(newVal, items.value);
+  },
+  { deep: true },
+);
+
+watch(sort, async (value) => {
+  await load({ ...query.value, sort: value });
+});
+
+watch(items, (newVal) => {
+  itemsProxy.value = newVal;
+});
+
+const openDetailsBlade = async () => {
   if (!props.isWidgetView) {
     if (
       scope &&
@@ -373,7 +406,7 @@ const openDetailsBlade = () => {
       toValue(scope).openDetailsBlade &&
       typeof toValue(scope).openDetailsBlade === "function"
     ) {
-      toValue(scope).openDetailsBlade();
+      await toValue(scope).openDetailsBlade();
     }
   } else {
     emit("add");
@@ -420,10 +453,10 @@ async function removeItems() {
               `${settings.value?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.DELETE_SELECTED_CONFIRMATION.ALL`,
               {
                 totalCount: pagination.value.totalCount,
-              }
+              },
             )
           : selectedIds.value.length,
-      })
+      }),
     )
   ) {
     emit("close:children");
@@ -509,27 +542,30 @@ async function resetSearch() {
 
 function templateOverrideComponents(): Record<string, ShallowRef<ConcreteComponent>> {
   return {
-    ...table.value.columns?.reduce((acc, curr) => {
-      if ("customTemplate" in curr && curr.customTemplate) {
-        if (!("component" in curr.customTemplate)) {
-          throw new Error(
-            `Component name must be provided in 'customTemplate' property, column: ${JSON.stringify(curr)}`
-          );
-        } else if ("component" in curr.customTemplate && curr.customTemplate.component) {
-          const component = resolveComponent(curr.customTemplate.component);
-
-          if (typeof component !== "string") {
-            acc[curr.id] = shallowRef(component);
+    ...table?.value.columns?.reduce(
+      (acc, curr) => {
+        if ("customTemplate" in curr && curr.customTemplate) {
+          if (!("component" in curr.customTemplate)) {
+            throw new Error(
+              `Component name must be provided in 'customTemplate' property, column: ${JSON.stringify(curr)}`,
+            );
+          } else if ("component" in curr.customTemplate && curr.customTemplate.component) {
+            const component = resolveComponent(curr.customTemplate.component);
+
+            if (typeof component !== "string") {
+              acc[curr.id] = shallowRef(component);
+            }
           }
         }
-      }
-      return acc;
-    }, {} as Record<string, ShallowRef<ConcreteComponent>>),
+        return acc;
+      },
+      {} as Record<string, ShallowRef<ConcreteComponent>>,
+    ),
   };
 }
 
 function resolveTemplateComponent(name: keyof ListContentSchema) {
-  if (!tableData.value) return;
+  if (!tableData?.value) return;
   const value = tableData.value[name];
   if (value && typeof value === "object" && "component" in value) {
     const componentName = value.component;

package/shared/modules/dynamic/types/index.ts

@@ -10,6 +10,7 @@ import {
 } from "./../../../../ui/components";
 import { ITableColumns, IValidationRules } from "../../../../core/types";
 import type { ComponentProps } from "./../../../utilities/vueUtils";
+import { MenuItemConfig } from "../../../components/blade-navigation/types";
 
 export type KeysOfUnion<T> = T extends T ? keyof T : never;
 
@@ -106,6 +107,20 @@ export interface SettingsBase {
    * This option is used to determine which view should be the default view.
    */
   isWorkspace?: boolean;
+  /**
+   * Blade menu item
+   * @description If not set - blade will not be added to the menu
+   *
+   * @example
+   * {
+   *  title: "Products",
+   *  icon: "fas fa-box-open",
+   *  group: "Products",
+   * }
+   * @type {{title: string, icon: string, path: string/string}}
+   * @default undefined
+   */
+  menuItem?: MenuItemConfig;
 }
 
 export interface ListContentSchema {
@@ -114,13 +129,18 @@ export interface ListContentSchema {
   filter?: FilterSchema;
   multiselect?: boolean;
   header?: boolean;
-  columns?: (ITableColumns & {
+  columns?: (Omit<ITableColumns, "visible"> & {
     id: string;
     title: string;
     sortable?: boolean;
     alwaysVisible?: boolean;
     type?: string;
     customTemplate?: GridTemplateOverride;
+    visible?:
+      | boolean
+      | {
+          method: string;
+        };
   })[];
   reorderableRows?: boolean;
   mobileTemplate?: {
@@ -793,7 +813,7 @@ export interface OverridesUpsert extends OverridesReplace {
 export interface OverridesReplace {
   path: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: ControlSchema | SettingsSchema["toolbar"][number] | string | boolean;
+  value: ControlSchema | SettingsSchema["toolbar"][number] | SettingsSchema["menuItem"] | string | boolean;
   id: string;
 }