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

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/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)) {