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

package/src/ui/collection_editor/properties/MapPropertyField.tsx

@@ -0,0 +1,149 @@
+import React, { useCallback, useState } from "react";
+import { MapProperty, Property, PropertyConfig, } from "@firecms/core";
+import { AddIcon, BooleanSwitchWithLabel, Button, Paper, Typography } from "@firecms/ui";
+import { PropertyFormDialog } from "../PropertyEditView";
+import { getIn, useFormikContext } from "formik";
+import { PropertyTree } from "../PropertyTree";
+import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
+import { FieldHelperView } from "./FieldHelperView";
+
+export function MapPropertyField({ disabled, getData, allowDataInference, propertyConfigs, collectionEditable }: {
+    disabled: boolean;
+    getData?: () => Promise<object[]>;
+    allowDataInference: boolean;
+    propertyConfigs: Record<string, PropertyConfig>,
+    collectionEditable: boolean;
+}) {
+
+    const {
+        values,
+        setFieldValue
+    } = useFormikContext<MapProperty>();
+
+    const [propertyDialogOpen, setPropertyDialogOpen] = useState<boolean>(false);
+    const [selectedPropertyKey, setSelectedPropertyKey] = useState<string | undefined>();
+    const [selectedPropertyNamespace, setSelectedPropertyNamespace] = useState<string | undefined>();
+
+    const propertiesOrder = values.propertiesOrder ?? Object.keys(values.properties ?? {});
+    const onPropertyCreated = useCallback(({
+                                               id,
+                                               property
+                                           }: { id?: string, property: Property }) => {
+        if (!id)
+            throw Error();
+        setFieldValue("properties", {
+            ...(values.properties ?? {}),
+            [id]: property
+        }, false);
+        setFieldValue("propertiesOrder", [...propertiesOrder, id], false);
+        setPropertyDialogOpen(false);
+    }, [values.properties, propertiesOrder]);
+
+    const deleteProperty = useCallback((propertyKey?: string, namespace?: string) => {
+        const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
+        if (!fullId)
+            throw Error("collection editor miss config");
+
+        const propertiesPath = idToPropertiesPath(fullId);
+        const propertiesOrderPath = namespaceToPropertiesOrderPath(namespace);
+
+        const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath) ?? Object.keys(getIn(values, namespaceToPropertiesPath(namespace)));
+
+        setFieldValue(propertiesPath, undefined, false);
+        setFieldValue(propertiesOrderPath, currentPropertiesOrder.filter((p) => p !== propertyKey), false);
+
+        setPropertyDialogOpen(false);
+        setSelectedPropertyKey(undefined);
+        setSelectedPropertyNamespace(undefined);
+    }, [setFieldValue, values]);
+
+    const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
+    const selectedProperty = selectedPropertyFullId ? getIn(values.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
+
+    const addChildButton = <Button
+        color="primary"
+        variant={"outlined"}
+        onClick={() => setPropertyDialogOpen(true)}
+        startIcon={<AddIcon/>}
+    >
+        Add property to {values.name ?? "this group"}
+    </Button>;
+
+    const empty = !propertiesOrder || propertiesOrder.length < 1;
+
+    const onPropertyMove = useCallback((propertiesOrder: string[], namespace?: string) => {
+        setFieldValue(namespaceToPropertiesOrderPath(namespace), propertiesOrder, false);
+    }, []);
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+                <div className="flex justify-between items-end my-4">
+                    <Typography variant={"subtitle2"}>Properties in this group</Typography>
+                    {addChildButton}
+                </div>
+                <Paper className="p-2 pl-8">
+                    <PropertyTree
+                        properties={values.properties ?? {}}
+                        propertiesOrder={propertiesOrder}
+                        errors={{}}
+                        collectionEditable={collectionEditable}
+                        onPropertyClick={(propertyKey, namespace) => {
+                            setSelectedPropertyKey(propertyKey);
+                            setSelectedPropertyNamespace(namespace);
+                            setPropertyDialogOpen(true);
+                        }}
+                        onPropertyMove={onPropertyMove}/>
+
+                    {empty &&
+                        <Typography variant={"label"}
+                                    className="h-full flex items-center justify-center p-4">
+                            Add the first property to this group
+                        </Typography>}
+                </Paper>
+            </div>
+
+            <div className={"col-span-12"}>
+                <BooleanSwitchWithLabel
+                    position={"start"}
+                    size={"small"}
+                    label="Spread children as columns"
+                    onValueChange={(v) => setFieldValue("spreadChildren", v)}
+                    value={values.spreadChildren ?? false}
+                />
+                <FieldHelperView>
+                    Set this flag to true if you want to display the children of this group as individual columns.
+                </FieldHelperView>
+            </div>
+
+            <PropertyFormDialog
+                inArray={false}
+                forceShowErrors={false}
+                open={propertyDialogOpen}
+                allowDataInference={allowDataInference}
+                collectionEditable={collectionEditable}
+                onCancel={() => {
+                    setPropertyDialogOpen(false);
+                    setSelectedPropertyKey(undefined);
+                    setSelectedPropertyNamespace(undefined);
+                }}
+                onOkClicked={() => {
+                    setPropertyDialogOpen(false);
+                    setSelectedPropertyKey(undefined);
+                    setSelectedPropertyNamespace(undefined);
+                }}
+                getData={getData}
+                onDelete={deleteProperty}
+                propertyKey={selectedPropertyKey}
+                propertyNamespace={selectedPropertyNamespace}
+                property={selectedProperty}
+                existingProperty={Boolean(selectedPropertyKey)}
+                autoUpdateId={!selectedPropertyKey}
+                autoOpenTypeSelect={!selectedPropertyKey}
+                onPropertyChanged={onPropertyCreated}
+                existingPropertyKeys={selectedPropertyKey ? undefined : propertiesOrder}
+                propertyConfigs={propertyConfigs}
+            />
+
+        </>);
+}

