@vc-shell/framework 1.0.110 → 1.0.111

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

@@ -0,0 +1,70 @@
+import * as _ from "lodash-es";
+import { DynamicSchema, OverridesSchema, OverridesUpsert } from "../types";
+
+export const handleOverrides = (overrides, schemaCopy: { [key: string]: DynamicSchema }) => {
+  let schema = _.cloneDeep(schemaCopy);
+
+  // REMOVE
+  if (overrides.remove && overrides.remove.length > 0) {
+    schema = removeHelper(overrides, schema);
+  }
+
+  // UPSERT
+  if (overrides.upsert && overrides.upsert.length > 0) {
+    schema = upsertHelper(overrides, schema);
+  }
+
+  return schema;
+};
+
+const upsertHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
+  return Object.entries(schemaCopy).reduce((obj, [name, schema]) => {
+    const clonedSchema = _.cloneDeep(schema);
+    overrides.upsert
+      .filter((x) => clonedSchema.settings.id === x.id)
+      .forEach(
+        ({
+          index,
+          path,
+          value,
+          id: overrideId,
+        }: {
+          index: OverridesUpsert["index"];
+          path: OverridesUpsert["path"];
+          value: OverridesUpsert["value"];
+          id: OverridesUpsert["id"];
+        }) => {
+          const valueByPath = _.get(clonedSchema, path);
+          if (Array.isArray(valueByPath) && valueByPath.length && typeof value === "object") {
+            const findIndex = _.findIndex(valueByPath, { id: value.id });
+
+            const spliced = valueByPath /* @ts-ignore */
+              .toSpliced(findIndex >= 0 ? findIndex : index, findIndex >= 0 ? 1 : 0, value);
+            _.set(clonedSchema, path, spliced);
+          } else {
+            _.set(clonedSchema, path, value);
+          }
+        },
+        {}
+      );
+    obj[name] = clonedSchema;
+    return obj;
+  }, {});
+};
+
+const removeHelper = (overrides, schemaCopy: { [key: string]: DynamicSchema }) => {
+  return Object.entries(schemaCopy).reduce((obj, [name, schema]) => {
+    const clonedSchema = _.cloneDeep(schema);
+    overrides.remove
+      .filter((x) => clonedSchema.settings.id === x.id)
+      .forEach(({ path, id: overrideId }) => {
+        if (path) {
+          const parentPath = path.slice(0, path.lastIndexOf("["));
+          _.unset(clonedSchema, path);
+          _.update(clonedSchema, parentPath, _.compact);
+        }
+      }, {});
+    obj[name] = clonedSchema;
+    return obj;
+  }, {});
+};

package/shared/modules/dynamic/helpers/setters.ts

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as _ from "lodash-es";
+
+function setModel(args: {
+  property: string;
+  value: string | number | Record<string, any>;
+  option?: string;
+  context: Record<string, any>;
+}) {
+  const { property, value, option, context } = args;
+
+  _.set(context, property, option ? value[option] : value);
+}
+
+export { setModel };

package/shared/modules/dynamic/helpers/toolbarReducer.ts

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { IBladeToolbar } from "../../../../core/types";
+import * as _ from "lodash-es";
+import { UnwrapNestedRefs, computed, ref, ComputedRef } from "vue";
+import { SettingsBase } from "../types";
+import { BaseBladeScope, DetailsBladeContext, ListBladeContext } from "../factories/types";
+
+export const toolbarReducer = (args: {
+  defaultToolbarSchema: SettingsBase["toolbar"];
+  defaultToolbarBindings: BaseBladeScope["toolbarOverrides"];
+  customToolbarConfig: BaseBladeScope["toolbarOverrides"];
+  context: UnwrapNestedRefs<DetailsBladeContext> | UnwrapNestedRefs<ListBladeContext>;
+}): UnwrapNestedRefs<ComputedRef<IBladeToolbar[]>> => {
+  if (!args) return;
+  const toolbarMethodsMerge = _.merge(ref({}), ref(args.defaultToolbarBindings), ref(args.customToolbarConfig));
+  return computed(() =>
+    args.defaultToolbarSchema.reduce((acc, curr) => {
+      const toolbarItemCtx = toolbarMethodsMerge.value[curr.method];
+      if (toolbarItemCtx) {
+        const context =
+          typeof toolbarItemCtx === "function"
+            ? {
+                clickHandler: async () => await (toolbarItemCtx as (ctx: typeof args.context) => any)(args.context),
+              }
+            : {
+                ...toolbarItemCtx,
+                clickHandler() {
+                  return toolbarItemCtx.clickHandler.call(null, args.context);
+                },
+              };
+
+        acc.push({
+          ...curr,
+          ...context,
+        });
+      }
+
+      return acc;
+    }, [])
+  );
+};

