@dashadmin/dash-auto-admin 1.3.25 → 1.3.26

package/src/DashAutoTabbedForm.review.tsx

@@ -0,0 +1,262 @@
+/* TODO: commented code note - handling of axios error response to parse the error to the appropiate format the react-hook-form was disabled without further testing.  */
+import { useCallback, useEffect, useState } from 'react';
+import {
+	useResourceContext,
+	useRecordContext,
+	TabbedForm,
+	SimpleForm,
+} from 'react-admin';
+
+import { DashAutoFormGroups, IDashAutoAdminResourceConfig, groupByTabs, validate } from '.';
+import { DashAutoFormTabs } from '.';
+import { DashAutoFormLayout } from '.';
+import { useDataProvider } from 'react-admin';
+
+import { IDashAutoAdminForm } from './DashAutoAdminForm';
+import axios from 'axios';
+import { useSelector } from 'react-redux';
+import { IDASHAppState } from 'dash-admin-state';
+import { Loading } from 'react-admin';
+import { useFormContext, useFormState } from 'react-hook-form';
+
+
+export type IDashAutoTabbedForm = IDashAutoAdminForm;
+
+/**
+ * The `DashAutoTabbedForm` component is a React functional component that renders a tabbed form for a Dash Auto Admin resource.
+ * It handles the logic for creating, updating, and submitting the form data, as well as managing the form mode (create or edit).
+ * The component uses the `react-admin` library to provide the necessary functionality for the form.
+ *
+ * @param {IDashAutoTabbedForm} props - The component props, including the resource configuration, submit and error handlers, toolbar, mode, and whether the form is being rendered in a drawer.
+ * @returns {JSX.Element} - The rendered tabbed form component.
+ */
+const DashAutoTabbedForm: React.FC<IDashAutoTabbedForm> = ({
+	resourceConfig,
+	onSubmit,
+	beforeSubmit,
+	onError,
+	toolbar,
+	mode,
+	isDrawer = false,
+}) => {
+    
+	const resource = useResourceContext();
+	const record = useRecordContext();
+    const debug = true;
+
+    useEffect(() => {
+
+        console.log("Dash Auto Tabbed rerendered");
+    },[]);
+	
+       // Add this to access form methods including setError
+       const formContext = useFormContext();
+    
+       const dataProvider = useDataProvider();
+ 
+	let formGroupMode = mode === 'create' && resourceConfig?.formGroupModes?.create
+		? resourceConfig.formGroupModes.create
+		: mode === 'edit' && resourceConfig?.formGroupModes?.edit
+		? resourceConfig.formGroupModes.edit
+		: resourceConfig?.formGroupMode
+		? resourceConfig.formGroupMode
+		: 'tabs';
+
+    // Fallback to layout if only one tab
+    if (formGroupMode === "tabs" && groupByTabs(resourceConfig.schema).length === 1) {
+        formGroupMode = 'layout';
+    }
+    const formData = useSelector(
+        (
+            state: IDASHAppState<any, any, IDashAutoAdminResourceConfig>,
+        ) => {
+            
+            return state.formData || {};
+        },
+    );
+
+	const onCreateSave = useCallback(
+		async (values) => {
+          
+            if (debug) console.log('onCreateSave called with values:', values);
+            if (!resource) {
+                throw new Error('Resource is required');
+            }
+
+			try {
+                if (beforeSubmit) {
+                    values = beforeSubmit(values);
+                }
+                
+         
+
+                const { data } = await dataProvider.create(resource, { 
+                    data: values 
+                });
+               
+                if (onSubmit) {
+                    onSubmit(data);
+                }
+			} catch (error) {
+             
+				if (onError) {
+					onError(error);
+				}
+
+			
+			}
+		},
+		[resource, beforeSubmit, dataProvider, onSubmit, onError]
+	);
+
+	const onUpdateSave = useCallback(
+		async (values) => {
+        
+            if (debug) console.log('onUpdateSave called with values:', values);
+			try {
+				if (beforeSubmit) {
+					values = beforeSubmit(values);
+				}
+				
+
+                const { data } = await dataProvider.update(resource+"/"+record.id, { 
+                    data: values 
+                });
+       
+				if (onSubmit) {
+					onSubmit(data);
+				}
+			} catch (error) {
+     
+				if (onError) {
+					onError(error);
+				}
+             
+			}
+		},
+		[resource, record, beforeSubmit, dataProvider, onSubmit, onError]
+	);
+
+	let onSave = onCreateSave;	
+    switch (mode) {
+		case 'edit':
+			onSave = onUpdateSave;
+			break;
+		case 'create':
+			onSave = onCreateSave;
+			break;
+	}
+
+
+    if(!formData) return <Loading/>
+
+	if (
+		mode === 'create' &&
+		typeof resourceConfig?.createComponent === 'function'
+	) {
+		return (
+			<SimpleForm
+				key="create-form"
+				//redirect={false}
+				toolbar={toolbar || null}
+				onSubmit={onSave}
+				validate={validate(resourceConfig.schema)}
+                reValidateMode="onBlur"
+				className={'auto-admin-grouped-form'}
+             
+			>
+				{resourceConfig.createComponent(resourceConfig)}
+			</SimpleForm>
+		);
+	}
+
+	if (mode === 'edit' && typeof resourceConfig?.editComponent === 'function') {
+		return (
+			<SimpleForm
+				key="edit-form"
+				warnWhenUnsavedChanges
+				//redirect={false}
+				toolbar={toolbar || null}
+				onSubmit={onSave}
+				validate={validate(resourceConfig.schema)}
+                reValidateMode="onBlur"
+				className={'auto-admin-grouped-form'}
+               
+			>
+				{resourceConfig.editComponent(resourceConfig)}
+			</SimpleForm>
+		);
+	}
+
+	if (formGroupMode === 'tabs' && groupByTabs(resourceConfig.schema).length > 1) {
+        //console.log(record,formData, {...record,...formData});
+       
+		return (
+			<>
+			<TabbedForm
+				key="tabbed-form"
+				toolbar={toolbar || null}
+				onSubmit={onSave}
+				validate={validate(resourceConfig.schema)}
+				className={'tabbed-form-custom dash-auto-admin-tabbed-form'}
+                resetOptions={{ keepDirtyValues: true }}
+                syncWithLocation={resourceConfig.syncTabsWithLocation || false}
+                
+                defaultValues={mode === "create" ? formData : {...record,...formData}}
+                
+			>
+                {/* It has to be a function and not a Functional component, because it returns an array of JSX elements without parent container */}
+                {/* The downside, is can't implement hooks within the DashAutoFormTabs component */}
+				{DashAutoFormTabs({
+					schema: resourceConfig.schema,
+					resourceConfig: resourceConfig,
+					options: { mode: mode, isDrawer: isDrawer },
+				})}
+			</TabbedForm>
+      
+            </>
+		);
+	}
+
+	if (formGroupMode === 'groups') {
+		return (
+			<SimpleForm
+				key="groups-form"
+				//redirect={false}
+				toolbar={toolbar || null}
+				onSubmit={onSave}
+				validate={validate(resourceConfig.schema)}
+                reValidateMode="onBlur"
+				className={'auto-admin-grouped-form'}
+            
+			>
+				{DashAutoFormGroups({schema:resourceConfig.schema, resourceConfig, options:{
+					mode: mode,
+					isDrawer: isDrawer,
+				}})}
+			</SimpleForm>
+		);
+	}
+
+	if (formGroupMode === 'layout') {
+		return (
+			<SimpleForm
+				key="layout-form"
+				//redirect={false}
+				toolbar={toolbar || null}
+				onSubmit={onSave}
+				validate={validate(resourceConfig.schema)}
+                reValidateMode="onBlur"
+				className={'auto-admin-grouped-form'}
+                
+			>
+				{DashAutoFormLayout({schema:resourceConfig.schema, resourceConfig:resourceConfig, options:{
+					mode: mode,
+					isDrawer: isDrawer,
+				}})}
+			</SimpleForm>
+		);
+	}
+};
+
+export default DashAutoTabbedForm;

