@firecms/core 3.0.0-canary.287 → 3.0.0-canary.289

package/src/form/EntityForm.tsx

@@ -22,6 +22,7 @@ import {
     getLocalChangesBackup,
     getValueInPath,
     isHidden,
+    isObject,
     isReadOnly,
     mergeDeep,
     resolveCollection,
@@ -39,11 +40,12 @@ import {
     useSnackbarController
 } from "../hooks";
 import { Alert, CheckIcon, Chip, cls, EditIcon, NotesIcon, paperMixin, Tooltip, Typography } from "@firecms/ui";
-import { flattenKeys, Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecms/formex";
+import { Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecms/formex";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { FormEntry, FormLayout, LabelWithIconAndTooltip, PropertyFieldBinding } from "../form";
 import { ValidationError } from "yup";
 import {
+    flattenKeys,
     getEntityFromCache,
     removeEntityFromCache,
     removeEntityFromMemoryCache,
@@ -120,6 +122,64 @@ export function extractTouchedValues(values: any, touched: Record<string, boolea
     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,
@@ -272,16 +332,7 @@ export function EntityForm<M extends Record<string, any>>({
         if (!localChangesDataRaw) {
             return undefined;
         }
-        let filteredChanges = {};
-        const flattenedKeys = flattenKeys(localChangesDataRaw);
-        flattenedKeys.forEach(key => {
-            const localValue = getIn(localChangesDataRaw, key);
-            const initialValue = getIn(initialValues, key);
-            if (!equal(localValue, initialValue)) {
-                filteredChanges = setIn(filteredChanges, key, localValue);
-            }
-        });
-        return filteredChanges;
+        return getChanges(localChangesDataRaw, initialValues);
     }, [localChangesDataRaw, initialValues]);
 
     const hasLocalChanges = !localChangesCleared && localChangesData && Object.keys(localChangesData).length > 0;
@@ -891,3 +942,4 @@ function useOnAutoSave(autoSave: undefined | boolean, formex: FormexController<a
         }
     }, [formex.values]);
 }
+

package/src/form/components/LocalChangesMenu.tsx

@@ -1,23 +1,23 @@
 import React, { useState } from "react";
 import {
-    Button, CancelIcon, CheckIcon,
+    Button,
+    CancelIcon,
+    CheckIcon,
     defaultBorderMixin,
     Dialog,
     DialogActions,
     DialogContent,
     KeyboardArrowDownIcon,
     Menu,
-    MenuItem,
-    Typography, VisibilityIcon,
+    MenuItem, VisibilityIcon,
     WarningIcon
 } from "@firecms/ui";
-import { flattenKeys, FormexController, getIn } from "@firecms/formex";
+import { FormexController } from "@firecms/formex";
 import { useSnackbarController } from "../../hooks";
 import { mergeDeep } from "../../util";
-import { removeEntityFromCache } from "../../util/entity_cache";
-import { getPropertyInPath } from "../../util";
-import { PropertyPreview } from "../../preview";
-import { ResolvedProperties, ResolvedProperty } from "../../types";
+import { flattenKeys, removeEntityFromCache } from "../../util/entity_cache";
+import { ResolvedProperties } from "../../types";
+import { PropertyCollectionView } from "../../components/PropertyCollectionView";
 
 interface LocalChangesMenuProps<M extends object> {
     cacheKey: string;
@@ -38,13 +38,9 @@ export function LocalChangesMenu<M extends object>({
     const snackbarController = useSnackbarController();
     const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
     const [open, setOpen] = useState(false);
-    const handleOpenMenu = () => {
-        setOpen(true)
-    };
 
-    const handleCloseMenu = () => {
-        setOpen(false)
-    };
+    const handleOpenMenu = () => setOpen(true);
+    const handleCloseMenu = () => setOpen(false);
 
     const handlePreview = () => {
         setPreviewDialogOpen(true);
@@ -54,8 +50,8 @@ export function LocalChangesMenu<M extends object>({
     const handleApply = () => {
         const mergedValues = mergeDeep(formex.values, localChangesData);
         const touched = { ...formex.touched };
-        const newTouched: string[] = flattenKeys(localChangesData);
-        newTouched.forEach((key) => {
+        const previewKeys = flattenKeys(localChangesData);
+        previewKeys.forEach((key) => {
             touched[key] = true;
         });
 
@@ -81,23 +77,26 @@ export function LocalChangesMenu<M extends object>({
 
     return (
         <>
-
             <Menu
-                trigger={<Button
-                    size={"small"}
-                    className={"font-semibold text-xs rounded-full px-4 py-1 bg-yellow-200 dark:bg-yellow-900 hover:bg-yellow-300 dark:hover:bg-yellow-800 text-yellow-800 dark:text-yellow-200"}
-                    onClick={handleOpenMenu}>
-                    <WarningIcon
-                        size={"smallest"}
-                        className={"mr-1 text-yellow-600 dark:text-yellow-400"}/>
-                    Unsaved Local changes
-                    <KeyboardArrowDownIcon size={"smallest"}/>
-                </Button>}
+                trigger={
+                    <Button
+                        size={"small"}
+                        className={
+                            "font-semibold text-xs rounded-full px-4 py-1 bg-yellow-200 dark:bg-yellow-900 hover:bg-yellow-300 dark:hover:bg-yellow-800 text-yellow-800 dark:text-yellow-200"
+                        }
+                        onClick={handleOpenMenu}
+                    >
+                        <WarningIcon size={"smallest"} className={"mr-1 text-yellow-600 dark:text-yellow-400"}/>
+                        Unsaved Local changes
+                        <KeyboardArrowDownIcon size={"smallest"}/>
+                    </Button>
+                }
                 open={open}
                 onOpenChange={setOpen}
             >
                 <div className={"max-w-xs px-4 py-4 text-sm text-gray-700 dark:text-gray-300"}>
-                    This document was edited locally and has unsaved changes.
+                    This document was edited locally and has unsaved changes. These local changes will be lost if you
+                    don't apply them.
                 </div>
                 <MenuItem dense onClick={handlePreview}><VisibilityIcon size={"small"}/>Preview Changes</MenuItem>
                 <MenuItem dense onClick={handleApply}><CheckIcon size={"small"}/>Apply Changes</MenuItem>
@@ -114,32 +113,13 @@ export function LocalChangesMenu<M extends object>({
                     <p className={"mb-4"}>
                         These are the local changes that will be applied to the form.
                     </p>
-                    <div
-                        className={`border rounded-lg divide-y divide-surface-200 divide-surface-opacity-40 dark:divide-surface-700 dark:divide-opacity-40 ${defaultBorderMixin}`}>
-                        {flattenKeys(localChangesData).map((key) => {
-                            const value = getIn(localChangesData, key);
-                            const property = getPropertyInPath(properties, key) as ResolvedProperty;
-                            if (!property) {
-                                return null;
-                            }
-                            return (
-                                <div key={key}
-                                     className="grid grid-cols-12 gap-x-4 px-4 py-3 items-center">
-                                    <div
-                                        className="col-span-3 text-right">
-                                        <Typography variant="caption"
-                                                    className="text-gray-500 dark:text-gray-400 break-words">{property.name || key}</Typography>
-                                    </div>
-                                    <div className="col-span-9">
-                                        <PropertyPreview
-                                            propertyKey={key}
-                                            value={value}
-                                            property={property}
-                                            size={"small"}/>
-                                    </div>
-                                </div>
-                            );
-                        })}
+                    <div className={`border rounded-lg ${defaultBorderMixin}`} style={{
+                        maxHeight: 520,
+                        overflow: "auto"
+                    }}>
+                        <div className="p-4">
+                            <PropertyCollectionView data={localChangesData} properties={properties as ResolvedProperties}/>
+                        </div>
                     </div>
                 </DialogContent>
                 <DialogActions>
@@ -149,7 +129,10 @@ export function LocalChangesMenu<M extends object>({
                         onClick={() => {
                             handleApply();
                             setPreviewDialogOpen(false);
-                        }}>Apply changes</Button>
+                        }}
+                    >
+                        Apply changes
+                    </Button>
                 </DialogActions>
             </Dialog>
         </>

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -68,7 +68,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
                                 <div
                                     className="min-w-[140px] w-[25%] py-1">
                                     <Typography variant={"caption"}
-                                                className={"font-mono break-words"}
+                                                className={"break-words font-semibold"}
                                                 color={"secondary"}>
                                         {childProperty.name}
                                     </Typography>
@@ -121,7 +121,7 @@ export function KeyValuePreview({ value }: { value: any }) {
                             key={`table-cell-title-${key}-${key}`}
                             className="min-w-[140px] w-[25%] py-1">
                             <Typography variant={"caption"}
-                                        className={"font-mono break-words"}
+                                        className={"font-semibold break-words"}
                                         color={"secondary"}>
                                 {key}
                             </Typography>

package/src/preview/property_previews/NumberPropertyPreview.tsx

@@ -16,12 +16,12 @@ export function NumberPropertyPreview({
         const enumKey = value;
         const enumValues = enumToObjectEntries(property.enumValues);
         if (!enumValues)
-            return <>{value}</>;
+            return <span className={size === "small" ? "text-sm" : ""}>{value}</span>;
         return <EnumValuesChip
             enumKey={enumKey}
             enumValues={enumValues}
             size={size !== "medium" ? "small" : "medium"}/>;
     } else {
-        return <>{value}</>;
+        return <span className={size === "small" ? "text-sm" : ""}>{value}</span>;
     }
 }

package/src/util/entity_cache.ts

@@ -1,4 +1,5 @@
 import { EntityReference, GeoPoint, Vector } from "../types";
+import { isObject, isPlainObject } from "./objects";
 
 // Define a unique prefix for entity keys in localStorage to avoid key collisions
 const LOCAL_STORAGE_PREFIX = "entity_cache::";
@@ -87,6 +88,10 @@ export function saveEntityToCache(path: string, data: object): void {
         try {
             const key = LOCAL_STORAGE_PREFIX + path;
             const entityString = JSON.stringify(data, customReplacer);
+            console.log("Saving entity to localStorage:", {
+                key,
+                entityString
+            });
             localStorage.setItem(key, entityString);
         } catch (error) {
             console.error(
@@ -129,6 +134,10 @@ export function getEntityFromCache(path: string): object | undefined {
             const entityString = localStorage.getItem(key);
             if (entityString) {
                 const entity: object = JSON.parse(entityString, customReviver);
+                console.log("Loaded entity from localStorage:", {
+                    key,
+                    entity
+                });
                 return entity;
             }
         } catch (error) {
@@ -186,3 +195,29 @@ export function clearEntityCache(): void {
         }
     }
 }
+
+export function flattenKeys(obj: any, prefix = "", result: string[] = []): string[] {
+
+    if (isObject(obj) || Array.isArray(obj)) {
+        const plainObject = isPlainObject(obj);
+        if (!plainObject && prefix) {
+            result.push(prefix);
+        } else {
+            for (const key in obj) {
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    const newKey = prefix
+                        ? Array.isArray(obj)
+                            ? `${prefix}[${key}]`
+                            : `${prefix}.${key}`
+                        : key;
+                    if (isObject(obj[key]) || Array.isArray(obj[key])) {
+                        flattenKeys(obj[key], newKey, result);
+                    } else {
+                        result.push(newKey);
+                    }
+                }
+            }
+        }
+    }
+    return result;
+}

package/src/util/objects.ts

@@ -12,6 +12,21 @@ export function isObject(item: any) {
     return item && typeof item === "object" && !Array.isArray(item);
 }
 
+
+export function isPlainObject(obj:any) {
+    // 1. Rule out non-objects, null, and arrays
+    if (typeof obj !== 'object' || obj === null || Array.isArray(obj)) {
+        return false;
+    }
+
+    // 2. Get the object's direct prototype
+    const proto = Object.getPrototypeOf(obj);
+
+    // 3. A plain object's direct prototype is Object.prototype
+    return proto === Object.prototype;
+}
+
+
 export function mergeDeep<T extends Record<any, any>, U extends Record<any, any>>(
     target: T,
     source: U,
@@ -47,8 +62,31 @@ export function mergeDeep<T extends Record<any, any>, U extends Record<any, any>
                 // If source value is a Date, create a new Date instance.
                 (output as any)[key] = new Date(sourceValue.getTime());
             } else if (Array.isArray(sourceValue)) {
-                // If source value is an array, create a shallow copy of the array.
-                (output as any)[key] = [...sourceValue];
+                if (Array.isArray(outputValue)) {
+                    const newArray = [];
+                    const maxLength = Math.max(outputValue.length, sourceValue.length);
+                    for (let i = 0; i < maxLength; i++) {
+                        const sourceItem = sourceValue[i];
+                        const targetItem = outputValue[i];
+
+                        if (i >= sourceValue.length) { // source is shorter
+                            newArray[i] = targetItem;
+                        } else if (i >= outputValue.length) { // target is shorter
+                            newArray[i] = sourceItem;
+                        } else if (sourceItem === null) {
+                            newArray[i] = targetItem;
+                        } else if (isObject(sourceItem) && isObject(targetItem)) {
+                            newArray[i] = mergeDeep(targetItem, sourceItem, ignoreUndefined);
+                        } else {
+                            newArray[i] = sourceItem;
+                        }
+                    }
+                    (output as any)[key] = newArray;
+                } else {
+                    // If output's value (from target) is not an array,
+                    // overwrite with a shallow copy of the source array.
+                    (output as any)[key] = [...sourceValue];
+                }
             } else if (isObject(sourceValue)) {
                 // If source value is an object:
                 if (isObject(outputValue)) {