@firecms/core 3.0.0-canary.218 → 3.0.0-canary.219

package/dist/types/fields.d.ts

@@ -143,6 +143,7 @@ export interface FormContext<M extends Record<string, any> = any> {
      * operate with it
      */
     formex: FormexController<M>;
+    disabled: boolean;
 }
 /**
  * In case you need to render a field bound to a Property inside your

package/dist/types/plugins.d.ts

@@ -159,6 +159,7 @@ export interface PluginFormActionProps<USER extends User = User, EC extends Enti
     path: string;
     status: EntityStatus;
     collection: EC;
+    disabled: boolean;
     formContext?: FormContext<any>;
     context: FireCMSContext<USER>;
     currentEntityId?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.218",
+  "version": "3.0.0-canary.219",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.218",
-    "@firecms/formex": "^3.0.0-canary.218",
-    "@firecms/ui": "^3.0.0-canary.218",
+    "@firecms/editor": "^3.0.0-canary.219",
+    "@firecms/formex": "^3.0.0-canary.219",
+    "@firecms/ui": "^3.0.0-canary.219",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
@@ -105,7 +105,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "c0efa30360fec2f9be27b9d47bc6a800b17d34f2",
+  "gitHead": "dc68bdab1dd594afc37aee70291e031f83996358",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -275,6 +275,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         formex,
         status: "existing",
         openEntityMode: "side_panel",
+        disabled: false,
     };
 
     const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection?.properties ?? {} as ResolvedProperties, propertyKey as string);

package/src/core/EntityEditView.tsx

@@ -98,6 +98,10 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         }
     }, [authController, entity, status]);
 
+    console.log({
+        canEdit
+    })
+
     if ((dataLoading && !cachedValues) || (!entity || canEdit === undefined) && (status === "existing" || status === "copy")) {
         return <CircularProgressCenter/>;
     }
@@ -117,7 +121,6 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
     />;
 }
 
-
 export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        path,
                                                                        entityId,
@@ -215,6 +218,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             const formexStub = createFormexStub<M>(usedEntity?.values ?? {} as M);
             const usedFormContext: FormContext = formContext ?? {
                 entityId,
+                disabled: false,
                 openEntityMode: layout,
                 status: status,
                 values: usedEntity?.values ?? {},
@@ -315,61 +319,57 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         }
     };
 
-    const entityView = !canEdit ?
-        (
-            <div
-                className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", !mainViewVisible ? "hidden" : "")}>
-                <div
-                    className={cls("relative flex flex-col max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
-                    <Typography className={"mt-16 mb-8 mx-8"} variant={"h4"}>
-                        {collection.singularName ?? collection.name}
-                    </Typography>
-                    <EntityView
-                        className={"px-8 h-full overflow-auto"}
-                        entity={entity as Entity<M>}
-                        path={path}
-                        collection={collection}/>
-                </div>
-            </div>
-)
-:
-    (
-        <EntityForm<M>
-            collection={collection}
-            path={path}
-            entityId={entityId ?? usedEntity?.id}
-            onValuesModified={onValuesModified}
-            entity={entity}
-            initialDirtyValues={cachedDirtyValues}
-                openEntityMode={layout}
-                forceActionsAtTheBottom={actionsAtTheBottom}
-                initialStatus={status}
-                className={cls(!mainViewVisible ? "hidden" : "", formProps?.className)}
-                EntityFormActionsComponent={EntityEditViewFormActions}
-                {...formProps}
-                onEntityChange={(entity) => {
-                    setUsedEntity(entity);
-                    formProps?.onEntityChange?.(entity);
-                }}
-                onStatusChange={(status) => {
-                    setStatus(status);
-                    formProps?.onStatusChange?.(status);
-                }}
-                onFormContextReady={(formContext) => {
-                    setFormContext(formContext);
-                    formProps?.onFormContextReady?.(formContext);
-                }}
-                onSaved={(params) => {
-                    const res = {
-                        ...params,
-                        selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
-                    };
-                    onSaved?.(res);
-                    formProps?.onSaved?.(res);
-                }}
-                Builder={selectedSecondaryForm?.Builder}
-            />
-        );
+    const entityReadOnlyView = <div
+        className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", (canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : "")}>
+        <div
+            className={cls("relative flex flex-col max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
+            <Typography className={"mt-16 mb-8 mx-8"} variant={"h4"}>
+                {collection.singularName ?? collection.name}
+            </Typography>
+            <EntityView
+                className={"px-8 h-full overflow-auto"}
+                entity={entity as Entity<M>}
+                path={path}
+                collection={collection}/>
+        </div>
+    </div>;
+
+    const entityView = <EntityForm<M>
+        collection={collection}
+        path={path}
+        entityId={entityId ?? usedEntity?.id}
+        onValuesModified={onValuesModified}
+        entity={entity}
+        initialDirtyValues={cachedDirtyValues}
+        openEntityMode={layout}
+        forceActionsAtTheBottom={actionsAtTheBottom}
+        initialStatus={status}
+        className={cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className)}
+        EntityFormActionsComponent={EntityEditViewFormActions}
+        disabled={!canEdit}
+        {...formProps}
+        onEntityChange={(entity) => {
+            setUsedEntity(entity);
+            formProps?.onEntityChange?.(entity);
+        }}
+        onStatusChange={(status) => {
+            setStatus(status);
+            formProps?.onStatusChange?.(status);
+        }}
+        onFormContextReady={(formContext) => {
+            setFormContext(formContext);
+            formProps?.onFormContextReady?.(formContext);
+        }}
+        onSaved={(params) => {
+            const res = {
+                ...params,
+                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
+            };
+            onSaved?.(res);
+            formProps?.onSaved?.(res);
+        }}
+        Builder={selectedSecondaryForm?.Builder}
+    />;
 
     const subcollectionTabs = subcollections && subcollections.map((subcollection) =>
         <Tab
@@ -436,7 +436,10 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             ? <div className="w-full pt-12 pb-16 px-4 sm:px-8 md:px-10">
                 <CircularProgressCenter/>
             </div>
-            : entityView}
+            : <>
+                {entityReadOnlyView}
+                {entityView}
+            </>}
 
         {jsonView}
 

package/src/form/EntityForm.tsx

@@ -73,6 +73,10 @@ export type EntityFormProps<M extends Record<string, any>> = {
     onEntityChange?: (entity: Entity<M>) => void;
     formex?: FormexController<M>;
     openEntityMode?: "side_panel" | "full_screen";
+    /**
+     * If true, the form will be disabled and no actions will be available
+     */
+    disabled?: boolean;
     /**
      * Include the copy and delete actions in the form
      */
