@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/layers/dms-ui/app/build/components/table/Pagination.vue

@@ -1,19 +1,44 @@
 <script setup lang="ts" generic="T extends Data">
-import { injectLocal } from "@vueuse/core";
+import { injectLocal, useIntersectionObserver } from "@vueuse/core";
 import { tv } from "tailwind-variants";
 import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
-import type { ShallowRef } from "vue";
+import { useTemplateRef, type ShallowRef } from "vue";
 
 import type { TableSharedData, Data } from "./Table.vue";
 import { DEFAULT_PAGE_SIZE } from "../../composables/table/constants";
+import { pageSizeOptions } from "../../composables/table/utils/pageSizeOptions";
+import { toneTextClass } from "../../utils/tone";
 
+// v2 footer band: count and page size on the left, pager on the right.
 const theme = tv({
   slots: {
-    root: "text-muted py-5 text-xs font-light",
-    base: "grid gap-4 sm:flex sm:items-center",
-    infoContainer: "flex w-full items-center justify-between",
+    root: "flex flex-wrap items-center gap-x-4 gap-y-2.5 border-t border-default bg-(--dms-bg-muted) py-2.5 ps-[18px] pe-3.5 text-[12.5px] text-muted",
     info: "shrink-0",
-    actions: "flex items-center",
+    count: "font-mono font-semibold tabular-nums text-default",
+    pageSize: "flex items-center gap-2",
+    pageSizeSelect: "w-[68px] font-mono",
+    separator: "h-3.5 w-px bg-(--ui-border-accented)",
+    actions: "ms-auto flex items-center gap-0.5",
+    pageInfo: "me-1.5 tabular-nums",
+    pageNumber: "font-mono font-semibold text-default",
+    // Phones get 32px touch targets (28px from sm up).
+    navButton: "text-muted hover:text-highlighted max-sm:size-8",
+    hint: "ms-auto inline-flex min-w-0 items-center gap-1.5 text-xs text-muted",
+    hintIcon: "size-3.5 shrink-0 text-dimmed",
+    // Phones wrap the hint onto a second line rather than cut it.
+    hintText: "truncate max-sm:whitespace-normal",
+    // First page on its way: the band keeps its height with placeholders.
+    placeholderCount: "h-3 w-20 rounded-[4px]",
+    placeholderPager: "ms-auto h-3 w-24 rounded-[4px]",
+    placeholderRoot: "min-h-[49px]",
+    // Figures computed over the listed rows, after the count.
+    summary: "inline-flex items-center gap-1.5 whitespace-nowrap",
+    summarySeparator: "text-dimmed",
+    summaryValue: "font-mono font-semibold tabular-nums text-default",
+    summaryPlaceholder: "h-3 w-10 rounded-[4px]",
+    legend: "flex flex-wrap items-center gap-x-3 gap-y-1",
+    legendItem: "inline-flex items-center gap-1.5",
+    legendDot: "size-2 shrink-0 rounded-full bg-current",
   },
 });
 
@@ -25,14 +50,72 @@ const tableSharedDataRef =
   injectLocal<ShallowRef<TableSharedData<T>>>("tableSharedData");
 const tableSharedData = computed(() => tableSharedDataRef?.value);
 
