@antelopejs/dms 0.11.1 → 0.12.0

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

@@ -0,0 +1,218 @@
+import type {
+  ColumnSizingState,
+  RowSelectionState,
+  VisibilityState,
+} from "@tanstack/vue-table";
+import { refDebounced } from "@vueuse/core";
+import type { TableUrlFilter } from "../../components/table/Table.vue";
+import {
+  currentQuery,
+  visibleUrlFilters,
+  withoutQueryParam,
+} from "./utils/urlFilters";
+import { usePersistedPagination } from "./usePersistedPagination";
+import type { TableViewScope } from "./tableViewScope";
+
+export function useTableViewUrlFilters<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    "configuration" | "arrival" | "displayPreferences" | "deferred"
+  >,
+) {
+  const { queryParamFilters, routeParamFilters, routeParams, allColumns } =
+    scope.configuration;
+  const { route, tablePreferences, processI18n } = scope.arrival;
+  const { DEFAULT_PAGINATION } = scope.displayPreferences;
+  const { deferred } = scope;
+  const DEFAULT_FILTER_MODE = "is";
+
+  const queryParamHiddenFilters = computed<TableFilter[]>(() => {
+    if (!queryParamFilters) return [];
+
+    return Object.entries(queryParamFilters)
+      .filter(([param]) => route.query[param] !== undefined)
+      .map(([param, config]) => ({
+        accessorKey: config.field,
+        mode: config.mode || DEFAULT_FILTER_MODE,
+        value: route.query[param],
+      }));
+  });
+
+  const shownUrlFilters = computed<TableUrlFilter[]>(() =>
+    visibleUrlFilters(queryParamFilters, route.query),
+  );
+
+  const removeUrlFilter = (param: string) =>
+    deferred.router.replace({
+      query: withoutQueryParam(currentQuery(route.query), param),
+    });
+
+  const routeParamHiddenFilters = computed<TableFilter[]>(() => {
+    if (!routeParamFilters || !routeParams) return [];
+
+    return Object.entries(routeParamFilters)
+      .filter(([param]) => routeParams[param] !== undefined)
+      .map(([param, config]) => ({
+        accessorKey: config.field,
+        mode: config.mode || DEFAULT_FILTER_MODE,
+        value: routeParams[param],
+      }));
+  });
+
+  const paginationState = usePersistedPagination({
+    preferences: tablePreferences,
+    defaults: DEFAULT_PAGINATION,
+    scope: () => [queryParamHiddenFilters.value, routeParamHiddenFilters.value],
+  });
+  const rowSelect = ref<RowSelectionState>({});
+
+  const columnLabel = (id: string): string => {
+    const column = allColumns.find((c) => (c.id ?? c.accessorKey) === id);
+    return column ? processI18n(column.header) : id;
+  };
+  return {
+    paginationState,
+    columnLabel,
+    queryParamHiddenFilters,
+    routeParamHiddenFilters,
+    rowSelect,
+    shownUrlFilters,
+    removeUrlFilter,
+  };
+}
+
+export function useTableViewPinnedFilters<T extends Data>(
+  scope: Pick<TableViewScope<T>, "arrival" | "configuration">,
+) {
+  const { tablePreferences } = scope.arrival;
+  const { defaultFilters } = scope.configuration;
+  const savedFilters = tablePreferences.get<TableFilter[]>("columnFilters", []);
+
+  const buildPinnedFilters = (): TableFilter[] =>
+    (defaultFilters || []).map((def) => {
+      const saved = savedFilters.find((f) => f.accessorKey === def.accessorKey);
+      return {
+        accessorKey: def.accessorKey,
+        mode: def.mode,
+        value: saved ? saved.value : def.value,
+        pinned: true,
+        initialValue: def.value,
+      };
+    });
+
+  const pinnedKeys = new Set((defaultFilters || []).map((f) => f.accessorKey));
+  const manualFilters = savedFilters
+    .filter((f) => !pinnedKeys.has(f.accessorKey))
+    .map((f) => ({ ...f, pinned: false }));
+  const initialFilters = [...buildPinnedFilters(), ...manualFilters];
+
+  const pinnedDefaultFilters: TableFilter[] = (defaultFilters || []).map(
+    (filter) => ({
+      accessorKey: filter.accessorKey,
+      mode: filter.mode,
+      value: filter.value,
+      pinned: true,
+      initialValue: filter.value,
+    }),
+  );
+  return { initialFilters, pinnedDefaultFilters };
+}
+
+export function useTableViewFilterState<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "pinnedFilters"
+    | "arrival"
+    | "configuration"
+    | "displayPreferences"
+    | "displayOptions"
+  >,
+) {
+  const { initialFilters } = scope.pinnedFilters;
+  const { tablePreferences } = scope.arrival;
+  const { initialVisibility, defaultFilters, defaultDisplay } =
+    scope.configuration;
+  const { GLOBAL_FILTER_DEBOUNCE_MS } = scope.displayPreferences;
+  const { offeredDisplayIds, fallbackDisplayId } = scope.displayOptions;
+  const columnFilters = ref<TableFilter[]>(initialFilters);
+  const columnVisibility = ref<VisibilityState>(
+    tablePreferences.get<VisibilityState>(
+      "columnVisibility",
+      initialVisibility,
+    ),
+  );
+  const columnSizing = ref<ColumnSizingState>({});
+  tablePreferences.restore("columnSizing", columnSizing);
+  const columnOrder = ref<string[]>([]);
+  tablePreferences.restore("columnOrder", columnOrder, Array.isArray);
+  const hasEmptyDefaultFilter = (defaultFilters || []).some(
+    (f) => f.value === undefined || f.value === null || f.value === "",
+  );
+  const filtersRowOpen = ref<boolean>(hasEmptyDefaultFilter);
+  tablePreferences.restore("filtersOpen", filtersRowOpen);
+  const globalFilter = shallowRef<string>();
+  const globalFilterDebounced = refDebounced(
+    globalFilter,
+    GLOBAL_FILTER_DEBOUNCE_MS,
+  );
+  const showArchived = ref(false);
+
+  const displayDefault = ref(
+    offeredDisplayIds.has(defaultDisplay) ? defaultDisplay : fallbackDisplayId,
+  );
+  return {
+    columnFilters,
+    displayDefault,
+    globalFilter,
+    columnVisibility,
+    columnOrder,
+    globalFilterDebounced,
+    showArchived,
+    filtersRowOpen,
+    hasEmptyDefaultFilter,
+    columnSizing,
+  };
+}
+
+export function useTableViewQueryFilters<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    "urlFilters" | "tabs" | "configuration" | "arrival"
+  >,
+) {
+  const { queryParamHiddenFilters, routeParamHiddenFilters } = scope.urlFilters;
+  const { activeTabFilters } = scope.tabs;
+  const { queryParamFilters, routeParamFilters, routeParams } =
+    scope.configuration;
+  const { route } = scope.arrival;
+  const hiddenFilters = computed<TableFilter[]>(() => [
+    ...queryParamHiddenFilters.value,
+    ...routeParamHiddenFilters.value,
+    ...activeTabFilters.value,
+  ]);
+
+  const queryParamDefaults = computed(() => {
+    if (!queryParamFilters && !routeParamFilters) return undefined;
+
+    const defaults: Record<string, (typeof route.query)[string]> = {};
+    if (queryParamFilters) {
+      for (const [param, config] of Object.entries(queryParamFilters)) {
+        const value = route.query[param];
+        if (value !== undefined) {
+          defaults[config.field] = value;
+        }
+      }
+    }
+    if (routeParamFilters && routeParams) {
+      for (const [param, config] of Object.entries(routeParamFilters)) {
+        const value = routeParams[param];
+        if (value !== undefined) {
+          defaults[config.field] = value;
+        }
+      }
+    }
+
+    return Object.keys(defaults).length > 0 ? defaults : undefined;
+  });
+  return { hiddenFilters, queryParamDefaults };
+}

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

