@firecms/collection_editor 3.0.0-alpha.5 → 3.0.0-alpha.50

package/src/ui/EditorCollectionAction.tsx

@@ -0,0 +1,95 @@
+import equal from "react-fast-compare"
+
+import {
+    Button,
+    CollectionActionsProps,
+    IconButton,
+    mergeDeep,
+    SaveIcon,
+    SettingsIcon,
+    Tooltip,
+    useAuthController,
+    useNavigationController,
+    useSnackbarController
+} from "@firecms/core";
+
+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 = <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.path,
+                        parentCollectionIds,
+                        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, 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,88 @@
+import {
+    DeleteConfirmationDialog,
+    DeleteIcon,
+    IconButton,
+    Menu,
+    MenuItem,
+    MoreVertIcon,
+    PluginHomePageActionsProps,
+    SettingsIcon,
+    useAuthController, useSnackbarController
+} from "@firecms/core";
+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({ path, parentCollectionIds: [] });
+    }, [collectionEditorController, path]);
+
+    const [deleteRequested, setDeleteRequested] = useState(false);
+
+    const deleteCollection = useCallback(() => {
+        configController?.deleteCollection({ path }).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,34 @@
+import { Button, ErrorView, unslugify, useNavigationController } from "@firecms/core";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+
+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
+                    });
+                }}>
+            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/NewCollectionCard.tsx

@@ -0,0 +1,46 @@
+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,
+                      parentCollectionIds: [],
+                        redirect: true
+                  })
+                  : 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,41 @@
+import { AddIcon, getDefaultPropertiesOrder, Tooltip, useAuthController } from "@firecms/core";
+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 hover:bg-gray-100 dark:hover:bg-gray-950"}
+                // className={onHover ? "bg-white dark:bg-gray-950" : undefined}
+                onClick={() => {
+                    collectionEditorController.editProperty({
+                        editedCollectionPath: fullPath,
+                        parentCollectionIds,
+                        currentPropertiesOrder: getDefaultPropertiesOrder(collection),
+                        collection
+                    });
+                }}>
+                <AddIcon color={"inherit"}/>
+            </div>
+        </Tooltip>
+    )
+}

package/src/ui/RootCollectionSuggestions.tsx

@@ -0,0 +1,62 @@
+import {
+    AddIcon,
+    Chip,
+    Collapse,
+    Typography,
+    unslugify,
+    useAuthController,
+    useNavigationController
+} from "@firecms/core";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import React from "react";
+
+export function RootCollectionSuggestions() {
+
+    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);
+    return <Collapse
+        in={showSuggestions}>
+
+        <div
+            className={"flex flex-col gap-1 p-2 my-4"}>
+
+            <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) },
+                                        parentCollectionIds: [],
+                                        redirect: true
+                                    })
+                                    : undefined}
+                                size="small">
+                                {path}
+                            </Chip>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    </Collapse>
+}