@firecms/collection_editor 3.0.0-3.0.0-beta.4.pre.1.0

package/src/types/config_permissions.ts

@@ -0,0 +1,20 @@
+import { EntityCollection } from "@firecms/core";
+
+export type CollectionEditorPermissionsBuilder<UserType = any, EC extends EntityCollection = EntityCollection> = (params: { user: UserType | null, collection?: EC }) => CollectionEditorPermissions;
+
+export type CollectionEditorPermissions = {
+    /**
+     * Is the user allowed to create new collections.
+     */
+    createCollections: boolean;
+
+    /**
+     * Is the user allowed to modify this collection
+     */
+    editCollections: boolean;
+
+    /**
+     * Is the user allowed to delete this collection
+     */
+    deleteCollections: boolean;
+}

package/src/types/persisted_collection.ts

@@ -0,0 +1,9 @@
+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>;
+    ownerId?: string;
+    subcollections?: PersistedCollection<any, any>[];
+    editable?: boolean;
+}

package/src/ui/CollectionViewHeaderAction.tsx

@@ -0,0 +1,43 @@
+import { ResolvedProperty } from "@firecms/core";
+import { IconButton, SettingsIcon, Tooltip } from "@firecms/ui";
+import React from "react";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import { PersistedCollection } from "../types/persisted_collection";
+
+export function CollectionViewHeaderAction({
+                                               propertyKey,
+                                               onHover,
+                                               property,
+                                               fullPath,
+                                               parentCollectionIds,
+                                               collection
+                                           }: {
+    property: ResolvedProperty,
+    propertyKey: string,
+    onHover: boolean,
+    fullPath: string,
+    parentCollectionIds: string[],
+    collection: PersistedCollection;
+}) {
+
+    const collectionEditorController = useCollectionEditorController();
+
+    return (
+        <Tooltip title={"Edit"}>
+            <IconButton
+                className={onHover ? "bg-white dark:bg-gray-950" : "hidden"}
+                onClick={() => {
+                    collectionEditorController.editProperty({
+                        propertyKey,
+                        property,
+                        editedCollectionId: collection.id,
+                        parentCollectionIds,
+                        collection
+                    });
+                }}
+                size={"small"}>
+                <SettingsIcon size={"small"}/>
+            </IconButton>
+        </Tooltip>
+    )
+}

package/src/ui/EditorCollectionAction.tsx

@@ -0,0 +1,109 @@
+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 { useCollectionEditorController } from "../useCollectionEditorController";
+import { useCollectionsConfigController } from "../useCollectionsConfigController";
+import { PersistedCollection } from "../types/persisted_collection";
+
+export function EditorCollectionAction({
+                                           path: fullPath,
+                                           parentCollectionIds,
+                                           collection,
+                                           tableController
+                                       }: CollectionActionsProps) {
+
+    const authController = useAuthController();
+    const navigationController = useNavigationController();
+    const collectionEditorController = useCollectionEditorController();
+    const configController = useCollectionsConfigController();
+    const snackbarController = useSnackbarController();
+
+    const parentCollection = navigationController.getCollectionFromIds(parentCollectionIds);
+
+    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 = <>
+            {(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
+        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 })
+                : undefined}>
+            <SettingsIcon/>
+        </IconButton>
+    </Tooltip>;
+
+    return <>
+        {canEditCollection && saveDefaultFilterButton}
+        {editorButton}
+    </>
+
+}
+
+function getObjectOrNull(o?: object): object | null {
+    if (o && Object.keys(o).length === 0)
+        return o
+    return o ?? null;
+}

package/src/ui/HomePageEditorCollectionAction.tsx

