@firecms/core 3.0.1 → 3.1.0-canary.02232f4

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -10,12 +10,12 @@ import { ErrorBoundary } from "../../components";
  * @group Preview components
  */
 export function ArrayOfStringsPreview({
-                                          propertyKey,
-                                          value,
-                                          property: inputProperty,
-                                          // entity,
-                                          size
-                                      }: PropertyPreviewProps<string[]>) {
+    propertyKey,
+    value,
+    property: inputProperty,
+    // entity,
+    size
+}: PropertyPreviewProps<string[]>) {
     const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
@@ -25,6 +25,8 @@ export function ArrayOfStringsPreview({
         authController
     });
 
+    if (!property) return null;
+
     if (Array.isArray(property.of)) {
         throw Error("Using array properties instead of single one in `of` in ArrayProperty");
     }
@@ -43,10 +45,10 @@ export function ArrayOfStringsPreview({
                     <div key={`preview_array_strings_${propertyKey}_${index}`}>
                         <ErrorBoundary>
                             <StringPropertyPreview propertyKey={propertyKey}
-                                                   property={stringProperty}
-                                                   value={v}
+                                property={stringProperty}
+                                value={v}
                                 // entity={entity}
-                                                   size={size}/>
+                                size={size} />
                         </ErrorBoundary>
                     </div>
                 )}

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -12,12 +12,12 @@ import { ErrorBoundary } from "../../components";
  * @group Preview components
  */
 export function ArrayPropertyPreview({
-                                         propertyKey,
-                                         value,
-                                         property: inputProperty,
-                                         // entity,
-                                         size
-                                     }: PropertyPreviewProps<any[]>) {
+    propertyKey,
+    value,
+    property: inputProperty,
+    // entity,
+    size
+}: PropertyPreviewProps<any[]>) {
 
     const authController = useAuthController();
     const customizationController = useCustomizationController();
@@ -28,6 +28,8 @@ export function ArrayPropertyPreview({
         authController
     });
 
+    if (!property) return null;
+
     if (!property.of) {
         throw Error(`You need to specify an 'of' prop (or specify a custom field) in your array property ${propertyKey}`);
     }
@@ -45,24 +47,24 @@ export function ArrayPropertyPreview({
         <div className="w-full flex flex-col gap-2">
             {values &&
                 values.map((value, index) => {
-                        const of: ResolvedProperty = property.resolvedProperties[index] ??
-                            (property.resolvedProperties[index] ?? (Array.isArray(property.of) ? property.of[index] : property.of));
-                        return of
-                            ? <React.Fragment
-                                key={"preview_array_" + index}>
-                                <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
-                                    <ErrorBoundary>
-                                        <PropertyPreview
-                                            propertyKey={propertyKey}
-                                            // entity={entity}
-                                            value={value}
-                                            property={of}
-                                            size={childSize}/>
-                                    </ErrorBoundary>
-                                </div>
-                            </React.Fragment>
-                            : null;
-                    }
+                    const of: ResolvedProperty = property.resolvedProperties[index] ??
+                        (property.resolvedProperties[index] ?? (Array.isArray(property.of) ? property.of[index] : property.of));
+                    return of
+                        ? <React.Fragment
+                            key={"preview_array_" + index}>
+                            <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
+                                <ErrorBoundary>
+                                    <PropertyPreview
+                                        propertyKey={propertyKey}
+                                        // entity={entity}
+                                        value={value}
+                                        property={of}
+                                        size={childSize} />
+                                </ErrorBoundary>
+                            </div>
+                        </React.Fragment>
+                        : null;
+                }
                 )}
         </div>
     );

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -6,6 +6,7 @@ import { PropertyPreview } from "../PropertyPreview";
 import { cls, defaultBorderMixin, Typography } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 import { EmptyValue } from "../components/EmptyValue";
+import { DatePreview } from "../components/DatePreview";
 
 /**
  * @group Preview components
@@ -111,37 +112,58 @@ export function KeyValuePreview({ value }: { value: any }) {
     return <div
         className="flex flex-col gap-1 w-full">
         {
-            Object.entries(value).map(([key, childValue]: [string, any]) => (
-                <div
-                    key={`map_preview_table_${key}}`}
-                    className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
+            Object.entries(value).map(([key, childValue]: [string, any]) => {
+                const isTimestampObj = childValue && typeof childValue === "object" && (
+                    childValue instanceof Date ||
+                    ("_seconds" in childValue && "_nanoseconds" in childValue && typeof childValue._seconds === "number" && typeof childValue._nanoseconds === "number") ||
+                    ("seconds" in childValue && "nanoseconds" in childValue && typeof childValue.seconds === "number" && typeof childValue.nanoseconds === "number")
+                );
+
+                const isScalar = childValue && (typeof childValue !== "object" || isTimestampObj);
+
+                return (
                     <div
-                        className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
-                        <div
-                            key={`table-cell-title-${key}-${key}`}
-                            className="min-w-[140px] w-[25%] py-1">
-                            <Typography variant={"caption"}
-                                        className={"font-semibold break-words"}
-                                        color={"secondary"}>
-                                {key}
-                            </Typography>
-                        </div>
+                        key={`map_preview_table_${key}}`}
+                        className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
                         <div
-                            className="flex-grow max-w-[75%]">
-                            {childValue && typeof childValue !== "object" && <Typography>
-                                <ErrorBoundary>
-                                    {childValue.toString()}
-                                </ErrorBoundary>
-                            </Typography>}
+                            className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
+                            <div
+                                key={`table-cell-title-${key}-${key}`}
+                                className="min-w-[140px] w-[25%] py-1">
+                                <Typography variant={"caption"}
+                                            className={"font-semibold break-words"}
+                                            color={"secondary"}>
+                                    {key}
+                                </Typography>
+                            </div>
+                            <div
+                                className="flex-grow max-w-[75%]">
+                                {isScalar && (isTimestampObj ? (
+                                    <ErrorBoundary>
+                                        <DatePreview date={
+                                            childValue instanceof Date ? childValue :
+                                            typeof childValue.toDate === "function" ? childValue.toDate() :
+                                            "_seconds" in childValue ? new Date(childValue._seconds * 1000 + childValue._nanoseconds / 1000000) :
+                                            new Date(childValue.seconds * 1000 + childValue.nanoseconds / 1000000)
+                                        } />
+                                    </ErrorBoundary>
+                                ) : (
+                                    <Typography>
+                                        <ErrorBoundary>
+                                            {childValue.toString()}
+                                        </ErrorBoundary>
+                                    </Typography>
+                                ))}
+                            </div>
                         </div>
+                        {typeof childValue === "object" && !isTimestampObj &&
+                            <div className={cls(defaultBorderMixin, "border-l pl-4")}>
+                                <KeyValuePreview value={childValue}/>
+                            </div>
+                        }
                     </div>
-                    {typeof childValue === "object" &&
-                        <div className={cls(defaultBorderMixin, "border-l pl-4")}>
-                            <KeyValuePreview value={childValue}/>
-                        </div>
-                    }
-                </div>
-            ))
+                );
+            })
         }
     </div>;
 }

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -19,9 +19,9 @@ export interface SkeletonPropertyComponentProps {
  * @group Preview components
  */
 export function SkeletonPropertyComponent({
-                                              property,
-                                              size
-                                          }: SkeletonPropertyComponentProps
+    property,
+    size
+}: SkeletonPropertyComponentProps
 ) {
 
     if (!property) {
@@ -101,7 +101,7 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
                         {property.properties && property.properties[key] &&
                             <SkeletonPropertyComponent
                                 property={property.properties[key]}
-                                size={"medium"}/>}
+                                size={"medium"} />}
                     </div>
                 ))}
             </div>