@@ -0,0 +1,66 @@
+import { buildTableQuery } from "./utils/tableQuery";
+import { useTableFooter } from "./useTableFooter";
+import type { TableViewScope } from "./tableViewScope";
+
+export interface ActiveDisplayExposed {
+  refresh?: () => Promise<void> | void;
+}
+export function useTableViewFooter<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "querySorting"
+    | "queryFilters"
+    | "query"
+    | "configuration"
+    | "listState"
+    | "props"
+  >,
+) {
+  const { effectiveSorting, effectiveColumnFilters, effectiveGlobalFilter } =
+    scope.querySorting;
+  const { hiddenFilters } = scope.queryFilters;
+  const { archiveQuery, loadNextPage } = scope.query;
+  const { location, componentId, pageId } = scope.configuration;
+  const { data, shownResults, isListLoading } = scope.listState;
+  const { props } = scope;
+
+  const activeDisplayRef = ref<ActiveDisplayExposed | null>(null);
+
+  const baseQuery = computed(() => {
+    const {
+      limit: _limit,
+      offset: _offset,
+      ...query
+    } = buildTableQuery({
+      pagination: { pageIndex: 0, pageSize: 0 },
+      sorting: effectiveSorting.value,
+      columnFilters: effectiveColumnFilters.value,
+      hiddenFilters: hiddenFilters.value,
+      globalFilter: effectiveGlobalFilter.value,
+    });
+    return { ...query, ...archiveQuery.value };
+  });
+
+  const { footer: resolvedFooter, refreshSummaries } = useTableFooter({
+    footer: props.footer,
+    columns: props.columns,
+    location,
+    query: baseQuery,
+    dataKey: `table-view-${componentId}-${pageId}`,
+  });
+
+  const hasMoreRows = computed(
+    () => (data.value?.total ?? 0) > (shownResults.value?.length ?? 0),
+  );
+  const loadMoreRows = () => {
+    if (hasMoreRows.value && !isListLoading.value) loadNextPage();
+  };
+  return {
+    hasMoreRows,
+    loadMoreRows,
+    refreshSummaries,
+    activeDisplayRef,
+    baseQuery,
+    resolvedFooter,
+  };
+}

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

