@antelopejs/dms 0.11.1 → 0.12.1

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

@@ -0,0 +1,206 @@
+import { useTableViewConfiguration as createConfiguration } from "./tableViewConfiguration";
+import {
+  useTableViewArrival as createArrival,
+  useTableViewLinkedVisit as createLinkedVisit,
+} from "./tableViewArrival";
+import {
+  useTableViewDisplayOptions as createDisplayOptions,
+  useTableViewDisplayComponent as createDisplayComponent,
+  useTableViewDisplayPreferences as createDisplayPreferences,
+} from "./tableViewDisplays";
+import {
+  useTableViewUrlFilters as createUrlFilters,
+  useTableViewPinnedFilters as createPinnedFilters,
+  useTableViewFilterState as createFilterState,
+  useTableViewQueryFilters as createQueryFilters,
+} from "./tableViewFilters";
+import {
+  useTableViewGroupingOptions as createGroupingOptions,
+  useTableViewDefaultSorting as createDefaultSorting,
+  useTableViewQuerySorting as createQuerySorting,
+  useTableViewSortRecovery as createSortRecovery,
+} from "./tableViewSorting";
+import {
+  useTableViewViews as createViews,
+  useTableViewMobileDisplay as createMobileDisplay,
+} from "./tableViewViews";
+import {
+  useTableViewTabs as createTabs,
+  useTableViewTabPresentation as createTabPresentation,
+  useTableViewNavBadges as createNavBadges,
+} from "./tableViewTabs";
+import {
+  useTableViewRows as createRows,
+  useTableViewQuery as createQuery,
+  useTableViewListState as createListState,
+  useTableViewListPagination as createListPagination,
+} from "./tableViewListing";
+import { useTableViewQuickFilters as createQuickFilters } from "./tableViewQuickFilters";
+import {
+  useTableViewLiveHold as createLiveHold,
+  useTableViewRefresh as createRefresh,
+} from "./tableViewLive";
+import {
+  useTableViewCountsQuery as createCountsQuery,
+  useTableViewCountsData as createCountsData,
+  useTableViewLinkCounts as createLinkCounts,
+} from "./tableViewCounts";
+import { useTableViewFooter as createFooter } from "./tableViewFooter";
+import {
+  useTableViewRowNavigation as createRowNavigation,
+  useTableViewRowLocator as createRowLocator,
+} from "./tableViewNavigation";
+import {
+  useTableViewReorder as createReorder,
+  useTableViewGrouping as createGrouping,
+} from "./tableViewGrouping";
+import {
+  useTableViewRowActions as createRowActions,
+  useTableViewRowCommands as createRowCommands,
+  useTableViewRowOpen as createRowOpen,
+  useTableViewRowEdit as createRowEdit,
+} from "./tableViewActions";
+import {
+  useTableViewBulkSelection as createBulkSelection,
+  useTableViewDisplaySelection as createDisplaySelection,
+} from "./tableViewSelection";
+import {
+  useTableViewRowRealtime as createRowRealtime,
+  useTableViewRowEvents as createRowEvents,
+} from "./tableViewRealtime";
+import {
+  useTableViewPresenceState as createPresenceState,
+  useTableViewPresenceEvents as createPresenceEvents,
+} from "./tableViewPresence";
+import {
+  useTableViewExpansion as createExpansion,
+  useTableViewExpandedDetails as createExpandedDetails,
+} from "./tableViewExpansion";
+import { useTableViewRecordLink as createRecordLink } from "./tableViewRecordLink";
+import {
+  useTableViewDisplayActions as createDisplayActions,
+  useTableViewDisplayContext as createDisplayContext,
+} from "./tableViewDisplayContext";
+import {
+  useTableViewQuickActions as createQuickActions,
+  useTableViewShortcuts as createShortcuts,
+} from "./tableViewQuickActions";
+import {
+  useTableViewStatePersistence as createStatePersistence,
+  useTableViewSizingPersistence as createSizingPersistence,
+} from "./tableViewPersistence";
+import {
+  useTableViewEvents as createEvents,
+  useTableViewMount as createMount,
+} from "./tableViewEvents";
+import type { TableViewSetupProps } from "./tableViewTypes";
+import { TableViewScope } from "./tableViewScope";
+import { tableViewBindings } from "./tableViewBindings";
+export function useTableViewSetup<T extends Data>(
+  props: TableViewSetupProps<T>,
+) {
+  const scope: TableViewScope<T> = new TableViewScope<T>(props, {
+    configuration: () => configuration,
+    arrival: () => arrival,
+    displayOptions: () => displayOptions,
+    displayComponent: () => displayComponent,
+    displayPreferences: () => displayPreferences,
+    urlFilters: () => urlFilters,
+    groupingOptions: () => groupingOptions,
+    defaultSorting: () => defaultSorting,
+    pinnedFilters: () => pinnedFilters,
+    filterState: () => filterState,
+    views: () => views,
+    tabs: () => tabs,
+    rows: () => rows,
+    quickFilters: () => quickFilters,
+    queryFilters: () => queryFilters,
+    querySorting: () => querySorting,
+    query: () => query,
+    liveHold: () => liveHold,
+    listState: () => listState,
+    sortRecovery: () => sortRecovery,
+    listPagination: () => listPagination,
+    countsQuery: () => countsQuery,
+    countsData: () => countsData,
+    footer: () => footer,
+    rowNavigation: () => rowNavigation,
+    rowLocator: () => rowLocator,
+    reorder: () => reorder,
+    grouping: () => grouping,
+    linkCounts: () => linkCounts,
+    refresh: () => refresh,
+    tabPresentation: () => tabPresentation,
+    rowActions: () => rowActions,
+    bulkSelection: () => bulkSelection,
+    rowCommands: () => rowCommands,
+    rowOpen: () => rowOpen,
+    rowRealtime: () => rowRealtime,
+    presenceState: () => presenceState,
+    presenceEvents: () => presenceEvents,
+    expansion: () => expansion,
+    expandedDetails: () => expandedDetails,
+    rowEdit: () => rowEdit,
+    recordLink: () => recordLink,
+    displaySelection: () => displaySelection,
+    displayActions: () => displayActions,
+    displayContext: () => displayContext,
+    quickActions: () => quickActions,
+  });
+  const configuration = createConfiguration<T>(scope);
+  const arrival = createArrival<T>(scope);
+  const displayOptions = createDisplayOptions<T>(scope);
+  const displayComponent = createDisplayComponent<T>(scope);
+  const displayPreferences = createDisplayPreferences<T>(scope);
+  const urlFilters = createUrlFilters<T>(scope);
+  const groupingOptions = createGroupingOptions<T>(scope);
+  const defaultSorting = createDefaultSorting<T>(scope);
+  const pinnedFilters = createPinnedFilters<T>(scope);
+  const filterState = createFilterState<T>(scope);
+  const views = createViews<T>(scope);
+  createMobileDisplay<T>(scope);
+  const tabs = createTabs<T>(scope);
+  createLinkedVisit<T>(scope);
+  const rows = createRows<T>(scope);
+  const quickFilters = createQuickFilters<T>(scope);
+  const queryFilters = createQueryFilters<T>(scope);
+  const querySorting = createQuerySorting<T>(scope);
+  const query = createQuery<T>(scope);
+  const liveHold = createLiveHold<T>(scope);
+  const listState = createListState<T>(scope);
+  const sortRecovery = createSortRecovery<T>(scope);
+  const listPagination = createListPagination<T>(scope);
+  const countsQuery = createCountsQuery<T>(scope);
+  const countsData = createCountsData<T>(scope);
+  const footer = createFooter<T>(scope);
+  const rowNavigation = createRowNavigation<T>(scope);
+  const rowLocator = createRowLocator<T>(scope);
+  const reorder = createReorder<T>(scope);
+  const grouping = createGrouping<T>(scope);
+  const linkCounts = createLinkCounts<T>(scope);
+  const refresh = createRefresh<T>(scope);
+  const tabPresentation = createTabPresentation<T>(scope);
+  createNavBadges<T>(scope);
+  const rowActions = createRowActions<T>(scope);
+  const bulkSelection = createBulkSelection<T>(scope);
+  const rowCommands = createRowCommands<T>(scope);
+  const rowOpen = createRowOpen<T>(scope);
+  const rowRealtime = createRowRealtime<T>(scope);
+  createRowEvents<T>(scope);
+  const presenceState = createPresenceState<T>(scope);
+  const presenceEvents = createPresenceEvents<T>(scope);
+  const expansion = createExpansion<T>(scope);
+  const expandedDetails = createExpandedDetails<T>(scope);
+  const rowEdit = createRowEdit<T>(scope);
+  const recordLink = createRecordLink<T>(scope);
+  const displaySelection = createDisplaySelection<T>(scope);
+  const displayActions = createDisplayActions<T>(scope);
+  const displayContext = createDisplayContext<T>(scope);
+  const quickActions = createQuickActions<T>(scope);
+  createShortcuts<T>(scope);
+  createStatePersistence<T>(scope);
+  createSizingPersistence<T>(scope);
+  createEvents<T>(scope);
+  createMount<T>(scope);
+  return tableViewBindings(scope);
+}

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

