@firecms/collection_editor 3.0.0-alpha.32 → 3.0.0-alpha.33

package/dist/ui/collection_editor/GetCodeDialog.d.ts

@@ -0,0 +1,5 @@
+export declare function GetCodeDialog({ collection, onOpenChange, open }: {
+    onOpenChange: (open: boolean) => void;
+    collection: any;
+    open: any;
+}): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firecms/collection_editor",
-  "version": "3.0.0-alpha.32",
+  "version": "3.0.0-alpha.33",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -14,8 +14,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/data_import": "^3.0.0-alpha.32",
-    "@firecms/schema_inference": "^3.0.0-alpha.32",
+    "@firecms/data_import": "^3.0.0-alpha.33",
+    "@firecms/schema_inference": "^3.0.0-alpha.33",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.0"
   },
@@ -78,5 +78,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f545e3572aa7f025222713984025288bf62b0d4c"
+  "gitHead": "6d5339ab786c9e239ff98da651fde4e4f4879f21"
 }

package/src/ConfigControllerProvider.tsx

@@ -10,12 +10,12 @@ import {
     User,
     useSnackbarController
 } from "@firecms/core";
-import { CollectionEditorDialog } from "./components/collection_editor/CollectionEditorDialog";
+import { CollectionEditorDialog } from "./ui/collection_editor/CollectionEditorDialog";
 import { useNavigate } from "react-router";
 import { CollectionEditorController } from "./types/collection_editor_controller";
 import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
 import { CollectionInference } from "./types/collection_inference";
-import { PropertyFormDialog } from "./components/collection_editor/PropertyEditView";
+import { PropertyFormDialog } from "./ui/collection_editor/PropertyEditView";
 import { PersistedCollection } from "./types/persisted_collection";
 
 export const ConfigControllerContext = React.createContext<CollectionsConfigController>({} as any);

package/src/index.ts

@@ -30,5 +30,5 @@ export type {
     CollectionInference
 } from "./types/collection_inference";
 
-export { MissingReferenceWidget } from "./components/MissingReferenceWidget";
-export * from "./components/collection_editor/util";
+export { MissingReferenceWidget } from "./ui/MissingReferenceWidget";
+export * from "./ui/collection_editor/util";

package/src/{components → ui}/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useMemo, useState } from "react";
-import JSON5 from "json5";
 
 import { Field, FormikErrors, getIn, useFormikContext } from "formik";
 import {
@@ -11,9 +10,6 @@ import {
     CodeIcon,
     DebouncedTextField,
     defaultBorderMixin,
-    Dialog,
-    DialogActions,
-    DialogContent,
     EntityCollection,
     ErrorBoundary,
     IconButton,
@@ -31,13 +27,11 @@ import {
     useSnackbarController
 } from "@firecms/core";
 
-import { Highlight, themes } from "prism-react-renderer"
-
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "./util";
 import { OnPropertyChangedParams, PropertyForm, PropertyFormDialog } from "./PropertyEditView";
 import { PropertyTree } from "./PropertyTree";
 import { PersistedCollection } from "../../types/persisted_collection";
-import { camelCase } from "./utils/strings";
+import { GetCodeDialog } from "./GetCodeDialog";
 
 type CollectionEditorFormProps = {
     showErrors: boolean;
@@ -54,47 +48,6 @@ type CollectionEditorFormProps = {
     collectionEditable: boolean;
 };
 
-function GetCodeDialog({ collection, onOpenChange, open }: { onOpenChange: (open: boolean) => void, collection: any, open: any }) {
-    const code = "const " + camelCase(collection.name) + "Collection = " + JSON5.stringify(collection, null, "\t");
-    return <Dialog open={open}
-                   onOpenChange={onOpenChange}
-                   maxWidth={"4xl"}>
-        <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>.
-            </Typography>
-            <Highlight
-                theme={themes.vsDark}
-                code={code}
-                language="typescript"
-            >
-                {({ className, style, tokens, getLineProps, getTokenProps }) => (
-                    <pre style={style} className={"p-4 rounded"}>
-        {tokens.map((line, i) => (
-            <div key={i} {...getLineProps({ line })}>
-                {line.map((token, key) => (
-                    <span key={key} {...getTokenProps({ token })} />
-                ))}
-            </div>
-        ))}
-      </pre>
-                )}
-            </Highlight>
-
-        </DialogContent>
-        <DialogActions>
-            <Button onClick={() => onOpenChange(false)}>Close</Button>
-        </DialogActions>
-    </Dialog>;
-}
-
 export function CollectionPropertiesEditorForm({
                                                    showErrors,
                                                    isNewCollection,
@@ -374,7 +327,7 @@ export function CollectionPropertiesEditorForm({
                     </div>}
 
                     <div className="ml-1 mt-2 flex flex-row gap-2">
-                        <Tooltip title={"Get the code of this collection"}>
+                        <Tooltip title={"Get the code for this collection"}>
                             <IconButton
                                 variant={"filled"}
                                 disabled={inferringProperties}

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -0,0 +1,118 @@
+import {
+    Button,
+    ContentCopyIcon,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    EntityCollection,
+    Typography,
+    useSnackbarController
+} from "@firecms/core";
+import React from "react";
+import JSON5 from "json5";
+import { Highlight, themes } from "prism-react-renderer"
+import { camelCase } from "./utils/strings";
+
+export function GetCodeDialog({ collection, onOpenChange, open }: { onOpenChange: (open: boolean) => void, collection: any, open: any }) {
+
+    const snackbarController = useSnackbarController();
+
+    const code = "const " + camelCase(collection.name) + "Collection = " + JSON5.stringify(collectionToCode(collection), null, "\t");
+    return <Dialog open={open}
+                   onOpenChange={onOpenChange}
+                   maxWidth={"4xl"}>
+        <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>.
+            </Typography>
+            <Highlight
+                theme={themes.vsDark}
+                code={code}
+                language="typescript"
+            >
+                {({ className, style, tokens, getLineProps, getTokenProps }) => (
+                    <pre style={style} className={"p-4 rounded text-sm"}>
+        {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line })}>
+                {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({ token })} />
+                ))}
+            </div>
+        ))}
+      </pre>
+                )}
+            </Highlight>
+
+        </DialogContent>
+        <DialogActions>
+            <Button
+                variant={"text"}
+                size={"small"}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    snackbarController.open({
+                        type: "success",
+                        message: `Copied}`
+                    })
+                    return navigator.clipboard.writeText(code);
+                }}>
+                <ContentCopyIcon size={"small"}/>
+                Copy to clipboard
+            </Button>
+            <Button onClick={() => onOpenChange(false)}>Close</Button>
+        </DialogActions>
+    </Dialog>;
+}
+
+function collectionToCode(collection: EntityCollection): object {
+
+    const propertyCleanup = (property: any) => {
+
+        const updatedProperty = {
+            ...property
+        };
+
+        delete updatedProperty.fromBuilder;
+        delete updatedProperty.resolved;
+        delete updatedProperty.propertiesOrder;
+        delete updatedProperty.editable;
+
+        if (updatedProperty.type === "map") {
+            return {
+                ...updatedProperty,
+                properties: updatedProperty.properties.map(propertyCleanup)
+            }
+        }
+        return updatedProperty;
+    }
+
+    return {
+        name: collection.name,
+        singularName: collection.singularName,
+        description: collection.description,
+        path: collection.path,
+        editable: true,
+        collectionGroup: collection.collectionGroup,
+        alias: collection.alias,
+        icon: collection.icon,
+        group: collection.group,
+        customId: collection.customId,
+        initialFilter: collection.initialFilter,
+        initialSort: collection.initialSort,
+        properties: Object.entries(collection.properties)
+            .map(([key, value]) => ({
+                [key]: propertyCleanup(value)
+            }))
+            .reduce((a, b) => ({ ...a, ...b }), {}),
+        subcollections: (collection.subcollections ?? []).map(collectionToCode)
+    }
+
+}

