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

package/src/ui/collection_editor/properties/advanced/AdvancedPropertyValidation.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+import { Field, FormexFieldProps } from "@firecms/formex";
+import { SwitchControl } from "../../SwitchControl";
+
+export function AdvancedPropertyValidation({ disabled }: {
+    disabled: boolean
+}) {
+
+    const columnWidth = "columnWidth";
+    const hideFromCollection = "hideFromCollection";
+    const readOnly = "readOnly";
+
+    return (
+
+        <div className={"grid grid-cols-12 gap-2"}>
+            <div className={"col-span-12"}>
+                <Field type="checkbox" name={hideFromCollection}>
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={"Hide from collection"}
+                            disabled={disabled}
+                            form={form}
+                            tooltip={"Hide this field from the collection view. It will still be visible in the form view"}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+
+            <div className={"col-span-12"}>
+                <Field name={readOnly}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={"Read only"}
+                            disabled={disabled}
+                            tooltip={"Is this a read only field. Display only as a preview"}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+        </div>
+    );
+}

package/src/ui/collection_editor/properties/validation/ArrayPropertyValidation.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { getIn, useFormex } from "@firecms/formex";
+import { DebouncedTextField } from "@firecms/ui";
+import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
+
+export function ArrayPropertyValidation({
+                                            max = true,
+                                            min = true,
+                                            disabled
+                                        }: {
+    min?: boolean;
+    max?: boolean;
+    disabled: boolean;
+}) {
+
+    const {
+        values,
+        handleChange
+    } = useFormex();
+
+    const validationMin = "validation.min";
+    const validationMax = "validation.max";
+
+    return (
+        <div className={"grid grid-cols-12 gap-2"}>
+
+            <GeneralPropertyValidation disabled={disabled}/>
+
+            {min && <div className={"col-span-6"}>
+                <DebouncedTextField value={getIn(values, validationMin)}
+                                    disabled={disabled}
+                                    label={"Min length"}
+                                    name={validationMin}
+                                    type="number"
+                                    size="small"
+                                    onChange={handleChange}/>
+            </div>}
+            {max && <div className={"col-span-6"}>
+                <DebouncedTextField value={getIn(values, validationMax)}
+                                    disabled={disabled}
+                                    label={"Max length"}
+                                    name={validationMax}
+                                    type="number"
+                                    size="small"
+                                    onChange={handleChange}/>
+            </div>}
+        </div>
+    );
+}

package/src/ui/collection_editor/properties/validation/GeneralPropertyValidation.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+
+import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
+import { DebouncedTextField } from "@firecms/ui";
+import { SwitchControl } from "../../SwitchControl";
+
+export function GeneralPropertyValidation({ disabled }: {
+    required?: boolean;
+    disabled: boolean;
+}) {
+
+    const { values, handleChange } = useFormex();
+
+    const validationRequired = "validation.required";
+    const validationRequiredMessage = "validation.requiredMessage";
+    const validationUnique = "validation.unique";
+    const validationUniqueInArray = "validation.uniqueInArray";
+
+    return (
+        <>
+            <div className={"col-span-6"}>
+                <Field name={validationRequired}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            disabled={disabled}
+                            label={"Required"}
+                            tooltip={"You won't be able to save this entity if this value is not set"}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+
+            <div className={"col-span-6"}>
+
+                <Field name={validationUnique}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            disabled={disabled}
+                            label={"Unique"}
+                            tooltip={"There cannot be multiple entities with the same value"}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+
+            {getIn(values, validationRequired) && <div className={"col-span-12"}>
+                <DebouncedTextField
+                    disabled={disabled}
+                    value={getIn(values, validationRequiredMessage)}
+                    label={"Required message"}
+                    name={validationRequiredMessage}
+                    size="small"
+                    onChange={handleChange}/>
+            </div>}
+        </>
+    );
+}

