@firecms/collection_editor 3.0.0-alpha.8 → 3.0.0-alpha.80

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

@@ -0,0 +1,135 @@
+import React, { useCallback, useState } from "react";
+import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
+import { getIn, useFormikContext } from "formik";
+import { PropertyFormDialog } from "../PropertyEditView";
+import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "../util";
+import { PropertyTree } from "../PropertyTree";
+import { ArrayProperty, Property, PropertyConfig } from "@firecms/core";
+
+export function BlockPropertyField({ disabled, getData, allowDataInference, propertyConfigs, collectionEditable }: {
+    disabled: boolean;
+    getData?: () => Promise<object[]>;
+    allowDataInference: boolean;
+    propertyConfigs: Record<string, PropertyConfig>,
+    collectionEditable: boolean;
+}) {
+
+    const {
+        values,
+        setFieldValue
+    } = useFormikContext<ArrayProperty>();
+
+    const [propertyDialogOpen, setPropertyDialogOpen] = useState<boolean>(false);
+    const [selectedPropertyKey, setSelectedPropertyKey] = useState<string | undefined>();
+    const [selectedPropertyNamespace, setSelectedPropertyNamespace] = useState<string | undefined>();
+
+    const onPropertyCreated = useCallback(({
+                                               id,
+                                               property
+                                           }: { id?: string, property: Property }) => {
+        if (!id)
+            throw Error();
+        setFieldValue("oneOf.properties", {
+            ...(values.oneOf?.properties ?? {}),
+            [id]: property
+        }, false);
+        setFieldValue("oneOf.propertiesOrder", [...(values.oneOf?.propertiesOrder ?? Object.keys(values.oneOf?.properties ?? {})), id], false);
+        setPropertyDialogOpen(false);
+    }, [values.oneOf?.properties, values.oneOf?.propertiesOrder]);
+
+    const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
+    const selectedProperty = selectedPropertyFullId ? getIn(values.oneOf?.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
+
+    const deleteProperty = useCallback((propertyKey?: string, namespace?: string) => {
+        const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
+        if (!fullId)
+            throw Error("collection editor miss config");
+
+        setFieldValue(`oneOf.${idToPropertiesPath(fullId)}`, undefined, false);
+        const propertiesOrderPath = `oneOf.${namespaceToPropertiesOrderPath(namespace)}`;
+        const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath);
+        setFieldValue(propertiesOrderPath, currentPropertiesOrder.filter((p) => p !== propertyKey), false);
+
+        setPropertyDialogOpen(false);
+        setSelectedPropertyKey(undefined);
+        setSelectedPropertyNamespace(undefined);
+    }, [setFieldValue, values]);
+
+    const addChildButton = <Button
+        autoFocus
+        color="primary"
+
+        onClick={() => setPropertyDialogOpen(true)}
+        startIcon={<AddIcon/>}
+    >
+        Add property to {values.name ?? "this block"}
+    </Button>;
+
+    const onPropertyMove = useCallback((propertiesOrder: string[], namespace?: string) => {
+        setFieldValue(`oneOf.${namespaceToPropertiesOrderPath(namespace)}`, propertiesOrder, false);
+    }, []);
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+                <div className={"flex justify-between items-end mt-8 mb-4"}>
+                    <Typography variant={"subtitle2"}>Properties in this
+                        block</Typography>
+                    {addChildButton}
+                </div>
+                <Paper className="p-2 pl-8">
+
+                    <PropertyTree
+                        properties={values.oneOf?.properties ?? {}}
+                        propertiesOrder={values.oneOf?.propertiesOrder}
+                        errors={{}}
+                        collectionEditable={collectionEditable}
+                        onPropertyClick={disabled
+                            ? undefined
+                            : (propertyKey, namespace) => {
+                                setSelectedPropertyKey(propertyKey);
+                                setSelectedPropertyNamespace(namespace);
+                                setPropertyDialogOpen(true);
+                            }}
+                        onPropertyMove={disabled
+                            ? undefined
+                            : onPropertyMove}/>
+
+                    {!disabled && !values.oneOf?.propertiesOrder?.length &&
+                        <div className="h-full flex items-center justify-center p-4">
+                            Add the first property to this block
+                        </div>}
+
+                </Paper>
+            </div>
+
+            {!disabled && <PropertyFormDialog
+                inArray={false}
+                forceShowErrors={false}
+                open={propertyDialogOpen}
+                getData={getData}
+                allowDataInference={allowDataInference}
+                onCancel={() => {
+                    setPropertyDialogOpen(false);
+                    setSelectedPropertyKey(undefined);
+                    setSelectedPropertyNamespace(undefined);
+                }}
+                onOkClicked={() => {
+                    setPropertyDialogOpen(false);
+                    setSelectedPropertyKey(undefined);
+                    setSelectedPropertyNamespace(undefined);
+                }}
+                collectionEditable={collectionEditable}
+                onDelete={deleteProperty}
+                propertyKey={selectedPropertyKey}
+                propertyNamespace={selectedPropertyNamespace}
+                property={selectedProperty}
+                existingProperty={Boolean(selectedPropertyKey)}
+                autoUpdateId={!selectedPropertyKey}
+                autoOpenTypeSelect={!selectedPropertyKey}
+                onPropertyChanged={onPropertyCreated}
+                existingPropertyKeys={selectedPropertyKey ? undefined : values.oneOf?.propertiesOrder}
+                propertyConfigs={propertyConfigs}/>}
+
+        </>);
+}

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { FastField, getIn, useFormikContext } from "formik";
+
+import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { SwitchControl } from "@firecms/core";
+
+export function BooleanPropertyField({ disabled }: {
+    disabled: boolean;
+}) {
+    const { values } = useFormikContext();
+    const defaultValue = getIn(values, "defaultValue");
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+                    <GeneralPropertyValidation disabled={disabled}/>
+                </ValidationPanel>
+
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <FastField type="checkbox"
+                           name={"defaultValue"}
+                           label={defaultValue === null || defaultValue === undefined ? "Default value not set" : ("Default value is " + defaultValue.toString())}
+                           disabled={disabled}
+                           allowIndeterminate={true}
+                           component={SwitchControl}/>
+
+            </div>
+        </>
+    );
+}

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

