@vc-shell/framework 1.0.110 → 1.0.112

package/shared/modules/dynamic/components/fields/props.ts

@@ -0,0 +1,52 @@
+import { ComputedRef, PropType, UnwrapNestedRefs, VNodeArrayChildren } from "vue";
+import { DetailsBladeContext } from "../../factories";
+import { IControlBaseOptions, IControlBaseProps } from "../../types/models";
+import { ControlSchema } from "../../types";
+
+export default {
+  baseProps: {
+    type: Object as PropType<UnwrapNestedRefs<IControlBaseProps>>,
+    default: () => ({} as IControlBaseProps),
+  },
+  baseOptions: {
+    type: Object as PropType<UnwrapNestedRefs<IControlBaseOptions>>,
+    default: () => ({} as IControlBaseOptions),
+  },
+  element: {
+    type: Object as PropType<ControlSchema>,
+    default: () => ({} as ControlSchema),
+  },
+  bladeContext: {
+    type: Object as PropType<UnwrapNestedRefs<DetailsBladeContext>>,
+    default: () => ({} as DetailsBladeContext),
+  },
+  fields: {
+    type: Object as PropType<ComputedRef<VNodeArrayChildren>>,
+    default: () => ({} as ComputedRef<VNodeArrayChildren>),
+  },
+  formData: {
+    type: Object,
+    default: () => ({}),
+  },
+  fieldContext: {
+    type: Object,
+    default: undefined,
+  },
+  nodeBuilder: {
+    type: Function,
+    default: () => ({}),
+  },
+  currentLocale: {
+    type: String,
+  },
+  elIndex: {
+    type: Number,
+  },
+  rows: {
+    type: Number,
+  },
+  onSetModelData: {
+    type: Function,
+    default: () => ({}),
+  },
+};

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

@@ -0,0 +1,4 @@
+import * as factories from "./factories";
+import * as models from "../types/models";
+
+export { factories, models };

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

@@ -0,0 +1 @@
+export { default as useFilterBuilder } from "./useFilterBuilder";

package/shared/modules/dynamic/composables/useFilterBuilder/index.ts

