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

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -1,35 +1,47 @@
-import { EntityCollection, useSnackbarController } from "@firecms/core";
-import { Button, ContentCopyIcon, Dialog, DialogActions, DialogContent, Typography, } from "@firecms/ui";
+import { EntityCollection, isEmptyObject, useSnackbarController } from "@firecms/core";
+import { Button, ContentCopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 import React from "react";
 import JSON5 from "json5";
 import { Highlight, themes } from "prism-react-renderer"
 import { camelCase } from "./utils/strings";
+import { clone } from "@firecms/formex";
 
-export function GetCodeDialog({ collection, onOpenChange, open }: { onOpenChange: (open: boolean) => void, collection: any, open: any }) {
+export function GetCodeDialog({
+                                  collection,
+                                  onOpenChange,
+                                  open
+                              }: { onOpenChange: (open: boolean) => void, collection: any, open: any }) {
 
     const snackbarController = useSnackbarController();
 
-    const code = "import { EntityCollection } from \"firecms\";\n\nconst " + (collection.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode(collection), null, "\t");
+    const code = collection
+        ? "import { EntityCollection } from \"@firecms/core\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode({ ...collection }), null, "\t")
+        : "No collection selected";
     return <Dialog open={open}
                    onOpenChange={onOpenChange}
                    maxWidth={"4xl"}>
+        <DialogTitle variant={"h6"}>Code for {collection.name}</DialogTitle>
         <DialogContent>
-            <Typography variant={"h6"} className={"my-4"}>
-                Code for {collection.name}
-            </Typography>
+
             <Typography variant={"body2"} className={"my-4 mb-8"}>
                 If you want to customise the collection in code, you can add this collection code to your CMS
                 app configuration.
                 More info in the <a
                 rel="noopener noreferrer"
-                href={"https://firecms.co/docs/customization_quickstart"}>docs</a>.
+                href={"https://firecms.co/docs/cloud/quickstart"}>docs</a>.
             </Typography>
             <Highlight
                 theme={themes.vsDark}
                 code={code}
                 language="typescript"
             >
-                {({ className, style, tokens, getLineProps, getTokenProps }) => (
+                {({
+                      className,
+                      style,
+                      tokens,
+                      getLineProps,
+                      getTokenProps
+                  }) => (
                     <pre style={style} className={"p-4 rounded text-sm"}>
         {tokens.map((line, i) => (
             <div key={i} {...getLineProps({ line })}>
@@ -47,12 +59,13 @@ export function GetCodeDialog({ collection, onOpenChange, open }: { onOpenChange
             <Button
                 variant={"text"}
                 size={"small"}
+                color={"primary"}
                 onClick={(e) => {
                     e.stopPropagation();
                     e.preventDefault();
                     snackbarController.open({
                         type: "success",
-                        message: `Copied`
+                        message: "Copied"
                     })
                     return navigator.clipboard.writeText(code);
                 }}>
@@ -66,24 +79,40 @@ export function GetCodeDialog({ collection, onOpenChange, open }: { onOpenChange
 
 function collectionToCode(collection: EntityCollection): object {
 
-    const propertyCleanup = (property: any) => {
-
-        const updatedProperty = {
-            ...property
-        };
-
-        delete updatedProperty.fromBuilder;
-        delete updatedProperty.resolved;
-        delete updatedProperty.propertiesOrder;
-        delete updatedProperty.editable;
+    const propertyCleanup = (value: any): any => {
+        if (value === undefined || value === null) {
+            return value;
+        }
+        const valueCopy = clone(value);
+        if (typeof valueCopy === "function") {
+            return valueCopy;
+        }
+        if (Array.isArray(valueCopy)) {
+            return valueCopy.map((v: any) => propertyCleanup(v));
+        }
+        if (typeof valueCopy === "object") {
+            if (valueCopy === null)
+                return valueCopy;
+            Object.keys(valueCopy).forEach((key) => {
+                if (!isEmptyObject(valueCopy)) {
+                    const childRes = propertyCleanup(valueCopy[key]);
+                    if (childRes !== null && childRes !== undefined && childRes !== false && !isEmptyObject(childRes)) {
+                        valueCopy[key] = childRes;
+                    } else {
+                        delete valueCopy[key];
+                    }
+                }
+            });
+            delete valueCopy.fromBuilder;
+            delete valueCopy.resolved;
+            delete valueCopy.propertiesOrder;
+            delete valueCopy.propertyConfig;
+            delete valueCopy.resolvedProperties;
+            delete valueCopy.editable;
 
-        if (updatedProperty.type === "map") {
-            return {
-                ...updatedProperty,
-                properties: updatedProperty.properties.map(propertyCleanup)
-            }
         }
-        return updatedProperty;
+
+        return valueCopy;
     }
 
     return {
@@ -99,11 +128,14 @@ function collectionToCode(collection: EntityCollection): object {
         customId: collection.customId,
         initialFilter: collection.initialFilter,
         initialSort: collection.initialSort,
-        properties: Object.entries(collection.properties ?? {})
+        properties: Object.entries({
+            ...(collection.properties ?? {})
+        })
             .map(([key, value]) => ({
                 [key]: propertyCleanup(value)
             }))
-            .reduce((a, b) => ({ ...a, ...b }), {}),
+            .reduce((a, b) => ({ ...a,
+...b }), {}),
         subcollections: (collection.subcollections ?? []).map(collectionToCode)
     }
 

package/src/ui/collection_editor/LayoutModeSwitch.tsx

@@ -0,0 +1,54 @@
+import { Card, cls, SquareIcon, Tooltip, Typography, VerticalSplitIcon } from "@firecms/ui";
+
+export function LayoutModeSwitch({
+                                     value,
+                                     onChange,
+                                     className
+                                 }: {
+    value: "side_panel" | "full_screen";
+    onChange: (value: "side_panel" | "full_screen") => void;
+    className?: string;
+}) {
+
+    return <div className={cls(className)}>
+        <Typography variant={"label"} color={"secondary"} className={"ml-3.5"}>Document view</Typography>
+        <div className={cls("flex flex-row gap-4")}>
+
+            <Tooltip title={"Documents are open in a side panel"}>
+                <Card
+                    onClick={() => onChange("side_panel")}
+                    className={cls(
+                        "my-2 rounded-md mx-0 p-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
+                        "text-surface-700 dark:text-surface-accent-300",
+                        "hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",
+                        value === "side_panel" ? "border-primary dark:border-primary" : "border-surface-400 dark:border-surface-600",
+                    )}
+                >
+                    <VerticalSplitIcon/>
+                    <Typography variant={"label"}>
+                        Side panel
+                    </Typography>
+                </Card>
+            </Tooltip>
+
+            <Tooltip title={"Documents are open full-screen"}>
+                <Card
+                    onClick={() => onChange("full_screen")}
+                    className={cls(
+                        "my-2 rounded-md mx-0 p-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
+                        "text-surface-700 dark:text-surface-accent-300",
+                        "hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",
+                        value === "full_screen" ? "border-primary dark:border-primary" : "border-surface-400 dark:border-surface-600",
+                    )}
+                >
+                    <SquareIcon/>
+                    <Typography variant={"label"}>
+                        Full screen
+                    </Typography>
+                </Card>
+            </Tooltip>
+
+        </div>
+        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>Should documents be opened full screen or in an inline side dialog</Typography>
+    </div>
+}