package/src/ui/collection_editor/properties/NumberPropertyField.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { NumberPropertyValidation } from "./validation/NumberPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { TextField } from "@firecms/ui";
+import { getIn, useFormikContext } from "formik";
+
+export function NumberPropertyField({ disabled }: {
+    disabled: boolean;
+}) {
+
+    const { values, setFieldValue } = useFormikContext();
+
+    return (
+        <>
+
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+                    <NumberPropertyValidation disabled={disabled}/>
+                </ValidationPanel>
+
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <TextField name={"defaultValue"}
+                           disabled={disabled}
+                           type={"number"}
+                           onChange={(e: any) => {
+                               setFieldValue("defaultValue", e.target.value === "" ? undefined : parseFloat(e.target.value));
+                           }}
+                           label={"Default value"}
+                           value={getIn(values, "defaultValue") ?? ""}/>
+
+            </div>
+        </>
+    );
+}

package/src/ui/collection_editor/properties/ReferencePropertyField.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+import { Field, getIn, useFormikContext } from "formik";
+import { IconForView, NumberProperty, StringProperty, useNavigationController } from "@firecms/core";
+import { CircularProgress, Select, SelectGroup, SelectItem, Typography, } from "@firecms/ui";
+import { FieldHelperView } from "./FieldHelperView";
+
+export function ReferencePropertyField({
+                                           existing,
+                                           multiple,
+                                           disabled,
+                                           showErrors
+                                       }: { existing: boolean, multiple: boolean, disabled: boolean, showErrors: boolean }) {
+
+    const {
+        values,
+        handleChange,
+        errors,
+    } = useFormikContext<StringProperty | NumberProperty>();
+
+    const navigation = useNavigationController();
+
+    if (!navigation)
+        return <div className={"col-span-12"}>
+            <CircularProgress/>
+        </div>;
+
+    const pathPath = multiple ? "of.path" : "path";
+    const pathValue: string | undefined = getIn(values, pathPath);
+    const pathError: string | undefined = showErrors && getIn(errors, pathPath);
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+                <Field required
+                       name={pathPath}
+                       pathPath={pathPath}
+                       type="select"
+                       validate={validatePath}
+                       disabled={existing || disabled}
+                       value={pathValue}
+                       error={pathError}
+                       handleChange={handleChange}
+                       component={CollectionsSelect}/>
+
+            </div>
+
+        </>
+    );
+}
+
+function validatePath(value?: string) {
+    let error;
+    if (!value) {
+        error = "You must specify a target collection for the field";
+    }
+    return error;
+}
+
+export function CollectionsSelect({
+                                      disabled,
+                                      pathPath,
+                                      value,
+                                      handleChange,
+                                      error,
+                                      ...props
+                                  }: {
+    disabled: boolean,
+    pathPath: string,
+    value?: string,
+    handleChange: (event: any) => void,
+    error?: string
+}) {
+
+    const navigation = useNavigationController();
+
+    if (!navigation)
+        return <div className={"col-span-12"}>
+            <CircularProgress/>
+        </div>;
+
+    const collections = navigation?.collections ?? [];
+
+    const groups: string[] = Array.from(new Set(
+        Object.values(collections).map(e => e.group).filter(Boolean) as string[]
+    ).values());
+
+    const ungroupedCollections = collections.filter((col) => !col.group);
+
+    return (
+        <>
+            <Select
+                error={Boolean(error)}
+                disabled={disabled}
+                value={value ?? ""}
+                position={"item-aligned"}
+                name={pathPath}
+                onChange={handleChange}
+                label={"Target collection"}
+                renderValue={(selected) => {
+                    const selectedCollection = collections.find(collection => collection.id === selected || collection.path === selected);
+                    if (!selectedCollection) return null;
+                    return (
+                        <div className="flex flex-row">
+                            <IconForView collectionOrView={selectedCollection}/>
+                            <Typography
+                                variant={"subtitle2"}
+                                className="font-medium ml-4">
+                                {selectedCollection?.name.toUpperCase()}
+                            </Typography>
+                        </div>)
+                }}
+                {...props}>
+
+                {groups.flatMap((group) => (
+                    <SelectGroup label={group || "Views"}
+                                 key={`group_${group}`}>
+                        {
+                            collections.filter(collection => collection.group === group)
+                                .map((collection) => {
+                                    return <SelectItem
+                                        key={`${collection.id ?? collection.path}-${group}`}
+                                        value={collection.id ?? collection.path}>
+                                        <div className="flex flex-row">
+                                            <IconForView collectionOrView={collection}/>
+                                            <Typography
+                                                variant={"subtitle2"}
+                                                className="font-medium ml-4">
+                                                {collection?.name.toUpperCase()}
+                                            </Typography>
+                                        </div>
+                                    </SelectItem>;
+                                })
+
+                        }
+                    </SelectGroup>
+                ))}
+
+                {ungroupedCollections && <SelectGroup label={"Views"}>
+                    {ungroupedCollections
+                        .map((collection) => {
+                            return <SelectItem key={collection.id ?? collection.path}
+                                               value={collection.id ?? collection.path}>
+                                <div className="flex flex-row">
+                                    <IconForView collectionOrView={collection}/>
+                                    <Typography
+                                        variant={"subtitle2"}
+                                        className="font-medium ml-4">
+                                        {collection?.name.toUpperCase()}
+                                    </Typography>
+                                </div>
+                            </SelectItem>;
+                        })
+
+                    }
+                </SelectGroup>}
+
+            </Select>
+
+            <FieldHelperView>
+                You can only edit the reference collection upon field
+                creation.
+            </FieldHelperView>
+        </>
+    );
+}

