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

package/src/components/collection_editor/CollectionEditorWelcomeView.tsx

@@ -0,0 +1,212 @@
+import React, { useEffect, useState } from "react";
+import {
+    Button,
+    Card,
+    Chip,
+    CircularProgress,
+    cn,
+    Container,
+    EntityCollection,
+    Icon,
+    Tooltip,
+    Typography,
+    unslugify
+} from "@firecms/core";
+import { useFormikContext } from "formik";
+
+import { productsCollectionTemplate } from "./templates/products_template";
+import { blogCollectionTemplate } from "./templates/blog_template";
+import { usersCollectionTemplate } from "./templates/users_template";
+import { ImportFileUpload } from "@firecms/data_import";
+
+export function CollectionEditorWelcomeView({
+                                                path,
+                                                pathSuggestions,
+                                                parentCollection,
+                                                onContinue,
+                                                collections
+                                            }: {
+    path: string;
+    pathSuggestions?: (path: string) => Promise<string[]>;
+    parentCollection?: EntityCollection;
+    onContinue: (importData?: object[]) => void;
+    collections?: EntityCollection[];
+}) {
+
+    const [loadingPathSuggestions, setLoadingPathSuggestions] = useState(false);
+    const [filteredPathSuggestions, setFilteredPathSuggestions] = useState<string[] | undefined>();
+    useEffect(() => {
+        if (pathSuggestions && collections) {
+            setLoadingPathSuggestions(true);
+            pathSuggestions(path)
+                .then(suggestions => {
+                    const filteredSuggestions = suggestions.filter(s => !collections.find(c => c.path.trim().toLowerCase() === s.trim().toLowerCase()));
+                    setFilteredPathSuggestions(filteredSuggestions);
+                })
+                .finally(() => setLoadingPathSuggestions(false));
+        }
+    }, [collections, path, pathSuggestions]);
+
+    const {
+        values,
+        setFieldValue,
+        setValues,
+        handleChange,
+        touched,
+        errors,
+        setFieldTouched,
+        isSubmitting,
+        submitCount
+    } = useFormikContext<EntityCollection>();
+
+    return (
+        <div className={"overflow-auto my-auto"}>
+            <Container maxWidth={"4xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
+
+                <div
+                    className="flex flex-row py-2 pt-3 items-center">
+                    <Typography variant={"h4"} className={"flex-grow"}>
+                        New collection
+                    </Typography>
+                </div>
+
+                {parentCollection && <Chip colorScheme={"tealDarker"}>
+                    <Typography variant={"caption"}>
+                        This is a subcollection of <b>{parentCollection.name}</b>
+                    </Typography>
+                </Chip>}
+
+                <div className={"my-2"}>
+                    <Typography variant={"caption"}
+                                color={"secondary"}>
+                        ● Use one of the existing paths in your database:
+                    </Typography>
+                    <div className={"flex flex-wrap gap-x-2 gap-y-1 items-center my-2 min-h-7"}>
+
+                        {loadingPathSuggestions && !filteredPathSuggestions && <CircularProgress size={"small"}/>}
+
+                        {filteredPathSuggestions?.map((suggestion, index) => (
+                            <Chip key={suggestion}
+                                  colorScheme={"cyanLighter"}
+                                  onClick={() => {
+                                      setFieldValue("name", unslugify(suggestion));
+                                      setFieldValue("path", suggestion);
+                                      setFieldValue("properties", undefined);
+                                      onContinue();
+                                  }}
+                                  size="small">
+                                {suggestion}
+                            </Chip>
+                        ))}
+
+                        {!loadingPathSuggestions && filteredPathSuggestions?.length === 0 &&
+                            <Typography variant={"caption"}>
+                                No suggestions
+                            </Typography>
+                        }
+
+                    </div>
+
+                </div>
+
+                <div className={"my-2"}>
+                    <Typography variant={"caption"}
+                                color={"secondary"}>
+                        ● Select a template:
+                    </Typography>
+
+                    <div className={"flex gap-4"}>
+                        <TemplateButton title={"Products"}
+                                        subtitle={"A collection of products with images, prices and stock"}
+                                        icon={<Icon size={"small"} iconKey={productsCollectionTemplate.icon!}/>}
+                                        onClick={() => {
+                                            setValues(productsCollectionTemplate);
+                                            onContinue();
+                                        }}/>
+                        <TemplateButton title={"Blog posts"}
+                                        subtitle={"A collection of blog posts with images, authors and complex content"}
+                                        icon={<Icon size={"small"} iconKey={blogCollectionTemplate.icon!}/>}
+                                        onClick={() => {
+                                            setValues(blogCollectionTemplate);
+                                            onContinue();
+                                        }}/>
+                        <TemplateButton title={"Users"}
+                                        subtitle={"A collection of users with emails, names and roles"}
+                                        icon={<Icon size={"small"} iconKey={usersCollectionTemplate.icon!}/>}
+                                        onClick={() => {
+                                            setValues(usersCollectionTemplate);
+                                            onContinue();
+                                        }}/>
+                    </div>
+
+                </div>
+
+                {!parentCollection && <div>
+
+                    <Typography variant={"caption"}
+                                color={"secondary"}
+                                className={"mb-2"}>
+                        ● Create a collection from a file (csv, json, xls, xslx...)
+                    </Typography>
+
+                    <ImportFileUpload onDataAdded={(data) => onContinue(data)}/>
+
+                </div>}
+
+                <div>
+
+                    <Button variant={"text"} onClick={() => onContinue()} className={"my-2"}>
+                        Continue from scratch
+                    </Button>
+                </div>
+
+                {/*<div style={{ height: "52px" }}/>*/}
+
+            </Container>
+        </div>
+    );
+}
+
+export function TemplateButton({
+                                   title,
+                                   subtitle,
+                                   icon,
+                                   onClick
+                               }: {
+    title: string,
+    icon: React.ReactNode,
+    subtitle: string,
+    onClick?: () => void
+}) {
+
+    return (
+        <Tooltip title={subtitle}>
+            <Card
+                onClick={onClick}
+                className={cn(
+                    "my-2 rounded-md border mx-0 p-6 px-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
+                    "text-gray-700 dark:text-gray-300",
+                    "hover:border-blue-600 hover:text-blue-600 dark:hover:text-blue-400 focus:ring-blue-400 hover:ring-1 hover:ring-primary",
+                    // "border-transparent hover:bg-primary hover:bg-opacity-10",
+                    // "my-2 cursor-pointer max-w-sm p-6 border border-solid rounded-lg flex flex-row gap-4 items-center bg-gray-50 dark:bg-gray-800 ",
+                    "border-gray-400 dark:border-gray-600 "
+                )}
+            >
+                {icon}
+                <div
+                    className={"flex flex-col items-start"}
+                >
+
+                    <Typography variant={"subtitle1"}>
+                        {title}
+                    </Typography>
+                    {/*<Typography>*/}
+                    {/*    {subtitle}*/}
+                    {/*</Typography>*/}
+
+                </div>
+            </Card>
+        </Tooltip>
+    );
+
+}

package/src/components/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -0,0 +1,450 @@
+import React, { useEffect, useMemo, useState } from "react";
+
+import { Field, FormikErrors, getIn, useFormikContext } from "formik";
+import {
+    AddIcon,
+    AutoAwesomeIcon,
+    Button,
+    CircularProgress,
+    cn,
+    DebouncedTextField,
+    defaultBorderMixin,
+    EntityCollection,
+    ErrorBoundary, FieldConfig,
+    isPropertyBuilder,
+    Paper,
+    Property,
+    PropertyOrBuilder,
+    Tooltip,
+    Typography,
+    useLargeLayout,
+    User,
+    useSnackbarController,
+} from "@firecms/core";
+
+import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "./util";
+import { OnPropertyChangedParams, PropertyForm, PropertyFormDialog } from "./PropertyEditView";
+import { PropertyTree } from "./PropertyTree";
+import { PersistedCollection } from "../../types/persisted_collection";
+
+type CollectionEditorFormProps = {
+    showErrors: boolean;
+    isNewCollection: boolean;
+    propertyErrorsRef?: React.MutableRefObject<any>;
+    onPropertyError: (propertyKey: string, namespace: string | undefined, error?: FormikErrors<any>) => void;
+    setDirty?: (dirty: boolean) => void;
+    reservedGroups?: string[];
+    extraIcon: React.ReactNode;
+    getUser: (uid: string) => User | null;
+    getData?: () => Promise<object[]>;
+    doCollectionInference: (collection: PersistedCollection<any, string>) => Promise<EntityCollection | null> | undefined;
+    customFields: Record<string, FieldConfig>;
+};
+
+export function CollectionPropertiesEditorForm({
+                                                   showErrors,
+                                                   isNewCollection,
+                                                   propertyErrorsRef,
+                                                   onPropertyError,
+                                                   setDirty,
+                                                   reservedGroups,
+                                                   extraIcon,
+                                                   getUser,
+                                                   getData,
+                                                   doCollectionInference,
+                                                   customFields
+                                               }: CollectionEditorFormProps) {
+
+    const {
+        values,
+        setFieldValue,
+        setFieldError,
+        setFieldTouched,
+        errors,
+        dirty
+    } = useFormikContext<PersistedCollection>();
+
+    const snackbarController = useSnackbarController();
+
+    const largeLayout = useLargeLayout("lg");
+    const asDialog = !largeLayout
+
+    // index of the selected property within the namespace
+    const [selectedPropertyIndex, setSelectedPropertyIndex] = useState<number | undefined>();
+    const [selectedPropertyKey, setSelectedPropertyKey] = useState<string | undefined>();
+    const [selectedPropertyNamespace, setSelectedPropertyNamespace] = useState<string | undefined>();
+
+    const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
+    const selectedProperty = selectedPropertyFullId ? getIn(values.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
+
+    const [inferringProperties, setInferringProperties] = useState<boolean>(false);
+
+    const [newPropertyDialogOpen, setNewPropertyDialogOpen] = useState<boolean>(false);
+    const [inferredPropertyKeys, setInferredPropertyKeys] = useState<string[]>([]);
+
+    const currentPropertiesOrderRef = React.useRef<{
+        [key: string]: string[]
+    }>(values.propertiesOrder ? { "": values.propertiesOrder } : {});
+
+    useEffect(() => {
+        if (setDirty)
+            setDirty(dirty);
+    }, [dirty]);
+
+    const inferPropertiesFromData = doCollectionInference
+        ? (): void => {
+            if (!doCollectionInference)
+                return;
+
+            setInferringProperties(true);
+            // @ts-ignore
+            doCollectionInference(values)
+                .then((newCollection) => {
+                    if (!newCollection) {
+                        snackbarController.open({
+                            type: "error",
+                            message: "Could not infer properties from data",
+                        });
+                        return;
+                    }
+                    // find properties in the new collection, not present in the current one
+                    const newPropertyKeys = Object.keys(newCollection.properties)
+                        .filter((propertyKey) => !values.properties[propertyKey]);
+                    if (newPropertyKeys.length === 0) {
+                        snackbarController.open({
+                            type: "info",
+                            message: "No new properties found",
+                        });
+                        return;
+                    }
+                    // add them to the current collection
+                    const updatedProperties = {
+                        ...newPropertyKeys.reduce((acc, propertyKey) => {
+                            acc[propertyKey] = newCollection.properties[propertyKey];
+                            return acc;
+                        }, {} as { [key: string]: PropertyOrBuilder }),
+                        ...values.properties,
+                    };
+                    const updatedPropertiesOrder = [
+                        ...newPropertyKeys,
+                        ...(values.propertiesOrder ?? [])
+                    ];
+                    setFieldValue("properties", updatedProperties, false);
+
+                    updatePropertiesOrder(updatedPropertiesOrder);
+
+                    setInferredPropertyKeys(newPropertyKeys);
+                })
+                .finally(() => {
+                    setInferringProperties(false);
+                })
+        }
+        : undefined;
+
+    const getCurrentPropertiesOrder = (namespace?: string) => {
+        if (!namespace) return currentPropertiesOrderRef.current[""];
+        return currentPropertiesOrderRef.current[namespace] ?? getIn(values, namespaceToPropertiesOrderPath(namespace));
+    }
+
+    const updatePropertiesOrder = (newPropertiesOrder: string[], namespace?: string) => {
+        const propertiesOrderPath = namespaceToPropertiesOrderPath(namespace);
+
+        setFieldValue(propertiesOrderPath, newPropertiesOrder, false);
+        currentPropertiesOrderRef.current[namespace ?? ""] = newPropertiesOrder;
+
+    };
+
+    const deleteProperty = (propertyKey?: string, namespace?: string) => {
+        const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
+        if (!fullId)
+            throw Error("collection editor miss config");
+
+        setFieldValue(idToPropertiesPath(fullId), undefined, false);
+
+        const currentPropertiesOrder = getCurrentPropertiesOrder(namespace);
+        const newPropertiesOrder = currentPropertiesOrder.filter((p) => p !== propertyKey);
+        updatePropertiesOrder(newPropertiesOrder, namespace);
+
+        setNewPropertyDialogOpen(false);
+
+        setSelectedPropertyIndex(undefined);
+        setSelectedPropertyKey(undefined);
+        setSelectedPropertyNamespace(undefined);
+    };
+
+    const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
+        setFieldValue(namespaceToPropertiesOrderPath(namespace), propertiesOrder, false);
+    };
+
+    const onPropertyCreated = ({
+                                   id,
+                                   property
+                               }: {
+        id?: string,
+        property: Property
+    }) => {
+        console.log("onPropertyCreated", {
+            id,
+            property
+        })
+        if (!id) {
+            throw Error("Need to include an ID when creating a new property")
+        }
+        setFieldValue("properties", {
+            ...(values.properties ?? {}),
+            [id]: property
+        }, false);
+        const newPropertiesOrder = [...(values.propertiesOrder ?? Object.keys(values.properties)), id];
+
+        console.log("onPropertyCreated", {
+            id,
+            property,
+            newPropertiesOrder
+        })
+        updatePropertiesOrder(newPropertiesOrder);
+
+        setNewPropertyDialogOpen(false);
+        if (largeLayout) {
+            setSelectedPropertyIndex(newPropertiesOrder.indexOf(id));
+            setSelectedPropertyKey(id);
+        }
+        setSelectedPropertyNamespace(undefined);
+    };
+
+    const onPropertyChanged = ({
+                                   id,
+                                   property,
+                                   previousId,
+                                   namespace
+                               }: OnPropertyChangedParams) => {
+        const fullId = id ? getFullId(id, namespace) : undefined;
+        const propertyPath = fullId ? idToPropertiesPath(fullId) : undefined;
+
+        // If the id has changed we need to a little cleanup
+        if (previousId && previousId !== id) {
+            const previousFullId = getFullId(previousId, namespace);
+            const previousPropertyPath = idToPropertiesPath(previousFullId);
+
+            const currentPropertiesOrder = getCurrentPropertiesOrder(namespace);
+
+            // replace previousId with id in propertiesOrder
+            const newPropertiesOrder = currentPropertiesOrder
+                .map((p) => p === previousId ? id : p)
+                .filter((p) => p !== undefined) as string[];
+
+            updatePropertiesOrder(newPropertiesOrder, namespace);
+
+            if (id) {
+                setSelectedPropertyIndex(newPropertiesOrder.indexOf(id));
+                setSelectedPropertyKey(id);
+            }
+            setFieldValue(previousPropertyPath, undefined, false);
+            setFieldTouched(previousPropertyPath, false, false);
+        }
+
+        if (propertyPath) {
+            setFieldValue(propertyPath, property, false);
+            setFieldTouched(propertyPath, true, false);
+        }
+
+    };
+
+    const onPropertyErrorInternal = (id: string, namespace?: string, error?: FormikErrors<any>) => {
+        const propertyPath = id ? getFullId(id, namespace) : undefined;
+        console.warn("onPropertyErrorInternal", {
+            id,
+            namespace,
+            error,
+            propertyPath
+        });
+        if (propertyPath) {
+            const hasError = error && Object.keys(error).length > 0;
+            onPropertyError(id, namespace, hasError ? error : undefined);
+            setFieldError(idToPropertiesPath(propertyPath), hasError ? "Property error" : undefined);
+        }
+    };
+
+    const closePropertyDialog = () => {
+        setSelectedPropertyIndex(undefined);
+        setSelectedPropertyKey(undefined);
+    };
+
+    const initialErrors = selectedPropertyKey && propertyErrorsRef?.current?.properties ? propertyErrorsRef.current.properties[selectedPropertyKey] : undefined;
+
+    const emptyCollection = values?.propertiesOrder === undefined || values.propertiesOrder.length === 0;
+
+    const usedPropertiesOrder = (values.propertiesOrder
+        ? values.propertiesOrder
+        : Object.keys(values.properties)) as string[];
+
+    const owner = useMemo(() => getUser(values.ownerId), [getUser, values.ownerId]);
+    const body = (
+        <div className={"grid grid-cols-12 gap-2 h-full bg-gray-50 dark:bg-gray-900"}>
+            <div className={cn(
+                "p-4 md:p-8 pb-20 md:pb-20",
+                "col-span-12 lg:col-span-5 h-full overflow-auto",
+                !asDialog && "border-r " + defaultBorderMixin
+            )}>
+
+                <div className="flex my-2">
+
+                    <div className="flex-grow mb-4">
+
+                        <Field
+                            name={"name"}
+                            as={DebouncedTextField}
+                            invisible={true}
+                            className="-ml-1"
+                            inputClassName="text-2xl font-headers"
+                            placeholder={"Collection name"}
+                            size={"small"}
+                            required
+                            error={Boolean(errors.name)}/>
+
+                        {owner &&
+                            <Typography variant={"body2"}
+                                        className={"ml-2"}
+                                        color={"secondary"}>
+                                Created by {owner.displayName}
+                            </Typography>}
+                    </div>
+
+                    {extraIcon && <div className="ml-4">
+                        {extraIcon}
+                    </div>}
+
+                    <div className="ml-1 mt-2 flex flex-row gap-2">
+                        {inferPropertiesFromData && <Tooltip title={"Add new properties based on data"}>
+                            <Button
+                                variant={"text"}
+                                disabled={inferringProperties}
+                                onClick={inferPropertiesFromData}>
+                                {inferringProperties ? <CircularProgress size={"small"}/> : <AutoAwesomeIcon/>}
+                            </Button>
+                        </Tooltip>}
+                        <Tooltip title={"Add new property"}>
+                            <Button
+                                variant={"outlined"}
+                                onClick={() => setNewPropertyDialogOpen(true)}>
+                                <AddIcon/>
+                            </Button>
+                        </Tooltip>
+                    </div>
+                </div>
+
+                <ErrorBoundary>
+                    <PropertyTree
+                        className={"pl-8"}
+                        onPropertyClick={(propertyKey, namespace) => {
+                            setSelectedPropertyIndex(usedPropertiesOrder.indexOf(propertyKey));
+                            setSelectedPropertyKey(propertyKey);
+                            setSelectedPropertyNamespace(namespace);
+                        }}
+                        inferredPropertyKeys={inferredPropertyKeys}
+                        selectedPropertyKey={selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined}
+                        properties={values.properties}
+                        additionalFields={values.additionalFields}
+                        propertiesOrder={usedPropertiesOrder}
+                        onPropertyMove={onPropertyMove}
+                        onPropertyRemove={isNewCollection ? deleteProperty : undefined}
+                        errors={showErrors ? errors : {}}/>
+                </ErrorBoundary>
+
+                <Button className={"mt-8 w-full"}
+                        color="primary"
+                        variant={"outlined"}
+                        size={"large"}
+                        onClick={() => setNewPropertyDialogOpen(true)}
+                        startIcon={<AddIcon/>}>
+                    Add new property
+                </Button>
+            </div>
+
+            {!asDialog &&
+                <div className={"col-span-12 lg:col-span-7 ml-2 p-4 md:p-8 h-full overflow-auto pb-20 md:pb-20"}>
+                    <Paper
+                        className="sticky top-8 p-4 min-h-full border border-transparent w-full flex flex-col justify-center ">
+
+                        {selectedPropertyFullId &&
+                            selectedProperty &&
+                            !isPropertyBuilder(selectedProperty) &&
+                            <PropertyForm
+                                inArray={false}
+                                key={`edit_view_${selectedPropertyIndex}`}
+                                existing={!isNewCollection}
+                                autoUpdateId={false}
+                                allowDataInference={!isNewCollection}
+                                autoOpenTypeSelect={false}
+                                propertyKey={selectedPropertyKey}
+                                propertyNamespace={selectedPropertyNamespace}
+                                property={selectedProperty}
+                                onPropertyChanged={onPropertyChanged}
+                                onDelete={deleteProperty}
+                                onError={onPropertyErrorInternal}
+                                forceShowErrors={showErrors}
+                                initialErrors={initialErrors}
+                                getData={getData}
+                                customFields={customFields}
+                            />}
+
+                        {!selectedProperty &&
+                            <Typography variant={"label"} className="flex items-center justify-center h-full">
+                                {emptyCollection
+                                    ? "Now you can add your first property"
+                                    : "Select a property to edit it"}
+                            </Typography>}
+
+                        {selectedProperty && isPropertyBuilder(selectedProperty) &&
+                            <Typography variant={"label"} className="flex items-center justify-center">
+                                {"This property is defined as a property builder in code"}
+                            </Typography>}
+                    </Paper>
+                </div>}
+
+            {asDialog && <PropertyFormDialog
+                inArray={false}
+                open={selectedPropertyIndex !== undefined}
+                key={`edit_view_${selectedPropertyIndex}`}
+                autoUpdateId={isNewCollection}
+                allowDataInference={!isNewCollection}
+                existing={true}
+                autoOpenTypeSelect={false}
+                propertyKey={selectedPropertyKey}
+                propertyNamespace={selectedPropertyNamespace}
+                property={selectedProperty}
+                onPropertyChanged={onPropertyChanged}
+                onDelete={deleteProperty}
+                onError={onPropertyErrorInternal}
+                forceShowErrors={showErrors}
+                initialErrors={initialErrors}
+                getData={getData}
+                customFields={customFields}
+                onOkClicked={asDialog
+                    ? closePropertyDialog
+                    : undefined
+                }/>}
+
+        </div>);
+
+    return (<>
+
+            {body}
+
+            {/* This is the dialog used for new properties*/}
+            <PropertyFormDialog
+                inArray={false}
+                existing={false}
+                autoOpenTypeSelect={true}
+                autoUpdateId={true}
+                forceShowErrors={showErrors}
+                open={newPropertyDialogOpen}
+                onCancel={() => setNewPropertyDialogOpen(false)}
+                onPropertyChanged={onPropertyCreated}
+                getData={getData}
+                allowDataInference={!isNewCollection}
+                customFields={customFields}
+                existingPropertyKeys={values.propertiesOrder as string[]}/>
+
+        </>
+    );
+}

package/src/components/collection_editor/CollectionYupValidation.tsx

@@ -0,0 +1,6 @@
+import * as Yup from "yup";
+
+export const YupSchema = Yup.object().shape({
+    name: Yup.string().required("Required"),
+    path: Yup.string().required("Required")
+});