@firecms/collection_editor 3.0.0-alpha.17 → 3.0.0-alpha.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firecms/collection_editor",
-  "version": "3.0.0-alpha.17",
+  "version": "3.0.0-alpha.18",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -66,10 +66,11 @@
     "vite-plugin-fonts": "^0.7.0"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3a2be58e39f08f1c1fe0d993acfab648e0513c53"
+  "gitHead": "ab75f612b0aa204b1a3f656367578b6ca65e8c5e"
 }

package/src/ConfigControllerProvider.tsx

@@ -0,0 +1,177 @@
+import React, { PropsWithChildren, useCallback, useEffect } from "react";
+import equal from "react-fast-compare"
+
+import { CollectionsConfigController } from "./types/config_controller";
+import { EntityCollection, useNavigationContext, User } from "@firecms/core";
+import { CollectionEditorDialog } from "./components/collection_editor/CollectionEditorDialog";
+import { useNavigate } from "react-router";
+import { CollectionEditorController } from "./types/collection_editor_controller";
+import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
+import { CollectionInference } from "./types/collection_inference";
+
+export const ConfigControllerContext = React.createContext<CollectionsConfigController>({} as any);
+export const CollectionEditorContext = React.createContext<CollectionEditorController>({} as any);
+
+export interface ConfigControllerProviderProps {
+    /**
+     * Controller for managing the collections' config.
+     */
+    collectionConfigController: CollectionsConfigController;
+
+    /**
+     * Callback used to infer the schema from the data.
+     */
+    collectionInference?: CollectionInference;
+
+    /**
+     * Use this builder to define the permissions for the configuration per user.
+     */
+    configPermissions?: CollectionEditorPermissionsBuilder;
+
+    /**
+     * Groups that cannot be used to create new collections.
+     */
+    reservedGroups?: string[];
+
+    extraView?: {
+        View: React.ComponentType<{
+            path: string
+        }>,
+        icon: React.ReactNode
+    };
+
+    pathSuggestions?: (path?: string) => Promise<string[]>;
+
+    getUser: (uid: string) => User | null
+
+    getData?: (path: string) => Promise<object[]>;
+
+}
+
+export const ConfigControllerProvider = React.memo(
+    function ConfigControllerProvider({
+                                          children,
+                                          collectionConfigController,
+                                          configPermissions,
+                                          reservedGroups,
+                                          collectionInference,
+                                          extraView,
+                                          pathSuggestions,
+                                          getUser,
+                                          getData
+                                      }: PropsWithChildren<ConfigControllerProviderProps>) {
+
+        const navigation = useNavigationContext();
+        const navigate = useNavigate();
+
+        const {
+            collections
+        } = navigation;
+        const existingPaths = collections.map(col => col.path.trim().toLowerCase());
+
+        const [rootPathSuggestions, setRootPathSuggestions] = React.useState<string[] | undefined>();
+        useEffect(() => {
+            if (pathSuggestions) {
+                pathSuggestions().then((paths) => {
+                    setRootPathSuggestions(paths.filter(p => !existingPaths.includes(p.trim().toLowerCase())));
+                });
+            }
+        }, [pathSuggestions]);
+
+        const [currentDialog, setCurrentDialog] = React.useState<{
+            isNewCollection: boolean,
+            parentCollection?: EntityCollection,
+            editedCollectionPath?: string,
+            fullPath?: string,
+            parentPathSegments: string[],
+            initialValues?: {
+                path?: string,
+                group?: string,
+                name?: string
+            },
+        }>();
+
+        const defaultConfigPermissions: CollectionEditorPermissionsBuilder = useCallback(() => ({
+            createCollections: true,
+            editCollections: true,
+            deleteCollections: true
+        }), []);
+
+        const editCollection = useCallback(({ path, fullPath, parentPathSegments, parentCollection }: {
+            path?: string,
+            fullPath?: string,
+            parentPathSegments: string[],
+            parentCollection?: EntityCollection
+        }) => {
+            setCurrentDialog({
+                editedCollectionPath: path,
+                fullPath,
+                parentPathSegments,
+                isNewCollection: false,
+                parentCollection
+            });
+        }, []);
+
+        const createCollection = React.useCallback(({ parentPathSegments, parentCollection, initialValues }: {
+            parentPathSegments: string[],
+            parentCollection?: EntityCollection<any, any, any>
+            initialValues?: {
+                group?: string,
+                path?: string,
+                name?: string
+            }
+        }) => {
+            setCurrentDialog({
+                isNewCollection: true,
+                parentPathSegments,
+                parentCollection,
+                initialValues
+            });
+        }, []);
+
+        const getPathSuggestions = !pathSuggestions
+            ? undefined
+            : (path?: string) => {
+                if (!path && rootPathSuggestions)
+                    return Promise.resolve(rootPathSuggestions);
+                else {
+                    return pathSuggestions?.(path);
+                }
+            }
+
+        return (
+            <ConfigControllerContext.Provider value={collectionConfigController}>
+                <CollectionEditorContext.Provider
+                    value={{
+                        editCollection,
+                        createCollection,
+                        configPermissions: configPermissions ?? defaultConfigPermissions,
+                        rootPathSuggestions
+                    }}>
+
+                    {children}
+
+                    <CollectionEditorDialog
+                        open={Boolean(currentDialog)}
+                        configController={collectionConfigController}
+                        isNewCollection={false}
+                        collectionInference={collectionInference}
+                        {...currentDialog}
+                        getData={getData}
+                        reservedGroups={reservedGroups}
+                        extraView={extraView}
+                        pathSuggestions={getPathSuggestions}
+                        getUser={getUser}
+                        handleClose={(collection) => {
+                            if (collection && currentDialog?.isNewCollection && !currentDialog.parentPathSegments.length) {
+                                const url = navigation.buildUrlCollectionPath(collection.alias ?? collection.path);
+                                navigate(url);
+                            }
+                            setCurrentDialog(undefined);
+                        }}/>
+
+                </CollectionEditorContext.Provider>
+
+            </ConfigControllerContext.Provider>
+        );
+    }, equal);

