@firecms/collection_editor 3.0.0 → 3.1.0-canary.1df3b2c

package/src/ui/collection_editor/DisplaySettingsForm.tsx

@@ -0,0 +1,333 @@
+import React, { useMemo, useState } from "react";
+import {
+    EntityCollection,
+    FieldCaption,
+    getFieldConfig,
+    Property,
+    PropertyConfigBadge,
+    resolveCollection,
+    unslugify,
+    useAuthController,
+    useCustomizationController
+} from "@firecms/core";
+import {
+    BooleanSwitchWithLabel,
+    CloseIcon,
+    Container,
+    IconButton,
+    Select,
+    SelectItem,
+    TextField,
+    Typography
+} from "@firecms/ui";
+
+import { useFormex } from "@firecms/formex";
+import { LayoutModeSwitch } from "./LayoutModeSwitch";
+import { ViewModeSwitch } from "./ViewModeSwitch";
+import { KanbanConfigSection } from "./KanbanConfigSection";
+import { PropertyFormDialog } from "./PropertyEditView";
+
+export function DisplaySettingsForm({
+    expandKanban
+}: {
+    expandKanban?: boolean;
+}) {
+
+    const {
+        values,
+        setFieldValue,
+        handleChange,
+        submitCount
+    } = useFormex<EntityCollection>();
+
+    const [orderPropertyDialogOpen, setOrderPropertyDialogOpen] = useState(false);
+
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+
+    // Resolve collection to get properties for order property select
+    const resolvedCollection = useMemo(() => resolveCollection({
+        collection: values,
+        path: values.path,
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
+    }), [values, customizationController.propertyConfigs, authController]);
+
+    // Get number properties (for orderProperty)
+    const numberProperties = useMemo(() => {
+        const result: { key: string; label: string; property: Property; }[] = [];
+        if (!resolvedCollection.properties) return result;
+
+        Object.entries(resolvedCollection.properties).forEach(([key, prop]) => {
+            if (prop && 'dataType' in prop && prop.dataType === 'number') {
+                result.push({
+                    key,
+                    label: (prop as Property).name || key,
+                    property: prop as Property
+                });
+            }
+        });
+        return result;
+    }, [resolvedCollection.properties]);
+
+    const showErrors = submitCount > 0;
+
+    // Document ID generation value
+    let customIdValue: "true" | "false" | "optional" | "code_defined" | undefined;
+    if (typeof values.customId === "object") {
+        customIdValue = "code_defined";
+    } else if (values.customId === true) {
+        customIdValue = "true";
+    } else if (values.customId === false) {
+        customIdValue = "false";
+    } else if (values.customId === "optional") {
+        customIdValue = "optional";
+    }
+
+    return (
+        <div className={"overflow-auto my-auto"}>
+            <Container maxWidth={"4xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
+
+                <div>
+                    <Typography variant={"h5"} className={"flex-grow"}>
+                        Display settings
+                    </Typography>
+                </div>
+
+                <div className={"grid grid-cols-12 gap-4"}>
+
+                    {/* Layout Mode (Side dialog vs Full screen) */}
+                    <LayoutModeSwitch
+                        className={"col-span-12"}
+                        value={values.openEntityMode ?? "side_panel"}
+                        onChange={(value) => setFieldValue("openEntityMode", value)} />
+
+                    {/* View Mode (Table/Cards/Kanban) */}
+                    <ViewModeSwitch
+                        className={"col-span-12"}
+                        value={values.defaultViewMode ?? "table"}
+                        onChange={(value) => setFieldValue("defaultViewMode", value)} />
+
+                    {/* Kanban Column Property */}
+                    <KanbanConfigSection className={"col-span-12"} forceExpanded={expandKanban} />
+
+                    {/* Order Property */}
+                    <div className={"col-span-12 mt-4"}>
+                        {(() => {
+                            const orderPropertyMissing = Boolean(values.orderProperty) &&
+                                !numberProperties.some(p => p.key === values.orderProperty);
+
+                            return (
+                                <>
+                                    <Select
+                                        key={`order-select-${numberProperties.length}`}
+                                        name="orderProperty"
+                                        label="Order Property"
+                                        size={"large"}
+                                        fullWidth={true}
+                                        position={"item-aligned"}
+                                        disabled={numberProperties.length === 0}
+                                        error={orderPropertyMissing}
+                                        value={values.orderProperty ?? ""}
+                                        onValueChange={(v) => {
+                                            setFieldValue("orderProperty", v || undefined);
+                                        }}
+                                        renderValue={(value) => {
+                                            if (orderPropertyMissing) {
+                                                return <span className="text-red-500">{value} (not found)</span>;
+                                            }
+                                            const prop = numberProperties.find(p => p.key === value);
+                                            if (!prop) return "Select a property";
+                                            const fieldConfig = getFieldConfig(prop.property, customizationController.propertyConfigs);
+                                            return (
+                                                <div className="flex items-center gap-2">
+                                                    <PropertyConfigBadge propertyConfig={fieldConfig} />
+                                                    <span>{prop.label}</span>
+                                                </div>
+                                            );
+                                        }}
+                                        endAdornment={values.orderProperty ? (
+                                            <IconButton
+                                                size="small"
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    setFieldValue("orderProperty", undefined);
+                                                }}
+                                            >
+                                                <CloseIcon size="small" />
+                                            </IconButton>
+                                        ) : undefined}
+                                    >
+                                        {numberProperties.map((prop) => {
+                                            const fieldConfig = getFieldConfig(prop.property, customizationController.propertyConfigs);
+                                            return (
+                                                <SelectItem key={prop.key} value={prop.key}>
+                                                    <div className="flex items-center gap-3">
+                                                        <PropertyConfigBadge propertyConfig={fieldConfig} />
+                                                        <div>
+                                                            <div>{prop.label}</div>
+                                                            <Typography variant="caption" color="secondary">
+                                                                {fieldConfig?.name || "Number"}
+                                                            </Typography>
+                                                        </div>
+                                                    </div>
+                                                </SelectItem>
+                                            );
+                                        })}
+                                    </Select>
+                                    <FieldCaption error={orderPropertyMissing}>
+                                        {orderPropertyMissing
+                                            ? `Property "${values.orderProperty}" does not exist or is not a number property. Please select a valid property or clear the selection.`
+                                            : numberProperties.length === 0
+                                                ? "No number properties found. Add a number property to enable ordering."
+                                                : "Select a number property to persist the order of items"
+                                        }
+                                    </FieldCaption>
+                                </>
+                            );
+                        })()}
+                        {(() => {
+                            const orderPropertyMissing = Boolean(values.orderProperty) &&
+                                !numberProperties.some(p => p.key === values.orderProperty);
+                            const showCreateButton = !values.orderProperty || orderPropertyMissing;
+
+                            const dialogPropertyKey = orderPropertyMissing && values.orderProperty
+                                ? values.orderProperty
+                                : "__order";
+                            const dialogPropertyName = orderPropertyMissing && values.orderProperty
+                                ? unslugify(values.orderProperty)
+                                : "Order";
+
+                            if (!showCreateButton) return null;
+
+                            return (
+                                <>
+                                    <button
+                                        type="button"
+                                        className="ml-3.5 text-sm text-primary hover:text-primary-dark mt-2"
+                                        onClick={() => setOrderPropertyDialogOpen(true)}
+                                    >
+                                        + Create "{dialogPropertyKey}" property
+                                    </button>
+                                    <PropertyFormDialog
+                                        open={orderPropertyDialogOpen}
+                                        onCancel={() => setOrderPropertyDialogOpen(false)}
+                                        property={{
+                                            dataType: "number",
+                                            name: dialogPropertyName,
+                                            disabled: true,
+                                            hideFromCollection: true
+                                        }}
+                                        propertyKey={dialogPropertyKey}
+                                        existingProperty={false}
+                                        autoOpenTypeSelect={false}
+                                        autoUpdateId={false}
+                                        inArray={false}
+                                        allowDataInference={false}
+                                        propertyConfigs={customizationController.propertyConfigs}
+                                        collectionEditable={true}
+                                        existingPropertyKeys={Object.keys(values.properties ?? {})}
+                                        onPropertyChanged={({ id, property }) => {
+                                            const newProperties = {
+                                                ...values.properties,
+                                                [id!]: property
+                                            };
+                                            const newPropertiesOrder = [...(values.propertiesOrder ?? Object.keys(values.properties ?? {})), id];
+                                            setFieldValue("properties", newProperties);
+                                            setFieldValue("propertiesOrder", newPropertiesOrder);
+                                            setFieldValue("orderProperty", id);
+                                            setOrderPropertyDialogOpen(false);
+                                        }}
+                                    />
+                                </>
+                            );
+                        })()}
+                    </div>
+
+                    {/* Default row size */}
+                    <div className={"col-span-12"}>
+                        <Select
+                            name="defaultSize"
+                            size={"large"}
+                            fullWidth={true}
+                            label="Default row size"
+                            position={"item-aligned"}
+                            onChange={handleChange}
+                            value={values.defaultSize ?? ""}
+                            renderValue={(value: any) => value.toUpperCase()}
+                        >
+                            {["xs", "s", "m", "l", "xl"].map((value) => (
+                                <SelectItem
+                                    key={`size-select-${value}`}
+                                    value={value}>
+                                    {value.toUpperCase()}
+                                </SelectItem>
+                            ))}
+                        </Select>
+                    </div>
+
+                    {/* Side dialog width */}
+                    <div className={"col-span-12"}>
+                        <TextField
+                            name={"sideDialogWidth"}
+                            type={"number"}
+                            aria-describedby={"sideDialogWidth-helper"}
+                            onChange={(e) => {
+                                const value = e.target.value;
+                                if (!value) {
+                                    setFieldValue("sideDialogWidth", null);
+                                } else if (!isNaN(Number(value))) {
+                                    setFieldValue("sideDialogWidth", Number(value));
+                                }
+                            }}
+                            endAdornment={<IconButton
+                                size={"small"}
+                                onClick={() => {
+                                    setFieldValue("sideDialogWidth", null);
+                                }}
+                                disabled={!values.sideDialogWidth}>
+                                <CloseIcon size={"small"} />
+                            </IconButton>}
+                            value={values.sideDialogWidth ?? ""}
+                            label={"Side dialog width"} />
+                        <FieldCaption>
+                            Optionally define the width (in pixels) of entities side dialog. Default is 768px
+                        </FieldCaption>
+                    </div>
+
+                    {/* Inline editing */}
+                    <div className={"col-span-12"}>
+                        <BooleanSwitchWithLabel
+                            position={"start"}
+                            size={"large"}
+                            label={values.inlineEditing === undefined || values.inlineEditing ? "Data can be edited directly in the table view" : "Data can be edited only in the form view"}
+                            onValueChange={(v) => setFieldValue("inlineEditing", v)}
+                            value={values.inlineEditing === undefined ? true : values.inlineEditing}
+                        />
+                        <FieldCaption>
+                            Allow editing data directly in the table view, without opening the form view.
+                        </FieldCaption>
+                    </div>
+
+                    {/* Include JSON view */}
+                    <div className={"col-span-12"}>
+                        <BooleanSwitchWithLabel
+                            position={"start"}
+                            size={"large"}
+                            label={values.includeJsonView === undefined || values.includeJsonView ? "Include JSON view" : "Do not include JSON view"}
+                            onValueChange={(v) => setFieldValue("includeJsonView", v)}
+                            value={values.includeJsonView === undefined ? true : values.includeJsonView}
+                        />
+                        <FieldCaption>
+                            Include the JSON representation of the document.
+                        </FieldCaption>
+                    </div>
+
+                </div>
+
+                <div style={{ height: "52px" }} />
+
+            </Container>
+        </div>
+    );
+}

