@vc-shell/framework 1.0.293 → 1.0.294

package/shared/modules/dynamic/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import * as pages from "./pages";
-import { App, Component, defineComponent } from "vue";
+import { App, Component, SetupContext, defineComponent } from "vue";
 import { DynamicSchema, OverridesSchema } from "./types";
 import * as _ from "lodash-es";
 import { handleOverrides } from "./helpers/override";
@@ -15,12 +15,17 @@ interface Registered {
   component: BladeInstanceConstructor;
   name: string;
   model: DynamicSchema;
+  composables: { [key: string]: (...args: any[]) => any };
 }
 
+const registeredModules: { [key: string]: Registered } = {};
+const installedBladeIds = new Set<string>();
+const registeredSchemas: { [key: string]: DynamicSchema } = {};
+
 const createAppModuleWrapper = (args: {
   bladeName: string;
   bladeComponent: BladeInstanceConstructor;
-  appModuleContent:
+  appModuleContent?:
     | {
         locales?: { [key: string]: object };
         notificationTemplates?: { [key: string]: Component };
@@ -37,31 +42,19 @@ const createAppModuleWrapper = (args: {
   );
 };
 
-const register = (
+const createBladeInstanceConstructor = (
+  bladeComponent: any,
+  bladeName: string,
+  json: DynamicSchema,
   args: {
-    app: App;
-    component: BladeInstanceConstructor;
-    composables: { [key: string]: (...args: any[]) => any };
-    json: DynamicSchema;
-    options?: { router: any };
     moduleUid: string;
+    composables?: { [key: string]: (...args: any[]) => any };
+    mixin?: ((...args: any[]) => any)[];
   },
-  appModuleContent:
-    | {
-        locales?: { [key: string]: object };
-        notificationTemplates?: { [key: string]: Component };
-        moduleComponents?: { [key: string]: Component };
-      }
-    | undefined,
-): Registered => {
-  const { app, component, json, options } = args;
-  const bladeComponent = _.cloneDeep(component);
-  let rawUrl: `/${string}`;
-
-  const bladeName = kebabToPascal(json.settings.id);
-
+  existingComposables?: { [key: string]: (...args: any[]) => any },
+) => {
   if (json.settings.url) {
-    rawUrl = json.settings.url as `/${string}`;
+    const rawUrl = json.settings.url as `/${string}`;
     bladeComponent.url = rawUrl;
   }
 
@@ -69,76 +62,180 @@ const register = (
     bladeComponent.permissions = json.settings.permissions;
   }
 
-  const BladeInstanceConstructor = defineComponent({
+  return defineComponent({
     ...bladeComponent,
     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) =>
+    composables: existingComposables ? { ...existingComposables, ...args.composables } : args.composables,
+    setup: (props: ComponentProps<typeof bladeComponent>, ctx: SetupContext) =>
       (bladeComponent?.setup &&
         bladeComponent.setup(
           reactiveComputed(() =>
             Object.assign({}, props, {
               model: json,
-              composables: args.composables,
+              composables: existingComposables ? { ...existingComposables, ...args.composables } : args.composables,
+              mixinFn: args.mixin?.length ? args.mixin : undefined,
             } as any),
           ),
           ctx,
         )) ??
       {},
   });
+};
+
+const register = (
+  args: {
+    app: App;
+    component: BladeInstanceConstructor;
+    composables: { [key: string]: (...args: any[]) => any };
+    mixin?: ((...args: any[]) => any)[];
+    json: DynamicSchema;
+    options?: { router: Router };
+    moduleUid: string;
+  },
+  appModuleContent?:
+    | {
+        locales?: { [key: string]: object };
+        notificationTemplates?: { [key: string]: Component };
+        moduleComponents?: { [key: string]: Component };
+      }
+    | undefined,
+): Registered => {
+  const { app, component, json, options } = args;
+  const bladeId = json.settings.id;
+  const bladeName = kebabToPascal(bladeId);
+
+  if (registeredModules[bladeName]) {
+    // Module already registered, updating it
+    updateBlade(bladeName, json, args, appModuleContent);
+    return registeredModules[bladeName];
+  }
+
+  const bladeComponent = _.cloneDeep(component);
+  const BladeInstanceConstructor = createBladeInstanceConstructor(bladeComponent, bladeName, json, args);
 
   const module = createAppModuleWrapper({
     bladeName,
-    bladeComponent: BladeInstanceConstructor,
+    bladeComponent: BladeInstanceConstructor as BladeInstanceConstructor,
     appModuleContent,
   });
 
   module.install(app, options);
 
-  return {
-    component: BladeInstanceConstructor,
+  const newModule: Registered = {
+    component: BladeInstanceConstructor as BladeInstanceConstructor,
     name: bladeName,
     model: json,
+    composables: args.composables,
   };
+
+  registeredModules[bladeName] = newModule;
+
+  return newModule;
 };
 
-const handleError = (errorKey: string, schema: { [key: string]: DynamicSchema }, text?: string) => {
+const handleError = (errorKey: string, schemas: { [key: string]: DynamicSchema }, text?: string) => {
   return console.error(
-    `Module initialization aborted. '${errorKey}' key not found in files: ${Object.keys(schema).join(
+    `Module initialization aborted. Key '${errorKey}' not found in schemas: ${Object.keys(schemas).join(
       ", ",
-    )}. '${errorKey}' key ${text}`,
+    )}. Key '${errorKey}' ${text}`,
   );
 };
 
-export const createDynamicAppModule = (args: {
-  schema: { [key: string]: DynamicSchema };
-  composables: { [key: string]: (...args: any[]) => any };
+const updateBlade = (
+  moduleName: string,
+  newSchema: DynamicSchema,
+  args: {
+    app: App;
+    component: BladeInstanceConstructor;
+    composables?: { [key: string]: (...args: any[]) => any };
+    mixin?: ((...args: any[]) => any)[];
+    json: DynamicSchema;
+    options?: { router: Router };
+    moduleUid: string;
+  },
+  appModuleContent?:
+    | {
+        locales?: { [key: string]: object };
+        notificationTemplates?: { [key: string]: Component };
+        moduleComponents?: { [key: string]: Component };
+      }
+    | undefined,
+) => {
+  const existingModule = registeredModules[moduleName];
+
+  if (existingModule) {
+    // Updating blade model
+    existingModule.model = newSchema;
+
+    // Updating blade component
+    const bladeComponent = _.cloneDeep(args.component);
+    const BladeInstanceConstructor = createBladeInstanceConstructor(
+      bladeComponent,
+      moduleName,
+      newSchema,
+      args,
+      existingModule.composables,
+    );
+
+    // Reinstall the blade with the updated component
+    const module = createAppModuleWrapper({
+      bladeName: moduleName,
+      bladeComponent: BladeInstanceConstructor as BladeInstanceConstructor,
+      appModuleContent,
+    });
+
+    module.install(args.app, args.options);
+
+    // Update registered blade with the new component
+    existingModule.component = BladeInstanceConstructor as BladeInstanceConstructor;
+  }
+};
+
+export function createDynamicAppModule(args: {
+  schema?: { [key: string]: DynamicSchema };
+  composables?: { [key: string]: (...args: any[]) => any };
+  mixin?: { [x: string]: ((...args: any[]) => any)[] };
   overrides?: OverridesSchema;
   moduleComponents?: { [key: string]: Component };
   locales?: { [key: string]: object };
   notificationTemplates?: { [key: string]: Component };
-}) => {
-  const moduleInitializer = _.findKey(args.schema, (o) => "isWorkspace" in o.settings && o.settings.isWorkspace);
-  const everyHasTemplate = _.every(Object.values(args.schema), (o) => o?.settings?.component);
-
-  if (!everyHasTemplate) handleError("component", args.schema, "must be included in 'settings' of every file");
-  if (!moduleInitializer)
-    handleError(
-      "isWorkspace",
-      args.schema,
-      "must be included in one of this files to initialize module workspace blade",
-    );
+}): {
+  install(
+    app: App<any>,
+    options?:
+      | {
+          router: Router;
+        }
+      | undefined,
+  ): void;
+} {
+  let schemaCopy: { [key: string]: DynamicSchema } = {};
 
-  let schemaCopy = _.cloneDeep({ ...args.schema });
+  if (args.schema && Object.keys(args.schema).length > 0) {
+    schemaCopy = _.cloneDeep({ ...args.schema });
+    // Save schemas in the global registry
+    Object.assign(registeredSchemas, schemaCopy);
+  } else {
+    // Use registered schemas if new ones are not provided
+    schemaCopy = _.cloneDeep({ ...registeredSchemas });
+  }
 
   if (args.overrides) {
     schemaCopy = handleOverrides(args.overrides, schemaCopy);
   }
 
+  // Validation
+  const moduleInitializer = _.findKey(schemaCopy, (o) => o.settings.isWorkspace);
+  const everyHasTemplate = _.every(Object.values(schemaCopy), (o) => o?.settings?.component);
+
+  if (!everyHasTemplate) handleError("component", schemaCopy, "must be included in 'settings' of each file");
+  if (!moduleInitializer)
+    handleError("isWorkspace", schemaCopy, "must be included in one of the files to initialize the module workspace");
+
   return {
     install(app: App, options: { router: Router }) {
       const bladePages = { ...pages };
@@ -147,27 +244,33 @@ export const createDynamicAppModule = (args: {
         notificationTemplates: args?.notificationTemplates,
         moduleComponents: args?.moduleComponents,
       };
+
       const moduleUid = _.uniqueId("module_");
-      Object.entries(schemaCopy).forEach(([, JsonSchema], index) => {
-        const blade = register(
-          {
-            app,
-            component: bladePages[JsonSchema.settings.component as keyof typeof bladePages] as BladeInstanceConstructor,
-            composables: { ...args.composables },
-            json: JsonSchema,
-            options,
-            moduleUid,
-          },
-          index === 0 ? appModuleContent : undefined,
-        );
-
-        if (!blade) {
+      Object.entries(schemaCopy).forEach(([key, JsonSchema], index) => {
+        const bladeId = JsonSchema.settings.id;
+        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,
+          json: JsonSchema,
+          options,
+          moduleUid,
+        };
+
+        if (installedBladeIds.has(bladeId)) {
+          // Blade already installed, updating it
+          updateBlade(kebabToPascal(bladeId), JsonSchema, registerArgs, index === 0 ? appModuleContent : undefined);
           return;
         }
+
+        installedBladeIds.add(bladeId);
+
+        register(registerArgs, index === 0 ? appModuleContent : undefined);
       });
     },
   };
-};
+}
 
 export * from "./factories";
 export * from "./types";

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

@@ -84,6 +84,7 @@ import {
   toRefs,
   provide,
   toRef,
+  type VNode,
 } from "vue";
 import { DynamicDetailsSchema, FormContentSchema, SettingsSchema } from "../types";
 import { reactiveComputed, refDefault, toReactive, useMounted, useTemplateRefsList } from "@vueuse/core";
@@ -98,12 +99,13 @@ import {
   DetailsBladeExposed,
 } from "../../../index";
 import SchemaRender from "../components/SchemaRender";
-import { VcSelect } from "../../../../ui/components";
+import { VcSelect, VcImage } from "../../../../ui/components";
 import { useToolbarReducer } from "../composables/useToolbarReducer";
 import { useBeforeUnload } from "../../../../core/composables/useBeforeUnload";
 import * as _ from "lodash-es";
-import { useNotifications } from "../../../../core/composables";
+import { useLanguages, useNotifications } from "../../../../core/composables";
 import { notification } from "../../../components";
+import { ComponentSlots } from "../../../utilities/vueUtils";
 
 interface Props {
   expanded?: boolean;
@@ -114,6 +116,7 @@ interface Props {
     [x: string]: unknown;
   };
   composables?: Record<string, (...args: any[]) => Record<string, any>>;
+  mixinFn?: ((...args: any[]) => any)[];
 }
 
 interface Emits {
@@ -133,13 +136,18 @@ const emit = defineEmits<Emits>();
 const { t } = useI18n({ useScope: "global" });
 
 const { showConfirmation } = usePopup();
+const { getFlag } = useLanguages();
 
 const widgetsRefs = useTemplateRefsList<{ el: HTMLDivElement; component: ConcreteComponent }>();
+const isMixinReady = ref(false);
 
 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
+
+const settings = computed(() => props.model?.settings);
+
+let { 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
@@ -155,12 +163,39 @@ const { loading, item, validationState, scope, load, remove, saveChanges, bladeT
       bladeTitle: undefined,
     } as unknown as UseDetails<Record<string, any>, DetailsBaseBladeScope>);
 
+if (props.mixinFn?.length) {
+  const mixinResults = props.mixinFn?.map((mixin) =>
+    mixin({ loading, item, validationState, scope, load, remove, saveChanges, bladeTitle }),
+  );
+
+  const mergedResults = mixinResults.reduce((acc, result) => {
+    return {
+      ...acc,
+      ...result,
+    };
+  }, {});
+
+  loading = mergedResults.loading ?? loading;
+  item = mergedResults.item ?? item;
+  validationState = mergedResults.validationState ?? validationState;
+  scope = mergedResults.scope ?? scope;
+  load = mergedResults.load ?? load;
+
+  remove = mergedResults.remove ?? remove;
+  saveChanges = mergedResults.saveChanges ?? saveChanges;
+  bladeTitle = mergedResults.bladeTitle ?? bladeTitle;
+
+  isMixinReady.value = true;
+} else {
+  isMixinReady.value = true;
+}
+
 const { onBeforeClose } = useBladeNavigation();
 const title = ref();
 const isReady = ref(false);
 const activeWidgetExposed = ref<CoreBladeExposed>();
 const isBladeEditable = computed(() => !toValue("disabled" in toValue(scope || {}) && toValue(scope || {}).disabled));
-const settings = computed(() => props.model?.settings);
+
 const unreffedScope = reactiveComputed(() => toValue(scope) ?? {});
 
 const { moduleNotifications, markAsRead } = useNotifications(settings.value?.pushNotificationType);
@@ -223,6 +258,26 @@ const bladeStatus = computed(() => {
   return null;
 });
 
+const localeOptions = ref();
+
+watch(
+  () => toValue(unreffedScope).multilanguage?.localesOptions,
+  (newVal) => {
+    localeOptions.value = newVal;
+  },
+  { immediate: true, deep: true },
+);
+
+watch(
+  () => localeOptions.value,
+  async (newVal) => {
+    for (const lang of newVal) {
+      lang.flag = await getFlag(lang.value);
+    }
+  },
+  { deep: true },
+);
+
 const bladeMultilanguage = reactiveComputed(() => {
   if (
     scope &&
@@ -232,19 +287,45 @@ const bladeMultilanguage = reactiveComputed(() => {
   ) {
     return {
       component: () => {
-        return h(VcSelect as Component, {
-          name: "currentLocale",
-          modelValue: toValue(unreffedScope).multilanguage?.currentLocale,
-          options: toValue(unreffedScope).multilanguage?.localesOptions,
-          optionValue: "value",
-          optionLabel: "label",
-          disabled: "disabled" in toValue(unreffedScope) && toValue(unreffedScope).disabled,
-          required: true,
-          clearable: false,
-          "onUpdate:modelValue": (e: string) => {
-            toValue(unreffedScope).multilanguage?.setLocale(e);
+        return h(
+          VcSelect as Component,
+          {
+            name: "currentLocale",
+            modelValue: toValue(unreffedScope).multilanguage?.currentLocale,
+            options: localeOptions.value,
+            optionValue: "value",
+            optionLabel: "label",
+            disabled: "disabled" in toValue(unreffedScope) && toValue(unreffedScope).disabled,
+            required: true,
+            clearable: false,
+            "onUpdate:modelValue": (e: string) => {
+              toValue(unreffedScope).multilanguage?.setLocale(e);
+            },
           },
-        });
+          ["selected-item", "option"].reduce(
+            (obj, slot) => {
+              obj[slot] = (
+                scope: Parameters<ComponentSlots<typeof VcSelect>["option"]>["0"] & {
+                  opt: { flag: string; label: string };
+                },
+              ) => {
+                return h("div", { class: "tw-flex tw-items-center tw-gap-2" }, [
+                  h(VcImage, { src: scope.opt.flag, class: "tw-w-6 tw-h-6", emptyIcon: "" }),
+                  h("span", { class: "tw-text-sm" }, scope.opt.label),
+                ]);
+              };
+              return obj;
+            },
+            {} as Record<
+              string,
+              (
+                scope: Parameters<ComponentSlots<typeof VcSelect>["option"]>["0"] & {
+                  opt: { flag: string; label: string };
+                },
+              ) => VNode
+            >,
+          ),
+        );
       },
       currentLocale: toValue(unreffedScope).multilanguage?.currentLocale,
     };
@@ -345,9 +426,7 @@ async function updateActiveWidgetCount() {
 }
 
 async function init() {
-  if (props.param && unref(props.param)) {
-    await load({ id: unref(props.param) });
-  }
+  await load({ id: unref(props.param) });
 
   await nextTick(() => {
     isReady.value = true;
@@ -355,7 +434,7 @@ async function init() {
 }
 
 onBeforeMount(async () => {
-  if (props.composables) await init();
+  if (props.composables && isMixinReady.value) await init();
 });
 
 onBeforeClose(async () => {

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

@@ -594,7 +594,7 @@ const onPaginationClick = async (page: number) => {
   }
 };
 
-const onHeaderClick = (item: ITableColumns) => {
+const onHeaderClick = (item: Partial<ITableColumns>) => {
   const sortOptions = ["DESC", "ASC", ""];
 
   if (item.sortable) {

package/shared/pages/LoginPage/components/login/Login.vue

@@ -78,22 +78,8 @@
           <!-- TODO add to localization -->
           OR
         </div>
-        <div class="vc-login-page__external-buttons">
-          <VcButton
-            v-for="external in loginProviders"
-            :key="external.authenticationType"
-            outline
-            @click="externalSignOn(external.authenticationType ?? '')"
-          >
-            <div class="vc-login-page__external-button-content">
-              <img
-                :src="externalAuthIcon(external.authenticationType ?? '')"
-                :alt="external.authenticationType"
-                class="vc-login-page__external-icon"
-              />{{ external.displayName }}
-            </div>
-          </VcButton>
-        </div>
+
+        <ExternalProviders :providers="loginProviders" />
       </div>
     </template>
     <template v-else>
@@ -181,9 +167,10 @@ import { useRouter } from "vue-router";
 import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
 import { useSettings, useUser } from "./../../../../../core/composables";
 import { RequestPasswordResult } from "./../../../../../core/types";
-import AzureAdIcon from "./../../../../../assets/img/AzureAd.svg";
 import { ExternalSignInProviderInfo, SignInResult } from "./../../../../../core/api/platform";
 import { useI18n } from "vue-i18n";
+import { default as ExternalProviders } from "./../../../../../shared/components/sign-in/external-providers.vue";
+import { useExternalProvider } from "./../../../../../shared/components/sign-in/useExternalProvider";
 
 type ForgotPasswordFunc = (args: { loginOrEmail: string }) => Promise<void>;
 
@@ -205,7 +192,9 @@ let useLogin;
 const signInResult = ref({ succeeded: true }) as Ref<SignInResult & { status?: number; error?: any }>;
 const requestPassResult = ref<RequestPasswordResult>({ succeeded: true });
 const forgotPasswordRequestSent = ref(false);
-const { signIn, loading, externalSignIn, getExternalLoginProviders, user } = useUser();
+const { signIn, loading, user } = useUser();
+const { getProviders } = useExternalProvider();
+
 const isLogin = ref(true);
 const isValid = useIsFormValid();
 const isDirty = useIsFormDirty();
@@ -224,14 +213,9 @@ if (props.composable && typeof props.composable === "function") {
 }
 
 onMounted(async () => {
-  loginProviders.value = await getExternalLoginProviders();
+  loginProviders.value = await getProviders();
 });
 
-const externalAuthIcon = (authenticationType: string) => {
-  if (authenticationType === "AzureAD") return AzureAdIcon;
-  else return;
-};
-
 const customization = computed(() => {
   return {
     logo: !customizationLoading.value ? uiSettings.value?.logo || props.logo : "",
@@ -305,10 +289,6 @@ const togglePassRequest = () => {
   }
 };
 
-const externalSignOn = async (authenticationType: string) => {
-  await externalSignIn(authenticationType, window.location.pathname);
-};
-
 console.debug("Init login-page");
 </script>
 
@@ -348,18 +328,6 @@ console.debug("Init login-page");
     @apply tw-flex tw-items-center tw-text-center tw-uppercase tw-text-[color:var(--login-separator-text)] before:tw-content-[''] before:tw-flex-1 before:tw-border-b before:tw-border-b-[color:var(--login-separator)] before:tw-mr-2 after:tw-content-[''] after:tw-flex-1 after:tw-border-b after:tw-border-b-[color:var(--login-separator)] after:tw-ml-2;
   }
 
-  &__external-buttons {
-    @apply tw-flex tw-justify-center tw-mt-4 tw-flex-wrap tw-gap-2;
-  }
-
-  &__external-button-content {
-    @apply tw-flex tw-flex-row tw-items-center;
-  }
-
-  &__external-icon {
-    @apply tw-h-5 tw-mr-2;
-  }
-
   &__error-hint {
     @apply tw-mt-3 tw-text-[color:var(--login-error)];
   }