@antelopejs/dms 0.11.0 → 0.12.0

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

@@ -0,0 +1,275 @@
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+import { useTableRowActions } from "./useTableViewRowActions";
+
+import type { TableViewScope } from "./tableViewScope";
+
+export function useTableViewRowActions<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "configuration"
+    | "rows"
+    | "refresh"
+    | "rowNavigation"
+    | "listState"
+    | "rowLocator"
+    | "arrival"
+    | "props"
+    | "deferred"
+  >,
+) {
+  const {
+    componentId,
+    location,
+    allColumns,
+    caption,
+    labelKey,
+    formComponents,
+    formContainer,
+    formPages,
+    routeParams,
+    pageId,
+    queryParamFilters,
+    ROW_ID_DEFAULT_KEY,
+  } = scope.configuration;
+  const { $authFetch, tableRows } = scope.rows;
+  const { refreshAfterWrite } = scope.refresh;
+  const {
+    navigableRows,
+    listsServerPages,
+    loadedRowsOffset,
+    loadAdjacentRows,
+  } = scope.rowNavigation;
+  const { shownData } = scope.listState;
+  const { locateRow } = scope.rowLocator;
+  const { urlScope } = scope.arrival;
+  const { props } = scope;
+  const { deferred } = scope;
+  const { exportTable } = useTableViewExport({ componentId });
+  const {
+    openRow,
+    openRowById,
+    editRow,
+    newRow,
+    duplicateRow,
+    deleteRows: deleteRowsAction,
+    archiveRows: archiveRowsAction,
+    restoreRows: restoreRowsAction,
+    handleCustomButton,
+    handleCustomRowAction,
+    handleBulkCustomAction,
+    handleMissingRow,
+    runConfirmedBuiltIn,
+  } = useTableRowActions<T>({
+    api: $authFetch,
+    location,
+    columns: allColumns,
+    caption,
+    labelKey,
+    rowIdKey: props.rowIdKey,
+    refreshCallback: refreshAfterWrite,
+    formComponents,
+    formContainer,
+    formPages,
+    routeParams,
+    componentId: componentId!,
+    pageId: pageId!,
+    queryParamFilters,
+    rowNavigation: {
+      rows: navigableRows,
+      rowIdKey: props.rowIdKey ?? ROW_ID_DEFAULT_KEY,
+      getRow: (id) => tableRows.getRow(id),
+      total: () =>
+        listsServerPages.value
+          ? (shownData.value?.total ?? undefined)
+          : undefined,
+      offset: loadedRowsOffset,
+      loadAdjacent: loadAdjacentRows,
+      locate: locateRow,
+    },
+    recordScope: urlScope,
+    onRecordShown: (id) => deferred.recordLink?.shown(id),
+  });
+  return {
+    handleBulkCustomAction,
+    deleteRowsAction,
+    archiveRowsAction,
+    restoreRowsAction,
+    exportTable,
+    runConfirmedBuiltIn,
+    openRow,
+    duplicateRow,
+    newRow,
+    editRow,
+    handleCustomRowAction,
+    handleMissingRow,
+    handleCustomButton,
+    openRowById,
+  };
+}
+
+export function useTableViewRowCommands<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "configuration"
+    | "tabs"
+    | "urlFilters"
+    | "rowActions"
+    | "filterState"
+    | "deferred"
+  >,
+) {
+  const { enableTableExport, tableProps, archiveMode } = scope.configuration;
+  const { t } = scope.tabs;
+  const { rowSelect } = scope.urlFilters;
+  const { deleteRowsAction, archiveRowsAction, restoreRowsAction } =
+    scope.rowActions;
+  const { showArchived } = scope.filterState;
+  const { deferred } = scope;
+  const customNavItems = computed(() => {
+    const items = [];
+
+    if (enableTableExport) {
+      items.push({
+        label: t("dms.button.export_data"),
+        icon: "i-ph-export",
+        onSelect: () => deferred.handleExportTable(),
+      });
+    }
+
+    return items;
+  });
+
+  const deselectRows = (ids: string[]) => {
+    const removed = new Set(ids);
+    rowSelect.value = Object.fromEntries(
+      Object.entries(rowSelect.value).filter(([id]) => !removed.has(id)),
+    );
+  };
+
+  const deleteRows = async (ids: string[], rows?: T[]) => {
+    const done = await deleteRowsAction(
+      ids,
+      tableProps.value.rowActions?.delete,
+      {
+        permanently: !!archiveMode && showArchived.value,
+        rows,
+      },
+    );
+    if (done) deselectRows(ids);
+  };
+
+  const archiveRows = async (ids: string[]) => {
+    if (await archiveRowsAction(ids, tableProps.value.rowActions?.archive)) {
+      deselectRows(ids);
+    }
+  };
+
+  const restoreRows = async (ids: string[]) => {
+    if (await restoreRowsAction(ids, tableProps.value.rowActions?.restore)) {
+      deselectRows(ids);
+    }
+  };
+  return { deselectRows, deleteRows, customNavItems, archiveRows, restoreRows };
+}
+
+export function useTableViewRowOpen<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "rowActions"
+    | "configuration"
+    | "query"
+    | "listState"
+    | "queryFilters"
+    | "props"
+  >,
+) {
+  const { exportTable, runConfirmedBuiltIn, openRow, duplicateRow, newRow } =
+    scope.rowActions;
+  const { location, tableProps, ROW_ID_DEFAULT_KEY } = scope.configuration;
+  const { queryRequest, archiveQuery } = scope.query;
+  const { shownResults } = scope.listState;
+  const { queryParamDefaults } = scope.queryFilters;
+  const { props } = scope;
+  const handleExportTable = () =>
+    exportTable(location, { ...queryRequest.value, ...archiveQuery.value });
+  const handleExportSelection = (ids: string[]) =>
+    exportTable(location, queryRequest.value, ids);
+
+  const rowActionConfig = (key: "details" | "duplicate" | "add" | "edit") =>
+    tableProps.value.rowActions?.[key];
+  const handleRowClick = (item: T) =>
+    runConfirmedBuiltIn(rowActionConfig("details"), item, () => openRow(item));
+
+  const handleRowDuplicate = (itemId: string) => {
+    const idKey = props.rowIdKey ?? ROW_ID_DEFAULT_KEY;
+    const shown = shownResults.value?.find(
+      (row) => String(get(row, idKey)) === itemId,
+    );
+    return runConfirmedBuiltIn(
+      rowActionConfig("duplicate"),
+      shown ?? { [idKey]: itemId },
+      () => duplicateRow(itemId),
+    );
+  };
+  const handleRowAdd = () =>
+    runConfirmedBuiltIn(rowActionConfig("add"), undefined, () =>
+      newRow(queryParamDefaults.value),
+    );
+  return {
+    handleExportTable,
+    rowActionConfig,
+    handleRowClick,
+    handleRowAdd,
+    handleRowDuplicate,
+    handleExportSelection,
+  };
+}
+
+export function useTableViewRowEdit<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "rowRealtime"
+    | "presenceEvents"
+    | "rowActions"
+    | "rowOpen"
+    | "queryFilters"
+    | "footer"
+    | "bulkSelection"
+    | "urlFilters"
+  >,
+) {
+  const { getRowId } = scope.rowRealtime;
+  const { otherEditorsForRow } = scope.presenceEvents;
+  const { runConfirmedBuiltIn, editRow } = scope.rowActions;
+  const { rowActionConfig } = scope.rowOpen;
+  const { queryParamDefaults } = scope.queryFilters;
+  const { baseQuery } = scope.footer;
+  const { allMatching } = scope.bulkSelection;
+  const { rowSelect } = scope.urlFilters;
+  const { warnBeforeEdit } = usePresenceEditWarning();
+
+  const handleRowEdit = async (item: T) => {
+    const itemId = getRowId(item);
+    if (itemId) {
+      const others = otherEditorsForRow(itemId);
+      if (others.length > 0 && !(await warnBeforeEdit(others))) return;
+    }
+    return runConfirmedBuiltIn(rowActionConfig("edit"), item, () =>
+      editRow(item, queryParamDefaults.value),
+    );
+  };
+
+  const EMPTY_ITEMS: T[] = [];
+
+  watch(
+    baseQuery,
+    () => {
+      allMatching.value = false;
+    },
+    { deep: true },
+  );
+  watch(rowSelect, (selection) => {
+    if (Object.keys(selection).length === 0) allMatching.value = false;
+  });
+  return { handleRowEdit, EMPTY_ITEMS };
+}

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

