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

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/core";
+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,184 @@
+import React from "react";
+import { Field, getIn, useFormikContext } from "formik";
+import {
+    CircularProgress,
+    getIconForView,
+    NumberProperty,
+    Select,
+    SelectGroup,
+    SelectItem,
+    StringProperty,
+    Typography,
+    useNavigationController
+} from "@firecms/core";
+import { FieldHelperView } from "./FieldHelperView";
+
+export function ReferencePropertyField({
+                                           existing,
+                                           multiple,
+                                           disabled,
+                                           showErrors
+                                       }: { existing: boolean, multiple: boolean, disabled: boolean, showErrors: boolean }) {
+
+    const {
+        values,
+        handleChange,
+        errors,
+        touched,
+        setFieldError,
+        setFieldValue
+    } = 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);
+
+    console.log("pathError", errors, pathError)
+
+    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
+}) {
+
+    console.log("error", error)
+
+    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;
+                    const collectionIcon = getIconForView(selectedCollection);
+                    return (
+                        <div className="flex flex-row">
+                            {collectionIcon}
+                            <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) => {
+                                    const collectionIcon = getIconForView(collection);
+                                    return <SelectItem
+                                        key={`${collection.id ?? collection.path}-${group}`}
+                                        value={collection.id ?? collection.path}>
+                                        <div className="flex flex-row">
+                                            {collectionIcon}
+                                            <Typography
+                                                variant={"subtitle2"}
+                                                className="font-medium ml-4">
+                                                {collection?.name.toUpperCase()}
+                                            </Typography>
+                                        </div>
+                                    </SelectItem>;
+                                })
+
+                        }
+                    </SelectGroup>
+                ))}
+
+                {ungroupedCollections && <SelectGroup label={"Views"}>
+                    {ungroupedCollections
+                        .map((collection) => {
+                            const collectionIcon = getIconForView(collection);
+                            return <SelectItem key={collection.id ?? collection.path}
+                                               value={collection.id ?? collection.path}>
+                                <div className="flex flex-row">
+                                    {collectionIcon}
+                                    <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,107 @@
+import React, { useCallback, useState } from "react";
+import { ArrayProperty, Button, getFieldConfig, Paper, Property, PropertyConfig, Typography } from "@firecms/core";
+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 {
+    Button,
+    Checkbox,
+    DebouncedTextField,
+    ExpandablePanel,
+    FileUploadIcon,
+    MultiSelect,
+    MultiSelectItem,
+    SwitchControl,
+    Typography
+} from "@firecms/core";
+
+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>
+        </>
+    );
+}

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

@@ -0,0 +1,79 @@
+import React from "react";
+import { StringPropertyValidation } from "./validation/StringPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { getIn, useFormikContext } from "formik";
+
+import { TextField } from "@firecms/core";
+
+export function StringPropertyField({
+                                        widgetId,
+                                        disabled,
+                                        showErrors
+                                    }: {
+    widgetId: "text_field" | "multiline" | "markdown" | "email";
+    disabled: boolean;
+    showErrors: boolean;
+}) {
+
+    const { values, setFieldValue } = useFormikContext();
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+
+                    {widgetId === "text_field" &&
+                        <StringPropertyValidation disabled={disabled}
+                                                  length={true}
+                                                  lowercase={true}
+                                                  matches={true}
+                                                  max={true}
+                                                  min={true}
+                                                  trim={true}
+                                                  uppercase={true}
+                                                  showErrors={showErrors}/>}
+                    {widgetId === "multiline" &&
+                        <StringPropertyValidation disabled={disabled}
+                                                  length={true}
+                                                  lowercase={true}
+                                                  max={true}
+                                                  min={true}
+                                                  trim={true}
+                                                  uppercase={true}
+                                                  showErrors={showErrors}/>}
+                    {widgetId === "markdown" &&
+                        <StringPropertyValidation disabled={disabled}
+                                                  length={true}
+                                                  lowercase={true}
+                                                  max={true}
+                                                  min={true}
+                                                  trim={true}
+                                                  uppercase={true}
+                                                  showErrors={showErrors}/>}
+
+                    {widgetId === "email" &&
+                        <StringPropertyValidation disabled={disabled}
+                                                  max={true}
+                                                  min={true}
+                                                  trim={true}
+                                                  showErrors={showErrors}/>}
+
+                </ValidationPanel>
+
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <TextField name={"defaultValue"}
+                           disabled={disabled}
+                           onChange={(e: any) => {
+                               setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
+                           }}
+                           label={"Default value"}
+                           value={getIn(values, "defaultValue") ?? ""}/>
+
+            </div>
+        </>
+    );
+}