@open-mercato/ui 0.6.4-develop.4371.1.8f3030407e → 0.6.4

package/dist/backend/DataTable.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { useRouter } from "next/navigation";
 import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from "@tanstack/react-table";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, ChevronUp, ChevronDown, ChevronsUpDown, Check } from "lucide-react";
+import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, ChevronUp, ChevronDown, ChevronsUpDown, Check, Inbox } from "lucide-react";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/table.js";
 import { Button } from "../primitives/button.js";
 import { Checkbox } from "../primitives/checkbox.js";
@@ -22,6 +22,7 @@ import { TooltipProvider } from "../primitives/tooltip.js";
 import { TruncatedCell } from "./TruncatedCell.js";
 import { FilterBar } from "./FilterBar.js";
 import { FilteredEmptyResults } from "./filters/FilteredEmptyResults.js";
+import { SearchEmptyResults } from "./filters/SearchEmptyResults.js";
 import { useCustomFieldFilterDefs } from "./utils/customFieldFilters.js";
 import { fetchCustomFieldDefinitionsPayload } from "./utils/customFieldDefs.js";
 import { RowActions } from "./RowActions.js";
@@ -31,7 +32,9 @@ import { useAppEvent } from "./injection/useAppEvent.js";
 import { useInjectionDataWidgets } from "./injection/useInjectionDataWidgets.js";
 import { resolveInjectedIcon } from "./injection/resolveInjectedIcon.js";
 import { serializeExport, defaultExportFilename } from "@open-mercato/shared/lib/crud/exporters";
-import { apiCall } from "./utils/apiCall.js";
+import { apiCall, withScopedApiRequestHeaders } from "./utils/apiCall.js";
+import { buildOptimisticLockHeader } from "./utils/optimisticLock.js";
+import { surfaceRecordConflict } from "./conflicts/index.js";
 import { raiseCrudError } from "./utils/serverErrors.js";
 import { PerspectiveSidebar } from "./PerspectiveSidebar.js";
 import { Popover, PopoverTrigger, PopoverContent } from "../primitives/popover.js";
