@firecms/collection_editor 3.0.0-beta.14 → 3.0.0-beta.15

package/src/ui/collection_editor/EntityActionsSelectDialog.tsx

@@ -0,0 +1,41 @@
+import { useCustomizationController } from "@firecms/core";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
+import React from "react";
+
+export function EntityActionsSelectDialog({
+                                                  open,
+                                                  onClose
+                                              }: { open: boolean, onClose: (selectedActionKey?: string) => void }) {
+    const {
+        entityActions
+    } = useCustomizationController();
+
+    return <Dialog
+        maxWidth={"md"}
+        open={open}>
+        <DialogTitle>Select custom action</DialogTitle>
+        <DialogContent className={"flex flex-col gap-4"}>
+            {entityActions?.map((action) => {
+                return <Button
+                    key={action.key}
+                    onClick={() => onClose(action.key)}
+                    fullWidth
+                    variant={"text"}
+                >
+                    {action.name} ({action.key})
+                </Button>;
+            })}
+            {(entityActions ?? []).length === 0 &&
+                <Typography variant={"body2"}>
+                    No custom actions defined. Define your custom actions in the customization settings, before using this
+                    dialog.
+                </Typography>
+            }
+        </DialogContent>
+        <DialogActions>
+            <Button variant={"outlined"}
+                    color={"primary"}
+                    onClick={() => onClose()}>Cancel</Button>
+        </DialogActions>
+    </Dialog>
+}

package/src/ui/collection_editor/EntityCustomViewsSelectDialog.tsx

@@ -27,12 +27,15 @@ export function EntityCustomViewsSelectDialog({
             })}
             {(entityViews ?? []).length === 0 &&
                 <Typography variant={"body2"}>
-                    No custom views defined
+                    No custom views defined. Define your custom views in the customization settings, before using this
+                    dialog.
                 </Typography>
             }
         </DialogContent>
         <DialogActions>
-            <Button variant={"outlined"} onClick={() => onClose()}>Cancel</Button>
+            <Button variant={"outlined"}
+                    color={"primary"}
+                    onClick={() => onClose()}>Cancel</Button>
         </DialogActions>
     </Dialog>
 }

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -1,5 +1,5 @@
 import { EntityCollection, isEmptyObject, useSnackbarController } from "@firecms/core";
-import { Button, ContentCopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, Typography, } from "@firecms/ui";
+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"
@@ -59,12 +59,13 @@ export function GetCodeDialog({
             <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);
                 }}>
