@dashadmin/dash-auto-admin 1.3.24 → 1.3.26

package/src/DashAutoAdminSaveButton.tsx

@@ -0,0 +1,116 @@
+import { SaveButton } from 'react-admin';
+import { SaveButtonProps } from 'react-admin/src';
+import { useFormContext } from 'react-hook-form';
+
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+import { FC, useCallback, useState } from 'react'; // Add useState
+
+
+export interface IDashAutoAdminSaveButton extends SaveButtonProps {
+  resourceConfig: IDashAutoAdminResourceConfig;
+}
+
+const DashAutoAdminSaveButton: FC<IDashAutoAdminSaveButton> = (props) => {
+  const { resourceConfig, ...customProps } = props;
+  const { formState } = useFormContext();
+
+  const alwaysEnabled = resourceConfig?.saveButtonAlwaysEnabled === true ? true : false;
+   
+
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        
+        if (customProps?.onClick) {
+            customProps.onClick(e);
+        }
+       
+    }
+    
+  return (<>
+ 
+    <SaveButton
+      alwaysEnable={alwaysEnabled}
+      {...customProps}
+      onClick={handleClick}
+      disabled={formState.isSubmitting}
+    /></>
+  );
+};
+
+export default DashAutoAdminSaveButton;
+
+
+/*
+
+import { SaveButton } from 'react-admin';
+import { SaveButtonProps } from 'react-admin/src';
+import { useFormContext } from 'react-hook-form';
+
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+import { FC, useState, useCallback } from 'react';
+import { useDashAutoAdminForm } from './context/DashAutoAdminFormContext';
+
+
+export interface IDashAutoAdminSaveButton extends SaveButtonProps {
+    resourceConfig: IDashAutoAdminResourceConfig;
+    //
+    //Custom onSave handler that will be called with validated form values.
+    //If not provided, will use the onSave from DashAutoAdminFormContext.
+    //This allows hooking into DashAutoAdminForm's onSave logic when using type="button"
+    //
+    onSave?: (values: any) => Promise<void> | void;
+}
+
+const DashAutoAdminSaveButton: FC<IDashAutoAdminSaveButton> = (props) => {
+    const { resourceConfig, onSave: propOnSave, ...customProps } = props;
+    const { handleSubmit, formState } = useFormContext();
+    const { onSave: contextOnSave } = useDashAutoAdminForm();
+    
+    // Use prop onSave if provided, otherwise fall back to context onSave
+    const onSave = propOnSave || contextOnSave;
+
+    const alwaysEnabled = resourceConfig?.saveButtonAlwaysEnabled === true ? true : false;
+    const [buttonDisabled, setButtonDisabled] = useState(false);
+
+    //
+    //When using type="button", we need to manually trigger form validation
+    //and submission using react-hook-form's handleSubmit.
+    //This wraps the submission to control the button's disabled state.
+    //
+    const handleClick = useCallback(async (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+        
+        if (customProps?.onClick) {
+            customProps.onClick(e);
+        }
+
+        setButtonDisabled(true);
+
+        try {
+            // Use handleSubmit to validate and get form values
+            // Then call the onSave from context (DashAutoAdminForm's save handler)
+            await handleSubmit(async (values) => {
+                if (onSave) {
+                    await onSave(values);
+                }
+            })(e);
+        } catch (error) {
+            console.error('DashAutoAdminSaveButton submission error:', error);
+        } finally {
+            setButtonDisabled(false);
+        }
+    }, [handleSubmit, onSave, customProps]);
+
+    return (
+        <SaveButton
+            type="button"
+            alwaysEnable={alwaysEnabled}
+            {...customProps}
+            onClick={handleClick}
+            disabled={buttonDisabled || formState.isSubmitting}
+        />
+    );
+};
+
+export default DashAutoAdminSaveButton;
+
+*/

package/src/DashAutoCreate.tsx

