@firecms/collection_editor 3.0.1 → 3.1.0-canary.02232f4

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import { EntityCollection, FieldCaption, IconForView, SearchIconsView, singular, toSnakeCase, } from "@firecms/core";
+import React, { useMemo, useState } from "react";
+import { EntityCollection, FieldCaption, getFieldConfig, IconForView, Property, PropertyConfigBadge, resolveCollection, SearchIconsView, singular, toSnakeCase, unslugify, useAuthController, useCustomizationController, useTranslation } from "@firecms/core";
 import {
     BooleanSwitchWithLabel,
     Chip,
@@ -8,11 +8,10 @@ import {
     Container,
     DebouncedTextField,
     Dialog,
-    ExpandablePanel,
+    HistoryIcon,
     IconButton,
     Select,
     SelectItem,
-    SettingsIcon,
     TextField,
     Tooltip,
     Typography,
@@ -22,16 +21,19 @@ import {
 import { Field, getIn, useFormex } from "@firecms/formex";
 import { useCollectionEditorController } from "../../useCollectionEditorController";
 import { LayoutModeSwitch } from "./LayoutModeSwitch";
+import { ViewModeSwitch } from "./ViewModeSwitch";
+import { KanbanConfigSection } from "./KanbanConfigSection";
+import { PropertyFormDialog } from "./PropertyEditView";
 
 export function CollectionDetailsForm({
-                                          isNewCollection,
-                                          reservedGroups,
-                                          existingPaths,
-                                          existingIds,
-                                          groups,
-                                          parentCollection,
-                                          children
-                                      }: {
+    isNewCollection,
+    reservedGroups,
+    existingPaths,
+    existingIds,
+    groups,
+    parentCollection,
+    expandKanban
+}: {
     isNewCollection: boolean,
     reservedGroups?: string[];
     existingPaths?: string[];
@@ -39,7 +41,7 @@ export function CollectionDetailsForm({
     groups: string[] | null;
     parentCollection?: EntityCollection;
     parentCollectionIds?: string[];
-    children?: React.ReactNode;
+    expandKanban?: boolean;
 }) {
 
     const groupRef = React.useRef<HTMLInputElement>(null);
@@ -57,7 +59,37 @@ export function CollectionDetailsForm({
     const collectionEditor = useCollectionEditorController();
 
     const [iconDialogOpen, setIconDialogOpen] = useState(false);
-    const [advancedPanelExpanded, setAdvancedPanelExpanded] = useState(false);
+    const [orderPropertyDialogOpen, setOrderPropertyDialogOpen] = useState(false);
+
+    const { t } = useTranslation();
+
+    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 updateDatabaseId = (databaseId: string) => {
         setFieldValue("databaseId", databaseId ?? undefined);
@@ -83,13 +115,7 @@ export function CollectionDetailsForm({
 
     };
 
-    useEffect(() => {
-        if (errors.id) {
-            setAdvancedPanelExpanded(true);
-        }
-    }, [errors.id]);
-
-    const collectionIcon = <IconForView collectionOrView={values}/>;
+    const collectionIcon = <IconForView collectionOrView={values} />;
 
     const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
 
@@ -103,17 +129,6 @@ export function CollectionDetailsForm({
 
     const isSubcollection = !!parentCollection;
 
-    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";
-    }
-
     const showErrors = submitCount > 0;
 
     return (
@@ -124,13 +139,13 @@ export function CollectionDetailsForm({
                     <div
                         className="flex flex-row gap-2 py-2 pt-3 items-center">
                         <Typography variant={!isNewCollection ? "h5" : "h4"} className={"flex-grow"}>
-                            {isNewCollection ? "New collection" : `${values?.name} collection`}
+                            {isNewCollection ? t("new_collection") : t("collection_with_name", { name: values?.name || "" })}
                         </Typography>
                         <DefaultDatabaseField databaseId={values.databaseId}
-                                              onDatabaseIdUpdate={updateDatabaseId}/>
+                            onDatabaseIdUpdate={updateDatabaseId} />
 
-                        <Tooltip title={"Change icon"}
-                                 asChild={true}>
+                        <Tooltip title={t("change_icon")}
+                            asChild={true}>
                             <IconButton
                                 shape={"square"}
                                 onClick={() => setIconDialogOpen(true)}>
@@ -141,7 +156,7 @@ export function CollectionDetailsForm({
 
                     {parentCollection && <Chip colorScheme={"tealDarker"}>
                         <Typography variant={"caption"}>
-                            This is a subcollection of <b>{parentCollection.name}</b>
+                            {t("is_subcollection_of")} <b>{parentCollection.name}</b>
                         </Typography>
                     </Chip>}
 
@@ -152,26 +167,26 @@ export function CollectionDetailsForm({
                         <TextField
                             value={values.name ?? ""}
                             onChange={(e: any) => updateName(e.target.value)}
-                            label={"Name"}
+                            label={t("name")}
                             autoFocus={true}
                             required
-                            error={showErrors && Boolean(errors.name)}/>
+                            error={showErrors && Boolean(errors.name)} />
                         <FieldCaption error={touched.name && Boolean(errors.name)}>
-                            {touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)"}
+                            {touched.name && Boolean(errors.name) ? errors.name : t("collection_name_description")}
                         </FieldCaption>
                     </div>
 
                     <div className={cls("col-span-12 ")}>
                         <Field name={"path"}
-                               as={DebouncedTextField}
-                               label={"Path"}
-                               required
-                               error={showErrors && Boolean(errors.path)}/>
+                            as={DebouncedTextField}
+                            label={t("path")}
+                            required
+                            error={showErrors && Boolean(errors.path)} />
 
                         <FieldCaption error={touched.path && Boolean(errors.path)}>
                             {touched.path && Boolean(errors.path)
                                 ? errors.path
-                                : isSubcollection ? "Relative path to the parent (no need to include the parent path)" : "Path that this collection is stored in, in the database"}
+                                : isSubcollection ? t("relative_path_to_parent") : t("path_in_database")}
                         </FieldCaption>
 
                     </div>
@@ -214,236 +229,174 @@ export function CollectionDetailsForm({
                     <LayoutModeSwitch
                         className={"col-span-12"}
                         value={values.openEntityMode ?? "side_panel"}
-                        onChange={(value) => setFieldValue("openEntityMode", value)}/>
+                        onChange={(value) => setFieldValue("openEntityMode", value)} />
 
-                    <div className={"col-span-12"}>
-                        <BooleanSwitchWithLabel
-                            position={"start"}
-                            size={"large"}
-                            allowIndeterminate={true}
-                            label={values.history === null || values.history === undefined ? "Document history revisions enabled if enabled globally" : (
-                                values.history ? "Document history revisions ENABLED" : "Document history revisions NOT enabled"
-                            )}
-                            onValueChange={(v) => setFieldValue("history", v)}
-                            value={values.history === undefined ? null : values.history}
-                        />
-                        <FieldCaption>
-                            When enabled, each document in this collection will have a history of changes.
-                            This is useful for auditing purposes. The data is stored in a subcollection of the document
-                            in your database, called <b>__history</b>.
-                        </FieldCaption>
-                    </div>
+                    <ViewModeSwitch
+                        className={"col-span-12"}
+                        value={values.defaultViewMode ?? "table"}
+                        onChange={(value) => setFieldValue("defaultViewMode", value)} />
 
+                    <KanbanConfigSection className={"col-span-12"} forceExpanded={expandKanban} />
 
-                    <div className={"col-span-12 mt-8"}>
-                        <ExpandablePanel
-                            expanded={advancedPanelExpanded}
-                            onExpandedChange={setAdvancedPanelExpanded}
-                            title={
-                                <div className="flex flex-row text-surface-500">
-                                    <SettingsIcon/>
-                                    <Typography variant={"subtitle2"}
-                                                className="ml-2">
-                                        Advanced
-                                    </Typography>
-                                </div>}
-                            initiallyExpanded={false}>
-                            <div className={"grid grid-cols-12 gap-4 p-4"}>
-
-                                <div className={"col-span-12"}>
-                                    <Field name={"id"}
-                                           as={DebouncedTextField}
-                                           disabled={!isNewCollection}
-                                           label={"Collection id"}
-                                           error={showErrors && Boolean(errors.id)}/>
-                                    <FieldCaption error={touched.id && Boolean(errors.id)}>
-                                        {touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection. Typically the same as the path."}
-                                    </FieldCaption>
-                                </div>
-
-                                <div className={"col-span-12"}>
-                                    <TextField
-                                        error={showErrors && Boolean(errors.singularName)}
-                                        name={"singularName"}
-                                        aria-describedby={"singularName-helper"}
-                                        onChange={(e) => {
-                                            setFieldTouched("singularName", true);
-                                            return handleChange(e);
-                                        }}
-                                        value={values.singularName ?? ""}
-                                        label={"Singular name"}/>
-                                    <FieldCaption error={showErrors && Boolean(errors.singularName)}>
-                                        {showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities"}
-                                    </FieldCaption>
-                                </div>
-                                <div className={"col-span-12"}>
-                                    <TextField
-                                        error={showErrors && Boolean(errors.sideDialogWidth)}
-                                        name={"sideDialogWidth"}
-                                        type={"number"}
-                                        aria-describedby={"sideDialogWidth-helper"}
-                                        onChange={(e) => {
-                                            setFieldTouched("sideDialogWidth", true);
-                                            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 error={showErrors && Boolean(errors.singularName)}>
-                                        {showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define the width (in pixels) of entities side dialog. Default is 768px"}
-                                    </FieldCaption>
-                                </div>
-                                <div className={"col-span-12"}>
-                                    <TextField
-                                        error={showErrors && Boolean(errors.description)}
-                                        name="description"
-                                        value={values.description ?? ""}
-                                        onChange={handleChange}
-                                        multiline
-                                        minRows={2}
-                                        aria-describedby="description-helper-text"
-                                        label="Description"
-                                    />
-                                    <FieldCaption error={showErrors && Boolean(errors.description)}>
-                                        {showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown"}
-                                    </FieldCaption>
-                                </div>
+                    <div className={"col-span-12 mt-4"}>
+                        {(() => {
+                            // Check if orderProperty references a non-existent property
+                            const orderPropertyMissing = Boolean(values.orderProperty) &&
+                                !numberProperties.some(p => p.key === values.orderProperty);
 
-                                <div className={"col-span-12"}>
+                            return (
+                                <>
                                     <Select
-                                        name="defaultSize"
+                                        key={`order-select-${numberProperties.length}`}
+                                        name="orderProperty"
+                                        label={t("order_property")}
                                         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>
-
-                                <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 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>
-
-                                <div className={"col-span-12"}>
-                                    <Select
-                                        name="customId"
-                                        label="Document IDs generation"
-                                        position={"item-aligned"}
-                                        size={"large"}
-                                        fullWidth={true}
-                                        disabled={customIdValue === "code_defined"}
+                                        disabled={numberProperties.length === 0}
+                                        error={orderPropertyMissing}
+                                        value={values.orderProperty ?? ""}
                                         onValueChange={(v) => {
-                                            if (v === "code_defined")
-                                                throw new Error("This should not happen");
-                                            setFieldValue("customId", v);
+                                            setFieldValue("orderProperty", v || undefined);
                                         }}
-                                        value={customIdValue ?? ""}
-                                        renderValue={(value: any) => {
-                                            if (value === "code_defined")
-                                                return "Code defined";
-                                            else if (value === "true")
-                                                return "Users must define an ID";
-                                            else if (value === "optional")
-                                                return "Users can define an ID, but it is not required";
-                                            else
-                                                return "Document ID is generated automatically";
+                                        renderValue={(value) => {
+                                            if (orderPropertyMissing) {
+                                                return <span className="text-red-500">{value} ({t("not_found_suffix")})</span>;
+                                            }
+                                            const prop = numberProperties.find(p => p.key === value);
+                                            if (!prop) return t("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}
                                     >
-                                        <SelectItem value={"false"}>
-                                            Document ID is generated automatically
-                                        </SelectItem>
-                                        <SelectItem value={"true"}>
-                                            Users must define an ID
-                                        </SelectItem>
-                                        <SelectItem value={"optional"}>
-                                            Users can define an ID, but it is not required
-                                        </SelectItem>
+                                        {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 || t("number")}
+                                                            </Typography>
+                                                        </div>
+                                                    </div>
+                                                </SelectItem>
+                                            );
+                                        })}
                                     </Select>
-                                </div>
-                                <div className={"col-span-12 mt-4"}>
-                                    <BooleanSwitchWithLabel
-                                        position={"start"}
-                                        size={"large"}
-                                        label="Collection group"
-                                        onValueChange={(v) => setFieldValue("collectionGroup", v)}
-                                        value={values.collectionGroup ?? false}
-                                    />
-                                    <FieldCaption>
-                                        A collection group consists of all collections with the same path. This allows
-                                        you
-                                        to query over multiple collections at once.
+                                    <FieldCaption error={orderPropertyMissing}>
+                                        {orderPropertyMissing
+                                            ? t("order_property_not_found", { property: values.orderProperty ?? "" })
+                                            : numberProperties.length === 0
+                                                ? t("no_number_properties")
+                                                : t("order_property_description")
+                                        }
                                     </FieldCaption>
-                                </div>
-                                <div className={"col-span-12"}>
-                                    <BooleanSwitchWithLabel
-                                        position={"start"}
-                                        size={"large"}
-                                        label="Enable text search for this collection"
-                                        onValueChange={(v) => setFieldValue("textSearchEnabled", v)}
-                                        value={values.textSearchEnabled ?? false}
+                                </>
+                            );
+                        })()}
+                        {(() => {
+                            // Check if orderProperty references a non-existent property
+                            const orderPropertyMissing = Boolean(values.orderProperty) &&
+                                !numberProperties.some(p => p.key === values.orderProperty);
+                            const showCreateButton = !values.orderProperty || orderPropertyMissing;
+
+                            // Pre-fill with missing property id or default "__order"
+                            const dialogPropertyKey = orderPropertyMissing && values.orderProperty
+                                ? values.orderProperty
+                                : "__order";
+                            const dialogPropertyName = orderPropertyMissing && values.orderProperty
+                                ? unslugify(values.orderProperty)
+                                : t("order_label");
+
+                            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)}
+                                    >
+                                        {t("create_property", { property: dialogPropertyKey })}
+                                    </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);
+                                        }}
                                     />
-                                    <FieldCaption>
-                                        Allow text search for this collection. If you have not specified a text search
-                                        delegate, this will use the built-in local text search. This is not recommended
-                                        for large collections, as it may incur in performance and cost issues.
-                                    </FieldCaption>
-                                </div>
+                                </>
+                            );
+                        })()}
+                    </div>
 
+                    <div className={"col-span-12"}>
+                        <BooleanSwitchWithLabel
+                            position={"start"}
+                            size={"large"}
+                            allowIndeterminate={true}
+                            label={<span className="flex items-center gap-2"><HistoryIcon size={"smallest"} />{values.history === null || values.history === undefined ? t("doc_history_global") : (
+                                values.history ? t("doc_history_enabled") : t("doc_history_not_enabled")
+                            )}</span>}
+                            onValueChange={(v) => setFieldValue("history", v)}
+                            value={values.history === undefined ? null : values.history}
+                        />
+                        <FieldCaption>
+                            {t("doc_history_description")}
+                        </FieldCaption>
+                    </div>
 
-                            </div>
-                        </ExpandablePanel>
 
-                        {children}
+                    <div className={"col-span-12 mt-8"}>
 
                     </div>
 
                 </div>
 
-                <div style={{ height: "52px" }}/>
+                <div style={{ height: "52px" }} />
 
                 <Dialog
                     open={iconDialogOpen}
@@ -453,10 +406,10 @@ export function CollectionDetailsForm({
                 >
                     <div className={"p-4 overflow-auto min-h-[200px]"}>
                         <SearchIconsView selectedIcon={typeof values.icon === "string" ? values.icon : undefined}
-                                         onIconSelected={(icon: string) => {
-                                             setIconDialogOpen(false);
-                                             setFieldValue("icon", icon);
-                                         }}/>
+                            onIconSelected={(icon: string) => {
+                                setIconDialogOpen(false);
+                                setFieldValue("icon", icon);
+                            }} />
                     </div>
 
                 </Dialog>
@@ -467,18 +420,20 @@ export function CollectionDetailsForm({
 }
 
 function DefaultDatabaseField({
-                                  databaseId,
-                                  onDatabaseIdUpdate
-                              }: { databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }) {
+    databaseId,
+    onDatabaseIdUpdate
+}: { databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }) {
+
+    const { t } = useTranslation();
 
-    return <Tooltip title={"Database ID"}
-                    side={"top"}
-                    align={"start"}>
+    return <Tooltip title={t("database_id")}
+        side={"top"}
+        align={"start"}>
         <TextField size={"small"}
-                   invisible={true}
-                   inputClassName={"text-end"}
-                   value={databaseId ?? ""}
-                   onChange={(e: any) => onDatabaseIdUpdate(e.target.value)}
-                   placeholder={"(default)"}></TextField>
+            invisible={true}
+            inputClassName={"text-end"}
+            value={databaseId ?? ""}
+            onChange={(e: any) => onDatabaseIdUpdate(e.target.value)}
+            placeholder={t("default_text")}></TextField>
     </Tooltip>
 }