package/src/DashAutoTabbedForm.tsx

@@ -0,0 +1,324 @@
+/* TODO: commented code note - handling of axios error response to parse the error to the appropiate format the react-hook-form was disabled without further testing.  */
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import {
+	useResourceContext,
+	useRecordContext,
+	TabbedForm,
+	SimpleForm,
+} from 'react-admin';
+
+import { DashAutoFormGroups, IDashAutoAdminResourceConfig, groupByTabs, validate } from '.';
+import { DashAutoFormTabs } from '.';
+import { DashAutoFormLayout } from '.';
+import { useDataProvider } from 'react-admin';
+
+import { IDashAutoAdminForm } from './DashAutoAdminForm';
+import { DashAutoAdminFormProvider } from './context/DashAutoAdminFormContext';
+
+import { useSelector } from 'react-redux';
+//import { IDASHAppState } from 'dash-admin-state';
+import { Loading } from 'react-admin';
+import { useFormContext, useFormState } from 'react-hook-form';
+
+
+export type IDashAutoTabbedForm = IDashAutoAdminForm;
+
+/**
+ * The `DashAutoTabbedForm` component is a React functional component that renders a tabbed form for a Dash Auto Admin resource.
+ * It handles the logic for creating, updating, and submitting the form data, as well as managing the form mode (create or edit).
+ * The component uses the `react-admin` library to provide the necessary functionality for the form.
+ *
+ * @param {IDashAutoTabbedForm} props - The component props, including the resource configuration, submit and error handlers, toolbar, mode, and whether the form is being rendered in a drawer.
+ * @returns {JSX.Element} - The rendered tabbed form component.
+ */
+const DashAutoTabbedForm: React.FC<IDashAutoTabbedForm> = ({
+	resourceConfig,
+	onSubmit,
+	beforeSubmit,
+	onError,
+	toolbar,
+	mode,
+	isDrawer = false,
+	locale,
+}) => {
+    
+	const resource = useResourceContext();
+	const record = useRecordContext();
+    const debug = true;
+    const dataProvider = useDataProvider();
+ 
+	let formGroupMode = mode === 'create' && resourceConfig?.formGroupModes?.create
+		? resourceConfig.formGroupModes.create
+		: mode === 'edit' && resourceConfig?.formGroupModes?.edit
+		? resourceConfig.formGroupModes.edit
+		: resourceConfig?.formGroupMode
+		? resourceConfig.formGroupMode
+		: 'tabs';
+
+    // Calculate the number of visible tabs for the current mode
+    const getVisibleTabCount = () => {
+        const tabGroups = groupByTabs(resourceConfig.schema);
+        return tabGroups.filter((group) => {
+            const filteredAttributes = group.filter((attr) => {
+                if (mode === 'create') {
+                    return attr?.inCreate !== false;
+                } else if (mode === 'edit') {
+                    return attr?.inEdit !== false;
+                }
+                // For any other mode, include all
+                return true;
+            });
+            return filteredAttributes.length > 0;
+        }).length;
+    };
+
+    const visibleTabCount = useMemo(() => getVisibleTabCount(), [resourceConfig.schema, mode, locale]);
+
+    // Fallback to layout if only one visible tab for the current mode
+    if (formGroupMode === "tabs" && visibleTabCount <= 1) {
+        formGroupMode = 'layout';
+    }
+    const formData = useSelector(
+        (
+            //state: IDASHAppState<any, any, IDashAutoAdminResourceConfig>,
+            state: any
+        ) => {
+            
+            return state.formData || {};
+        },
+    );
+
+	const onCreateSave = useCallback(
+		async (values) => {
+          
+            if (debug) console.log('onCreateSave called with values:', values);
+            if (!resource) {
+                throw new Error('Resource is required');
+            }
+
+			try {
+                if (beforeSubmit) {
+                    values = beforeSubmit(values);
+                }
+                
+         
+
+                const { data } = await dataProvider.create(resource, { 
+                    data: values 
+                });
+               
+                if (onSubmit) {
+                    onSubmit(data);
+                }
+			} catch (error) {
+             
+				if (onError) {
+					onError(error);
+				}
+
+			
+			}
+		},
+		[resource, beforeSubmit, dataProvider, onSubmit, onError]
+	);
+
+	const onUpdateSave = useCallback(
+		async (values) => {
+        
+            if (debug) console.log('onUpdateSave called with values:', values);
+			try {
+				if (beforeSubmit) {
+					values = beforeSubmit(values);
+				}
+				
+
+                const { data } = await dataProvider.update(resource+"/"+record.id, { 
+                    id: record?.id,
+                    data: values,
+                    previousData: record
+                });
+       
+				if (onSubmit) {
+					onSubmit(data);
+				}
+			} catch (error) {
+     
+				if (onError) {
+					onError(error);
+				}
+             
+			}
+		},
+		[resource, record, beforeSubmit, dataProvider, onSubmit, onError]
+	);
+
+	let onSave = onCreateSave;	
+    switch (mode) {
+		case 'edit':
+			onSave = onUpdateSave;
+			break;
+		case 'create':
+			onSave = onCreateSave;
+			break;
+	}
+
+    // 🔧 FIX: Memoize ContextComponent to prevent unstable reference on each render
+    // Previously this was creating a new component reference on each render,
+    // causing React to unmount and remount the entire component tree
+    const ContextComponent = useMemo(() => {
+        return resourceConfig.contextComponent || (({children}: {children: ReactNode}) => <>{children}</>);
+    }, [resourceConfig.contextComponent, locale]);
+
+    // 🔧 FIX: Memoize the context value to prevent unnecessary re-renders
+    // The onSave and mode values only change when their dependencies change
+    const formContextValue = useMemo(() => ({ onSave, mode, locale }), [onSave, mode, locale]);
+  
+
+    if(!formData) return <Loading/>
+
+	if (
+		mode === 'create' &&
+		typeof resourceConfig?.createComponent === 'function'
+	) {
+		return (
+			<SimpleForm
+				key="create-form"
+				//redirect={false}
+                
+				toolbar={toolbar || null}
+				onSubmit={onSave}
+				validate={validate(resourceConfig.schema)}
+                reValidateMode="onBlur"
+				className={'auto-admin-grouped-form'}
+             
+			>
+                <DashAutoAdminFormProvider value={formContextValue}>
+                    <ContextComponent mode={mode} resourceConfig={resourceConfig}>
+                        {resourceConfig.createComponent(resourceConfig)}
+                    </ContextComponent>
+                </DashAutoAdminFormProvider>
+				
+			</SimpleForm>
+		);
+	}
+
+	if (mode === 'edit' && typeof resourceConfig?.editComponent === 'function') {
+		return (
+			<SimpleForm
+				key="edit-form"
+				warnWhenUnsavedChanges
+				//redirect={false}
+				toolbar={toolbar || null}
+				onSubmit={onSave}
+				validate={validate(resourceConfig.schema)}
+                reValidateMode="onBlur"
+				className={'auto-admin-grouped-form'}
+               
+			>
+                <DashAutoAdminFormProvider value={formContextValue}>
+                    <ContextComponent mode={mode} resourceConfig={resourceConfig}>
+                        {resourceConfig.editComponent(resourceConfig)}
+                    </ContextComponent>
+                </DashAutoAdminFormProvider>
+				
+			</SimpleForm>
+		);
+	}
+
+    // 🔧 FIX: Create a memoized wrapper component for TabbedForm
+    // This prevents React from treating it as a new component on each render
+    const TabbedFormWrapper = useMemo(() => {
+        const Wrapper = ({ children }: { children: ReactNode }) => (
+            <DashAutoAdminFormProvider value={formContextValue}>
+                <ContextComponent mode={mode} resourceConfig={resourceConfig}>
+                    {children}
+                </ContextComponent>
+            </DashAutoAdminFormProvider>
+        );
+        return Wrapper;
+    }, [formContextValue, ContextComponent, mode, resourceConfig, locale]);
+
+	if (formGroupMode === 'tabs' && groupByTabs(resourceConfig.schema).length > 1) {
+        //console.log(record,formData, {...record,...formData});
+       
+		return (
+			<>
+         
+			<TabbedForm
+				key="tabbed-form"
+				toolbar={toolbar || null}
+				onSubmit={onSave}
+				validate={validate(resourceConfig.schema)}
+				className={'tabbed-form-custom dash-auto-admin-tabbed-form'}
+                resetOptions={{ keepDirtyValues: true }}
+                syncWithLocation={resourceConfig.syncTabsWithLocation || false}
+                
+                defaultValues={mode === "create" ? formData : {...record,...formData}}
+                component={TabbedFormWrapper}
+                //component={(props) => props.children}
+			>
+              
+                {/* It has to be a function and not a Functional component, because it returns an array of JSX elements without parent container */}
+                {/* The downside, is can't implement hooks within the DashAutoFormTabs component */}
+				{DashAutoFormTabs({
+					schema: resourceConfig.schema,
+					resourceConfig: resourceConfig,
+					options: { mode: mode, isDrawer: isDrawer, locale: locale },
+				})}
+                
+			</TabbedForm>
+      
+            </>
+		);
+	}
+
+	if (formGroupMode === 'groups') {
+		return (
+			<SimpleForm
+				key="groups-form"
+				//redirect={false}
+				toolbar={toolbar || null}
+				onSubmit={onSave}
+				validate={validate(resourceConfig.schema)}
+                reValidateMode="onBlur"
+				className={'auto-admin-grouped-form'}
+            
+			>
+                <DashAutoAdminFormProvider value={formContextValue}>
+                    <ContextComponent mode={mode} resourceConfig={resourceConfig}>
+                        {DashAutoFormGroups({schema:resourceConfig.schema, resourceConfig, options:{
+                            mode: mode,
+                            isDrawer: isDrawer,
+                        }})}
+                    </ContextComponent>
+                </DashAutoAdminFormProvider>
+			</SimpleForm>
+		);
+	}
+
+	if (formGroupMode === 'layout') {
+		return (
+			<SimpleForm
+				key="layout-form"
+				//redirect={false}
+				toolbar={toolbar || null}
+				onSubmit={onSave}
+				validate={validate(resourceConfig.schema)}
+                reValidateMode="onBlur"
+				className={'auto-admin-grouped-form'}
+                
+			>
+                <DashAutoAdminFormProvider value={formContextValue}>
+                    <ContextComponent mode={mode} resourceConfig={resourceConfig}>
+                        {DashAutoFormLayout({schema:resourceConfig.schema, resourceConfig:resourceConfig, options:{
+                            mode: mode,
+                            isDrawer: isDrawer,
+                        }})}
+                    </ContextComponent>
+                </DashAutoAdminFormProvider>
+			</SimpleForm>
+		);
+	}
+};
+
+export default DashAutoTabbedForm;