package/src/ui/collection_editor/EntityActionsEditTab.tsx

@@ -26,9 +26,11 @@ import { useFormex } from "@firecms/formex";
 import { EntityActionsSelectDialog } from "./EntityActionsSelectDialog";
 
 export function EntityActionsEditTab({
-                                         collection,
-                                     }: {
+    collection,
+    embedded = false
+}: {
     collection: PersistedCollection,
+    embedded?: boolean;
 }) {
 
     const { entityActions: contextEntityActions } = useCustomizationController();
@@ -47,103 +49,111 @@ export function EntityActionsEditTab({
     const hardCodedEntityActions = collection.entityActions?.filter((e): e is EntityAction<any> => typeof e !== "string") ?? [];
     const totalEntityActions = resolvedEntityActions.length + hardCodedEntityActions.length;
 
-    return (
-        <div className={"overflow-auto my-auto"}>
-            <Container maxWidth={"2xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
-                <div className={"flex  flex-col gap-16"}>
-                    <div className={"flex-grow  flex flex-col gap-4 items-start"}>
-                        <Typography variant={"h5"}>
-                            Custom actions
-                        </Typography>
-
-                        {totalEntityActions === 0 &&
-                            <Alert action={<Button variant="text"
-                                                   size={"small"}
-                                                   href={"https://firecms.co/docs/custom_actions"}
-                                                   component={"a"}
-                                                   rel="noopener noreferrer"
-                                                   target="_blank">More info</Button>}>
-                                Define your own custom actions by uploading them with the CLI.
-                            </Alert>
-                        }
-
-                        {<>
-                            <Paper className={"flex flex-col gap-4 p-2 w-full"}>
-                                <Table>
-                                    <TableBody>
-                                        {resolvedEntityActions.map((action) => (
-                                            <TableRow key={action.key}>
-                                                <TableCell
-                                                    align="left">
-                                                    <Typography variant={"subtitle2"} className={"flex-grow"}>
-                                                        {action.name}
-                                                    </Typography>
-                                                </TableCell>
-                                                <TableCell
-                                                    align="right">
-                                                    <Tooltip title={"Remove"}
-                                                             asChild={true}>
-                                                        <IconButton size="small"
-                                                                    onClick={(e) => {
-                                                                        e.preventDefault();
-                                                                        e.stopPropagation();
-                                                                        setActionToDelete(action.key);
-                                                                    }}
-                                                                    color="inherit">
-                                                            <DeleteIcon size={"small"}/>
-                                                        </IconButton>
-                                                    </Tooltip>
-                                                </TableCell>
-                                            </TableRow>
-                                        ))}
-                                        {hardCodedEntityActions.map((action) => (
-                                            <TableRow key={action.key}>
-                                                <TableCell
-                                                    align="left">
-                                                    <Typography variant={"subtitle2"} className={"flex-grow"}>
-                                                        {action.name}
-                                                    </Typography>
-                                                    <Typography variant={"caption"} className={"flex-grow"}>
-                                                        This action is defined in code with
-                                                        key <code>{action.key}</code>
-                                                    </Typography>
-                                                </TableCell>
-                                            </TableRow>
-                                        ))}
-                                    </TableBody>
-                                </Table>
-
-                                <Button
-                                    onClick={() => {
-                                        setAddEntityActionDialogOpen(true);
-                                    }}
-                                    variant={"text"}
-                                    startIcon={<AddIcon/>}>
-                                    Add custom entity action
-                                </Button>
-                            </Paper>
-
-                        </>}
-
-
-                    </div>
+    const content = (
+        <div className={"flex flex-col gap-16"}>
+            <div className={"flex-grow flex flex-col gap-4 items-start"}>
+                <Typography variant={"h6"}>
+                    Custom actions
+                </Typography>
+
+                {totalEntityActions === 0 &&
+                    <Alert action={<Button variant="text"
+                        size={"small"}
+                        href={"https://firecms.co/docs/custom_actions"}
+                        component={"a"}
+                        rel="noopener noreferrer"
+                        target="_blank">More info</Button>}>
+                        Define your own custom actions by uploading them with the CLI.
+                    </Alert>
+                }
+
+                {<>
+                    <Paper className={"flex flex-col gap-4 p-2 w-full"}>
+                        <Table>
+                            <TableBody>
+                                {resolvedEntityActions.map((action) => (
+                                    <TableRow key={action.key}>
+                                        <TableCell
+                                            align="left">
+                                            <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                                {action.name}
+                                            </Typography>
+                                        </TableCell>
+                                        <TableCell
+                                            align="right">
+                                            <Tooltip title={"Remove"}
+                                                asChild={true}>
+                                                <IconButton size="small"
+                                                    onClick={(e) => {
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                        setActionToDelete(action.key);
+                                                    }}
+                                                    color="inherit">
+                                                    <DeleteIcon size={"small"} />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                                {hardCodedEntityActions.map((action) => (
+                                    <TableRow key={action.key}>
+                                        <TableCell
+                                            align="left">
+                                            <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                                {action.name}
+                                            </Typography>
+                                            <Typography variant={"caption"} className={"flex-grow"}>
+                                                This action is defined in code with
+                                                key <code>{action.key}</code>
+                                            </Typography>
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+
+                        <Button
+                            onClick={() => {
+                                setAddEntityActionDialogOpen(true);
+                            }}
+                            startIcon={<AddIcon />}>
+                            Add custom entity action
+                        </Button>
+                    </Paper>
+
+                </>}
+
+
+            </div>
 
-                </div>
-            </Container>
+        </div>
+    );
 
-            <div style={{ height: "52px" }}/>
+    return (
+        <>
+            {embedded ? (
+                content
+            ) : (
+                <div className={"overflow-auto my-auto"}>
+                    <Container maxWidth={"2xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
+                        {content}
+                    </Container>
+                    <div style={{ height: "52px" }} />
+                </div>
+            )}
 
             {actionToDelete &&
                 <ConfirmationDialog open={Boolean(actionToDelete)}
-                                    onAccept={() => {
-                                        setFieldValue("entityActions", values.entityActions?.filter(e => e !== actionToDelete));
-                                        setActionToDelete(undefined);
-                                    }}
-                                    onCancel={() => setActionToDelete(undefined)}
-                                    title={<>Remove this action?</>}
-                                    body={<>This will <b>not
-                                        delete any data</b>, only
-                                        the action in the CMS</>}/>}
+                    onAccept={() => {
+                        setFieldValue("entityActions", values.entityActions?.filter(e => e !== actionToDelete));
+                        setActionToDelete(undefined);
+                    }}
+                    onCancel={() => setActionToDelete(undefined)}
+                    title={<>Remove this action?</>}
+                    body={<>This will <b>not
+                        delete any data</b>, only
+                        the action in the CMS</>} />}
 
             <EntityActionsSelectDialog
                 open={addEntityActionDialogOpen}
@@ -157,7 +167,7 @@ export function EntityActionsEditTab({
                         setFieldValue("entityActions", value);
                     }
                     setAddEntityActionDialogOpen(false);
-                }}/>
-        </div>
+                }} />
+        </>
     );
 }

package/src/ui/collection_editor/EntityActionsSelectDialog.tsx

@@ -3,9 +3,9 @@ import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography }
 import React from "react";
 
 export function EntityActionsSelectDialog({
-                                                  open,
-                                                  onClose
-                                              }: { open: boolean, onClose: (selectedActionKey?: string) => void }) {
+                                              open,
+                                              onClose
+                                          }: { open: boolean, onClose: (selectedActionKey?: string) => void }) {
     const {
         entityActions
     } = useCustomizationController();
@@ -27,15 +27,14 @@ export function EntityActionsSelectDialog({
             })}
             {(entityActions ?? []).length === 0 &&
                 <Typography variant={"body2"}>
-                    No custom actions defined. Define your custom actions in the customization settings, before using this
+                    No custom actions defined. Define your custom actions in the customization settings, before using
+                    this
                     dialog.
                 </Typography>
             }
         </DialogContent>
         <DialogActions>
-            <Button variant={"outlined"}
-                    color={"primary"}
-                    onClick={() => onClose()}>Cancel</Button>
+            <Button onClick={() => onClose()}>Cancel</Button>
         </DialogActions>
     </Dialog>
 }

package/src/ui/collection_editor/EntityCustomViewsSelectDialog.tsx

@@ -33,9 +33,7 @@ export function EntityCustomViewsSelectDialog({
             }
         </DialogContent>
         <DialogActions>
-            <Button variant={"outlined"}
-                    color={"primary"}
-                    onClick={() => onClose()}>Cancel</Button>
+            <Button onClick={() => onClose()}>Cancel</Button>
         </DialogActions>
     </Dialog>
 }