@@ -0,0 +1,111 @@
+import { keptViewId } from "./useTableViews";
+import { useTablePreferences } from "./useTablePreferences";
+import {
+  isLinkedArrival,
+  linkedArrivalPreferences,
+  linkFollowingPreferences,
+  linkKeyScope,
+  urlFilterScope,
+} from "./utils/linkedArrival";
+import { pageArrivalKind } from "./utils/pageArrival";
+import { useTableLinkedVisit } from "./useTableLinkedVisit";
+import { readTableUrlTab } from "./useTableUrlTab";
+import type { TableViewScope } from "./tableViewScope";
+
+export function useTableViewArrival<T extends Data>(
+  scope: Pick<TableViewScope<T>, "configuration" | "props" | "deferred">,
+) {
+  const { componentId, pageId, queryParamFilters } = scope.configuration;
+  const { props } = scope;
+  const { deferred } = scope;
+  const route = useDmsRoute();
+  const urlScope = {
+    tableId: props.tableId,
+    isSoleTableView: props.isSoleTableView,
+  };
+  const ALL_TAB_ID = "all";
+
+  const keptPreferences = useTablePreferences(componentId, pageId);
+
+  const isLinked = isLinkedArrival({
+    query: route.query,
+    urlScope,
+    queryParamFilters,
+    isVisit: pageArrivalKind() === "visit",
+    rememberedTab: keptPreferences.get<string>("activeTab", ALL_TAB_ID),
+    keptLinkScope: keptPreferences.get<string | undefined>(
+      "linkScope",
+      undefined,
+    ),
+    shownLink: keptPreferences.get<string | undefined>("shownLink", undefined),
+  });
+  const tablePreferences = linkFollowingPreferences(
+    isLinked ? linkedArrivalPreferences(keptPreferences) : keptPreferences,
+    {
+      isLinkedArrival: isLinked,
+      urlScope,
+      linkScope: () => urlFilterScope(route.query, queryParamFilters),
+      linkKeys: () => linkKeyScope(route.query, urlScope, queryParamFilters),
+
+      listingState: () => [
+        ["activeView", keptViewId(deferred.activeViewId.value), undefined],
+        ["activeTab", deferred.activeTabId.value, ALL_TAB_ID],
+        ["columnFilters", deferred.columnFilters.value, []],
+        ["sorting", deferred.sorting.value, deferred.defaultSortState],
+        [
+          "pagination",
+          deferred.paginationState.value,
+          deferred.DEFAULT_PAGINATION,
+        ],
+        ["paginationScope", undefined, undefined],
+      ],
+    },
+  );
+  onMounted(() => void tablePreferences.settleArrival());
+  const { sendComponentEvent } = useComponentEvent(componentId);
+  const { processI18n } = useTranslation();
+  return {
+    processI18n,
+    tablePreferences,
+    route,
+    urlScope,
+    ALL_TAB_ID,
+    sendComponentEvent,
+  };
+}
+
+export function useTableViewLinkedVisit<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    "arrival" | "configuration" | "views" | "tabs"
+  >,
+) {
+  const { route, urlScope, tablePreferences, ALL_TAB_ID } = scope.arrival;
+  const { queryParamFilters } = scope.configuration;
+  const { activeViewId, tableViewItems, openLinkedView } = scope.views;
+  const { activeTabId, isOpenableTab, resolvedTabs } = scope.tabs;
+  useTableLinkedVisit({
+    route,
+    urlScope,
+    queryParamFilters,
+    activeView: () => activeViewId.value,
+    activeTab: () => activeTabId.value,
+    canOpenView: (id) => tableViewItems.value.some((view) => view.id === id),
+    canOpenTab: isOpenableTab,
+    follow: (query) => {
+      void tablePreferences.followLink(() => {
+        openLinkedView(query);
+        const tab = readTableUrlTab(query, urlScope);
+        activeTabId.value = tab && isOpenableTab(tab) ? tab : ALL_TAB_ID;
+      });
+    },
+  });
+
+  watch(resolvedTabs, (next) => {
+    if (next.length === 0) return;
+    if (!next.some((tab) => !tab.to && tab.id === activeTabId.value)) {
+      activeTabId.value = ALL_TAB_ID;
+    }
+  });
+  return {};
+}

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

