feat(dynamic): mixin in list

framework/core/composables/useMenuService/index.ts

@@ -83,7 +83,7 @@ function useMenuServiceFn(): MenuService {
 
     menuItems.value = constructedMenu.value
       .map(
-        (x, index): MenuItem => ({
+        (x): MenuItem => ({
           ...x,
           title: computed(() => t(x.title as string)),
           id: _.snakeCase(t(x.title as string)),

framework/shared/components/app-switcher/components/vc-app-switcher/vc-app-switcher.vue

@@ -62,7 +62,7 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, ref } from "vue";
+import { ref } from "vue";
 import { AppDescriptor } from "../../../../../core/api/platform";
 import { Sidebar } from "./../../../sidebar";
 

framework/shared/components/blade-navigation/composables/useBladeNavigation/index.ts

@@ -133,7 +133,7 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
     (instance !== null && inject<BladeNavigationPlugin>("bladeNavigationPlugin")) || bladeNavigationInstance;
   const router = navigationInstance?.router;
 
-  const { parseUrl, parseWorkspaceUrl, getURLQuery, routes } = utils(router);
+  const { parseUrl, parseWorkspaceUrl, getURLQuery } = utils(router);
 
   watch(
     () => route.path,

framework/shared/components/notifications/core/notification.ts

@@ -1,4 +1,4 @@
-import { mergeProps, h } from "vue";
+import { mergeProps } from "vue";
 import { Content, InternalNotificationOptions, NotificationOptions } from "../types";
 import { useContainer } from "../composables";
 

framework/shared/components/sidebar/sidebar.vue

@@ -50,7 +50,7 @@ export interface Emits {
 
 defineEmits<Emits>();
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   position: "right",
   render: "always",
 });

framework/shared/components/sign-in/useExternalProvider.ts

@@ -27,6 +27,7 @@ export const useExternalProvider = (): IUseExternalProvider => {
     return searchParams.get("returnUrl") || searchParams.get("ReturnUrl");
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   async function externalSignIn(authenticationType: string, oidcUrl: string) {
     try {
       const origin = window.location.origin;

framework/shared/modules/dynamic/components/fields/StatusField.ts

@@ -1,5 +1,5 @@
 import { useI18n } from "vue-i18n";
-import { Component, ExtractPropTypes, computed, h, onMounted, ref, unref, watch } from "vue";
+import { Component, ExtractPropTypes, computed, h, onMounted, ref, unref } from "vue";
 import componentProps from "./props";
 import { StatusSchema } from "../../types";
 import { StatusField } from "../factories";

framework/shared/modules/dynamic/components/fields/storybook/MultivalueField.stories.ts

@@ -3,7 +3,7 @@ import { MultivalueSchema } from "../../..";
 import { SchemaBaseArgTypes } from "./common/args";
 import { template, templateWithVisibilityToggle } from "./common/templates";
 import page from "./pages/DynamicRender";
-import { computed, defineComponent, reactive, ref, watch } from "vue";
+import { reactive, ref } from "vue";
 import { VcIcon } from "../../../../../../ui/components/atoms/vc-icon";
 
 const customTemplateComponent = {

framework/shared/modules/dynamic/components/fields/storybook/SelectField.stories.ts

@@ -277,7 +277,7 @@ export const WithAsyncOptions: StoryFn<SelectSchema> = (args) => ({
         mockedProperty: null,
       },
       scope: {
-        mockedOptionsArray: async (keyword?: string, skip = 0, ids?: string[]) =>
+        mockedOptionsArray: async () =>
           new Promise((resolve) => {
             setTimeout(() => {
               resolve({

framework/shared/modules/dynamic/factories/base/useDetailsFactory.ts

@@ -1,6 +1,6 @@
-import { ComputedRef, MaybeRef, Ref, computed, ref, watch } from "vue";
+import { ComputedRef, MaybeRef, computed, ref, watch } from "vue";
 import * as _ from "lodash-es";
-import { useForm, useIsFormDirty, useIsFormValid } from "vee-validate";
+import { useForm, useIsFormValid } from "vee-validate";
 import { useAsync, useLoading } from "../../../../../core/composables";
 import type { ItemId, IValidationState, UseDetails } from "../types";
 import { createUnrefFn } from "@vueuse/core";
@@ -31,12 +31,12 @@ export const useDetailsFactory = <Item extends { id?: string }>(factoryParams: U
       }
     });
 
-    const { loading: manageLoading, action: saveChanges } = useAsync<Item, Item | undefined>(async (item) => {
+    const { loading: manageLoading, action: saveChanges } = useAsync<Item, Item | undefined>(async (itemToSave) => {
       if (validationState.value.valid) {
-        const res = await factoryParams.saveChanges?.(item as Item);
+        const res = await factoryParams.saveChanges?.(itemToSave as Item);
         isModified.value = false;
 
-        const id = item?.id ?? res?.id;
+        const id = itemToSave?.id ?? res?.id;
 
         if (id) {
           await load({ id });

framework/shared/modules/dynamic/helpers/override.ts

@@ -20,7 +20,7 @@ export const handleOverrides = (overrides: OverridesSchema, schemaCopy: { [key:
 
 const upsertHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
   return Object.entries(schemaCopy).reduce(
-    (obj, [name, schema]) => {
+    (obj, [, schema]) => {
       const clonedSchema = _.cloneDeep(schema);
       overrides.upsert
         ?.filter((x) => clonedSchema.settings.id === x.id)
@@ -66,7 +66,17 @@ const upsertHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: D
             _.set(clonedSchema, currentPath, args.value);
           }
         });
-      obj[name] = clonedSchema;
+
+      const newId = clonedSchema.settings.id;
+
+      if (newId !== schema.settings.id) {
+        obj[newId] = clonedSchema;
+
+        obj[schema.settings.id] = schema;
+      } else {
+        obj[schema.settings.id] = clonedSchema;
+      }
+
       return obj;
     },
     {} as Record<string, DynamicSchema>,

framework/shared/modules/dynamic/index.ts

@@ -129,7 +129,7 @@ const register = (
     component: BladeInstanceConstructor as BladeInstanceConstructor,
     name: bladeName,
     model: json,
-    composables: args.composables,
+    composables: { ...args.composables },
   };
 
   registeredModules[bladeName] = newModule;
@@ -214,11 +214,15 @@ export function createDynamicAppModule(args: {
   ): void;
 } {
   let schemaCopy: { [key: string]: DynamicSchema } = {};
+  let composablesCopy: { [key: string]: (...args: any[]) => any } = args.composables ?? {};
 
   if (args.schema && Object.keys(args.schema).length > 0) {
-    schemaCopy = _.cloneDeep({ ...args.schema });
-    // Save schemas in the global registry
-    Object.assign(registeredSchemas, schemaCopy);
+    Object.entries(args.schema).forEach(([, schema]) => {
+      if (schema.settings && schema.settings.id) {
+        schemaCopy[schema.settings.id] = _.cloneDeep(schema);
+        registeredSchemas[schema.settings.id] = schemaCopy[schema.settings.id];
+      }
+    });
   } else {
     // Use registered schemas if new ones are not provided
     schemaCopy = _.cloneDeep({ ...registeredSchemas });
@@ -246,13 +250,26 @@ export function createDynamicAppModule(args: {
       };
 
       const moduleUid = _.uniqueId("module_");
-      Object.entries(schemaCopy).forEach(([key, JsonSchema], index) => {
+      Object.entries(schemaCopy).forEach(([, JsonSchema], index) => {
         const bladeId = JsonSchema.settings.id;
+        const mixin = args.mixin?.[JsonSchema.settings.id];
+
+        if (args.overrides) {
+          const idsOnOverridesUnique = [...new Set(args.overrides?.upsert?.map((x) => x.id))];
+
+          composablesCopy = {
+            ...composablesCopy,
+            ...Object.values(registeredModules).find((module) => {
+              return idsOnOverridesUnique.includes(module.name);
+            })?.composables,
+          };
+        }
+
         const registerArgs = {
           app,
           component: bladePages[JsonSchema.settings.component as keyof typeof bladePages] as BladeInstanceConstructor,
-          composables: { ...args.composables },
-          mixin: args.mixin?.[JsonSchema.settings.id] ? args.mixin[JsonSchema.settings.id] : undefined,
+          composables: { ...composablesCopy },
+          mixin,
           json: JsonSchema,
           options,
           moduleUid,

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

@@ -83,11 +83,10 @@ import {
   ConcreteComponent,
   toRefs,
   provide,
-  toRef,
   type VNode,
 } from "vue";
 import { DynamicDetailsSchema, FormContentSchema, SettingsSchema } from "../types";
-import { reactiveComputed, refDefault, toReactive, useMounted, useTemplateRefsList } from "@vueuse/core";
+import { reactiveComputed, toReactive, useMounted, useTemplateRefsList } from "@vueuse/core";
 import {
   DetailsBladeContext,
   DetailsBaseBladeScope,
@@ -96,7 +95,6 @@ import {
   usePopup,
   useBladeNavigation,
   CoreBladeExposed,
-  DetailsBladeExposed,
 } from "../../../index";
 import SchemaRender from "../components/SchemaRender";
 import { VcSelect, VcImage } from "../../../../ui/components";

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

@@ -176,9 +176,8 @@ import { useFunctions, useNotifications } from "../../../../core/composables";
 import { IActionBuilderResult, ITableColumns } from "../../../../core/types";
 import { useToolbarReducer } from "../composables/useToolbarReducer";
 import { notification, useBladeNavigation, usePopup } from "../../../components";
-import { ITableConfig, ListBaseBladeScope, ListBladeContext, UseList } from "../factories/types";
+import { ListBaseBladeScope, ListBladeContext, UseList } from "../factories/types";
 import { IParentCallArgs } from "../../../index";
-import * as _ from "lodash-es";
 import { reactiveComputed, toReactive, useMounted } from "@vueuse/core";
 import { safeIn } from "../helpers/safeIn";
 
@@ -190,6 +189,7 @@ export interface Props {
   model?: DynamicGridSchema;
   composables?: Record<string, (...args: any[]) => Record<string, any>>;
   isWidgetView?: boolean;
+  mixinFn?: ((...args: any[]) => any)[];
 }
 
 export interface Emits {
@@ -223,6 +223,7 @@ const selectedItemId = shallowRef();
 const sort = shallowRef();
 const selectedIds = shallowRef<string[]>([]);
 const itemsProxy = ref<Record<string, any>[]>();
+const isMixinReady = ref(false);
 
 const { moduleNotifications, markAsRead } = useNotifications(settings.value?.pushNotificationType);
 const { setNavigationQuery, getNavigationQuery } = useBladeNavigation();
@@ -266,7 +267,8 @@ if (typeof props.composables?.[props.model?.settings?.composable ?? ""] === "und
   throw new Error(`Composable ( ${props.model?.settings?.composable} ) is not defined`);
 }
 
-const { load, remove, items, loading, pagination, query, scope } = props.composables
+// eslint-disable-next-line prefer-const
+let { load, remove, items, loading, pagination, query, scope } = props.composables
   ? (props.composables?.[props.model?.settings?.composable ?? ""]({
       emit,
       props,
@@ -283,6 +285,32 @@ const { load, remove, items, loading, pagination, query, scope } = props.composa
       scope: undefined,
     } as unknown as UseList<Record<string, any>[], Record<string, any>, ListBaseBladeScope>);
 
+if (props.mixinFn?.length) {
+  console.log("props.mixinFn", props.mixinFn);
+  const mixinResults = props.mixinFn?.map((mixin) => mixin({ loading, items, scope, load, remove, query }));
+
+  const mergedResults = mixinResults.reduce((acc, result) => {
+    return {
+      ...acc,
+      ...result,
+    };
+  }, {});
+
+  console.log("mergedResults", mergedResults);
+
+  loading = mergedResults.loading ?? loading;
+  items = mergedResults.items ?? items;
+  scope = mergedResults.scope ?? scope;
+  load = mergedResults.load ?? load;
+  remove = mergedResults.remove ?? remove;
+  query = mergedResults.query ?? query;
+  // console.log('query', query, mergedResults.query)
+
+  isMixinReady.value = true;
+} else {
+  isMixinReady.value = true;
+}
+
 const isBladeEditable = computed(() =>
   "disabled" in toValue(scope || {}) ? !toValue(toValue(scope || {})?.disabled) : false,
 );
@@ -410,7 +438,7 @@ const toolbarComputed =
   [];
 
 onBeforeMount(async () => {
-  if (props.composables)
+  if (props.composables && isMixinReady.value)
     await load({
       sort: sort.value,
       ...query.value,

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

@@ -10,13 +10,11 @@ import {
   VcMultivalue,
   VcRating,
   VcStatus,
-  VcVideo,
   VcPagination,
 } from "./../../../../ui/components";
-import { IActionBuilderResult, ITableColumns, IValidationRules, MenuItemConfig } from "../../../../core/types";
+import { ITableColumns, IValidationRules, MenuItemConfig } from "../../../../core/types";
 import type { ComponentProps } from "./../../../utilities/vueUtils";
 import VcInputCurrency from "../../../../ui/components/molecules/vc-input-currency/vc-input-currency.vue";
-import { UnwrapRef } from "vue";
 
 export type KeysOfUnion<T> = T extends T ? keyof T : never;
 

framework/ui/components/atoms/vc-card/vc-card.stories.ts

@@ -1,7 +1,6 @@
-import type { Meta, StoryFn, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcCard } from ".";
 import { VcInput, VcCol, VcButton } from "./../../";
-import { h } from "vue";
 
 const VARIANT = ["default", "success", "danger"];
 

framework/ui/components/molecules/vc-input/vc-input.vue

@@ -511,10 +511,10 @@ function emitValue(val: string | number | Date | null) {
   emitValueFn = () => {
     if (mutatedModel.value !== val) {
       let value;
-      if (props.type === "number" && val !== null) {
-        value = parseFloat(val as string);
-      } else if (props.type === "integer" && val !== null) {
-        value = Math.trunc(parseInt(val as string));
+      if (props.type === "number" && val !== null && val !== undefined) {
+        value = val !== "" ? parseFloat(val as string) : null;
+      } else if (props.type === "integer" && val !== null && val !== undefined) {
+        value = val !== "" ? Math.trunc(parseInt(val as string)) : null;
       } else {
         value = val;
       }

framework/ui/components/molecules/vc-select/vc-select.stories.ts

@@ -132,7 +132,7 @@ export const AsyncOptions: StoryFn<typeof VcSelect> = (args) => ({
   components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
   setup() {
     const val = ref();
-    const getItems = async (keyword?: string, skip = 0, ids?: string[]) =>
+    const getItems = async () =>
       new Promise((resolve) => {
         setTimeout(() => {
           resolve({

framework/ui/components/organisms/vc-blade/vc-blade.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcBlade } from "./";
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 
 export default {
   title: "organisms/VcBlade",

framework/ui/components/organisms/vc-table/_internal/vc-table-base-header/vc-table-base-header.vue

@@ -77,8 +77,8 @@ export interface Emits {
   (event: "search:change", value: string): void;
 }
 
-const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
+defineProps<Props>();
+defineEmits<Emits>();
 </script>
 
 <style lang="scss">

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

@@ -575,7 +575,6 @@ const slots = useSlots();
 // template refs
 const reorderRef = ref<HTMLElement | null>();
 const tableRef = ref<HTMLElement | null>();
-const searchInput = ref<HTMLElement | null>();
 
 // event listeners
 let columnResizeListener: ((...args: any[]) => any) | null = null;