@@ -0,0 +1,235 @@
+import {
+  h,
+  ref,
+  computed,
+  MaybeRef,
+  unref,
+  Component,
+  onMounted,
+  reactive,
+  RendererElement,
+  RendererNode,
+  VNode,
+  ComputedRef,
+  readonly,
+} from "vue";
+import * as _ from "lodash-es";
+import { Checkbox, InputField } from "../../components/factories";
+import { AsyncAction } from "../../../../../core/composables";
+import { VcButton, VcCol, VcContainer, VcRow } from "../../../../../ui/components";
+
+interface RawControl {
+  field: string;
+  component: string;
+  label?: string;
+  data?: { value: string; displayName: string }[];
+}
+
+interface Control {
+  title: string;
+  fields: {
+    [x: string]: ReturnType<typeof Checkbox> | ReturnType<typeof InputField>;
+  };
+}
+
+interface Data {
+  columns: {
+    title: string;
+    controls: RawControl[];
+  }[];
+}
+
+export interface UseFilterBuilder {
+  filterComponent: (slotMethods: { close: () => void }) => VNode<
+    RendererNode,
+    RendererElement,
+    {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      [key: string]: any;
+    }
+  >;
+  activeFilterCount: ComputedRef<number>;
+  isFilterVisible: ComputedRef<boolean>;
+  reset: () => Promise<void>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  readonly filter: Record<string, any>;
+}
+
+export default <Query>(args: { data: Data; query: MaybeRef<Query>; load: AsyncAction<Query> }): UseFilterBuilder => {
+  const _search = args.load;
+  const _data = args.data;
+
+  const isFilterVisible = ref(true);
+  const filter = reactive({});
+
+  const controls = ref<Control[]>([]);
+
+  const appliedFilter = ref({});
+  const activeFilterCount = computed(() => Object.values(appliedFilter.value).filter((item) => !!item).length);
+
+  const disable = computed(() => !Object.keys(filter).length || _.some(filter, _.isEmpty));
+
+  const disabled = computed(() => !Object.keys(appliedFilter.value).length || _.some(appliedFilter.value, _.isEmpty));
+
+  onMounted(() => createFilterControls());
+
+  function isItemSelected(value: string, field: string) {
+    return filter[field]?.some((x) => x === value);
+  }
+
+  function selectFilterItem(e: boolean, value: string, field: string) {
+    const isSelected = filter[field]?.includes(value);
+
+    if (!Array.isArray(filter[field])) {
+      filter[field] = [];
+    }
+
+    if (e && !isSelected) {
+      filter[field]?.push(value);
+    } else if (!e && isSelected) {
+      filter[field] = filter[field].filter((x) => x !== value);
+    }
+  }
+
+  function createFilterControls() {
+    if (!_data?.columns) {
+      isFilterVisible.value = false;
+      return;
+    }
+    controls.value = _data.columns.map((item): Control => {
+      const ctr = item.controls.reduce((obj, control) => {
+        if (control.component === "vc-checkbox") {
+          const filterData = control.data;
+          const fields = createCheckboxFromData(filterData, control);
+
+          obj = fields;
+        }
+        if (control.component === "vc-input") {
+          obj[control.field] = createInput(control);
+        }
+
+        return obj;
+      }, {});
+
+      return {
+        title: item.title,
+        fields: ctr,
+      };
+    });
+  }
+
+  function createCheckboxFromData(data: RawControl["data"], control: RawControl) {
+    if (!(data && data.length)) return;
+    return data.reduce((obj, currC) => {
+      obj[currC.value] = Checkbox({
+        props: {
+          classNames: "tw-mb-2",
+          modelValue: computed(() => isItemSelected(currC.value, control.field)),
+          "onUpdate:modelValue": (e) => selectFilterItem(e, currC.value, control.field),
+        },
+        slots: {
+          default: () => currC.displayName,
+        },
+        options: {
+          visibility: computed(() => true),
+        },
+      });
+
+      return obj;
+    }, {});
+  }
+
+  function createInput(control: RawControl) {
+    return InputField({
+      props: {
+        type: "date",
+        classNames: "tw-mb-3",
+        label: control.label,
+        modelValue: computed(() => filter[control.field]),
+        "onUpdate:modelValue": (e) => (filter[control.field] = e),
+      },
+      options: {
+        visibility: computed(() => true),
+      },
+    });
+  }
+
+  async function applyFilters(filterHandlerFn: () => void) {
+    filterHandlerFn();
+    await _search({
+      ...unref(args.query),
+      ...filter,
+    });
+    appliedFilter.value = {
+      ...filter,
+    };
+  }
+
+  async function resetFilters(filterHandlerFn: () => void) {
+    filterHandlerFn();
+
+    await reset();
+
+    await _search({
+      ...unref(args.query),
+      ...filter,
+    });
+  }
+
+  function render(slotMethods: { close: () => void }) {
+    if (_.isEmpty(controls.value)) return;
+    return h(VcContainer, () => [
+      h(VcRow, () =>
+        Object.values(controls.value).map(({ title, fields }) =>
+          h(VcCol, { class: "tw-p-2" }, () => [
+            h("div", { class: "tw-mb-4 tw-text-[#a1c0d4] tw-font-bold tw-text-[17px]" }, title),
+            Object.values(fields).map((item) => {
+              if ("component" in item && item.component) {
+                return h(
+                  item.component as Component,
+                  { ...item.props, class: item.props.classNames },
+                  "slots" in item && item.slots ? { ...item.slots } : {}
+                );
+              }
+            }),
+          ])
+        )
+      ),
+      h(VcRow, () =>
+        h(VcCol, { class: "tw-p-2" }, () =>
+          h("div", { class: "tw-flex tw-justify-end" }, [
+            h(
+              VcButton,
+              {
+                outline: true,
+                class: "tw-mr-4",
+                disabled: disabled.value,
+                onClick: () => resetFilters(slotMethods.close),
+              },
+              () => "Reset"
+            ),
+            h(
+              VcButton,
+              { disabled: disable.value, onClick: () => applyFilters(slotMethods.close) },
+              () => "Apply filters"
+            ),
+          ])
+        )
+      ),
+    ]);
+  }
+
+  async function reset() {
+    Object.keys(filter).forEach((key: string) => (filter[key] = undefined));
+
+    appliedFilter.value = {};
+  }
+
+  return {
+    filterComponent: render,
+    activeFilterCount,
+    filter: readonly(filter),
+    isFilterVisible: computed(() => isFilterVisible.value),
+    reset,
+  };
+};

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