@@ -0,0 +1,84 @@
+import {
+    DeleteConfirmationDialog,
+    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 { useCollectionsConfigController } from "../useCollectionsConfigController";
+
+export function HomePageEditorCollectionAction({
+                                                   path,
+                                                   collection
+                                               }: PluginHomePageActionsProps) {
+
+    const snackbarController = useSnackbarController();
+    const authController = useAuthController();
+    const configController = useCollectionsConfigController();
+    const collectionEditorController = useCollectionEditorController();
+
+    const permissions = collectionEditorController.configPermissions({
+        user: authController.user,
+        collection
+    });
+
+    const onEditCollectionClicked = useCallback(() => {
+        collectionEditorController?.editCollection({ id: collection.id, parentCollectionIds: [] });
+    }, [collectionEditorController, path]);
+
+    const [deleteRequested, setDeleteRequested] = useState(false);
+
+    const deleteCollection = useCallback(() => {
+        configController?.deleteCollection({ id: collection.id }).then(() => {
+            setDeleteRequested(false);
+            snackbarController.open({
+                message: "Collection deleted",
+                type: "success"
+            });
+        });
+    }, [path, configController]);
+
+    return <>
+
+        <div>
+            {permissions.deleteCollections &&
+                <Menu
+                    trigger={<IconButton>
+                        <MoreVertIcon size={"small"}/>
+                    </IconButton>}
+                >
+                    <MenuItem onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setDeleteRequested(true);
+                    }}>
+                        <DeleteIcon/>
+                        Delete
+                    </MenuItem>
+
+                </Menu>
+
+            }
+
+            {permissions.editCollections &&
+                <IconButton
+                    onClick={(event) => {
+                        onEditCollectionClicked();
+                    }}>
+                    <SettingsIcon size={"small"}/>
+                </IconButton>}
+        </div>
+
+        <DeleteConfirmationDialog
+            open={deleteRequested}
+            onAccept={deleteCollection}
+            onCancel={() => setDeleteRequested(false)}
+            title={<>Delete this collection?</>}
+            body={<> This will <b>not
+                delete any data</b>, only
+                the collection in the CMS</>}/>
+    </>;
+
+}

package/src/ui/MissingReferenceWidget.tsx

@@ -0,0 +1,37 @@
+import { ErrorView, unslugify, useNavigationController } from "@firecms/core";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import { Button } from "@firecms/ui";
+
+export function MissingReferenceWidget({ path: pathProp }: {
+    path: string
+}) {
+    const navigation = useNavigationController();
+    const path = getLastSegment(pathProp);
+    const parentCollectionIds = navigation.getParentCollectionIds(pathProp);
+    const collectionEditor = useCollectionEditorController();
+    return <div className={"p-1 flex flex-col items-center"}>
+        <ErrorView error={"No collection for path: " + path}/>
+        <Button className={"mx-2"} variant={"outlined"}
+                size={"small"}
+                onClick={() => {
+                    collectionEditor.createCollection({
+                        initialValues: { path, name: unslugify(path) },
+                        parentCollectionIds,
+                        redirect: false,
+                        sourceClick: "missing_reference"
+                    });
+                }}>
+            Create
+        </Button>
+    </div>;
+}
+
+function getParentPathSegments(path: string): string[] {
+    const segments = path.split("/");
+    return segments.filter((segment, index) => index % 2 === 0 && index !== segments.length - 1);
+}
+
+function getLastSegment(path: string): string {
+    const segments = path.split("/");
+    return segments[segments.length - 1];
+}

package/src/ui/NewCollectionButton.tsx

@@ -0,0 +1,16 @@
+import { AddIcon, Button } from "@firecms/ui";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+
+export function NewCollectionButton() {
+    const collectionEditorController = useCollectionEditorController();
+    return <Button className={"min-w-fit"}
+                   variant={"outlined"}
+                   onClick={() => collectionEditorController.createCollection({
+                       parentCollectionIds: [],
+                       redirect: true,
+                       sourceClick: "new_collection_button"
+                   })}>
+        <AddIcon/>
+        New collection
+    </Button>
+}

package/src/ui/NewCollectionCard.tsx

@@ -0,0 +1,48 @@
+import { PluginHomePageAdditionalCardsProps, useAuthController } from "@firecms/core";
+import { AddIcon, Card, cn, Typography } from "@firecms/ui";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+
+export function NewCollectionCard({
+                                      group,
+                                      context
+                                  }: PluginHomePageAdditionalCardsProps) {
+
+    if (!context.navigation.topLevelNavigation)
+        throw Error("Navigation not ready in FireCMSHomePage");
+
+    const authController = useAuthController();
+
+    const collectionEditorController = useCollectionEditorController();
+    const canCreateCollections = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+        }).createCollections
+        : true;
+
+    return (
+        <Card className={cn("h-full p-4 min-h-[124px]")}
+              onClick={collectionEditorController && canCreateCollections
+                  ? () => collectionEditorController.createCollection({
+                      initialValues: group ? { group } : undefined,
+                      parentCollectionIds: [],
+                      redirect: true,
+                      sourceClick: "new_collection_card"
+                  })
+                  : undefined}>
+
+            <div
+                className="flex flex-col items-start h-full w-full items-center justify-center h-full w-full flex-grow flex-col">
+                <AddIcon color="primary" size={"large"}/>
+                <Typography color="primary"
+                            variant={"caption"}
+                            className={"font-medium"}>{"Add new collection".toUpperCase()}</Typography>
+
+                {!canCreateCollections &&
+                    <Typography variant={"caption"}>You don&apos;t have permissions to create
+                        collections</Typography>
+                }
+            </div>
+
+        </Card>
+    );
+}