@@ -0,0 +1,90 @@
+import type { TableViewScope } from "./tableViewScope";
+export function tableViewBindings<T extends Data>(scope: TableViewScope<T>) {
+  return {
+    listableColumns: scope.configuration.listableColumns,
+    initialVisibility: scope.configuration.initialVisibility,
+    tableProps: scope.configuration.tableProps,
+    enableTableExport: scope.configuration.enableTableExport,
+    customButtons: scope.configuration.customButtons,
+    kanbanGroupByOptions: scope.displayOptions.kanbanGroupByOptions,
+    activeDisplayId: scope.displayOptions.activeDisplayId,
+    availableDisplays: scope.displayOptions.availableDisplays,
+    activeCapabilities: scope.displayComponent.activeCapabilities,
+    activeDisplayComponent: scope.displayComponent.activeDisplayComponent,
+    kanbanGroupBy: scope.displayPreferences.kanbanGroupBy,
+    density: scope.displayPreferences.density,
+    resolvedChrome: scope.displayPreferences.resolvedChrome,
+    queryParamHiddenFilters: scope.urlFilters.queryParamHiddenFilters,
+    shownUrlFilters: scope.urlFilters.shownUrlFilters,
+    removeUrlFilter: scope.urlFilters.removeUrlFilter,
+    paginationState: scope.urlFilters.paginationState,
+    rowSelect: scope.urlFilters.rowSelect,
+    groupedGroupByOptions: scope.groupingOptions.groupedGroupByOptions,
+    groupedGroupBy: scope.groupingOptions.groupedGroupBy,
+    tableDefaultSort: scope.defaultSorting.tableDefaultSort,
+    defaultSortLabel: scope.defaultSorting.defaultSortLabel,
+    defaultSortKind: scope.defaultSorting.defaultSortKind,
+    sorting: scope.defaultSorting.sorting,
+    columnFilters: scope.filterState.columnFilters,
+    columnVisibility: scope.filterState.columnVisibility,
+    columnSizing: scope.filterState.columnSizing,
+    columnOrder: scope.filterState.columnOrder,
+    filtersRowOpen: scope.filterState.filtersRowOpen,
+    globalFilter: scope.filterState.globalFilter,
+    showArchived: scope.filterState.showArchived,
+    activeViewId: scope.views.activeViewId,
+    isViewModified: scope.views.isViewModified,
+    canSaveViews: scope.views.canSaveViews,
+    selectView: scope.views.selectView,
+    resetView: scope.views.resetView,
+    saveView: scope.views.saveView,
+    saveAsNewView: scope.views.saveAsNewView,
+    deleteView: scope.views.deleteView,
+    activeTabId: scope.tabs.activeTabId,
+    resolvedQuickFilters: scope.quickFilters.resolvedQuickFilters,
+    openRowId: scope.liveHold.openRowId,
+    tableRoot: scope.liveHold.tableRoot,
+    liveHold: scope.liveHold.liveHold,
+    data: scope.listState.data,
+    isFirstPageLoading: scope.listState.isFirstPageLoading,
+    isListLoading: scope.listState.isListLoading,
+    listLoadError: scope.listState.listLoadError,
+    listNotFound: scope.listState.listNotFound,
+    shownResults: scope.listState.shownResults,
+    activeDisplayBlockedByError:
+      scope.listPagination.activeDisplayBlockedByError,
+    viewItems: scope.countsData.viewItems,
+    viewsLayout: scope.countsData.viewsLayout,
+    hasViews: scope.countsData.hasViews,
+    activeDisplayRef: scope.footer.activeDisplayRef,
+    resolvedFooter: scope.footer.resolvedFooter,
+    accumulation: scope.rowLocator.accumulation,
+    reorderState: scope.reorder.reorderState,
+    grouping: scope.grouping.grouping,
+    refreshByUser: scope.refresh.refreshByUser,
+    tabsWithCount: scope.tabPresentation.tabsWithCount,
+    handleCustomButton: scope.rowActions.handleCustomButton,
+    handleCustomRowAction: scope.rowActions.handleCustomRowAction,
+    bulkCustomActions: scope.bulkSelection.bulkCustomActions,
+    allMatching: scope.bulkSelection.allMatching,
+    runBulkAction: scope.bulkSelection.runBulkAction,
+    canToggleArchived: scope.bulkSelection.canToggleArchived,
+    customNavItems: scope.rowCommands.customNavItems,
+    deleteRows: scope.rowCommands.deleteRows,
+    archiveRows: scope.rowCommands.archiveRows,
+    restoreRows: scope.rowCommands.restoreRows,
+    handleExportTable: scope.rowOpen.handleExportTable,
+    handleExportSelection: scope.rowOpen.handleExportSelection,
+    handleRowClick: scope.rowOpen.handleRowClick,
+    handleRowDuplicate: scope.rowOpen.handleRowDuplicate,
+    handleRowAdd: scope.rowOpen.handleRowAdd,
+    presenceByRowFiltered: scope.presenceEvents.presenceByRowFiltered,
+    expandableConfig: scope.expansion.expandableConfig,
+    expandedModel: scope.expansion.expandedModel,
+    expandedDetails: scope.expansion.expandedDetails,
+    expandedRowLoadState: scope.expandedDetails.expandedRowLoadState,
+    expandedRowProps: scope.expandedDetails.expandedRowProps,
+    handleRowEdit: scope.rowEdit.handleRowEdit,
+    contextForSlot: scope.displayContext.contextForSlot,
+  };
+}

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