@@ -0,0 +1,83 @@
+import { computed, ref, watch } from "vue";
+import * as _ from "lodash-es";
+import { useForm, useIsFormDirty, useIsFormValid } from "vee-validate";
+import { useAsync, useLoading } from "../../../../../core/composables";
+import type { ItemId, IValidationState, UseDetails } from "../types";
+import { createUnrefFn } from "@vueuse/core";
+
+export interface UseDetailsFactoryParams<Item> {
+  load: (args: ItemId) => Promise<Item>;
+  saveChanges: (details: Item) => Promise<Item>;
+  remove: (args: ItemId) => Promise<void>;
+}
+
+export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<Item>) => {
+  return function useDetails(): UseDetails<Item> {
+    const { setFieldError, setErrors, validate } = useForm({
+      validateOnMount: false,
+    });
+    const item = ref<Item>();
+    const itemTemp = ref<Item>();
+    const isModified = ref(false);
+    const isFormValid = useIsFormValid();
+    const isDirty = useIsFormDirty();
+    const isDisabled = computed(() => !isDirty.value || !isFormValid.value);
+
+    const { loading: itemLoading, action: load } = useAsync<ItemId>(async (args) => {
+      item.value = await factoryParams.load(args);
+      resetModified(item.value);
+    });
+
+    const { loading: manageLoading, action: saveChanges } = useAsync<Item>(async (item) => {
+      if (validationState.value.valid) {
+        await factoryParams.saveChanges(item);
+        isModified.value = false;
+      } else throw new Error("Form is not valid");
+    });
+
+    const { loading: removeLoading, action: remove } = useAsync<ItemId>(async (args) => {
+      await factoryParams.remove(args);
+    });
+
+    const loading = useLoading(itemLoading, manageLoading, removeLoading);
+
+    const validationState = computed(
+      (): IValidationState<Item> => ({
+        dirty: isDirty.value,
+        valid: isFormValid.value,
+        modified: isModified.value,
+        disabled: isDisabled.value,
+        validated: !isDisabled.value && isModified.value,
+        setFieldError,
+        setErrors,
+        resetModified,
+        validate,
+      })
+    );
+
+    watch(
+      [() => item, () => itemTemp],
+      ([state, stateCopy]) => {
+        isModified.value = !_.isEqual(stateCopy.value, state.value);
+      },
+      { deep: true }
+    );
+
+    const resetModified = createUnrefFn((data: Item, updateInitial = false) => {
+      if (updateInitial) {
+        item.value = data;
+      }
+
+      itemTemp.value = _.cloneDeep(data);
+    });
+
+    return {
+      load,
+      saveChanges,
+      remove,
+      loading,
+      item,
+      validationState,
+    };
+  };
+};

package/shared/modules/dynamic/factories/base/useListFactory.ts

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ComputedRef, Ref, computed, ref } from "vue";
+import { CustomQuery, UseList } from "../types";
+import { AsyncAction, useAsync, useLoading } from "../../../../../core/composables";
+
+interface ISearchResult<T> {
+  totalCount?: number;
+  results?: T;
+}
+
+export interface UseListFactoryParams<Items extends Record<string, any>[], Query extends IQuery> {
+  load?: (query: Query) => Promise<ISearchResult<Items>>;
+  remove?: (query: Query, customQuery: CustomQuery) => Promise<void>;
+}
+
+export interface IQuery {
+  [x: string]: any;
+  take?: number;
+  sort?: string;
+  skip?: number;
+  keyword?: string;
+}
+
+export interface IUseListOptions extends Pick<IQuery, "sort"> {
+  pageSize?: number;
+}
+
+export const useListFactory = <Items extends Record<string, any>[], Query extends IQuery>(
+  factoryParams: UseListFactoryParams<Items, Query>
+) => {
+  return function useList(options?: IUseListOptions): UseList<Items, Query> {
+    const pageSize = options?.pageSize || 20;
+    const searchResult = ref<ISearchResult<Items>>();
+    const searchQuery = ref({
+      take: pageSize,
+      sort: options?.sort,
+    }) as Ref<Query>;
+
+    const { loading: itemsLoading, action: load } = useAsync<Query>(async (query) => {
+      searchQuery.value = { ...searchQuery.value, ...query };
+      searchResult.value = await factoryParams.load(query);
+    });
+
+    const { loading: itemsDelete, action: remove } = useAsync<CustomQuery>(async (customQuery) => {
+      await factoryParams.remove(searchQuery.value, customQuery);
+    });
+
+    const loading = useLoading(itemsLoading, itemsDelete);
+
+    const pagination = computed(() => ({
+      currentPage: (searchQuery.value?.skip || 0) / Math.max(1, searchQuery?.value.take || 20) + 1,
+      totalCount: searchResult.value?.totalCount,
+      pageSize: pageSize,
+      get pages() {
+        return Math.ceil(this.totalCount / this.pageSize);
+      },
+    }));
+
+    return {
+      items: computed(() => searchResult.value?.results),
+      query: searchQuery,
+      loading,
+      pagination,
+      load,
+      remove,
+    };
+  };
+};

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

