@open-mercato/ui 0.7.1-develop.7191.1.3c9346566b → 0.7.1-develop.7194.1.ab4fc81f82

package/dist/backend/DataTable.js

@@ -3,11 +3,12 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useRouter } from "next/navigation";
 import { flexRender } from "@tanstack/react-table";
-import { useLegacyTable, getCoreRowModel, getSortedRowModel } from "@tanstack/react-table/legacy";
+import { useLegacyTable, getCoreRowModel, getSortedRowModel, getExpandedRowModel } from "@tanstack/react-table/legacy";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, ChevronUp, ChevronDown, ChevronsUpDown, Check, Inbox, Save } from "lucide-react";
+import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, ChevronUp, ChevronDown, ChevronRight, ChevronsUpDown, Check, Inbox, Save } from "lucide-react";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/table.js";
 import { Button } from "../primitives/button.js";
+import { IconButton } from "../primitives/icon-button.js";
 import { Checkbox } from "../primitives/checkbox.js";
 import {
   Select,
@@ -161,13 +162,17 @@ function collectUniqueById(entries, warningScope) {
   }
   return Array.from(byId.values());
 }
-function resolveExportSections(config) {
+const DEFAULT_VIEW_EXPORT_TITLE = "Export what you view";
+const DEFAULT_FULL_EXPORT_TITLE = "Full data export";
+function resolveExportSections(config, t) {
   if (!config) return [];
   const sections = [];
   const baseFormats = config.formats && config.formats.length > 0 ? config.formats : DEFAULT_EXPORT_FORMATS;
-  const addSection = (key, section, fallbackTitle) => {
+  const addSection = (key, section, fallbackTitle, fallbackFilenameBase) => {
     if (!section || !section.getUrl && !section.prepare) return;
-    const title = section.title?.trim().length ? section.title.trim() : fallbackTitle;
+    const explicitTitle = section.title?.trim().length ? section.title.trim() : null;
+    const title = explicitTitle ?? fallbackTitle;
+    const filenameBase = explicitTitle ?? fallbackFilenameBase;
     const seen = /* @__PURE__ */ new Set();
     const formatsSource = section.formats && section.formats.length > 0 ? section.formats : baseFormats;
     const formats = formatsSource.filter((format) => {
@@ -179,6 +184,7 @@ function resolveExportSections(config) {
     sections.push({
       key,
       title,
+      filenameBase,
       description: section.description,
       formats,
       getUrl: section.getUrl,
@@ -193,17 +199,19 @@ function resolveExportSections(config) {
     });
   };
   const hasExplicitSections = Array.isArray(config.sections) && config.sections.length > 0;
+  const viewTitle = t("ui.dataTable.export.viewTitle", DEFAULT_VIEW_EXPORT_TITLE);
   if (!config.view && !config.full && !hasExplicitSections && config.getUrl) {
-    addSection("view", { getUrl: config.getUrl, formats: config.formats }, "Export what you view");
+    addSection("view", { getUrl: config.getUrl, formats: config.formats }, viewTitle, DEFAULT_VIEW_EXPORT_TITLE);
   } else {
-    addSection("view", config.view, "Export what you view");
+    addSection("view", config.view, viewTitle, DEFAULT_VIEW_EXPORT_TITLE);
   }
   if (hasExplicitSections) {
     config.sections.forEach((section, idx) => {
-      addSection(`section-${idx}`, section, section.title?.trim().length ? section.title : `Export ${idx + 1}`);
+      const numberedTitle = t("ui.dataTable.export.sectionTitle", "Export {index}", { index: idx + 1 });
+      addSection(`section-${idx}`, section, numberedTitle, `Export ${idx + 1}`);
     });
   }
-  addSection("full", config.full, "Full data export");
+  addSection("full", config.full, t("ui.dataTable.export.fullTitle", DEFAULT_FULL_EXPORT_TITLE), DEFAULT_FULL_EXPORT_TITLE);
   return sections;
 }
 const COLUMN_MIN_WIDTH = 60;
@@ -426,7 +434,7 @@ function ExportMenu({ config, sections }) {
         if (!preparedResult) return;
         const prepared = preparedResult.prepared;
         const serialized = serializeExport(prepared, format);
-        const filename = preparedResult.filename ?? section.filename?.(format) ?? config.filename?.(format) ?? defaultExportFilename(section.title, format);
+        const filename = preparedResult.filename ?? section.filename?.(format) ?? config.filename?.(format) ?? defaultExportFilename(section.filenameBase, format);
         if (typeof window !== "undefined") {
           const blob = new Blob([serialized.body], { type: serialized.contentType });
           const href = URL.createObjectURL(blob);
@@ -782,7 +790,11 @@ function DataTable({
   advancedFilter: advancedFilterInput,
   columnChooser,
   activeFilterChips,
-  filterAwareEmptyState
+  filterAwareEmptyState,
+  getSubRows,
+  expandable,
+  expanded: expandedProp,
+  onExpandedChange
 }) {
   const t = useT();
   const { confirm, ConfirmDialogElement } = useConfirmDialog();
@@ -828,9 +840,12 @@ function DataTable({
   const queryClient = useQueryClient();
   const perspectiveConfig = perspective ?? null;
   const perspectiveTableId = perspectiveConfig?.tableId ?? null;
+  const perspectiveAlign = perspectiveConfig?.align ?? "left";
   const perspectiveEnabled = Boolean(perspectiveTableId);
   const initialSnapshotRef = React.useRef(null);
   const snapshotHydratedTableRef = React.useRef(null);
+  const serverReconciledTableRef = React.useRef(null);
+  const hydratedSnapshotRef = React.useRef(null);
   const initialSettingsSource = perspectiveConfig?.initialState?.initialSettings ?? null;
   const mergedInitialSettings = React.useMemo(
     () => sanitizePerspectiveSettings(initialSettingsSource),
@@ -1183,14 +1198,34 @@ function DataTable({
   const [rowSelection, setRowSelection] = React.useState({});
   const selectionScopeKeyRef = React.useRef(selectionScopeKey);
   const enableClientSorting = sortable && !manualSorting;
+  const expansionEnabled = getSubRows !== void 0 || expandable !== void 0;
+  const [internalExpanded, setInternalExpanded] = React.useState({});
+  const expandedState = expandedProp !== void 0 ? expandedProp : internalExpanded;
+  const handleExpandedChange = React.useCallback((updater) => {
+    if (onExpandedChange) {
+      onExpandedChange(updater);
+      return;
+    }
+    setInternalExpanded((prev) => typeof updater === "function" ? updater(prev) : updater);
+  }, [onExpandedChange]);
   const table = useLegacyTable({
     data: clientFilteredData,
     columns: mergedColumns,
     getCoreRowModel: getCoreRowModel(),
     ...enableClientSorting ? { getSortedRowModel: getSortedRowModel() } : {},
+    ...expansionEnabled ? {
+      getSubRows,
+      getExpandedRowModel: getExpandedRowModel(),
+      getRowCanExpand: (row) => {
+        if (typeof expandable === "function") return expandable(row.original);
+        if (expandable === true) return true;
+        return (row.subRows?.length ?? 0) > 0;
+      },
+      onExpandedChange: handleExpandedChange
+    } : {},
     manualSorting: manualSorting === true,
     getRowId: resolveDataTableRowId,
-    state: { sorting, columnVisibility, columnOrder, rowSelection },
+    state: { sorting, columnVisibility, columnOrder, rowSelection, ...expansionEnabled ? { expanded: expandedState } : {} },
     enableRowSelection: hasInjectedBulkActions,
     onSortingChange: (updater) => {
       const next = typeof updater === "function" ? updater(sorting) : updater;
@@ -1399,6 +1434,7 @@ function DataTable({
     const snapshot = readPerspectiveSnapshot(perspectiveTableId);
     if (!snapshot) return;
     initialSnapshotRef.current = snapshot;
+    hydratedSnapshotRef.current = snapshot;
     const preserveAdvancedFilter = !!advancedFilter?.onApplyTree;
     applyPerspectiveSettings(
       snapshot.settings,
@@ -1818,14 +1854,42 @@ function DataTable({
   React.useLayoutEffect(() => {
     if (!canUsePerspectives) return;
     if (!perspectiveTableId) return;
-    if (initialSnapshotRef.current) return;
-    if (initialPerspectiveAppliedRef.current) return;
     const source = perspectiveData ?? perspectiveConfig?.initialState?.response;
     if (!source) return;
+    let orphanedSnapshotDropped = false;
     const tryResolve = (id) => {
       if (!id) return void 0;
       return source.perspectives.find((p) => p.id === id) ?? source.rolePerspectives.find((p) => p.id === id);
     };
+    if (initialSnapshotRef.current || initialPerspectiveAppliedRef.current) {
+      if (serverReconciledTableRef.current === perspectiveTableId) return;
+      serverReconciledTableRef.current = perspectiveTableId;
+      const hydrated = hydratedSnapshotRef.current;
+      const snapshot = hydrated && (!activePerspectiveId || activePerspectiveId === hydrated.perspectiveId) ? hydrated : null;
+      const localId = snapshot?.perspectiveId ?? activePerspectiveId;
+      if (!localId) return;
+      const local = tryResolve(localId);
+      if (local) {
+        const serverUpdatedAt = local.updatedAt ? Date.parse(local.updatedAt) : NaN;
+        const serverIsNewer = snapshot != null && Number.isFinite(serverUpdatedAt) && serverUpdatedAt > snapshot.updatedAt;
+        const settingsDiffer = snapshot != null && diffPerspectiveSettings(
+          sanitizePerspectiveSettings(local.settings) ?? {},
+          sanitizePerspectiveSettings(snapshot.settings) ?? {}
+        ).length > 0;
+        if (serverIsNewer && settingsDiffer) {
+          applyPerspectiveSettings(local.settings, local.id, {
+            preserveAdvancedFilter: !!advancedFilter?.onApplyTree
+          });
+          initialPerspectiveAppliedRef.current = true;
+        }
+        return;
+      }
+      writePerspectiveSnapshot(perspectiveTableId, null);
+      initialSnapshotRef.current = null;
+      hydratedSnapshotRef.current = null;
+      initialPerspectiveAppliedRef.current = false;
+      orphanedSnapshotDropped = true;
+    }
     let target;
     if (activePerspectiveId) {
       target = tryResolve(activePerspectiveId);
@@ -1842,10 +1906,18 @@ function DataTable({
       target = source.perspectives[0];
     }
     if (target) {
-      applyPerspectiveSettings(target.settings, target.id);
+      applyPerspectiveSettings(
+        target.settings,
+        target.id,
+        orphanedSnapshotDropped ? { preserveAdvancedFilter: !!advancedFilter?.onApplyTree } : void 0
+      );
+    } else if (orphanedSnapshotDropped) {
+      applyPerspectiveSettings({}, null, {
+        preserveAdvancedFilter: !!advancedFilter?.onApplyTree
+      });
     }
     initialPerspectiveAppliedRef.current = true;
-  }, [canUsePerspectives, perspectiveData, perspectiveTableId, perspectiveConfig, applyPerspectiveSettings, activePerspectiveId]);
+  }, [canUsePerspectives, perspectiveData, perspectiveTableId, perspectiveConfig, applyPerspectiveSettings, activePerspectiveId, advancedFilter?.onApplyTree]);
   const scrollTableIntoView = React.useCallback(() => {
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect || rect.top >= 0) return;
@@ -2154,12 +2226,44 @@ function DataTable({
   );
   const runPropBulkAction = React.useCallback(
     async (action) => {
-      const result = await action.onExecute(selectedRows);
-      if (result !== false) {
+      try {
+        const result = await action.onExecute(selectedRows);
+        if (result === false) return;
+        if (!result || typeof result !== "object") {
+          setRowSelection({});
+          return;
+        }
+        if (result.ok === false) {
+          if (result.message === void 0) return;
+          flash(result.message, "error");
+          return;
+        }
         setRowSelection({});
+        if (result.progressJobId) {
+          trackedBulkProgressJobIdsRef.current.add(result.progressJobId);
+          flash(
+            result.message ?? t("ui.dataTable.bulkAction.started", "Bulk action started. Track progress in the top bar."),
+            "success"
+          );
+          return;
+        }
+        flash(
+          result.message ?? t("ui.dataTable.bulkAction.success", "Bulk action completed."),
+          "success"
+        );
+        if (refreshButton?.onRefresh) {
+          refreshButton.onRefresh();
+        } else {
+          scheduleRouterRefresh(router);
+        }
+      } catch (error2) {
+        flash(
+          error2 instanceof Error ? error2.message : t("ui.dataTable.bulkAction.error", "Bulk action failed."),
+          "error"
+        );
       }
     },
-    [selectedRows]
+    [refreshButton, router, selectedRows, t]
   );
   const builtToolbar = React.useMemo(() => {
     if (toolbar) return toolbar;
@@ -2240,6 +2344,7 @@ function DataTable({
         }
       )
     ] }) : null;
+    const perspectiveButtonLeading = perspectiveAlign === "right" ? null : perspectiveButton;
     const saveViewButton = showSaveViewButton && canUsePerspectives ? /* @__PURE__ */ jsxs(
       Button,
       {
@@ -2259,9 +2364,9 @@ function DataTable({
         ]
       }
     ) : null;
-    const leadingItems = advancedFilterButton || perspectiveButton || saveViewButton ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    const leadingItems = advancedFilterButton || perspectiveButtonLeading || saveViewButton ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       advancedFilterButton,
-      perspectiveButton,
+      perspectiveButtonLeading,
       saveViewButton
     ] }) : null;
     const trailingItems = hasBulkButtons ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
@@ -2305,6 +2410,7 @@ function DataTable({
       }) : null
     ] }) : null;
     const searchTrailingNode = searchTrailingInjectionSpotId && onSearchChange ? /* @__PURE__ */ jsx(InjectionSpot, { spotId: searchTrailingInjectionSpotId, context: resolvedInjectionContext }) : null;
+    if (perspectiveAlign === "right" && !anySearch && combined.length === 0 && !advancedFilterButton && !saveViewButton && !trailingItems && !fieldsetSelector) return null;
     return /* @__PURE__ */ jsx(
       FilterBar,
       {
@@ -2337,6 +2443,7 @@ function DataTable({
     onFiltersApply,
     onFiltersClear,
     canUsePerspectives,
+    perspectiveAlign,
     embedded,
     supportsCustomFieldFilterFieldsets,
     resolvedEntityIds,
@@ -2367,7 +2474,7 @@ function DataTable({
   const hasActions = actions !== void 0 && actions !== null && actions !== false;
   const shouldReserveActionsSpace = actions === null || actions === false;
   const exportConfig = exporter === false ? null : exporter || null;
-  const resolvedExportSections = React.useMemo(() => resolveExportSections(exportConfig), [exportConfig]);
+  const resolvedExportSections = React.useMemo(() => resolveExportSections(exportConfig, t), [exportConfig, t]);
   const hasExport = resolvedExportSections.length > 0;
   const refreshButtonConfig = refreshButton;
   const hasRefreshButton = Boolean(refreshButtonConfig);
@@ -2432,7 +2539,18 @@ function DataTable({
               ]
             }
           ) : null,
-          canUsePerspectives ? /* @__PURE__ */ jsxs(
+          canUsePerspectives ? perspectiveAlign === "right" ? /* @__PURE__ */ jsx(
+            ViewSwitcherDropdown,
+            {
+              activePerspectiveId,
+              perspectives: perspectiveData?.perspectives ?? [],
+              rolePerspectives: perspectiveData?.rolePerspectives ?? [],
+              onClear: () => applyPerspectiveSettings({}, null),
+              onActivate: handlePerspectiveActivate,
+              onOpenSidebar: () => setPerspectiveOpen(true),
+              t
+            }
+          ) : /* @__PURE__ */ jsxs(
             Button,
             {
               type: "button",
@@ -2633,12 +2751,37 @@ function DataTable({
                       const sizedWidth = enableColumnResize && columnId ? columnSizing[columnId] : void 0;
                       const effectiveMaxWidth = typeof sizedWidth === "number" ? `${sizedWidth}px` : maxWidth;
                       const wrappedContent = shouldTruncate ? /* @__PURE__ */ jsx(TruncatedCell, { maxWidth: effectiveMaxWidth, tooltipContent: tooltipText, children: content }) : content;
+                      const expandAffordance = expansionEnabled && cellIndex === 0 ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "inline-flex shrink-0 items-center",
+                          style: { paddingLeft: `${row.depth * 1.25}rem` },
+                          children: row.getCanExpand() ? /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              type: "button",
+                              variant: "ghost",
+                              size: "xs",
+                              "aria-label": row.getIsExpanded() ? t("ui.dataTable.expand.collapseRow", "Collapse row") : t("ui.dataTable.expand.expandRow", "Expand row"),
+                              "aria-expanded": row.getIsExpanded(),
+                              onClick: (event) => {
+                                event.stopPropagation();
+                                row.toggleExpanded();
+                              },
+                              children: row.getIsExpanded() ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+                            }
+                          ) : /* @__PURE__ */ jsx("span", { className: "inline-block size-6", "aria-hidden": "true" })
+                        }
+                      ) : null;
                       return /* @__PURE__ */ jsx(
                         TableCell,
                         {
                           className: responsiveClass(priority, columnMeta?.hidden) + (isStickyCell ? ` md:sticky md:left-0 md:z-10 md:bg-background ${STICKY_LEFT_SHADOW_CLASS}` : ""),
                           style: typeof sizedWidth === "number" ? { width: sizedWidth, minWidth: sizedWidth, maxWidth: sizedWidth } : void 0,
-                          children: wrappedContent
+                          children: expandAffordance ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                            expandAffordance,
+                            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: wrappedContent })
+                          ] }) : wrappedContent
                         },
                         cell.id
                       );