package/src/DashAutoTabs.tsx

@@ -0,0 +1,19 @@
+import { TabbedShowLayout } from 'react-admin';
+import { IDashAutoAdminResourceConfig } from '.';
+import IDashAutoAdminFormOptions from './interfaces/IDashAutoAdminFormOptions';
+import { AutoTabs as MuiAutoTabbedForm } from './mui/AutoTabs';
+
+const AutoTabs = (
+	resourceConfig: IDashAutoAdminResourceConfig,
+	options?: IDashAutoAdminFormOptions,
+) => {
+	const _AutoTabs = MuiAutoTabbedForm;
+
+	return (
+		<TabbedShowLayout  >
+			{_AutoTabs(resourceConfig, resourceConfig.schema, options)}
+		</TabbedShowLayout>
+	);
+};
+
+export default AutoTabs;

package/src/DashFilterWrapper.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useInput, InputProps } from 'react-admin';
+
+interface DashFilterWrapperProps extends InputProps {
+    children: React.ReactElement;
+    source: string;
+    label?: string;
+    alwaysOn?: boolean;
+}
+
+/**
+ * Wrapper component that makes custom components work with React Admin's filter system
+ */
+const DashFilterWrapper: React.FC<DashFilterWrapperProps> = ({ 
+    children, 
+    source, 
+    label,
+    alwaysOn,
+    ...props 
+}) => {
+    const {
+        field: { onChange, onBlur, value },
+        fieldState: { error, invalid },
+        formState: { isSubmitted }
+    } = useInput({ source, ...props });
+
+    // Clone the child component and pass the necessary props
+    const childWithProps = React.cloneElement(children, {
+        value,
+        onChange,
+        onBlur,
+        error: error?.message,
+        helperText: error?.message,
+        source,
+        label,
+        /* @ts-ignore */
+        ...children.props, // Preserve original props
+    });
+
+    return childWithProps;
+};
+
+export default DashFilterWrapper;

