@vc-shell/framework 1.0.109 → 1.0.111

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

@@ -0,0 +1,437 @@
+<template>
+  <VcBlade
+    :expanded="expanded"
+    :closable="closable"
+    width="50%"
+    :toolbar-items="toolbarComputed"
+    :title="title"
+    @close="$emit('close:blade')"
+    @expand="$emit('expand:blade')"
+    @collapse="$emit('collapse:blade')"
+  >
+    <VcTable
+      class="tw-grow tw-basis-0"
+      :loading="loading"
+      :expanded="expanded"
+      v-bind="bladeOptions?.table"
+      :state-key="tableData?.id"
+      :items="items"
+      :multiselect="tableData?.multiselect"
+      :header="tableData?.header"
+      :sort="sort"
+      :pages="pagination?.pages"
+      :current-page="pagination?.currentPage"
+      :search-value="searchValue"
+      :selected-item-id="selectedItemId"
+      :total-label="$t(`${settings.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.TABLE.TOTALS`)"
+      :total-count="pagination?.totalCount"
+      :active-filter-count="activeFilterCount"
+      @item-click="onItemClick"
+      @pagination-click="onPaginationClick"
+      @selection-changed="onSelectionChanged"
+      @header-click="onHeaderClick"
+      @load:change="onSearchList"
+      @scroll:ptr="reload"
+      @search:change="onSearchList"
+    >
+      <template
+        v-if="isFilterVisible"
+        #filters="{ closePanel }"
+      >
+        <filterComponent :close="closePanel" />
+      </template>
+
+      <!-- Not found template -->
+      <template #notfound>
+        <template v-if="bladeOptions.notFound">
+          <component
+            :is="bladeOptions.notFound"
+            @reset="resetSearch"
+          ></component>
+        </template>
+        <template v-else>
+          <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
+            <div class="tw-m-4 tw-text-xl tw-font-medium">
+              {{ $t(`${settings.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.NOT_FOUND.EMPTY`) }}
+            </div>
+            <VcButton
+              v-if="isFilterVisible"
+              @click="resetSearch"
+              >{{ $t(`${settings.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.NOT_FOUND.RESET`) }}</VcButton
+            >
+          </div>
+        </template>
+      </template>
+
+      <!-- Empty template -->
+      <template #empty>
+        <template v-if="bladeOptions.empty">
+          <component :is="bladeOptions.empty"></component>
+        </template>
+        <template v-else>
+          <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
+            <div class="tw-m-4 tw-text-xl tw-font-medium">
+              {{ $t(`${settings.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.EMPTY.NO_ITEMS`) }}
+            </div>
+          </div>
+        </template>
+      </template>
+
+      <!-- Override table templates-->
+      <template
+        v-for="(component, key, index) in bladeOptions?.templateOverrideComponents"
+        #[`item_${key}`]="itemData"
+        :key="`template_override_${index}`"
+      >
+        <component
+          :is="component"
+          :context="itemData"
+        />
+      </template>
+
+      <!-- Override table mobile view -->
+
+      <template
+        v-if="bladeOptions.mobileView"
+        #mobile-item="itemData"
+      >
+        <component
+          :is="bladeOptions.mobileView"
+          :context="itemData"
+        ></component>
+      </template>
+    </VcTable>
+  </VcBlade>
+</template>
+<script setup lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  Ref,
+  VNode,
+  computed,
+  inject,
+  onMounted,
+  reactive,
+  ref,
+  resolveComponent,
+  shallowRef,
+  toValue,
+  unref,
+  watch,
+  UnwrapRef,
+} from "vue";
+import { useI18n } from "vue-i18n";
+import { DynamicGridSchema, ListContentSchema } from "../types";
+import { useFilterBuilder } from "../composables";
+import * as _ from "lodash-es";
+import { useFunctions } from "../../../../core/composables";
+import { IBladeToolbar, ITableColumns } from "../../../../core/types";
+import { ListBladeContext, UseList, usePopup, ListBaseBladeScope } from "../../../index";
+import { toolbarReducer } from "../helpers/toolbarReducer";
+
+export interface Props {
+  expanded?: boolean;
+  closable?: boolean;
+  param?: string;
+  options?: unknown;
+  model?: DynamicGridSchema;
+  composables?: Record<string, (...args: any[]) => Record<string, any>>;
+}
+
+export interface Emits {
+  (event: "close:blade"): void;
+  (event: "collapse:blade"): void;
+  (event: "expand:blade"): void;
+  (event: "close:children"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  closable: true,
+  param: undefined,
+});
+
+const { t } = useI18n({ useScope: "global" });
+const { showConfirmation } = usePopup();
+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 isDesktop = inject<Ref<boolean>>("isDesktop");
+
+const tableData = computed(() => props.model?.content.find((type: ListContentSchema) => type.component === "vc-table"));
+const table = computed(() => {
+  const tableScope = {
+    columns: tableData.value?.columns,
+  };
+
+  return tableScope;
+});
+
+const bladeOptions = reactive({
+  tableData,
+  table,
+  templateOverrideComponents: templateOverrideComponents(),
+  mobileView: resolveTemplateComponent("mobileTemplate"),
+  notFound: resolveTemplateComponent("notFoundTemplate"),
+  empty: resolveTemplateComponent("emptyTemplate"),
+});
+
+const { load, remove, items, loading, pagination, query, scope } = props.composables[props.model?.settings?.composable](
+  {
+    emit,
+    props,
+  }
+) as UseList<Record<string, any>[], Record<string, any>, ListBaseBladeScope>;
+
+const {
+  filterComponent,
+  activeFilterCount,
+  isFilterVisible,
+  reset: resetFilters,
+  filter,
+} = useFilterBuilder({
+  data: bladeOptions.tableData?.filter,
+  query,
+  load,
+});
+
+const bladeContext = ref<ListBladeContext>({
+  load,
+  remove,
+  items,
+  loading,
+  pagination,
+  query,
+  scope,
+  settings,
+});
+
+const toolbarComputed = toolbarReducer({
+  defaultToolbarSchema: settings.value.toolbar,
+  defaultToolbarBindings: {
+    openAddBlade: {
+      async clickHandler() {
+        if (
+          "openDetailsBlade" in toValue(scope) &&
+          toValue(scope).openDetailsBlade &&
+          typeof toValue(scope).openDetailsBlade === "function"
+        ) {
+          toValue(scope).openDetailsBlade();
+        }
+      },
+    },
+    refresh: {
+      async clickHandler() {
+        await reload();
+      },
+    },
+    removeItems: {
+      async clickHandler() {
+        removeItems();
+      },
+      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(sort, async (value) => {
+  await load({ ...query.value, sort: value });
+});
+
+watch(
+  () => props.param,
+  (newVal) => {
+    if (newVal) {
+      if (
+        "openDetailsBlade" in toValue(scope) &&
+        toValue(scope).openDetailsBlade &&
+        typeof toValue(scope).openDetailsBlade === "function"
+      ) {
+        toValue(scope).openDetailsBlade({
+          param: newVal,
+          onOpen() {
+            selectedItemId.value = newVal;
+          },
+          onClose() {
+            selectedItemId.value = undefined;
+          },
+        });
+      }
+    }
+  },
+  { immediate: true }
+);
+
+const onItemClick = (item: { id: string }) => {
+  if (
+    "openDetailsBlade" in toValue(scope) &&
+    toValue(scope).openDetailsBlade &&
+    typeof toValue(scope).openDetailsBlade === "function"
+  ) {
+    toValue(scope).openDetailsBlade({
+      param: item.id,
+      onOpen() {
+        selectedItemId.value = item.id;
+      },
+      onClose() {
+        selectedItemId.value = undefined;
+      },
+    });
+  }
+};
+
+const onSelectionChanged = (i: UnwrapRef<typeof items>) => {
+  const item = unref(i)
+    .map((item) => item.id)
+    .filter((x): x is string => x !== null);
+
+  selectedIds.value = item;
+};
+
+async function removeItems() {
+  if (
+    await showConfirmation(
+      t(`${settings.value.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.DELETE_SELECTED_CONFIRMATION.MESSAGE`, {
+        count: allSelected.value
+          ? t(`${settings.value.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.DELETE_SELECTED_CONFIRMATION.ALL`, {
+              totalCount: pagination.value.totalCount,
+            })
+          : selectedIds.value.length,
+      })
+    )
+  ) {
+    emit("close:children");
+    await remove({ allSelected: allSelected.value, ids: selectedIds.value });
+    if (query.value.skip && query.value.take) {
+      if (query.value.skip >= query.value.take) {
+        if (allSelected.value) {
+          query.value.skip = 0;
+        } else {
+          query.value.skip -= query.value.take;
+        }
+      }
+    }
+    await reload();
+  }
+}
+
+const reload = async () => {
+  selectedIds.value = [];
+  if (query.value.take) {
+    await load({
+      ...query.value,
+      skip: (pagination.value.currentPage - 1) * query.value.take,
+      sort: sort.value,
+    });
+  }
+};
+
+const onPaginationClick = async (page: number) => {
+  if (query.value.take) {
+    await load({
+      ...query.value,
+      skip: (page - 1) * query.value.take,
+    });
+  }
+};
+
+const onHeaderClick = (item: ITableColumns) => {
+  const sortOptions = ["DESC", "ASC", ""];
+
+  if (item.sortable) {
+    if (sort.value.split(":")[0] === item.id) {
+      const index = sortOptions.findIndex((x) => {
+        const sorting = sort.value.split(":")[1];
+        if (sorting) {
+          return x === sorting;
+        } else {
+          return x === "";
+        }
+      });
+
+      if (index !== -1) {
+        const newSort = sortOptions[(index + 1) % sortOptions.length];
+
+        if (newSort === "") {
+          sort.value = `${item.id}`;
+        } else {
+          sort.value = `${item.id}:${newSort}`;
+        }
+      }
+    } else {
+      sort.value = `${item.id}:${sortOptions[0]}`;
+    }
+  }
+};
+const onSearchList = debounce(async (keyword: string) => {
+  searchValue.value = keyword;
+  await load({
+    ...query.value,
+    keyword,
+  });
+}, 1000);
+
+async function resetSearch() {
+  searchValue.value = "";
+  await resetFilters();
+  await load({
+    ...query.value,
+    ...filter,
+    keyword: "",
+  });
+}
+
+function templateOverrideComponents(): Record<string, VNode> {
+  return {
+    ...table.value.columns?.reduce((acc, curr) => {
+      if ("customTemplate" in curr) {
+        if (!("component" in curr.customTemplate)) {
+          throw new Error(
+            `Component name must be provided in 'customTemplate' property, column: ${JSON.stringify(curr)}`
+          );
+        } else {
+          const component = resolveComponent(curr.customTemplate.component);
+
+          if (typeof component !== "string") {
+            acc[curr.id] = shallowRef(component);
+          }
+        }
+      }
+      return acc;
+    }, {}),
+  };
+}
+
+function resolveTemplateComponent(name: string) {
+  if (!tableData.value) return;
+  const componentName = tableData[name]?.component;
+  if (componentName) {
+    const component = resolveComponent(componentName);
+
+    if (component && typeof component !== "string") return shallowRef(component);
+  }
+}
+
+defineExpose({
+  reload,
+  title,
+});
+</script>

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

@@ -0,0 +1,4 @@
+import { default as DynamicBladeList } from "./dynamic-blade-list.vue";
+import { default as DynamicBladeForm } from "./dynamic-blade-form.vue";
+
+export { DynamicBladeList, DynamicBladeForm };

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

@@ -0,0 +1,287 @@
+import { VcButton, VcIcon, VcInput, VcStatus } from "./../../../../ui/components";
+import { ITableColumns, IValidationRules } from "../../../../core/types";
+import type { ComponentProps, ComponentEmit, ComponentSlots } from "vue-component-type-helpers";
+
+export type KeysOfUnion<T> = T extends T ? keyof T : never;
+
+export type Composable<T> = T[keyof T];
+
+export type DynamicSchema = DynamicGridSchema | DynamicDetailsSchema;
+
+export interface DynamicGridSchema {
+  /**
+   * @description Blade settings
+   */
+  settings: SettingsSchema;
+  content: [ListContentSchema];
+}
+
+export interface DynamicDetailsSchema {
+  /**
+   * @description Blade settings
+   */
+  settings: SettingsSchema;
+  /**
+   * @description Blade content
+   */
+  content: [FormContentSchema, WidgetsSchema?];
+}
+
+export type SettingsSchema = SettingsWorkspace | SettingsDetails;
+
+export interface SettingsWorkspace extends SettingsBase {
+  isWorkspace: boolean;
+}
+
+export interface SettingsDetails extends SettingsBase {
+  status?: {
+    component: string;
+  };
+}
+
+export interface SettingsBase {
+  /**
+   * @description Blade url
+   */
+  url?: string;
+  /**
+   * @description Locale key for VueI18n locale files
+   */
+  localizationPrefix: string;
+  /**
+   * @description Required component id
+   */
+  id: string;
+  /**
+   * @description Blade default header title
+   */
+  titleTemplate: string;
+  /**
+   * @description Composable to use at {@link SettingsBase.model } blade component view
+   */
+  composable: string;
+  /**
+   * @description Toolbar items array
+   * @default 'save', 'delete' in {@link SettingsDetails}
+   * @default 'refresh', 'add' in {@link SettingsWorkspace}
+   */
+  toolbar: {
+    id: string;
+    title: string;
+    icon: string;
+    method: string;
+  }[];
+  /**
+   * @description Blade component
+   */
+  component: string;
+  /**
+   * @description Blade permissions
+   */
+  permissions?: string | string[];
+}
+
+export interface ListContentSchema extends SchemaBase {
+  component: "vc-table";
+  filter?: FilterSchema;
+  multiselect?: boolean;
+  header?: boolean;
+  columns?: (ITableColumns & {
+    id: string;
+    title: string;
+    sortable?: boolean;
+    alwaysVisible?: boolean;
+    type?: string;
+    customTemplate?: GridTemplateOverride;
+  })[];
+  mobileTemplate?: {
+    component: string;
+  };
+  notFoundTemplate?: {
+    component: string;
+  };
+  emptyTemplate?: {
+    component: string;
+  };
+}
+
+export interface FormContentSchema extends SchemaBase {
+  component: "vc-form";
+  children: ControlSchema[];
+}
+
+export interface GridTemplateOverride {
+  component?: string;
+}
+
+export interface VisibilityOptions {
+  method: string;
+}
+export interface SchemaBase {
+  id: string;
+  label?: string;
+  property?: string;
+  rules?: IValidationRules;
+  placeholder?: string;
+  disabled?: { method: string };
+  tooltip?: string;
+  visibility?: VisibilityOptions;
+  multilanguage?: boolean;
+  update?: { method: string };
+}
+
+export interface SelectSchema extends SchemaBase {
+  component: "vc-select";
+  optionValue: string;
+  optionLabel: string;
+  optionsMethod: string;
+  customTemplate?: {
+    component: string;
+  };
+  clearable?: boolean;
+  emitValue?: boolean;
+}
+
+export interface InputSchema extends SchemaBase {
+  component: "vc-input";
+  variant?: ComponentProps<typeof VcInput>["type"];
+  clearable?: boolean;
+}
+
+export interface StatusSchema extends SchemaBase {
+  component: "vc-status";
+  outline?: boolean;
+  extend?: boolean;
+  variant?: ComponentProps<typeof VcStatus>["variant"];
+  icon?: string;
+  iconSize?: ComponentProps<typeof VcIcon>["size"];
+  iconVariant?: ComponentProps<typeof VcIcon>["variant"];
+  title?: string;
+  content: {
+    method: string;
+  };
+}
+
+export interface InputCurrencySchema extends SchemaBase {
+  component: "vc-input-currency";
+  optionProperty: string;
+  optionValue?: string;
+  optionLabel?: string;
+  clearable?: boolean;
+}
+
+export interface EditorSchema extends SchemaBase {
+  component: "vc-editor";
+}
+
+export interface DynamicPropertiesSchema extends SchemaBase {
+  component: "vc-dynamic-properties";
+  exclude?: string[];
+  include?: string[];
+}
+
+export interface GallerySchema extends SchemaBase {
+  component: "vc-gallery";
+  uploadFolder: string;
+}
+
+export interface CardSchema extends SchemaBase {
+  component: "vc-card";
+  fields: ControlSchema[];
+  action?: ButtonSchema & { method: string };
+  collapsible?: boolean;
+}
+
+export interface WidgetsSchema extends SchemaBase {
+  component: "vc-widgets";
+  children: string[];
+}
+
+export interface CheckboxSchema extends SchemaBase {
+  component: "vc-checkbox";
+  content: string;
+  trueValue?: boolean;
+  falseValue?: boolean;
+}
+
+export interface FieldsetSchema extends SchemaBase {
+  component: "vc-fieldset";
+  columns?: number;
+  fields: Exclude<ControlSchema[], FieldsetSchema>;
+  remove?: {
+    method: string;
+  };
+}
+
+export interface ButtonSchema extends SchemaBase {
+  component: "vc-button";
+  content: string;
+  small?: boolean;
+  icon?: string;
+  iconSize?: ComponentProps<typeof VcIcon>["size"];
+  text?: boolean;
+  method?: string;
+}
+
+export type ControlSchema =
+  | SelectSchema
+  | InputSchema
+  | EditorSchema
+  | DynamicPropertiesSchema
+  | GallerySchema
+  | CardSchema
+  | WidgetsSchema
+  | CheckboxSchema
+  | FieldsetSchema
+  | ButtonSchema
+  | InputCurrencySchema
+  | StatusSchema;
+
+export interface FilterBase {
+  columns: {
+    title: string;
+    controls: {
+      field: string;
+      component: InputSchema["component"] | CheckboxSchema["component"];
+    }[];
+  }[];
+}
+
+export type FilterCheckbox = FilterBase & {
+  columns: {
+    controls: {
+      data?: { value: string; displayName: string }[];
+    }[];
+  }[];
+};
+
+export type FilterDateInput = FilterBase & {
+  columns: {
+    controls: {
+      label?: string;
+    }[];
+  }[];
+};
+
+export type FilterSchema = FilterCheckbox | FilterDateInput;
+
+export interface OverridesSchema {
+  upsert?: (OverridesUpsert | OverridesReplace)[];
+  remove?: OverridesRemove[];
+}
+
+export interface OverridesUpsert extends OverridesReplace {
+  index: number;
+}
+
+export interface OverridesReplace {
+  path: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: ControlSchema | SettingsSchema["toolbar"][number] | string | boolean;
+  id: string;
+}
+
+export interface OverridesRemove {
+  path: string;
+  id: string;
+}