@firecms/collection_editor 3.0.0-alpha.9 → 3.0.0-beta.10

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,48 @@
+import { EntityTableController, 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,
+                                               tableController
+                                           }: {
+    property: ResolvedProperty,
+    propertyKey: string,
+    onHover: boolean,
+    fullPath: string,
+    parentCollectionIds: string[],
+    collection: PersistedCollection;
+    tableController: EntityTableController;
+}) {
+
+    const collectionEditorController = useCollectionEditorController();
+
+    return (
+        <Tooltip
+            asChild={true}
+            title={"Edit"}>
+            <IconButton
+                className={onHover ? "bg-white dark:bg-gray-950" : "hidden"}
+                onClick={() => {
+                    collectionEditorController.editProperty({
+                        propertyKey,
+                        property,
+                        editedCollectionId: collection.id,
+                        parentCollectionIds,
+                        collection,
+                        existingEntities: tableController.data ?? []
+                    });
+                }}
+                size={"small"}>
+                <SettingsIcon size={"small"}/>
+            </IconButton>
+        </Tooltip>
+    )
+}

package/src/ui/EditorCollectionAction.tsx

@@ -0,0 +1,56 @@
+import { CollectionActionsProps, useAuthController, useNavigationController } from "@firecms/core";
+import { IconButton, SettingsIcon, Tooltip, } from "@firecms/ui";
+
+import { useCollectionEditorController } from "../useCollectionEditorController";
+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 parentCollection = navigationController.getCollectionFromIds(parentCollectionIds);
+
+    const canEditCollection = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+            collection
+        }).editCollections
+        : true;
+
+    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,
+                    existingEntities: tableController?.data ?? []
+                })
+                : undefined}>
+            <SettingsIcon/>
+        </IconButton>
+    </Tooltip>;
+
+    return <>
+        {editorButton}
+    </>
+
+}
+
+function getObjectOrNull(o?: object): object | null {
+    if (o && Object.keys(o).length === 0)
+        return o
+    return o ?? null;
+}

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

@@ -0,0 +1,89 @@
+import {
+    ConfirmationDialog,
+    PluginHomePageActionsProps,
+    useAuthController,
+    useSnackbarController
+} from "@firecms/core";
+import { DeleteIcon, IconButton, Menu, MenuItem, MoreVertIcon, SettingsIcon, } from "@firecms/ui";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import { 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 = () => {
+        collectionEditorController?.editCollection({
+            id: collection.id,
+            parentCollectionIds: []
+        });
+    };
+
+    const [deleteRequested, setDeleteRequested] = useState(false);
+
+    const deleteCollection = () => {
+        configController?.deleteCollection({ id: collection.id }).then(() => {
+            setDeleteRequested(false);
+            snackbarController.open({
+                message: "Collection deleted",
+                type: "success"
+            });
+        });
+    };
+
+    return <>
+
+        <div>
+            {permissions.deleteCollections &&
+                <Menu
+                    trigger={<IconButton>
+                        <MoreVertIcon size={"small"}/>
+                    </IconButton>}
+                >
+                    <MenuItem
+                        dense={true}
+                        onClick={(event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            setDeleteRequested(true);
+                        }}>
+                        <DeleteIcon/>
+                        Delete
+                    </MenuItem>
+
+                </Menu>
+
+            }
+
+            {permissions.editCollections &&
+                <IconButton
+                    onClick={(event) => {
+                        onEditCollectionClicked();
+                    }}>
+                    <SettingsIcon size={"small"}/>
+                </IconButton>}
+        </div>
+
+        <ConfirmationDialog
+            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,18 @@
+import { AddIcon, Button } from "@firecms/ui";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+
+export function NewCollectionButton() {
+    const collectionEditorController = useCollectionEditorController();
+    return <div className={"bg-gray-50 dark:bg-gray-900 min-w-fit rounded"}>
+        <Button className={"min-w-fit"}
+                variant={"outlined"}
+                onClick={() => collectionEditorController.createCollection({
+                    parentCollectionIds: [],
+                    redirect: true,
+                    sourceClick: "new_collection_button"
+                })}>
+            <AddIcon/>
+            New collection
+        </Button>
+    </div>
+}

package/src/ui/NewCollectionCard.tsx

@@ -0,0 +1,48 @@
+import { PluginHomePageAdditionalCardsProps, useAuthController } from "@firecms/core";
+import { AddIcon, Card, cls, 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={cls("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 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,47 @@
+import { EntityTableController, 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,
+                                               tableController
+                                           }: {
+    fullPath: string,
+    parentCollectionIds: string[],
+    collection: PersistedCollection;
+    tableController: EntityTableController;
+}) {
+
+    const authController = useAuthController();
+    const collectionEditorController = useCollectionEditorController();
+    const canEditCollection = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+            collection
+        }).editCollections
+        : true;
+
+    return (
+        <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}
+                onClick={() => {
+                    collectionEditorController.editProperty({
+                        editedCollectionId: collection.id,
+                        parentCollectionIds,
+                        currentPropertiesOrder: getDefaultPropertiesOrder(collection),
+                        collection,
+                        existingEntities: tableController.data
+                    });
+                }}>
+                <AddIcon color={"inherit"}/>
+            </div>
+        </Tooltip>
+    )
+}