@open-mercato/ui 0.6.5-develop.4534.1.b459babe6d → 0.6.5-develop.4559.1.839e136509

package/dist/backend/CrudForm.js

@@ -32,6 +32,7 @@ import { FormFooter } from "./forms/FormFooter.js";
 import { Button } from "../primitives/button.js";
 import { IconButton } from "../primitives/icon-button.js";
 import {
+  Check,
   Settings,
   Layers,
   Tag,
@@ -80,6 +81,8 @@ import { TimePicker } from "./inputs/TimePicker.js";
 import { DatePicker } from "./inputs/DatePicker.js";
 import { mapCrudServerErrorToFormErrors, parseServerMessage } from "./utils/serverErrors.js";
 import { withScopedApiRequestHeaders } from "./utils/apiCall.js";
+import { buildOptimisticLockHeader, extractOptimisticLockConflict } from "./utils/optimisticLock.js";
+import { surfaceRecordConflict } from "./conflicts/index.js";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../primitives/dialog.js";
 import { FieldDefinitionsManager } from "./custom-fields/FieldDefinitionsManager.js";
 import { useConfirmDialog } from "./confirm-dialog/index.js";
@@ -351,6 +354,8 @@ function CrudForm({
   onSubmit,
   onDelete,
   deleteVisible,
+  optimisticLockUpdatedAt,
+  disableOptimisticLock = false,
   twoColumn = false,
   title,
   backHref,
@@ -458,6 +463,16 @@ function CrudForm({
   }, [values]);
   const fallbackRecordId = recordId || (versionHistory?.resourceId === void 0 || versionHistory.resourceId === null ? void 0 : String(versionHistory.resourceId).trim() || void 0);
   const operation = recordId ? "update" : "create";
+  const resolvedOptimisticLockUpdatedAt = React.useMemo(() => {
+    if (disableOptimisticLock) return null;
+    if (optimisticLockUpdatedAt !== void 0) return optimisticLockUpdatedAt;
+    const source = initialValues;
+    const camel = source?.updatedAt;
+    if (typeof camel === "string" && camel.length > 0) return camel;
+    const snake = source?.updated_at;
+    if (typeof snake === "string" && snake.length > 0) return snake;
+    return null;
+  }, [disableOptimisticLock, optimisticLockUpdatedAt, initialValues]);
   const injectionContext = React.useMemo(() => ({
     formId,
     entityId: primaryEntityId,
@@ -883,8 +898,13 @@ function CrudForm({
           return;
         }
       }
-      if (injectionRequestHeaders && Object.keys(injectionRequestHeaders).length > 0) {
-        await withScopedApiRequestHeaders(injectionRequestHeaders, async () => {
+      const optimisticLockHeader = buildOptimisticLockHeader(resolvedOptimisticLockUpdatedAt);
+      const mergedDeleteHeaders = {
+        ...injectionRequestHeaders ?? {},
+        ...optimisticLockHeader
+      };
+      if (Object.keys(mergedDeleteHeaders).length > 0) {
+        await withScopedApiRequestHeaders(mergedDeleteHeaders, async () => {
           await onDelete();
         });
       } else {
@@ -928,10 +948,18 @@ function CrudForm({
         }
       } catch {
       }
-      const message = err instanceof Error && err.message ? err.message : deleteErrorMessage;
-      try {
-        flash(message, "error");
-      } catch {
+      const optimisticLockConflict = extractOptimisticLockConflict(err);
+      if (optimisticLockConflict) {
+        try {
+          surfaceRecordConflict(err, t);
+        } catch {
+        }
+      } else {
+        const message = err instanceof Error && err.message ? err.message : deleteErrorMessage;
+        try {
+          flash(message, "error");
+        } catch {
+        }
       }
     } finally {
       deletingRef.current = false;
@@ -2041,8 +2069,13 @@ function CrudForm({
       }
       try {
         submitNavigationBypassRef.current = true;
-        if (injectionRequestHeaders && Object.keys(injectionRequestHeaders).length > 0) {
-          await withScopedApiRequestHeaders(injectionRequestHeaders, async () => {
+        const optimisticLockHeader = buildOptimisticLockHeader(resolvedOptimisticLockUpdatedAt);
+        const mergedSubmitHeaders = {
+          ...injectionRequestHeaders ?? {},
+          ...optimisticLockHeader
+        };
+        if (Object.keys(mergedSubmitHeaders).length > 0) {
+          await withScopedApiRequestHeaders(mergedSubmitHeaders, async () => {
             await onSubmit?.(coreSubmitValues, submitContext);
           });
         } else {
@@ -2093,7 +2126,8 @@ function CrudForm({
             console.debug("[crud-form] Submission failed with field errors", transformedErrors);
           }
         }
-        let displayMessage = typeof helperMessage === "string" && helperMessage.trim() ? helperMessage.trim() : "";
+        const optimisticLockConflict = extractOptimisticLockConflict(err);
+        let displayMessage = optimisticLockConflict ? t("ui.forms.flash.recordModified", "This record was modified by someone else. Refresh and try again.") : typeof helperMessage === "string" && helperMessage.trim() ? helperMessage.trim() : "";
         if (hasFieldErrors) {
           const lowered = displayMessage.toLowerCase();
           const highlightedLower = highlightedMessage.toLowerCase();
@@ -2108,7 +2142,12 @@ function CrudForm({
           displayMessage = hasFieldErrors ? highlightedMessage : saveErrorMessage;
         }
         displayMessage = parseServerMessage(displayMessage);
-        if (!hasFieldErrors) {
+        if (optimisticLockConflict) {
+          try {
+            surfaceRecordConflict(err, t);
+          } catch {
+          }
+        } else if (!hasFieldErrors) {
           flash(displayMessage, "error");
         }
         setFormError(displayMessage);
@@ -3195,7 +3234,14 @@ const ListboxMultiSelect = React.memo(function ListboxMultiSelect2({
             onClick: () => toggle(opt.value),
             className: `w-full justify-start rounded-none font-normal px-3 py-2 ${isSel ? "bg-muted" : ""}`,
             children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(Checkbox, { checked: isSel, disabled: true, tabIndex: -1, className: "pointer-events-none" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: `inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors ${isSel ? "border-accent-indigo bg-accent-indigo text-accent-indigo-foreground" : "border-input bg-background"}`,
+                  children: isSel ? /* @__PURE__ */ jsx(Check, { className: "size-3.5", "aria-hidden": "true" }) : null
+                }
+              ),
               /* @__PURE__ */ jsx("span", { children: opt.label })
             ] })
           },