package/src/{components → ui}/collection_editor/PropertyFieldPreview.tsx

@@ -92,10 +92,6 @@ export function PropertyFieldPreview({
                             </Typography>
                         </ErrorBoundary>
 
-                        {disabled && <div
-                            className="text-xs h-3 ml-0.5">
-                            <RemoveCircleIcon color={"disabled"}/>
-                        </div>}
                     </div>
                 </div>
 

package/src/{components → ui}/collection_editor/PropertyTree.tsx

@@ -80,7 +80,7 @@ export function PropertyTree<M extends {
                                 // .filter((propertyKey) => Boolean(properties[propertyKey]))
                                 .map((propertyKey: string, index: number) => {
                                     const property = properties[propertyKey] as PropertyOrBuilder;
-                                    const additionalField = additionalFields?.find(field => field.id === propertyKey);
+                                    const additionalField = additionalFields?.find(field => field.key === propertyKey);
 
                                     if (!property && !additionalField) {
                                         console.warn(`Property ${propertyKey} not found in properties or additionalFields`);

package/src/useCollectionEditorPlugin.tsx

@@ -2,16 +2,16 @@ import React, { useCallback } from "react";
 import { EntityCollection, FireCMSPlugin, makePropertiesEditable, User } from "@firecms/core";
 import { ConfigControllerProvider } from "./ConfigControllerProvider";
 import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
-import { EditorCollectionAction } from "./components/EditorCollectionAction";
-import { HomePageEditorCollectionAction } from "./components/HomePageEditorCollectionAction";
-import { NewCollectionCard } from "./components/NewCollectionCard";
+import { EditorCollectionAction } from "./ui/EditorCollectionAction";
+import { HomePageEditorCollectionAction } from "./ui/HomePageEditorCollectionAction";
+import { NewCollectionCard } from "./ui/NewCollectionCard";
 import { PersistedCollection } from "./types/persisted_collection";
 import { CollectionInference } from "./types/collection_inference";
 import { CollectionsConfigController } from "./types/config_controller";
-import { RootCollectionSuggestions } from "./components/RootCollectionSuggestions";
+import { RootCollectionSuggestions } from "./ui/RootCollectionSuggestions";
 import { joinCollectionLists } from "./utils/join_collections";
-import { CollectionViewHeaderAction } from "./components/CollectionViewHeaderAction";
-import { PropertyAddColumnComponent } from "./components/PropertyAddColumnComponent";
+import { CollectionViewHeaderAction } from "./ui/CollectionViewHeaderAction";
+import { PropertyAddColumnComponent } from "./ui/PropertyAddColumnComponent";
 
 export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
 

package/src/utils/join_collections.ts

@@ -96,10 +96,18 @@ function mergePropertyOrBuilder(target: Property, source: PropertyOrBuilder): Pr
 
 function getCollectionKeys(collection: EntityCollection) {
     if (collection.propertiesOrder && collection.propertiesOrder.length > 0) {
-        return collection.propertiesOrder;
+        const propertiesOrder = collection.propertiesOrder;
+        if (collection.additionalFields) {
+            collection.additionalFields.forEach((field) => {
+                if (!propertiesOrder.includes(field.key)) {
+                    propertiesOrder.push(field.key);
+                }
+            });
+        }
+        return propertiesOrder;
     }
     return [
         ...Object.keys(collection.properties),
-        ...(collection.additionalFields ?? [])?.map(f => f.id)
+        ...(collection.additionalFields ?? [])?.map(f => f.key)
     ];
 }