@@ -0,0 +1,78 @@
+import { defineAsyncComponent } from "vue";
+import { useTableViewConfig } from "./useTableViewConfig";
+import type { TableViewScope } from "./tableViewScope";
+
+export function useTableViewConfiguration<T extends Data>(
+  scope: Pick<TableViewScope<T>, "props">,
+) {
+  const REALTIME_ROW_TOPIC_PREFIX = "tableview:row:";
+  const REALTIME_PRESENCE_TOPIC_PREFIX = "tableview:presence:";
+  const ROW_ID_DEFAULT_KEY = "_id";
+  const KanbanDisplay = defineAsyncComponent(
+    () => import("../../../components/table-view/KanbanDisplay.vue"),
+  );
+  const REALTIME_EVENT_TYPE = {
+    CREATED: "created",
+    UPDATED: "updated",
+    DELETED: "deleted",
+    ACQUIRED: "acquired",
+    RELEASED: "released",
+    SNAPSHOT: "snapshot",
+  } as const;
+  const { props } = scope;
+  const {
+    allColumns,
+    listableColumns,
+    initialVisibility,
+    tableProps,
+    location,
+    caption,
+    labelKey,
+    enableTableExport,
+    archiveMode,
+    defaultFilters,
+    customButtons,
+    formComponents,
+    formContainer,
+    formPages,
+    componentId,
+    pageId,
+    defaultSort,
+    queryParamFilters,
+    routeParamFilters,
+    routeParams,
+    tabs,
+    resolvedDisplays,
+    defaultDisplay,
+  } = useTableViewConfig<T>(props);
+  return {
+    componentId,
+    pageId,
+    queryParamFilters,
+    allColumns,
+    resolvedDisplays,
+    defaultDisplay,
+    KanbanDisplay,
+    caption,
+    routeParamFilters,
+    routeParams,
+    defaultSort,
+    defaultFilters,
+    initialVisibility,
+    listableColumns,
+    tabs,
+    location,
+    archiveMode,
+    ROW_ID_DEFAULT_KEY,
+    tableProps,
+    labelKey,
+    formComponents,
+    formContainer,
+    formPages,
+    enableTableExport,
+    REALTIME_ROW_TOPIC_PREFIX,
+    REALTIME_PRESENCE_TOPIC_PREFIX,
+    REALTIME_EVENT_TYPE,
+    customButtons,
+  };
+}

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