package/src/DashRedirect.tsx

@@ -0,0 +1,46 @@
+import {DASHAdminSystemConstants} from "dash-constants";
+import { IDashAutoAdminResourceConfig } from "../";
+import { useEffect } from "react";
+import { useRedirect, Loading } from "react-admin";
+import { useParams } from "react-router";
+
+export interface IDashRedirect {
+	method: 'edit' | 'list' | 'create' | 'show';
+	drawerMethod: 'edit' | 'list' | 'create' | 'show';
+	resourceConfig: IDashAutoAdminResourceConfig;
+	stateHashPattern?: string;
+}
+
+const URL_PREFIX = DASHAdminSystemConstants.system.URL_PREFIX;
+const DashRedirect: React.FC<IDashRedirect> = ({
+	method,
+	resourceConfig,
+	stateHashPattern = URL_PREFIX,
+	drawerMethod = 'edit',
+	..._props
+}) => {
+	const params = useParams();
+	const redirect = useRedirect();
+
+	const idParamName = resourceConfig?.idParamName || 'id';
+
+	useEffect(() => {
+		let _stateHash = stateHashPattern.replace(
+			`:${idParamName}`,
+			params[idParamName],
+		);
+		_stateHash = _stateHash.replace(':method', drawerMethod);
+	
+		redirect(
+			method,
+			resourceConfig.model,
+			method === 'edit' ? params.id : null,
+			null,
+			{ hash: _stateHash },
+		);
+	}, []);
+
+	return <Loading />;
+};
+
+export default DashRedirect;