@@ -0,0 +1,137 @@
+import { Field, getIn, useFormikContext } from "formik";
+import { DebouncedTextField } from "@firecms/ui";
+import { PropertyWithId } from "../PropertyEditView";
+import React from "react";
+import { FieldHelperView } from "./FieldHelperView";
+import { toSnakeCase, unslugify } from "@firecms/core";
+
+type CommonPropertyFieldsProps = {
+    showErrors: boolean,
+    disabledId: boolean,
+    existingPropertyKeys?: string[];
+    disabled: boolean;
+    isNewProperty: boolean;
+    autoUpdateId: boolean;
+};
+
+export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPropertyFieldsProps>(
+    function CommonPropertyFields({
+                                      showErrors,
+                                      disabledId,
+                                      existingPropertyKeys,
+                                      disabled,
+                                      autoUpdateId,
+                                      isNewProperty
+                                  }, ref) {
+
+        const {
+            errors,
+            values,
+            setFieldValue,
+            setFieldTouched,
+            touched
+        } = useFormikContext<PropertyWithId>();
+
+        const name = "name";
+        const nameError = showErrors && getIn(errors, name);
+
+        const id = "id";
+        const idError = showErrors && getIn(errors, id);
+
+        const description = "description";
+        const descriptionError = showErrors && getIn(errors, description);
+
+        return (
+            <div className={"flex flex-col gap-2 col-span-12"}>
+
+                <div>
+                    <Field
+                        inputRef={ref}
+                        as={DebouncedTextField}
+                        value={values[name]}
+                        onChange={(e: any) => {
+                            const newNameValue = e.target.value;
+                            setFieldValue(name, newNameValue);
+                            setFieldTouched(name, true, true);
+                            const idTouched = getIn(touched, id);
+                            if (!idTouched && autoUpdateId) {
+                                setFieldValue(id, newNameValue ? toSnakeCase(newNameValue) : "")
+                            }
+                        }}
+                        style={{ fontSize: 20 }}
+                        validate={validateName}
+                        placeholder={"Field name"}
+                        required
+                        disabled={disabled}
+                        error={Boolean(nameError)}/>
+
+                    <FieldHelperView error={Boolean(nameError)}>
+                        {nameError}
+                    </FieldHelperView>
+                </div>
+
+                <div>
+                    <Field
+                        as={DebouncedTextField}
+                        label={"ID"}
+                        value={values[id]}
+                        onChange={(e: any) => {
+                            const newIdValue = e.target.value;
+                            setFieldValue(id, newIdValue);
+                            setFieldTouched(id, true, true);
+                            const nameTouched = getIn(touched, name);
+                            if (!nameTouched && autoUpdateId) {
+                                setFieldValue(name, newIdValue ? unslugify(newIdValue) : "")
+                            }
+                        }}
+                        validate={() => validateId(values[id], existingPropertyKeys)}
+                        disabled={disabledId || disabled}
+                        required
+                        size="small"
+                        error={Boolean(idError)}/>
+                    <FieldHelperView error={Boolean(idError)}>
+                        {idError}
+                    </FieldHelperView>
+                </div>
+
+                <div>
+                    <Field name={description}
+                           as={DebouncedTextField}
+                           label={"Description"}
+                           disabled={disabled}
+                           error={Boolean(descriptionError)}/>
+                    <FieldHelperView error={Boolean(descriptionError)}>
+                        {descriptionError}
+                    </FieldHelperView>
+                </div>
+
+            </div>
+        );
+
+    }
+);
+
+const idRegEx = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+
+function validateId(value?: string, existingPropertyKeys?: string[]) {
+
+    let error;
+    if (!value) {
+        error = "You must specify an id for the field";
+    }
+    if (value && !value.match(idRegEx)) {
+        error = "The id can only contain letters, numbers and underscores (_), and not start with a number";
+    }
+    if (value && existingPropertyKeys && existingPropertyKeys.includes(value)) {
+        error = "There is another field with this ID already";
+    }
+    return error;
+}
+
+function validateName(value: string) {
+    let error;
+    if (!value) {
+        error = "You must specify a title for the field";
+    }
+    return error;
+}

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