@@ -0,0 +1,245 @@
+import type { SortingState } from "@tanstack/vue-table";
+import type { TableViewGroupedConfig } from "../../../composables/table-view/types";
+import { GROUPED_DISPLAY_ID } from "../../../composables/table-view/types";
+import {
+  isSameSorting,
+  isUnsortableFieldError,
+  defaultSortingState,
+  resolveDefaultSortConfig,
+  sanitizeSorting,
+  sortingOrDefault,
+  sortableColumnIds,
+  sortValueKind,
+} from "./utils/sortableColumns";
+import {
+  groupedOptionsFor,
+  listTableSorting,
+  pickedTableSorting,
+  type TableSortingInput,
+  isGroupableColumn,
+} from "./utils/groupedRows";
+import type { TableViewScope } from "./tableViewScope";
+
+export function useTableViewGroupingOptions<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    "configuration" | "displayOptions" | "arrival"
+  >,
+) {
+  const { allColumns } = scope.configuration;
+  const { groupedOptions } = scope.displayOptions;
+  const { processI18n, tablePreferences } = scope.arrival;
+  const declaredSortableIds = sortableColumnIds(allColumns);
+
+  const refusedSortIds = ref<string[]>([]);
+  const sortableIds = computed(
+    () =>
+      new Set(
+        [...declaredSortableIds].filter(
+          (id) => !refusedSortIds.value.includes(id),
+        ),
+      ),
+  );
+
+  const groupedGroupByOptions = groupedOptions
+    ? allColumns
+        .filter(
+          (column) =>
+            column.accessorKey === groupedOptions.groupByField ||
+            (isGroupableColumn(column) &&
+              declaredSortableIds.has(column.accessorKey)),
+        )
+        .map((column) => ({
+          label: processI18n(column.header),
+          value: column.accessorKey,
+        }))
+    : [];
+  const defaultGroupedGroupBy = groupedOptions?.groupByField ?? "";
+  const groupedGroupBy = ref<string>(defaultGroupedGroupBy);
+  tablePreferences.restore(
+    "groupedGroupBy",
+    groupedGroupBy,
+    (field) =>
+      !groupedOptions || groupedGroupByOptions.some((o) => o.value === field),
+  );
+  const activeGroupedOptions = computed<TableViewGroupedConfig | undefined>(
+    () =>
+      groupedOptions &&
+      groupedOptionsFor(groupedOptions, groupedGroupBy.value, allColumns),
+  );
+  return {
+    declaredSortableIds,
+    activeGroupedOptions,
+    sortableIds,
+    refusedSortIds,
+    groupedGroupBy,
+    defaultGroupedGroupBy,
+    groupedGroupByOptions,
+  };
+}
+
+export function useTableViewDefaultSorting<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "configuration"
+    | "groupingOptions"
+    | "urlFilters"
+    | "displayComponent"
+    | "arrival"
+  >,
+) {
+  const { defaultSort, allColumns } = scope.configuration;
+  const { declaredSortableIds } = scope.groupingOptions;
+  const { columnLabel } = scope.urlFilters;
+  const { reorderConfig } = scope.displayComponent;
+  const { tablePreferences } = scope.arrival;
+  const tableDefaultSort = resolveDefaultSortConfig(
+    defaultSort,
+    declaredSortableIds,
+    import.meta.env.DEV ? (message) => console.warn(message) : undefined,
+  );
+  const defaultSortState: SortingState = defaultSortingState(tableDefaultSort);
+
+  const defaultSortLabel = tableDefaultSort
+    ? columnLabel(tableDefaultSort.field)
+    : undefined;
+  const defaultSortKind = tableDefaultSort
+    ? sortValueKind(
+        allColumns.find(
+          (c) => (c.id ?? c.accessorKey) === tableDefaultSort.field,
+        )?.type?.id,
+      )
+    : undefined;
+
+  const sorting = ref<SortingState>(
+    reorderConfig
+      ? defaultSortState
+      : sortingOrDefault(
+          tablePreferences.get<SortingState>("sorting", defaultSortState),
+          declaredSortableIds,
+          defaultSortState,
+        ),
+  );
+  return {
+    sorting,
+    defaultSortState,
+    tableDefaultSort,
+    defaultSortLabel,
+    defaultSortKind,
+  };
+}
+
+export function useTableViewQuerySorting<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "displayComponent"
+    | "filterState"
+    | "displayOptions"
+    | "groupingOptions"
+    | "defaultSorting"
+  >,
+) {
+  const { activeCapabilities, reorderConfig } = scope.displayComponent;
+  const { columnFilters, globalFilterDebounced } = scope.filterState;
+  const { activeDisplayId, groupedOptions } = scope.displayOptions;
+  const { activeGroupedOptions, sortableIds } = scope.groupingOptions;
+  const { sorting, defaultSortState } = scope.defaultSorting;
+  const effectiveColumnFilters = computed<TableFilter[]>(() =>
+    activeCapabilities.value.filters
+      ? columnFilters.value
+      : columnFilters.value.filter((f) => f.pinned),
+  );
+  const effectiveGlobalFilter = computed(() =>
+    activeCapabilities.value.search ? globalFilterDebounced.value : undefined,
+  );
+  const isGroupedDisplay = computed(
+    () => activeDisplayId.value === GROUPED_DISPLAY_ID && !!groupedOptions,
+  );
+  const sortingInput = computed<TableSortingInput>(() => ({
+    reorderField: reorderConfig?.field,
+    grouped: isGroupedDisplay.value ? activeGroupedOptions.value : undefined,
+    canSort: activeCapabilities.value.sorting,
+    sorting: sorting.value,
+    defaultSorting: defaultSortState,
+  }));
+
+  const pickedSorting = computed(() => pickedTableSorting(sortingInput.value));
+  const effectiveSorting = computed<SortingState>(() => {
+    const listed = listTableSorting(sortingInput.value);
+
+    return reorderConfig && !sortingInput.value.grouped
+      ? listed
+      : sanitizeSorting(listed, sortableIds.value);
+  });
+  return {
+    isGroupedDisplay,
+    effectiveSorting,
+    effectiveColumnFilters,
+    effectiveGlobalFilter,
+    pickedSorting,
+  };
+}
+
+export function useTableViewSortRecovery<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "defaultSorting"
+    | "groupingOptions"
+    | "urlFilters"
+    | "listState"
+    | "querySorting"
+    | "tabs"
+  >,
+) {
+  const { sorting, defaultSortState } = scope.defaultSorting;
+  const { sortableIds, refusedSortIds } = scope.groupingOptions;
+  const { paginationState, columnLabel } = scope.urlFilters;
+  const { error } = scope.listState;
+  const { effectiveSorting } = scope.querySorting;
+  const { t } = scope.tabs;
+  watch(
+    sorting,
+    (next, previous) => {
+      const sanitized = sortingOrDefault(
+        next,
+        sortableIds.value,
+        defaultSortState,
+      );
+      if (!isSameSorting(sanitized, next)) {
+        sorting.value = sanitized;
+        return;
+      }
+      const before = sortingOrDefault(
+        previous,
+        sortableIds.value,
+        defaultSortState,
+      );
+      if (
+        !isSameSorting(sanitized, before) &&
+        paginationState.value.pageIndex !== 0
+      ) {
+        paginationState.value = { ...paginationState.value, pageIndex: 0 };
+      }
+    },
+    { deep: true, flush: "sync" },
+  );
+
+  const toast = useToast();
+
+  watch(error, (failure) => {
+    if (!failure || !isUnsortableFieldError(failure)) return;
+    const refused = effectiveSorting.value[0]?.id;
+    if (!refused) return;
+    refusedSortIds.value = [...refusedSortIds.value, refused];
+    sorting.value = sanitizeSorting(sorting.value, sortableIds.value);
+    toast.add({
+      title: t("dms.sort.reset_title"),
+      description: t("dms.sort.reset_description", {
+        column: columnLabel(refused),
+      }),
+      color: Color.warning,
+      icon: "i-ph-warning",
+    });
+  });
+  return { toast };
+}

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