@@ -0,0 +1,123 @@
+import {
+  TABLE_DISPLAY_ID,
+  CARDS_DISPLAY_ID,
+} from "../../../composables/table-view/types";
+import { KANBAN_DISPLAY_BRIDGE_KEY } from "../../../composables/table-view/kanban";
+import { describeTableWriteError } from "./utils/writeError";
+import { buildTableQuery, isFilterEffective } from "./utils/tableQuery";
+import { useGroupedRows } from "./useGroupedRows";
+import { useTableReorder } from "./useTableReorder";
+import type { TableViewScope } from "./tableViewScope";
+
+export function useTableViewReorder<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "displayComponent"
+    | "listState"
+    | "configuration"
+    | "rows"
+    | "querySorting"
+    | "tabs"
+    | "displayOptions"
+    | "sortRecovery"
+    | "arrival"
+    | "props"
+  >,
+) {
+  const { reorderConfig } = scope.displayComponent;
+  const { data, refresh } = scope.listState;
+  const { ROW_ID_DEFAULT_KEY, location, tableProps, allColumns } =
+    scope.configuration;
+  const { $authFetch } = scope.rows;
+  const { effectiveColumnFilters, effectiveGlobalFilter } = scope.querySorting;
+  const { activeTabFilters, t } = scope.tabs;
+  const { activeDisplayId } = scope.displayOptions;
+  const { toast } = scope.sortRecovery;
+  const { processI18n } = scope.arrival;
+  const { props } = scope;
+  const ORDERED_DISPLAY_IDS = new Set([TABLE_DISPLAY_ID, CARDS_DISPLAY_ID]);
+  const { reorderState } = useTableReorder<T>({
+    reorder: reorderConfig,
+    data,
+    rowIdKey: props.rowIdKey ?? ROW_ID_DEFAULT_KEY,
+    location,
+    api: $authFetch,
+    canEdit: computed(() => isActionEnabled(tableProps.value.rowActions?.edit)),
+    isNarrowed: computed(
+      () =>
+        effectiveColumnFilters.value.some(isFilterEffective) ||
+        !!effectiveGlobalFilter.value ||
+        activeTabFilters.value.length > 0,
+    ),
+    isOrderedDisplay: computed(() =>
+      ORDERED_DISPLAY_IDS.has(activeDisplayId.value),
+    ),
+    refresh: () => refresh(),
+    onError: (failure) =>
+      toast.add({
+        title: t("dms.table.reorder.error"),
+        description: describeTableWriteError(
+          failure,
+          t,
+          allColumns,
+          processI18n,
+        ),
+        color: Color.error,
+        icon: "i-ph-warning-circle",
+      }),
+  });
+  return { reorderState };
+}
+
+export function useTableViewGrouping<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "groupingOptions"
+    | "querySorting"
+    | "listState"
+    | "queryFilters"
+    | "query"
+    | "rows"
+    | "displayPreferences"
+    | "configuration"
+    | "props"
+    | "deferred"
+  >,
+) {
+  const { activeGroupedOptions } = scope.groupingOptions;
+  const { isGroupedDisplay, effectiveColumnFilters, effectiveGlobalFilter } =
+    scope.querySorting;
+  const { shownResults } = scope.listState;
+  const { hiddenFilters } = scope.queryFilters;
+  const { archiveQuery } = scope.query;
+  const { tableRows } = scope.rows;
+  const { kanbanGroupBy } = scope.displayPreferences;
+  const { tableProps } = scope.configuration;
+  const { props } = scope;
+  const { deferred } = scope;
+  const { grouping, refreshCounts: refreshGroupCounts } = useGroupedRows({
+    grouped: activeGroupedOptions,
+    isActive: isGroupedDisplay,
+    columns: props.columns,
+    rows: shownResults,
+    countQuery: (filter) => ({
+      ...buildTableQuery({
+        pagination: { pageIndex: 0, pageSize: 0 },
+        sorting: [],
+        columnFilters: [...effectiveColumnFilters.value, filter],
+        hiddenFilters: hiddenFilters.value,
+        globalFilter: effectiveGlobalFilter.value,
+      }),
+      ...archiveQuery.value,
+    }),
+    countBatch: tableRows.countBatch,
+  });
+
+  provide(KANBAN_DISPLAY_BRIDGE_KEY, {
+    groupByField: kanbanGroupBy,
+    editAction: tableProps.value.rowActions?.edit,
+    deleteAction: tableProps.value.rowActions?.delete,
+    onCardMoved: () => void deferred.refreshCounts(),
+  });
+  return { refreshGroupCounts, grouping };
+}

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