package/shared/modules/dynamic/helpers/unrefNested.ts

@@ -0,0 +1,14 @@
+import { unref } from "vue";
+
+export function unrefNested<T>(field: T) {
+  const unreffedProps = {} as T;
+
+  if (field) {
+    Object.keys(field).forEach((key) => {
+      unreffedProps[key] = unref(field[key]);
+    });
+
+    return unreffedProps;
+  }
+  return field;
+}

package/shared/modules/dynamic/helpers/unwrapInterpolation.ts

@@ -0,0 +1,15 @@
+import { getModel } from "./getters";
+
+function unwrapInterpolation<T>(property: string, context: T) {
+  const pattern = /{(.*)}/g;
+
+  const match = property.match(pattern);
+
+  if (match !== null) {
+    return getModel(property.replace(/{|}/g, ""), context);
+  }
+
+  return property;
+}
+
+export { unwrapInterpolation };

package/shared/modules/dynamic/index.ts

@@ -0,0 +1,163 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as pages from "./pages";
+import { App, Component, DefineComponent, defineComponent } from "vue";
+import { DynamicSchema, OverridesSchema } from "./types";
+import * as _ from "lodash-es";
+import { handleOverrides } from "./helpers/override";
+import { reactiveComputed } from "@vueuse/core";
+import { kebabToPascal } from "../../../core/utilities";
+import { BladeConstructor } from "../../index";
+import { createAppModule } from "../../../core/plugins";
+import { BladeMenu, NavigationMenu } from "../../../core/types";
+
+interface Registered {
+  component: BladeConstructor;
+  name: string;
+  model: DynamicSchema;
+}
+
+const createAppModuleWrapper = (args: {
+  bladeName: string;
+  bladeComponent: BladeConstructor;
+  appModuleContent: {
+    locales?: { [key: string]: object };
+    notificationTemplates?: { [key: string]: Component };
+    moduleComponents?: { [key: string]: Component };
+  };
+}) => {
+  const { bladeName, bladeComponent, appModuleContent } = args;
+  return createAppModule(
+    { [bladeName]: bladeComponent },
+    appModuleContent?.locales,
+    appModuleContent?.notificationTemplates,
+    appModuleContent?.moduleComponents
+  );
+};
+
+const register = (
+  args: {
+    app: App;
+    component: BladeConstructor;
+    composables: { [key: string]: (...args: any[]) => any };
+    json: DynamicSchema;
+    options?: { router: any };
+  },
+  appModuleContent: {
+    locales?: { [key: string]: object };
+    notificationTemplates?: { [key: string]: Component };
+    moduleComponents?: { [key: string]: Component };
+  }
+): Registered => {
+  const { app, component, json, options } = args;
+  const bladeComponent = _.cloneDeep(component);
+  let rawUrl: `/${string}`;
+
+  const bladeName = kebabToPascal(json.settings.id);
+
+  if (json.settings.url) {
+    rawUrl = json.settings.url as `/${string}`;
+    bladeComponent.url = rawUrl;
+  }
+
+  if (json.settings.permissions) {
+    bladeComponent.permissions = json.settings.permissions;
+  }
+
+  const defineBladeComponent = defineComponent({
+    ...bladeComponent,
+    name: bladeName,
+    setup: (props, ctx) =>
+      (bladeComponent as DefineComponent).setup(
+        reactiveComputed(() => ({
+          ...props,
+          model: json,
+          composables: args.composables,
+        })),
+        reactiveComputed(() => ctx)
+      ),
+  });
+
+  const module = createAppModuleWrapper({
+    bladeName,
+    bladeComponent: defineBladeComponent,
+    appModuleContent,
+  });
+
+  module.install(app, options);
+
+  return {
+    component: defineBladeComponent,
+    name: bladeName,
+    model: json,
+  };
+};
+
+const handleError = (errorKey: string, schema: { [key: string]: DynamicSchema }, text?: string) => {
+  console.error(
+    `Module initialization aborted. '${errorKey}' key not found in files: ${Object.keys(schema).join(
+      ", "
+    )}. '${errorKey}' key ${text}`
+  );
+};
+
+export const createDynamicAppModule = <T extends BladeMenu>(args: {
+  schema: { [key: string]: DynamicSchema };
+  composables: { [key: string]: (...args: any[]) => any };
+  menuConfig?: { [I in keyof T]: NavigationMenu<T[I]> };
+  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"
+    );
+
+  if (moduleInitializer && everyHasTemplate) {
+    let schemaCopy = _.cloneDeep({ ...args.schema });
+
+    if (args.overrides) {
+      schemaCopy = handleOverrides(args.overrides, schemaCopy);
+    }
+
+    return {
+      install(app: App, options: { router: any }) {
+        const bladePages = { ...pages };
+        const appModuleContent = {
+          locales: args?.locales,
+          notificationTemplates: args?.notificationTemplates,
+          moduleComponents: args?.moduleComponents,
+        };
+        Object.entries(schemaCopy).forEach(([JsonName, JsonSchema], index) => {
+          const blade = register(
+            {
+              app,
+              component: bladePages[JsonSchema.settings.component],
+              composables: { ...args.composables },
+              json: JsonSchema,
+              options,
+            },
+            index === 0 ? appModuleContent : undefined
+          );
+
+          if (!blade) {
+            return;
+          }
+        });
+      },
+    };
+  }
+};
+
+export * from "./pages";
+export * from "./composables";
+export * from "./components";
+export * from "./factories";
+export * from "./types";

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

