@firecms/core 3.0.0-rc.2 → 3.0.0-rc.4

package/src/form/EntityForm.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
     AuthController,
     CMSAnalyticsEvent,
@@ -19,8 +19,10 @@ import { ErrorBoundary, getFormFieldKeys } from "../components";
 import {
     getDefaultValuesFor,
     getEntityTitlePropertyKey,
+    getLocalChangesBackup,
     getValueInPath,
     isHidden,
+    isObject,
     isReadOnly,
     mergeDeep,
     resolveCollection,
@@ -32,7 +34,8 @@ import {
     useAuthController,
     useCustomizationController,
     useDataSource,
-    useFireCMSContext, useNavigationController,
+    useFireCMSContext,
+    useNavigationController,
     useSideEntityController,
     useSnackbarController
 } from "../hooks";
@@ -41,11 +44,18 @@ import { Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecm
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { FormEntry, FormLayout, LabelWithIconAndTooltip, PropertyFieldBinding } from "../form";
 import { ValidationError } from "yup";
-import { removeEntityFromCache, saveEntityToCache } from "../util/entity_cache";
-import { CustomIdField } from "../form/components/CustomIdField";
-import { ErrorFocus } from "../form/components/ErrorFocus";
-import { CustomFieldValidator, getYupEntitySchema } from "../form/validation";
+import {
+    flattenKeys,
+    getEntityFromCache,
+    removeEntityFromCache,
+    removeEntityFromMemoryCache,
+    saveEntityToCache
+} from "../util/entity_cache";
+import { CustomIdField } from "./components/CustomIdField";
+import { ErrorFocus } from "./components/ErrorFocus";
+import { CustomFieldValidator, getYupEntitySchema } from "./validation";
 import { EntityFormActions, EntityFormActionsProps } from "./EntityFormActions";
+import { LocalChangesMenu } from "./components/LocalChangesMenu";
 
 export type OnUpdateParams = {
     entity: Entity<any>,
@@ -64,7 +74,7 @@ export type EntityFormProps<M extends Record<string, any>> = {
     entity?: Entity<M>;
     databaseId?: string;
     onIdChange?: (id: string) => void;
-    onValuesModified?: (modified: boolean) => void;
+    onValuesModified?: (modified: boolean, values: M) => void;
     onSaved?: (params: OnUpdateParams) => void;
     initialDirtyValues?: Partial<M>; // dirty cached entity in memory
     onFormContextReady?: (formContext: FormContext) => void;
@@ -96,6 +106,80 @@ export type EntityFormProps<M extends Record<string, any>> = {
     children?: React.ReactNode;
 };
 
+// extract touched values for nested touched trees and map to current values
+export function extractTouchedValues(values: any, touched: Record<string, boolean>): Record<string, any> {
+    let acc: Record<string, any> = {};
+    if (!touched || typeof touched !== "object") {
+        return acc;
+    }
+
+    Object.entries(touched).forEach(([key, value]) => {
+        if (value) {
+            acc = setIn(acc, key, getIn(values, key));
+        }
+    })
+
+    return acc;
+}
+
+export function getChanges<T extends object>(source: Partial<T>, comparison: Partial<T>): Partial<T> {
+    const changes: Partial<T> = {};
+
+    if (!source) {
+        return {};
+    }
+    if (!comparison) {
+        return source;
+    }
+
+    const allKeys = Array.from(new Set([...Object.keys(source), ...Object.keys(comparison)]));
+
+    for (const key of allKeys) {
+        const sourceValue = (source as any)[key];
+        const comparisonValue = (comparison as any)[key];
+
+        if (equal(sourceValue, comparisonValue)) {
+            continue;
+        }
+
+        const sourceHasKey = source && typeof source === "object" && Object.prototype.hasOwnProperty.call(source, key);
+        const comparisonHasKey = comparison && typeof comparison === "object" && Object.prototype.hasOwnProperty.call(comparison, key);
+
+        if (comparisonHasKey && !sourceHasKey) {
+            (changes as any)[key] = undefined;
+        } else if (Array.isArray(sourceValue)) {
+            const comparisonArray = Array.isArray(comparisonValue) ? comparisonValue : [];
+            if (sourceValue.length < comparisonArray.length) {
+                (changes as any)[key] = sourceValue;
+                continue;
+            }
+            const changedArray = sourceValue.map((item, index) => {
+                const comparisonItem = comparisonArray[index];
+                if (equal(item, comparisonItem)) {
+                    return null;
+                }
+                if (isObject(item) && item && isObject(comparisonItem) && comparisonItem) {
+                    const nestedChanges = getChanges(item, comparisonItem);
+                    return Object.keys(nestedChanges).length > 0 ? nestedChanges : item;
+                }
+                return item;
+            });
+            if (changedArray.some(item => item !== null) || sourceValue.length > comparisonArray.length) {
+                (changes as any)[key] = changedArray;
+            }
+        } else if (isObject(sourceValue) && sourceValue && isObject(comparisonValue) && comparisonValue) {
+            const nestedChanges = getChanges(sourceValue, comparisonValue);
+            if (Object.keys(nestedChanges).length > 0) {
+                (changes as any)[key] = nestedChanges;
+            }
+        } else {
+            (changes as any)[key] = sourceValue;
+        }
+    }
+
+    return changes;
+}
+
 export function EntityForm<M extends Record<string, any>>({
                                                               path,
                                                               fullIdPath,
@@ -126,7 +210,6 @@ export function EntityForm<M extends Record<string, any>>({
         console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
     }
 
-
     const sideEntityController = useSideEntityController();
     const navigationController = useNavigationController();
 
@@ -164,7 +247,7 @@ export function EntityForm<M extends Record<string, any>>({
     const context = useFireCMSContext();
     const analyticsController = useAnalyticsController();
 
-    const [underlyingChanges, setUnderlyingChanges] = useState<Partial<EntityValues<M>>>({});
+    const [underlyingChanges] = useState<Partial<EntityValues<M>>>({});
 
     const [customIdLoading, setCustomIdLoading] = useState<boolean>(false);
 
@@ -189,6 +272,18 @@ export function EntityForm<M extends Record<string, any>>({
 
     const autoSave = collection.formAutoSave && !collection.customId;
 
+    const baseInitialValues = useMemo(() => getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs), [authController, collection, path, status, entity, customizationController.propertyConfigs]);
+
+    const localChangesDataRaw = useMemo(() => entityId
+        ? getEntityFromCache(path + "/" + entityId)
+        : getEntityFromCache(path + "#new"), [entityId, path]);
+
+    const [localChangesCleared, setLocalChangesCleared] = useState<boolean>(false);
+
+    const localChangesBackup = getLocalChangesBackup(collection);
+    const autoApplyLocalChanges = localChangesBackup === "auto_apply";
+    const manualApplyLocalChanges = localChangesBackup === "manual_apply";
+
     const onSubmit = (values: EntityValues<M>, formexController: FormexController<EntityValues<M>>) => {
 
         if (mustSetCustomId && !entityId) {
@@ -226,13 +321,43 @@ export function EntityForm<M extends Record<string, any>>({
             });
     };
 
+    const [initialValues, initialDirty] = useMemo(() => {
+        const initialValuesWithLocalChanges: Partial<M> = autoApplyLocalChanges && localChangesDataRaw ? mergeDeep(baseInitialValues, localChangesDataRaw as Partial<M>) : baseInitialValues;
+        const initialValues = initialDirtyValues ? mergeDeep(initialValuesWithLocalChanges, initialDirtyValues) : initialValuesWithLocalChanges;
+        const initialDirty = Boolean(initialDirtyValues) && initialDirtyValues && Object.keys(initialDirtyValues).length > 0;
+        return [initialValues, initialDirty];
+    }, [autoApplyLocalChanges, localChangesDataRaw, baseInitialValues, initialDirtyValues]);
+
+    const localChangesData = useMemo(() => {
+        if (!localChangesDataRaw) {
+            return undefined;
+        }
+        return getChanges(localChangesDataRaw, initialValues);
+    }, [localChangesDataRaw, initialValues]);
+
+    const hasLocalChanges = !localChangesCleared && localChangesData && Object.keys(localChangesData).length > 0;
+
     const formex: FormexController<M> = formexProp ?? useCreateFormex<M>({
-        initialValues: (initialDirtyValues ?? getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs)) as M,
-        initialDirty: Boolean(initialDirtyValues),
+        initialValues: initialValues as M,
+        initialDirty,
+        initialTouched: initialDirtyValues ?
+            flattenKeys(initialDirtyValues!)
+                .reduce((previousValue, currentValue) => ({
+                    ...previousValue,
+                    [currentValue]: true
+                }), {})
+            : {},
         onSubmit,
         onReset: () => {
             clearDirtyCache();
-            onValuesModified?.(false);
+            onValuesModified?.(false, initialValues as M);
+        },
+        onValuesChangeDeferred: (values: M, controller: FormexController<M>) => {
+            const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+            if (controller.dirty) {
+                const touchedValues = extractTouchedValues(values, controller.touched);
+                saveEntityToCache(key, touchedValues);
+            }
         },
         validation: (values) => {
             return validationSchema?.validate(values, { abortEarly: false })
@@ -295,8 +420,10 @@ export function EntityForm<M extends Record<string, any>>({
 
     function clearDirtyCache() {
         if (status === "new" || status === "copy") {
+            removeEntityFromMemoryCache(path + "#new");
             removeEntityFromCache(path + "#new");
         } else {
+            removeEntityFromMemoryCache(path + "/" + entityId);
             removeEntityFromCache(path + "/" + entityId);
         }
     }
@@ -304,7 +431,7 @@ export function EntityForm<M extends Record<string, any>>({
     const onSaveSuccess = (updatedEntity: Entity<M>) => {
 
         clearDirtyCache();
-        onValuesModified?.(false);
+        onValuesModified?.(false, updatedEntity.values);
         if (!autoSave)
             snackbarController.open({
                 type: "success",
@@ -405,7 +532,7 @@ export function EntityForm<M extends Record<string, any>>({
             values,
             previousValues: entity?.values,
             autoSave: autoSave ?? false
-        }).then((res) => {
+        }).then(() => {
             const eventName: CMSAnalyticsEvent = status === "new"
                 ? "new_entity_saved"
                 : (status === "copy" ? "entity_copied" : (status === "existing" ? "entity_edited" : "unmapped_event"));
@@ -443,7 +570,8 @@ export function EntityForm<M extends Record<string, any>>({
             type: "error",
             message: "Error updating id, check the console"
         });
-    }, []);
+        console.error(error);
+    }, [snackbarController]);
 
     const pluginActions: React.ReactNode[] = [];
     const plugins = customizationController.plugins;
@@ -503,17 +631,15 @@ export function EntityForm<M extends Record<string, any>>({
 
     useEffect(() => {
         if (!autoSave) {
-            onValuesModified?.(modified);
+            onValuesModified?.(modified, formex.values);
         }
     }, [formex.dirty]);
 
-    const deferredValues = useDeferredValue(formex.values);
     const modified = formex.dirty;
 
     const uniqueFieldValidator: CustomFieldValidator = useCallback(({
                                                                         name,
-                                                                        value,
-                                                                        property
+                                                                        value
                                                                     }) => dataSource.checkUniqueField(path, name, value, entityId, collection),
         [dataSource, path, entityId]);
 
@@ -525,13 +651,6 @@ export function EntityForm<M extends Record<string, any>>({
             : undefined,
         [entityId, resolvedCollection.properties, uniqueFieldValidator]);
 
-    useEffect(() => {
-        const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
-        if (modified) {
-            saveEntityToCache(key, deferredValues);
-        }
-    }, [deferredValues, modified, path, entityId, status]);
-
     useOnAutoSave(autoSave, formex, lastSavedValues, save);
 
     useEffect(() => {
@@ -716,7 +835,7 @@ export function EntityForm<M extends Record<string, any>>({
             <form
                 onSubmit={formex.handleSubmit}
                 onReset={() => formex.resetForm({
-                    values: getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs) as M
+                    values: baseInitialValues as M
                 })}
                 noValidate
                 className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className)}>
@@ -725,34 +844,46 @@ export function EntityForm<M extends Record<string, any>>({
                     className={cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
 
                     <div className={cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10")}>
-
-                        {formex.dirty
-                            ? <Tooltip title={"Local unsaved changes"}
-                                       className={"self-end sticky top-4 z-10"}>
-                                <Chip size={"small"} colorScheme={"orangeDarker"}>
-                                    <EditIcon size={"smallest"}/>
-                                </Chip>
-                            </Tooltip>
-                            : <Tooltip title={"In sync with the database"}
-                                       className={"self-end sticky top-4 z-10"}>
-                                <Chip size={"small"}>
-                                    <CheckIcon size={"smallest"}/>
-                                </Chip>
-                            </Tooltip>}
+                        <div
+                            className={"flex flex-row gap-4 self-end sticky top-4 z-10"}>
+
+                            {manualApplyLocalChanges && hasLocalChanges &&
+                                <LocalChangesMenu
+                                    cacheKey={status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId}
+                                    properties={resolvedCollection.properties}
+                                    localChangesData={localChangesData as Partial<M>}
+                                    formex={formex}
+                                    onClearLocalChanges={() => setLocalChangesCleared(true)}
+                                />}
+
+                            {formex.dirty
+                                ? <Tooltip title={"This form has been modified"}>
+                                    <Chip size={"small"} className={"py-1"} colorScheme={"orangeDarker"}>
+                                        <EditIcon size={"smallest"}/>
+                                    </Chip>
+                                </Tooltip>
+                                : <Tooltip title={"The current form is in sync with the database"}>
+                                    <Chip size={"small"} className={"py-1"} >
+                                        <CheckIcon size={"smallest"}/>
+                                    </Chip>
+                                </Tooltip>}
+                        </div>
 
                         {formView}
 
                     </div>
 
                 </div>
+
                 {dialogActions}
+
             </form>
 
         </Formex>
     );
 }
 
-function getInitialEntityValues<M extends object>(
+export function getInitialEntityValues<M extends object>(
     authController: AuthController,
     collection: EntityCollection,
     path: string,

package/src/form/EntityFormActions.tsx

@@ -7,7 +7,16 @@ import {
     ResolvedEntityCollection,
     SideEntityController
 } from "../types";
-import { Button, cls, defaultBorderMixin, DialogActions, IconButton, LoadingButton, Typography } from "@firecms/ui";
+import {
+    Button,
+    cls,
+    defaultBorderMixin,
+    DialogActions,
+    ErrorIcon,
+    IconButton,
+    LoadingButton,
+    Typography
+} from "@firecms/ui";
 import { FormexController } from "@firecms/formex";
 import { useFireCMSContext, useSideEntityController } from "../hooks";
 
@@ -57,13 +66,13 @@ export function EntityFormActions({
             collection,
             context,
             sideEntityController,
-            isSubmitting: formex.isSubmitting,
             disabled,
             status,
             pluginActions,
             openEntityMode,
             navigateBack,
-            formContext
+            formContext,
+            formex
         })
         : buildSideActions({
             fullPath,
@@ -73,13 +82,13 @@ export function EntityFormActions({
             collection,
             context,
             sideEntityController,
-            isSubmitting: formex.isSubmitting,
             disabled,
             status,
             pluginActions,
             openEntityMode,
             navigateBack,
-            formContext
+            formContext,
+            formex
         });
 }
 
@@ -92,13 +101,13 @@ type ActionsViewProps<M extends object> = {
     collection: ResolvedEntityCollection,
     context: FireCMSContext,
     sideEntityController: SideEntityController,
-    isSubmitting: boolean,
     disabled: boolean,
     status: "new" | "existing" | "copy",
     pluginActions?: React.ReactNode[],
     openEntityMode: "side_panel" | "full_screen";
     navigateBack: () => void;
-    formContext: FormContext
+    formContext: FormContext,
+    formex: FormexController<any>;
 };
 
 function buildBottomActions<M extends object>({
@@ -110,15 +119,17 @@ function buildBottomActions<M extends object>({
                                                   collection,
                                                   context,
                                                   sideEntityController,
-                                                  isSubmitting,
                                                   disabled,
                                                   status,
                                                   pluginActions,
                                                   openEntityMode,
                                                   navigateBack,
-                                                  formContext
+                                                  formContext,
+                                                  formex
                                               }: ActionsViewProps<M>) {
 
+    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
+
     return <DialogActions position={"absolute"}>
         {savingError &&
             <div className="text-right">
@@ -151,7 +162,7 @@ function buildBottomActions<M extends object>({
             ))}
         </div>}
         {pluginActions}
-        <Button variant="text" disabled={disabled || isSubmitting}
+        <Button variant="text" disabled={disabled || formex.isSubmitting}
                 color={"primary"}
                 type="reset">
             {status === "existing" ? "Discard" : "Clear"}
@@ -159,7 +170,8 @@ function buildBottomActions<M extends object>({
         <Button variant={"filled"}
                 color="primary"
                 type="submit"
-                disabled={disabled || isSubmitting}>
+                disabled={disabled || formex.isSubmitting}
+                startIcon={hasErrors ? <ErrorIcon/> : undefined}>
             {status === "existing" && "Save"}
             {status === "copy" && "Create copy"}
             {status === "new" && "Create"}
@@ -178,12 +190,14 @@ function buildSideActions<M extends object>({
                                                 collection,
                                                 context,
                                                 sideEntityController,
-                                                isSubmitting,
                                                 disabled,
                                                 status,
-                                                pluginActions
+                                                pluginActions,
+                                                formex
                                             }: ActionsViewProps<M>) {
 
+    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
+
     return <div
         className={cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin)}>
         <LoadingButton fullWidth={true}
@@ -191,12 +205,13 @@ function buildSideActions<M extends object>({
                        color="primary"
                        type="submit"
                        size={"large"}
-                       disabled={disabled || isSubmitting}>
+                       startIcon={hasErrors ? <ErrorIcon/> : undefined}
+                       disabled={disabled || formex.isSubmitting}>
             {status === "existing" && "Save"}
             {status === "copy" && "Create copy"}
             {status === "new" && "Create"}
         </LoadingButton>
-        <Button fullWidth={true} variant="text" disabled={disabled || isSubmitting} type="reset">
+        <Button fullWidth={true} variant="text" disabled={disabled || formex.isSubmitting} type="reset">
             {status === "existing" ? "Discard" : "Clear"}
         </Button>
 

package/src/form/PropertyFieldBinding.tsx

@@ -83,6 +83,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
      underlyingValueHasChanged,
      disabled: disabledProp,
      partOfArray,
+     partOfBlock,
      minimalistView,
      autoFocus,
      index,
@@ -93,10 +94,6 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
     const authController = useAuthController();
     const customizationController = useCustomizationController();
 
-    if(propertyKey === "created_by"){
-        console.log("Rendering field for created_by", {propertyKey, property, context});
-    }
-
     return (
         <Field
             key={propertyKey}
@@ -168,6 +165,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     context,
                     disabled,
                     partOfArray,
+                    partOfBlock,
                     minimalistView,
                     autoFocus,
                     size,
@@ -199,6 +197,7 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
          includeDescription,
          underlyingValueHasChanged,
          partOfArray,
+         partOfBlock,
          minimalistView,
          autoFocus,
          context,
@@ -261,6 +260,7 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
         disabled: disabled ?? false,
         underlyingValueHasChanged: underlyingValueHasChanged ?? false,
         partOfArray: partOfArray ?? false,
+        partOfBlock: partOfBlock ?? false,
         minimalistView: minimalistView ?? false,
         autoFocus: autoFocus ?? false,
         customProps: customFieldProps,

package/src/form/components/ErrorFocus.tsx

@@ -1,51 +1,44 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { useFormex } from "@firecms/formex";
 
 export const ErrorFocus = ({ containerRef }:
                                {
                                    containerRef?: React.RefObject<HTMLDivElement>
                                }) => {
-    const { isSubmitting, isValidating, errors } = useFormex();
+    const {
+        isValidating,
+        errors,
+        version
+    } = useFormex();
+
+    const prevVersion = useRef(version);
 
     useEffect(() => {
+
+        if (version === prevVersion.current) {
+            return;
+        }
+
         const keys = Object.keys(errors);
 
-        // Whenever there are errors and the form is submitting but finished validating.
-        if (keys.length > 0 && isSubmitting && !isValidating) {
+        // Whenever there are errors and the form has been submitted and is not validating
+        if (!isValidating && keys.length > 0) {
             const errorElement = containerRef?.current?.querySelector<HTMLDivElement>(
                 `#form_field_${keys[0]}`
             );
 
-            if (errorElement && containerRef?.current) {
-                const scrollableParent = getScrollableParent(containerRef.current);
-                if (scrollableParent) {
-                    const top = errorElement.getBoundingClientRect().top;
-                    scrollableParent.scrollTo({
-                        top: scrollableParent.scrollTop + top - 196,
-                        behavior: "smooth"
-                    });
-                }
+            if (errorElement) {
+                errorElement.scrollIntoView({
+                    behavior: "smooth",
+                    block: "center"
+                });
                 const input = errorElement.querySelector("input");
                 if (input) input.focus();
             }
+            prevVersion.current = version;
         }
-    }, [isSubmitting, isValidating, errors, containerRef]);
+    }, [isValidating, errors, containerRef, version]);
 
     // This component does not render anything by itself.
     return null;
 };
-
-const isScrollable = (ele: HTMLElement | null) => {
-    const hasScrollableContent = ele && ele.scrollHeight > ele.clientHeight;
-
-    const overflowYStyle = ele ? window.getComputedStyle(ele).overflowY : null;
-    const isOverflowHidden = overflowYStyle && overflowYStyle.indexOf("hidden") !== -1;
-
-    return hasScrollableContent && !isOverflowHidden;
-};
-
-const getScrollableParent = (ele: HTMLElement | null): HTMLElement | null => {
-    return (!ele || ele === document.body)
-        ? document.body
-        : (isScrollable(ele) ? ele : getScrollableParent(ele.parentNode as HTMLElement));
-};