@@ -0,0 +1,203 @@
+import { readFetchNotFound } from "../../utils/fetchNotFound";
+import { buildTableQuery } from "./utils/tableQuery";
+import { useAccumulatedPages } from "./useAccumulatedPages";
+import { useTableRows } from "./useTableRows";
+import { orderGroupedRows } from "./utils/groupedRows";
+import { useTableListData } from "./useTableListData";
+import type { TableViewScope } from "./tableViewScope";
+
+export function useTableViewRows<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    "configuration" | "arrival" | "props" | "deferred"
+  >,
+) {
+  const { location } = scope.configuration;
+  const { route } = scope.arrival;
+  const { props } = scope;
+  const { deferred } = scope;
+  const { $authFetch } = useAuthFetch();
+
+  const tableRows = useTableRows<T>({
+    api: $authFetch,
+    location,
+    source: props.source,
+    columns: props.columns,
+    route: () => ({
+      routeParams: props.routeParams,
+      routeQuery: route.query,
+    }),
+
+    pinnedRows: () =>
+      deferred.isGroupedDisplay.value ? undefined : props.pinnedRows,
+  });
+  return { $authFetch, tableRows };
+}
+
+export function useTableViewQuery<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "urlFilters"
+    | "querySorting"
+    | "queryFilters"
+    | "filterState"
+    | "configuration"
+    | "props"
+  >,
+) {
+  const { paginationState } = scope.urlFilters;
+  const { effectiveSorting, effectiveColumnFilters, effectiveGlobalFilter } =
+    scope.querySorting;
+  const { hiddenFilters } = scope.queryFilters;
+  const { showArchived } = scope.filterState;
+  const { archiveMode } = scope.configuration;
+  const { props } = scope;
+  const paginationMode = props.pagination ?? "pages";
+  const { isAccumulating, requestedPagination, loadNextPage } =
+    useAccumulatedPages({
+      mode: paginationMode,
+      pagination: paginationState,
+      resetOn: [
+        effectiveSorting,
+        effectiveColumnFilters,
+        hiddenFilters,
+        effectiveGlobalFilter,
+        showArchived,
+      ],
+    });
+
+  const queryRequest = computed(() =>
+    buildTableQuery({
+      pagination: requestedPagination.value,
+      sorting: effectiveSorting.value,
+      columnFilters: effectiveColumnFilters.value,
+      hiddenFilters: hiddenFilters.value,
+      globalFilter: effectiveGlobalFilter.value,
+    }),
+  );
+  const archiveQuery = computed(() =>
+    archiveMode ? { showArchived: showArchived.value } : {},
+  );
+  return {
+    archiveQuery,
+    queryRequest,
+    loadNextPage,
+    isAccumulating,
+    requestedPagination,
+    paginationMode,
+  };
+}
+
+export function useTableViewListState<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "configuration"
+    | "rows"
+    | "query"
+    | "displayComponent"
+    | "liveHold"
+    | "tabs"
+    | "groupingOptions"
+    | "querySorting"
+    | "urlFilters"
+  >,
+) {
+  const { componentId, pageId } = scope.configuration;
+  const { tableRows } = scope.rows;
+  const { queryRequest, archiveQuery } = scope.query;
+  const { isActiveDisplaySelfManaged } = scope.displayComponent;
+  const { liveHold } = scope.liveHold;
+  const { te, locale } = scope.tabs;
+  const { activeGroupedOptions } = scope.groupingOptions;
+  const { isGroupedDisplay, pickedSorting } = scope.querySorting;
+  const { rowSelect } = scope.urlFilters;
+  const { data, status, error, refresh } = useTableListData<T>({
+    componentId,
+    pageId,
+    rows: tableRows,
+    query: queryRequest,
+    archiveQuery,
+    isSelfManaged: isActiveDisplaySelfManaged,
+    heldQuery: liveHold.heldQuery,
+  });
+
+  const settledError = computed(() =>
+    status.value === "pending" ? null : error.value,
+  );
+
+  const isFirstPageLoading = computed(
+    () => data.value === null && !settledError.value,
+  );
+  const isListLoading = computed(
+    () => status.value === "pending" || isFirstPageLoading.value,
+  );
+
+  const listLoadError = computed(() => {
+    const failure = settledError.value;
+    if (!failure) return undefined;
+    const message = resolveApiErrorMessage(failure);
+    if (te(`${message}.description`) || te(message)) return message;
+    const details: { statusCode?: number } = failure;
+    const status = details.statusCode;
+    return status && te(`error.${status}.description`)
+      ? `error.${status}`
+      : "error.500";
+  });
+
+  const listNotFound = computed(() => readFetchNotFound(settledError.value));
+
+  const shownData = computed(() =>
+    listLoadError.value ? undefined : data.value,
+  );
+  const shownResults = computed(() => {
+    const results = shownData.value?.results;
+    const grouped = activeGroupedOptions.value;
+    return results && isGroupedDisplay.value && grouped
+      ? orderGroupedRows(results, grouped, pickedSorting.value, locale.value)
+      : results;
+  });
+
+  watch(listLoadError, (message) => {
+    if (message) rowSelect.value = {};
+  });
+  return {
+    data,
+    error,
+    listLoadError,
+    shownResults,
+    isListLoading,
+    refresh,
+    shownData,
+    isFirstPageLoading,
+    listNotFound,
+  };
+}
+
+export function useTableViewListPagination<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    "listState" | "displayComponent" | "urlFilters"
+  >,
+) {
+  const { listLoadError, data } = scope.listState;
+  const { isActiveDisplaySelfManaged } = scope.displayComponent;
+  const { paginationState } = scope.urlFilters;
+  const activeDisplayBlockedByError = computed(
+    () => !!listLoadError.value && !isActiveDisplaySelfManaged.value,
+  );
+
+  watch(
+    [() => data.value?.total, () => paginationState.value.pageSize],
+    ([total, pageSize]) => {
+      if (total === undefined || total === null || pageSize <= 0) return;
+      const maxPageIndex = Math.max(0, Math.ceil(total / pageSize) - 1);
+      if (paginationState.value.pageIndex > maxPageIndex) {
+        paginationState.value = {
+          ...paginationState.value,
+          pageIndex: maxPageIndex,
+        };
+      }
+    },
+  );
+  return { activeDisplayBlockedByError };
+}