@open-mercato/ui 0.6.5-develop.4516.1.88e6ab71a9 → 0.6.5-develop.4544.1.71c003c861

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";
@@ -170,6 +173,41 @@ function readByDotPath(source, path) {
   }
   return current;
 }
+const PROTO_POLLUTING_KEYS = /* @__PURE__ */ new Set(["__proto__", "prototype", "constructor"]);
+function isProtoPollutingKey(key) {
+  return PROTO_POLLUTING_KEYS.has(key);
+}
+function writeByDotPath(target, path, value) {
+  const segments = path.split(".").filter(Boolean);
+  if (segments.length === 0) return;
+  if (segments.some(isProtoPollutingKey)) return;
+  let current = target;
+  for (let index = 0; index < segments.length - 1; index++) {
+    const segment = segments[index];
+    const existing = current[segment];
+    const isSafeObject = !!existing && typeof existing === "object" && !Array.isArray(existing) && (Object.getPrototypeOf(existing) === Object.prototype || Object.getPrototypeOf(existing) === null);
+    if (!isSafeObject) {
+      const created = /* @__PURE__ */ Object.create(null);
+      current[segment] = created;
+      current = created;
+    } else {
+      current = existing;
+    }
+  }
+  const finalSegment = segments[segments.length - 1];
+  if (isProtoPollutingKey(finalSegment)) return;
+  current[finalSegment] = value;
+}
+function collapseDotPathFields(source, dotPathFieldIds) {
+  if (!dotPathFieldIds.size) return source;
+  let result = null;
+  for (const fieldId of dotPathFieldIds) {
+    if (!Object.prototype.hasOwnProperty.call(source, fieldId)) continue;
+    if (!result) result = { ...source };
+    writeByDotPath(result, fieldId, source[fieldId]);
+  }
+  return result ?? source;
+}
 function readInitialCustomFieldValue(source, key) {
   if (!source || !key) return void 0;
   const candidates = [`cf_${key}`, `cf:${key}`, key];
@@ -316,6 +354,8 @@ function CrudForm({
   onSubmit,
   onDelete,
   deleteVisible,
+  optimisticLockUpdatedAt,
+  disableOptimisticLock = false,
   twoColumn = false,
   title,
   backHref,
@@ -423,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,
@@ -848,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 {
@@ -893,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;
@@ -1257,6 +1320,19 @@ function CrudForm({
   const fieldById = React.useMemo(() => {
     return new globalThis.Map(allFields.map((f) => [f.id, f]));
   }, [allFields]);
+  const dotPathBaseFieldIds = React.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    const cfFieldIds = new Set(cfFields.map((field) => field.id));
+    for (const field of allFields) {
+      const fieldId = field.id;
+      if (!fieldId.includes(".")) continue;
+      if (injectedFieldIdSet.has(fieldId)) continue;
+      if (fieldId.startsWith("cf_") || fieldId.startsWith("cf:")) continue;
+      if (cfFieldIds.has(fieldId)) continue;
+      ids.add(fieldId);
+    }
+    return ids;
+  }, [allFields, injectedFieldIdSet, cfFields]);
   const validateFieldOnBlur = React.useCallback(async (fieldId, sourceValues) => {
     if (formReadOnly) return;
     const field = fieldById.get(fieldId);
@@ -1307,7 +1383,7 @@ function CrudForm({
       for (const injectedId of injectedFieldIdSet) {
         delete coreValues[injectedId];
       }
-      const result = schema.safeParse(coreValues);
+      const result = schema.safeParse(collapseDotPathFields(coreValues, dotPathBaseFieldIds));
       if (!result.success) {
         const schemaFieldErrors = {};
         result.error.issues.forEach((issue) => {
@@ -1336,6 +1412,7 @@ function CrudForm({
   }, [
     cfDefinitions,
     customEntity,
+    dotPathBaseFieldIds,
     fieldById,
     formReadOnly,
     hiddenBaseFieldIds,
@@ -1670,7 +1747,8 @@ function CrudForm({
     const snapshot = JSON.stringify({
       initialValues,
       injectedFieldIds: injectedFieldDefinitions.map((definition) => definition.id),
-      customFieldMappings: cfDefinitions.map((definition) => definition.key)
+      customFieldMappings: cfDefinitions.map((definition) => definition.key),
+      dotPathBaseFieldIds: Array.from(dotPathBaseFieldIds)
     });
     if (appliedInitialValuesSnapshotRef.current === snapshot) return;
     appliedInitialValuesSnapshotRef.current = snapshot;
@@ -1695,6 +1773,14 @@ function CrudForm({
           merged[targetId] = extracted;
         }
       }
+      for (const fieldId of dotPathBaseFieldIds) {
+        if (merged[fieldId] !== void 0) continue;
+        const extracted = readByDotPath(initialRecord, fieldId);
+        if (extracted !== void 0) {
+          ;
+          merged[fieldId] = extracted;
+        }
+      }
       mergedValues = merged;
       return mergedValues;
     });
@@ -1725,6 +1811,7 @@ function CrudForm({
   }, [
     cfDefinitions,
     customEntity,
+    dotPathBaseFieldIds,
     extendedInjectionEventsEnabled,
     initialValues,
     injectedFieldDefinitions,
@@ -1881,7 +1968,7 @@ function CrudForm({
       }
       let parsedValues;
       if (schema) {
-        const res = schema.safeParse(coreValues);
+        const res = schema.safeParse(collapseDotPathFields(coreValues, dotPathBaseFieldIds));
         if (!res.success) {
           const fieldErrors = {};
           res.error.issues.forEach((issue) => {
@@ -1911,7 +1998,7 @@ function CrudForm({
             for (const injectedId of injectedFieldIdSet) {
               delete projectedCoreValues[injectedId];
             }
-            coreSubmitValues = schema ? schema.parse(projectedCoreValues) : projectedCoreValues;
+            coreSubmitValues = schema ? schema.parse(collapseDotPathFields(projectedCoreValues, dotPathBaseFieldIds)) : projectedCoreValues;
             if (result.applyToForm) {
               setValues(result.data);
             }
@@ -1982,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 {
@@ -2034,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();
@@ -2049,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);
@@ -3136,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 })
             ] })
           },