@firecms/core 3.0.0-canary.16 → 3.0.0-canary.160

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -8,6 +8,8 @@ import {
     Entity,
     EntityAction,
     EntityCollection,
+    EntityReference,
+    EntityTableController,
     FilterValues,
     PartialEntityCollection,
     PropertyOrBuilder,
@@ -35,6 +37,7 @@ import {
     useAuthController,
     useCustomizationController,
     useDataSource,
+    useFireCMSContext,
     useLargeLayout,
     useNavigationController,
     useSideEntityController
@@ -44,7 +47,8 @@ import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
 import {
     AddIcon,
     Button,
-    cn,
+    cls,
+    focusedDisabled,
     IconButton,
     KeyboardTabIcon,
     Markdown,
@@ -65,14 +69,12 @@ import {
 } from "../common";
 import { PopupFormField } from "../EntityCollectionTable/internal/popup_field/PopupFormField";
 import { GetPropertyForProps } from "../EntityCollectionTable/EntityCollectionTableProps";
-import {
-    copyEntityAction,
-    deleteEntityAction,
-    editEntityAction
-} from "../EntityCollectionTable/internal/default_entity_actions";
+import { copyEntityAction, deleteEntityAction, editEntityAction } from "../common/default_entity_actions";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 import { useSelectionController } from "./useSelectionController";
+import { EntityCollectionViewStartActions } from "./EntityCollectionViewStartActions";
+import { addRecentId, getRecentIds } from "./utils";
 
 const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
 
@@ -80,10 +82,22 @@ const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
  * @group Components
  */
 export type EntityCollectionViewProps<M extends Record<string, any>> = {
-    fullPath: string;
+    /**
+     * Complete path where this collection is located.
+     * It defaults to the collection path if not provided.
+     */
+    fullPath?: string;
+    /**
+     * If this is a subcollection, specify the parent collection ids.
+     */
     parentCollectionIds?: string[];
+    /**
+     * Whether this is a subcollection or not.
+     */
     isSubCollection?: boolean;
+
     className?: string;
+
 } & EntityCollection<M>;
 
 /**
@@ -107,12 +121,12 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
  *
  * @param fullPath
  * @param collection
- * @constructor
+
  * @group Components
  */
 export const EntityCollectionView = React.memo(
     function EntityCollectionView<M extends Record<string, any>>({
-                                                                     fullPath,
+                                                                     fullPath: fullPathProp,
                                                                      parentCollectionIds,
                                                                      isSubCollection,
                                                                      className,
@@ -120,6 +134,8 @@ export const EntityCollectionView = React.memo(
                                                                  }: EntityCollectionViewProps<M>
     ) {
 
+        const context = useFireCMSContext();
+        const fullPath = fullPathProp ?? collectionProp.path;
         const dataSource = useDataSource(collectionProp);
         const navigation = useNavigationController();
         const sideEntityController = useSideEntityController();
@@ -128,7 +144,6 @@ export const EntityCollectionView = React.memo(
         const analyticsController = useAnalyticsController();
         const customizationController = useCustomizationController();
 
-
         const containerRef = React.useRef<HTMLDivElement>(null);
 
         const collection = useMemo(() => {
@@ -142,7 +157,7 @@ export const EntityCollectionView = React.memo(
         }, [collection]);
 
         const canCreateEntities = canCreateEntity(collection, authController, fullPath, null);
-        const [selectedNavigationEntity, setSelectedNavigationEntity] = useState<Entity<M> | undefined>(undefined);
+        const [highlightedEntity, setHighlightedEntity] = useState<Entity<M> | undefined>(undefined);
         const [deleteEntityClicked, setDeleteEntityClicked] = React.useState<Entity<M> | Entity<M>[] | undefined>(undefined);
 
         const [lastDeleteTimestamp, setLastDeleteTimestamp] = React.useState<number>(0);
@@ -151,12 +166,12 @@ export const EntityCollectionView = React.memo(
         const [docsCount, setDocsCount] = useState<number>(0);
 
         const unselectNavigatedEntity = useCallback(() => {
-            const currentSelection = selectedNavigationEntity;
+            const currentSelection = highlightedEntity;
             setTimeout(() => {
-                if (currentSelection === selectedNavigationEntity)
-                    setSelectedNavigationEntity(undefined);
+                if (currentSelection === highlightedEntity)
+                    setHighlightedEntity(undefined);
             }, 2400);
-        }, [selectedNavigationEntity]);
+        }, [highlightedEntity]);
 
         const checkInlineEditing = useCallback((entity?: Entity<any>): boolean => {
             const collection = collectionRef.current;
@@ -175,19 +190,16 @@ export const EntityCollectionView = React.memo(
         const usedSelectionController = collection.selectionController ?? selectionController;
         const {
             selectedEntities,
-            toggleEntitySelection,
-            isEntitySelected,
             setSelectedEntities
         } = usedSelectionController;
 
-        useEffect(() => {
-            setDeleteEntityClicked(undefined);
-        }, [selectedEntities]);
+        // useEffect(() => {
+        //     setDeleteEntityClicked(undefined);
+        // }, [selectedEntities]);
 
         const tableController = useDataSourceEntityCollectionTableController<M>({
             fullPath,
-            collection: collectionRef.current,
-            entitiesDisplayedFirst: [],
+            collection,
             lastDeleteTimestamp
         });
 
@@ -199,9 +211,8 @@ export const EntityCollectionView = React.memo(
         }, [tableController.setPopupCell]);
 
         const onEntityClick = useCallback((clickedEntity: Entity<M>) => {
-            console.log("Entity clicked", clickedEntity)
             const collection = collectionRef.current;
-            setSelectedNavigationEntity(clickedEntity);
+            setHighlightedEntity(clickedEntity);
             analyticsController.onAnalyticsEvent?.("edit_entity_clicked", {
                 path: clickedEntity.path,
                 entityId: clickedEntity.id
@@ -257,6 +268,7 @@ export const EntityCollectionView = React.memo(
             fullPath: string,
             parentCollectionIds: string[],
             collection: EntityCollection;
+            tableController: EntityTableController;
         }> | undefined
 
         // we are only using the first plugin that implements this
@@ -297,17 +309,15 @@ export const EntityCollectionView = React.memo(
                  value,
                  property,
                  entityId
-             }) => dataSource.checkUniqueField(fullPath, name, value, entityId),
+             }) => dataSource.checkUniqueField(fullPath, name, value, entityId, collection),
             [fullPath]);
 
         const onValueChange: OnCellValueChange<any, any> = ({
-                                                                fullPath,
-                                                                context,
                                                                 value,
                                                                 propertyKey,
                                                                 onValueUpdated,
                                                                 setError,
-                                                                entity,
+                                                                data: entity,
                                                             }) => {
 
             const updatedValues = setIn({ ...entity.values }, propertyKey, value);
@@ -324,10 +334,12 @@ export const EntityCollectionView = React.memo(
             return saveEntityWithCallbacks({
                 ...saveProps,
                 collection,
-                callbacks: collection.callbacks,
                 dataSource,
                 context,
-                onSaveSuccess: () => onValueUpdated(),
+                onSaveSuccess: () => {
+                    setError(undefined);
+                    onValueUpdated();
+                },
                 onSaveFailure: (e: Error) => {
                     console.error("Save failure");
                     console.error(e);
@@ -341,12 +353,11 @@ export const EntityCollectionView = React.memo(
         const resolvedCollection = useMemo(() => resolveCollection<M>({
             collection,
             path: fullPath,
-            fields: customizationController.propertyConfigs
+            propertyConfigs: customizationController.propertyConfigs
         }), [collection, fullPath]);
 
         const getPropertyFor = useCallback(({
                                                 propertyKey,
-                                                propertyValue,
                                                 entity
                                             }: GetPropertyForProps<M>) => {
             let propertyOrBuilder: PropertyOrBuilder<any, M> | undefined = getPropertyInPath<M>(collection.properties, propertyKey);
@@ -360,13 +371,12 @@ export const EntityCollectionView = React.memo(
             return resolveProperty({
                 propertyKey,
                 propertyOrBuilder,
-                path: fullPath,
-                propertyValue,
+                path: entity.path,
                 values: entity.values,
                 entityId: entity.id,
-                fields: customizationController.propertyConfigs
+                propertyConfigs: customizationController.propertyConfigs
             });
-        }, [collection.properties, customizationController.propertyConfigs, fullPath, resolvedCollection.properties]);
+        }, [collection.properties, customizationController.propertyConfigs, resolvedCollection.properties]);
 
         const displayedColumnIds = useColumnIds(resolvedCollection, true);
 
@@ -406,16 +416,16 @@ export const EntityCollectionView = React.memo(
                     Builder: ({ entity }) => {
                         const collectionsWithPath = navigation.getParentReferencesFromPath(entity.path);
                         return (
-                            <>
+                            <div className={"flex flex-col gap-2 w-full"}>
                                 {collectionsWithPath.map((reference) => {
                                     return (
                                         <ReferencePreview
                                             key={reference.path + "/" + reference.id}
                                             reference={reference}
-                                            size={"tiny"}/>
+                                            size={"small"}/>
                                     );
                                 })}
-                            </>
+                            </div>
                         );
                     }
                 }]
@@ -460,19 +470,19 @@ export const EntityCollectionView = React.memo(
             return (largeLayout ? (80 + actionsWidth) : (70 + actionsWidth)) + (collapsedActions.length > 0 ? (largeLayout ? 40 : 30) : 0);
         };
 
-        const tableRowActionsBuilder = ({
-                                            entity,
-                                            size,
-                                            width,
-                                            frozen
-                                        }: {
+        const tableRowActionsBuilder = useCallback(({
+                                                        entity,
+                                                        size,
+                                                        width,
+                                                        frozen
+                                                    }: {
             entity: Entity<any>,
             size: CollectionSize,
             width: number,
             frozen?: boolean
         }) => {
 
-            const isSelected = isEntitySelected(entity);
+            const isSelected = usedSelectionController.selectedEntities.map(e => e.id).includes(entity.id);
 
             const actions = getActionsForEntity({
                 entity,
@@ -487,7 +497,7 @@ export const EntityCollectionView = React.memo(
                     isSelected={isSelected}
                     selectionEnabled={selectionEnabled}
                     size={size}
-                    highlightEntity={setSelectedNavigationEntity}
+                    highlightEntity={setHighlightedEntity}
                     unhighlightEntity={unselectNavigatedEntity}
                     collection={collection}
                     fullPath={fullPath}
@@ -498,7 +508,7 @@ export const EntityCollectionView = React.memo(
                 />
             );
 
-        };
+        }, [updateLastDeleteTimestamp, usedSelectionController]);
 
         const title = <Popover
             open={popOverOpen}
@@ -528,7 +538,7 @@ export const EntityCollectionView = React.memo(
             </div>}
         >
 
-            {collection.description && <div className="m-4 text-gray-900 dark:text-white">
+            {collection.description && <div className="m-4 text-surface-900 dark:text-white">
                 <Markdown source={collection.description}/>
             </div>}
 
@@ -557,6 +567,7 @@ export const EntityCollectionView = React.memo(
                             property={property}
                             fullPath={fullPath}
                             collection={collection}
+                            tableController={tableController}
                             parentCollectionIds={parentCollectionIds ?? []}/>;
                     })}
             </>;
@@ -567,7 +578,8 @@ export const EntityCollectionView = React.memo(
                 if (typeof AddColumnComponent === "function")
                     return <AddColumnComponent fullPath={fullPath}
                                                parentCollectionIds={parentCollectionIds ?? []}
-                                               collection={collection}/>;
+                                               collection={collection}
+                                               tableController={tableController}/>;
                 return null;
             }
             : undefined;
@@ -584,12 +596,13 @@ export const EntityCollectionView = React.memo(
         });
 
         return (
-            <div className={cn("overflow-hidden h-full w-full rounded-md", className)}
+            <div className={cls("overflow-hidden h-full w-full rounded-md", className)}
                  ref={containerRef}>
                 <EntityCollectionTable
                     key={`collection_table_${fullPath}`}
                     additionalFields={additionalFields}
                     tableController={tableController}
+                    enablePopupIcon={true}
                     displayedColumnIds={displayedColumnIds}
                     onSizeChanged={onSizeChanged}
                     onEntityClick={onEntityClick}
@@ -599,13 +612,21 @@ export const EntityCollectionView = React.memo(
                     uniqueFieldValidator={uniqueFieldValidator}
                     title={title}
                     selectionController={usedSelectionController}
-                    highlightedEntities={selectedNavigationEntity ? [selectedNavigationEntity] : []}
+                    highlightedEntities={highlightedEntity ? [highlightedEntity] : []}
                     defaultSize={collection.defaultSize}
                     properties={resolvedCollection.properties}
                     getPropertyFor={getPropertyFor}
                     onTextSearchClick={textSearchInitialised ? undefined : onTextSearchClick}
                     textSearchLoading={textSearchLoading}
                     textSearchEnabled={textSearchEnabled}
+                    actionsStart={<EntityCollectionViewStartActions
+                        parentCollectionIds={parentCollectionIds ?? []}
+                        collection={collection}
+                        tableController={tableController}
+                        path={fullPath}
+                        relativePath={collection.path}
+                        selectionController={usedSelectionController}
+                        collectionEntitiesCount={docsCount}/>}
                     actions={<EntityCollectionViewActions
                         parentCollectionIds={parentCollectionIds ?? []}
                         collection={collection}
@@ -643,19 +664,19 @@ export const EntityCollectionView = React.memo(
                         collection={collection}/>}
                 />
 
-                <PopupFormField
-                    key={`popup_form_${popupCell?.propertyKey}_${popupCell?.entity?.id}`}
+                {popupCell && <PopupFormField
+                    key={`popup_form_${popupCell?.propertyKey}_${popupCell?.entityId}`}
                     open={Boolean(popupCell)}
                     onClose={onPopupClose}
                     cellRect={popupCell?.cellRect}
                     propertyKey={popupCell?.propertyKey}
                     collection={collection}
-                    entity={popupCell?.entity}
+                    entityId={popupCell.entityId}
                     tableKey={tableKey.current}
                     customFieldValidator={uniqueFieldValidator}
                     path={resolvedFullPath}
                     onCellValueChange={onValueChange}
-                    container={containerRef.current}/>
+                    container={containerRef.current}/>}
 
                 {deleteEntityClicked &&
                     <DeleteEntityDialog
@@ -683,8 +704,11 @@ export const EntityCollectionView = React.memo(
             equal(a.selectionController, b.selectionController) &&
             equal(a.Actions, b.Actions) &&
             equal(a.defaultSize, b.defaultSize) &&
+            equal(a.initialFilter, b.initialFilter) &&
+            equal(a.initialSort, b.initialSort) &&
             equal(a.textSearchEnabled, b.textSearchEnabled) &&
             equal(a.additionalFields, b.additionalFields) &&
+            equal(a.sideDialogWidth, b.sideDialogWidth) &&
             equal(a.forceFilter, b.forceFilter);
     }) as React.FunctionComponent<EntityCollectionViewProps<any>>
 
@@ -724,6 +748,7 @@ function EntitiesCount({
 
     useEffect(() => {
         if (onCountChange) {
+            setError(undefined);
             onCountChange(count ?? 0);
         }
     }, [onCountChange, count]);
@@ -757,46 +782,73 @@ function EntityIdHeaderWidget({
 }) {
     const [openPopup, setOpenPopup] = React.useState(false);
     const [searchString, setSearchString] = React.useState("");
+    const [recentIds, setRecentIds] = React.useState<string[]>(getRecentIds(collection.id));
     const sideEntityController = useSideEntityController();
+
     return (
-        <Tooltip title={!openPopup ? "Find by ID" : undefined}>
+        <Tooltip title={!openPopup ? "Find by ID" : undefined} asChild={false}>
             <Popover
                 open={openPopup}
                 onOpenChange={setOpenPopup}
+                sideOffset={0}
+                align={"start"}
+                alignOffset={-117}
                 trigger={
                     <IconButton size={"small"}>
                         <SearchIcon size={"small"}/>
                     </IconButton>
-                }
-            >
-                <form noValidate={true}
-                      onSubmit={(e) => {
-                          e.preventDefault();
-                          if (!searchString) return;
-                          setOpenPopup(false);
-                          return sideEntityController.open({
-                              entityId: searchString,
-                              path,
-                              collection,
-                              updateUrl: true,
-                          });
-                      }}
-                      className={"text-gray-900 dark:text-white w-96 max-w-full"}>
-
-                    <div className="flex p-2 w-full gap-4">
-                        <input
-                            autoFocus={openPopup}
-                            placeholder={"Find entity by ID"}
-                            // size={"small"}
-                            onChange={(e) => setSearchString(e.target.value)}
-                            value={searchString}
-                            className={"flex-grow bg-transparent outline-none p-1"}/>
-                        <Button variant={"outlined"}
-                                disabled={!searchString}
-                                type={"submit"}
-                        >Go</Button>
-                    </div>
-                </form>
+                }>
+                <div className={cls("my-2 rounded-lg bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-white")}>
+                    <form noValidate={true}
+                          onSubmit={(e) => {
+                              e.preventDefault();
+                              if (!searchString) return;
+                              setOpenPopup(false);
+                              setRecentIds(addRecentId(collection.id, searchString.trim()));
+                              return sideEntityController.open({
+                                  entityId: searchString.trim(),
+                                  path,
+                                  collection,
+                                  updateUrl: true
+                              });
+                          }}
+                          className={"w-96 max-w-full"}>
+
+                        <div className="flex p-2 w-full gap-2">
+                            <input
+                                autoFocus={openPopup}
+                                placeholder={"Find entity by ID"}
+                                // size={"small"}
+                                onChange={(e) => {
+                                    setSearchString(e.target.value);
+                                }}
+                                value={searchString}
+                                className={"rounded-lg bg-white dark:bg-surface-800 flex-grow bg-transparent outline-none p-2 " + focusedDisabled}/>
+                            <Button variant={"text"}
+                                    disabled={!(searchString.trim())}
+                                    type={"submit"}
+                            ><KeyboardTabIcon/></Button>
+                        </div>
+                    </form>
+                    {recentIds && recentIds.length > 0 && <div className="flex flex-col gap-2 p-2">
+                        {recentIds.map(id => (
+                            <ReferencePreview reference={new EntityReference(id, path)}
+                                              key={id}
+                                              hover={true}
+                                              onClick={() => {
+                                                  setOpenPopup(false);
+                                                  sideEntityController.open({
+                                                      entityId: id,
+                                                      path,
+                                                      collection,
+                                                      updateUrl: true
+                                                  });
+                                              }}
+                                              includeEntityLink={false}
+                                              size={"small"}/>
+                        ))}
+                    </div>}
+                </div>
             </Popover>
 
         </Tooltip>

package/src/components/EntityCollectionView/EntityCollectionViewStartActions.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { useCustomizationController, useFireCMSContext } from "../../hooks";
+import { CollectionActionsProps, EntityCollection, EntityTableController, SelectionController } from "../../types";
+import { toArray } from "../../util/arrays";
+import { ErrorBoundary } from "../ErrorBoundary";
+import { ClearFilterSortButton } from "../ClearFilterSortButton";
+
+export type EntityCollectionViewStartActionsProps<M extends Record<string, any>> = {
+    collection: EntityCollection<M>;
+    path: string;
+    relativePath: string;
+    parentCollectionIds: string[];
+    selectionController: SelectionController<M>;
+    tableController: EntityTableController<M>;
+    collectionEntitiesCount: number;
+}
+
+export function EntityCollectionViewStartActions<M extends Record<string, any>>({
+                                                                                    collection,
+                                                                                    relativePath,
+                                                                                    parentCollectionIds,
+                                                                                    path,
+                                                                                    selectionController,
+                                                                                    tableController,
+                                                                                    collectionEntitiesCount
+                                                                                }: EntityCollectionViewStartActionsProps<M>) {
+
+    const context = useFireCMSContext();
+
+    const customizationController = useCustomizationController();
+    const plugins = customizationController.plugins ?? [];
+
+    const actionProps: CollectionActionsProps = {
+        path,
+        relativePath,
+        parentCollectionIds,
+        collection,
+        selectionController,
+        context,
+        tableController,
+        collectionEntitiesCount
+    };
+    const actions: React.ReactNode[] = [
+        <ClearFilterSortButton
+            key={"clear_filter"}
+            tableController={tableController}
+            enabled={!collection.forceFilter}/>
+    ];
+
+    if (plugins) {
+        plugins.forEach((plugin, i) => {
+            if (plugin.collectionView?.CollectionActionsStart) {
+                actions.push(...toArray(plugin.collectionView?.CollectionActionsStart)
+                    .map((Action, j) => (
+                        <ErrorBoundary key={`plugin_actions_${i}_${j}`}>
+                            <Action {...actionProps} {...plugin.collectionView?.collectionActionsStartProps}/>
+                        </ErrorBoundary>
+                    )));
+            }
+        });
+    }
+
+    return (
+        <>
+            {actions}
+        </>
+    );
+}

package/src/components/EntityCollectionView/useSelectionController.tsx

@@ -7,19 +7,31 @@ export function useSelectionController<M extends Record<string, any> = any>(
 
     const [selectedEntities, setSelectedEntities] = useState<Entity<M>[]>([]);
 
-    const toggleEntitySelection = useCallback((entity: Entity<M>) => {
+    const toggleEntitySelection = useCallback((entity: Entity<M>, newSelectedState?: boolean) => {
         let newValue;
-        if (selectedEntities.map(e => e.id).includes(entity.id)) {
-            onSelectionChange?.(entity, false);
-            newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+        if (newSelectedState === undefined) {
+            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];
+            }
         } else {
-            onSelectionChange?.(entity, true);
-            newValue = [...selectedEntities, entity];
+            if (newSelectedState) {
+                onSelectionChange?.(entity, true);
+                newValue = [...selectedEntities, entity];
+            } else {
+                onSelectionChange?.(entity, false);
+                newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+            }
         }
         setSelectedEntities(newValue);
     }, [selectedEntities]);
 
-    const isEntitySelected = useCallback((entity: Entity<M>) => selectedEntities.map(e => e.id).includes(entity.id), [selectedEntities]);
+    const isEntitySelected = useCallback((entity: Entity<M>) => {
+        return selectedEntities.map(e => e.id).includes(entity.id);
+    }, [selectedEntities]);
 
     return {
         selectedEntities,

package/src/components/EntityCollectionView/utils.ts

@@ -0,0 +1,19 @@
+export function addRecentId(collectionId: string, id: string) {
+    const recentIds = getRecentIds(collectionId);
+    const newRecentIds = [id, ...recentIds.filter(i => i !== id)];
+    if (newRecentIds.length > 5) {
+        newRecentIds.pop();
+    }
+    saveSearchedIdsLocally(collectionId, newRecentIds);
+    return newRecentIds;
+}
+
+export function saveSearchedIdsLocally(collectionId: string, ids: string[]) {
+    localStorage.setItem("recent_id_searches::" + collectionId, JSON.stringify(ids));
+}
+
+export function getRecentIds(collectionId: string): string[] {
+    const stored = localStorage.getItem("recent_id_searches::" + collectionId);
+    if (!stored) return [];
+    return JSON.parse(stored);
+}