@@ -110,29 +110,29 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
     return (
         <table className="table-auto">
             <tbody>
-            {mapPropertyKeys &&
-                mapPropertyKeys.map((key, index) => {
-                    return (
-                        <tr
-                            key={`map_preview_table__${index}`}
-                            className="border-b last:border-b-0">
-                            <th key={`table-cell-title--${key}`}
-                                className="align-top"
-                                style={{ width: "30%" }}>
-                                <p className="text-xs text-secondary">
-                                    {property.properties![key].name}
-                                </p>
-                            </th>
-                            <th key={`table-cell-${key}`}
-                                style={{ width: "70%" }}>
-                                {property.properties && property.properties[key] &&
-                                    <SkeletonPropertyComponent
-                                        property={property.properties[key]}
-                                        size={"medium"}/>}
-                            </th>
-                        </tr>
-                    );
-                })}
+                {mapPropertyKeys &&
+                    mapPropertyKeys.map((key, index) => {
+                        return (
+                            <tr
+                                key={`map_preview_table__${index}`}
+                                className="border-b last:border-b-0">
+                                <th key={`table-cell-title--${key}`}
+                                    className="align-top"
+                                    style={{ width: "30%" }}>
+                                    <p className="text-xs text-secondary">
+                                        {property.properties![key].name}
+                                    </p>
+                                </th>
+                                <th key={`table-cell-${key}`}
+                                    style={{ width: "70%" }}>
+                                    {property.properties && property.properties[key] &&
+                                        <SkeletonPropertyComponent
+                                            property={property.properties[key]}
+                                            size={"medium"} />}
+                                </th>
+                            </tr>
+                        );
+                    })}
             </tbody>
         </table>
     );
