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

package/src/ui/HomePageEditorCollectionAction.tsx

@@ -1,12 +1,12 @@
 import {
-    DeleteConfirmationDialog,
+    ConfirmationDialog,
     PluginHomePageActionsProps,
     useAuthController,
     useSnackbarController
 } from "@firecms/core";
 import { DeleteIcon, IconButton, Menu, MenuItem, MoreVertIcon, SettingsIcon, } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { useCollectionsConfigController } from "../useCollectionsConfigController";
 
 export function HomePageEditorCollectionAction({
@@ -14,6 +14,7 @@ export function HomePageEditorCollectionAction({
                                                    collection
                                                }: PluginHomePageActionsProps) {
 
+
     const snackbarController = useSnackbarController();
     const authController = useAuthController();
     const configController = useCollectionsConfigController();
@@ -24,13 +25,16 @@ export function HomePageEditorCollectionAction({
         collection
     });
 
-    const onEditCollectionClicked = useCallback(() => {
-        collectionEditorController?.editCollection({ id: collection.id, parentCollectionIds: [] });
-    }, [collectionEditorController, path]);
+    const onEditCollectionClicked = () => {
+        collectionEditorController?.editCollection({
+            id: collection.id,
+            parentCollectionIds: []
+        });
+    };
 
     const [deleteRequested, setDeleteRequested] = useState(false);
 
-    const deleteCollection = useCallback(() => {
+    const deleteCollection = () => {
         configController?.deleteCollection({ id: collection.id }).then(() => {
             setDeleteRequested(false);
             snackbarController.open({
@@ -38,22 +42,24 @@ export function HomePageEditorCollectionAction({
                 type: "success"
             });
         });
-    }, [path, configController]);
+    };
 
     return <>
 
         <div>
             {permissions.deleteCollections &&
                 <Menu
-                    trigger={<IconButton>
+                    trigger={<IconButton size={"small"}>
                         <MoreVertIcon size={"small"}/>
                     </IconButton>}
                 >
-                    <MenuItem onClick={(event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        setDeleteRequested(true);
-                    }}>
+                    <MenuItem
+                        dense={true}
+                        onClick={(event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            setDeleteRequested(true);
+                        }}>
                         <DeleteIcon/>
                         Delete
                     </MenuItem>
@@ -64,6 +70,7 @@ export function HomePageEditorCollectionAction({
 
             {permissions.editCollections &&
                 <IconButton
+                    size={"small"}
                     onClick={(event) => {
                         onEditCollectionClicked();
                     }}>
@@ -71,7 +78,7 @@ export function HomePageEditorCollectionAction({
                 </IconButton>}
         </div>
 
-        <DeleteConfirmationDialog
+        <ConfirmationDialog
             open={deleteRequested}
             onAccept={deleteCollection}
             onCancel={() => setDeleteRequested(false)}

package/src/ui/NewCollectionButton.tsx

@@ -3,7 +3,7 @@ import { useCollectionEditorController } from "../useCollectionEditorController"
 
 export function NewCollectionButton() {
     const collectionEditorController = useCollectionEditorController();
-    return <div className={"bg-gray-50 dark:bg-gray-900 min-w-fit rounded"}>
+    return <div className={"bg-surface-50 dark:bg-surface-900 min-w-fit rounded"}>
         <Button className={"min-w-fit"}
                 variant={"outlined"}
                 onClick={() => collectionEditorController.createCollection({

package/src/ui/NewCollectionCard.tsx

@@ -1,5 +1,5 @@
 import { PluginHomePageAdditionalCardsProps, useAuthController } from "@firecms/core";
-import { AddIcon, Card, cn, Typography } from "@firecms/ui";
+import { AddIcon, Card, cls, Typography } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 
 export function NewCollectionCard({
@@ -20,7 +20,7 @@ export function NewCollectionCard({
         : true;
 
     return (
-        <Card className={cn("h-full p-4 min-h-[124px]")}
+        <Card className={cls("h-full p-4 min-h-[124px]")}
               onClick={collectionEditorController && canCreateCollections
                   ? () => collectionEditorController.createCollection({
                       initialValues: group ? { group } : undefined,
@@ -31,7 +31,7 @@ export function NewCollectionCard({
                   : undefined}>
 
             <div
-                className="flex flex-col items-start h-full w-full items-center justify-center h-full w-full flex-grow flex-col">
+                className="flex items-center justify-center h-full w-full flex-grow flex-col">
                 <AddIcon color="primary" size={"large"}/>
                 <Typography color="primary"
                             variant={"caption"}

package/src/ui/PropertyAddColumnComponent.tsx

@@ -1,4 +1,4 @@
-import { getDefaultPropertiesOrder, useAuthController } from "@firecms/core";
+import { EntityTableController, getDefaultPropertiesOrder, useAuthController } from "@firecms/core";
 import { AddIcon, Tooltip } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 import { PersistedCollection } from "../types/persisted_collection";
@@ -6,11 +6,13 @@ import { PersistedCollection } from "../types/persisted_collection";
 export function PropertyAddColumnComponent({
                                                fullPath,
                                                parentCollectionIds,
-                                               collection
+                                               collection,
+                                               tableController
                                            }: {
     fullPath: string,
     parentCollectionIds: string[],
     collection: PersistedCollection;
+    tableController: EntityTableController;
 }) {
 
     const authController = useAuthController();
@@ -23,16 +25,19 @@ export function PropertyAddColumnComponent({
         : true;
 
     return (
-        <Tooltip title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
+        <Tooltip
+            asChild={true}
+            title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
             <div
-                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-gray-100 bg-opacity-40 hover:bg-gray-100 dark:bg-gray-950 dark:bg-opacity-40 dark:hover:bg-gray-950"}
-                // className={onHover ? "bg-white dark:bg-gray-950" : undefined}
+                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-surface-100 bg-opacity-40 hover:bg-surface-100 dark:bg-surface-950 dark:bg-opacity-40 dark:hover:bg-surface-950"}
+                // className={onHover ? "bg-white dark:bg-surface-950" : undefined}
                 onClick={() => {
                     collectionEditorController.editProperty({
                         editedCollectionId: collection.id,
                         parentCollectionIds,
                         currentPropertiesOrder: getDefaultPropertiesOrder(collection),
-                        collection
+                        collection,
+                        existingEntities: tableController.data
                     });
                 }}>
                 <AddIcon color={"inherit"}/>

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { EntityCollection, FieldCaption, IconForView, SearchIconsView, singular, toSnakeCase, } from "@firecms/core";
 import {
-    Autocomplete,
-    AutocompleteItem,
     BooleanSwitchWithLabel,
     Chip,
-    cn,
+    CloseIcon,
+    cls,
     Container,
     DebouncedTextField,
     Dialog,
@@ -21,6 +20,8 @@ import {
 } from "@firecms/ui";
 
 import { Field, getIn, useFormex } from "@firecms/formex";
+import { useCollectionEditorController } from "../../useCollectionEditorController";
+import { LayoutModeSwitch } from "./LayoutModeSwitch";
 
 export function CollectionDetailsForm({
                                           isNewCollection,
@@ -28,7 +29,8 @@ export function CollectionDetailsForm({
                                           existingPaths,
                                           existingIds,
                                           groups,
-                                          parentCollection
+                                          parentCollection,
+                                          children
                                       }: {
     isNewCollection: boolean,
     reservedGroups?: string[];
@@ -37,6 +39,7 @@ export function CollectionDetailsForm({
     groups: string[] | null;
     parentCollection?: EntityCollection;
     parentCollectionIds?: string[];
+    children?: React.ReactNode;
 }) {
 
     const groupRef = React.useRef<HTMLInputElement>(null);
@@ -51,9 +54,15 @@ export function CollectionDetailsForm({
         submitCount
     } = useFormex<EntityCollection>();
 
+    const collectionEditor = useCollectionEditorController();
+
     const [iconDialogOpen, setIconDialogOpen] = useState(false);
     const [advancedPanelExpanded, setAdvancedPanelExpanded] = useState(false);
 
+    const updateDatabaseId = (databaseId: string) => {
+        setFieldValue("databaseId", databaseId ?? undefined);
+    }
+
     const updateName = (name: string) => {
         setFieldValue("name", name);
 
@@ -106,17 +115,22 @@ export function CollectionDetailsForm({
     }
 
     const showErrors = submitCount > 0;
+
     return (
         <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"4xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
 
                 <div>
                     <div
-                        className="flex flex-row py-2 pt-3 items-center">
+                        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`}
                         </Typography>
-                        <Tooltip title={"Change icon"}>
+                        <DefaultDatabaseField databaseId={values.databaseId}
+                                              onDatabaseIdUpdate={updateDatabaseId}/>
+
+                        <Tooltip title={"Change icon"}
+                                 asChild={true}>
                             <IconButton
                                 shape={"square"}
                                 onClick={() => setIconDialogOpen(true)}>
@@ -139,14 +153,15 @@ export function CollectionDetailsForm({
                             value={values.name ?? ""}
                             onChange={(e: any) => updateName(e.target.value)}
                             label={"Name"}
+                            autoFocus={true}
                             required
                             error={showErrors && Boolean(errors.name)}/>
                         <FieldCaption error={touched.name && Boolean(errors.name)}>
-                            {touched.name && Boolean(errors.name) ? errors.name : "Name of in this collection, usually a plural name (e.g. Products)"}
+                            {touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)"}
                         </FieldCaption>
                     </div>
 
-                    <div className={cn("col-span-12 ", isSubcollection ? "" : "sm:col-span-8")}>
+                    <div className={cls("col-span-12 ")}>
                         <Field name={"path"}
                                as={DebouncedTextField}
                                label={"Path"}
@@ -162,44 +177,71 @@ export function CollectionDetailsForm({
 
                     </div>
 
-                    {!isSubcollection && <div className={"col-span-12 sm:col-span-4 relative"}>
-
-                        <TextField error={showErrors && Boolean(errors.group)}
-                                   disabled={isSubmitting}
-                                   value={values.group ?? ""}
-                                   autoComplete="off"
-                                   onChange={(event) => setFieldValue("group", event.target.value)}
-                                   name={"group"}
-                                   inputRef={groupRef}
-                                   label="Group"/>
-                        <Autocomplete
-                            open={autoCompleteOpen && (groupOptions ?? []).length > 0}
-                            setOpen={setAutoCompleteOpen}>
-                            {groupOptions?.map((group, index) => {
-                                return <AutocompleteItem
-                                    key={index + "_" + group}
-                                    onClick={() => {
-                                        setAutoCompleteOpen(false);
-                                        setFieldValue("group", group ?? null);
-                                    }}
-                                >
-                                    <div className={"flex-grow"}>
-                                        {group}
-                                    </div>
-                                </AutocompleteItem>;
-                            })}
-                        </Autocomplete>
+                    {/*{!isSubcollection && <div className={"col-span-12 sm:col-span-4 relative"}>*/}
+
+                    {/*    <TextField error={showErrors && Boolean(errors.group)}*/}
+                    {/*               disabled={isSubmitting}*/}
+                    {/*               value={values.group ?? ""}*/}
+                    {/*               autoComplete="off"*/}
+                    {/*               onChange={(event) => setFieldValue("group", event.target.value)}*/}
+                    {/*               name={"group"}*/}
+                    {/*               inputRef={groupRef}*/}
+                    {/*               label="Group"/>*/}
+                    {/*    <Autocomplete*/}
+                    {/*        open={autoCompleteOpen && (groupOptions ?? []).length > 0}*/}
+                    {/*        setOpen={setAutoCompleteOpen}>*/}
+                    {/*        {groupOptions?.map((group, index) => {*/}
+                    {/*            return <AutocompleteItem*/}
+                    {/*                key={index + "_" + group}*/}
+                    {/*                className={"pr-6 pl-14"}*/}
+                    {/*                onClick={() => {*/}
+                    {/*                    setAutoCompleteOpen(false);*/}
+                    {/*                    setFieldValue("group", group ?? null);*/}
+                    {/*                }}*/}
+                    {/*            >*/}
+                    {/*                <div className={"flex-grow"}>*/}
+                    {/*                    {group}*/}
+                    {/*                </div>*/}
+                    {/*            </AutocompleteItem>;*/}
+                    {/*        })}*/}
+                    {/*    </Autocomplete>*/}
+                    {/*    <FieldCaption>*/}
+                    {/*        {showErrors && Boolean(errors.group) ? errors.group : "Group in the home page"}*/}
+                    {/*    </FieldCaption>*/}
+
+
+                    {/*</div>}*/}
+
+                    <LayoutModeSwitch
+                        className={"col-span-12"}
+                        value={values.openEntityMode ?? "side_panel"}
+                        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>
-                            {showErrors && Boolean(errors.group) ? errors.group : "Group of the collection"}
+                            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>}
+                    </div>
 
-                    <div className={"col-span-12"}>
+
+                    <div className={"col-span-12 mt-8"}>
                         <ExpandablePanel
                             expanded={advancedPanelExpanded}
                             onExpandedChange={setAdvancedPanelExpanded}
                             title={
-                                <div className="flex flex-row text-gray-500">
+                                <div className="flex flex-row text-surface-500">
                                     <SettingsIcon/>
                                     <Typography variant={"subtitle2"}
                                                 className="ml-2">
@@ -216,7 +258,7 @@ export function CollectionDetailsForm({
                                            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"}
+                                        {touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection. Typically the same as the path."}
                                     </FieldCaption>
                                 </div>
 
@@ -235,6 +277,35 @@ export function CollectionDetailsForm({
                                         {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)}
@@ -242,7 +313,7 @@ export function CollectionDetailsForm({
                                         value={values.description ?? ""}
                                         onChange={handleChange}
                                         multiline
-                                        rows={2}
+                                        minRows={2}
                                         aria-describedby="description-helper-text"
                                         label="Description"
                                     />
@@ -254,6 +325,8 @@ export function CollectionDetailsForm({
                                 <div className={"col-span-12"}>
                                     <Select
                                         name="defaultSize"
+                                        size={"large"}
+                                        fullWidth={true}
                                         label="Default row size"
                                         position={"item-aligned"}
                                         onChange={handleChange}
@@ -269,21 +342,32 @@ export function CollectionDetailsForm({
                                         ))}
                                     </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"}>
                                     <Select
                                         name="customId"
-                                        label="Data IDs generation"
+                                        label="Document IDs generation"
                                         position={"item-aligned"}
+                                        size={"large"}
+                                        fullWidth={true}
                                         disabled={customIdValue === "code_defined"}
                                         onValueChange={(v) => {
                                             if (v === "code_defined")
                                                 throw new Error("This should not happen");
-                                            else if (v === "true")
-                                                setFieldValue("customId", true);
-                                            else if (v === "false")
-                                                setFieldValue("customId", false);
-                                            else if (v === "optional")
-                                                setFieldValue("customId", "optional");
+                                            setFieldValue("customId", v);
                                         }}
                                         value={customIdValue ?? ""}
                                         renderValue={(value: any) => {
@@ -308,9 +392,10 @@ export function CollectionDetailsForm({
                                         </SelectItem>
                                     </Select>
                                 </div>
-                                <div className={"col-span-12"}>
+                                <div className={"col-span-12 mt-4"}>
                                     <BooleanSwitchWithLabel
                                         position={"start"}
+                                        size={"large"}
                                         label="Collection group"
                                         onValueChange={(v) => setFieldValue("collectionGroup", v)}
                                         value={values.collectionGroup ?? false}
@@ -324,6 +409,7 @@ export function CollectionDetailsForm({
                                 <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}
@@ -334,9 +420,13 @@ export function CollectionDetailsForm({
                                         for large collections, as it may incur in performance and cost issues.
                                     </FieldCaption>
                                 </div>
+
+
                             </div>
                         </ExpandablePanel>
 
+                        {children}
+
                     </div>
 
                 </div>
@@ -350,7 +440,7 @@ export function CollectionDetailsForm({
                     fullWidth
                 >
                     <div className={"p-4 overflow-auto min-h-[200px]"}>
-                        <SearchIconsView selectedIcon={values.icon}
+                        <SearchIconsView selectedIcon={typeof values.icon === "string" ? values.icon : undefined}
                                          onIconSelected={(icon: string) => {
                                              setIconDialogOpen(false);
                                              setFieldValue("icon", icon);
@@ -363,3 +453,20 @@ export function CollectionDetailsForm({
         </div>
     );
 }
+
+function DefaultDatabaseField({
+                                  databaseId,
+                                  onDatabaseIdUpdate
+                              }: { databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }) {
+
+    return <Tooltip title={"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>
+    </Tooltip>
+}