Logs cleanup

Author: fgatti675

packages/firecms_core/src/core/EntityEditView.tsx

@@ -109,8 +109,6 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         ? getEntityFromMemoryCache(props.path + "/" + entityId)
         : getEntityFromMemoryCache(props.path + "#new");
 
-    console.log("EntityEditView initialDirtyValues:", initialDirtyValues);
-
     const authController = useAuthController();
 
     const initialStatus = props.copy ? "copy" : (entityId ? "existing" : "new");

packages/firecms_core/src/form/EntityForm.tsx

@@ -285,7 +285,6 @@ export function EntityForm<M extends Record<string, any>>({
     }, [localChangesDataRaw, initialValues]);
 
     const hasLocalChanges = !localChangesCleared && localChangesData && Object.keys(localChangesData).length > 0;
-    console.log("222 Local changes data", { localChangesDataRaw, localChangesData, hasLocalChanges });
 
     const formex: FormexController<M> = formexProp ?? useCreateFormex<M>({
         initialValues: initialValues as M,
@@ -798,10 +797,12 @@ export function EntityForm<M extends Record<string, any>>({
                             className={"flex flex-row gap-4 self-end sticky top-4 z-10"}>
 
                             {manualApplyLocalChanges && hasLocalChanges &&
-                                <LocalChangesMenu localChangesData={localChangesData as Partial<M>}
-                                                  formex={formex}
-                                                  onClearLocalChanges={() => setLocalChangesCleared(true)}
-                                                  cacheKey={(status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId}
+                                <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

packages/firecms_core/src/form/components/LocalChangesMenu.tsx

@@ -11,23 +11,28 @@ import {
     Typography, VisibilityIcon,
     WarningIcon
 } from "@firecms/ui";
-import { flattenKeys, FormexController } from "@firecms/formex";
+import { flattenKeys, FormexController, getIn } 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";
 
 interface LocalChangesMenuProps<M extends object> {
     cacheKey: string;
     localChangesData: Partial<M>;
     formex: FormexController<M>;
     onClearLocalChanges?: () => void;
+    properties: ResolvedProperties<M>;
 }
 
 export function LocalChangesMenu<M extends object>({
                                                        localChangesData,
                                                        formex,
                                                        onClearLocalChanges,
-                                                       cacheKey
+                                                       cacheKey,
+                                                       properties
                                                    }: LocalChangesMenuProps<M>) {
 
     const snackbarController = useSnackbarController();
@@ -111,25 +116,30 @@ export function LocalChangesMenu<M extends object>({
                     </p>
                     <div
                         className={`border rounded-lg divide-y divide-surface-200 divide-surface-opacity-40 dark:divide-surface-700 dark:divide-opacity-40 ${defaultBorderMixin}`}>
-                        {Object.entries(localChangesData).map(([key, value]) => (
-                            <div key={key}
-                                 className="grid grid-cols-12 gap-x-4 px-4 py-3 items-center">
-                                <div
-                                    className="col-span-3">
-                                    <Typography variant="caption"
-                                                className="text-gray-500 dark:text-gray-400 break-words">{key}</Typography>
+                        {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="col-span-9">
-                                    <Typography component="div" variant="body2"
-                                                className="text-gray-800 dark:text-gray-200">
-                                        <div
-                                            className="whitespace-pre-wrap break-words text-sm">
-                                            {typeof value === "object" && value !== null ? JSON.stringify(value, null, 2) : String(value)}
-                                        </div>
-                                    </Typography>
-                                </div>
-                            </div>
-                        ))}
+                            );
+                        })}
                     </div>
                 </DialogContent>
                 <DialogActions>

packages/firecms_core/src/util/createFormexStub.tsx

@@ -4,6 +4,7 @@ export function createFormexStub<T extends object>(values: T): FormexController<
     const errorMessage = "You are in a read-only context. You cannot modify the formex controller.";
 
     return {
+        debugId: "",
         values,
         initialValues: values,
         touched: {} as Record<string, boolean>,
@@ -19,6 +20,9 @@ export function createFormexStub<T extends object>(values: T): FormexController<
         setValues: () => {
             throw new Error(errorMessage);
         },
+        setTouched(touched: Record<string, boolean>): void {
+            throw new Error(errorMessage);
+        },
         setFieldValue: () => {
             throw new Error(errorMessage);
         },

packages/firecms_core/src/util/entity_cache.ts

@@ -102,7 +102,6 @@ export function removeEntityFromMemoryCache(path: string): void {
 }
 
 export function saveEntityToMemoryCache(path: string, data: object): void {
-    console.log("!!! Saving entity to memory cache", path, data);
     entityCache.set(path, data);
 }
 
@@ -149,10 +148,6 @@ export function getEntityFromCache(path: string): object | undefined {
  * @param path - The unique path/key for the entity to remove.
  */
 export function removeEntityFromCache(path: string): void {
-
-    console.log("Removing entity from cache", path);
-
-    // Remove from localStorage
     if (isLocalStorageAvailable) {
         try {
             const key = LOCAL_STORAGE_PREFIX + path;