package/src/components/EditorCollectionAction.tsx

@@ -0,0 +1,95 @@
+import equal from "react-fast-compare"
+
+import {
+    Button,
+    CollectionActionsProps,
+    IconButton,
+    mergeDeep,
+    SaveIcon,
+    SettingsIcon,
+    Tooltip,
+    useAuthController,
+    useNavigationContext,
+    useSnackbarController
+} from "@firecms/core";
+
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import { useCollectionsConfigController } from "../useCollectionsConfigController";
+import { PersistedCollection } from "../types/persisted_collection";
+
+export function EditorCollectionAction({
+                                           path: fullPath,
+                                           parentPathSegments,
+                                           collection,
+                                           tableController
+                                       }: CollectionActionsProps) {
+
+    const authController = useAuthController();
+    const navigationController = useNavigationContext();
+    const collectionEditorController = useCollectionEditorController();
+    const configController = useCollectionsConfigController();
+    const snackbarController = useSnackbarController();
+
+    const parentCollection = navigationController.getCollectionFromPaths(parentPathSegments);
+
+    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
+            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({
+                        path: collection.path,
+                        parentPathSegments,
+                        collectionData: mergeDeep(collection as PersistedCollection,
+                            {
+                                initialFilter: tableController.filterValues ?? null,
+                                initialSort: tableController.sortBy ?? null
+                            })
+                    }).then(() => {
+                        snackbarController.open({
+                            type: "success",
+                            message: "Default config saved"
+                        });
+                    })}>
+                <SaveIcon/>
+                {/*{tableController.sortBy || tableController.filterValues ? "Save default filter and sort" : "Clear default filter and sort"}*/}
+            </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({ path: collection.path, fullPath, parentPathSegments, parentCollection })
+                : 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/components/HomePageEditorCollectionAction.tsx

@@ -0,0 +1,81 @@
+import {
+    DeleteConfirmationDialog,
+    DeleteIcon,
+    IconButton,
+    Menu,
+    MenuItem,
+    MoreVertIcon,
+    PluginHomePageActionsProps,
+    SettingsIcon,
+    useAuthController
+} from "@firecms/core";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import { useCallback, useState } from "react";
+import { useCollectionsConfigController } from "../useCollectionsConfigController";
+
+export function HomePageEditorCollectionAction({
+                                                   path,
+                                                   collection
+                                               }: PluginHomePageActionsProps) {
+
+    const authController = useAuthController();
+    const configController = useCollectionsConfigController();
+    const collectionEditorController = useCollectionEditorController();
+
+    const permissions = collectionEditorController.configPermissions({
+        user: authController.user,
+        collection
+    });
+
+    const onEditCollectionClicked = useCallback(() => {
+        collectionEditorController?.editCollection({ path, parentPathSegments: [] });
+    }, [collectionEditorController, path]);
+
+    const [deleteRequested, setDeleteRequested] = useState(false);
+
+    const deleteCollection = useCallback(() => {
+        configController?.deleteCollection({ path });
+    }, [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/components/NewCollectionCard.tsx

@@ -0,0 +1,45 @@
+import { AddIcon, Card, cn, PluginHomePageAdditionalCardsProps, Typography, useAuthController } from "@firecms/core";
+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,
+                      parentPathSegments: []
+                  })
+                  : 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"/>
+                <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/components/RootCollectionSuggestions.tsx

@@ -0,0 +1,53 @@
+import { AddIcon, Chip, Collapse, Typography, unslugify, useAuthController, useNavigationContext } from "@firecms/core";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import React from "react";
+
+export function RootCollectionSuggestions() {
+
+    const authController = useAuthController();
+    const navigationContext = useNavigationContext();
+
+    const collectionEditorController = useCollectionEditorController();
+    const canCreateCollections = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user
+        }).createCollections
+        : true;
+
+    const rootPathSuggestions = collectionEditorController.rootPathSuggestions ?? [];
+
+    const showSuggestions = rootPathSuggestions.length > 3 || (navigationContext.collections.length === 0 && rootPathSuggestions.length > 0);
+    return <Collapse
+        in={showSuggestions}>
+
+        <div
+            className={"flex flex-col gap-1 p-2"}>
+
+            <Typography variant={"body2"} color={"secondary"}>
+                Create a collection from your data:
+            </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) },
+                                        parentPathSegments: []
+                                    })
+                                    : undefined}
+                                size="small">
+                                {path}
+                            </Chip>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    </Collapse>
+}