@@ -0,0 +1,168 @@
+import type { TableViewTab } from "../../../composables/table-view/types";
+import { useNavBadges } from "../navigation/useNavBadges";
+import { usePermissionPreview } from "#dms-core/app/entries/composables/auth/usePermissionPreview";
+import { readTableUrlTab, useTableUrlTab } from "./useTableUrlTab";
+import { navBadgeCount } from "./utils/tableCounts";
+import type { TableViewScope } from "./tableViewScope";
+
+export interface ResolvedTab {
+  id: string;
+  label: string;
+  filters: TableFilter[];
+  icon?: string;
+  textColor?: string;
+  iconColor?: string;
+  /** Link tab: the page it opens. */
+  to?: string;
+  toPage?: string;
+  countFrom?: string;
+  navBadge?: TableViewTab["navBadge"];
+}
+export function useTableViewTabs<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    "arrival" | "configuration" | "displayComponent"
+  >,
+) {
+  const { route, urlScope, tablePreferences, ALL_TAB_ID, processI18n } =
+    scope.arrival;
+  const { tabs } = scope.configuration;
+  const { activeCapabilities } = scope.displayComponent;
+  const { t, te, locale } = useI18n();
+
+  const activeTabId = ref<string>(
+    readTableUrlTab(route.query, urlScope) ??
+      tablePreferences.get<string>("activeTab", ALL_TAB_ID),
+  );
+
+  const hasConfiguredAllTab = (tabs ?? []).some((tab) => tab.id === ALL_TAB_ID);
+
+  const resolvedTabs = computed<ResolvedTab[]>(() => {
+    if (!activeCapabilities.value.tabs) return [];
+    if (!tabs || tabs.length === 0) return [];
+    const implicitAll: ResolvedTab[] = hasConfiguredAllTab
+      ? []
+      : [{ id: ALL_TAB_ID, label: t("dms.table.tabs.all"), filters: [] }];
+    return [
+      ...implicitAll,
+      ...tabs.map((tab) => ({
+        id: tab.id,
+        label: processI18n(tab.label),
+
+        filters: tab.filter && !tab.to ? [{ ...tab.filter }] : [],
+        icon: tab.icon,
+        textColor: tab.textColor,
+        iconColor: tab.iconColor,
+        to: tab.to,
+        toPage: tab.toPage,
+        countFrom: tab.countFrom,
+        navBadge: tab.navBadge,
+      })),
+    ];
+  });
+
+  const activeTabFilters = computed<TableFilter[]>(() => {
+    const tab = resolvedTabs.value.find((t) => t.id === activeTabId.value);
+    return tab?.filters || [];
+  });
+
+  const isOpenableTab = (tabId: string) =>
+    resolvedTabs.value.some((tab) => !tab.to && tab.id === tabId);
+
+  useTableUrlTab({
+    route,
+    urlScope,
+    activeTabId,
+    isOpenable: isOpenableTab,
+  });
+  return {
+    activeTabId,
+    isOpenableTab,
+    resolvedTabs,
+    t,
+    activeTabFilters,
+    te,
+    locale,
+  };
+}
+
+export function useTableViewTabPresentation<T extends Data>(
+  scope: Pick<TableViewScope<T>, "countsData" | "linkCounts" | "tabs">,
+) {
+  const { tabCountsData } = scope.countsData;
+  const { linkTabCountsLoaded, linkTabCounts } = scope.linkCounts;
+  const { resolvedTabs } = scope.tabs;
+  const permissionPreview = usePermissionPreview();
+  const previewSiteLayout = useSiteLayout();
+  const linkTabPreviewState = (tab: ResolvedTab) => {
+    if (!tab.to || !permissionPreview.isActive.value) return null;
+    const fullId =
+      tab.toPage ??
+      previewSiteLayout.findMatchingRoute(stripQueryAndHash(tab.to))?.metadata
+        .fullId;
+    return permissionPreview.entryState(fullId);
+  };
+
+  const isTabCountPending = (tab: ResolvedTab): boolean => {
+    if (!tab.to) return tabCountsData.value == null;
+    return !!tab.countFrom && !linkTabCountsLoaded.value;
+  };
+
+  const tabsWithCount = computed(() =>
+    resolvedTabs.value.map((tab) => ({
+      id: tab.id,
+      label: tab.label,
+      count: tab.to
+        ? linkTabCounts.value[tab.id]
+        : tabCountsData.value?.[tab.id],
+      countPending: isTabCountPending(tab),
+      icon: tab.icon,
+      textColor: tab.textColor,
+      iconColor: tab.iconColor,
+      to: tab.to,
+      previewLocked: linkTabPreviewState(tab) === "hidden",
+      previewPartial: linkTabPreviewState(tab) === "partial",
+    })),
+  );
+  return { tabsWithCount };
+}
+
+export function useTableViewNavBadges<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    "countsData" | "countsQuery" | "tabPresentation" | "tabs" | "configuration"
+  >,
+) {
+  const { tabCountsData } = scope.countsData;
+  const { isCountStateNarrowed } = scope.countsQuery;
+  const { tabsWithCount } = scope.tabPresentation;
+  const { resolvedTabs } = scope.tabs;
+  const { pageId } = scope.configuration;
+  const { setNavBadge } = useNavBadges();
+  const tabNavBadgeCount = (tab: ResolvedTab, count: number | undefined) =>
+    tab.to
+      ? count
+      : navBadgeCount(tabCountsData.value, tab.id, isCountStateNarrowed.value);
+  watch(
+    tabsWithCount,
+    (next) => {
+      for (const tab of next) {
+        const source = resolvedTabs.value.find((entry) => entry.id === tab.id);
+        if (!source?.navBadge) continue;
+        const count = tabNavBadgeCount(source, tab.count);
+        if (count === undefined) continue;
+        const fullId = source.to ? source.toPage : pageId;
+        const tone =
+          // oxlint-disable-next-line anti-slop/no-runtime-typeof -- The shared isObject guard widens the navBadge owner's tone to unknown; typeof preserves its public options union without asserting validation.
+          typeof source.navBadge === "object"
+            ? source.navBadge.tone
+            : undefined;
+        if (fullId) {
+          setNavBadge(fullId, count > 0 ? String(count) : "", tone);
+        }
+      }
+    },
+    { immediate: true },
+  );
+  return {};
+}

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

@@ -0,0 +1,17 @@
+import type { TableViewConfig } from "../../../composables/table-view/types";
+import { type Ref } from "vue";
+import type { TableField } from "#dms-core/app/entries/composables/user/tablePreferences";
+import type { TableViewLiveHoldOptions } from "#dms-core/app/types/live";
+export interface RealtimePresenceActor {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  sessionId: string;
+  since?: number;
+}
+export type RealtimePresenceMap = Record<string, RealtimePresenceActor[]>;
+export type TableStatePreference = [TableField, Ref<unknown>, unknown];
+export type TableViewSetupProps<T extends Data> = TableViewConfig<T> & {
+  realtimeTopic?: string | string[];
+  liveHold?: boolean | TableViewLiveHoldOptions;
+};