@@ -643,6 +646,7 @@ function DataTable({
   injectionSpotId,
   injectionContext,
   replacementHandle,
+  extensionTableId: extensionTableIdProp,
   stickyFirstColumn = false,
   stickyActionsColumn = false,
   virtualized = false,
@@ -803,14 +807,20 @@ function DataTable({
   const initialPerspectiveAppliedRef = React.useRef(Boolean(mergedInitialSettings));
   const extensionTableId = React.useMemo(() => {
     if (perspective?.tableId) return perspective.tableId;
+    if (extensionTableIdProp) return extensionTableIdProp;
     if (injectionSpotId?.startsWith("data-table:")) return injectionSpotId.slice("data-table:".length);
     return null;
-  }, [injectionSpotId, perspective?.tableId]);
-  const resolvedInjectionSpotId = injectionSpotId ?? (perspective?.tableId ? `data-table:${perspective.tableId}` : null);
+  }, [injectionSpotId, perspective?.tableId, extensionTableIdProp]);
+  const resolvedInjectionSpotId = injectionSpotId ?? (perspective?.tableId ? `data-table:${perspective.tableId}` : null) ?? (extensionTableIdProp ? `data-table:${extensionTableIdProp}` : null);
   const resolvedReplacementHandle = replacementHandle ?? ComponentReplacementHandles.dataTable(extensionTableId ?? "unknown");
   const baseInjectionContext = React.useMemo(
-    () => injectionContext ?? { tableId: perspective?.tableId ?? null, title: typeof title === "string" ? title : void 0 },
-    [injectionContext, perspective?.tableId, title]
+    () => {
+      if (injectionContext) return injectionContext;
+      const resolvedTableId = extensionTableId ?? perspective?.tableId ?? null;
+      const baseTitle = typeof title === "string" ? title : void 0;
+      return { tableId: resolvedTableId, title: baseTitle };
+    },
+    [injectionContext, perspective?.tableId, extensionTableId, title]
   );
   const headerInjectionSpotId = React.useMemo(
     () => resolvedInjectionSpotId ? `${resolvedInjectionSpotId}:header` : null,
@@ -1217,13 +1227,17 @@ function DataTable({
       if (process.env.NODE_ENV !== "production") {
         console.debug("[DataTable] perspective payload", payload);
       }
-      const call = await apiCall(
-        `/api/perspectives/${encodeURIComponent(perspectiveTableId)}`,
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload)
-        }
+      const existing = input.perspectiveId ? perspectiveData?.perspectives.find((p) => p.id === input.perspectiveId) ?? null : null;
+      const call = await withScopedApiRequestHeaders(
+        buildOptimisticLockHeader(existing?.updatedAt ?? null),
+        () => apiCall(
+          `/api/perspectives/${encodeURIComponent(perspectiveTableId)}`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload)
+          }
+        )
       );
       if (call.status === 404) {
         throw new Error(t("ui.dataTable.perspectives.error.apiUnavailable", "Perspectives API is not available. Run `yarn generate` to regenerate module routes and restart the dev server."));
@@ -1242,6 +1256,12 @@ function DataTable({
       if (data2.perspective) {
         applyPerspectiveSettings(data2.perspective.settings, data2.perspective.id);
       }
+    },
+    onError: (error2) => {
+      if (perspectiveTableId) {
+        void queryClient.invalidateQueries({ queryKey: perspectiveQueryKey });
+      }
+      surfaceRecordConflict(error2, t);
     }
   });
   const resolveColumnLabel = React.useCallback((column) => {
@@ -1940,6 +1960,20 @@ function DataTable({
   const toolbarWrapperClassName = embedded ? "mt-2" : "mt-3 pt-3 border-t";
   const tableScrollWrapperClassName = embedded ? "" : "overflow-auto";
   const virtualScrollRef = React.useRef(null);
+  const [tableScrollEl, setTableScrollEl] = React.useState(null);
+  const [emptyStateViewportWidth, setEmptyStateViewportWidth] = React.useState(null);
+  const setTableScrollWrapperRef = React.useCallback((node) => {
+    setTableScrollEl(node);
+    virtualScrollRef.current = node;
+  }, []);
+  React.useEffect(() => {
+    if (!tableScrollEl || typeof ResizeObserver === "undefined") return;
+    const update = () => setEmptyStateViewportWidth(tableScrollEl.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(tableScrollEl);
+    return () => observer.disconnect();
+  }, [tableScrollEl]);
   const allRows = table.getRowModel().rows;
   const rowVirtualizer = virtualized ? useVirtualizer({
     count: allRows.length,
@@ -2026,7 +2060,7 @@ function DataTable({
         sensors: dndSensors,
         columnIds: headerColumnIds,
         onDragEnd: handleHeaderDragEnd,
-        children: /* @__PURE__ */ jsx("div", { ref: virtualized ? virtualScrollRef : void 0, className: tableScrollWrapperClassName, style: virtualMaxHeightStyle, children: /* @__PURE__ */ jsxs(Table, { className: "min-w-[640px] md:min-w-0", children: [
+        children: /* @__PURE__ */ jsx("div", { ref: setTableScrollWrapperRef, className: tableScrollWrapperClassName, style: virtualMaxHeightStyle, children: /* @__PURE__ */ jsxs(Table, { className: "min-w-[640px] md:min-w-0", children: [
           /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { children: [
             hasInjectedBulkActions ? /* @__PURE__ */ jsx(TableHead, { className: "w-8", children: /* @__PURE__ */ jsx(
               Checkbox,
@@ -2168,19 +2202,36 @@ function DataTable({
               const bottomPadding = lastItem ? rowVirtualizer.getTotalSize() - lastItem.end : 0;
               return bottomPadding > 0 ? /* @__PURE__ */ jsx("tr", { style: { height: `${bottomPadding}px` } }) : null;
             })() : null
-          ] }) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: mergedColumns.length + (rowActions || injectedRowActions.length > 0 ? 1 : 0) + (hasInjectedBulkActions ? 1 : 0), className: "py-6", children: filterAwareEmptyState?.active ? /* @__PURE__ */ jsx(
-            FilteredEmptyResults,
+          ] }) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: mergedColumns.length + (rowActions || injectedRowActions.length > 0 ? 1 : 0) + (hasInjectedBulkActions ? 1 : 0), className: "p-0", children: /* @__PURE__ */ jsx(
+            "div",
             {
-              entityNamePlural: filterAwareEmptyState.entityNamePlural,
-              canRemoveLast: filterAwareEmptyState.canRemoveLast,
-              onClearAll: filterAwareEmptyState.onClearAll,
-              onRemoveLast: filterAwareEmptyState.onRemoveLast
-            }
-          ) : emptyState && typeof emptyState !== "string" ? emptyState : /* @__PURE__ */ jsx(
-            EmptyState,
-            {
-              size: "sm",
-              title: typeof emptyState === "string" ? emptyState : t("ui.dataTable.emptyState.default", "No results.")
+              className: cn("sticky left-0 flex justify-center py-6", emptyStateViewportWidth ? "" : "w-fit"),
+              style: emptyStateViewportWidth ? { width: emptyStateViewportWidth } : void 0,
+              children: filterAwareEmptyState?.active ? /* @__PURE__ */ jsx(
+                FilteredEmptyResults,
+                {
+                  entityNamePlural: filterAwareEmptyState.entityNamePlural,
+                  canRemoveLast: filterAwareEmptyState.canRemoveLast,
+                  onClearAll: filterAwareEmptyState.onClearAll,
+                  onRemoveLast: filterAwareEmptyState.onRemoveLast,
+                  onClearSearch: searchValue && searchValue.trim().length > 0 && onSearchChange ? () => onSearchChange("") : void 0
+                }
+              ) : searchValue && searchValue.trim().length > 0 && onSearchChange ? /* @__PURE__ */ jsx(
+                SearchEmptyResults,
+                {
+                  query: searchValue.trim(),
+                  entityNamePlural: filterAwareEmptyState?.entityNamePlural,
+                  onClearSearch: () => onSearchChange("")
+                }
+              ) : emptyState && typeof emptyState !== "string" ? emptyState : /* @__PURE__ */ jsx(
+                EmptyState,
+                {
+                  variant: "subtle",
+                  icon: /* @__PURE__ */ jsx(Inbox, { className: "size-6", "aria-hidden": true }),
+                  title: typeof emptyState === "string" ? emptyState : t("ui.dataTable.emptyState.default", "No results."),
+                  description: typeof emptyState === "string" ? void 0 : t("ui.dataTable.emptyState.defaultDescription", "Items will appear here once added.")
+                }
+              )
             }
           ) }) }) })
         ] }) })