@firecms/core 3.0.0-canary.4 → 3.0.0-canary.40

package/src/util/references.ts

@@ -1,11 +1,12 @@
-import { EntityCollection, PropertyConfig } from "../types";
+import { EntityCollection, PropertyConfig, ResolvedEntityCollection } from "../types";
 import { isReferenceProperty } from "./property_utils";
 import { isPropertyBuilder } from "./entities";
+import { getFieldConfig } from "../core";
 
-export function getReferencePreviewKeys(targetCollection: EntityCollection<any>,
-                                        fields: Record<string, PropertyConfig>,
-                                        previewProperties?: string[],
-                                        limit = 3) {
+export function getEntityPreviewKeys(targetCollection: EntityCollection<any>,
+                                     fields: Record<string, PropertyConfig>,
+                                     previewProperties?: string[],
+                                     limit = 3) {
     const allProperties = Object.keys(targetCollection.properties);
     let listProperties = previewProperties?.filter(p => allProperties.includes(p as string));
     if (listProperties && listProperties.length > 0) {
@@ -18,3 +19,33 @@ export function getReferencePreviewKeys(targetCollection: EntityCollection<any>,
         }).slice(0, limit);
     }
 }
+
+export function getEntityTitlePropertyKey<M extends Record<string, any>>(collection: EntityCollection<M>, propertyConfigs: Record<string, PropertyConfig<any>>): string | undefined {
+    if (collection.titleProperty) {
+        return collection.titleProperty as string;
+    }
+    // find first text field property
+    for (const key in collection.properties) {
+        const property = collection.properties[key];
+        if (!isPropertyBuilder(property)) {
+            const field = getFieldConfig(property, propertyConfigs);
+            if (field?.key === "text_field") {
+                return key;
+            }
+        }
+    }
+    return undefined;
+}
+
+export function getEntityImagePreviewPropertyKey<M extends object>(collection: ResolvedEntityCollection<M>): string | undefined {
+
+    // find first text field property
+    for (const key in collection.properties) {
+        const property = collection.properties[key];
+        if (property.dataType === "string" && property.storage?.acceptedFiles?.includes("image/*")) {
+            return key;
+        }
+
+    }
+    return undefined;
+}

package/src/util/strings.ts

@@ -56,8 +56,8 @@ export function unslugify(slug?: string): string {
         const result = slug.replace(/[-_]/g, " ");
         return result.replace(/\w\S*/g, function (txt) {
             return txt.charAt(0).toUpperCase() + txt.substr(1);
-        });
+        }).trim();
     } else {
-        return slug;
+        return slug.trim();
     }
 }

package/src/util/useTraceUpdate.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 
-function printChanged(props: any, prev: any, path = "", depth = 0, maxDepth: number) {
+export function printChanged(props: any, prev: any, path: string | undefined = "", depth: number | undefined = 0, maxDepth: number | undefined = 10) {
     if (depth > maxDepth) {
         return;
     }
@@ -17,6 +17,7 @@ function printChanged(props: any, prev: any, path = "", depth = 0, maxDepth: num
 export function useTraceUpdate(props: any, maxDepth = 3) {
     const prev = useRef(props);
     useEffect(() => {
+        console.log("Changed props:");
         printChanged(props, prev.current, "", 0, maxDepth);
         prev.current = props;
     });

package/src/components/HomePage/NavigationCollectionCard.tsx

@@ -1,146 +0,0 @@
-import { useNavigate } from "react-router-dom";
-
-import { useCustomizationController, useFireCMSContext } from "../../hooks";
-import { PluginHomePageActionsProps, TopNavigationEntry } from "../../types";
-import { IconForView } from "../../util";
-import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
-import { ArrowForwardIcon, Card, cn, IconButton, Markdown, StarBorderIcon, StarIcon, Typography } from "@firecms/ui";
-
-/**
- * This is the component used in the home page to render a card for each
- * collection.
- * @group Components
- * @param view
- * @param path
- * @param collection
- * @param url
- * @param name
- * @param description
- * @param onClick
- * @constructor
- */
-export function NavigationCollectionCard({
-                                             view,
-                                             path,
-                                             collection,
-                                             url,
-                                             name,
-                                             description,
-                                             onClick
-                                         }: TopNavigationEntry & {
-    onClick?: () => void
-}) {
-
-    const userConfigurationPersistence = useUserConfigurationPersistence();
-    const collectionIcon = <IconForView collectionOrView={collection ?? view}/>;
-
-    const navigate = useNavigate();
-    const context = useFireCMSContext();
-    const customizationController = useCustomizationController();
-
-    const favourite = (userConfigurationPersistence?.favouritePaths ?? []).includes(path);
-
-    let actions: React.ReactNode | undefined;
-    if (customizationController.plugins && collection) {
-        const actionProps: PluginHomePageActionsProps = {
-            path,
-            collection,
-            context
-        };
-        actions = <>
-            {customizationController.plugins.map((plugin, i) => (
-                plugin.homePage?.CollectionActions
-                    ? <plugin.homePage.CollectionActions
-                        key={`actions_${i}`}
-                        {...actionProps}
-                        extraProps={plugin.homePage.extraProps}
-                    />
-                    : null
-            ))}
-        </>
-        ;
-    }
-
-    return (
-        <Card
-            className={cn("h-full p-4 cursor-pointer min-h-[230px]")}
-            onClick={() => {
-                onClick?.();
-                navigate(url);
-                if (userConfigurationPersistence) {
-                    userConfigurationPersistence.setRecentlyVisitedPaths(
-                        [path, ...(userConfigurationPersistence.recentlyVisitedPaths ?? []).filter(p => p !== path)]
-                    );
-                }
-            }}>
-
-            <div className="flex flex-col items-start h-full">
-                <div
-                    className="flex-grow w-full">
-
-                    <div
-                        className="h-10 flex items-center w-full justify-between text-gray-300 dark:text-gray-600">
-
-                        {collectionIcon}
-
-                        <div
-                            className="flex items-center gap-1"
-                            onClick={(event: React.MouseEvent) => {
-                                event.preventDefault();
-                                event.stopPropagation();
-                            }}>
-
-                            {actions}
-
-                            {userConfigurationPersistence &&
-                                <IconButton
-                                    onClick={(e) => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        if (favourite) {
-                                            userConfigurationPersistence.setFavouritePaths(
-                                                userConfigurationPersistence.favouritePaths.filter(p => p !== path)
-                                            );
-                                        } else {
-                                            userConfigurationPersistence.setFavouritePaths(
-                                                [...userConfigurationPersistence.favouritePaths, path]
-                                            );
-                                        }
-                                    }}>
-                                    {
-                                        favourite
-                                            ? <StarIcon
-                                                size={18}
-                                                className={"text-secondary"}/>
-                                            : <StarBorderIcon
-                                                size={18}
-                                                className={"text-gray-400 dark:text-gray-500"}/>}
-                                </IconButton>}
-
-                        </div>
-
-                    </div>
-
-                    <Typography gutterBottom variant="h5"
-                                component="h2">
-                        {name}
-                    </Typography>
-
-                    {description && <Typography variant="body2"
-                                                color="secondary"
-                                                component="div">
-                        <Markdown source={description}/>
-                    </Typography>}
-                </div>
-
-                <div style={{ alignSelf: "flex-end" }}>
-
-                    <div className={"p-4"}>
-                        <ArrowForwardIcon className="text-primary"/>
-                    </div>
-                </div>
-
-            </div>
-
-        </Card>);
-}