@firecms/collection_editor 3.0.0-alpha.9 → 3.0.0-beta.2-pre.1

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({ 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,35 @@
+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
+                    });
+                }}>
+            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
+                   })
+                   }>
+        <AddIcon/>
+        New collection
+    </Button>
+}

package/src/ui/NewCollectionCard.tsx

@@ -0,0 +1,47 @@
+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
+                  })
+                  : 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({
+                        editedCollectionPath: fullPath,
+                        parentCollectionIds,
+                        currentPropertiesOrder: getDefaultPropertiesOrder(collection),
+                        collection
+                    });
+                }}>
+                <AddIcon color={"inherit"}/>
+            </div>
+        </Tooltip>
+    )
+}

package/src/ui/RootCollectionSuggestions.tsx

@@ -0,0 +1,55 @@
+import { unslugify, useAuthController, useNavigationController } from "@firecms/core";
+import { AddIcon, Chip, Collapse, Typography, } from "@firecms/ui";
+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>
+}

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -0,0 +1,366 @@
+import React, { useEffect, useState } from "react";
+import { EntityCollection, IconForView, SearchIconsView, singular, toSnakeCase, } from "@firecms/core";
+import {
+    Autocomplete,
+    AutocompleteItem,
+    BooleanSwitchWithLabel,
+    Chip,
+    cn,
+    Container,
+    DebouncedTextField,
+    Dialog,
+    ExpandablePanel,
+    IconButton,
+    Select,
+    SelectItem,
+    SettingsIcon,
+    TextField,
+    Tooltip,
+    Typography,
+    useAutoComplete
+} from "@firecms/ui";
+import { Field, getIn, useFormikContext } from "formik";
+
+import { FieldHelperView } from "./properties/FieldHelperView";
+
+export function CollectionDetailsForm({
+                                          isNewCollection,
+                                          reservedGroups,
+                                          existingPaths,
+                                          existingIds,
+                                          groups,
+                                          parentCollection
+                                      }: {
+    isNewCollection: boolean,
+    reservedGroups?: string[];
+    existingPaths?: string[];
+    existingIds?: string[];
+    groups: string[] | null;
+    parentCollection?: EntityCollection;
+    parentCollectionIds?: string[];
+}) {
+
+    const groupRef = React.useRef<HTMLInputElement>(null);
+    const {
+        values,
+        setFieldValue,
+        handleChange,
+        touched,
+        errors,
+        setFieldTouched,
+        isSubmitting,
+        submitCount
+    } = useFormikContext<EntityCollection>();
+
+    const [iconDialogOpen, setIconDialogOpen] = useState(false);
+    const [advancedPanelExpanded, setAdvancedPanelExpanded] = useState(false);
+
+    const updateName = (name: string) => {
+        setFieldValue("name", name);
+
+        const pathTouched = getIn(touched, "path");
+        if (!pathTouched && isNewCollection && name) {
+            setFieldValue("path", toSnakeCase(name));
+        }
+
+        const idTouched = getIn(touched, "id");
+        if (!idTouched && isNewCollection && name) {
+            setFieldValue("id", toSnakeCase(name));
+        }
+
+        const singularNameTouched = getIn(touched, "singularName");
+        if (!singularNameTouched && isNewCollection && name) {
+            setFieldValue("singularName", singular(name))
+        }
+
+    };
+
+    useEffect(() => {
+        if (errors.id) {
+            setAdvancedPanelExpanded(true);
+        }
+    }, [errors.id]);
+
+    const collectionIcon = <IconForView collectionOrView={values}/>;
+
+    const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
+
+    const {
+        inputFocused,
+        autoCompleteOpen,
+        setAutoCompleteOpen
+    } = useAutoComplete({
+        ref: groupRef
+    });
+
+    const isSubcollection = !!parentCollection;
+
+    let customIdValue: "true" | "false" | "optional" | "code_defined" | undefined;
+    if (customIdValue) {
+        if (typeof values.customId === "object") {
+            customIdValue = "code_defined";
+        } else if (values.customId === true) {
+            customIdValue = "true";
+        } else if (values.customId === false) {
+            customIdValue = "false";
+        } else if (values.customId === "optional") {
+            customIdValue = "optional";
+        }
+    }
+    return (
+        <div className={"overflow-auto my-auto"}>
+            <Container maxWidth={"4xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
+
+                <div>
+                    <div
+                        className="flex flex-row py-2 pt-3 items-center">
+                        <Typography variant={!isNewCollection ? "h5" : "h4"} className={"flex-grow"}>
+                            {isNewCollection ? "New collection" : `${values?.name} collection`}
+                        </Typography>
+                        <Tooltip title={"Change icon"}>
+                            <IconButton
+                                shape={"square"}
+                                onClick={() => setIconDialogOpen(true)}>
+                                {collectionIcon}
+                            </IconButton>
+                        </Tooltip>
+                    </div>
+
+                    {parentCollection && <Chip colorScheme={"tealDarker"}>
+                        <Typography variant={"caption"}>
+                            This is a subcollection of <b>{parentCollection.name}</b>
+                        </Typography>
+                    </Chip>}
+
+                </div>
+                <div className={"grid grid-cols-12 gap-4"}>
+
+                    <div className={"col-span-12"}>
+                        <TextField
+                            value={values.name ?? ""}
+                            onChange={(e: any) => updateName(e.target.value)}
+                            label={"Name"}
+                            required
+                            error={touched.name && Boolean(errors.name)}/>
+                        <FieldHelperView error={touched.name && Boolean(errors.name)}>
+                            {touched.name && Boolean(errors.name) ? errors.name : "Name of in this collection, usually a plural name (e.g. Products)"}
+                        </FieldHelperView>
+                    </div>
+
+                    <div className={cn("col-span-12 ", isSubcollection ? "" : "sm:col-span-8")}>
+                        <Field name={"path"}
+                               as={DebouncedTextField}
+                               label={"Path"}
+                               disabled={!isNewCollection}
+                               required
+                               error={touched.path && Boolean(errors.path)}/>
+
+                        <FieldHelperView error={touched.path && Boolean(errors.path)}>
+                            {touched.path && Boolean(errors.path)
+                                ? errors.path
+                                : isSubcollection ? "Relative path to the parent (no need to include the parent path)" : "Path that this collection is stored in, in the database"}
+                        </FieldHelperView>
+
+                    </div>
+
+                    {!isSubcollection && <div className={"col-span-12 sm:col-span-4 relative"}>
+
+                        <TextField error={touched.group && Boolean(errors.group)}
+                                   disabled={isSubmitting}
+                                   value={values.group ?? ""}
+                                   autoComplete="off"
+                                   onChange={(event) => setFieldValue("group", event.target.value)}
+                                   name={"group"}
+                                   inputRef={groupRef}
+                                   label="Group"/>
+                        <Autocomplete
+                            open={autoCompleteOpen && (groupOptions ?? []).length > 0}
+                            setOpen={setAutoCompleteOpen}>
+                            {groupOptions?.map((group, index) => {
+                                return <AutocompleteItem
+                                    key={index + "_" + group}
+                                    onClick={() => {
+                                        setAutoCompleteOpen(false);
+                                        setFieldValue("group", group ?? null);
+                                    }}
+                                >
+                                    <div className={"flex-grow"}>
+                                        {group}
+                                    </div>
+                                </AutocompleteItem>;
+                            })}
+                        </Autocomplete>
+                        <FieldHelperView>
+                            {touched.group && Boolean(errors.group) ? errors.group : "Group of the collection"}
+                        </FieldHelperView>
+                    </div>}
+
+                    <div className={"col-span-12"}>
+                        <ExpandablePanel
+                            expanded={advancedPanelExpanded}
+                            onExpandedChange={setAdvancedPanelExpanded}
+                            title={
+                                <div className="flex flex-row text-gray-500">
+                                    <SettingsIcon/>
+                                    <Typography variant={"subtitle2"}
+                                                className="ml-2">
+                                        Advanced
+                                    </Typography>
+                                </div>}
+                            initiallyExpanded={false}>
+                            <div className={"grid grid-cols-12 gap-4 p-4"}>
+
+                                <div className={"col-span-12"}>
+                                    <Field name={"id"}
+                                           as={DebouncedTextField}
+                                           disabled={!isNewCollection}
+                                           label={"Collection id"}
+                                           error={touched.id && Boolean(errors.id)}/>
+                                    <FieldHelperView error={touched.id && Boolean(errors.id)}>
+                                        {touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection"}
+                                    </FieldHelperView>
+                                </div>
+
+                                <div className={"col-span-12"}>
+                                    <TextField
+                                        error={touched.singularName && Boolean(errors.singularName)}
+                                        id={"singularName"}
+                                        aria-describedby={"singularName-helper"}
+                                        onChange={(e) => {
+                                            setFieldTouched("singularName", true);
+                                            return handleChange(e);
+                                        }}
+                                        value={values.singularName ?? ""}
+                                        label={"Singular name"}/>
+                                    <FieldHelperView error={touched.singularName && Boolean(errors.singularName)}>
+                                        {touched.singularName && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities"}
+                                    </FieldHelperView>
+                                </div>
+                                <div className={"col-span-12"}>
+                                    <TextField
+                                        error={touched.description && Boolean(errors.description)}
+                                        id="description"
+                                        value={values.description ?? ""}
+                                        onChange={handleChange}
+                                        multiline
+                                        rows={2}
+                                        aria-describedby="description-helper-text"
+                                        label="Description"
+                                    />
+                                    <FieldHelperView error={touched.description && Boolean(errors.description)}>
+                                        {touched.description && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown"}
+                                    </FieldHelperView>
+                                </div>
+
+                                <div className={"col-span-12"}>
+                                    <Select
+                                        name="defaultSize"
+                                        label="Default row size"
+                                        position={"item-aligned"}
+                                        onChange={handleChange}
+                                        value={values.defaultSize ?? ""}
+                                        renderValue={(value: any) => value.toUpperCase()}
+                                    >
+                                        {["xs", "s", "m", "l", "xl"].map((value) => (
+                                            <SelectItem
+                                                key={`size-select-${value}`}
+                                                value={value}>
+                                                {value.toUpperCase()}
+                                            </SelectItem>
+                                        ))}
+                                    </Select>
+                                </div>
+                                <div className={"col-span-12"}>
+                                    <Select
+                                        name="customId"
+                                        label="Data IDs generation"
+                                        position={"item-aligned"}
+                                        disabled={customIdValue === "code_defined"}
+                                        onValueChange={(v) => {
+                                            if (v === "code_defined")
+                                                throw new Error("This should not happen");
+                                            else if (v === "true")
+                                                setFieldValue("customId", true);
+                                            else if (v === "false")
+                                                setFieldValue("customId", false);
+                                            else if (v === "optional")
+                                                setFieldValue("customId", "optional");
+                                        }}
+                                        value={customIdValue ?? ""}
+                                        renderValue={(value: any) => {
+                                            if (value === "code_defined")
+                                                return "Code defined";
+                                            else if (value === "true")
+                                                return "Users must define an ID";
+                                            else if (value === "optional")
+                                                return "Users can define an ID, but it is not required";
+                                            else
+                                                return "Document ID is generated automatically";
+                                        }}
+                                    >
+                                        <SelectItem value={"false"}>
+                                            Document ID is generated automatically
+                                        </SelectItem>
+                                        <SelectItem value={"true"}>
+                                            Users must define an ID
+                                        </SelectItem>
+                                        <SelectItem value={"optional"}>
+                                            Users can define an ID, but it is not required
+                                        </SelectItem>
+                                    </Select>
+                                </div>
+                                <div className={"col-span-12"}>
+                                    <BooleanSwitchWithLabel
+                                        position={"start"}
+                                        label="Collection group"
+                                        onValueChange={(v) => setFieldValue("collectionGroup", v)}
+                                        value={values.collectionGroup ?? false}
+                                    />
+                                    <FieldHelperView>
+                                        A collection group consists of all collections with the same path. This allows
+                                        you
+                                        to query over multiple collections at once.
+                                    </FieldHelperView>
+                                </div>
+                                <div className={"col-span-12"}>
+                                    <BooleanSwitchWithLabel
+                                        position={"start"}
+                                        label="Enable text search for this collection"
+                                        onValueChange={(v) => setFieldValue("textSearchEnabled", v)}
+                                        value={values.textSearchEnabled ?? false}
+                                    />
+                                    <FieldHelperView>
+                                        Allow text search for this collection. If you have not specified a text search
+                                        delegate, this will use the built-in local text search. This is not recommended
+                                        for large collections, as it may incur in performance and cost issues.
+                                    </FieldHelperView>
+                                </div>
+                            </div>
+                        </ExpandablePanel>
+
+                    </div>
+
+                </div>
+
+                <div style={{ height: "52px" }}/>
+
+                <Dialog
+                    open={iconDialogOpen}
+                    onOpenChange={setIconDialogOpen}
+                    maxWidth={"xl"}
+                    fullWidth
+                >
+                    <div className={"p-4 overflow-auto min-h-[200px]"}>
+                        <SearchIconsView selectedIcon={values.icon}
+                                         onIconSelected={(icon: string) => {
+                                             setIconDialogOpen(false);
+                                             setFieldValue("icon", icon);
+                                         }}/>
+                    </div>
+
+                </Dialog>
+
+            </Container>
+        </div>
+    );
+}