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

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

@@ -0,0 +1,160 @@
+import React from "react";
+import { Field, getIn, useFormex } from "@firecms/formex";
+import { FieldCaption, IconForView, NumberProperty, StringProperty, useNavigationController } from "@firecms/core";
+import { CircularProgress, Select, SelectGroup, SelectItem, Typography, } from "@firecms/ui";
+
+export function ReferencePropertyField({
+                                           existing,
+                                           multiple,
+                                           disabled,
+                                           showErrors
+                                       }: {
+    existing: boolean,
+    multiple: boolean,
+    disabled: boolean,
+    showErrors: boolean
+}) {
+
+    const {
+        values,
+        handleChange,
+        errors,
+    } = useFormex<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 name={pathPath}
+                       pathPath={pathPath}
+                       type="select"
+                       disabled={(existing && Boolean(pathValue)) || disabled}
+                       value={pathValue}
+                       error={pathError}
+                       handleChange={handleChange}
+                       as={CollectionsSelect}/>
+
+            </div>
+
+        </>
+    );
+}
+
+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>
+
+            <FieldCaption>
+                You can only edit the reference collection upon field
+                creation.
+            </FieldCaption>
+        </>
+    );
+}

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

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import { ArrayProperty, getFieldConfig, Property, PropertyConfig } from "@firecms/core";
+import { Button, Paper, Typography } from "@firecms/ui";
+import { Field, getIn, useFormex } from "@firecms/formex";
+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
+    } = useFormex<ArrayProperty>();
+
+    const [propertyDialogOpen, setPropertyDialogOpen] = useState(false);
+    const ofProperty = getIn(values, "of");
+    const ofPropertyError = getIn(touched, "of") && getIn(errors, "of");
+
+    const onPropertyChanged = ({ 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,215 @@
+import React from "react";
+import {
+    Button,
+    DebouncedTextField,
+    ExpandablePanel,
+    FileUploadIcon,
+    MultiSelect,
+    MultiSelectItem,
+    Typography
+} from "@firecms/ui";
+
+import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
+import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
+import { ArrayPropertyValidation } from "./validation/ArrayPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { SwitchControl } from "../SwitchControl";
+
+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
+    } = useFormex();
+
+    const baseStoragePath = multiple ? "of.storage" : "storage";
+    const acceptedFiles = `${baseStoragePath}.acceptedFiles`;
+
+    const metadata = `${baseStoragePath}.metadata`;
+    const fileName = `${baseStoragePath}.fileName`;
+    const maxSize = `${baseStoragePath}.maxSize`;
+    const storagePath = `${baseStoragePath}.storagePath`;
+    const storeUrl = `${baseStoragePath}.storeUrl`;
+
+    const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
+    const storagePathValue = getIn(values, storagePath) ?? "/";
+    const maxSizeValue = getIn(values, maxSize);
+
+    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
+                                className={"w-full"}
+                                placeholder={"All file types allowed"}
+                                disabled={disabled}
+                                name={acceptedFiles}
+                                value={fileTypesValue ?? []}
+                                onValueChange={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(", ");
+                                }}>
+
+                                {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={"text"}
+                                                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 name={storeUrl}
+                                   type="checkbox">
+                                {({
+                                      field,
+                                      form
+                                  }: FormexFieldProps) => {
+                                    return <SwitchControl
+                                        label={"Save URL instead of storage path"}
+                                        disabled={existing || disabled}
+                                        form={form}
+                                        field={field}/>
+                                }}
+                            </Field>
+
+                            <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 className={"col-span-12"}>
+                            <DebouncedTextField name={maxSize}
+                                                type={"number"}
+                                                label={"Max size (in bytes)"}
+                                                size={"small"}
+                                                value={maxSizeValue !== undefined && maxSizeValue !== null ? maxSizeValue.toString() : ""}
+                                                onChange={(e) => {
+                                                    const value = e.target.value;
+                                                    if (value === "") setFieldValue(maxSize, undefined);
+                                                    else setFieldValue(maxSize, parseInt(value));
+                                                }}
+                            />
+                        </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,70 @@
+import React from "react";
+import { StringPropertyValidation } from "./validation/StringPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { getIn, useFormex } from "@firecms/formex";
+
+import { TextField } from "@firecms/ui";
+
+export function StringPropertyField({
+                                        widgetId,
+                                        disabled,
+                                        showErrors
+                                    }: {
+    widgetId: "text_field" | "multiline" | "email";
+    disabled: boolean;
+    showErrors: boolean;
+}) {
+
+    const { values, setFieldValue } = useFormex();
+
+    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 === "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>
+        </>
+    );
+}

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

@@ -0,0 +1,89 @@
+import React from "react";
+import { StringPropertyValidation } from "./validation/StringPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { getIn, useFormex } from "@firecms/formex";
+
+import { Select, SelectItem, TextField } from "@firecms/ui";
+
+export function UrlPropertyField({
+                                     disabled,
+                                     showErrors
+                                 }: {
+    disabled: boolean;
+    showErrors: boolean;
+}) {
+
+    const { values, setFieldValue } = useFormex();
+
+    const urlValue = getIn(values, "url");
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+
+                <Select
+                    disabled={disabled}
+                    position={"item-aligned"}
+                    onValueChange={(value: string) => {
+                        if (value === "[NONE]")
+                            setFieldValue("url", true);
+                        else
+                            setFieldValue("url", value);
+                    }}
+                    label={"Preview type"}
+                    renderValue={(value: string) => {
+                        switch (value) {
+                            case "image":
+                                return "Image";
+                            case "video":
+                                return "Video";
+                            case "audio":
+                                return "Audio";
+                            default:
+                                return "Display URL";
+                        }
+                    }}
+                    value={urlValue ?? "[NONE]"}>
+                    <SelectItem value={"[NONE]"}>
+                        Display URL
+                    </SelectItem>
+                    <SelectItem value={"image"}>
+                        Image
+                    </SelectItem>
+                    <SelectItem value={"video"}>
+                        Video
+                    </SelectItem>
+                    <SelectItem value={"audio"}>
+                        Audio
+                    </SelectItem>
+                </Select>
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+
+                    <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>
+        </>
+    );
+}