@@ -0,0 +1,118 @@
+import AutoTabbedForm from './DashAutoTabbedForm';
+import IAutoForm from './interfaces/IDashAutoForm';
+import React, { Fragment, ReactNode } from 'react';
+import { Create, TopToolbar, ListButton, Toolbar } from 'react-admin';
+import evalActionPermission from './utils/evalActionPermission';
+import AutoTitle from './common/DashAutoTitle';
+
+import DashAutoAdminSaveButton from './DashAutoAdminSaveButton';
+import { Portal } from '@mui/material';
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+
+const DashAutoCreate: React.FC<IAutoForm> = ({
+	resourceConfig,
+	toolbar,
+	actions,
+	onSubmit,
+	onError,
+	beforeSubmit,
+	isDrawer /*, showActions, */,
+	locale,
+}) => {
+	const CreateActions: React.FC = ({ ...props }) => {
+		const _showListwbutton: boolean =
+			resourceConfig.drawer === true
+				? false
+				: resourceConfig.toolbarListButton
+					? true
+					: false;
+
+		const hasToolbar:boolean = !!resourceConfig?.AutoEditTopToolbarElements || _showListwbutton;
+		
+		if (!hasToolbar) return null;
+		return (
+			<TopToolbar sx={{ mb:2 }} {...props}>
+				{_showListwbutton && <ListButton />}
+				{resourceConfig?.AutoEditTopToolbarElements ? (
+					resourceConfig.AutoCreateTopToolbarElements(resourceConfig)
+				) : (
+					<></>
+				)}
+			</TopToolbar>
+		);
+	};
+
+	const CreateToolbar: React.FC = ({ ...props }) => {
+		const SaveComponent =
+			resourceConfig.toolbarSaveButton &&
+			resourceConfig.toolbarSaveButton.component
+				? resourceConfig.toolbarSaveButton.component
+				: DashAutoAdminSaveButton;
+	
+return  <Toolbar {...props}>
+				{evalActionPermission(
+					resourceConfig,
+					resourceConfig.toolbarSaveButton,
+				) && (
+					<SaveComponent
+						resourceConfig={resourceConfig}
+						onSubmit={onSubmit}
+						{...(resourceConfig.toolbarSaveButton &&
+								resourceConfig.toolbarSaveButton?.props)}
+					/>
+				)}
+				{resourceConfig?.AutoEditBottomToolbarElements ? (
+					resourceConfig.AutoCreateBottomToolbarElements(resourceConfig)
+				) : (
+					<></>
+				)}
+			</Toolbar>
+	
+
+		/*return <Portal container={document.querySelector("div.dash-app-layout")}>
+			<Toolbar {...props}>
+				{evalActionPermission(
+					resourceConfig,
+					resourceConfig.toolbarSaveButton,
+				) && (
+					<SaveComponent
+						resourceConfig={resourceConfig}
+						onSubmit={onSubmit}
+						{...(resourceConfig.toolbarSaveButton &&
+								resourceConfig.toolbarSaveButton?.props)}
+					/>
+				)}
+				{resourceConfig?.AutoEditBottomToolbarElements ? (
+					resourceConfig.AutoCreateBottomToolbarElements(resourceConfig)
+				) : (
+					<></>
+				)}
+			</Toolbar>
+		</Portal>;*/
+        
+	};
+    
+
+	return (
+		<Create
+            component="div"
+			actions={actions || <CreateActions />}
+			mutationMode={resourceConfig.mutationMode}
+			title={<AutoTitle resourceConfig={resourceConfig} />}
+		>
+          
+			<AutoTabbedForm
+				mode='create'
+				resourceConfig={resourceConfig}
+				toolbar={toolbar || <CreateToolbar />}
+				onSubmit={onSubmit}
+				onError={onError}
+				beforeSubmit={beforeSubmit}
+				isDrawer={isDrawer}
+				locale={locale}
+			/>
+            
+		</Create>
+	);
+};
+export default DashAutoCreate;

package/src/DashAutoDrawer.tsx

