@firecms/collection_editor 3.0.0-alpha.21 → 3.0.0-alpha.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firecms/collection_editor",
-  "version": "3.0.0-alpha.21",
+  "version": "3.0.0-alpha.25",
   "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.21",
-    "@firecms/schema_inference": "^3.0.0-alpha.21"
+    "@firecms/data_import": "^3.0.0-alpha.25",
+    "@firecms/schema_inference": "^3.0.0-alpha.25"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -26,7 +26,8 @@
   "scripts": {
     "dev": "vite",
     "test": "jest",
-    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json"
+    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
+    "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f"
   },
   "eslintConfig": {
     "extends": [
@@ -75,5 +76,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4a18047fa8fd4ddaa157ec2d415fcab89cf34d65"
+  "gitHead": "8bce80c65696930df7a8003b0b5d0310f595d46d"
 }

package/src/ConfigControllerProvider.tsx

@@ -2,12 +2,20 @@ import React, { PropsWithChildren, useCallback, useEffect } from "react";
 import equal from "react-fast-compare"
 
 import { CollectionsConfigController } from "./types/config_controller";
-import { EntityCollection, useNavigationContext, User } from "@firecms/core";
+import {
+    EntityCollection,
+    Property,
+    useFireCMSContext,
+    useNavigationContext,
+    User,
+    useSnackbarController
+} from "@firecms/core";
 import { CollectionEditorDialog } from "./components/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";
 
 export const ConfigControllerContext = React.createContext<CollectionsConfigController>({} as any);
 export const CollectionEditorContext = React.createContext<CollectionEditorController>({} as any);
@@ -63,6 +71,8 @@ export const ConfigControllerProvider = React.memo(
 
         const navigation = useNavigationContext();
         const navigate = useNavigate();
+        const snackbarController = useSnackbarController();
+        const { fields: customFields } = useFireCMSContext();
 
         const {
             collections
@@ -89,6 +99,18 @@ export const ConfigControllerProvider = React.memo(
                 group?: string,
                 name?: string
             },
+            redirect: boolean
+        }>();
+
+        const [currentPropertyDialog, setCurrentPropertyDialog] = React.useState<{
+            propertyKey?: string,
+            property?: Property,
+            namespace?: string,
+            parentCollection?: EntityCollection,
+            currentPropertiesOrder?: string[],
+            editedCollectionPath: string,
+            fullPath?: string,
+            parentPathSegments: string[],
         }>();
 
         const defaultConfigPermissions: CollectionEditorPermissionsBuilder = useCallback(() => ({
@@ -97,7 +119,12 @@ export const ConfigControllerProvider = React.memo(
             deleteCollections: true
         }), []);
 
-        const editCollection = useCallback(({ path, fullPath, parentPathSegments, parentCollection }: {
+        const editCollection = useCallback(({
+                                                path,
+                                                fullPath,
+                                                parentPathSegments,
+                                                parentCollection
+                                            }: {
             path?: string,
             fullPath?: string,
             parentPathSegments: string[],
@@ -108,24 +135,65 @@ export const ConfigControllerProvider = React.memo(
                 fullPath,
                 parentPathSegments,
                 isNewCollection: false,
+                parentCollection,
+                redirect: false
+            });
+        }, []);
+
+        const editProperty = useCallback(({
+                                              propertyKey,
+                                              property,
+                                              editedCollectionPath,
+                                              currentPropertiesOrder,
+                                              parentPathSegments,
+                                              parentCollection
+                                          }: {
+            propertyKey?: string,
+            property?: Property,
+            currentPropertiesOrder?: string[],
+            editedCollectionPath: string,
+            parentPathSegments: string[],
+            parentCollection?: EntityCollection
+        }) => {
+            // namespace is all the path until the last dot
+            const namespace = propertyKey && propertyKey.includes(".")
+                ? propertyKey.substring(0, propertyKey.lastIndexOf("."))
+                : undefined;
+            const propertyKeyWithoutNamespace = propertyKey && propertyKey.includes(".")
+                ? propertyKey.substring(propertyKey.lastIndexOf(".") + 1)
+                : propertyKey;
+            setCurrentPropertyDialog({
+                propertyKey: propertyKeyWithoutNamespace,
+                property,
+                namespace,
+                currentPropertiesOrder,
+                editedCollectionPath,
+                parentPathSegments,
                 parentCollection
             });
         }, []);
 
-        const createCollection = React.useCallback(({ parentPathSegments, parentCollection, initialValues }: {
+        const createCollection = React.useCallback(({
+                                                        parentPathSegments,
+                                                        parentCollection,
+                                                        initialValues,
+                                                        redirect
+                                                    }: {
             parentPathSegments: string[],
             parentCollection?: EntityCollection<any, any, any>
             initialValues?: {
                 group?: string,
                 path?: string,
                 name?: string
-            }
+            },
+            redirect: boolean
         }) => {
             setCurrentDialog({
                 isNewCollection: true,
                 parentPathSegments,
                 parentCollection,
-                initialValues
+                initialValues,
+                redirect
             });
         }, []);
 
@@ -145,6 +213,7 @@ export const ConfigControllerProvider = React.memo(
                     value={{
                         editCollection,
                         createCollection,
+                        editProperty,
                         configPermissions: configPermissions ?? defaultConfigPermissions,
                         rootPathSuggestions
                     }}>
@@ -163,13 +232,67 @@ export const ConfigControllerProvider = React.memo(
                         pathSuggestions={getPathSuggestions}
                         getUser={getUser}
                         handleClose={(collection) => {
-                            if (collection && currentDialog?.isNewCollection && !currentDialog.parentPathSegments.length) {
-                                const url = navigation.buildUrlCollectionPath(collection.alias ?? collection.path);
-                                navigate(url);
+                            if (currentDialog?.redirect) {
+                                if (collection && currentDialog?.isNewCollection && !currentDialog.parentPathSegments.length) {
+                                    const url = navigation.buildUrlCollectionPath(collection.alias ?? collection.path);
+                                    navigate(url);
+                                }
                             }
                             setCurrentDialog(undefined);
                         }}/>
 
+                    {/* Used for editing properties*/}
+                    <PropertyFormDialog
+                        open={Boolean(currentPropertyDialog)}
+                        includeIdAndName={true}
+                        existingProperty={Boolean(currentPropertyDialog?.propertyKey)}
+                        autoUpdateId={!currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey}
+                        autoOpenTypeSelect={!currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey}
+                        inArray={false}
+                        getData={getData && currentDialog?.fullPath ? () => getData(currentDialog.fullPath!) : undefined}
+                        onPropertyChanged={({
+                                                id,
+                                                property
+                                            }) => {
+                            if (!currentPropertyDialog) return;
+                            if (!id) return;
+                            const newProperty = !(currentPropertyDialog.propertyKey);
+                            return collectionConfigController.saveProperty({
+                                path: currentPropertyDialog?.editedCollectionPath,
+                                property,
+                                propertyKey: id,
+                                newPropertiesOrder: newProperty && currentPropertyDialog.currentPropertiesOrder ? [...currentPropertyDialog.currentPropertiesOrder, id] : undefined,
+                                namespace: currentPropertyDialog.namespace,
+                                parentPathSegments: currentPropertyDialog.parentPathSegments
+                            })
+                                .catch((e) => {
+                                    console.error(e);
+                                    snackbarController.open({
+                                        type: "error",
+                                        message: "Error persisting property: " + (e.message ?? "Details in the console")
+                                    });
+                                    return false;
+                                });
+                        }}
+                        onPropertyChangedImmediate={false}
+                        onDelete={() => {
+                        }}
+                        onError={() => {
+                        }}
+                        onOkClicked={() => {
+                            setCurrentPropertyDialog(undefined);
+                        }}
+                        onCancel={() => {
+                            setCurrentPropertyDialog(undefined);
+                        }}
+                        initialErrors={{}}
+                        forceShowErrors={false}
+                        existingPropertyKeys={[]}
+                        allowDataInference={true}
+                        customFields={customFields}
+                        property={currentPropertyDialog?.property}
+                        propertyKey={currentPropertyDialog?.propertyKey}/>
+
                 </CollectionEditorContext.Provider>
 
             </ConfigControllerContext.Provider>

package/src/components/CollectionViewHeaderAction.tsx

@@ -0,0 +1,38 @@
+import { IconButton, ResolvedProperty, SettingsIcon, Tooltip } from "@firecms/core";
+import React from "react";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+
+export function CollectionViewHeaderAction({
+                                               propertyKey,
+                                               onHover,
+                                               property,
+                                               fullPath,
+                                               parentPathSegments
+                                           }: {
+    property: ResolvedProperty,
+    propertyKey: string,
+    onHover: boolean,
+    fullPath: string,
+    parentPathSegments: string[],
+}) {
+
+    const collectionEditorController = useCollectionEditorController();
+
+    return (
+        <Tooltip title={"Edit"}>
+            <IconButton
+                className={onHover ? "bg-white dark:bg-gray-950" : "hidden"}
+                onClick={() => {
+                    collectionEditorController.editProperty({
+                        propertyKey,
+                        property,
+                        editedCollectionPath: fullPath,
+                        parentPathSegments
+                    });
+                }}
+                size={"small"}>
+                <SettingsIcon size={"small"}/>
+            </IconButton>
+        </Tooltip>
+    )
+}

package/src/components/MissingReferenceWidget.tsx

@@ -13,7 +13,8 @@ export function MissingReferenceWidget({ path: pathProp }: {
                 onClick={() => {
                     collectionEditor.createCollection({
                         initialValues: { path, name: unslugify(path) },
-                        parentPathSegments
+                        parentPathSegments,
+                        redirect: false
                     });
                 }}>
             Create

package/src/components/NewCollectionCard.tsx

@@ -23,7 +23,8 @@ export function NewCollectionCard({
               onClick={collectionEditorController && canCreateCollections
                   ? () => collectionEditorController.createCollection({
                       initialValues: group ? { group } : undefined,
-                      parentPathSegments: []
+                      parentPathSegments: [],
+                        redirect: true
                   })
                   : undefined}>
 

package/src/components/PropertyAddColumnComponent.tsx

@@ -0,0 +1,39 @@
+import { AddIcon, EntityCollection, getDefaultPropertiesOrder, Tooltip, useAuthController } from "@firecms/core";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+
+export function PropertyAddColumnComponent({
+                                               fullPath,
+                                               parentPathSegments,
+                                               collection
+                                           }: {
+    fullPath: string,
+    parentPathSegments: string[],
+    collection: EntityCollection;
+}) {
+
+    const authController = useAuthController();
+    const collectionEditorController = useCollectionEditorController();
+    const canEditCollection = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+            collection
+        }).editCollections
+        : true;
+
+    return (
+        <Tooltip 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 hover:bg-gray-100 dark:hover:bg-gray-950"}
+                // className={onHover ? "bg-white dark:bg-gray-950" : undefined}
+                onClick={() => {
+                    collectionEditorController.editProperty({
+                        editedCollectionPath: fullPath,
+                        parentPathSegments,
+                        currentPropertiesOrder: getDefaultPropertiesOrder(collection)
+                    });
+                }}>
+                <AddIcon color={"inherit"}/>
+            </div>
+        </Tooltip>
+    )
+}

package/src/components/RootCollectionSuggestions.tsx

@@ -38,7 +38,8 @@ export function RootCollectionSuggestions() {
                                 onClick={collectionEditorController && canCreateCollections
                                     ? () => collectionEditorController.createCollection({
                                         initialValues: { path, name: unslugify(path) },
-                                        parentPathSegments: []
+                                        parentPathSegments: [],
+                                        redirect: true
                                     })
                                     : undefined}
                                 size="small">

package/src/components/collection_editor/CollectionDetailsForm.tsx

@@ -242,6 +242,7 @@ export function CollectionDetailsForm({
                                 <div className={"col-span-12"}>
                                     <Field name={"alias"}
                                            as={DebouncedTextField}
+                                           disabled={!isNewCollection}
                                            label={"Alias"}
                                            validate={validateAlias}
                                            error={touched.alias && Boolean(errors.alias)}/>

package/src/components/collection_editor/CollectionEditorDialog.tsx

@@ -308,7 +308,7 @@ export function CollectionEditorDialogInternal<M extends {
             if (!isNewCollection) {
                 saveCollection(newCollectionState).then(() => {
                     formikHelpers.resetForm({ values: initialValues });
-                    setNextMode();
+                    // setNextMode();
                     handleClose(newCollectionState);
                 });
                 return;

package/src/components/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -378,7 +378,7 @@ export function CollectionPropertiesEditorForm({
                             <PropertyForm
                                 inArray={false}
                                 key={`edit_view_${selectedPropertyIndex}`}
-                                existing={!isNewCollection}
+                                existingProperty={!isNewCollection}
                                 autoUpdateId={false}
                                 allowDataInference={!isNewCollection}
                                 autoOpenTypeSelect={false}
@@ -414,7 +414,7 @@ export function CollectionPropertiesEditorForm({
                 key={`edit_view_${selectedPropertyIndex}`}
                 autoUpdateId={isNewCollection}
                 allowDataInference={!isNewCollection}
-                existing={true}
+                existingProperty={true}
                 autoOpenTypeSelect={false}
                 propertyKey={selectedPropertyKey}
                 propertyNamespace={selectedPropertyNamespace}
@@ -440,7 +440,7 @@ export function CollectionPropertiesEditorForm({
             {/* This is the dialog used for new properties*/}
             <PropertyFormDialog
                 inArray={false}
-                existing={false}
+                existingProperty={false}
                 autoOpenTypeSelect={true}
                 autoUpdateId={true}
                 forceShowErrors={showErrors}