@@ -0,0 +1,87 @@
+import React from "react";
+import { getIn, useFormikContext } from "formik";
+import { NumberProperty, StringProperty } from "@firecms/core";
+import { Select, SelectItem } from "@firecms/ui";
+import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { FieldHelperView } from "./FieldHelperView";
+
+export function DateTimePropertyField({ disabled }: {
+    disabled: boolean;
+}) {
+
+    const {
+        values,
+        errors,
+        touched,
+        setFieldValue
+    } = useFormikContext<StringProperty | NumberProperty>();
+
+    const modePath = "mode";
+    const modeValue: string | undefined = getIn(values, modePath);
+    const modeError: string | undefined = getIn(touched, modePath) && getIn(errors, modePath);
+
+    const autoValuePath = "autoValue";
+    const autoValueValue: string | undefined = getIn(values, autoValuePath);
+    const autoValueError: string | undefined = getIn(touched, autoValuePath) && getIn(errors, autoValuePath);
+
+    return (
+        <>
+            <div className={"flex flex-col col-span-12"}>
+                <Select name={modePath}
+                        value={modeValue ?? "date"}
+                        error={Boolean(modeError)}
+                        onValueChange={(v) => setFieldValue(modePath, v)}
+                        label={"Mode"}
+                        renderValue={(v) => {
+                            switch (v) {
+                                case "date_time":
+                                    return "Date/Time";
+                                case "date":
+                                    return "Date";
+                                default:
+                                    return "";
+                            }
+                        }}
+                        disabled={disabled}>
+                    <SelectItem value={"date_time"}> Date/Time </SelectItem>
+                    <SelectItem value={"date"}> Date </SelectItem>
+                </Select>
+                <FieldHelperView error={Boolean(modeError)}>
+                    {modeError}
+                </FieldHelperView>
+
+                <Select name={autoValuePath}
+                        disabled={disabled}
+                        value={autoValueValue ?? ""}
+                        onValueChange={(v) => setFieldValue(autoValuePath, v)}
+                        renderValue={(v) => {
+                            switch (v) {
+                                case "on_create":
+                                    return "On create";
+                                case "on_update":
+                                    return "On any update";
+                                default:
+                                    return "None";
+                            }
+                        }}
+                        error={Boolean(autoValueError)}
+                        label={"Automatic value"}>
+                    <SelectItem value={""}> None </SelectItem>
+                    <SelectItem value={"on_create"}> On create </SelectItem>
+                    <SelectItem value={"on_update"}> On any update </SelectItem>
+                </Select>
+                <FieldHelperView error={Boolean(autoValueError)}>
+                    {autoValueError ?? "Update this field automatically when creating or updating the entity"}
+                </FieldHelperView>
+
+            </div>
+
+            <div className={"col-span-12"}>
+                <ValidationPanel>
+                    <GeneralPropertyValidation disabled={disabled}/>
+                </ValidationPanel>
+            </div>
+        </>
+    );
+}

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