@@ -149,24 +149,24 @@ function renderArrayOfMaps<M extends Record<string, any>>(properties: ResolvedPr
     return (
         <table className="table-auto">
             <tbody>
-            {
-                [0, 1, 2].map((value, index) => {
-                    return (
-                        <tr key={`table_${value}_${index}`}>
-                            {tableProperties && tableProperties.map(
-                                (key) => (
-                                    <th
-                                        key={`table-cell-${key}`}
-                                    >
-                                        <SkeletonPropertyComponent
-                                            property={(properties)[key]}
-                                            size={"medium"}/>
-                                    </th>
-                                )
-                            )}
-                        </tr>
-                    );
-                })}
+                {
+                    [0, 1, 2].map((value, index) => {
+                        return (
+                            <tr key={`table_${value}_${index}`}>
+                                {tableProperties && tableProperties.map(
+                                    (key) => (
+                                        <th
+                                            key={`table-cell-${key}`}
+                                        >
+                                            <SkeletonPropertyComponent
+                                                property={(properties)[key]}
+                                                size={"medium"} />
+                                        </th>
+                                    )
+                                )}
+                            </tr>
+                        );
+                    })}
             </tbody>
         </table>
     );
@@ -203,14 +203,14 @@ function renderGenericArrayCell(
     return (
 
         <div key={"array_index_" + index}
-             className={"flex flex-col gap-2"}>
+            className={"flex flex-col gap-2"}>
 
             {
                 [0, 1].map((value, index) =>
                     <>
                         <SkeletonPropertyComponent key={`i_${index}`}
-                                                   property={property}
-                                                   size={"medium"}/>
+                            property={property}
+                            size={"medium"} />
                     </>
                 )}
         </div>
@@ -220,16 +220,21 @@ function renderGenericArrayCell(
 function renderUrlAudioComponent() {
     return (
         <Skeleton width={300}
-                  height={100}/>
+            height={100} />
     );
 }
 
-export function renderSkeletonImageThumbnail(size: PreviewSize) {
+export function renderSkeletonImageThumbnail(size: PreviewSize, fill?: boolean) {
+    if (fill) {
+        return (
+            <Skeleton className="w-full h-full" />
+        );
+    }
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const imageSize = size === "small" ? 40 : size === "medium" ? 100 : 200;
     return (
         <Skeleton width={imageSize}
-                  height={imageSize}/>
+            height={imageSize} />
     );
 }
 
@@ -237,12 +242,12 @@ function renderUrlVideo(size: PreviewSize) {
 
     return (
         <Skeleton width={size !== "large" ? 300 : 500}
-                  height={size !== "large" ? 200 : 250}/>
+            height={size !== "large" ? 200 : 250} />
     );
 }
 
 function renderReference() {
-    return <Skeleton width={200} height={100}/>;
+    return <Skeleton width={200} height={100} />;
 }
 
 function renderUrlComponent(property: ResolvedStringProperty, size: PreviewSize = "large") {
@@ -270,14 +275,14 @@ function renderUrlFile(size: PreviewSize) {
 }
 
 export function renderSkeletonText(index?: number, width = 120) {
-    return <Skeleton width={width} key={`skeleton_${index}`}/>;
+    return <Skeleton width={width} key={`skeleton_${index}`} />;
 }
 
 export function renderSkeletonCaptionText(index?: number) {
     return <Skeleton
-        height={20}/>;
+        height={20} />;
 }
 
 export function renderSkeletonIcon() {
-    return <Skeleton width={24} height={24}/>;
+    return <Skeleton width={24} height={24} />;
 }

package/src/routes/CustomCMSRoute.tsx

@@ -13,6 +13,7 @@ export function CustomCMSRoute({ cmsView }: {
             breadcrumbs: [{
                 title: cmsView.name,
                 url: cmsView.path
+                // count: undefined (not applicable for custom views)
             }]
         });
     }, [cmsView.path]);

package/src/routes/FireCMSRoute.tsx

@@ -1,7 +1,6 @@
 import { Blocker, useBlocker, useLocation } from "react-router";
-import { EntityEditView } from "../core/EntityEditView";
+import React, { useEffect, useRef, useState } from "react";
 import { useNavigationController } from "../hooks";
-import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
     getNavigationEntriesFromPath,
@@ -11,7 +10,11 @@ import {
 } from "../util/navigation_from_path";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 import { toArray } from "../util/arrays";
-import { EntityCollectionView, NotFoundPage } from "../components";
+import { NotFoundPage } from "../components";
+import { lazyEager } from "../util/lazy_eager";
+
+const EntityEditView = lazyEager<typeof import("../core/EntityEditView")["EntityEditView"]>(() => import("../core/EntityEditView"), "EntityEditView");
+const EntityCollectionView = lazyEager<typeof import("../components/EntityCollectionView/EntityCollectionView")["EntityCollectionView"]>(() => import("../components/EntityCollectionView/EntityCollectionView"), "EntityCollectionView");
 import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
 import { EntityCollection } from "../types";
 
@@ -35,22 +38,34 @@ export function FireCMSRoute() {
     });
 
     useEffect(() => {
+        const lastEntry = navigationEntries[navigationEntries.length - 1];
+        const isViewingCollection = lastEntry?.type === "collection";
+
         breadcrumbs.set({
-            breadcrumbs: navigationEntries.map(entry => {
+            breadcrumbs: navigationEntries.map((entry, index) => {
+                const isLastEntry = index === navigationEntries.length - 1;
+
                 if (entry.type === "entity") {
                     return ({
                         title: entry.entityId,
                         url: navigation.buildUrlCollectionPath(entry.fullPath)
+                        // count: undefined (not applicable for entities)
                     });
                 } else if (entry.type === "custom_view") {
                     return ({
                         title: entry.view.name,
                         url: navigation.buildUrlCollectionPath(entry.fullPath)
+                        // count: undefined (not applicable for custom views)
                     });
                 } else if (entry.type === "collection") {
+                    // Only show count badge (loading state) when viewing this collection directly
+                    // Don't show count for parent collections when viewing an entity
+                    const showCount = isLastEntry && isViewingCollection;
                     return ({
                         title: entry.collection.name,
-                        url: navigation.buildUrlCollectionPath(entry.fullPath)
+                        url: navigation.buildUrlCollectionPath(entry.fullPath),
+                        id: entry.fullPath,
+                        ...(showCount ? { count: null } : {}) // null = loading, undefined = no badge
                     });
                 } else {
                     throw new Error("Unexpected navigation entry type");
@@ -59,6 +74,7 @@ export function FireCMSRoute() {
         });
     }, [navigationEntries.map(entry => entry.path).join(",")]);
 
+
     if (isNew) {
         return <EntityFullScreenRoute
             pathname={pathname}
@@ -75,15 +91,17 @@ export function FireCMSRoute() {
             collection = navigation.getCollection(navigationEntries[0].path);
         if (!collection)
             return null;
-        return <EntityCollectionView
-            key={`collection_view_${collection.id ?? collection.path}`}
-            isSubCollection={false}
-            parentCollectionIds={[]}
-            fullPath={collection.path}
-            fullIdPath={collection.id}
-            updateUrl={true}
-            {...collection}
-            Actions={toArray(collection.Actions)}/>
+        return <React.Suspense fallback={null}>
+            <EntityCollectionView
+                key={`collection_view_${collection.id ?? collection.path}`}
+                isSubCollection={false}
+                parentCollectionIds={[]}
+                fullPath={collection.path}
+                fullIdPath={collection.id}
+                updateUrl={true}
+                {...collection}
+                Actions={toArray(collection.Actions)} />
+        </React.Suspense>;
     }
 
     if (isSidePanel) {
@@ -96,15 +114,17 @@ export function FireCMSRoute() {
                 collection = navigation.getCollection(firstEntry.path);
             if (!collection)
                 return null;
-            return <EntityCollectionView
-                key={`collection_view_${collection.id ?? collection.path}`}
-                fullIdPath={collection.id}
-                isSubCollection={false}
-                parentCollectionIds={[]}
-                fullPath={collection.path}
-                updateUrl={true}
-                {...collection}
-                Actions={toArray(collection.Actions)}/>;
+            return <React.Suspense fallback={null}>
+                <EntityCollectionView
+                    key={`collection_view_${collection.id ?? collection.path}`}
+                    fullIdPath={collection.id}
+                    isSubCollection={false}
+                    parentCollectionIds={[]}
+                    fullPath={collection.path}
+                    updateUrl={true}
+                    {...collection}
+                    Actions={toArray(collection.Actions)} />
+            </React.Suspense>;
         }
     }
 
@@ -131,11 +151,11 @@ function getSelectedTabFromUrl(isNew: boolean, lastCustomView: NavigationViewCol
 }
 
 function EntityFullScreenRoute({
-                                   pathname,
-                                   navigationEntries,
-                                   isNew,
-                                   isCopy
-                               }: {
+    pathname,
+    navigationEntries,
+    isNew,
+    isCopy
+}: {
     pathname: string;
     navigationEntries: NavigationViewInternal[],
     isNew: boolean,
@@ -178,8 +198,8 @@ function EntityFullScreenRoute({
     let blocker: Blocker | undefined = undefined;
     try {
         blocker = useBlocker(({
-                                  nextLocation
-                              }) => {
+            nextLocation
+        }) => {
             if (nextLocation.pathname.startsWith(entityPath))
                 return false;
             return blocked.current;
@@ -195,52 +215,54 @@ function EntityFullScreenRoute({
     }
 
     if (!isNew && !lastEntityEntry) {
-        return <NotFoundPage/>;
+        return <NotFoundPage />;
     }
 
     const collection = isNew ? lastCollectionEntry!.collection : lastEntityEntry!.parentCollection;
     const fullIdPath = isNew ? lastCollectionEntry!.path : lastEntityEntry!.path;
     const collectionPath = navigation.resolveIdsFrom(fullIdPath);
     return <>
-        <EntityEditView
-            key={collection.id + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
-            entityId={isNew ? undefined : entityId}
-            fullIdPath={fullIdPath}
-            collection={collection}
-            layout={"full_screen"}
-            path={collectionPath}
-            copy={isCopy}
-            selectedTab={selectedTab ?? undefined}
-            onValuesModified={(modified) => blocked.current = modified}
-            onSaved={(params) => {
-                const newSelectedTab = params.selectedTab;
-                const newEntityId = params.entityId;
-                if (newSelectedTab) {
-                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}`, { replace: true });
-                } else {
-                    navigate(`${basePath}/${newEntityId}`, { replace: true });
-                }
-            }}
-            onTabChange={(params) => {
-                setSelectedTab(params.selectedTab);
-                if (isNew) {
-                    return;
-                }
-                const newSelectedTab = params.selectedTab;
-                if (newSelectedTab) {
-                    navigate(`${basePath}/${entityId}/${newSelectedTab}`, { replace: true });
-                } else {
-                    navigate(`${basePath}/${entityId}`, { replace: true });
-                }
-            }}
-            parentCollectionIds={parentCollectionIds}
-        />
+        <React.Suspense fallback={null}>
+            <EntityEditView
+                key={collection.id + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
+                entityId={isNew ? undefined : entityId}
+                fullIdPath={fullIdPath}
+                collection={collection}
+                layout={"full_screen"}
+                path={collectionPath}
+                copy={isCopy}
+                selectedTab={selectedTab ?? undefined}
+                onValuesModified={(modified) => blocked.current = modified}
+                onSaved={(params) => {
+                    const newSelectedTab = params.selectedTab;
+                    const newEntityId = params.entityId;
+                    if (newSelectedTab) {
+                        navigate(`${basePath}/${newEntityId}/${newSelectedTab}`, { replace: true });
+                    } else {
+                        navigate(`${basePath}/${newEntityId}`, { replace: true });
+                    }
+                }}
+                onTabChange={(params) => {
+                    setSelectedTab(params.selectedTab);
+                    if (isNew) {
+                        return;
+                    }
+                    const newSelectedTab = params.selectedTab;
+                    if (newSelectedTab) {
+                        navigate(`${basePath}/${entityId}/${newSelectedTab}`, { replace: true });
+                    } else {
+                        navigate(`${basePath}/${entityId}`, { replace: true });
+                    }
+                }}
+                parentCollectionIds={parentCollectionIds}
+            />
+        </React.Suspense>
 
         <UnsavedChangesDialog
             open={blocker?.state === "blocked"}
             handleOk={() => blocker?.proceed?.()}
             handleCancel={() => blocker?.reset?.()}
-            body={"You have unsaved changes in this entity."}/>
+            body={"You have unsaved changes in this entity."} />
 
     </>;
 }