-const pageCount = computed(() => {
-  const rowCount = tableSharedData.value?.rowCount ?? 0;
-  const pageSize =
-    tableSharedData.value?.paginationState.value.pageSize || DEFAULT_PAGE_SIZE;
-  return Math.ceil(rowCount / pageSize);
+const { t, locale } = useI18n();
+const numberFormat = computed(() => new Intl.NumberFormat(locale.value));
+
+const rowCount = computed(() => tableSharedData.value?.rowCount ?? 0);
+const firstPageLoading = computed(
+  () => !!tableSharedData.value?.firstPageLoading,
+);
+
+const pageSize = computed({
+  get: () =>
+    tableSharedData.value?.paginationState.value.pageSize || DEFAULT_PAGE_SIZE,
+  set: (value: number) => {
+    const state = tableSharedData.value?.paginationState;
+    if (!state) return;
+    state.value = { ...state.value, pageSize: value, pageIndex: 0 };
+  },
+});
+
+const pageSizeItems = computed(() =>
+  pageSizeOptions(tableSharedData.value?.defaultPageSize, pageSize.value),
+);
+
+const pageCount = computed(() =>
+  Math.max(Math.ceil(rowCount.value / pageSize.value), 1),
+);
+
+const { processI18n } = useTranslation();
+
+// A reduced chrome drops the page size picker, and the pager while a single
+// page holds every row.
+const showPageSize = computed(
+  () => tableSharedData.value?.chrome.value.pageSize ?? true,
+);
+const showPager = computed(() => showPageSize.value || pageCount.value > 1);
+
+// "7 members": the configured count text, pluralized on the count.
+const countLabelKey = computed(() => {
+  const key = tableSharedData.value?.footer?.countLabel;
+  return key?.startsWith("$") ? key.slice(1) : key;
+});
+const summaries = computed(
+  () => tableSharedData.value?.footer?.summaries ?? [],
+);
+const legend = computed(() => tableSharedData.value?.footer?.legend ?? []);
+const legendDotClass = (color?: string) =>
+  toneTextClass(color) || "text-dimmed";
+
+// A list growing by pages (loadMore, infinite) shows how far it got and
+// how to go on, instead of the pager.
+const accumulation = computed(() => tableSharedData.value?.accumulation);
+const sentinel = useTemplateRef<HTMLElement>("sentinel");
+useIntersectionObserver(sentinel, ([entry]) => {
+  const growing = accumulation.value;
+  if (entry?.isIntersecting && growing?.hasMore && !growing.loading) {
+    growing.load();
+  }
+});
+
+const hint = computed(() => {
+  const text = tableSharedData.value?.footer?.hint;
+  return text ? processI18n(text) : undefined;
 });
 
-const { t } = useI18n();
+const currentPage = computed(
+  () => (tableSharedData.value?.paginationState.value.pageIndex || 0) + 1,
+);
 
 const uiTablePaginationVariant = tv({
   extend: tv(theme),
@@ -42,40 +125,166 @@ const uiTablePagination = computed(() => uiTablePaginationVariant());
 </script>
 
 <template>
+  <div
+    v-if="firstPageLoading"
+    aria-hidden="true"
+    :class="[uiTablePagination.root(), uiTablePagination.placeholderRoot()]"
+  >
+    <USkeleton :class="uiTablePagination.placeholderCount()" />
+    <USkeleton :class="uiTablePagination.placeholderPager()" />
+  </div>
   <nav
-    v-if="uiTablePagination"
+    v-else-if="rowCount"
     :class="uiTablePagination.root()"
     :aria-label="t('dms.pagination.label')"
   >
-    <div :class="uiTablePagination.base()">
+    <i18n-t
+      v-if="accumulation"
+      keypath="dms.pagination.shown_of"
+      scope="global"
+      tag="span"
+      :class="uiTablePagination.info()"
+    >
+      <template #shown>
+        <span :class="uiTablePagination.count()">
+          {{ numberFormat.format(accumulation.shown) }}
+        </span>
+      </template>
+      <template #count>
+        <span :class="uiTablePagination.count()">
+          {{ numberFormat.format(rowCount) }}
+        </span>
+      </template>
+    </i18n-t>
+    <span v-else-if="countLabelKey" :class="uiTablePagination.info()">
+      {{ t(countLabelKey, { count: rowCount }, rowCount) }}
+    </span>
+    <i18n-t
+      v-else
+      keypath="dms.pagination.count"
+      scope="global"
+      tag="span"
+      :class="uiTablePagination.info()"
+    >
+      <template #count>
+        <span :class="uiTablePagination.count()">
+          {{ numberFormat.format(rowCount) }}
+        </span>
+      </template>
+    </i18n-t>
+
+    <span
+      v-for="summary in summaries"
+      :key="summary.id"
+      :class="uiTablePagination.summary()"
+    >
+      <span aria-hidden="true" :class="uiTablePagination.summarySeparator()">
+        ·
+      </span>
+      {{ summary.label }}
+      <USkeleton
+        v-if="summary.value === undefined"
+        aria-hidden="true"
+        :class="uiTablePagination.summaryPlaceholder()"
+      />
+      <span v-else :class="uiTablePagination.summaryValue()">
+        <component :is="() => summary.value" />
+      </span>
+    </span>
+
+    <span v-if="legend.length" :class="uiTablePagination.legend()">
+      <span
+        v-for="item in legend"
+        :key="item.label"
+        :class="uiTablePagination.legendItem()"
+      >
+        <span
+          aria-hidden="true"
+          :class="[uiTablePagination.legendDot(), legendDotClass(item.color)]"
+        />
+        {{ item.label }}
+      </span>
+    </span>
+
+    <template v-if="accumulation">
+      <UButton
+        v-if="accumulation.mode === 'loadMore' && accumulation.hasMore"
+        :label="t('dms.pagination.load_more')"
+        :loading="accumulation.loading"
+        icon="i-ph-arrow-down"
+        color="neutral"
+        variant="outline"
+        size="xs"
+        :class="uiTablePagination.actions()"
+        @click="accumulation.load()"
+      />
       <div
-        v-if="tableSharedData?.rowCount"
-        :class="uiTablePagination.infoContainer()"
+        v-else-if="accumulation.mode === 'infinite' && accumulation.hasMore"
+        ref="sentinel"
+        :class="uiTablePagination.actions()"
       >
-        <div :class="uiTablePagination.info()">
-          {{
-            `${t("dms.pagination.count", { count: tableSharedData?.rowCount ?? 0 })} | ${t("dms.pagination.size", { pageSize: tableSharedData?.paginationState.value.pageSize || 0 })}`
-          }}
-        </div>
-        <div :class="uiTablePagination.info()">
-          {{
-            t("dms.pagination.current_page", {
-              currentPage:
-                (tableSharedData?.paginationState.value.pageIndex || 0) + 1,
-              totalPages: pageCount,
-            })
-          }}
-        </div>
+        <UIcon
+          v-if="accumulation.loading"
+          name="i-ph-spinner"
+          class="text-dimmed size-4 animate-spin"
+        />
       </div>
+    </template>
 
-      <div v-if="pageCount > 1" :class="uiTablePagination.actions()">
+    <span
+      v-if="showPageSize && !accumulation"
+      aria-hidden="true"
+      :class="uiTablePagination.separator()"
+    />
+
+    <span v-if="hint" :class="uiTablePagination.hint()">
+      <UIcon name="i-ph-info" :class="uiTablePagination.hintIcon()" />
+      <span :class="uiTablePagination.hintText()" :title="hint">
+        {{ hint }}
+      </span>
+    </span>
+
+    <label
+      v-if="showPageSize && !accumulation"
+      :class="uiTablePagination.pageSize()"
+    >
+      {{ t("dms.table.page_size_title") }}
+      <USelect
+        v-model="pageSize"
+        :items="pageSizeItems"
+        size="xs"
+        :class="uiTablePagination.pageSizeSelect()"
+      />
+    </label>
+
+    <div
+      v-if="showPager && !accumulation"
+      :class="uiTablePagination.actions({ class: hint ? 'ms-0' : undefined })"
+    >
+      <i18n-t
+        keypath="dms.pagination.current_page"
+        scope="global"
+        tag="span"
+        :class="uiTablePagination.pageInfo()"
+      >
+        <template #currentPage>
+          <span :class="uiTablePagination.pageNumber()">{{ currentPage }}</span>
+        </template>
+        <template #totalPages>
+          <span :class="uiTablePagination.pageNumber()">{{ pageCount }}</span>
+        </template>
+      </i18n-t>
+
+      <template v-if="pageCount > 1">
         <UButton
           :disabled="!tableSharedData?.table.getCanPreviousPage()"
           :icon="appConfig.ui.icons.chevronDoubleLeft"
           :aria-label="t('dms.pagination.first_page')"
           color="neutral"
           variant="ghost"
-          class="w-full sm:w-auto"
+          size="sm"
+          square
+          :class="uiTablePagination.navButton()"
           @click="tableSharedData?.table.firstPage()"
         />
         <UButton
@@ -84,7 +293,9 @@ const uiTablePagination = computed(() => uiTablePaginationVariant());
           :aria-label="t('dms.pagination.previous_page')"
           color="neutral"
           variant="ghost"
-          class="w-full sm:w-auto"
+          size="sm"
+          square
+          :class="uiTablePagination.navButton()"
           @click="tableSharedData?.table.previousPage()"
         />
         <UButton
@@ -93,7 +304,9 @@ const uiTablePagination = computed(() => uiTablePaginationVariant());
           :aria-label="t('dms.pagination.next_page')"
           color="neutral"
           variant="ghost"
-          class="w-full justify-end sm:w-auto"
+          size="sm"
+          square
+          :class="uiTablePagination.navButton()"
           @click="tableSharedData?.table.nextPage()"
         />
         <UButton
@@ -102,10 +315,12 @@ const uiTablePagination = computed(() => uiTablePaginationVariant());
           :aria-label="t('dms.pagination.last_page')"
           color="neutral"
           variant="ghost"
-          class="w-full justify-end sm:w-auto"
+          size="sm"
+          square
+          :class="uiTablePagination.navButton()"
           @click="tableSharedData?.table.lastPage()"
         />
-      </div>
+      </template>
     </div>
   </nav>
 </template>

package/frontend-vue/layers/dms-ui/app/build/components/table/RowSelection.vue

@@ -3,87 +3,265 @@ import { isActionEnabled } from "#dms-core/app/utils/row-action-rule-evaluator";
 import type { RowSelectionState } from "@tanstack/vue-table";
 import type { TableRowActionOptions, Data } from "./Table.vue";
 import { useTableContext } from "../../composables/table/useTableContext";
+import { selectedRowIds } from "../../composables/table-view/utils/bulkActions";
+import { isAllMatchingAction } from "../../composables/actions/bulkSelection";
+import type { CustomRowAction } from "../../../types/row-action";
 import { tv } from "tailwind-variants";
 import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
 
+// v2 bulk bar: an accent-tinted band across the card, between the chrome and
+// the column headers: a page checkbox, "n of page selected" and the bulk
+// actions. In archive mode it turns amber and offers restore instead.
 const theme = tv({
   slots: {
-    base: "bg-default bottom- absolute left-8 z-20",
-    select: "text-primary",
+    base: "flex min-h-11 flex-wrap items-center gap-x-2.5 gap-y-2 border-b border-(--dms-accent-line) bg-linear-to-r from-(--dms-accent-tint-strong) to-(--dms-accent-tint) to-60% py-1.5 ps-[18px] pe-3.5 text-[13px]",
+    count: "inline-flex items-center gap-2.5 font-semibold text-highlighted",
+    countNumber: "font-mono tabular-nums text-primary",
+    // Phones keep the count and the clear button on the first line, the
+    // actions wrapping on a line of their own below.
+    actions:
+      "ms-auto flex flex-wrap items-center gap-1.5 max-sm:order-last max-sm:empty:hidden max-sm:ms-0 max-sm:w-full",
+    clear: "text-muted hover:text-highlighted max-sm:ms-auto sm:-ms-1",
+    selectAll: "font-medium text-primary hover:underline",
+  },
+  variants: {
+    archived: {
+      true: {
+        base: "border-(--dms-warning-line) from-(--dms-warning-tint) to-transparent to-70%",
+        countNumber: "text-warning",
+      },
+    },
   },
 });
 
 interface TableRowSelectionProps {
   rowActions?: TableRowActionOptions;
+  /** Custom actions offered on the bar (backend `bulk`). */
+  bulkActions?: CustomRowAction[];
+  /** Rows the table's filters match, every page included. */
+  total?: number;
   canExport?: boolean;
+  /** The table lists archived rows: restore replaces archive and export. */
+  archived?: boolean;
 }
 
-defineProps<TableRowSelectionProps>();
+const props = defineProps<TableRowSelectionProps>();
 
 const appConfig = useDmsAppConfig() as DmsAppConfig & {
   ui: { tableRowSelection: Partial<typeof theme> };
 };
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
+const { processI18n } = useTranslation();
 
 const rowSelectionState = defineModel<RowSelectionState>("rowSelection", {
   default: (): RowSelectionState => ({}),
 });
+// Every row the filters match is selected, not only the ones ticked.
+const allMatching = defineModel<boolean>("allMatching", { default: false });
 
 const tableSharedData = useTableContext<Data>();
 
-const onDeleteSelection = () => {
-  tableSharedData?.emits("delete", Object.keys(rowSelectionState.value));
+// Every selected row, other pages included: a bulk action covers them all.
+const selectedIds = computed(() => selectedRowIds(rowSelectionState.value));
+const selectedCount = computed(() => selectedIds.value.length);
+const pageRowCount = computed(
+  () => tableSharedData?.table.getRowModel().rows.length ?? 0,
+);
+const isWholePageSelected = computed(
+  () => !!tableSharedData?.table.getIsAllPageRowsSelected(),
+);
+
+const clearSelection = () => {
+  allMatching.value = false;
   rowSelectionState.value = {};
 };
 
-const onExportSelection = () => {
-  tableSharedData?.emits("export", Object.keys(rowSelectionState.value));
-  rowSelectionState.value = {};
+// The bar's checkbox completes the page selection, or clears it once full.
+const togglePageSelection = () => {
+  if (isWholePageSelected.value) {
+    clearSelection();
+    return;
+  }
+  tableSharedData?.table.toggleAllPageRowsSelected(true);
 };
 
+// Delete, archive and restore ask first: the table drops the rows from the
+// selection once the action went through, a cancelled one keeps it. An export
+// asks nothing and is done with the selection.
+const emitForSelection = (
+  event: "delete" | "archive" | "restore" | "export",
+) => {
+  tableSharedData?.emits(event, selectedIds.value);
+  if (event === "export") clearSelection();
+};
+
+// Rows selected on other pages (or gone since) are not among the page's:
+// "3 of 2 selected" would read as nonsense, so the count then stands alone.
+const isSelectionWithinPage = computed(() => {
+  const pageIds = new Set(
+    tableSharedData?.table.getRowModel().rows.map((row) => row.id) ?? [],
+  );
+  return selectedIds.value.every((id) => pageIds.has(id));
+});
+
+const canArchive = computed(
+  () => !props.archived && isActionEnabled(props.rowActions?.archive),
+);
+const canRestore = computed(
+  () => !!props.archived && isActionEnabled(props.rowActions?.restore),
+);
+const canExportSelection = computed(() => !props.archived && props.canExport);
+const canDelete = computed(() => isActionEnabled(props.rowActions?.delete));
+
+const matchingTotal = computed(() => props.total ?? 0);
+// Only actions able to find the rows themselves (and the export, which
+// runs on the whole query) reach the rows of other pages.
+const allMatchingActions = computed(() =>
+  (props.bulkActions ?? []).filter(isAllMatchingAction),
+);
+const canSelectAllMatching = computed(
+  () =>
+    !allMatching.value &&
+    isWholePageSelected.value &&
+    matchingTotal.value > selectedCount.value &&
+    (allMatchingActions.value.length > 0 || canExportSelection.value),
+);
+const shownBulkActions = computed(() =>
+  allMatching.value ? allMatchingActions.value : (props.bulkActions ?? []),
+);
+const runBulkAction = (action: CustomRowAction) =>
+  tableSharedData?.emits("bulkAction", action);
+const exportShown = () => {
+  if (!allMatching.value) {
+    emitForSelection("export");
+    return;
+  }
+  tableSharedData?.emits("exportAll");
+  clearSelection();
+};
+
+const formattedTotal = computed(() =>
+  new Intl.NumberFormat(locale.value).format(matchingTotal.value),
+);
+
 const uiTableRowSelectionVariant = tv({
   extend: tv(theme),
   ...(appConfig.ui?.tableRowSelection || {}),
 });
-const uiTableRowSelection = computed(() => uiTableRowSelectionVariant());
+const uiTableRowSelection = computed(() =>
+  uiTableRowSelectionVariant({ archived: !!props.archived }),
+);
 </script>
 
 <template>
-  <section class="relative">
-    <UFieldGroup
-      v-if="Object.keys(rowSelectionState).length"
-      :class="uiTableRowSelection.base()"
+  <section v-if="selectedCount" :class="uiTableRowSelection.base()">
+    <span :class="uiTableRowSelection.count()">
+      <UCheckbox
+        :model-value="isWholePageSelected ? true : 'indeterminate'"
+        :aria-label="t('dms.table.select_page')"
+        @update:model-value="togglePageSelection"
+      />
+      <i18n-t
+        v-if="allMatching"
+        keypath="dms.table.all_matching_selected"
+        :plural="matchingTotal"
+        scope="global"
+        tag="span"
+      >
+        <template #count>
+          <span :class="uiTableRowSelection.countNumber()">
+            {{ formattedTotal }}
+          </span>
+        </template>
+      </i18n-t>
+      <i18n-t
+        v-else
+        :keypath="
+          isSelectionWithinPage
+            ? 'dms.table.row_selection_count'
+            : 'dms.table.row_selection_count_only'
+        "
+        :plural="selectedCount"
+        scope="global"
+        tag="span"
+      >
+        <template #count>
+          <span :class="uiTableRowSelection.countNumber()">
+            {{ selectedCount }}
+          </span>
+        </template>
+        <template #total>{{ pageRowCount }}</template>
+      </i18n-t>
+    </span>
+    <button
+      v-if="canSelectAllMatching"
+      type="button"
+      :class="uiTableRowSelection.selectAll()"
+      @click="allMatching = true"
     >
+      {{ t("dms.table.select_all_matching", { count: formattedTotal }) }}
+    </button>
+
+    <div :class="uiTableRowSelection.actions()">
       <UButton
-        :label="
-          t('dms.table.row_selections', {
-            length: Object.keys(rowSelectionState).length,
-          })
-        "
+        v-if="canExportSelection"
+        :label="t('dms.button.export_data')"
+        icon="i-ph-export"
         color="neutral"
         variant="outline"
-        :ui="{ base: uiTableRowSelection.select() }"
-        @click="rowSelectionState = {}"
+        size="sm"
+        @click="exportShown"
       />
       <UButton
-        v-if="canExport"
-        :label="t('dms.button.export_data')"
-        leading-icon="i-ph-export"
-        leading
+        v-for="action in shownBulkActions"
+        :key="action.label"
+        :label="processI18n(action.label)"
+        :icon="action.icon"
+        :color="action.color ?? 'neutral'"
+        variant="outline"
+        size="sm"
+        @click="runBulkAction(action)"
+      />
+      <UButton
+        v-if="canArchive && !allMatching"
+        :label="t('dms.button.archive')"
+        icon="i-ph-archive"
         color="neutral"
         variant="outline"
-        @click="onExportSelection"
+        size="sm"
+        @click="emitForSelection('archive')"
       />
       <UButton
-        v-if="isActionEnabled(rowActions?.delete)"
-        :label="t('dms.button.delete')"
-        leading-icon="i-ph-trash"
-        leading
+        v-if="canRestore && !allMatching"
+        :label="t('dms.button.restore')"
+        icon="i-ph-arrow-counter-clockwise"
         color="neutral"
         variant="outline"
-        @click="onDeleteSelection"
+        size="sm"
+        @click="emitForSelection('restore')"
+      />
+      <UButton
+        v-if="canDelete && !allMatching"
+        :label="
+          archived ? t('dms.table.delete_permanently') : t('dms.button.delete')
+        "
+        icon="i-ph-trash"
+        color="error"
+        variant="outline"
+        size="sm"
+        @click="emitForSelection('delete')"
       />
-    </UFieldGroup>
+    </div>
+    <UButton
+      :icon="appConfig.ui.icons.close"
+      :aria-label="t('dms.table.clear_selection')"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      square
+      :class="uiTableRowSelection.clear()"
+      @click="clearSelection"
+    />
   </section>
 </template>