package/src/ui/collection_editor/properties/RepeatPropertyField.tsx

@@ -0,0 +1,108 @@
+import React, { useCallback, useState } from "react";
+import { ArrayProperty, getFieldConfig, Property, PropertyConfig } from "@firecms/core";
+import { Button, Paper, Typography } from "@firecms/ui";
+import { Field, getIn, useFormikContext } from "formik";
+import { PropertyFormDialog } from "../PropertyEditView";
+import { PropertyFieldPreview } from "../PropertyFieldPreview";
+import { ArrayPropertyValidation } from "./validation/ArrayPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+
+export function RepeatPropertyField({
+                                        showErrors,
+                                        existing,
+                                        disabled,
+                                        getData,
+                                        allowDataInference,
+                                        propertyConfigs,
+                                        collectionEditable
+                                    }: {
+    showErrors: boolean,
+    existing: boolean,
+    disabled: boolean,
+    getData?: () => Promise<object[]>;
+    allowDataInference: boolean;
+    propertyConfigs: Record<string, PropertyConfig>,
+    collectionEditable: boolean;
+}) {
+
+    const {
+        values,
+        handleChange,
+        errors,
+        setFieldValue,
+        touched
+    } = useFormikContext<ArrayProperty>();
+
+    const [propertyDialogOpen, setPropertyDialogOpen] = useState(false);
+    const ofProperty = getIn(values, "of");
+    const ofPropertyError = getIn(touched, "of") && getIn(errors, "of");
+
+    const onPropertyChanged = useCallback(({ id, property, namespace }:
+                                               { id?: string, property: Property, namespace?: string }) => {
+        setFieldValue("of", property);
+    }, []);
+
+    const widget = ofProperty && getFieldConfig(ofProperty, propertyConfigs);
+    return (
+        <>
+            <div className={"col-span-12"}>
+                <Typography variant={"subtitle2"}>
+                    Repeat component
+                </Typography>
+                <Field
+                    name={"of"}
+                    value={ofProperty}
+                    validate={(property: Property) => {
+                        return property?.dataType ? undefined : "You need to specify a repeat field";
+                    }}
+                >
+                    {() => (
+                        <Paper className="p-2 mt-4">
+
+                            {ofProperty && <PropertyFieldPreview
+                                property={ofProperty}
+                                onClick={disabled ? undefined : () => setPropertyDialogOpen(true)}
+                                includeName={false}
+                                includeEditButton={true}
+                                selected={false}
+                                hasError={false}/>}
+
+                            {!disabled && !ofProperty && <Button variant={"text"}
+                                                                 size={"large"}
+                                                                 color={ofPropertyError ? "error" : "primary"}
+                                                                 onClick={() => setPropertyDialogOpen(true)}>
+                                Edit {`${widget ? widget.name : "repeat component"}`}
+                            </Button>}
+
+                            <PropertyFormDialog
+                                inArray={true}
+                                open={propertyDialogOpen}
+                                existingProperty={existing}
+                                getData={getData}
+                                autoUpdateId={!existing}
+                                autoOpenTypeSelect={!existing}
+                                onOkClicked={() => setPropertyDialogOpen(false)}
+                                allowDataInference={allowDataInference}
+                                property={ofProperty}
+                                includeIdAndName={false}
+                                onPropertyChanged={onPropertyChanged}
+                                forceShowErrors={showErrors}
+                                propertyConfigs={propertyConfigs}
+                                collectionEditable={collectionEditable}
+                            />
+                        </Paper>
+                    )}
+                </Field>
+
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+                    <ArrayPropertyValidation disabled={disabled}/>
+                </ValidationPanel>
+
+            </div>
+        </>
+    );
+}