@@ -0,0 +1,292 @@
+<template>
+  <VcBlade
+    v-loading="loading"
+    :expanded="expanded"
+    :closable="closable"
+    width="50%"
+    :toolbar-items="toolbarComputed"
+    :title="title"
+    @close="$emit('close:blade')"
+    @expand="$emit('expand:blade')"
+    @collapse="$emit('collapse:blade')"
+  >
+    <template
+      v-if="bladeOptions"
+      #actions
+    >
+      <div class="tw-flex tw-flex-row tw-items-center tw-gap-3">
+        <template
+          v-for="(value, key, index) in bladeOptions"
+          :key="`blade-actions-slot-${key}-${index}`"
+        >
+          <component :is="value" />
+        </template>
+      </div>
+    </template>
+
+    <VcContainer :no-padding="true">
+      <div
+        v-if="isReady && item && Object.keys(item)"
+        class="item-details__inner"
+      >
+        <div class="item-details__content">
+          <VcForm class="tw-grow tw-p-4">
+            <SchemaRender
+              v-model="item"
+              :ui-schema="form.children"
+              :context="bladeContext"
+              :current-locale="scope.multilanguage?.currentLocale"
+            ></SchemaRender>
+          </VcForm>
+        </div>
+        <div
+          v-if="bladeWidgets && bladeWidgets.length"
+          class="item-details__widgets"
+        >
+          <div
+            v-for="(item, index) in bladeWidgets"
+            :key="index"
+          >
+            <component
+              :is="item"
+              v-model="bladeContext"
+            ></component>
+          </div>
+        </div>
+      </div>
+    </VcContainer>
+  </VcBlade>
+</template>
+
+<script lang="ts" setup>
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useI18n } from "vue-i18n";
+import {
+  computed,
+  h,
+  nextTick,
+  reactive,
+  ref,
+  resolveComponent,
+  toValue,
+  unref,
+  watch,
+  onBeforeMount,
+  UnwrapRef,
+} from "vue";
+import { DynamicDetailsSchema, FormContentSchema } from "../types";
+import { reactiveComputed } from "@vueuse/core";
+import * as _ from "lodash-es";
+import { IBladeToolbar } from "../../../../core/types";
+import { DetailsBladeContext, DetailsBaseBladeScope, IParentCallArgs, UseDetails, usePopup } from "../../../index";
+import SchemaRender from "../components/SchemaRender";
+import { VcSelect } from "../../../../ui/components";
+import { toolbarReducer } from "../helpers/toolbarReducer";
+
+interface Props {
+  expanded?: boolean;
+  closable?: boolean;
+  param?: string;
+  model?: DynamicDetailsSchema;
+  options?: {
+    [x: string]: unknown;
+  };
+  composables?: Record<string, (...args: any[]) => Record<string, any>>;
+}
+
+interface Emits {
+  (event: "parent:call", args: IParentCallArgs): void;
+  (event: "close:blade"): void;
+  (event: "collapse:blade"): void;
+  (event: "expand:blade"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  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 }) as UseDetails<Record<string, any>, DetailsBaseBladeScope>;
+
+const title = ref();
+const isReady = ref(false);
+
+const unwatchTitle = watch(
+  () => bladeTitle.value,
+  (newVal) => {
+    if (newVal) {
+      title.value = newVal;
+
+      nextTick(() => unwatchTitle());
+    }
+  },
+  { immediate: true }
+);
+
+const settings = computed(() => props.model?.settings);
+
+const form = computed(
+  (): FormContentSchema => props.model?.content.find((x) => x.component === "vc-form") as FormContentSchema
+);
+
+const widgets = computed(() => props.model.content.find((x) => x.component === "vc-widgets"));
+
+const bladeContext = ref<DetailsBladeContext>({
+  loading,
+  item,
+  validationState,
+  scope,
+  load,
+  remove,
+  saveChanges,
+  bladeTitle,
+  settings,
+});
+
+const bladeStatus = computed(() => {
+  if ("status" in props.model.settings && props.model.settings.status) {
+    if (!("component" in props.model.settings.status))
+      throw new Error(`Component is required in status: ${props.model.settings.status}`);
+    return reactive(h(resolveComponent(props.model.settings.status.component), { context: bladeContext.value }));
+  }
+
+  return null;
+});
+
+const bladeMultilanguage = reactiveComputed(() => {
+  if ("multilanguage" in toValue(scope) && toValue(scope).multilanguage) {
+    return {
+      component: () =>
+        h(VcSelect as any, {
+          name: "currentLocale",
+          modelValue: toValue(scope).multilanguage.currentLocale,
+          options: toValue(scope).multilanguage.localesOptions,
+          optionValue: "value",
+          optionLabel: "label",
+          disabled: "disabled" in toValue(scope) && toValue(scope).disabled,
+          required: true,
+          clearable: false,
+          "onUpdate:modelValue": (e: string) => {
+            toValue(scope).multilanguage.setLocale(e);
+          },
+        }),
+      currentLocale: toValue(scope).multilanguage.currentLocale,
+    };
+  }
+
+  return {};
+});
+
+const bladeWidgets = computed(() => {
+  return widgets.value?.children?.map((x) => resolveComponent(x));
+});
+
+const bladeOptions = reactive({
+  multilanguage: bladeMultilanguage.component,
+  status: bladeStatus,
+});
+
+const toolbarComputed = toolbarReducer({
+  defaultToolbarSchema: settings.value.toolbar,
+  defaultToolbarBindings: {
+    saveChanges: {
+      async clickHandler() {
+        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 });
+            emit("parent:call", {
+              method: "reload",
+            });
+            emit("close:blade");
+          }
+        }
+      },
+      disabled: computed(() => toValue(scope)?.disabled),
+    },
+  },
+  customToolbarConfig: toValue(scope)?.toolbarOverrides,
+  context: bladeContext.value,
+});
+
+onBeforeMount(async () => {
+  if (props.param) {
+    await load({ id: props.param });
+  }
+
+  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,
+});
+</script>
+
+<style lang="scss">
+.item-details {
+  &__inner {
+    @apply tw-overflow-hidden tw-min-h-full tw-flex tw-grow tw-basis-0;
+  }
+
+  &__content {
+    @apply tw-border-r tw-border-solid tw-border-r-[#eaedf3] tw-overflow-hidden tw-grow tw-basis-0;
+  }
+
+  &__decline-icon {
+    @apply tw-text-[#ff4a4a] tw-mr-3;
+  }
+
+  .app_phone &__inner {
+    @apply tw-flex-col;
+  }
+
+  .app_phone &__content {
+    @apply tw-border-r-0 tw-border-b tw-border-solid tw-border-b-[#eaedf3] tw-overflow-visible;
+  }
+
+  .app_phone &__widgets {
+    @apply tw-flex tw-flex-row;
+  }
+}
+</style>