@open-mercato/ui 0.4.5-develop-03023b2707 → 0.4.5-develop-0c30cb4b11

package/dist/backend/CrudForm.js

@@ -64,8 +64,13 @@ import { useConfirmDialog } from "./confirm-dialog/index.js";
 import { useInjectionSpotEvents, InjectionSpot, useInjectionWidgets } from "./injection/InjectionSpot.js";
 import { dispatchBackendMutationError } from "./injection/mutationEvents.js";
 import { VersionHistoryAction } from "./version-history/VersionHistoryAction.js";
+import { parseBooleanWithDefault } from "@open-mercato/shared/lib/boolean";
 const EMPTY_OPTIONS = [];
 const FOCUSABLE_SELECTOR = '[data-crud-focus-target], input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const CRUDFORM_EXTENDED_EVENTS_ENABLED = parseBooleanWithDefault(
+  process.env.NEXT_PUBLIC_OM_CRUDFORM_EXTENDED_EVENTS_ENABLED,
+  true
+);
 const FIELDSET_ICON_COMPONENTS = {
   layers: Layers,
   tag: Tag,
@@ -162,6 +167,7 @@ function CrudForm({
   const [values, setValues] = React.useState(
     () => ({ ...initialValues ?? {} })
   );
+  const valuesRef = React.useRef(values);
   const [errors, setErrors] = React.useState({});
   const [pending, setPending] = React.useState(false);
   const [formError, setFormError] = React.useState(null);
@@ -217,12 +223,138 @@ function CrudForm({
     recordId: fallbackRecordId,
     isLoading,
     pending
-  }), [formId, primaryEntityId, versionHistory?.resourceKind, versionHistory?.resourceId, fallbackRecordId, isLoading, pending]);
+  }), [formId, primaryEntityId, versionHistory?.resourceKind, versionHistory?.resourceId, recordId, fallbackRecordId, isLoading, pending]);
+  const injectionContextRef = React.useRef(injectionContext);
+  React.useEffect(() => {
+    injectionContextRef.current = injectionContext;
+  }, [injectionContext]);
+  React.useEffect(() => {
+    valuesRef.current = values;
+  }, [values]);
   const { widgets: injectionWidgets } = useInjectionWidgets(resolvedInjectionSpotId, {
     context: injectionContext,
     triggerOnLoad: true
   });
   const { triggerEvent: triggerInjectionEvent } = useInjectionSpotEvents(resolvedInjectionSpotId ?? "", injectionWidgets);