@@ -133,7 +134,8 @@ function collectionToCode(collection: EntityCollection): object {
             .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/PropertyEditView.tsx

@@ -295,6 +295,7 @@ export function PropertyFormDialog({
 
                 {onCancel && <Button
                     variant={"text"}
+                    color={"primary"}
                     onClick={() => {
                         onCancel();
                         formexRef.current?.resetForm();
@@ -461,6 +462,13 @@ function PropertyEditFormFields({
                                     existing={existing}
                                     multiple={false}
                                     disabled={disabled}/>;
+    } else if (selectedFieldConfigId === "reference_as_string") {
+        childComponent =
+            <ReferencePropertyField showErrors={showErrors}
+                                    existing={existing}
+                                    asString={true}
+                                    multiple={false}
+                                    disabled={disabled}/>;
     } else if (selectedFieldConfigId === "date_time") {
         childComponent = <DateTimePropertyField disabled={disabled}/>;
     } else if (selectedFieldConfigId === "multi_references") {
@@ -605,6 +613,7 @@ const WIDGET_TYPE_MAP: Record<PropertyConfigId, string> = {
     file_upload: "File",
     multi_file_upload: "File",
     reference: "Reference",
+    reference_as_string: "Text",
     multi_references: "Reference",
     date_time: "Date",
     group: "Group",
@@ -762,7 +771,7 @@ export function WidgetSelectViewItem({
 
     return <Card
         onClick={onClick}
-        className={"flex flex-row items-center px-4 py-2"}>
+        className={"flex flex-row items-center px-4 py-2 m-1"}>
         <div
             className={cls(
                 "flex flex-row items-center text-base min-h-[48px]",

package/src/ui/collection_editor/PropertyFieldPreview.tsx

@@ -54,6 +54,7 @@ export function PropertyFieldPreview({
             </div>
             <Paper
                 className={cls(
+                    "m-1",
                     "border",
                     "pl-2 w-full flex flex-row gap-4 items-center",
                     cardMixin,

package/src/ui/collection_editor/UnsavedChangesDialog.tsx

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

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

@@ -7,12 +7,14 @@ export function ReferencePropertyField({
                                            existing,
                                            multiple,
                                            disabled,
-                                           showErrors
+                                           showErrors,
+                                           asString
                                        }: {
     existing: boolean,
     multiple: boolean,
     disabled: boolean,
-    showErrors: boolean
+    showErrors: boolean,
+    asString?: boolean
 }) {
 
     const {
@@ -28,7 +30,7 @@ export function ReferencePropertyField({
             <CircularProgress/>
         </div>;
 
-    const pathPath = multiple ? "of.path" : "path";
+    const pathPath = asString ? "reference.path" : (multiple ? "of.path" : "path") ;
     const pathValue: string | undefined = getIn(values, pathPath);
     const pathError: string | undefined = showErrors && getIn(errors, pathPath);
 

package/src/ui/collection_editor/utils/supported_fields.tsx

@@ -14,6 +14,7 @@ export const supportedFieldsIds: PropertyConfigId[] = [
     "file_upload",
     "multi_file_upload",
     "reference",
+    "reference_as_string",
     "multi_references",
     "switch",
     "date_time",

package/src/ui/collection_editor/utils/update_property_for_widget.ts

@@ -208,6 +208,15 @@ export function updatePropertyFromWidget(propertyData: any,
                 editable: propertyData.editable !== undefined ? propertyData.editable : true
             } satisfies Property
         );
+    } else if (selectedWidgetId === "reference_as_string") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                dataType: "string",
+                propertyConfig: "reference_as_string",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true
+            } satisfies Property
+        );
     } else if (selectedWidgetId === "multi_references") {
         updatedProperty = mergeDeep(
             propertyData,

package/src/useCollectionEditorPlugin.tsx

@@ -14,6 +14,7 @@ import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
 import { useCollectionEditorController } from "./useCollectionEditorController";
 import { EditorCollectionActionStart } from "./ui/EditorCollectionActionStart";
 import { NewCollectionCard } from "./ui/NewCollectionCard";
+import { EditorEntityAction } from "./ui/EditorEntityAction";
 
 export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, USER extends User = User> {
 
@@ -96,15 +97,20 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
         homePage: {
             additionalActions: <NewCollectionButton/>,
             additionalChildrenStart: includeIntroView ? <IntroWidget/> : undefined,
-            // additionalChildrenEnd: <RootCollectionSuggestions introMode={introMode}/>,
             CollectionActions: HomePageEditorCollectionAction,
             AdditionalCards: NewCollectionCard,
+            allowDragAndDrop: true,
+            navigationEntries: collectionConfigController.navigationEntries,
+            onNavigationEntriesUpdate: collectionConfigController.saveNavigationEntries,
         },
         collectionView: {
             CollectionActionsStart: EditorCollectionActionStart,
             CollectionActions: EditorCollectionAction,
             HeaderAction: CollectionViewHeaderAction,
             AddColumnComponent: PropertyAddColumnComponent
+        },
+        form: {
+            ActionsTop: EditorEntityAction,
         }
     };
 }

package/src/utils/collections.ts

@@ -26,11 +26,20 @@ export const mergeCollections = (baseCollections: EntityCollection[],
     const result = joinCollectionLists(baseCollections, backendCollections, [], modifyCollection);
 
     // sort the collections so they are in the same order as the base collections
-    result.sort((a, b) => baseCollections.findIndex(c => c.id === a.id) - baseCollections.findIndex(c => c.id === b.id));
-    console.debug("Collections result", {
-        baseCollections,
-        backendCollections,
-        result
+    result.sort((a, b) => {
+        const indexA = baseCollections.findIndex(c => c.id === a.id);
+        const indexB = baseCollections.findIndex(c => c.id === b.id);
+
+        if (indexA === -1 && indexB === -1) {
+            return 0; // Keep original order for items not in baseCollections
+        }
+        if (indexA === -1) {
+            return 1; // a is not in base, so it goes to the end
+        }
+        if (indexB === -1) {
+            return -1; // b is not in base, so it goes to the end
+        }
+        return indexA - indexB;
     });
 
     return result;