@dashadmin/dash-auto-admin 1.3.24 → 1.3.26

package/src/DashAutoFormMuiTabs.tsx

@@ -0,0 +1,368 @@
+import { FormTab } from 'react-admin';
+import { Tab, Tabs, Box } from '@mui/material';
+import IDashAutoAdminAttribute from './interfaces/IDashAutoAdminAttribute';
+import IDashAutoAdminFormOptions from './interfaces/IDashAutoAdminFormOptions';
+import groupByTabs from './utils/groupByTabs';
+import AttributeToInput from './mui/AttributeToInput';
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+import { useDispatch, useSelector } from 'react-redux';
+//import { IDASHAppState } from 'dash-admin-state';
+//import { CLEAR_FORM_DATA, SET_FORM_DATA } from 'dash-admin-state/src/redux/actions/ActionTypes';
+import { useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+interface IAutoForm {
+    schema: IDashAutoAdminAttribute[],
+    resourceConfig: IDashAutoAdminResourceConfig,
+    options?: IDashAutoAdminFormOptions,
+}
+
+const CreateFormTabs = ({ schema, resourceConfig, options, isDrawer }) => {
+    const dispatch = useDispatch();
+    const [value, setValue] = useState(0);
+
+    const handleChange = (event) => {
+        const { name, value, type } = event.target;
+        let payloadValue;
+        
+        switch (type) {
+            case 'checkbox':
+                payloadValue = event.target.checked;
+                break;
+            case 'select':
+                payloadValue = value;
+                break;
+            case 'text':
+            case 'number':
+            case 'email':
+                payloadValue = value;
+                break;
+            default:
+                payloadValue = value;
+                break;
+        }
+        console.log("DashAutoFormMuiTabs: dispatch method deprecated")
+        //dispatch({ type: SET_FORM_DATA, payload: { [name]: payloadValue } });
+    };
+
+    const handleTabChange = (event, newValue) => {
+        setValue(newValue);
+    };
+
+    useEffect(() => {
+        return () => {
+            console.log("DashAutoFormMuiTabs: dispatch method deprecated")
+            //dispatch({ type: CLEAR_FORM_DATA });
+        };
+    }, [dispatch]);
+
+    const tabGroups = groupByTabs(schema);
+
+    if (options?.meta?.tabs === "mui") {
+        return (
+            <Box sx={{ width: '100%' }}>
+                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                    <Tabs value={value} onChange={handleTabChange}>
+                        {tabGroups.map((group, idx) => (
+                            <Tab key={`tab-${group[0].tab || idx}`} label={group[0].tab || options?.label || ''} />
+                        ))}
+                    </Tabs>
+                </Box>
+                {tabGroups.map((groupOfAttributes, idx) => {
+                    let grouppedAttributes = groupOfAttributes.filter(
+                        (attribute) => attribute?.inCreate !== false,
+                    );
+                    if (isDrawer) {
+                        grouppedAttributes = grouppedAttributes.filter(
+                            (attribute) => attribute?.inDrawer !== false,
+                        );
+                    }
+                    return (
+                        <div
+                            role="tabpanel"
+                            hidden={value !== idx}
+                            key={`panel-${idx}`}
+                            style={{ padding: '20px 0' }}
+                        >
+                            {grouppedAttributes.map((attribute, i) => (
+                                <div key={`input-${i}`}>
+                                    {AttributeToInput('create', resourceConfig, attribute, i, { ...options, handleChange })}
+                                </div>
+                            ))}
+                        </div>
+                    );
+                })}
+            </Box>
+        );
+    }
+
+    return groupByTabs(schema).map((groupOfAttributes, idx) => {
+        let grouppedAttributes = groupOfAttributes.filter(
+            (attribute) => attribute?.inCreate !== false,
+        );
+
+        if (isDrawer) {
+            grouppedAttributes = grouppedAttributes.filter(
+                (attribute) => attribute?.inDrawer !== false,
+            );
+        }
+        return (
+            grouppedAttributes.length && (
+                <FormTab
+                    key={`tab-${groupOfAttributes[0].tab || idx}`}
+                    value={idx}
+                    label={groupOfAttributes[0].tab || options?.label || ''}
+                >
+                    {grouppedAttributes.map((attribute, i) => (
+                        <div key={`input-${i}`}>
+                            {AttributeToInput('create', resourceConfig, attribute, i, { ...options, handleChange })}
+                        </div>
+                    ))}
+                </FormTab>
+            )
+        );
+    });
+};
+
+const EditFormTabs = ({ schema, resourceConfig, options, isDrawer }) => {
+    const dispatch = useDispatch();
+    const [value, setValue] = useState(0);
+
+    const handleChange = (event) => {
+        const { name, value, type } = event.target;
+        let payloadValue;
+        
+        switch (type) {
+            case 'checkbox':
+                payloadValue = event.target.checked;
+                break;
+            case 'select':
+                payloadValue = value;
+                break;
+            case 'text':
+            case 'number':
+            case 'email':
+                payloadValue = value;
+                break;
+            default:
+                payloadValue = value;
+                break;
+        }
+
+        console.log("DashAutoFormMuiTabs: dispatch method deprecated")
+        //dispatch({ type: SET_FORM_DATA, payload: { [name]: payloadValue } });
+    };
+
+    const handleTabChange = (event, newValue) => {
+        setValue(newValue);
+    };
+
+    useEffect(() => {
+        return () => {
+            console.log("DashAutoFormMuiTabs: dispatch method deprecated")
+            //dispatch({ type: CLEAR_FORM_DATA });
+        };
+    }, [dispatch]);
+
+    const tabGroups = groupByTabs(schema);
+    if (options?.meta?.tabs === "mui") {
+        return (
+            <Box sx={{ width: '100%' }}>
+                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                    <Tabs value={value} onChange={handleTabChange}>
+                        {tabGroups.map((group, idx) => (
+                            <Tab key={`tab-${group[0].tab || idx}`} label={group[0].tab || options?.label || ''} />
+                        ))}
+                    </Tabs>
+                </Box>
+                {tabGroups.map((groupOfAttributes, idx) => {
+                    let grouppedAttributes = groupOfAttributes.filter(
+                        (attribute) => attribute?.inEdit !== false,
+                    );
+                    if (isDrawer) {
+                        grouppedAttributes = grouppedAttributes.filter(
+                            (attribute) => attribute?.inDrawer !== false,
+                        );
+                    }
+                    return (
+                        <div
+                            role="tabpanel"
+                            hidden={value !== idx}
+                            key={`panel-${idx}`}
+                            style={{ padding: '20px 0' }}
+                        >
+                            {grouppedAttributes.map((attribute, i) => (
+                                <div key={`input-${i}`}>
+                                    {AttributeToInput('edit', resourceConfig, attribute, i, { ...options, handleChange })}
+                                </div>
+                            ))}
+                        </div>
+                    );
+                })}
+            </Box>
+        );
+    }
+
+    return groupByTabs(schema).map((groupOfAttributes, idx) => {
+        let grouppedAttributes = groupOfAttributes.filter(
+            (attribute) => attribute?.inEdit !== false,
+        );
+        if (isDrawer) {
+            grouppedAttributes = grouppedAttributes.filter(
+                (attribute) => attribute?.inDrawer !== false,
+            );
+        }
+
+        return (
+            grouppedAttributes.length && (
+                <FormTab
+                    key={`tab-${groupOfAttributes[0].tab || idx}`}
+                    value={idx}
+                    label={groupOfAttributes[0].tab || options?.label || ''}
+                >
+                    {grouppedAttributes.map((attribute, i) => (
+                        <div key={`input-${i}`}>
+                            {AttributeToInput('edit', resourceConfig, attribute, i, { ...options, handleChange })}
+                        </div>
+                    ))}
+                </FormTab>
+            )
+        );
+    });
+};
+
+const ViewFormTabs = ({ schema, resourceConfig, options, isDrawer }) => {
+    const dispatch = useDispatch();
+    const [value, setValue] = useState(0);
+
+    const handleChange = (event) => {
+        const { name, value, type } = event.target;
+        let payloadValue;
+        
+        switch (type) {
+            case 'checkbox':
+                payloadValue = event.target.checked;
+                break;
+            case 'select':
+                payloadValue = value;
+                break;
+            case 'text':
+            case 'number':
+            case 'email':
+                payloadValue = value;
+                break;
+            default:
+                payloadValue = value;
+                break;
+        }
+
+        console.log("DashAutoFormMuiTabs: dispatch method deprecated")
+        //dispatch({ type: SET_FORM_DATA, payload: { [name]: payloadValue } });
+    };
+
+    const handleTabChange = (event, newValue) => {
+        setValue(newValue);
+    };
+
+    useEffect(() => {
+        return () => {
+            console.log("DashAutoFormMuiTabs: dispatch method deprecated")
+            //dispatch({ type: CLEAR_FORM_DATA });
+        };
+    }, [dispatch]);
+
+    const tabGroups = groupByTabs(schema);
+
+    if (options?.meta?.tabs === "mui") {
+        return (
+            <Box sx={{ width: '100%' }}>
+                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                    <Tabs value={value} onChange={handleTabChange}>
+                        {tabGroups.map((group, idx) => (
+                            <Tab key={`tab-${group[0].tab || idx}`} label={group[0].tab || options?.label || ''} />
+                        ))}
+                    </Tabs>
+                </Box>
+                {tabGroups.map((groupOfAttributes, idx) => {
+                    let grouppedAttributes = groupOfAttributes.filter(
+                        (attribute) => attribute?.inShow !== false,
+                    );
+                    if (isDrawer) {
+                        grouppedAttributes = grouppedAttributes.filter(
+                            (attribute) => attribute?.inDrawer !== false,
+                        );
+                    }
+                    return (
+                        <div
+                            role="tabpanel"
+                            hidden={value !== idx}
+                            key={`panel-${idx}`}
+                            style={{ padding: '20px 0' }}
+                        >
+                            {grouppedAttributes.map((attribute, i) => (
+                                <div key={`input-${i}`}>
+                                    {AttributeToInput('view', resourceConfig, attribute, i, { ...options, handleChange })}
+                                </div>
+                            ))}
+                        </div>
+                    );
+                })}
+            </Box>
+        );
+    }
+
+    return groupByTabs(schema).map((groupOfAttributes, idx) => {
+        let grouppedAttributes = groupOfAttributes.filter(
+            (attribute) => attribute?.inShow !== false,
+        );
+        if (isDrawer) {
+            grouppedAttributes = grouppedAttributes.filter(
+                (attribute) => attribute?.inDrawer !== false,
+            );
+        }
+        return (
+            grouppedAttributes.length && (
+                <FormTab
+                    key={`tab-${groupOfAttributes[0].tab || idx}`}
+                    value={idx}
+                    label={groupOfAttributes[0].tab || options?.label || ''}
+                >
+                    {grouppedAttributes.map((attribute, i) => (
+                        <div key={`input-${i}`}>
+                            {AttributeToInput('view', resourceConfig, attribute, i, { ...options, handleChange })}
+                        </div>
+                    ))}
+                </FormTab>
+            )
+        );
+    });
+};
+
+const DashAutoFormMuiTabs = ({
+    schema,
+    resourceConfig,
+    options
+}: IAutoForm) => {
+    const isDrawer = options.isDrawer === true ? true : false;
+    const meta = options?.meta || {};
+
+    const commonProps = {
+        schema,
+        resourceConfig,
+        options,
+        isDrawer
+    };
+    
+    switch (options.mode) {
+        case 'create':
+            return <CreateFormTabs {...commonProps} />;
+        case 'edit':
+            return <EditFormTabs {...commonProps} />;
+        case 'view':
+            return <ViewFormTabs {...commonProps} />;
+        default:
+            return null;
+    }
+};
+
+export default DashAutoFormMuiTabs;

package/src/DashAutoFormTabs.tsx

@@ -0,0 +1,177 @@
+import { FormTab } from 'react-admin';
+import IDashAutoAdminAttribute from './interfaces/IDashAutoAdminAttribute';
+import IDashAutoAdminFormOptions from './interfaces/IDashAutoAdminFormOptions';
+import groupByTabs from './utils/groupByTabs';
+import AttributeToInput from './mui/AttributeToInput';
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+interface IAutoForm {
+	schema: IDashAutoAdminAttribute[],
+	resourceConfig: IDashAutoAdminResourceConfig,
+	options?: IDashAutoAdminFormOptions,
+}
+
+/** 
+ * The `DashAutoFormTabs` component is responsible for rendering the form tabs in the Dash Auto Admin interface. 
+ * It takes in a `schema` of `IDashAutoAdminAttribute` objects, a `resource` of `IDashAutoAdminResourceConfig`, and optional `options` of `IDashAutoAdminFormOptions`. 
+ * The component handles different form modes ('create', 'edit', 'view') and renders the appropriate form tabs based on the provided schema and options. 
+ * It also features a form data state management using Redux and handles changes to form inputs for Tabbed Forms.
+ * 
+ * If there is only one tab group, it renders the inputs directly without the FormTab wrapper.
+ */
+
+const DashAutoFormTabs = ({
+    schema,
+    resourceConfig,
+    options
+}: IAutoForm) => {
+
+    const isDrawer = options.isDrawer === true ? true : false;
+   
+
+    const handleChange = (event) => {
+      
+        const { name, value, type } = event.target;
+
+        // Handle different input types
+        let payloadValue;
+        switch (type) {
+            case 'checkbox':
+                // For checkboxes, the value is a boolean
+                payloadValue = event.target.checked; // Use checked for checkbox inputs
+                break;
+            case 'select':
+                // For select inputs, you might need to handle differently if you have multiple selections
+                payloadValue = value; // For single select
+                break;
+            case 'text':
+            case 'number':
+            case 'email':
+                // For text, number, and email inputs
+                payloadValue = value;
+                break;
+            // Add cases for other input types as needed
+            default:
+                payloadValue = value; // Fallback for other input types
+                break;
+        }
+  
+   
+    };
+    
+
+    options = {...options, handleChange};
+
+    // Helper to render inputs for a group
+    const renderInputs = (mode: 'create' | 'edit' | 'view', grouppedAttributes: IDashAutoAdminAttribute[]) => {
+        return grouppedAttributes.map((attribute, i) => (
+            <div key={`input-${i}`}>
+                {AttributeToInput(mode, resourceConfig, attribute, i, options)}
+            </div>
+        ));
+    };
+
+    // Helper to filter attributes based on mode and drawer
+    const filterAttributes = (
+        groupOfAttributes: IDashAutoAdminAttribute[],
+        mode: 'create' | 'edit' | 'view'
+    ) => {
+        let filtered = groupOfAttributes.filter((attribute) => {
+            switch (mode) {
+                case 'create':
+                    return attribute?.inCreate !== false;
+                case 'edit':
+                    return attribute?.inEdit !== false;
+                case 'view':
+                    return attribute?.inShow !== false;
+                default:
+                    return true;
+            }
+        });
+
+        if (isDrawer) {
+            filtered = filtered.filter((attribute) => attribute?.inDrawer !== false);
+        }
+
+        return filtered;
+    };
+
+    // Get all tab groups
+    const tabGroups = groupByTabs(schema);
+
+    // Filter tab groups to only include those with visible attributes for current mode
+    const getFilteredTabGroups = (mode: 'create' | 'edit' | 'view') => {
+        return tabGroups
+            .map((group) => ({
+                original: group,
+                filtered: filterAttributes(group, mode),
+            }))
+            .filter((g) => g.filtered.length > 0);
+    };
+
+    switch (options.mode) {
+        case 'create': {
+            const filteredGroups = getFilteredTabGroups('create');
+            
+            // If only one tab group, render inputs directly without FormTab wrapper
+            if (filteredGroups.length === 1) {
+                return <>{renderInputs('create', filteredGroups[0].filtered)}</>;
+            }
+            
+            // Multiple tabs - wrap each in FormTab
+            return filteredGroups.map((group, idx) => (
+                <FormTab
+                    key={`tab-${group.original[0].tab || idx}`}
+                    value={idx}
+                    label={group.original[0].tab || options?.label || resourceConfig?.label}
+                >
+                    {renderInputs('create', group.filtered)}
+                </FormTab>
+            ));
+        }
+
+        case 'edit': {
+            const filteredGroups = getFilteredTabGroups('edit');
+            
+            // If only one tab group, render inputs directly without FormTab wrapper
+            if (filteredGroups.length === 1) {
+                return <>{renderInputs('edit', filteredGroups[0].filtered)}</>;
+            }
+            
+            // Multiple tabs - wrap each in FormTab
+            return filteredGroups.map((group, idx) => (
+                <FormTab
+                    key={`tab-${group.original[0].tab || idx}`}
+                    value={idx}
+                    label={group.original[0].tab || options?.label || resourceConfig?.label}
+                >
+                    {renderInputs('edit', group.filtered)}
+                </FormTab>
+            ));
+        }
+
+        case 'view': {
+            const filteredGroups = getFilteredTabGroups('view');
+            
+            // If only one tab group, render inputs directly without FormTab wrapper
+            if (filteredGroups.length === 1) {
+                return <>{renderInputs('view', filteredGroups[0].filtered)}</>;
+            }
+            
+            // Multiple tabs - wrap each in FormTab
+            return filteredGroups.map((group, idx) => (
+                <FormTab
+                    key={`tab-${group.original[0].tab || idx}`}
+                    value={idx}
+                    label={group.original[0].tab || options?.label || resourceConfig?.label}
+                >
+                    {renderInputs('view', group.filtered)}
+                </FormTab>
+            ));
+        }
+    }
+};
+
+
+DashAutoFormTabs.whyDidYouRender = true;
+
+export default DashAutoFormTabs;

package/src/DashAutoGroup.tsx

@@ -0,0 +1,42 @@
+import { SimpleShowLayout } from 'react-admin';
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+import { AttributeToField } from './mui/AttributeToField';
+import groupByTabs from './utils/groupByTabs';
+import { AutoAdminSettings } from '.';
+import IDashAutoAdminFormOptions from './interfaces/IDashAutoAdminFormOptions';
+
+const DashAutoGroup = (
+    resourceConfig: IDashAutoAdminResourceConfig,
+    options?: IDashAutoAdminFormOptions,
+) => {
+    return (
+        <SimpleShowLayout>
+            {groupByTabs(resourceConfig.schema).map((groupOfAttributes, idx) => {
+
+                const label = groupOfAttributes[0].tab || AutoAdminSettings.defaultTabName;
+
+                const count = groupOfAttributes
+                    .filter((attribute) => attribute?.inShow !== false).length;
+
+                return count ?
+                    <fieldset key={'fieldset-group-' + idx}>
+                        <legend>{label}</legend>
+                        {groupOfAttributes
+                            .filter((attribute) => attribute?.inShow !== false)
+                            .map((attribute, i) =>
+                                AttributeToField(
+                                    'view',
+                                    resourceConfig,
+                                    attribute,
+                                    i,
+                                    options,
+                                ),
+                            )}
+                    </fieldset> : <></>
+
+            })}
+        </SimpleShowLayout>
+    );
+};
+
+export default DashAutoGroup;

package/src/DashAutoLayout.tsx

@@ -0,0 +1,57 @@
+import { SimpleShowLayout } from 'react-admin';
+import AutoTabs from './DashAutoTabs';
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+import { AttributeToField } from './mui/AttributeToField';
+import hashedGroupByTabs from './utils/hashedGroupByTabs';
+import IDashAutoAdminFormOptions from './interfaces/IDashAutoAdminFormOptions';
+import { JSX } from 'react';
+
+export interface IDashAutoLayoutRenderFunction {
+	(
+		tab: string,
+		options?: IDashAutoAdminFormOptions,
+		forceAttributeToFieldMethod?: 'view' | 'list' | 'create' | 'edit',
+	): JSX.Element[];
+}
+
+const DashAutoLayout = (
+	resourceConfig: IDashAutoAdminResourceConfig,
+	options?: IDashAutoAdminFormOptions,
+) => {
+	const renderShow: IDashAutoLayoutRenderFunction = (
+		tab,
+		options,
+		forceAttributeToFieldMethod,
+	): JSX.Element[] => {
+		const groupedTabs = hashedGroupByTabs(resourceConfig.schema);
+
+		const groupedAttributesByTab = groupedTabs[tab] ? groupedTabs[tab] : [];
+		return groupedAttributesByTab
+			.filter((attribute) => attribute?.inShow !== false)
+			.map((attribute, idx) =>
+				AttributeToField(
+					forceAttributeToFieldMethod || 'view',
+					resourceConfig,
+					attribute,
+					idx,
+					options,
+				),
+			);
+	};
+
+	if (
+		!resourceConfig.showLayout ||
+		typeof resourceConfig.showLayout !== 'function'
+	) {
+		console.error(
+			'showLayout must be present and be a function in the resource definition when using formGroupMode layout, fallback to tabs',
+		);
+		return AutoTabs(resourceConfig);
+	}
+
+	return (
+		<SimpleShowLayout>{resourceConfig.showLayout(renderShow)}</SimpleShowLayout>
+	);
+};
+
+export default DashAutoLayout;