From 37bd797622b99eb56fd99219080c95fe189c6878 Mon Sep 17 00:00:00 2001
From: Rodrigo Dias <rodrigo.elfo@gmail.com>
Date: Thu, 12 Sep 2024 14:05:20 -0300
Subject: [PATCH] feat: crudModule - fix drawerForm submit validations

---
 .../src/components/SchemaForm/SchemaForm.tsx  |  59 +++---
 .../submodules/DrawerForm/index.tsx           | 170 ++++++++++--------
 2 files changed, 127 insertions(+), 102 deletions(-)

diff --git a/packages/react-material-ui/src/components/SchemaForm/SchemaForm.tsx b/packages/react-material-ui/src/components/SchemaForm/SchemaForm.tsx
index ae9fb19f..c128cb3f 100644
--- a/packages/react-material-ui/src/components/SchemaForm/SchemaForm.tsx
+++ b/packages/react-material-ui/src/components/SchemaForm/SchemaForm.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import React, { Fragment, ReactNode, ComponentType } from 'react';
+import React, { ReactNode, ComponentType } from 'react';
 import validator from '@rjsf/validator-ajv6';
 import RJSFForm from '@rjsf/mui';
-import Box from '@mui/material/Box';
 import { RJSFSchema, SubmitButtonProps } from '@rjsf/utils';
 import { FormProps } from '@rjsf/core';
 
@@ -174,39 +173,35 @@ const Form = ({
     },
   };
 