@@ -90,7 +94,6 @@ export type EntityFormProps<M extends Record<string, any>> = {
     children?: React.ReactNode;
 };
 
-
 export function EntityForm<M extends Record<string, any>>({
                                                               path,
                                                               entityId: entityIdProp,
@@ -108,6 +111,7 @@ export function EntityForm<M extends Record<string, any>>({
                                                               onEntityChange,
                                                               openEntityMode = "full_screen",
                                                               formex: formexProp,
+                                                              disabled: disabledProp,
                                                               Builder,
                                                               EntityFormActionsComponent = EntityFormActions,
                                                               showDefaultActions = true,
@@ -115,6 +119,8 @@ export function EntityForm<M extends Record<string, any>>({
                                                               children
                                                           }: EntityFormProps<M>) {
 
+    console.log("disabledProp", disabledProp);
+
     if (collection.customId && collection.formAutoSave) {
         console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
     }
@@ -402,6 +408,9 @@ export function EntityForm<M extends Record<string, any>>({
         });
     };
 
+    const disabled = formex.isSubmitting || Boolean(disabledProp);
+    console.log("disabled", disabled);
+
     const formContext: FormContext<M> = {
         // @ts-ignore
         setFieldValue: useCallback(formex.setFieldValue, []),
@@ -414,7 +423,8 @@ export function EntityForm<M extends Record<string, any>>({
         entity,
         savingError,
         status,
-        openEntityMode
+        openEntityMode,
+        disabled
     };
 
     useEffect(() => {
@@ -431,6 +441,7 @@ export function EntityForm<M extends Record<string, any>>({
     const pluginActions: React.ReactNode[] = [];
     const plugins = customizationController.plugins;
 
+    const actionsDisabled = disabled || formex.isSubmitting || (status === "existing" && !formex.dirty) || Boolean(disabledProp);
     if (plugins && collection) {
         const actionProps: PluginFormActionProps = {
             entityId,
@@ -440,7 +451,8 @@ export function EntityForm<M extends Record<string, any>>({
             context,
             currentEntityId: entityId,
             formContext,
-            openEntityMode
+            openEntityMode,
+            disabled: actionsDisabled,
         };
         pluginActions.push(...plugins.map((plugin) => (
             plugin.form?.Actions
@@ -548,7 +560,7 @@ export function EntityForm<M extends Record<string, any>>({
                             !!underlyingChanges &&
                             Object.keys(underlyingChanges).includes(key) &&
                             formex.touched[key];
-                        const disabled = (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
+                        const disabled = disabledProp || (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
                         const hidden = isHidden(property);
                         if (hidden) return null;
                         const widthPercentage = property.widthPercentage ?? 100;
@@ -658,8 +670,6 @@ export function EntityForm<M extends Record<string, any>>({
             onIdChange(entityId);
     }, [entityId, onIdChange]);
 
-    const disabled = formex.isSubmitting || (!formex.dirty && status === "existing");
-
     if (!resolvedCollection || !path) {
         throw Error("INTERNAL: Collection and path must be defined in form context");
     }
@@ -671,7 +681,7 @@ export function EntityForm<M extends Record<string, any>>({
         layout={forceActionsAtTheBottom ? "bottom" : "side"}
         savingError={savingError}
         formex={formex}
-        disabled={disabled}
+        disabled={actionsDisabled}
         status={status}
         pluginActions={pluginActions ?? []}
         openEntityMode={openEntityMode}

package/src/form/PropertyFieldBinding.tsx

@@ -87,7 +87,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
      autoFocus,
      index,
      size,
-     onPropertyChange
+     onPropertyChange,
  }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
 
     const authController = useAuthController();
@@ -112,7 +112,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     authController
                 });
 
-                const disabled = disabledProp || isReadOnly(resolvedProperty) || Boolean(resolvedProperty?.disabled);
+                const disabled = disabledProp || isReadOnly(resolvedProperty) || Boolean(resolvedProperty?.disabled) || context.disabled;
 
                 if (resolvedProperty === null || isHidden(resolvedProperty)) {
                     return <></>;

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -66,7 +66,7 @@ export function SelectFieldBinding<T extends EnumType>({
                         />
                     </PropertyIdCopyTooltip>}
                 endAdornment={
-                    property.clearable && <IconButton
+                    property.clearable && !disabled && <IconButton
                         onClick={handleClearClick}>
                         <CloseIcon/>
                     </IconButton>

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -63,7 +63,7 @@ export function StorageUploadFieldBinding({
         throw new Error("StorageUploadFieldBinding: Entity id is null");
 
     const storageSource = useStorageSource(context.collection);
-    const disabled = isReadOnly(property) || !!property.disabled || isSubmitting;
+    const disabled = isReadOnly(property) || !!property.disabled || isSubmitting || context.disabled;
 
     const {
         internalValue,

package/src/types/fields.tsx

@@ -176,6 +176,8 @@ export interface FormContext<M extends Record<string, any> = any> {
      * operate with it
      */
     formex: FormexController<M>;
+
+    disabled: boolean;
 }
 
 /**

package/src/types/plugins.tsx

@@ -192,6 +192,7 @@ export interface PluginFormActionProps<USER extends User = User, EC extends Enti
     path: string;
     status: EntityStatus;
     collection: EC;
+    disabled: boolean;
     formContext?: FormContext<any>;
     context: FireCMSContext<USER>;
     currentEntityId?: string;

package/src/util/resolutions.ts

@@ -447,7 +447,7 @@ export function resolvedSelectedEntityView<M extends Record<string, any>>(
     const resolvedEntityViews = customViews ? customViews
             .map(e => resolveEntityView(e, customizationController.entityViews))
             .filter((e): e is EntityCustomView<M> => Boolean(e))
-            .filter((e) => canEdit || !e.includeActions)
+            // .filter((e) => canEdit || !e.includeActions)
         : [];
 
     const selectedEntityView = resolvedEntityViews.find(e => e.key === selectedTab);