@@ -0,0 +1,117 @@
+import React, { useMemo } from "react";
+import { getIn, useFormikContext } from "formik";
+import { EnumValueConfig, resolveEnumValues, useSnackbarController } from "@firecms/core";
+import { Select, SelectItem } from "@firecms/ui";
+import { EnumForm } from "../EnumForm";
+import { StringPropertyValidation } from "./validation/StringPropertyValidation";
+import { ArrayPropertyValidation } from "./validation/ArrayPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { PropertyWithId } from "../PropertyEditView";
+
+export function EnumPropertyField({
+                                      multiselect,
+                                      updateIds,
+                                      disabled,
+                                      showErrors,
+                                      allowDataInference,
+                                      getData
+                                  }: {
+    multiselect: boolean;
+    updateIds: boolean;
+    disabled: boolean;
+    showErrors: boolean;
+    allowDataInference?: boolean;
+    getData?: () => Promise<object[]>;
+}) {
+
+    const {
+        values,
+        handleChange,
+        errors,
+        touched,
+        setFieldError,
+        setFieldValue
+    } = useFormikContext<PropertyWithId>();
+
+    const snackbarContext = useSnackbarController();
+
+    const enumValuesPath = multiselect ? "of.enumValues" : "enumValues";
+
+    const defaultValue = getIn(values, "defaultValue");
+
+    const valuesEnumValues = getIn(values, enumValuesPath);
+    const enumValues: EnumValueConfig[] = useMemo(() => {
+        if (!valuesEnumValues || typeof valuesEnumValues === "boolean")
+            return [] as EnumValueConfig[];
+        return resolveEnumValues(valuesEnumValues) ?? [] as EnumValueConfig[];
+    }, [valuesEnumValues]);
+
+    const onValuesChanged = (value: EnumValueConfig[]) => {
+        if (!values)
+            return;
+        setFieldValue(enumValuesPath, value);
+        if (!multiselect) {
+            const enumIds = value.filter(v => Boolean(v?.id)).map((v: any) => v.id);
+            if (defaultValue && !enumIds.includes(defaultValue)) {
+                setFieldValue("defaultValue", undefined);
+                snackbarContext.open({
+                    type: "warning",
+                    message: "Default value was cleared"
+                })
+            }
+        }
+    };
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+                <EnumForm enumValues={enumValues}
+                          updateIds={updateIds}
+                          disabled={disabled}
+                          allowDataInference={allowDataInference}
+                          onError={(hasError) => {
+                              setFieldError(enumValuesPath, hasError ? "" : undefined);
+                          }}
+                          getData={getData
+                              ? () => getData()
+                                  .then(res => res.map(d => values.id && getIn(d, values.id)).filter(Boolean))
+                              : undefined}
+                          onValuesChanged={onValuesChanged}/>
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+                    {!multiselect &&
+                        <StringPropertyValidation disabled={disabled}
+                                                  showErrors={showErrors}/>}
+                    {multiselect &&
+                        <ArrayPropertyValidation disabled={disabled}/>}
+                </ValidationPanel>
+
+            </div>
+
+            {!multiselect && <div className={"col-span-12"}>
+
+                <Select
+                    disabled={disabled}
+                    position={"item-aligned"}
+                    onValueChange={(value: string) => {
+                        setFieldValue("defaultValue", value);
+                    }}
+                    label={"Default value"}
+                    value={defaultValue ?? ""}>
+                    {enumValues
+                        .filter((enumValue) => Boolean(enumValue?.id))
+                        .map((enumValue) => (
+                            <SelectItem key={enumValue.id}
+                                        value={enumValue.id?.toString()}>
+                                {enumValue.label}
+                            </SelectItem>
+                        ))}
+                </Select>
+
+            </div>}
+        </>
+    );
+}

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

@@ -0,0 +1,13 @@
+import { Typography } from "@firecms/ui";
+
+export function FieldHelperView({
+                                    error,
+                                    children
+                                }: { error?: boolean, children?: React.ReactNode }) {
+    if (!children) return null;
+    return (
+        <Typography variant={"caption"} color={error ? "error" : "secondary"} className={"ml-3.5 mt-0.5"}>
+            {children}
+        </Typography>
+    );
+}

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
+
+export function KeyValuePropertyField({ disabled }: {
+    disabled: boolean;
+}) {
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+                    <GeneralPropertyValidation disabled={disabled}/>
+                </ValidationPanel>
+
+            </div>
+        </>
+    );
+}