+  if (!schema) return null;
+
   return (
-    <Fragment>
-      {schema && (
-        <Box>
-          <RJSFForm
-            schema={finalSchema}
-            uiSchema={
-              props.buttonTitle
-                ? uiSchemaWithButtonTitle
-                : {
-                    ...uiSchemaGenerator(finalSchema, advancedProperties),
-                    ...uiSchema,
-                  }
+    <RJSFForm
+      schema={finalSchema}
+      uiSchema={
+        props.buttonTitle
+          ? uiSchemaWithButtonTitle
+          : {
+              ...uiSchemaGenerator(finalSchema, advancedProperties),
+              ...uiSchema,
             }
-            formData={mergeFormData(finalSchema, formData)}
-            noHtml5Validate
-            showErrorList={false}
-            templates={
-              props.buttonComponent
-                ? templatesWithCustomButton
-                : {
-                    ArrayFieldTemplate,
-                    ObjectFieldTemplate,
-                  }
+      }
+      formData={mergeFormData(finalSchema, formData)}
+      noHtml5Validate
+      showErrorList={false}
+      templates={
+        props.buttonComponent
+          ? templatesWithCustomButton
+          : {
+              ArrayFieldTemplate,
+              ObjectFieldTemplate,
             }
-            validator={validator}
-            {...props}
-          >
-            {children}
-          </RJSFForm>
-        </Box>
-      )}
-    </Fragment>
+      }
+      validator={validator}
+      {...props}
+    >
+      {children}
+    </RJSFForm>
   );
 };
 
diff --git a/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx b/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx
index 4062498e..d2aafb5e 100644
--- a/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx
+++ b/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import type { IChangeEvent } from '@rjsf/core';
 import {
   Box,
@@ -10,7 +10,6 @@ import {
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import useDataProvider, { useQuery } from '@concepta/react-data-provider';
-import validator from '@rjsf/validator-ajv6';
 
 import { SchemaForm } from '../../../components/SchemaForm';
 import { CustomTextFieldWidget } from '../../../styles/CustomWidgets';
@@ -123,6 +122,96 @@ const DrawerFormSubmodule = (props: FormSubmoduleProps) => {
     return 'View Data';
   };
 
+  const actionButtons = useMemo(() => {
+    return (
+      <Box
+        display="flex"
+        flexDirection="row"
+        alignItems="center"
+        justifyContent={viewMode === 'creation' ? 'flex-end' : 'space-between'}
+        id="Rockets-FormDrawerFooter"
+        mt="auto"
+      >
+        {viewMode !== 'creation' && (
+          <TableRowControls
+            isLoading={isLoading}
+            currentIndex={viewIndex}
+            rowsPerPage={rowsPerPage}
+            isPreviousDisabled={
+              isLoading || (currentPage === 1 && viewIndex === 1)
+            }
+            isNextDisabled={
+              isLoading ||
+              (currentPage === pageCount && viewIndex === rowsPerPage)
+            }
+            onPrevious={() => onPrevious(formData)}
+            onNext={() => onNext(formData)}
+          />
+        )}
+        <Box display="flex" flexDirection="row" alignItems="center" gap={2}>
+          {props.customFooterContent}
+          {viewMode === 'creation' && !props.hideCancelButton && (
+            <Button variant="outlined" onClick={onClose} sx={{ flex: 1 }}>
+              {cancelButtonTitle || 'Cancel'}
+            </Button>
+          )}
+          {viewMode === 'edit' && !props.hideCancelButton && (
+            <Button
+              variant="contained"
+              color="error"
+              onClick={() => deleteItem(formData)}
+              sx={{ flex: 1 }}
+            >
+              {isLoadingDelete ? (
+                <CircularProgress sx={{ color: 'white' }} size={24} />
+              ) : (
+                cancelButtonTitle || 'Delete'
+              )}
+            </Button>
+          )}
+          {viewMode === 'details' && !props.hideCancelButton && (
+            <Button variant="outlined" onClick={onClose} sx={{ flex: 1 }}>
+              {cancelButtonTitle || 'Close'}
+            </Button>
+          )}
+          {viewMode !== 'details' && (
+            <Button
+              type="submit"
+              variant="contained"
+              disabled={isLoadingCreation || isLoadingEdit || isLoadingDelete}
+              sx={{ flex: 1 }}
+            >
+              {isLoadingCreation || isLoadingEdit ? (
+                <CircularProgress sx={{ color: 'white' }} size={24} />
+              ) : (
+                submitButtonTitle || 'Save'
+              )}
+            </Button>
+          )}
+        </Box>
+      </Box>
+    );
+  }, [
+    isLoading,
+    viewIndex,
+    rowsPerPage,
+    currentPage,
+    pageCount,
+    rowsPerPage,
+    props.customFooterContent,
+    viewMode,
+    props.hideCancelButton,
+    formData,
+    isLoadingDelete,
+    cancelButtonTitle,
+    isLoadingCreation,
+    isLoadingEdit,
+    isLoadingDelete,
+    isLoadingCreation,
+    isLoadingEdit,
+    submitButtonTitle,
+  ]);
+
   return (
     <Drawer
       open={isVisible}
@@ -138,6 +227,7 @@ const DrawerFormSubmodule = (props: FormSubmoduleProps) => {
         gap={2}
         mt={2}
         ml={1}
+        className="Rockets-FormDrawer-Title"
       >
         <Typography variant="h5" sx={{ marginLeft: 3, fontSize: '20px' }}>
           {title()}
@@ -162,7 +252,13 @@ const DrawerFormSubmodule = (props: FormSubmoduleProps) => {
           display: 'flex',
           flexDirection: 'column',
           justifyContent: 'space-between',
+          '& .rjsf': {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+          },
         }}
+        className="Rockets-FormDrawer-SchemaWrapper"
       >
         <SchemaForm.Form
           schema={{
@@ -175,7 +271,6 @@ const DrawerFormSubmodule = (props: FormSubmoduleProps) => {
             ...formUiSchema,
             'ui:submitButtonOptions': { norender: true },
           }}
-          validator={validator}
           noHtml5Validate={true}
           showErrorList={false}
           formData={formData}
@@ -183,77 +278,12 @@ const DrawerFormSubmodule = (props: FormSubmoduleProps) => {
           customValidate={customValidate}
           readonly={viewMode === 'details'}
           onChange={handleFieldChange}
+          onSubmit={handleFormSubmit}
           {...otherProps}
         >
           {children}
+          {actionButtons}
         </SchemaForm.Form>
-        <Box
-          display="flex"
-          flexDirection="row"
-          alignItems="center"
-          justifyContent={
-            viewMode === 'creation' ? 'flex-end' : 'space-between'
-          }
-        >
-          {viewMode !== 'creation' && (
-            <TableRowControls
-              isLoading={isLoading}
-              currentIndex={viewIndex}
-              rowsPerPage={rowsPerPage}
-              isPreviousDisabled={
-                isLoading || (currentPage === 1 && viewIndex === 1)
-              }
-              isNextDisabled={
-                isLoading ||
-                (currentPage === pageCount && viewIndex === rowsPerPage)
-              }
-              onPrevious={() => onPrevious(formData)}
-              onNext={() => onNext(formData)}
-            />
-          )}
-          <Box display="flex" flexDirection="row" alignItems="center" gap={2}>
-            {props.customFooterContent}
-            {viewMode === 'creation' && !props.hideCancelButton && (
-              <Button variant="outlined" onClick={onClose} sx={{ flex: 1 }}>
-                {cancelButtonTitle || 'Cancel'}
-              </Button>
-            )}
-            {viewMode === 'edit' && !props.hideCancelButton && (
-              <Button
-                variant="contained"
-                color="error"
-                onClick={() => deleteItem(formData)}
-                sx={{ flex: 1 }}
-              >
-                {isLoadingDelete ? (
-                  <CircularProgress sx={{ color: 'white' }} size={24} />
-                ) : (
-                  cancelButtonTitle || 'Delete'
-                )}
-              </Button>
-            )}
-            {viewMode === 'details' && !props.hideCancelButton && (
-              <Button variant="outlined" onClick={onClose} sx={{ flex: 1 }}>
-                {cancelButtonTitle || 'Close'}
-              </Button>
-            )}
-            {viewMode !== 'details' && (
-              <Button
-                type="submit"
-                variant="contained"
-                disabled={isLoadingCreation || isLoadingEdit || isLoadingDelete}
-                onClick={handleFormSubmit}
-                sx={{ flex: 1 }}
-              >
-                {isLoadingCreation || isLoadingEdit ? (
-                  <CircularProgress sx={{ color: 'white' }} size={24} />
-                ) : (
-                  submitButtonTitle || 'Save'
-                )}
-              </Button>
-            )}
-          </Box>
-        </Box>
       </Box>
     </Drawer>
   );