@antelopejs/dms 0.11.1 → 0.12.1

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/tableViewDeferred.ts

@@ -0,0 +1,26 @@
+import type { PaginationState, SortingState } from "@tanstack/vue-table";
+import type { TableViewDisplayContext } from "../../../composables/table-view/types";
+import type { ComputedRef, Ref } from "vue";
+import { useRefreshTriggers } from "../blocks/useRefreshTriggers";
+import { useTableRecordLink } from "./useTableRecordLink";
+import { useTableListData } from "./useTableListData";
+export interface TableViewDeferred<T extends Data> {
+  activeViewId: Ref<string | undefined>;
+  activeTabId: Ref<string>;
+  columnFilters: Ref<TableFilter[]>;
+  sorting: Ref<SortingState>;
+  defaultSortState: SortingState;
+  paginationState: Ref<PaginationState>;
+  DEFAULT_PAGINATION: PaginationState;
+  router: ReturnType<typeof useDmsRouter>;
+  isGroupedDisplay: ComputedRef<boolean>;
+  liveGate: ReturnType<typeof useRefreshTriggers>;
+  data: ReturnType<typeof useTableListData<T>>["data"];
+  refreshCounts: () => Promise<void>;
+  recordLink: ReturnType<typeof useTableRecordLink<T>> | undefined;
+  selectedIds: ComputedRef<string[]>;
+  handleExportTable: () => ReturnType<
+    ReturnType<typeof useTableViewExport>["exportTable"]
+  >;
+  displayContext: ComputedRef<TableViewDisplayContext<T>>;
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/tableViewDisplayContext.ts

@@ -0,0 +1,159 @@
+import { isString as isStringType } from "../../../../../dms-core/app/utils/type-check";
+import type { Table } from "@tanstack/vue-table";
+import type { TableViewDisplayContext } from "../../../composables/table-view/types";
+import {
+  resolveRowClickAction,
+  rowCustomActions,
+} from "../../../utils/rowClickAction";
+import type { TableViewScope } from "./tableViewScope";
+
+export function useTableViewDisplayActions<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "urlFilters"
+    | "rowEdit"
+    | "rowOpen"
+    | "configuration"
+    | "rowActions"
+    | "rowCommands"
+    | "displaySelection"
+  >,
+) {
+  const { paginationState } = scope.urlFilters;
+  const { handleRowEdit } = scope.rowEdit;
+  const { handleRowClick, handleRowAdd, handleRowDuplicate } = scope.rowOpen;
+  const { tableProps } = scope.configuration;
+  const { handleCustomRowAction } = scope.rowActions;
+  const { deleteRows } = scope.rowCommands;
+  const { isRowActionEnabled } = scope.displaySelection;
+  const displayPagination = {
+    setPage: (index: number) => {
+      paginationState.value = { ...paginationState.value, pageIndex: index };
+    },
+    setPageSize: (size: number) => {
+      paginationState.value = {
+        ...paginationState.value,
+        pageSize: size,
+        pageIndex: 0,
+      };
+    },
+  };
+
+  const builtInRowClicks = {
+    edit: handleRowEdit,
+    details: handleRowClick,
+  };
+  const openDisplayItem = (item: T) => {
+    const action = resolveRowClickAction(tableProps.value.rowActions, item);
+    if (!action) return;
+    if (isStringType(action)) {
+      void builtInRowClicks[action](item);
+      return;
+    }
+    handleCustomRowAction(action, item);
+  };
+
+  const displayRowActions = {
+    add: handleRowAdd,
+    edit: handleRowEdit,
+    delete: deleteRows,
+    duplicate: handleRowDuplicate,
+    details: handleRowClick,
+    open: openDisplayItem,
+    custom: handleCustomRowAction,
+    canEditRow: (item: T) =>
+      isRowActionEnabled(tableProps.value.rowActions?.edit, item),
+    canDeleteRow: (item: T) =>
+      isRowActionEnabled(tableProps.value.rowActions?.delete, item),
+    customFor: (item: T) =>
+      rowCustomActions(tableProps.value.rowActions?.custom, item),
+  };
+  return { displayPagination, displayRowActions };
+}
+
+export function useTableViewDisplayContext<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "listState"
+    | "rowEdit"
+    | "displaySelection"
+    | "urlFilters"
+    | "displayActions"
+    | "query"
+    | "footer"
+    | "configuration"
+    | "presenceEvents"
+    | "rowRealtime"
+    | "displayOptions"
+    | "refresh"
+    | "rowNavigation"
+    | "reorder"
+    | "props"
+  >,
+) {
+  const { shownResults, isListLoading, isFirstPageLoading, data } =
+    scope.listState;
+  const { EMPTY_ITEMS } = scope.rowEdit;
+  const { selectedIds, displaySelection } = scope.displaySelection;
+  const { paginationState } = scope.urlFilters;
+  const { displayPagination, displayRowActions } = scope.displayActions;
+  const { paginationMode } = scope.query;
+  const { hasMoreRows, loadMoreRows, baseQuery } = scope.footer;
+  const { tableProps, labelKey, location, componentId, pageId } =
+    scope.configuration;
+  const { presenceByRowFiltered } = scope.presenceEvents;
+  const { rowIdKey } = scope.rowRealtime;
+  const { optionsForDisplay, activeDisplayId } = scope.displayOptions;
+  const { refreshByUser } = scope.refresh;
+  const { setSelfManagedRows } = scope.rowNavigation;
+  const { reorderState } = scope.reorder;
+  const { props } = scope;
+  const displayTable = shallowRef<Table<T>>();
+  const captureDisplayTable = (table: Table<T>) => {
+    if (displayTable.value !== table) displayTable.value = table;
+  };
+
+  const displayContext = computed(
+    (): TableViewDisplayContext<T> => ({
+      items: shownResults.value ?? EMPTY_ITEMS,
+      columns: props.columns,
+      loading: isListLoading.value,
+      firstPageLoading: isFirstPageLoading.value,
+      selection: { ids: selectedIds.value, ...displaySelection },
+      pagination: {
+        pageIndex: paginationState.value.pageIndex,
+        pageSize: paginationState.value.pageSize,
+        total: data.value?.total ?? 0,
+        ...displayPagination,
+        mode: paginationMode,
+        hasMore: hasMoreRows.value,
+        loadMore: loadMoreRows,
+      },
+      actions: {
+        canAdd: isActionEnabled(tableProps.value.rowActions?.add),
+        canEdit: isActionEnabled(tableProps.value.rowActions?.edit),
+        canDelete: isActionEnabled(tableProps.value.rowActions?.delete),
+        canDetails: isActionEnabled(tableProps.value.rowActions?.details),
+        ...displayRowActions,
+      },
+      presenceByRow: presenceByRowFiltered.value,
+      rowIdKey,
+      labelKey,
+      location,
+      query: baseQuery.value,
+      componentId,
+      pageId,
+      options: optionsForDisplay(activeDisplayId.value),
+      refresh: refreshByUser,
+      setShownRows: setSelfManagedRows,
+      reorder: reorderState.value,
+      table: displayTable.value,
+    }),
+  );
+
+  const contextForSlot = (table: Table<T>): TableViewDisplayContext<T> => {
+    captureDisplayTable(table);
+    return displayContext.value;
+  };
+  return { displayContext, contextForSlot };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/tableViewDisplays.ts

@@ -0,0 +1,205 @@
+import { isObject } from "../../../../../dms-core/app/utils/type-check";
+
+import type { PaginationState } from "@tanstack/vue-table";
+import type {
+  KanbanConfig,
+  TableViewDisplayConfig,
+  TableViewGroupedConfig,
+} from "../../../composables/table-view/types";
+import {
+  TABLE_DISPLAY_ID,
+  KANBAN_DISPLAY_ID,
+  GROUPED_DISPLAY_ID,
+} from "../../../composables/table-view/types";
+import { isEligibleKanbanColumn } from "../../../composables/table-view/kanban";
+import { resolveTableChrome } from "./utils/chrome";
+import type { TableViewSwitcherItem } from "../../components/table/Table.vue";
+import { type Component } from "vue";
+import type { TableViewScope } from "./tableViewScope";
+
+export function useTableViewDisplayOptions<T extends Data>(
+  scope: Pick<TableViewScope<T>, "configuration" | "arrival">,
+) {
+  const { allColumns, resolvedDisplays, defaultDisplay } = scope.configuration;
+  const { processI18n, tablePreferences } = scope.arrival;
+  const kanbanEligibleColumns = allColumns.filter(isEligibleKanbanColumn);
+  const kanbanGroupByOptions = kanbanEligibleColumns.map((column) => ({
+    label: processI18n(column.header),
+    value: column.accessorKey,
+  }));
+
+  const { displays: registeredDisplays, getById } = useTableViewDisplays();
+
+  const offeredDisplayIds = new Set(resolvedDisplays.map((d) => d.id));
+
+  const fallbackDisplayId = offeredDisplayIds.has(TABLE_DISPLAY_ID)
+    ? TABLE_DISPLAY_ID
+    : defaultDisplay;
+  const resolvedDisplay = (id: string): TableViewDisplayConfig | undefined =>
+    resolvedDisplays.find((d) => d.id === id);
+  const optionsForDisplay = (id: string) => resolvedDisplay(id)?.options;
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Display options are not discriminated by id in TableViewDisplayConfig; the existing kanban contract remains unchecked here.
+  const kanbanOptions = optionsForDisplay(KANBAN_DISPLAY_ID) as
+    | KanbanConfig
+    | undefined;
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Display options are not discriminated by id in TableViewDisplayConfig; the existing grouped contract remains unchecked here.
+  const groupedOptions = optionsForDisplay(GROUPED_DISPLAY_ID) as
+    | TableViewGroupedConfig
+    | undefined;
+
+  const persistedDisplay = tablePreferences.get<string>(
+    "viewMode",
+    defaultDisplay,
+  );
+
+  const isDefaultDisplayStandalone =
+    resolvedDisplay(defaultDisplay)?.capabilities?.header === false;
+  const activeDisplayId = ref<string>(
+    isDefaultDisplayStandalone
+      ? defaultDisplay
+      : offeredDisplayIds.has(persistedDisplay)
+        ? persistedDisplay
+        : fallbackDisplayId,
+  );
+
+  /** A display the backend config renders by itself, with no client plugin. */
+  const isConfigRenderedDisplay = (id: string): boolean =>
+    !!resolvedDisplay(id)?.component;
+
+  const availableDisplays = computed<TableViewSwitcherItem[]>(() =>
+    registeredDisplays.value
+      .filter((display) => offeredDisplayIds.has(display.id))
+      .filter(
+        (display) =>
+          !display.isAvailable ||
+          display.isAvailable({
+            columns: allColumns,
+            options: optionsForDisplay(display.id),
+          }),
+      )
+      .map(({ id, label, icon }) => ({ id, label, icon })),
+  );
+  return {
+    resolvedDisplay,
+    activeDisplayId,
+    offeredDisplayIds,
+    getById,
+    kanbanOptions,
+    kanbanEligibleColumns,
+    groupedOptions,
+    fallbackDisplayId,
+    isDefaultDisplayStandalone,
+    optionsForDisplay,
+    isConfigRenderedDisplay,
+    availableDisplays,
+    kanbanGroupByOptions,
+  };
+}
+
+export function useTableViewDisplayComponent<T extends Data>(
+  scope: Pick<TableViewScope<T>, "displayOptions" | "configuration" | "props">,
+) {
+  const { resolvedDisplay, activeDisplayId, offeredDisplayIds, getById } =
+    scope.displayOptions;
+  const { KanbanDisplay } = scope.configuration;
+  const { props } = scope;
+  const reorderConfig = props.reorder;
+  const activeCapabilities = computed(() => {
+    const capabilities = resolveDisplayCapabilities(
+      resolvedDisplay(activeDisplayId.value)?.capabilities,
+    );
+    return reorderConfig ? { ...capabilities, sorting: false } : capabilities;
+  });
+
+  const isActiveDisplaySelfManaged = computed(
+    () => !!resolvedDisplay(activeDisplayId.value)?.selfManagedData,
+  );
+
+  const STATIC_DISPLAY_COMPONENTS: Record<
+    TableViewDisplayConfig["id"],
+    Component
+  > = {
+    [KANBAN_DISPLAY_ID]: KanbanDisplay,
+  };
+
+  const resolveDisplayComponentRef = (
+    component: Component | ComponentInfo | undefined,
+  ): Component | string | undefined => {
+    if (!component) return undefined;
+    if (isObject(component) && "componentName" in component) {
+      const name = component.componentName;
+      return name ? resolveDmsComponent(name) || name : undefined;
+    }
+    return component;
+  };
+
+  const activeDisplayComponent = computed<Component | string | undefined>(
+    () => {
+      const id = activeDisplayId.value;
+      if (id === TABLE_DISPLAY_ID || !offeredDisplayIds.has(id))
+        return undefined;
+
+      const fromConfig = resolvedDisplay(id)?.component;
+      if (fromConfig) return resolveDisplayComponentRef(fromConfig);
+      const registered = getById(id)?.component;
+      if (registered) return resolveDisplayComponentRef(registered);
+      return STATIC_DISPLAY_COMPONENTS[id];
+    },
+  );
+  return {
+    reorderConfig,
+    activeCapabilities,
+    isActiveDisplaySelfManaged,
+    activeDisplayComponent,
+  };
+}
+
+export function useTableViewDisplayPreferences<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    "displayOptions" | "arrival" | "configuration" | "props"
+  >,
+) {
+  const { kanbanOptions, kanbanEligibleColumns } = scope.displayOptions;
+  const { tablePreferences } = scope.arrival;
+  const { caption, allColumns } = scope.configuration;
+  const { props } = scope;
+  const defaultKanbanGroupBy = kanbanOptions?.groupByField ?? "";
+  const kanbanGroupBy = ref<string>(defaultKanbanGroupBy);
+
+  tablePreferences.restore(
+    "kanbanGroupBy",
+    kanbanGroupBy,
+    (field) =>
+      !kanbanOptions ||
+      kanbanEligibleColumns.some((c) => c.accessorKey === field),
+  );
+
+  const DEFAULT_DENSITY = "default" as const;
+
+  const defaultDensity = props.density ?? DEFAULT_DENSITY;
+  const density = ref<"default" | "compact">(defaultDensity);
+  tablePreferences.restore("density", density);
+
+  const DEFAULT_PAGE_SIZE = 10;
+  const DEFAULT_PAGINATION: PaginationState = {
+    pageIndex: 0,
+    pageSize: props.pageSize ?? DEFAULT_PAGE_SIZE,
+  };
+  const resolvedChrome = resolveTableChrome(props.layout, {
+    hasCaption: !!caption,
+    isSearchable: !!props.searchable,
+    isFilterable: allColumns.some((column) => column.enableColumnFilter),
+  });
+  const GLOBAL_FILTER_DEBOUNCE_MS = 400;
+  return {
+    DEFAULT_PAGINATION,
+    GLOBAL_FILTER_DEBOUNCE_MS,
+    DEFAULT_DENSITY,
+    density,
+    kanbanGroupBy,
+    defaultKanbanGroupBy,
+    defaultDensity,
+    resolvedChrome,
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/tableViewEvents.ts

@@ -0,0 +1,95 @@
+import { TableViewEvents } from "../../../composables/table-view/types";
+import { selectedRowIds } from "./utils/bulkActions";
+import { type WatchOptions, type WatchSource } from "vue";
+import type { TableViewScope } from "./tableViewScope";
+
+export function useTableViewEvents<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "arrival"
+    | "configuration"
+    | "filterState"
+    | "defaultSorting"
+    | "urlFilters"
+  >,
+) {
+  const { sendComponentEvent } = scope.arrival;
+  const { componentId } = scope.configuration;
+  const { columnFilters } = scope.filterState;
+  const { sorting } = scope.defaultSorting;
+  const { rowSelect } = scope.urlFilters;
+  function watchAndEmit<T>(
+    source: WatchSource<T>,
+    event: string,
+    componentId: string,
+    mapper: (val: T) => Parameters<typeof sendComponentEvent>[2] = (v) => v,
+    opts: WatchOptions = {},
+  ): void {
+    watch(
+      source,
+      (newVal) => sendComponentEvent(event, componentId, mapper(newVal)),
+      { deep: true, ...opts },
+    );
+  }
+
+  if (componentId) {
+    watchAndEmit(columnFilters, TableViewEvents.FILTER_CHANGE, componentId);
+    watchAndEmit(sorting, TableViewEvents.SORT_CHANGE, componentId);
+    watchAndEmit(
+      rowSelect,
+      TableViewEvents.ROW_SELECT,
+      componentId,
+      (selection) => ({
+        selectedIds: selectedRowIds(selection),
+      }),
+    );
+  }
+  return {};
+}
+
+export function useTableViewMount<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "configuration"
+    | "arrival"
+    | "rowActions"
+    | "quickFilters"
+    | "linkCounts"
+    | "displayOptions"
+  >,
+) {
+  const { componentId } = scope.configuration;
+  const { route } = scope.arrival;
+  const { openRowById } = scope.rowActions;
+  const { loadRelationQuickFilters } = scope.quickFilters;
+  const { refreshLinkTabCounts } = scope.linkCounts;
+  const {
+    activeDisplayId,
+    fallbackDisplayId,
+    isConfigRenderedDisplay,
+    availableDisplays,
+  } = scope.displayOptions;
+  const checkUrlParameter = () => {
+    const urlParamKey = `${componentId}:id`;
+    const itemId = route.query[urlParamKey];
+
+    if (itemId && isString(itemId)) {
+      openRowById(itemId);
+    }
+  };
+
+  onMounted(() => {
+    checkUrlParameter();
+    void loadRelationQuickFilters();
+    void refreshLinkTabCounts();
+
+    if (
+      activeDisplayId.value !== fallbackDisplayId &&
+      !isConfigRenderedDisplay(activeDisplayId.value) &&
+      !availableDisplays.value.some((d) => d.id === activeDisplayId.value)
+    ) {
+      activeDisplayId.value = fallbackDisplayId;
+    }
+  });
+  return {};
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/tableViewExpansion.ts

@@ -0,0 +1,100 @@
+import type { ExpandedState } from "@tanstack/vue-table";
+import type { TableViewExpandedRowProps } from "../../../composables/table-view/types";
+import {
+  expandedRowsOnListing,
+  type ExpandedRowMap,
+  nextExpandedRows,
+} from "./utils/expandedRows";
+import { buildExpandedRowProps } from "./utils/expandedRowProps";
+import {
+  type ExpandedRowLoadState,
+  useExpandedRowDetails,
+} from "./useExpandedRowDetails";
+import type { TableViewScope } from "./tableViewScope";
+
+export function useTableViewExpansion<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    "rowRealtime" | "listState" | "query" | "rows" | "props"
+  >,
+) {
+  const { getRowId } = scope.rowRealtime;
+  const { shownResults } = scope.listState;
+  const { queryRequest, archiveQuery } = scope.query;
+  const { tableRows } = scope.rows;
+  const { props } = scope;
+  const expandableConfig = props.expandable;
+  const expanded = ref<ExpandedRowMap>({});
+
+  const rowIdsOf = (rows: T[] | undefined): string[] =>
+    (rows ?? []).map((row) => getRowId(row)).filter((id): id is string => !!id);
+
+  const expandedModel = computed<ExpandedState>({
+    get: () => expanded.value,
+    set: (next) => {
+      expanded.value = nextExpandedRows(
+        expanded.value,
+        next,
+        rowIdsOf(shownResults.value),
+        expandableConfig?.single,
+      );
+    },
+  });
+
+  let expandedListedKey: string | undefined;
+  if (expandableConfig) {
+    watch(
+      shownResults,
+      (rows) => {
+        const next = expandedRowsOnListing(
+          { expanded: expanded.value, listedKey: expandedListedKey },
+          rows ? rowIdsOf(rows) : undefined,
+          JSON.stringify([queryRequest.value, archiveQuery.value]),
+          expandableConfig.defaultExpanded,
+          expandableConfig.single,
+        );
+        expandedListedKey = next.listedKey;
+        expanded.value = next.expanded;
+      },
+      { immediate: true },
+    );
+  }
+
+  const expandedDetails = useExpandedRowDetails<T>((id) =>
+    tableRows.getRow(id),
+  );
+  if (expandableConfig?.lazyLoad) {
+    watch(shownResults, () => expandedDetails.reset());
+    watch(
+      [expanded, shownResults],
+      () =>
+        expandedDetails.ensure(
+          Object.keys(expanded.value).filter((id) => expanded.value[id]),
+        ),
+      { immediate: true },
+    );
+  }
+  return { expandableConfig, expandedDetails, expanded, expandedModel };
+}
+
+export function useTableViewExpandedDetails<T extends Data>(
+  scope: Pick<TableViewScope<T>, "expansion" | "rowRealtime" | "deferred">,
+) {
+  const { expandableConfig, expandedDetails } = scope.expansion;
+  const { getRowId } = scope.rowRealtime;
+  const { deferred } = scope;
+  const expandedRowLoadState = (id: string): ExpandedRowLoadState =>
+    expandableConfig?.lazyLoad
+      ? (expandedDetails.entryOf(id)?.state ?? "loading")
+      : "ready";
+
+  const expandedRowProps = (listed: T): TableViewExpandedRowProps<T> => {
+    const id = getRowId(listed);
+    const read = id ? expandedDetails.entryOf(id)?.row : undefined;
+    return buildExpandedRowProps<T>(
+      read ? { ...listed, ...read } : listed,
+      deferred.displayContext.value,
+    );
+  };
+  return { expandedRowLoadState, expandedRowProps };
+}