@@ -0,0 +1,4 @@
+export { useDetailsFactory } from "./base/useDetailsFactory";
+export { useListFactory } from "./base/useListFactory";
+
+export * from "./types";

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

@@ -0,0 +1,103 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ComputedRef, MaybeRef, Ref, UnwrapNestedRefs } from "vue";
+import { AsyncAction } from "../../../../../core/composables";
+import { SettingsSchema } from "../../types";
+import { Asset, AssetsHandler, IBladeToolbar, IImage } from "../../../../../core/types";
+import { useBladeNavigation } from "../../../../components";
+
+export type ItemId = { id: string };
+
+export interface IPagination {
+  currentPage: number;
+  totalCount: number;
+  pageSize: number;
+  pages: number;
+}
+
+export interface IValidationState<Item> {
+  valid: boolean;
+  dirty: boolean;
+  disabled: boolean;
+  modified: boolean;
+  validated: boolean;
+  setFieldError: (field: string, message: string | string[]) => void;
+  setErrors: (fields: Record<string, string>) => void;
+  resetModified: (data: MaybeRef<Item>, updateInitial?: MaybeRef<boolean>) => void;
+  validate: () => Promise<{ valid: boolean; errors: Record<string, string> }>;
+}
+
+export type CustomQuery = { ids: string[] | null; allSelected?: boolean };
+
+export interface UseDetails<Item, Scope extends DetailsBaseBladeScope = DetailsBaseBladeScope> {
+  load: AsyncAction<ItemId>;
+  saveChanges: AsyncAction<Item>;
+  remove: AsyncAction<ItemId>;
+  loading: ComputedRef<boolean>;
+  item: Ref<Item>;
+  validationState: ComputedRef<IValidationState<Item>>;
+  scope?: ComputedRef<UnwrapNestedRefs<Scope>>;
+  bladeTitle?: ComputedRef<string>;
+}
+
+export interface UseList<Items, Query, Scope extends ListBaseBladeScope = ListBaseBladeScope> {
+  items: ComputedRef<Items>;
+  query: Ref<Query>;
+  loading: ComputedRef<boolean>;
+  pagination: ComputedRef<{
+    currentPage: number;
+    totalCount: number;
+    pageSize: number;
+    pages: number;
+  }>;
+  load: AsyncAction<Query>;
+  remove?: AsyncAction<CustomQuery>;
+  scope?: ComputedRef<UnwrapNestedRefs<Scope>>;
+}
+
+export interface BaseBladeScope {
+  [x: string]: any;
+  toolbarOverrides?: { [x: string]: IBladeToolbar } | ((...args: any[]) => any);
+}
+
+export interface ListBaseBladeScope extends BaseBladeScope {
+  openDetailsBlade: (args?: Omit<Parameters<ReturnType<typeof useBladeNavigation>["openBlade"]>["0"], "blade">) => void;
+}
+
+export interface DetailsBaseBladeScope extends BaseBladeScope {
+  disabled?: ComputedRef<boolean>;
+  multilanguage?: {
+    loading: ComputedRef<boolean>;
+    currentLocale: Ref<string>;
+    languages: Ref<string[]>;
+    setLocale: (locale: string) => void;
+    localesOptions: Ref<{ label: string; value: string }[]>;
+    getLanguages: AsyncAction<void, void>;
+  };
+  dynamicProperties?: {
+    loading: ComputedRef<boolean>;
+    loadDictionaries: (
+      property: Record<string, any>,
+      keyword?: string,
+      locale?: string
+    ) => Promise<Record<string, any>[]>;
+    getPropertyValue: (property: Record<string, any>, locale: string) => any;
+    setPropertyValue: (data: {
+      property: Record<string, any>;
+      value: string | Record<string, any>[];
+      dictionary?: Record<string, any>[];
+      locale?: string;
+    }) => void;
+  };
+  assetsHandler?: {
+    assets?: AssetsHandler<Asset, Asset>;
+    images?: AssetsHandler<IImage, IImage>;
+  };
+}
+
+export interface DetailsBladeContext extends UseDetails<Record<string, any>, DetailsBaseBladeScope> {
+  settings: ComputedRef<SettingsSchema>;
+}
+
+export interface ListBladeContext extends UseList<Record<string, any>[], Record<string, any>, ListBaseBladeScope> {
+  settings: ComputedRef<SettingsSchema>;
+}

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

