@firecms/core 3.0.0-canary.7 → 3.0.0-canary.9

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from "react";
 import equal from "react-fast-compare"
 
-import { ReferencePreview, ReferencePreviewContainer } from "../../../preview";
+import { ReferencePreview } from "../../../preview";
 import { CollectionSize, Entity, EntityCollection, EntityReference, FilterValues } from "../../../types";
 
 import { getPreviewSizeFrom } from "../../../preview/util";
@@ -9,6 +9,7 @@ import { getReferenceFrom } from "../../../util";
 import { useCustomizationController, useNavigationController, useReferenceDialog } from "../../../hooks";
 import { ErrorView } from "../../ErrorView";
 import { Button } from "@firecms/ui";
+import { EntityPreviewContainer } from "../../EntityPreview";
 
 type TableReferenceFieldProps = {
     name: string;
@@ -57,11 +58,6 @@ export const TableReferenceFieldSuccess = React.memo(
             collection
         } = props;
 
-        const [onHover, setOnHover] = useState(false);
-
-        const hoverTrue = useCallback(() => setOnHover(true), []);
-        const hoverFalse = useCallback(() => setOnHover(false), []);
-
         const onSingleEntitySelected = useCallback((entity: Entity<any>) => {
             updateValue(entity ? getReferenceFrom(entity) : null);
         }, [updateValue]);
@@ -101,29 +97,29 @@ export const TableReferenceFieldSuccess = React.memo(
                     onClick={disabled ? undefined : handleOpen}
                     size={getPreviewSizeFrom(size)}
                     reference={internalValue as EntityReference}
-                    onHover={onHover}
+                    hover={!disabled}
                     disabled={!path}
                     previewProperties={previewProperties}
                 />;
             else
-                return <ReferencePreviewContainer
+                return <EntityPreviewContainer
                     onClick={disabled ? undefined : handleOpen}
                     size={getPreviewSizeFrom(size)}>
                     <ErrorView title="Value is not a reference." error={"Click to edit"}/>
-                </ReferencePreviewContainer>;
+                </EntityPreviewContainer>;
         };
 
         const buildMultipleReferenceField = () => {
             if (Array.isArray(internalValue))
                 return <>
                     {internalValue.map((reference, index) =>
-                        <div className="m-1 w-full"
+                        <div className="w-full my-0.5"
                              key={`preview_array_ref_${name}_${index}`}>
                             <ReferencePreview
                                 onClick={disabled ? undefined : handleOpen}
                                 size={"tiny"}
                                 reference={reference}
-                                onHover={onHover}
+                                hover={!disabled}
                                 disabled={!path}
                                 previewProperties={previewProperties}
                             />
@@ -139,10 +135,7 @@ export const TableReferenceFieldSuccess = React.memo(
             return <ErrorView error={"The specified collection does not exist"}/>;
 
         return (
-            <div className="w-full"
-                 onMouseEnter={hoverTrue}
-                 onMouseMove={hoverTrue}
-                 onMouseLeave={hoverFalse}>
+            <div className="w-full group">
 
                 {internalValue && !multiselect && buildSingleReferenceField()}
 

package/src/components/EntityCollectionTable/fields/TableStorageUpload.tsx

@@ -51,7 +51,7 @@ export function TableStorageUpload(props: {
         entity,
         path,
         previewSize,
-        updateValue
+        updateValue,
     } = props;
 
     const storageSource = useStorageSource();
@@ -137,7 +137,7 @@ function StorageUpload({
                            storage,
                            onFilesAdded,
                            onFileUploadComplete,
-                           storagePathBuilder
+                           storagePathBuilder,
                        }: StorageUploadProps) {
 
     const [onHover, setOnHover] = useState(false);
@@ -293,7 +293,7 @@ export function TableStorageItemPreview({
 
     return (
         <div
-            className={"relative m-2"}
+            className={"relative p-2 max-w-full"}
         >
 
             {value &&

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -49,7 +49,7 @@ export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
             className="h-fit-content"
             aria-label="filter clear"
             onClick={props.clearFilter}
-            size="small">
+            size={"small"}>
             <FilterListOffIcon/>
             Clear filter
         </Button>;

package/src/components/EntityCollectionTable/internal/default_entity_actions.tsx

@@ -9,21 +9,23 @@ export const editEntityAction: EntityAction = {
     onClick({
                 entity,
                 collection,
+                fullPath,
                 context,
                 highlightEntity,
-                unhighlightEntity
+                unhighlightEntity,
             }): Promise<void> {
         highlightEntity?.(entity);
         context.analyticsController?.onAnalyticsEvent?.("entity_click", {
             path: entity.path,
             entityId: entity.id
         });
+        const path = collection?.collectionGroup ? entity.path : (fullPath ?? entity.path);
         context.sideEntityController.open({
             entityId: entity.id,
-            path: entity.path,
+            path,
             collection,
             updateUrl: true,
-            onClose: () => unhighlightEntity?.(entity)
+            onClose: () => unhighlightEntity?.(entity),
         });
         return Promise.resolve(undefined);
     }
@@ -37,7 +39,7 @@ export const copyEntityAction: EntityAction = {
                 collection,
                 context,
                 highlightEntity,
-                unhighlightEntity
+                unhighlightEntity,
             }): Promise<void> {
         highlightEntity?.(entity);
         context.analyticsController?.onAnalyticsEvent?.("copy_entity_click", {
@@ -50,11 +52,12 @@ export const copyEntityAction: EntityAction = {
             copy: true,
             collection,
             updateUrl: true,
-            onClose: () => unhighlightEntity?.(entity)
+            onClose: () => unhighlightEntity?.(entity),
         });
         return Promise.resolve(undefined);
     }
 }
+
 export const archiveEntityAction: EntityAction = {
     icon: <ArchiveIcon/>,
     name: "Archive",
@@ -69,6 +72,7 @@ export const archiveEntityAction: EntityAction = {
         return Promise.resolve(undefined);
     }
 }
+
 export const openWebsiteAction: EntityAction = {
     icon: <OpenInNewIcon/>,
     name: "See in website",

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -12,8 +12,7 @@ import {
     PartialEntityCollection,
     PropertyOrBuilder,
     ResolvedProperty,
-    SaveEntityProps,
-    SelectionController
+    SaveEntityProps
 } from "../../types";
 import {
     EntityCollectionRowActions,
@@ -25,7 +24,6 @@ import {
     canCreateEntity,
     canDeleteEntity,
     canEditEntity,
-    fullPathToCollectionSegments,
     getPropertyInPath,
     mergeDeep,
     resolveCollection,
@@ -74,6 +72,7 @@ import {
 } from "../EntityCollectionTable/internal/default_entity_actions";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
+import { useSelectionController } from "./useSelectionController";
 
 const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
 
@@ -121,7 +120,7 @@ export const EntityCollectionView = React.memo(
                                                                  }: EntityCollectionViewProps<M>
     ) {
 
-        const dataSource = useDataSource();
+        const dataSource = useDataSource(collectionProp);
         const navigation = useNavigationController();
         const sideEntityController = useSideEntityController();
         const authController = useAuthController();
@@ -129,6 +128,7 @@ export const EntityCollectionView = React.memo(
         const analyticsController = useAnalyticsController();
         const customizationController = useCustomizationController();
 
+
         const containerRef = React.useRef<HTMLDivElement>(null);
 
         const collection = useMemo(() => {
@@ -141,7 +141,7 @@ export const EntityCollectionView = React.memo(
             collectionRef.current = collection;
         }, [collection]);
 
-        const canCreateEntities = canCreateEntity(collection, authController, fullPathToCollectionSegments(fullPath), null);
+        const canCreateEntities = canCreateEntity(collection, authController, fullPath, null);
         const [selectedNavigationEntity, setSelectedNavigationEntity] = useState<Entity<M> | undefined>(undefined);
         const [deleteEntityClicked, setDeleteEntityClicked] = React.useState<Entity<M> | Entity<M>[] | undefined>(undefined);
 
@@ -160,7 +160,7 @@ export const EntityCollectionView = React.memo(
 
         const checkInlineEditing = useCallback((entity?: Entity<any>): boolean => {
             const collection = collectionRef.current;
-            if (!canEditEntity(collection, authController, fullPathToCollectionSegments(fullPath), entity ?? null)) {
+            if (!canEditEntity(collection, authController, fullPath, entity ?? null)) {
                 return false;
             }
             return collection.inlineEditing === undefined || collection.inlineEditing;
@@ -199,6 +199,7 @@ export const EntityCollectionView = React.memo(
         }, [tableController.setPopupCell]);
 
         const onEntityClick = useCallback((clickedEntity: Entity<M>) => {
+            console.log("Entity clicked", clickedEntity)
             const collection = collectionRef.current;
             setSelectedNavigationEntity(clickedEntity);
             analyticsController.onAnalyticsEvent?.("edit_entity_clicked", {
@@ -210,9 +211,9 @@ export const EntityCollectionView = React.memo(
                 path: clickedEntity.path,
                 collection,
                 updateUrl: true,
-                onClose: unselectNavigatedEntity
+                onClose: unselectNavigatedEntity,
             });
-        }, [unselectNavigatedEntity]);
+        }, [unselectNavigatedEntity, sideEntityController]);
 
         const onNewClick = useCallback(() => {
 
@@ -224,9 +225,9 @@ export const EntityCollectionView = React.memo(
                 path: fullPath,
                 collection,
                 updateUrl: true,
-                onClose: unselectNavigatedEntity
+                onClose: unselectNavigatedEntity,
             });
-        }, [fullPath]);
+        }, [fullPath, sideEntityController]);
 
         const onMultipleDeleteClick = () => {
             analyticsController.onAnalyticsEvent?.("multiple_delete_dialog_open", {
@@ -288,7 +289,7 @@ export const EntityCollectionView = React.memo(
                 onCollectionModifiedForUser(fullPath, { defaultSize: size })
         }, [onCollectionModifiedForUser, fullPath, userConfigPersistence]);
 
-        const createEnabled = canCreateEntity(collection, authController, fullPathToCollectionSegments(fullPath), null);
+        const createEnabled = canCreateEntity(collection, authController, fullPath, null);
 
         const uniqueFieldValidator: UniqueFieldValidator = useCallback(
             ({
@@ -387,7 +388,7 @@ export const EntityCollectionView = React.memo(
                                         entityId: entity.id,
                                         selectedSubPath: subcollection.id ?? subcollection.path,
                                         collection,
-                                        updateUrl: true
+                                        updateUrl: true,
                                     });
                                 }}>
                             {subcollection.name}
@@ -425,7 +426,7 @@ export const EntityCollectionView = React.memo(
                 ...subcollectionColumns,
                 ...collectionGroupParentCollections
             ];
-        }, [collection, fullPath]);
+        }, [collection, fullPath, sideEntityController]);
 
         const updateLastDeleteTimestamp = useCallback(() => {
             setLastDeleteTimestamp(Date.now());
@@ -433,11 +434,14 @@ export const EntityCollectionView = React.memo(
 
         const largeLayout = useLargeLayout();
 
-        const getActionsForEntity = ({ entity, customEntityActions }: {
+        const getActionsForEntity = ({
+                                         entity,
+                                         customEntityActions
+                                     }: {
             entity?: Entity<M>,
             customEntityActions?: EntityAction[]
         }): EntityAction[] => {
-            const deleteEnabled = entity ? canDeleteEntity(collection, authController, fullPathToCollectionSegments(fullPath), entity) : true;
+            const deleteEnabled = entity ? canDeleteEntity(collection, authController, fullPath, entity) : true;
             const actions: EntityAction[] = [editEntityAction];
             if (createEnabled)
                 actions.push(copyEntityAction);
@@ -448,13 +452,13 @@ export const EntityCollectionView = React.memo(
             return actions;
         };
 
-        const getIdColumnWidth = useCallback(() => {
+        const getIdColumnWidth = () => {
             const entityActions = getActionsForEntity({});
             const collapsedActions = entityActions.filter(a => a.collapsed !== false);
             const uncollapsedActions = entityActions.filter(a => a.collapsed === false);
             const actionsWidth = uncollapsedActions.length * (largeLayout ? 40 : 30);
             return (largeLayout ? (80 + actionsWidth) : (70 + actionsWidth)) + (collapsedActions.length > 0 ? (largeLayout ? 40 : 30) : 0);
-        }, [largeLayout]);
+        };
 
         const tableRowActionsBuilder = ({
                                             entity,
@@ -470,7 +474,10 @@ export const EntityCollectionView = React.memo(
 
             const isSelected = isEntitySelected(entity);
 
-            const actions = getActionsForEntity({ entity, customEntityActions: collection.entityActions });
+            const actions = getActionsForEntity({
+                entity,
+                customEntityActions: collection.entityActions
+            });
 
             return (
                 <EntityCollectionRowActions
@@ -577,7 +584,7 @@ export const EntityCollectionView = React.memo(
         });
 
         return (
-            <div className={cn("overflow-hidden h-full w-full", className)}
+            <div className={cn("overflow-hidden h-full w-full rounded-md", className)}
                  ref={containerRef}>
                 <EntityCollectionTable
                     key={`collection_table_${fullPath}`}
@@ -681,34 +688,6 @@ export const EntityCollectionView = React.memo(
             equal(a.forceFilter, b.forceFilter);
     }) as React.FunctionComponent<EntityCollectionViewProps<any>>
 
-export function useSelectionController<M extends Record<string, any> = any>(
-    onSelectionChange?: (entity: Entity<M>, selected: boolean) => void
-): SelectionController<M> {
-
-    const [selectedEntities, setSelectedEntities] = useState<Entity<M>[]>([]);
-
-    const toggleEntitySelection = useCallback((entity: Entity<M>) => {
-        let newValue;
-        if (selectedEntities.map(e => e.id).includes(entity.id)) {
-            onSelectionChange?.(entity, false);
-            newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
-        } else {
-            onSelectionChange?.(entity, true);
-            newValue = [...selectedEntities, entity];
-        }
-        setSelectedEntities(newValue);
-    }, [selectedEntities]);
-
-    const isEntitySelected = useCallback((entity: Entity<M>) => selectedEntities.map(e => e.id).includes(entity.id), [selectedEntities]);
-
-    return {
-        selectedEntities,
-        setSelectedEntities,
-        isEntitySelected,
-        toggleEntitySelection
-    };
-}
-
 function EntitiesCount({
                            fullPath,
                            collection,
@@ -723,7 +702,7 @@ function EntitiesCount({
     onCountChange?: (count: number) => void,
 }) {
 
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
     const navigation = useNavigationController();
     const [count, setCount] = useState<number | undefined>(undefined);
     const [error, setError] = useState<Error | undefined>(undefined);
@@ -799,7 +778,7 @@ function EntityIdHeaderWidget({
                               entityId: searchString,
                               path,
                               collection,
-                              updateUrl: true
+                              updateUrl: true,
                           });
                       }}
                       className={"text-gray-900 dark:text-white w-96 max-w-full"}>

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -44,7 +44,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
 
     const selectedEntities = selectionController.selectedEntities;
 
-    const addButton = canCreateEntity(collection, authController, fullPathToCollectionSegments(path), null) &&
+    const addButton = canCreateEntity(collection, authController, path, null) &&
         onNewClick && (largeLayout
             ? <Button
                 id={`add_entity_${path}`}
@@ -57,14 +57,13 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
             : <Button
                 id={`add_entity_${path}`}
                 onClick={onNewClick}
-                size="medium"
                 variant="filled"
                 color="primary"
             >
                 <AddIcon/>
             </Button>);
 
-    const multipleDeleteEnabled = canDeleteEntity(collection, authController, fullPathToCollectionSegments(path), null);
+    const multipleDeleteEnabled = canDeleteEntity(collection, authController, path, null);
 
     let multipleDeleteButton: React.ReactNode | undefined;
     if (selectionEnabled) {
@@ -112,11 +111,11 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
 
     if (plugins) {
         plugins.forEach((plugin, i) => {
-            if (plugin.collections?.CollectionActions) {
-                actions.push(...toArray(plugin.collections?.CollectionActions)
+            if (plugin.collectionView?.CollectionActions) {
+                actions.push(...toArray(plugin.collectionView?.CollectionActions)
                     .map((Action, j) => (
                         <ErrorBoundary key={`plugin_actions_${i}_${j}`}>
-                            <Action {...actionProps} {...plugin.collections?.collectionActionsProps}/>
+                            <Action {...actionProps} {...plugin.collectionView?.collectionActionsProps}/>
                         </ErrorBoundary>
                     )));
             }

package/src/components/EntityCollectionView/useSelectionController.tsx

@@ -0,0 +1,30 @@
+import { useCallback, useState } from "react";
+import { Entity, SelectionController } from "../../types";
+
+export function useSelectionController<M extends Record<string, any> = any>(
+    onSelectionChange?: (entity: Entity<M>, selected: boolean) => void
+): SelectionController<M> {
+
+    const [selectedEntities, setSelectedEntities] = useState<Entity<M>[]>([]);
+
+    const toggleEntitySelection = useCallback((entity: Entity<M>) => {
+        let newValue;
+        if (selectedEntities.map(e => e.id).includes(entity.id)) {
+            onSelectionChange?.(entity, false);
+            newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+        } else {
+            onSelectionChange?.(entity, true);
+            newValue = [...selectedEntities, entity];
+        }
+        setSelectedEntities(newValue);
+    }, [selectedEntities]);
+
+    const isEntitySelected = useCallback((entity: Entity<M>) => selectedEntities.map(e => e.id).includes(entity.id), [selectedEntities]);
+
+    return {
+        selectedEntities,
+        setSelectedEntities,
+        isEntitySelected,
+        toggleEntitySelection
+    };
+}