@firecms/collection_editor 3.0.0-canary.28 → 3.0.0-canary.280

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -3,9 +3,8 @@ import equal from "react-fast-compare"
 
 import { Formex, FormexController, getIn, useCreateFormex } from "@firecms/formex";
 import {
+    ConfirmationDialog,
     DEFAULT_FIELD_CONFIGS,
-    DeleteConfirmationDialog,
-    PropertyConfigId,
     getFieldConfig,
     getFieldId,
     isPropertyBuilder,
@@ -14,18 +13,25 @@ import {
     Property,
     PropertyConfig,
     PropertyConfigBadge,
+    PropertyConfigId,
 } from "@firecms/core";
 import {
     Button,
-    cn,
+    Card,
+    cls,
     DeleteIcon,
     Dialog,
     DialogActions,
     DialogContent,
+    DialogTitle,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundMixin,
     IconButton,
     InfoLabel,
-    Select,
-    Typography
+    Tooltip,
+    Typography,
+    WarningIcon
 } from "@firecms/ui";
 import { EnumPropertyField } from "./properties/EnumPropertyField";
 import { StoragePropertyField } from "./properties/StoragePropertyField";
@@ -42,9 +48,9 @@ import { AdvancedPropertyValidation } from "./properties/advanced/AdvancedProper
 import { editableProperty } from "../../utils/entities";
 import { KeyValuePropertyField } from "./properties/KeyValuePropertyField";
 import { updatePropertyFromWidget } from "./utils/update_property_for_widget";
-import { PropertySelectItem } from "./PropertySelectItem";
 import { UrlPropertyField } from "./properties/UrlPropertyField";
 import { supportedFields } from "./utils/supported_fields";
+import { MarkdownPropertyField } from "./properties/MarkdownPropertyField";
 
 export type PropertyWithId = Property & {
     id?: string
@@ -68,6 +74,7 @@ export type PropertyFormProps = {
     property?: Property;
     onPropertyChanged?: (params: OnPropertyChangedParams) => void;
     onPropertyChangedImmediate?: boolean;
+    onDismiss?: () => void;
     onDelete?: (id?: string, namespace?: string) => void;
     onError?: (id: string, namespace?: string, error?: Record<string, any>) => void;
     initialErrors?: Record<string, any>;
@@ -95,6 +102,7 @@ export const PropertyForm = React.memo(
             property,
             onPropertyChanged,
             onPropertyChangedImmediate = true,
+            onDismiss,
             onDelete,
             onError,
             initialErrors,
@@ -134,6 +142,7 @@ export const PropertyForm = React.memo(
         };
 
         const formexController = useCreateFormex<PropertyWithId>({
+            debugId: "PROPERTY_FORM",
             initialValues: property
                 ? { id: propertyKey, ...property } as PropertyWithId
                 : initialValue,
@@ -141,14 +150,16 @@ export const PropertyForm = React.memo(
             validateOnChange: true,
             validateOnInitialRender: true,
             onSubmit: (newPropertyWithId, controller) => {
-                console.debug("onSubmit", newPropertyWithId);
                 const {
                     id,
                     ...property
                 } = newPropertyWithId;
                 doOnPropertyChanged({
                     id,
-                    property: { ...property, editable: property.editable ?? true }
+                    property: {
+                        ...property,
+                        editable: property.editable ?? true
+                    }
                 });
                 if (!existingProperty)
                     controller.resetForm({ values: initialValue });
@@ -209,6 +220,7 @@ export const PropertyForm = React.memo(
                 includeIdAndTitle={includeIdAndName}
                 propertyNamespace={propertyNamespace}
                 onError={onError}
+                onDismiss={onDismiss}
                 showErrors={forceShowErrors || formexController.submitCount > 0}
                 existing={existingProperty}
                 autoUpdateId={autoUpdateId}
@@ -228,6 +240,7 @@ export const PropertyForm = React.memo(
         a.includeIdAndName === b.includeIdAndName &&
         a.autoOpenTypeSelect === b.autoOpenTypeSelect &&
         a.autoUpdateId === b.autoUpdateId &&
+        a.existingPropertyKeys === b.existingPropertyKeys &&
         a.existingProperty === b.existingProperty
 );
 
@@ -261,8 +274,11 @@ export function PropertyFormDialog({
                   e.stopPropagation();
                   formexRef.current?.handleSubmit(e)
               }}>
+            <DialogTitle hidden>Property edit view</DialogTitle>
             <DialogContent>
+
                 <PropertyForm {...formProps}
+                              onDismiss={onCancel}
                               onPropertyChanged={(params) => {
                                   onPropertyChanged?.(params);
                                   onOkClicked?.();
@@ -278,6 +294,7 @@ export function PropertyFormDialog({
 
                 {onCancel && <Button
                     variant={"text"}
+                    color={"primary"}
                     onClick={() => {
                         onCancel();
                         formexRef.current?.resetForm();
@@ -307,6 +324,7 @@ function PropertyEditFormFields({
                                     onPropertyChanged,
                                     onDelete,
                                     propertyNamespace,
+                                    onDismiss,
                                     onError,
                                     showErrors,
                                     disabled,
@@ -321,6 +339,7 @@ function PropertyEditFormFields({
     autoUpdateId?: boolean;
     autoOpenTypeSelect: boolean;
     propertyNamespace?: string;
+    onDismiss?: () => void;
     onPropertyChanged?: (params: OnPropertyChangedParams) => void;
     onDelete?: (id?: string, namespace?: string) => void;
     onError?: (id: string, namespace?: string, error?: Record<string, any>) => void;
@@ -337,12 +356,6 @@ function PropertyEditFormFields({
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
     const [selectedFieldConfigId, setSelectedFieldConfigId] = useState<string | undefined>(values?.dataType ? getFieldId(values) : undefined);
 
-    const allSupportedFields = Object.entries(supportedFields).concat(Object.entries(propertyConfigs));
-
-    const displayedWidgets = inArray
-        ? allSupportedFields.filter(([_, propertyConfig]) => !isPropertyBuilder(propertyConfig.property) && propertyConfig.property?.dataType !== "array")
-        : allSupportedFields;
-
     const deferredValues = useDeferredValue(values);
     const nameFieldRef = useRef<HTMLInputElement>(null);
 
@@ -367,13 +380,13 @@ function PropertyEditFormFields({
                 }
             }
         }
-    }, [deferredValues, includeIdAndTitle, onPropertyChanged, propertyNamespace]);
+    }, [deferredValues, includeIdAndTitle, propertyNamespace]);
 
     useEffect(() => {
         if (values?.id && onError) {
             onError(values?.id, propertyNamespace, errors);
         }
-    }, [errors, onError, propertyNamespace, values?.id]);
+    }, [errors, propertyNamespace, values?.id]);
 
     const onWidgetSelectChanged = (newSelectedWidgetId: PropertyConfigId) => {
         setSelectedFieldConfigId(newSelectedWidgetId);
@@ -387,7 +400,7 @@ function PropertyEditFormFields({
     let childComponent;
     if (selectedFieldConfigId === "text_field" ||
         selectedFieldConfigId === "multiline" ||
-        selectedFieldConfigId === "markdown" ||
+        selectedFieldConfigId === "user_select" ||
         selectedFieldConfigId === "email") {
         childComponent =
             <StringPropertyField widgetId={selectedFieldConfigId}
@@ -397,6 +410,10 @@ function PropertyEditFormFields({
         childComponent =
             <UrlPropertyField disabled={disabled}
                               showErrors={showErrors}/>;
+    } else if (selectedFieldConfigId === "markdown") {
+        childComponent =
+            <MarkdownPropertyField disabled={disabled}
+                                   showErrors={showErrors}/>;
     } else if (selectedFieldConfigId === "select" ||
         selectedFieldConfigId === "number_select") {
         childComponent = <EnumPropertyField
@@ -445,6 +462,13 @@ function PropertyEditFormFields({
                                     existing={existing}
                                     multiple={false}
                                     disabled={disabled}/>;
+    } else if (selectedFieldConfigId === "reference_as_string") {
+        childComponent =
+            <ReferencePropertyField showErrors={showErrors}
+                                    existing={existing}
+                                    asString={true}
+                                    multiple={false}
+                                    disabled={disabled}/>;
     } else if (selectedFieldConfigId === "date_time") {
         childComponent = <DateTimePropertyField disabled={disabled}/>;
     } else if (selectedFieldConfigId === "multi_references") {
@@ -481,62 +505,22 @@ function PropertyEditFormFields({
 
             <div className="flex mt-2 justify-between">
                 <div className={"w-full flex flex-col gap-2"}>
-                    <Select
-                        // className={"w-full"}
-                        error={Boolean(selectedWidgetError)}
-                        value={selectedFieldConfigId ?? ""}
-                        placeholder={"Select a property widget"}
+                    <WidgetSelectView
+                        initialProperty={values}
+                        value={selectedFieldConfigId as PropertyConfigId}
+                        onValueChange={(value) => onWidgetSelectChanged(value as PropertyConfigId)}
                         open={selectOpen}
-                        onOpenChange={setSelectOpen}
-                        position={"item-aligned"}
-                        disabled={disabled}
-                        renderValue={(value) => {
-                            if (!value) {
-                                return <em>Select a property
-                                    widget</em>;
+                        onOpenChange={(open, hasValue) => {
+                            if (!hasValue) {
+                                onDismiss?.();
                             }
-                            const key = value as PropertyConfigId;
-                            const propertyConfig = DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key];
-                            const baseProperty = propertyConfig.property;
-                            const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, propertyConfigs) : undefined;
-                            const optionDisabled = isPropertyBuilder(baseProperty) || (existing && baseProperty.dataType !== values?.dataType);
-                            const computedFieldConfig = baseFieldConfig ? mergeDeep(baseFieldConfig, propertyConfig) : propertyConfig;
-                            return <div
-                                onClick={(e) => {
-                                    if (optionDisabled) {
-                                        e.stopPropagation();
-                                        e.preventDefault();
-                                    }
-                                }}
-                                className={cn(
-                                    "flex items-center",
-                                    optionDisabled ? "w-full pointer-events-none opacity-50" : "")}>
-                                <div className={"mr-8"}>
-                                    <PropertyConfigBadge propertyConfig={computedFieldConfig}/>
-                                </div>
-                                <div className={"flex flex-col items-start text-base text-left"}>
-                                    <div>{computedFieldConfig.name}</div>
-                                    <Typography variant={"caption"}
-                                                color={"disabled"}>
-                                        {optionDisabled ? "You can only switch to widgets that use the same data type" : computedFieldConfig.description}
-                                    </Typography>
-                                </div>
-                            </div>
+                            setSelectOpen(open);
                         }}
-                        onValueChange={(value) => {
-                            onWidgetSelectChanged(value as PropertyConfigId);
-                        }}>
-                        {displayedWidgets.map(([key, propertyConfig]) => {
-                            const baseProperty = propertyConfig.property;
-                            const optionDisabled = existing && !isPropertyBuilder(baseProperty) && baseProperty.dataType !== values?.dataType;
-                            return <PropertySelectItem
-                                key={key}
-                                value={key}
-                                optionDisabled={optionDisabled}
-                                propertyConfig={propertyConfig}
-                                existing={existing}/>;
-                        })}
-                    </Select>
+                        disabled={disabled}
+                        showError={Boolean(selectedWidgetError)}
+                        existing={existing}
+                        propertyConfigs={propertyConfigs}
+                        inArray={inArray}/>
 
                     {selectedWidgetError &&
                         <Typography variant="caption"
@@ -575,15 +559,15 @@ function PropertyEditFormFields({
             </div>
 
             {onDelete &&
-                <DeleteConfirmationDialog open={deleteDialogOpen}
-                                          onAccept={() => onDelete(values?.id, propertyNamespace)}
-                                          onCancel={() => setDeleteDialogOpen(false)}
-                                          title={<div>Delete this property?</div>}
-                                          body={
-                                              <div> This will <b>not delete any
-                                                  data</b>, only modify the
-                                                  collection.</div>
-                                          }/>}
+                <ConfirmationDialog open={deleteDialogOpen}
+                                    onAccept={() => onDelete(values?.id, propertyNamespace)}
+                                    onCancel={() => setDeleteDialogOpen(false)}
+                                    title={<div>Delete this property?</div>}
+                                    body={
+                                        <div> This will <b>not delete any
+                                            data</b>, only modify the
+                                            collection.</div>
+                                    }/>}
 
         </>
     );
@@ -613,3 +597,206 @@ function validateName(value: string) {
     }
     return error;
 }
+
+const WIDGET_TYPE_MAP: Record<PropertyConfigId, string> = {
+    text_field: "Text",
+    multiline: "Text",
+    markdown: "Text",
+    url: "Text",
+    email: "Text",
+    switch: "Boolean",
+    select: "Select",
+    multi_select: "Select",
+    user_select: "Select",
+    number_input: "Number",
+    number_select: "Select",
+    multi_number_select: "Select",
+    file_upload: "File",
+    multi_file_upload: "File",
+    reference: "Reference",
+    reference_as_string: "Text",
+    multi_references: "Reference",
+    date_time: "Date",
+    group: "Group",
+    key_value: "Group",
+    repeat: "Array",
+    custom_array: "Array",
+    block: "Group"
+};
+
+function WidgetSelectView({
+                              initialProperty,
+                              value,
+                              onValueChange,
+                              open,
+                              onOpenChange,
+                              disabled,
+                              showError,
+                              existing,
+                              propertyConfigs,
+                              inArray
+                          }: {
+    initialProperty?: PropertyWithId,
+    value?: PropertyConfigId,
+    onValueChange: (value: string) => void,
+    showError: boolean,
+    open: boolean,
+    onOpenChange: (open: boolean, hasValue: boolean) => void,
+    disabled: boolean,
+    existing: boolean,
+    propertyConfigs: Record<string, PropertyConfig>,
+    inArray?: boolean
+}) {
+
+    const allSupportedFields = Object.entries(supportedFields).concat(Object.entries(propertyConfigs));
+
+    const displayedWidgets = (inArray
+        ? allSupportedFields.filter(([_, propertyConfig]) => !isPropertyBuilder(propertyConfig.property) && propertyConfig.property?.dataType !== "array")
+        : allSupportedFields)
+        .map(([key, propertyConfig]) => ({
+            [key]: propertyConfig
+        }))
+        .reduce((a, b) => {
+            return {
+                ...a,
+                ...b
+            }
+        }, {});
+
+    const key = value;
+    const propertyConfig = key ? (DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key]) : undefined;
+    const baseProperty = propertyConfig?.property;
+    const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, propertyConfigs) : undefined;
+    const computedFieldConfig = baseFieldConfig && propertyConfig ? mergeDeep(baseFieldConfig, propertyConfig) : propertyConfig;
+
+    const groups: string[] = [...new Set(Object.keys(displayedWidgets).map(key => {
+        const group = WIDGET_TYPE_MAP[key as PropertyConfigId];
+        if (group) {
+            return group;
+        }
+        return "Custom/Other"
+    }))];
+
+    return <>
+        <div
+            onClick={() => {
+                if (!disabled) {
+                    onOpenChange(!open, Boolean(value));
+                }
+            }}
+            className={cls(
+                "select-none rounded-md text-sm p-4",
+                fieldBackgroundMixin,
+                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                "relative flex items-center",
+            )}>
+            {!value && <em>Select a property widget</em>}
+            {value && computedFieldConfig && <div
+                className={cls(
+                    "flex items-center")}>
+                <div className={"mr-8"}>
+                    <PropertyConfigBadge propertyConfig={computedFieldConfig}/>
+                </div>
+                <div className={"flex flex-col items-start text-base text-left"}>
+                    <div>{computedFieldConfig.name}</div>
+                    <Typography variant={"caption"}
+                                color={"secondary"}>
+                        {computedFieldConfig.description}
+                    </Typography>
+                </div>
+            </div>}
+        </div>
+        <Dialog open={open}
+                onOpenChange={(open) => onOpenChange(open, Boolean(value))}
+                maxWidth={"4xl"}>
+            <DialogTitle>
+                Select a property widget
+            </DialogTitle>
+            <DialogContent>
+                <div>
+                    {groups.map(group => {
+                        return <div key={group} className={"mt-4"}>
+                            <Typography variant={"label"}>{group}</Typography>
+                            <div className={"grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 mt-4"}>
+                                {Object.entries(displayedWidgets).map(([key, propertyConfig]) => {
+                                    const groupKey = WIDGET_TYPE_MAP[key as PropertyConfigId];
+                                    if (groupKey === group) {
+                                        return <WidgetSelectViewItem
+                                            key={key}
+                                            initialProperty={initialProperty}
+                                            onClick={() => {
+                                                onValueChange(key);
+                                                onOpenChange(false, true);
+                                            }}
+                                            propertyConfig={propertyConfig}
+                                            existing={existing}/>;
+                                    }
+                                    return null;
+                                })}
+                            </div>
+                        </div>;
+                    })}
+                    {/*{displayedWidgets.map(([key, propertyConfig]) => {*/}
+                    {/*    return <WidgetSelectViewItem*/}
+                    {/*        key={key}*/}
+                    {/*        initialProperty={initialProperty}*/}
+                    {/*        onClick={() => {*/}
+                    {/*            onValueChange(key);*/}
+                    {/*            onOpenChange(false);*/}
+                    {/*        }}*/}
+                    {/*        propertyConfig={propertyConfig}*/}
+                    {/*        existing={existing}/>;*/}
+                    {/*})}*/}
+                </div>
+            </DialogContent>
+        </Dialog>
+    </>;
+}
+
+export interface PropertySelectItemProps {
+    onClick?: () => void;
+    initialProperty?: PropertyWithId;
+    propertyConfig: PropertyConfig;
+    existing: boolean;
+}
+
+export function WidgetSelectViewItem({
+                                         onClick,
+                                         initialProperty,
+                                         // optionDisabled,
+                                         propertyConfig,
+                                         existing
+                                     }: PropertySelectItemProps) {
+    const baseProperty = propertyConfig.property;
+    const shouldWarnChangingDataType = existing && !isPropertyBuilder(baseProperty) && baseProperty.dataType !== initialProperty?.dataType;
+
+    return <Card
+        onClick={onClick}
+        className={"flex flex-row items-center px-4 py-2 m-1"}>
+        <div
+            className={cls(
+                "flex flex-row items-center text-base min-h-[48px]",
+            )}>
+            <div className={"mr-8"}>
+                <PropertyConfigBadge propertyConfig={propertyConfig} disabled={shouldWarnChangingDataType}/>
+            </div>
+            <div>
+                <div className={"flex flex-row gap-2 items-center"}>
+                    {shouldWarnChangingDataType && <Tooltip
+                        title={"This widget uses a different data type than the initially selected widget. This can cause errors with existing data."}>
+                        <WarningIcon size="smallest" className={"w-4"}/>
+                    </Tooltip>}
+                    <Typography
+                        color={shouldWarnChangingDataType ? "secondary" : undefined}>{propertyConfig.name}</Typography>
+                </div>
+
+                <Typography variant={"caption"}
+                            color={"secondary"}
+                            className={"max-w-sm"}>
+                    {propertyConfig.description}
+                </Typography>
+
+            </div>
+        </div>
+    </Card>
+}

package/src/ui/collection_editor/PropertyFieldPreview.tsx

@@ -1,9 +1,9 @@
 import {
     ErrorBoundary,
-    PropertyConfigBadge,
     getFieldConfig,
     isPropertyBuilder,
     Property,
+    PropertyConfigBadge,
     PropertyOrBuilder,
     useCustomizationController,
 } from "@firecms/core";
@@ -11,10 +11,10 @@ import {
     cardClickableMixin,
     cardMixin,
     cardSelectedMixin,
-    cn,
+    cls,
+    DoNotDisturbOnIcon,
     FunctionsIcon,
     Paper,
-    RemoveCircleIcon,
     Typography,
 } from "@firecms/ui";
 
@@ -45,9 +45,6 @@ export function PropertyFieldPreview({
         ? "border-red-500 dark:border-red-500 border-opacity-100 dark:border-opacity-100 ring-0 dark:ring-0"
         : (selected ? "border-primary" : "border-transparent");
 
-    if(hasError)
-    console.log("PropertyFieldPreview", property)
-
     return <ErrorBoundary>
         <div
             onClick={onClick}
@@ -56,7 +53,8 @@ export function PropertyFieldPreview({
                 <PropertyConfigBadge propertyConfig={propertyConfig}/>
             </div>
             <Paper
-                className={cn(
+                className={cls(
+                    "m-1",
                     "border",
                     "pl-2 w-full flex flex-row gap-4 items-center",
                     cardMixin,
@@ -133,13 +131,13 @@ export function NonEditablePropertyPreview({
             <div className={"relative m-4"}>
                 {propertyConfig && <PropertyConfigBadge propertyConfig={propertyConfig}/>}
                 {!propertyConfig && <div
-                    className={"h-8 w-8 p-1 rounded-full shadow text-white bg-gray-500"}>
+                    className={"h-8 w-8 p-1 rounded-full shadow text-white bg-surface-500"}>
                     <FunctionsIcon color={"inherit"} size={"medium"}/>
                 </div>}
-                <RemoveCircleIcon color={"disabled"} size={"small"} className={"absolute -right-2 -top-2"}/>
+                <DoNotDisturbOnIcon color={"disabled"} size={"small"} className={"absolute -right-2 -top-2"}/>
             </div>
             <Paper
-                className={cn(
+                className={cls(
                     "pl-2 w-full flex flex-row gap-4 items-center",
                     cardMixin,
                     onClick ? cardClickableMixin : "",