@@ -0,0 +1,10 @@
+import { reactify } from "@vueuse/core";
+import { toValue } from "vue";
+import * as _ from "lodash-es";
+
+export const getModel = reactify((property: string, context: Record<string, any>) => {
+  if (property && context) {
+    return _.get(context, property);
+  }
+  return null;
+});

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

@@ -0,0 +1,112 @@
+import { unref, computed, toValue, h, UnwrapNestedRefs, MaybeRef, reactive } from "vue";
+import FIELD_MAP from "../components/FIELD_MAP";
+import { ControlSchema } from "../types";
+import { IControlBaseProps, IControlBaseOptions } from "../types/models";
+import { getModel } from "./getters";
+import { setModel } from "./setters";
+import { unwrapInterpolation } from "./unwrapInterpolation";
+import { DetailsBladeContext } from "../factories";
+import * as _ from "lodash-es";
+
+function disabledHandler(
+  disabled: { method?: string } | boolean,
+  context: UnwrapNestedRefs<DetailsBladeContext>
+): boolean {
+  if (!disabled) return false;
+  if (typeof disabled === "boolean") return disabled;
+  else if (typeof context.scope[disabled.method] === "function") return context.scope[disabled.method]();
+  else if (context.scope[disabled.method]) return context.scope[disabled.method];
+  return false;
+}
+
+function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeContext>, FormData>(args: {
+  controlSchema: ControlSchema;
+  parentId: string | number;
+  internalContext: Context;
+  bladeContext: BContext;
+  currentLocale: MaybeRef<string>;
+  formData: FormData;
+}) {
+  const { controlSchema, parentId, internalContext, bladeContext, currentLocale, formData } = args;
+  if (!controlSchema) return false;
+
+  const baseProps = reactive<IControlBaseProps>({
+    key: `${parentId}`,
+    label: controlSchema.label ? unref(unwrapInterpolation(controlSchema.label, internalContext)) : undefined,
+    disabled:
+      ("disabled" in bladeContext.scope && bladeContext.scope.disabled) ||
+      disabledHandler("disabled" in controlSchema && controlSchema.disabled, bladeContext),
+    name: controlSchema.id,
+    rules: controlSchema.rules,
+    placeholder: controlSchema.placeholder,
+    required: controlSchema.rules?.required,
+    modelValue: getModel(controlSchema.property, internalContext),
+    "onUpdate:modelValue": (e) => {
+      setModel({ property: controlSchema.property, value: e, context: internalContext });
+
+      if (_.has(controlSchema, "update.method")) {
+        controlSchema.update.method in bladeContext.scope &&
+        typeof bladeContext.scope[controlSchema.update.method] === "function"
+          ? bladeContext.scope[controlSchema.update.method](e, controlSchema.property, internalContext)
+          : undefined;
+      }
+    },
+    tooltip: controlSchema.tooltip,
+    multilanguage: controlSchema.multilanguage,
+  });
+
+  const baseOptions = reactive<IControlBaseOptions>({
+    visibility: computed(() =>
+      controlSchema.visibility?.method ? toValue(bladeContext.scope[controlSchema.visibility?.method]) : true
+    ),
+  });
+
+  const component = FIELD_MAP[controlSchema.component];
+
+  const fieldsHandler = computed(() => {
+    if (!("fields" in controlSchema)) return null;
+    const fieldsModel = getModel(controlSchema.property, internalContext);
+
+    if (toValue(fieldsModel) && Array.isArray(toValue(fieldsModel))) {
+      return toValue(fieldsModel).map((model) =>
+        controlSchema.fields.map((fieldItem) =>
+          nodeBuilder({
+            controlSchema: fieldItem,
+            parentId: `fieldset-${fieldItem.id}-${model.id}`,
+            internalContext: model,
+            bladeContext,
+            currentLocale,
+            formData,
+          })
+        )
+      );
+    }
+    return [
+      controlSchema.fields.map((field) =>
+        nodeBuilder({
+          controlSchema: field,
+          parentId: `fieldset-${parentId}-${field.id}`,
+          internalContext,
+          bladeContext,
+          currentLocale,
+          formData,
+        })
+      ),
+    ];
+  });
+
+  const elProps = {
+    baseProps,
+    baseOptions,
+    bladeContext,
+    element: controlSchema,
+    currentLocale,
+    fields: fieldsHandler,
+    formData,
+    fieldContext: internalContext,
+  };
+
+  return h(component, elProps);
+}
+
+export { nodeBuilder };