@@ -0,0 +1,151 @@
+import { refDebounced } from "@vueuse/core";
+import type { TableViewListResponse } from "../../../composables/table-view/types";
+import {
+  buildTableCountQueries,
+  isCountNarrowed,
+  VIEW_COUNT_ID_PREFIX,
+  type TableCountState,
+} from "./utils/tableCounts";
+import { viewFilters } from "./utils/views";
+import { type TableViewItem } from "../../components/table/Views.vue";
+import { useTableCountsData } from "./useTableListData";
+import type { TableViewScope } from "./tableViewScope";
+
+export function useTableViewCountsQuery<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    "urlFilters" | "tabs" | "querySorting" | "views" | "pinnedFilters"
+  >,
+) {
+  const { queryParamHiddenFilters, routeParamHiddenFilters } = scope.urlFilters;
+  const { activeTabFilters, resolvedTabs } = scope.tabs;
+  const { effectiveColumnFilters, effectiveGlobalFilter } = scope.querySorting;
+  const { tableViewItems, activeViewId } = scope.views;
+  const { pinnedDefaultFilters } = scope.pinnedFilters;
+  const scopeFilters = computed<TableFilter[]>(() => [
+    ...queryParamHiddenFilters.value,
+    ...routeParamHiddenFilters.value,
+  ]);
+  const countState = computed<TableCountState>(() => ({
+    scopeFilters: scopeFilters.value,
+    tabFilters: activeTabFilters.value,
+    columnFilters: effectiveColumnFilters.value,
+    search: effectiveGlobalFilter.value,
+  }));
+  const isCountStateNarrowed = computed(() =>
+    isCountNarrowed(countState.value),
+  );
+
+  const COUNTS_DEBOUNCE_MS = 200;
+  const debouncedCountsQuery = refDebounced(
+    computed(() =>
+      buildTableCountQueries({
+        ...countState.value,
+        tabs: resolvedTabs.value
+          .filter((tab) => !tab.to)
+          .map((tab) => ({
+            id: tab.id,
+            filters: tab.filters,
+            hasNavBadge: !!tab.navBadge,
+          })),
+        views: tableViewItems.value
+          .filter((view) => view.count)
+          .map((view) => ({
+            id: view.id,
+            filters: viewFilters(view, pinnedDefaultFilters),
+            search: view.search,
+          })),
+        activeViewId: activeViewId.value,
+      }),
+    ),
+    COUNTS_DEBOUNCE_MS,
+  );
+  const tabCountsQuery = computed(() => debouncedCountsQuery.value);
+  return { tabCountsQuery, isCountStateNarrowed };
+}
+
+export function useTableViewCountsData<T extends Data>(
+  scope: Pick<
+    TableViewScope<T>,
+    | "configuration"
+    | "rows"
+    | "countsQuery"
+    | "query"
+    | "liveHold"
+    | "views"
+    | "props"
+  >,
+) {
+  const { componentId, pageId } = scope.configuration;
+  const { tableRows } = scope.rows;
+  const { tabCountsQuery } = scope.countsQuery;
+  const { archiveQuery } = scope.query;
+  const { liveHold } = scope.liveHold;
+  const { tableViewItems, canSaveViews } = scope.views;
+  const { props } = scope;
+  const { data: tabCountsData, refresh: refreshTabCounts } =
+    useTableCountsData<T>({
+      componentId,
+      pageId,
+      rows: tableRows,
+      queries: tabCountsQuery,
+      archiveQuery,
+      heldQuery: liveHold.heldQuery,
+    });
+
+  const viewItems = computed<TableViewItem[]>(() =>
+    tableViewItems.value.map((view) => ({
+      id: view.id,
+      label: view.label,
+      icon: view.icon,
+      tone: view.tone,
+      dot: view.dot,
+      isUserView: view.isUserView,
+      count: view.count
+        ? tabCountsData.value?.[`${VIEW_COUNT_ID_PREFIX}${view.id}`]
+        : undefined,
+      countPending: !!view.count && tabCountsData.value == null,
+    })),
+  );
+  const viewsLayout = props.views?.layout ?? "tabs";
+  const hasViews =
+    !!props.views && (props.views.items.length > 0 || canSaveViews);
+  return { refreshTabCounts, tabCountsData, viewItems, viewsLayout, hasViews };
+}
+
+export function useTableViewLinkCounts<T extends Data>(
+  scope: Pick<TableViewScope<T>, "tabs" | "rows">,
+) {
+  const { resolvedTabs } = scope.tabs;
+  const { $authFetch } = scope.rows;
+  const linkTabCounts = ref<Record<string, number>>({});
+
+  const linkTabCountsLoaded = ref(false);
+  const LINK_TAB_COUNT_QUERY = { limit: 1, offset: 0 };
+
+  const refreshLinkTabCounts = async () => {
+    const linked = resolvedTabs.value.filter((tab) => tab.to && tab.countFrom);
+    if (linked.length === 0) {
+      linkTabCountsLoaded.value = true;
+      return;
+    }
+    const entries = await Promise.all(
+      linked.map(async (tab) => {
+        try {
+          const response = await $authFetch<TableViewListResponse<unknown>>(
+            `${tab.countFrom}/list`,
+            { query: LINK_TAB_COUNT_QUERY },
+          );
+          return [tab.id, response.total] as const;
+        } catch {
+          return undefined;
+        }
+      }),
+    );
+    linkTabCounts.value = Object.fromEntries(
+      entries.filter((entry) => entry !== undefined),
+    );
+    linkTabCountsLoaded.value = true;
+  };
+  return { refreshLinkTabCounts, linkTabCountsLoaded, linkTabCounts };
+}