package/src/ui/collection_editor/properties/validation/NumberPropertyValidation.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+
+import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
+import { DebouncedTextField } from "@firecms/ui";
+import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
+import { SwitchControl } from "../../SwitchControl";
+
+export function NumberPropertyValidation({ disabled }: {
+    disabled: boolean;
+}) {
+
+    const {
+        values,
+        handleChange
+    } = useFormex();
+
+    const validationMin = "validation.min";
+    const validationMax = "validation.max";
+    const validationLessThan = "validation.lessThan";
+    const validationMoreThan = "validation.moreThan";
+    const validationPositive = "validation.positive";
+    const validationNegative = "validation.negative";
+    const validationInteger = "validation.integer";
+
+    return (
+
+        <div className={"grid grid-cols-12 gap-2"}>
+            <GeneralPropertyValidation disabled={disabled}/>
+
+
+            <div className={"col-span-6"}>
+                <DebouncedTextField value={getIn(values, validationMin)}
+                                    label={"Min value"}
+                                    name={validationMin}
+                                    type="number"
+                                    size="small"
+                                    disabled={disabled}
+                                    onChange={handleChange}/>
+            </div>
+
+            <div className={"col-span-6"}>
+                <DebouncedTextField value={getIn(values, validationMax)}
+                                    label={"Max value"}
+                                    name={validationMax}
+                                    type="number"
+                                    size="small"
+
+                                    disabled={disabled}
+                                    onChange={handleChange}/>
+            </div>
+
+
+            <div className={"col-span-6"}>
+                <DebouncedTextField
+                    value={getIn(values, validationLessThan)}
+                    label={"Less than"}
+                    name={validationLessThan}
+                    type="number"
+                    size="small"
+
+                    disabled={disabled}
+                    onChange={handleChange}/>
+            </div>
+
+            <div className={"col-span-6"}>
+                <DebouncedTextField
+                    value={getIn(values, validationMoreThan)}
+                    label={"More than"}
+                    name={validationMoreThan}
+                    type="number"
+                    size="small"
+
+                    disabled={disabled}
+                    onChange={handleChange}/>
+            </div>
+
+            <div className={"col-span-4"}>
+                <Field name={validationPositive}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={"Positive value"}
+                            disabled={disabled}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+            <div className={"col-span-4"}>
+                <Field name={validationNegative}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={"Negative value"}
+                            disabled={disabled}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+            <div className={"col-span-4"}>
+                <Field name={validationInteger}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={"Integer value"}
+                            disabled={disabled}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+        </div>
+    );
+}

package/src/ui/collection_editor/properties/validation/StringPropertyValidation.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+
+import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
+import { FieldCaption, serializeRegExp } from "@firecms/core";
+import { DebouncedTextField, } from "@firecms/ui";
+import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
+import { SwitchControl } from "../../SwitchControl";
+
+export function StringPropertyValidation({
+                                             length,
+                                             lowercase,
+                                             matches,
+                                             max,
+                                             min,
+                                             trim,
+                                             uppercase,
+                                             disabled,
+                                             showErrors
+                                         }: {
+    length?: boolean;
+    min?: boolean;
+    max?: boolean;
+    trim?: boolean;
+    matches?: boolean;
+    lowercase?: boolean;
+    uppercase?: boolean;
+    disabled: boolean;
+    showErrors: boolean;
+}) {
+
+    const {
+        values,
+        handleChange,
+        errors
+    } = useFormex();
+
+    const validationLength = "validation.length";
+    const validationMin = "validation.min";
+    const validationMax = "validation.max";
+    const validationTrim = "validation.trim";
+    const validationMatches = "validation.matches";
+    const validationLowercase = "validation.lowercase";
+    const validationUppercase = "validation.uppercase";
+
+    const matchesError = getIn(errors, validationMatches);
+
+    const matchesValue = getIn(values, validationMatches);
+    const matchesStringValue = typeof matchesValue === "string" ? matchesValue : serializeRegExp(matchesValue);
+    return (
+        <div className={"grid grid-cols-12 gap-2"}>
+
+            <GeneralPropertyValidation disabled={disabled}/>
+
+            <div className={"grid grid-cols-12 gap-2 col-span-12"}>
+
+                {lowercase && <div className={"col-span-4"}>
+                    <Field name={validationLowercase}
+                           type="checkbox">
+                        {({ field, form }: FormexFieldProps) => {
+                            return <SwitchControl
+                                label={"Lowercase"}
+                                disabled={disabled}
+                                form={form}
+                                field={field}/>
+                        }}
+                    </Field>
+                </div>}
+
+                {uppercase && <div className={"col-span-4"}>
+                    <Field name={validationUppercase}
+                           type="checkbox">
+                        {({ field, form }: FormexFieldProps) => {
+                            return <SwitchControl
+                                label={"Uppercase"}
+                                disabled={disabled}
+                                form={form}
+                                field={field}/>
+                        }}
+                    </Field>
+                </div>}
+
+                {trim && <div className={"col-span-4"}>
+                    <Field name={validationTrim}
+                           type="checkbox">
+                        {({ field, form }: FormexFieldProps) => {
+                            return <SwitchControl
+                                label={"Trim"}
+                                disabled={disabled}
+                                form={form}
+                                field={field}/>
+                        }}
+                    </Field>
+                </div>}
+
+            </div>
+
+            <div className={"grid grid-cols-12 gap-2 col-span-12"}>
+                {length && <div className={"col-span-4"}>
+                    <DebouncedTextField
+                        value={getIn(values, validationLength)}
+                        label={"Exact length"}
+                        name={validationLength}
+                        type="number"
+                        size="small"
+
+                        disabled={disabled}
+                        onChange={handleChange}/>
+                </div>}
+
+                {min && <div className={"col-span-4"}>
+                    <DebouncedTextField value={getIn(values, validationMin)}
+                                        label={"Min length"}
+                                        name={validationMin}
+                                        type="number"
+                                        size="small"
+
+                                        disabled={disabled}
+                                        onChange={handleChange}/>
+                </div>}
+
+                {max && <div className={"col-span-4"}>
+                    <DebouncedTextField value={getIn(values, validationMax)}
+                                        label={"Max length"}
+                                        name={validationMax}
+                                        type="number"
+                                        size="small"
+
+                                        disabled={disabled}
+                                        onChange={handleChange}/>
+                </div>}
+
+            </div>
+
+            {matches && <div className={"col-span-12"}>
+                <Field name={validationMatches}
+                       as={DebouncedTextField}
+                       label={"Matches regex"}
+                       size="small"
+                       disabled={disabled}
+                       value={matchesStringValue}
+                       error={Boolean(matchesError)}/>
+                <FieldCaption error={Boolean(matchesError)}>
+                    {matchesError ? "Not a valid regexp" : "e.g. /^\\d+$/ for digits only"}
+                </FieldCaption>
+            </div>}
+
+        </div>
+    );
+
+}