@@ -0,0 +1,288 @@
+import { PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import AutoCreate from './DashAutoCreate';
+import AutoEdit from './DashAutoEdit';
+
+import { Toolbar, SaveButton, Button } from 'react-admin';
+
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+
+import { match } from 'node-match-path';
+import { useLocation } from 'react-router';
+import AutoShow from './DashAutoShow';
+import React from 'react';
+import { Drawer, SwipeableDrawer, DrawerProps } from '@mui/material';
+import DashAutoAdminSaveButton from './DashAutoAdminSaveButton';
+
+export interface IDashAutoDrawerPublicProps extends DrawerProps {
+    beforeSubmit?: (data: any) => any;
+    onSubmit?: (data: any) => any;
+    onError?: (error: any) => any;
+    type?: 'normal' | 'swipeable';
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    width?: number | string;
+    height?: number;
+}
+export interface IDashAutoDrawer extends IDashAutoDrawerPublicProps, PropsWithChildren {
+    recordId?: React.Key;
+    resourceConfig: IDashAutoAdminResourceConfig;
+}
+
+const DashAutoDrawer: React.FC<IDashAutoDrawer> = ({
+    resourceConfig,
+    recordId,
+    type = 'normal',
+    placement = 'right',
+    width = '100%', // TODO: This is the default value for the drawer width, to be deprecated; must be set at a HoC.
+    height,
+    beforeSubmit,
+    onSubmit,
+    onError,
+    children,
+    ...props
+}) => {
+    const location = useLocation();
+
+    const DrawerComponent = type === 'swipeable' ? SwipeableDrawer : Drawer;
+
+    const [open, setOpen] = useState<boolean>(
+        location.state?.hash ? true : false,
+    );
+
+    const handleCloseDrawer = () => {
+        setOpen(false);
+    };
+
+    const handleOpenDrawer = () => {
+        setOpen(true);
+    };
+
+    const _onSubmit = (values: any) => {
+        if (resourceConfig.closeDrawerAfterSave) handleCloseDrawer();
+        if (onSubmit) onSubmit(values);
+    };
+
+    const [localHash, setLocalHash] = useState<string>(
+        location.state?.hash ? location.state.hash : window.location.hash,
+    );
+
+    //if(!localHash.includes("inline/")) return <></> // TODO unecessary ???
+
+    const hashChangeHandler = useCallback((e) => {
+
+        setLocalHash(e.data);
+        setOpen(true);
+    }, []);
+
+    useEffect(() => {
+        //let _match = localHash.includes("inline/");
+        //if(_match.matches)
+        window.addEventListener('virtualhash', hashChangeHandler);
+        return () => {
+
+            //if(_match.matches)
+            window.removeEventListener('virtualhash', hashChangeHandler);
+        };
+    }, []);
+
+    let mode = 'edit';
+    const _createMatch = match(
+        `/${resourceConfig.model}/inline/create`,
+        String(localHash).substring(1),
+    );
+    if (_createMatch.matches) {
+        mode = 'create';
+    }
+    const _editMatch = match(
+        `/${resourceConfig.model}/inline/:id/:mode`,
+        String(localHash).substring(1),
+    );
+    mode =
+        _editMatch.matches && _editMatch.params?.mode
+            ? _editMatch.params.mode
+            : mode;
+    const resource_id = ['edit', 'show'].includes(mode)
+        ? _editMatch.params?.id
+        : null;
+
+    //const [placement, setPlacement] = useState<DrawerProps['anchor']>('right');
+    //const [open, setOpen] = useState<boolean>(location.state?.hash ? true : false);
+
+    useEffect(() => {
+        if (location.state?.hash) {
+            history.replaceState(null, '', location.state.hash);
+        }
+
+        return () => {
+            history.replaceState(null, '', null);
+        };
+    }, []);
+
+    /*
+  useEffect(() => {
+    setOpen(mode === "edit" || mode === "create" ? true : false)
+    console.log("has updated in autolist, hash,mode,open",hash,mode,open)
+  }, [hash]);*/
+
+    const DrawerToolbar = () => {
+        if (resourceConfig?.bottomToolbar === false) return <></>;
+        return (
+            <Toolbar>
+                {mode === 'edit' && resourceConfig?.saveButton !== false && (
+                      <DashAutoAdminSaveButton
+                        alwaysEnable={
+                            resourceConfig?.saveButtonAlwaysEnabled === true ? true : false
+                        }
+                        label='Guardar'
+                        resourceConfig={resourceConfig}
+                      
+                
+                    />
+                )}
+                {mode === 'create' && resourceConfig?.saveButton !== false && (
+                      <DashAutoAdminSaveButton
+                        resourceConfig={resourceConfig}
+                        alwaysEnable={
+                            resourceConfig?.saveButtonAlwaysEnabled === true ? true : false
+                        }
+                        label='Crear'
+                       
+                    />
+                )}
+                {/*resourceConfig?.listDeleteButton?.enabled && (
+          <DeleteButton label="Eliminar" />
+        )*/}
+                <Button onClick={() => handleCloseDrawer()}>
+                    <>Cerrar</>
+                </Button>
+            </Toolbar>
+        );
+    };
+
+    if (mode !== 'list' && mode === 'create')
+        return (
+            <DrawerComponent
+                anchor={placement}
+                //onClose={(_event: React.ChangeEvent<HTMLInputElement>) =>  {  handleCloseDrawer(); }}
+                /* @ts-ignore : Mismatch with the DrawerProps Event */
+                onClose={() => handleCloseDrawer()}
+                {...(type === 'swipeable' && { onOpen: handleOpenDrawer })}
+                open={open}
+                key={placement}
+                sx={{
+                    width: { xs: "90%", sm: "90%", md: "50%", lg: "40%" },
+                    '& .MuiDrawer-paper': {
+                        width: { xs: "90%", sm: "90%", md: "50%", lg: "40%" }
+                    }
+                }}
+                slotProps={{
+
+                }}
+                size={"large"}
+                {...props}
+            >
+                <div
+                    style={{
+                        ...(height && { height: height }),
+                        ...(width && { width: width }),
+                    }}
+                >
+                    <AutoCreate
+                        toolbar={<DrawerToolbar />}
+                        isDrawer={true}
+                        //id={Number(edit_mode.params.id)}
+                        resourceConfig={{ ...resourceConfig, formGroupMode: (resourceConfig.formGroupMode === 'tabs' || !resourceConfig.formGroupMode ? 'groups' : resourceConfig.formGroupMode) }}
+                        //schema={resourceConfig.schema}
+                        beforeSubmit={beforeSubmit}
+                        onSubmit={_onSubmit}
+                        onError={onError}
+                        onCancel={() => handleCloseDrawer()}
+                    />
+                </div>
+            </DrawerComponent>
+        );
+
+    if (mode !== 'list' && mode === 'edit' && resource_id)
+        return (
+            <DrawerComponent
+                anchor={placement}
+                /* @ts-ignore : Mismatch with the DrawerProps Event */
+                onClose={() => handleCloseDrawer()}
+                {...(type === 'swipeable' && { onOpen: handleOpenDrawer })}
+                open={open}
+                key={placement}
+                sx={{
+                    width: { xs: "90%", sm: "90%", md: "50%", lg: "40%" },
+                    '& .MuiDrawer-paper': {
+                        width: { xs: "90%", sm: "90%", md: "50%", lg: "40%" }
+                    }
+                }}
+                slotProps={{
+
+                }}
+                size={"large"}
+                {...props}
+
+            >
+                <div
+                    style={{
+                        ...(height && { height: height }),
+                        ...(width && { width: width }),
+                    }}
+                >
+                    <AutoEdit
+                        isDrawer={true}
+                        toolbar={<DrawerToolbar />}
+                        id={resource_id}
+                        resourceConfig={{ ...resourceConfig, formGroupMode: (resourceConfig.formGroupMode === 'tabs' || !resourceConfig.formGroupMode ? 'groups' : resourceConfig.formGroupMode) }}
+                        //schema={resourceConfig.schema}
+                        beforeSubmit={beforeSubmit}
+                        onSubmit={_onSubmit}
+                        onError={onError}
+                        onCancel={() => handleCloseDrawer()}
+                    />
+                </div>
+            </DrawerComponent>
+        );
+
+    if (mode === 'show' && resource_id) {
+        return (
+            <DrawerComponent
+                anchor={placement}
+                /* @ts-ignore : Mismatch with the DrawerProps Event */
+                onClose={() => handleCloseDrawer()}
+                {...(type === 'swipeable' && { onOpen: handleOpenDrawer })}
+                open={open}
+                key={placement}
+                sx={{
+                    width: { xs: "90%", sm: "90%", md: "50%", lg: "40%" },
+                    '& .MuiDrawer-paper': {
+                        width: { xs: "90%", sm: "90%", md: "50%", lg: "40%" }
+                    }
+                }}
+                slotProps={{
+
+                }}
+                size={"large"}
+                {...props}
+
+            >
+                <div
+                    style={{
+                        ...(height && { height: height }),
+                        ...(width && { width: width }),
+                    }}
+                >
+                    <AutoShow
+                        isDrawer={true}
+                        id={resource_id}
+                        resourceConfig={{ ...resourceConfig, formGroupMode: (resourceConfig.formGroupMode === 'tabs' || !resourceConfig.formGroupMode ? 'groups' : resourceConfig.formGroupMode) }}
+                    />
+                </div>
+            </DrawerComponent>
+        );
+    }
+
+    return <></>;
+};
+
+export default DashAutoDrawer;

package/src/DashAutoEdit.tsx

@@ -0,0 +1,109 @@
+import AutoTitle from './common/DashAutoTitle';
+import IAutoForm from './interfaces/IDashAutoForm';
+import AutoTabbedForm from './DashAutoTabbedForm';
+import { TopToolbar, Edit, Toolbar } from 'react-admin';
+import React, { ReactNode } from 'react';
+import { ToolbarCreateButton, ToolbarDeleteButton, ToolbarEditButton, ToolbarExportButton, ToolbarListButton, ToolbarSaveButton } from './toolbar/buttons/ToolbarButtons';
+import { BottomToolbarDeleteButton, BottomToolbarSaveButton } from './toolbar/buttons/BottomToolbarButtons';
+import { Portal } from '@mui/material';
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+
+const DashAutoEdit: React.FC<IAutoForm> = ({
+	id,
+	resourceConfig,
+	onSubmit,
+	onError,
+	onCancel,
+	beforeSubmit,
+	toolbar,
+	actions,
+	isDrawer = false,
+	locale,
+}) => {
+	const EditActions: React.FC = ({ ...props }) => {
+
+		const _isDrawer = !!resourceConfig.drawer;
+        // Top Toolbar
+		return <TopToolbar sx={{ mb:2 }}  {...props}>
+			{resourceConfig?.AutoEditTopToolbarElements ? (
+				resourceConfig.AutoEditTopToolbarElements(resourceConfig)
+			) : null}
+
+            {/* Save button can't be here */}
+			{!_isDrawer && <ToolbarListButton mode='edit' resourceConfig={resourceConfig}/>}
+			{!_isDrawer && <ToolbarEditButton mode='edit' resourceConfig={resourceConfig}/>}
+			{!_isDrawer && <ToolbarCreateButton mode='edit' resourceConfig={resourceConfig}/>}
+			{!_isDrawer && <ToolbarDeleteButton mode='edit' resourceConfig={resourceConfig}/>}
+			{!_isDrawer && <ToolbarExportButton mode='edit' resourceConfig={resourceConfig}/>}
+		</TopToolbar>;
+		
+	};
+
+    // Bottom Toolbar
+	const EditToolbar: React.FC = ({ ...props }) => {
+
+		return (
+			<Toolbar {...props}>
+				{/*evalActionPermission(
+					resourceConfig,
+					resourceConfig.toolbarSaveButton,
+				) && (
+					<SaveComponent
+						resourceConfig={resourceConfig}
+						{...(onSubmit && { onSubmit: onSubmit })}
+						{...(resourceConfig.toolbarSaveButton &&
+							resourceConfig.toolbarSaveButton?.props)}
+					/>
+				)*/}
+                
+				<BottomToolbarSaveButton mode='edit' resourceConfig={resourceConfig} onError={onError} onSubmit={onSubmit} />
+				<BottomToolbarDeleteButton mode='edit' resourceConfig={resourceConfig} onError={onError} onSubmit={onSubmit} />
+				{/*evalActionPermission(
+					resourceConfig,
+					resourceConfig.toolbarDeleteButton,
+				) && (
+					<DeleteComponent
+						resourceConfig={resourceConfig}
+						{...(resourceConfig.toolbarDeleteButton &&
+							resourceConfig.toolbarDeleteButton?.props)}
+					/>
+				)*/}
+				{resourceConfig?.AutoEditBottomToolbarElements ? (
+					resourceConfig.AutoEditBottomToolbarElements(resourceConfig)
+				) : (
+					<></>
+				)}
+              
+			</Toolbar>
+		);
+	};
+
+   
+   
+	return <Edit
+            component="div"
+			{...(id && { id })}
+			actions={actions || <EditActions />}
+			mutationMode={resourceConfig.mutationMode}
+			title={<AutoTitle resourceConfig={resourceConfig} />}
+            {...resourceConfig?.editProps || {}}
+		>
+             
+			<AutoTabbedForm
+				isDrawer={isDrawer}
+				mode='edit'
+				resourceConfig={resourceConfig}
+				//{...(_showToolbar && { toolbar: <EditToolbar /> })}
+				toolbar={toolbar || <EditToolbar />}
+				onSubmit={onSubmit}
+				onError={onError}
+				{...(beforeSubmit && { beforeSubmit: beforeSubmit })}
+				onCancel={onCancel}
+				locale={locale}
+			/>
+      
+		</Edit>
+	
+};
+
+export default DashAutoEdit;