package/src/ui/PropertyAddColumnComponent.tsx

@@ -0,0 +1,42 @@
+import { getDefaultPropertiesOrder, useAuthController } from "@firecms/core";
+import { AddIcon, Tooltip } from "@firecms/ui";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import { PersistedCollection } from "../types/persisted_collection";
+
+export function PropertyAddColumnComponent({
+                                               fullPath,
+                                               parentCollectionIds,
+                                               collection
+                                           }: {
+    fullPath: string,
+    parentCollectionIds: string[],
+    collection: PersistedCollection;
+}) {
+
+    const authController = useAuthController();
+    const collectionEditorController = useCollectionEditorController();
+    const canEditCollection = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+            collection
+        }).editCollections
+        : true;
+
+    return (
+        <Tooltip 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}
+                onClick={() => {
+                    collectionEditorController.editProperty({
+                        editedCollectionId: collection.id,
+                        parentCollectionIds,
+                        currentPropertiesOrder: getDefaultPropertiesOrder(collection),
+                        collection
+                    });
+                }}>
+                <AddIcon color={"inherit"}/>
+            </div>
+        </Tooltip>
+    )
+}

package/src/ui/RootCollectionSuggestions.tsx

@@ -0,0 +1,63 @@
+import { unslugify, useAuthController, useNavigationController } from "@firecms/core";
+import { AddIcon, Chip, CircularProgress, Collapse, Typography, } from "@firecms/ui";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import React from "react";
+
+export function RootCollectionSuggestions({ introMode }: { introMode?: "new_project" | "existing_project" }) {
+
+    const authController = useAuthController();
+    const navigationController = useNavigationController();
+
+    const collectionEditorController = useCollectionEditorController();
+    const canCreateCollections = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user
+        }).createCollections
+        : true;
+
+    const rootPathSuggestions = collectionEditorController.rootPathSuggestions;
+
+    const showSuggestions = (rootPathSuggestions ?? []).length > 3 || ((navigationController.collections ?? []).length === 0 && (rootPathSuggestions ?? []).length > 0);
+    const forceShowSuggestions = introMode === "existing_project";
+    return <Collapse
+        in={forceShowSuggestions || showSuggestions}>
+
+        <div
+            className={"flex flex-col gap-1 p-2 my-4"}>
+
+            {!introMode && <Typography variant={"body2"} color={"secondary"}>
+                Create a collection <b>automatically</b> from your data:
+            </Typography>}
+
+            {introMode === "existing_project" && <Typography>
+                You will see your <b>database collections</b> here, a few seconds after project creation
+            </Typography>}
+
+            <div
+                className={"flex flex-row gap-1 overflow-scroll no-scrollbar "}>
+                {(rootPathSuggestions ?? []).map((path) => {
+                    return (
+                        <div key={path}>
+                            <Chip
+                                icon={<AddIcon size={"small"}/>}
+                                colorScheme={"cyanLighter"}
+                                onClick={collectionEditorController && canCreateCollections
+                                    ? () => collectionEditorController.createCollection({
+                                        initialValues: { path, name: unslugify(path) },
+                                        parentCollectionIds: [],
+                                        redirect: true,
+                                        sourceClick: "root_collection_suggestion"
+                                    })
+                                    : undefined}
+                                size="small">
+                                {path}
+                            </Chip>
+                        </div>
+                    );
+                })}
+                {rootPathSuggestions === undefined && <CircularProgress size={"small"}/>}
+                {rootPathSuggestions?.length === 0 && <Typography variant={"caption"}>No suggestions</Typography>}
+            </div>
+        </div>
+    </Collapse>
+}