@firecms/collection_editor 3.0.0-canary.21 → 3.0.0-canary.211

package/src/types/collection_editor_controller.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import { CollectionEditorPermissionsBuilder } from "./config_permissions";
-import { Property } from "@firecms/core";
+import { Entity, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
 
 /**
@@ -12,7 +13,8 @@ export interface CollectionEditorController {
         id?: string,
         fullPath?: string,
         parentCollectionIds: string[],
-        parentCollection?: PersistedCollection
+        parentCollection?: PersistedCollection,
+        existingEntities?: Entity<any>[]
     }) => void;
 
     createCollection: (props: {
@@ -33,11 +35,12 @@ export interface CollectionEditorController {
         currentPropertiesOrder?: string[],
         editedCollectionId: string,
         parentCollectionIds: string[],
-        collection: PersistedCollection
+        collection: PersistedCollection,
+        existingEntities: Entity<any>[]
     }) => void;
 
     configPermissions: CollectionEditorPermissionsBuilder;
 
-    rootPathSuggestions?: string[];
+    getPathSuggestions?: (path: string) => Promise<string[]>;
 
 }

package/src/types/collection_inference.ts

@@ -1,3 +1,3 @@
 import { EntityCollection } from "@firecms/core";
 
-export type CollectionInference = (path: string, collectionGroup: boolean, parentCollectionIds: string[]) => Promise<Partial<EntityCollection> | null>;
+export type CollectionInference = (path: string, collectionGroup: boolean, parentCollectionPaths: string[]) => Promise<Partial<EntityCollection> | null>;

package/src/types/config_permissions.ts

@@ -1,6 +1,6 @@
 import { EntityCollection } from "@firecms/core";
 
-export type CollectionEditorPermissionsBuilder<UserType = any, EC extends EntityCollection = EntityCollection> = (params: { user: UserType | null, collection?: EC }) => CollectionEditorPermissions;
+export type CollectionEditorPermissionsBuilder<USER = any, EC extends EntityCollection = EntityCollection> = (params: { user: USER | null, collection?: EC }) => CollectionEditorPermissions;
 
 export type CollectionEditorPermissions = {
     /**

package/src/types/persisted_collection.ts

@@ -1,8 +1,7 @@
 import { EntityCollection, User } from "@firecms/core";
 
-export type PersistedCollection<M extends Record<string, any> = any, UserType extends User = User>
-    = Omit<EntityCollection<M, UserType>, "subcollections"> & {
-    // properties: Properties<M>;
+export type PersistedCollection<M extends Record<string, any> = any, USER extends User = User>
+    = Omit<EntityCollection<M, USER>, "subcollections"> & {
     ownerId?: string;
     subcollections?: PersistedCollection<any, any>[];
     editable?: boolean;

package/src/ui/CollectionViewHeaderAction.tsx

@@ -1,4 +1,4 @@
-import { ResolvedProperty } from "@firecms/core";
+import { EntityTableController, ResolvedProperty } from "@firecms/core";
 import { IconButton, SettingsIcon, Tooltip } from "@firecms/ui";
 import React from "react";
 import { useCollectionEditorController } from "../useCollectionEditorController";
@@ -10,7 +10,8 @@ export function CollectionViewHeaderAction({
                                                property,
                                                fullPath,
                                                parentCollectionIds,
-                                               collection
+                                               collection,
+                                               tableController
                                            }: {
     property: ResolvedProperty,
     propertyKey: string,
@@ -18,21 +19,25 @@ export function CollectionViewHeaderAction({
     fullPath: string,
     parentCollectionIds: string[],
     collection: PersistedCollection;
+    tableController: EntityTableController;
 }) {
 
     const collectionEditorController = useCollectionEditorController();
 
     return (
-        <Tooltip title={"Edit"}>
+        <Tooltip
+            asChild={true}
+            title={"Edit"}>
             <IconButton
-                className={onHover ? "bg-white dark:bg-gray-950" : "hidden"}
+                className={onHover ? "bg-white dark:bg-surface-950" : "hidden"}
                 onClick={() => {
                     collectionEditorController.editProperty({
                         propertyKey,
                         property,
                         editedCollectionId: collection.id,
                         parentCollectionIds,
-                        collection
+                        collection,
+                        existingEntities: tableController.data ?? []
                     });
                 }}
                 size={"small"}>

package/src/ui/EditorCollectionAction.tsx

@@ -1,16 +1,7 @@
-import equal from "react-fast-compare"
-
-import {
-    CollectionActionsProps,
-    mergeDeep,
-    useAuthController,
-    useNavigationController,
-    useSnackbarController
-} from "@firecms/core";
-import { Button, IconButton, SaveIcon, SettingsIcon, Tooltip, UndoIcon, } from "@firecms/ui";
+import { CollectionActionsProps, useAuthController, useNavigationController } from "@firecms/core";
+import { IconButton, SettingsIcon, Tooltip, } from "@firecms/ui";
 
 import { useCollectionEditorController } from "../useCollectionEditorController";
-import { useCollectionsConfigController } from "../useCollectionsConfigController";
 import { PersistedCollection } from "../types/persisted_collection";
 
 export function EditorCollectionAction({
@@ -23,8 +14,6 @@ export function EditorCollectionAction({
     const authController = useAuthController();
     const navigationController = useNavigationController();
     const collectionEditorController = useCollectionEditorController();
-    const configController = useCollectionsConfigController();
-    const snackbarController = useSnackbarController();
 
     const parentCollection = navigationController.getCollectionFromIds(parentCollectionIds);
 
@@ -35,68 +24,26 @@ export function EditorCollectionAction({
         }).editCollections
         : true;
 
-    let saveDefaultFilterButton = null;
-    if (!equal(getObjectOrNull(tableController.filterValues), getObjectOrNull(collection.initialFilter)) ||
-        !equal(getObjectOrNull(tableController.sortBy), getObjectOrNull(collection.initialSort))) {
-        saveDefaultFilterButton = <>
-            {(collection.initialFilter || collection.initialSort) && <Tooltip
-                title={"Reset to default filter and sort"}>
-                <Button
-                    color={"primary"}
-                    size={"small"}
-                    variant={"text"}
-                    onClick={() => {
-                        tableController.clearFilter?.();
-                        if (collection?.initialFilter)
-                            tableController.setFilterValues?.(collection?.initialFilter);
-                        if (collection?.initialSort)
-                            tableController.setSortBy?.(collection?.initialSort);
-                    }}>
-                    <UndoIcon/>
-                </Button>
-            </Tooltip>}
-
-            <Tooltip
-                title={tableController.sortBy || tableController.filterValues ? "Save default filter and sort" : "Clear default filter and sort"}>
-                <Button
-                    color={"primary"}
-                    size={"small"}
-                    variant={"outlined"}
-                    onClick={() => configController
-                        ?.saveCollection({
-                            id: collection.id,
-                            parentCollectionIds,
-                            collectionData: mergeDeep(collection as PersistedCollection,
-                                {
-                                    initialFilter: tableController.filterValues ?? null,
-                                    initialSort: tableController.sortBy ?? null
-                                })
-                        }).then(() => {
-                            snackbarController.open({
-                                type: "success",
-                                message: "Default config saved"
-                            });
-                        })}>
-                    <SaveIcon/>
-                </Button>
-            </Tooltip>
-        </>;
-    }
-
     const editorButton = <Tooltip
+        asChild={true}
         title={canEditCollection ? "Edit collection" : "You don't have permissions to edit this collection"}>
         <IconButton
             color={"primary"}
             disabled={!canEditCollection}
             onClick={canEditCollection
-                ? () => collectionEditorController?.editCollection({ id: collection.id, fullPath, parentCollectionIds, parentCollection: parentCollection as PersistedCollection })
+                ? () => collectionEditorController?.editCollection({
+                    id: collection.id,
+                    fullPath,
+                    parentCollectionIds,
+                    parentCollection: parentCollection as PersistedCollection,
+                    existingEntities: tableController?.data ?? []
+                })
                 : undefined}>
             <SettingsIcon/>
         </IconButton>
     </Tooltip>;
 
     return <>
-        {canEditCollection && saveDefaultFilterButton}
         {editorButton}
     </>
 

package/src/ui/EditorCollectionActionStart.tsx

@@ -0,0 +1,88 @@
+import equal from "react-fast-compare"
+
+import { CollectionActionsProps, mergeDeep, useAuthController, useSnackbarController } from "@firecms/core";
+import { Button, SaveIcon, Tooltip, UndoIcon, } from "@firecms/ui";
+
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import { useCollectionsConfigController } from "../useCollectionsConfigController";
+import { PersistedCollection } from "../types/persisted_collection";
+
+export function EditorCollectionActionStart({
+                                           path: fullPath,
+                                           parentCollectionIds,
+                                           collection,
+                                           tableController
+                                       }: CollectionActionsProps) {
+
+    const authController = useAuthController();
+    const collectionEditorController = useCollectionEditorController();
+    const configController = useCollectionsConfigController();
+    const snackbarController = useSnackbarController();
+
+    const canEditCollection = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+            collection
+        }).editCollections
+        : true;
+
+    let saveDefaultFilterButton = null;
+    if (!equal(getObjectOrNull(tableController.filterValues), getObjectOrNull(collection.initialFilter)) ||
+        !equal(getObjectOrNull(tableController.sortBy), getObjectOrNull(collection.initialSort))) {
+        saveDefaultFilterButton = <>
+            <Tooltip
+                asChild={true}
+                title={tableController.sortBy || tableController.filterValues ? "Save default filter and sort" : "Clear default filter and sort"}>
+                <Button
+                    color={"primary"}
+                    size={"small"}
+                    variant={"outlined"}
+                    onClick={() => configController
+                        ?.saveCollection({
+                            id: collection.id,
+                            parentCollectionIds,
+                            collectionData: mergeDeep(collection as PersistedCollection,
+                                {
+                                    initialFilter: tableController.filterValues ?? null,
+                                    initialSort: tableController.sortBy ?? null
+                                })
+                        }).then(() => {
+                            snackbarController.open({
+                                type: "success",
+                                message: "Default config saved"
+                            });
+                        })}>
+                    <SaveIcon/>
+                </Button>
+            </Tooltip>
+
+            {(collection.initialFilter || collection.initialSort) && <Tooltip
+                title={"Reset to default filter and sort"}>
+                <Button
+                    color={"primary"}
+                    size={"small"}
+                    variant={"text"}
+                    onClick={() => {
+                        tableController.clearFilter?.();
+                        if (collection?.initialFilter)
+                            tableController.setFilterValues?.(collection?.initialFilter);
+                        if (collection?.initialSort)
+                            tableController.setSortBy?.(collection?.initialSort);
+                    }}>
+                    <UndoIcon/>
+                </Button>
+            </Tooltip>}
+        </>;
+    }
+
+    return <>
+        {canEditCollection && saveDefaultFilterButton}
+    </>
+
+}
+
+function getObjectOrNull(o?: object): object | null {
+    if (o && Object.keys(o).length === 0)
+        return o
+    return o ?? null;
+}

package/src/ui/HomePageEditorCollectionAction.tsx

@@ -1,12 +1,12 @@
 import {
-    DeleteConfirmationDialog,
+    ConfirmationDialog,
     PluginHomePageActionsProps,
     useAuthController,
     useSnackbarController
 } from "@firecms/core";
 import { DeleteIcon, IconButton, Menu, MenuItem, MoreVertIcon, SettingsIcon, } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { useCollectionsConfigController } from "../useCollectionsConfigController";
 
 export function HomePageEditorCollectionAction({
@@ -14,6 +14,7 @@ export function HomePageEditorCollectionAction({
                                                    collection
                                                }: PluginHomePageActionsProps) {
 
+
     const snackbarController = useSnackbarController();
     const authController = useAuthController();
     const configController = useCollectionsConfigController();
@@ -24,13 +25,16 @@ export function HomePageEditorCollectionAction({
         collection
     });
 
-    const onEditCollectionClicked = useCallback(() => {
-        collectionEditorController?.editCollection({ id: collection.id, parentCollectionIds: [] });
-    }, [collectionEditorController, path]);
+    const onEditCollectionClicked = () => {
+        collectionEditorController?.editCollection({
+            id: collection.id,
+            parentCollectionIds: []
+        });
+    };
 
     const [deleteRequested, setDeleteRequested] = useState(false);
 
-    const deleteCollection = useCallback(() => {
+    const deleteCollection = () => {
         configController?.deleteCollection({ id: collection.id }).then(() => {
             setDeleteRequested(false);
             snackbarController.open({
@@ -38,7 +42,7 @@ export function HomePageEditorCollectionAction({
                 type: "success"
             });
         });
-    }, [path, configController]);
+    };
 
     return <>
 
@@ -49,11 +53,13 @@ export function HomePageEditorCollectionAction({
                         <MoreVertIcon size={"small"}/>
                     </IconButton>}
                 >
-                    <MenuItem onClick={(event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        setDeleteRequested(true);
-                    }}>
+                    <MenuItem
+                        dense={true}
+                        onClick={(event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            setDeleteRequested(true);
+                        }}>
                         <DeleteIcon/>
                         Delete
                     </MenuItem>
@@ -71,7 +77,7 @@ export function HomePageEditorCollectionAction({
                 </IconButton>}
         </div>
 
-        <DeleteConfirmationDialog
+        <ConfirmationDialog
             open={deleteRequested}
             onAccept={deleteCollection}
             onCancel={() => setDeleteRequested(false)}

package/src/ui/NewCollectionButton.tsx

@@ -3,7 +3,7 @@ import { useCollectionEditorController } from "../useCollectionEditorController"
 
 export function NewCollectionButton() {
     const collectionEditorController = useCollectionEditorController();
-    return <div className={"bg-gray-50 dark:bg-gray-900 min-w-fit rounded"}>
+    return <div className={"bg-surface-50 dark:bg-surface-900 min-w-fit rounded"}>
         <Button className={"min-w-fit"}
                 variant={"outlined"}
                 onClick={() => collectionEditorController.createCollection({

package/src/ui/NewCollectionCard.tsx

@@ -1,5 +1,5 @@
 import { PluginHomePageAdditionalCardsProps, useAuthController } from "@firecms/core";
-import { AddIcon, Card, cn, Typography } from "@firecms/ui";
+import { AddIcon, Card, cls, Typography } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 
 export function NewCollectionCard({
@@ -20,7 +20,7 @@ export function NewCollectionCard({
         : true;
 
     return (
-        <Card className={cn("h-full p-4 min-h-[124px]")}
+        <Card className={cls("h-full p-4 min-h-[124px]")}
               onClick={collectionEditorController && canCreateCollections
                   ? () => collectionEditorController.createCollection({
                       initialValues: group ? { group } : undefined,
@@ -31,7 +31,7 @@ export function NewCollectionCard({
                   : undefined}>
 
             <div
-                className="flex flex-col items-start h-full w-full items-center justify-center h-full w-full flex-grow flex-col">
+                className="flex items-center justify-center h-full w-full flex-grow flex-col">
                 <AddIcon color="primary" size={"large"}/>
                 <Typography color="primary"
                             variant={"caption"}

package/src/ui/PropertyAddColumnComponent.tsx

@@ -1,4 +1,4 @@
-import { getDefaultPropertiesOrder, useAuthController } from "@firecms/core";
+import { EntityTableController, getDefaultPropertiesOrder, useAuthController } from "@firecms/core";
 import { AddIcon, Tooltip } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 import { PersistedCollection } from "../types/persisted_collection";
@@ -6,11 +6,13 @@ import { PersistedCollection } from "../types/persisted_collection";
 export function PropertyAddColumnComponent({
                                                fullPath,
                                                parentCollectionIds,
-                                               collection
+                                               collection,
+                                               tableController
                                            }: {
     fullPath: string,
     parentCollectionIds: string[],
     collection: PersistedCollection;
+    tableController: EntityTableController;
 }) {
 
     const authController = useAuthController();
@@ -23,16 +25,19 @@ export function PropertyAddColumnComponent({
         : true;
 
     return (
-        <Tooltip title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
+        <Tooltip
+            asChild={true}
+            title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
             <div
-                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-gray-100 bg-opacity-40 hover:bg-gray-100 dark:bg-gray-950 dark:bg-opacity-40 dark:hover:bg-gray-950"}
-                // className={onHover ? "bg-white dark:bg-gray-950" : undefined}
+                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-surface-100 bg-opacity-40 hover:bg-surface-100 dark:bg-surface-950 dark:bg-opacity-40 dark:hover:bg-surface-950"}
+                // className={onHover ? "bg-white dark:bg-surface-950" : undefined}
                 onClick={() => {
                     collectionEditorController.editProperty({
                         editedCollectionId: collection.id,
                         parentCollectionIds,
                         currentPropertiesOrder: getDefaultPropertiesOrder(collection),
-                        collection
+                        collection,
+                        existingEntities: tableController.data
                     });
                 }}>
                 <AddIcon color={"inherit"}/>