+  const extendedInjectionEventsEnabled = CRUDFORM_EXTENDED_EVENTS_ENABLED && Boolean(resolvedInjectionSpotId);
+  const transformValidationErrors = React.useCallback(
+    async (fieldErrors) => {
+      if (!extendedInjectionEventsEnabled || !Object.keys(fieldErrors).length) return fieldErrors;
+      try {
+        const result = await triggerInjectionEvent(
+          "transformValidation",
+          fieldErrors,
+          injectionContextRef.current,
+          { originalData: valuesRef.current }
+        );
+        const transformed = result.data;
+        if (!transformed || typeof transformed !== "object" || Array.isArray(transformed)) return fieldErrors;
+        return Object.fromEntries(
+          Object.entries(transformed).map(([key, value]) => [key, String(value)])
+        );
+      } catch (err) {
+        console.error("[CrudForm] Error in transformValidation:", err);
+        return fieldErrors;
+      }
+    },
+    [extendedInjectionEventsEnabled, triggerInjectionEvent]
+  );
+  const canNavigateTo = React.useCallback(
+    async (target) => {
+      if (!extendedInjectionEventsEnabled) return true;
+      try {
+        const result = await triggerInjectionEvent(
+          "onBeforeNavigate",
+          valuesRef.current,
+          injectionContextRef.current,
+          { target }
+        );
+        if (!result.ok) {
+          flash(result.message || t("ui.forms.flash.saveBlocked", "Save blocked by validation"), "error");
+          return false;
+        }
+        return true;
+      } catch (err) {
+        const message = err instanceof Error && err.message ? err.message : t("ui.forms.flash.saveBlocked", "Save blocked by validation");
+        flash(message, "error");
+        return false;
+      }
+    },
+    [extendedInjectionEventsEnabled, t, triggerInjectionEvent]
+  );
+  const navigateWithGuard = React.useCallback(
+    async (target) => {
+      if (!target) return;
+      const allowed = await canNavigateTo(target);
+      if (allowed) router.push(target);
+    },
+    [canNavigateTo, router]
+  );
+  React.useEffect(() => {
+    if (!extendedInjectionEventsEnabled || typeof window === "undefined") return;
+    const handleEvent = (event) => {
+      const customEvent = event;
+      void triggerInjectionEvent("onAppEvent", valuesRef.current, injectionContextRef.current, {
+        appEvent: customEvent.detail
+      }).catch((err) => {
+        console.error("[CrudForm] Error in onAppEvent:", err);
+      });
+    };
+    window.addEventListener("om:event", handleEvent);
+    return () => {
+      window.removeEventListener("om:event", handleEvent);
+    };
+  }, [extendedInjectionEventsEnabled, triggerInjectionEvent]);
+  React.useEffect(() => {
+    if (!extendedInjectionEventsEnabled || typeof document === "undefined") return;
+    const emitVisibility = () => {
+      void triggerInjectionEvent("onVisibilityChange", valuesRef.current, injectionContextRef.current, {
+        visible: document.visibilityState === "visible"
+      }).catch((err) => {
+        console.error("[CrudForm] Error in onVisibilityChange:", err);
+      });
+    };
+    document.addEventListener("visibilitychange", emitVisibility);
+    emitVisibility();
+    return () => {
+      document.removeEventListener("visibilitychange", emitVisibility);
+    };
+  }, [extendedInjectionEventsEnabled, triggerInjectionEvent]);
+  React.useEffect(() => {
+    if (!extendedInjectionEventsEnabled) return;
+    const root = rootRef.current;
+    if (!root || typeof window === "undefined") return;
+    const handleClickCapture = (event) => {
+      if (event.defaultPrevented) return;
+      if (event.button !== 0) return;
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      const targetElement = event.target instanceof Element ? event.target : null;
+      const linkElement = targetElement?.closest("a[href]");
+      if (!(linkElement instanceof HTMLAnchorElement)) return;
+      if (!root.contains(linkElement)) return;
+      if (linkElement.target && linkElement.target !== "_self") return;
+      const rawHref = linkElement.getAttribute("href");
+      if (!rawHref || rawHref.startsWith("#")) return;
+      let target = rawHref;
+      if (rawHref.startsWith("http://") || rawHref.startsWith("https://")) {
+        try {
+          const parsed = new URL(rawHref);
+          if (parsed.origin !== window.location.origin) return;
+          target = `${parsed.pathname}${parsed.search}${parsed.hash}`;
+        } catch {
+          return;
+        }
+      } else if (!rawHref.startsWith("/")) {
+        return;
+      }
+      event.preventDefault();
+      void navigateWithGuard(target);
+    };
+    root.addEventListener("click", handleClickCapture, true);
+    return () => {
+      root.removeEventListener("click", handleClickCapture, true);
+    };
+  }, [extendedInjectionEventsEnabled, navigateWithGuard]);
   React.useEffect(() => {
     const root = rootRef.current;
     if (!root) return;
@@ -276,7 +408,8 @@ function CrudForm({
             } catch {
             }
             if (result.fieldErrors && Object.keys(result.fieldErrors).length) {
-              setErrors(result.fieldErrors);
+              const transformedErrors = await transformValidationErrors(result.fieldErrors);
+              setErrors(transformedErrors);
             }
             const message = result.message || t("ui.forms.flash.saveBlocked", "Save blocked by validation");
             flash(message, "error");
@@ -318,7 +451,7 @@ function CrudForm({
       } catch {
       }
       if (typeof deleteRedirect === "string" && deleteRedirect) {
-        router.push(deleteRedirect);
+        await navigateWithGuard(deleteRedirect);
       }
     } catch (err) {
       if (resolvedInjectionSpotId) {
@@ -362,8 +495,9 @@ function CrudForm({
     injectionContext,
     onDelete,
     resolvedInjectionSpotId,
-    router,
+    navigateWithGuard,
     t,
+    transformValidationErrors,
     triggerInjectionEvent,
     values
   ]);
@@ -780,11 +914,43 @@ function CrudForm({
     }
   }, [errors, formId]);
   const setValue = React.useCallback((id, nextValue) => {
+    let nextData = null;
     setValues((prev) => {
       if (Object.is(prev[id], nextValue)) return prev;
-      return { ...prev, [id]: nextValue };
+      nextData = { ...prev, [id]: nextValue };
+      return nextData;
     });
-  }, []);
+    if (!nextData || !extendedInjectionEventsEnabled) return;
+    void triggerInjectionEvent("onFieldChange", nextData, injectionContextRef.current, {
+      fieldId: id,
+      fieldValue: nextValue
+    }).then((result) => {
+      if (!result.ok) return;
+      const change = result.fieldChange;
+      if (!change) return;
+      const updates = { ...change.sideEffects ?? {} };
+      if (change.value !== void 0) {
+        updates[id] = change.value;
+      }
+      if (Object.keys(updates).length > 0) {
+        setValues((prev) => {
+          let changed = false;
+          const next = { ...prev };
+          for (const [key, value] of Object.entries(updates)) {
+            if (Object.is(next[key], value)) continue;
+            next[key] = value;
+            changed = true;
+          }
+          return changed ? next : prev;
+        });
+      }
+      for (const message of change.messages ?? []) {
+        flash(message.text, message.severity);
+      }
+    }).catch((err) => {
+      console.error("[CrudForm] Error in onFieldChange:", err);
+    });
+  }, [extendedInjectionEventsEnabled, flash, triggerInjectionEvent]);
   const handleFieldsetSelectionChange = React.useCallback(
     (entityId2, nextCode) => {
       setCfFieldsetSelections((prev) => ({ ...prev, [entityId2]: nextCode }));
@@ -809,8 +975,32 @@ function CrudForm({
     const snapshot = JSON.stringify(initialValues);
     if (initialValuesSnapshotRef.current === snapshot) return;
     initialValuesSnapshotRef.current = snapshot;
-    setValues((prev) => ({ ...prev, ...initialValues }));
-  }, [initialValues]);
+    let mergedValues = null;
+    setValues((prev) => {
+      mergedValues = { ...prev, ...initialValues };
+      return mergedValues;
+    });
+    if (!extendedInjectionEventsEnabled || !mergedValues) return;
+    let cancelled = false;
+    const run = async () => {
+      try {
+        const result = await triggerInjectionEvent(
+          "transformDisplayData",
+          mergedValues,
+          injectionContextRef.current
+        );
+        const transformed = result.data;
+        if (cancelled || !transformed) return;
+        setValues(transformed);
+      } catch (err) {
+        console.error("[CrudForm] Error in transformDisplayData:", err);
+      }
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [extendedInjectionEventsEnabled, initialValues, triggerInjectionEvent]);
   const buildFieldsetEditorHref = React.useCallback(
     (includeViewParam) => {
       if (!fieldsetEditorTarget) return null;
@@ -864,7 +1054,8 @@ function CrudForm({
       if (process.env.NODE_ENV !== "production") {
         console.debug("[crud-form] Required field errors prevented submit", requiredErrors);
       }
-      setErrors(requiredErrors);
+      const transformedErrors = await transformValidationErrors(requiredErrors);
+      setErrors(transformedErrors);
       flash(highlightedMessage, "error");
       return;
     }
@@ -891,9 +1082,15 @@ function CrudForm({
           if (customEntity) {
             const mapped = {};
             for (const [ek, ev] of Object.entries(result.fieldErrors)) mapped[ek.replace(/^cf_/, "")] = String(ev);
-            setErrors((prev) => ({ ...prev, ...mapped }));
+            const transformedErrors = await transformValidationErrors(mapped);
+            setErrors((prev) => ({ ...prev, ...transformedErrors }));
           } else {
-            setErrors((prev) => ({ ...prev, ...result.fieldErrors }));
+            const transformedErrors = await transformValidationErrors(
+              Object.fromEntries(
+                Object.entries(result.fieldErrors).map(([key, value]) => [key, String(value)])
+              )
+            );
+            setErrors((prev) => ({ ...prev, ...transformedErrors }));
           }
           flash(highlightedMessage, "error");
           return;
@@ -912,7 +1109,8 @@ function CrudForm({
         if (process.env.NODE_ENV !== "production") {
           console.debug("[crud-form] Schema validation failed", res.error.issues);
         }
-        setErrors(fieldErrors);
+        const transformedErrors = await transformValidationErrors(fieldErrors);
+        setErrors(transformedErrors);
         flash(highlightedMessage, "error");
         return;
       }
@@ -920,10 +1118,21 @@ function CrudForm({
     } else {
       parsedValues = values;
     }
+    let submitValues = parsedValues;
+    if (extendedInjectionEventsEnabled) {
+      try {
+        const result = await triggerInjectionEvent("transformFormData", submitValues, injectionContext);
+        if (result.data) {
+          submitValues = result.data;
+        }
+      } catch (err) {
+        console.error("[CrudForm] Error in transformFormData:", err);
+      }
+    }
     let injectionRequestHeaders;
     if (resolvedInjectionSpotId) {
       try {
-        const result = await triggerInjectionEvent("onBeforeSave", parsedValues, injectionContext);
+        const result = await triggerInjectionEvent("onBeforeSave", submitValues, injectionContext);
         if (!result.ok) {
           try {
             if (typeof window !== "undefined") {
@@ -942,7 +1151,8 @@ function CrudForm({
           } catch {
           }
           if (result.fieldErrors && Object.keys(result.fieldErrors).length) {
-            setErrors(result.fieldErrors);
+            const transformedErrors = await transformValidationErrors(result.fieldErrors);
+            setErrors(transformedErrors);
           }
           const message = result.message || t("ui.forms.flash.saveBlocked", "Save blocked by validation");
           flash(message, "error");
@@ -960,7 +1170,7 @@ function CrudForm({
     setPending(true);
     if (resolvedInjectionSpotId) {
       try {
-        await triggerInjectionEvent("onSave", parsedValues, injectionContext);
+        await triggerInjectionEvent("onSave", submitValues, injectionContext);
       } catch (err) {
         console.error("[CrudForm] Error in onSave:", err);
         flash(t("ui.forms.flash.saveBlocked", "Save blocked by validation"), "error");
@@ -971,19 +1181,19 @@ function CrudForm({
     try {
       if (injectionRequestHeaders && Object.keys(injectionRequestHeaders).length > 0) {
         await withScopedApiRequestHeaders(injectionRequestHeaders, async () => {
-          await onSubmit?.(parsedValues);
+          await onSubmit?.(submitValues);
         });
       } else {
-        await onSubmit?.(parsedValues);
+        await onSubmit?.(submitValues);
       }
       if (resolvedInjectionSpotId) {
         try {
-          await triggerInjectionEvent("onAfterSave", parsedValues, injectionContext);
+          await triggerInjectionEvent("onAfterSave", submitValues, injectionContext);
         } catch (err) {
           console.error("[CrudForm] Error in onAfterSave:", err);
         }
       }
-      if (successRedirect) router.push(successRedirect);
+      if (successRedirect) await navigateWithGuard(successRedirect);
     } catch (err) {
       try {
         if (typeof window !== "undefined") {
@@ -1011,9 +1221,10 @@ function CrudForm({
         return typeof value === "string" && value.trim().length ? value.trim() : null;
       })() : null;
       if (hasFieldErrors) {
-        setErrors(combinedFieldErrors);
+        const transformedErrors = await transformValidationErrors(combinedFieldErrors);
+        setErrors(transformedErrors);
         if (process.env.NODE_ENV !== "production") {
-          console.debug("[crud-form] Submission failed with field errors", combinedFieldErrors);
+          console.debug("[crud-form] Submission failed with field errors", transformedErrors);
         }
       }
       let displayMessage = typeof helperMessage === "string" && helperMessage.trim() ? helperMessage.trim() : "";