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

package/src/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -30,19 +30,21 @@ import { EntityCustomViewsSelectDialog } from "./EntityCustomViewsSelectDialog";
 import { useFormex } from "@firecms/formex";
 
 export function SubcollectionsEditTab({
-                                          collection,
-                                          parentCollection,
-                                          configController,
-                                          collectionInference,
-                                          getUser,
-                                          parentCollectionIds
-                                      }: {
+    collection,
+    parentCollection,
+    configController,
+    collectionInference,
+    getUser,
+    parentCollectionIds,
+    embedded = false
+}: {
     collection: PersistedCollection,
     parentCollection?: EntityCollection,
     configController: CollectionsConfigController;
     collectionInference?: CollectionInference;
     getUser?: (uid: string) => User | null;
     parentCollectionIds?: string[];
+    embedded?: boolean;
 }) {
 
     const { entityViews: contextEntityViews } = useCustomizationController();
@@ -68,177 +70,184 @@ export function SubcollectionsEditTab({
     const hardCodedEntityViews = collection.entityViews?.filter(e => typeof e !== "string") as EntityCustomView[] ?? [];
     const totalEntityViews = resolvedEntityViews.length + hardCodedEntityViews.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"}>
+    const content = (
+        <div className={"flex flex-col gap-16"}>
 
-                    <div className={"flex-grow flex flex-col gap-4 items-start"}>
-                        <Typography variant={"h5"}>
-                            Subcollections of {values.name}
-                        </Typography>
+            <div className={"flex-grow flex flex-col gap-4 items-start"}>
+                <Typography variant={"h6"}>
+                    Subcollections of {values.name}
+                </Typography>
 
-                        <Paper className={"flex flex-col gap-4 p-2 w-full"}>
-                            {subcollections && subcollections.length > 0 && <Table>
-                                <TableBody>
-                                    {subcollections.map((subcollection) => (
-                                        <TableRow key={subcollection.path}
-                                                  onClick={() => setCurrentDialog({
-                                                      isNewCollection: false,
-                                                      editedCollectionId: subcollection.id
-                                                  })}>
-                                            <TableCell
-                                                align="left">
-                                                <Typography variant={"subtitle2"} className={"flex-grow"}>
-                                                    {subcollection.name}
-                                                </Typography>
-                                            </TableCell>
-                                            <TableCell
-                                                align="right">
-                                                <Tooltip title={"Remove"}
-                                                         asChild={true}>
-                                                    <IconButton size="small"
-                                                                onClick={(e) => {
-                                                                    e.preventDefault();
-                                                                    e.stopPropagation();
-                                                                    setSubcollectionToDelete(subcollection.id);
-                                                                }}
-                                                                color="inherit">
-                                                        <DeleteIcon size={"small"}/>
-                                                    </IconButton>
-                                                </Tooltip>
-                                            </TableCell>
-                                        </TableRow>
-                                    ))}
-                                </TableBody>
-                            </Table>}
+                <Paper className={"flex flex-col gap-4 p-2 w-full"}>
+                    {subcollections && subcollections.length > 0 && <Table>
+                        <TableBody>
+                            {subcollections.map((subcollection) => (
+                                <TableRow key={subcollection.path}
+                                    onClick={() => setCurrentDialog({
+                                        isNewCollection: false,
+                                        editedCollectionId: subcollection.id
+                                    })}>
+                                    <TableCell
+                                        align="left">
+                                        <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                            {subcollection.name}
+                                        </Typography>
+                                    </TableCell>
+                                    <TableCell
+                                        align="right">
+                                        <Tooltip title={"Remove"}
+                                            asChild={true}>
+                                            <IconButton size="small"
+                                                onClick={(e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                    setSubcollectionToDelete(subcollection.id);
+                                                }}
+                                                color="inherit">
+                                                <DeleteIcon size={"small"} />
+                                            </IconButton>
+                                        </Tooltip>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>}
 
-                            <Button
-                                onClick={() => {
-                                    setCurrentDialog({
-                                        isNewCollection: true
-                                    });
-                                }}
-                                variant={"text"}
-                                startIcon={<AddIcon/>}>
-                                Add subcollection
-                            </Button>
+                    <Button
+                        onClick={() => {
+                            setCurrentDialog({
+                                isNewCollection: true
+                            });
+                        }}
+                        startIcon={<AddIcon />}>
+                        Add subcollection
+                    </Button>
 
-                        </Paper>
+                </Paper>
 
-                    </div>
+            </div>
 
-                    <div className={"flex-grow  flex flex-col gap-4 items-start"}>
-                        <Typography variant={"h5"}>
-                            Custom views
-                        </Typography>
+            <div className={"flex-grow  flex flex-col gap-4 items-start"}>
+                <Typography variant={"h6"}>
+                    Custom views
+                </Typography>
 
-                        {totalEntityViews === 0 &&
-                            <Alert action={<Button variant="text"
-                                                   size={"small"}
-                                                   href={"https://firecms.co/docs/cloud/quickstart"}
-                                                   component={"a"}
-                                                   rel="noopener noreferrer"
-                                                   target="_blank">More info</Button>}>
-                                Define your own custom views by uploading them with the CLI.
-                            </Alert>
-                        }
+                {totalEntityViews === 0 &&
+                    <Alert action={<Button variant="text"
+                        size={"small"}
+                        href={"https://firecms.co/docs/cloud/quickstart"}
+                        component={"a"}
+                        rel="noopener noreferrer"
+                        target="_blank">More info</Button>}>
+                        Define your own custom views by uploading them with the CLI.
+                    </Alert>
+                }
 
-                        {<>
-                            <Paper className={"flex flex-col gap-4 p-2 w-full"}>
-                                <Table>
-                                    <TableBody>
-                                        {resolvedEntityViews.map((view) => (
-                                            <TableRow key={view.key}>
-                                                <TableCell
-                                                    align="left">
-                                                    <Typography variant={"subtitle2"} className={"flex-grow"}>
-                                                        {view.name}
-                                                    </Typography>
-                                                </TableCell>
-                                                <TableCell
-                                                    align="right">
-                                                    <Tooltip title={"Remove"}
-                                                             asChild={true}>
-                                                        <IconButton size="small"
-                                                                    onClick={(e) => {
-                                                                        e.preventDefault();
-                                                                        e.stopPropagation();
-                                                                        setViewToDelete(view.key);
-                                                                    }}
-                                                                    color="inherit">
-                                                            <DeleteIcon size={"small"}/>
-                                                        </IconButton>
-                                                    </Tooltip>
-                                                </TableCell>
-                                            </TableRow>
-                                        ))}
-                                        {hardCodedEntityViews.map((view) => (
-                                            <TableRow key={view.key}>
-                                                <TableCell
-                                                    align="left">
-                                                    <Typography variant={"subtitle2"} className={"flex-grow"}>
-                                                        {view.name}
-                                                    </Typography>
-                                                    <Typography variant={"caption"} className={"flex-grow"}>
-                                                        This view is defined in code with
-                                                        key <code>{view.key}</code>
-                                                    </Typography>
-                                                </TableCell>
-                                            </TableRow>
-                                        ))}
-                                    </TableBody>
-                                </Table>
+                {<>
+                    <Paper className={"flex flex-col gap-4 p-2 w-full"}>
+                        <Table>
+                            <TableBody>
+                                {resolvedEntityViews.map((view) => (
+                                    <TableRow key={view.key}>
+                                        <TableCell
+                                            align="left">
+                                            <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                                {view.name}
+                                            </Typography>
+                                        </TableCell>
+                                        <TableCell
+                                            align="right">
+                                            <Tooltip title={"Remove"}
+                                                asChild={true}>
+                                                <IconButton size="small"
+                                                    onClick={(e) => {
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                        setViewToDelete(view.key);
+                                                    }}
+                                                    color="inherit">
+                                                    <DeleteIcon size={"small"} />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                                {hardCodedEntityViews.map((view) => (
+                                    <TableRow key={view.key}>
+                                        <TableCell
+                                            align="left">
+                                            <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                                {view.name}
+                                            </Typography>
+                                            <Typography variant={"caption"} className={"flex-grow"}>
+                                                This view is defined in code with
+                                                key <code>{view.key}</code>
+                                            </Typography>
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
 
-                                <Button
-                                    onClick={() => {
-                                        setAddEntityViewDialogOpen(true);
-                                    }}
-                                    variant={"text"}
-                                    startIcon={<AddIcon/>}>
-                                    Add custom entity view
-                                </Button>
-                            </Paper>
+                        <Button
+                            onClick={() => {
+                                setAddEntityViewDialogOpen(true);
+                            }}
+                            startIcon={<AddIcon />}>
+                            Add custom entity view
+                        </Button>
+                    </Paper>
 
-                        </>}
+                </>}
 
 
-                    </div>
+            </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>
+            )}
 
             {subcollectionToDelete &&
                 <ConfirmationDialog open={Boolean(subcollectionToDelete)}
-                                    onAccept={() => {
-                                              const props = {
-                                                  id: subcollectionToDelete,
-                                                  parentCollectionIds: [...(parentCollectionIds ?? []), collection.id]
-                                              };
-                                              console.debug("Deleting subcollection", props)
-                                              configController.deleteCollection(props).then(() => {
-                                                  setSubcollectionToDelete(undefined);
-                                                  setSubcollections(subcollections?.filter(e => e.id !== subcollectionToDelete))
-                                              });
-                                          }}
-                                    onCancel={() => setSubcollectionToDelete(undefined)}
-                                    title={<>Delete this subcollection?</>}
-                                    body={<> This will <b>not
-                                              delete any data</b>, only
-                                              the collection in the CMS</>}/>}
+                    onAccept={() => {
+                        const props = {
+                            id: subcollectionToDelete,
+                            parentCollectionIds: [...(parentCollectionIds ?? []), collection.id]
+                        };
+                        console.debug("Deleting subcollection", props)
+                        configController.deleteCollection(props).then(() => {
+                            setSubcollectionToDelete(undefined);
+                            setSubcollections(subcollections?.filter(e => e.id !== subcollectionToDelete))
+                        });
+                    }}
+                    onCancel={() => setSubcollectionToDelete(undefined)}
+                    title={<>Delete this subcollection?</>}
+                    body={<> This will <b>not
+                        delete any data</b>, only
+                        the collection in the CMS</>} />}
             {viewToDelete &&
                 <ConfirmationDialog open={Boolean(viewToDelete)}
-                                    onAccept={() => {
-                                              setFieldValue("entityViews", values.entityViews?.filter(e => e !== viewToDelete));
-                                              setViewToDelete(undefined);
-                                          }}
-                                    onCancel={() => setViewToDelete(undefined)}
-                                    title={<>Remove this view?</>}
-                                    body={<>This will <b>not
-                                              delete any data</b>, only
-                                              the view in the CMS</>}/>}
+                    onAccept={() => {
+                        setFieldValue("entityViews", values.entityViews?.filter(e => e !== viewToDelete));
+                        setViewToDelete(undefined);
+                    }}
+                    onCancel={() => setViewToDelete(undefined)}
+                    title={<>Remove this view?</>}
+                    body={<>This will <b>not
+                        delete any data</b>, only
+                        the view in the CMS</>} />}
 
             <CollectionEditorDialog
                 open={Boolean(currentDialog)}
@@ -254,7 +263,7 @@ export function SubcollectionsEditTab({
                         setSubcollections([...subcollections, updatedCollection]);
                     }
                     setCurrentDialog(undefined);
-                }}/>
+                }} />
 
             <EntityCustomViewsSelectDialog
                 open={addEntityViewDialogOpen}
@@ -263,7 +272,7 @@ export function SubcollectionsEditTab({
                         setFieldValue("entityViews", [...(values.entityViews ?? []), selectedViewKey]);
                     }
                     setAddEntityViewDialogOpen(false);
-                }}/>
-        </div>
+                }} />
+        </>
     );
 }

package/src/ui/collection_editor/UnsavedChangesDialog.tsx

@@ -38,10 +38,8 @@ export function UnsavedChangesDialog({
 
             <DialogActions>
                 <Button variant="text"
-                        color={"primary"}
                         onClick={handleCancel} autoFocus> Cancel </Button>
                 <Button
-                    color={"primary"}
                     onClick={handleOk}> Ok </Button>
             </DialogActions>
         </Dialog>

package/src/ui/collection_editor/ViewModeSwitch.tsx

@@ -0,0 +1,41 @@
+import { ViewMode } from "@firecms/core";
+import { AppsIcon, cls, ListIcon, ToggleButtonGroup, Typography, ViewKanbanIcon } from "@firecms/ui";
+
+export function ViewModeSwitch({
+    value,
+    onChange,
+    className
+}: {
+    value: ViewMode;
+    onChange: (value: ViewMode) => void;
+    className?: string;
+}) {
+
+    return <div className={cls(className)}>
+        <Typography variant={"label"} color={"secondary"} className={"ml-3.5"}>Default collection view</Typography>
+        <div className={"my-2"}>
+            <ToggleButtonGroup
+                value={value}
+                onValueChange={onChange}
+                options={[
+                    {
+                        value: "table",
+                        label: "Table",
+                        icon: <ListIcon />
+                    },
+                    {
+                        value: "cards",
+                        label: "Cards",
+                        icon: <AppsIcon />
+                    },
+                    {
+                        value: "kanban",
+                        label: "Kanban",
+                        icon: <ViewKanbanIcon />
+                    }
+                ]}
+            />
+        </div>
+        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>Choose how entities should be displayed by default</Typography>
+    </div>
+}

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

@@ -71,8 +71,6 @@ export function BlockPropertyField({
 
     const addChildButton = <Button
         autoFocus
-        color="primary"
-
         onClick={() => setPropertyDialogOpen(true)}
         startIcon={<AddIcon/>}
     >

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

@@ -27,6 +27,7 @@ export function BooleanPropertyField({ disabled }: {
                     name={"defaultValue"}>
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
+                            size={"medium"}
                             label={defaultValue === null || defaultValue === undefined ? "Default value not set" : ("Default value is " + defaultValue.toString())}
                             disabled={disabled}
                             allowIndeterminate={true} field={field}