package/src/ui/collection_editor/properties/validation/ValidationPanel.tsx

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from "react";
+
+import { ExpandablePanel, RuleIcon, Typography } from "@firecms/ui";
+
+export function ValidationPanel({
+                                    children
+                                }: PropsWithChildren<{}>) {
+
+    return (
+        <ExpandablePanel
+            initiallyExpanded={false}
+            asField={true}
+            innerClassName="p-4"
+            title={
+                <div className="flex flex-row text-gray-500">
+                    <RuleIcon/>
+                    <Typography variant={"subtitle2"}
+                                className="ml-2">
+                        Validation
+                    </Typography>
+                </div>
+            }>
+
+            {children}
+
+        </ExpandablePanel>
+    )
+}

package/src/ui/collection_editor/templates/blog_template.ts

@@ -0,0 +1,115 @@
+import { EntityCollection, makePropertiesEditable } from "@firecms/core";
+
+export const blogCollectionTemplate:EntityCollection = {
+    id: "blog",
+    path: "blog",
+    name: "Blog",
+    singularName: "Blog entry",
+    icon: "article",
+    description: "A collection of blog entries",
+    defaultSize: "l",
+    properties: makePropertiesEditable({
+        name: {
+            name: "Name",
+            validation: { required: true },
+            dataType: "string"
+        },
+        header_image: {
+            name: "Header image",
+            dataType: "string",
+            storage: {
+                storagePath: "images",
+                acceptedFiles: ["image/*"],
+                metadata: {
+                    cacheControl: "max-age=1000000"
+                }
+            }
+        },
+        content: {
+            name: "Content",
+            description: "Content blocks for the blog entry",
+            validation: { required: true },
+            dataType: "array",
+            oneOf: {
+                typeField: "type",
+                valueField: "value",
+                properties: {
+                    text: {
+                        dataType: "string",
+                        name: "Text",
+                        markdown: true
+                    },
+                    quote: {
+                        dataType: "string",
+                        name: "Quote",
+                        multiline: true
+                    },
+                    images: {
+                        name: "Images",
+                        dataType: "array",
+                        of: {
+                            dataType: "string",
+                            storage: {
+                                storagePath: "images",
+                                acceptedFiles: ["image/*"],
+                                metadata: {
+                                    cacheControl: "max-age=1000000"
+                                }
+                            }
+                        },
+                        description: "This fields allows uploading multiple images at once and reordering"
+                    },
+                    products: {
+                        name: "Products",
+                        dataType: "array",
+                        of: {
+                            dataType: "reference",
+                            path: "products",
+                            previewProperties: ["name", "main_image"]
+                        }
+                    }
+                },
+                propertiesOrder: ["text", "quote", "images", "products"]
+            }
+        },
+        created_on: {
+            name: "Created on",
+            dataType: "date",
+            autoValue: "on_create"
+        },
+        status: {
+            name: "Status",
+            validation: { required: true },
+            dataType: "string",
+            enumValues: {
+                published: {
+                    id: "published",
+                    label: "Published",
+                },
+                draft: "Draft"
+            },
+            defaultValue: "draft"
+        },
+        publish_date: {
+            name: "Publish date",
+            dataType: "date",
+            clearable: true
+        },
+        reviewed: {
+            name: "Reviewed",
+            dataType: "boolean"
+        },
+        tags: {
+            name: "Tags",
+            description: "Example of generic array",
+            dataType: "array",
+            of: {
+                dataType: "string",
+                previewAsTag: true
+            }
+        }
+    }),
+    initialFilter: {
+        status: ["==", "published"]
+    }
+};