package/src/ui/collection_editor/properties/StoragePropertyField.tsx

@@ -0,0 +1,194 @@
+import React from "react";
+import { SwitchControl, } from "@firecms/core";
+import {
+    Button,
+    Checkbox,
+    DebouncedTextField,
+    ExpandablePanel,
+    FileUploadIcon,
+    MultiSelect,
+    MultiSelectItem,
+    Typography
+} from "@firecms/ui";
+
+import { Field, getIn, useFormikContext } from "formik";
+import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
+import { ArrayPropertyValidation } from "./validation/ArrayPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+
+const fileTypes: Record<string, string> = {
+    "image/*": "Images",
+    "video/*": "Videos",
+    "audio/*": "Audio files",
+    "application/*": "Files (pdf, zip, csv, excel...)",
+    "text/*": "Text files"
+}
+
+export function StoragePropertyField({
+                                         multiple,
+                                         existing,
+                                         disabled
+                                     }: {
+    multiple: boolean;
+    existing: boolean;
+    disabled: boolean;
+}) {
+
+    const {
+        values,
+        setFieldValue
+    } = useFormikContext();
+
+    const baseStoragePath = multiple ? "of.storage" : "storage";
+    const acceptedFiles = `${baseStoragePath}.acceptedFiles`;
+
+    const metadata = `${baseStoragePath}.metadata`;
+    const fileName = `${baseStoragePath}.fileName`;
+    const storagePath = `${baseStoragePath}.storagePath`;
+    const storeUrl = `${baseStoragePath}.storeUrl`;
+
+    const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
+    const storagePathValue = getIn(values, storagePath) ?? "/";
+
+    const storedValue = getIn(values, acceptedFiles);
+    const fileTypesValue: string[] | undefined = Array.isArray(storedValue) ? storedValue : undefined;
+    const allFileTypesSelected = !fileTypesValue || fileTypesValue.length === 0;
+
+    const handleTypesChange = (value: string[]) => {
+        if (!value) setFieldValue(acceptedFiles, undefined);
+        else if (value.includes("all")) setFieldValue(acceptedFiles, undefined);
+        else if (value.length >= Object.keys(fileTypes).length) setFieldValue(acceptedFiles, undefined);
+        else if (allFileTypesSelected)
+            setFieldValue(acceptedFiles, Object.keys(fileTypes).filter((v) => !value.includes(v)));
+        else setFieldValue(acceptedFiles, value);
+    };
+
+    const hasFilenameCallback = typeof fileNameValue === "function";
+    const hasStoragePathCallback = typeof storagePathValue === "function";
+
+    return (
+        <>
+
+            <div className={"col-span-12"}>
+
+                <ExpandablePanel
+                    title={
+                        <div className="flex flex-row text-gray-500">
+                            <FileUploadIcon/>
+                            <Typography variant={"subtitle2"}
+                                        className="ml-2">
+                                File upload config
+                            </Typography>
+                        </div>
+                    }>
+
+                    <div className={"grid grid-cols-12 gap-2 p-4"}>
+
+                        <div className={"col-span-12"}>
+
+                            <MultiSelect
+                                disabled={disabled}
+                                name={acceptedFiles}
+                                value={fileTypesValue ?? []}
+                                onMultiValueChange={handleTypesChange}
+                                label={allFileTypesSelected ? undefined : "Allowed file types"}
+                                renderValues={(selected) => {
+                                    if (!selected || selected.length === 0) return "All file types allowed";
+                                    return selected.map((v: string) => fileTypes[v])
+                                        .filter((v: string) => Boolean(v))
+                                        .join(", ");
+                                }}>
+
+                                <MultiSelectItem key={"all"} value={"all"} className={"flex items-center gap-2"}>
+                                    <Checkbox
+                                        checked={!fileTypesValue}/>
+                                    All
+                                </MultiSelectItem>
+
+                                {Object.entries(fileTypes).map(([value, label]) => (
+                                    <MultiSelectItem key={value} value={value} className={"flex items-center gap-2"}>
+                                        <Checkbox
+                                            checked={allFileTypesSelected || fileTypesValue.indexOf(value) > -1}/>
+                                        <div className={"flex-grow"}>
+                                            {label}
+                                        </div>
+                                        <Button size={"small"}
+                                                variant={"outlined"}
+                                                onClick={(e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                    return setFieldValue(acceptedFiles, [value]);
+                                                }}>
+                                            Only
+                                        </Button>
+                                    </MultiSelectItem>
+                                ))}
+
+                            </MultiSelect>
+                        </div>
+
+                        <div className={"col-span-12"}>
+                            <Field name={fileName}
+                                   as={DebouncedTextField}
+                                   label={"File name"}
+                                   size={"small"}
+                                   disabled={hasFilenameCallback || disabled}
+                                   value={hasFilenameCallback ? "-" : fileNameValue}
+                            />
+                        </div>
+                        <div className={"col-span-12"}>
+                            <Field name={storagePath}
+                                   as={DebouncedTextField}
+                                   label={"Storage path"}
+                                   disabled={hasStoragePathCallback || disabled}
+                                   size={"small"}
+                                   value={hasStoragePathCallback ? "-" : storagePathValue}
+                            />
+                            <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
+                                <p>You can use the following placeholders in
+                                    the file name
+                                    and storage path values:</p>
+                                <ul>
+                                    <li>{"{file} - Full name of the uploaded file"}</li>
+                                    <li>{"{file.name} - Name of the uploaded file without extension"}</li>
+                                    <li>{"{file.ext} - Extension of the uploaded file"}</li>
+                                    <li>{"{entityId} - ID of the entity"}</li>
+                                    <li>{"{propertyKey} - ID of this field"}</li>
+                                    <li>{"{path} - Path of this entity"}</li>
+                                    <li>{"{rand} - Random value used to avoid name collisions"}</li>
+                                </ul>
+                            </Typography>
+                            <Field type="checkbox"
+                                   name={storeUrl}
+                                   label={"Save URL instead of storage path"}
+                                   disabled={existing || disabled}
+                                   component={SwitchControl}/>
+                            <br/>
+                            <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
+                                Turn this setting on, if you prefer to save
+                                the download
+                                URL of the uploaded file instead of the
+                                storage path.
+                                You can only change this prop upon creation.
+                            </Typography>
+                        </div>
+                    </div>
+                </ExpandablePanel>
+
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+                    {!multiple && <div className={"grid grid-cols-12 gap-2"}>
+                        <GeneralPropertyValidation disabled={disabled}/>
+                    </div>}
+                    {multiple && <div className={"col-span-12"}>
+                        <ArrayPropertyValidation disabled={disabled}/>
+                    </div>}
+                </ValidationPanel>
+
+            </div>
+        </>
+    );
+}