From 16f15e5273898d639595dadd40ddcbe05094cf27 Mon Sep 17 00:00:00 2001
From: Jefferson Silva <brnmouras@gmail.com>
Date: Thu, 29 Aug 2024 15:16:06 -0300
Subject: [PATCH 1/3] refactor: move form props and adjust toggle function

---
 .../submodules/DrawerForm/index.tsx           |  60 +----
 .../components/submodules/ModalForm/index.tsx | 210 +++++++-----------
 .../src/components/submodules/types/Form.ts   |  48 ++++
 .../src/modules/crud/index.tsx                |  22 +-
 4 files changed, 145 insertions(+), 195 deletions(-)
 create mode 100644 packages/react-material-ui/src/components/submodules/types/Form.ts

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 db862d7e..5ee1e758 100644
--- a/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx
+++ b/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx
@@ -1,8 +1,5 @@
-import React, { useState, PropsWithChildren, ReactNode } from 'react';
-
-import type { RJSFSchema, UiSchema, CustomValidator } from '@rjsf/utils';
-import type { IChangeEvent, FormProps } from '@rjsf/core';
-
+import React, { useState } from 'react';
+import type { IChangeEvent } from '@rjsf/core';
 import {
   Box,
   Drawer,
@@ -17,53 +14,11 @@ import CloseIcon from '@mui/icons-material/Close';
 import useDataProvider, { useQuery } from '@concepta/react-data-provider';
 import validator from '@rjsf/validator-ajv6';
 
-import { SchemaForm, SchemaFormProps } from '../../../components/SchemaForm';
-
+import { SchemaForm } from '../../../components/SchemaForm';
 import { CustomTextFieldWidget } from '../../../styles/CustomWidgets';
+import { FormSubmoduleProps } from '../types/Form';
 
-type Action = 'creation' | 'edit' | 'details' | null;
-
-type DrawerFormSubmoduleProps = PropsWithChildren<
-  Omit<
-    SchemaFormProps,
-    | 'schema'
-    | 'uiSchema'
-    | 'validator'
-    | 'onSubmit'
-    | 'noHtml5Validate'
-    | 'showErrorList'
-    | 'formData'
-    | 'readonly'
-    | 'customValidate'
-  >
-> & {
-  queryResource: string;
-  title?: string;
-  formSchema?: RJSFSchema;
-  viewMode?: Action | null;
-  formUiSchema?: UiSchema;
-  formData?: Record<string, unknown> | null;
-  submitButtonTitle?: string;
-  cancelButtonTitle?: string;
-  hideCancelButton?: boolean;
-  customFooterContent?: ReactNode;
-  onClose?: () => void;
-  customValidate?: CustomValidator;
-  widgets?: FormProps['widgets'];
-  onSuccess?: (data: unknown) => void;
-  onError?: (error: unknown) => void;
-  onDeleteSuccess?: (data: unknown) => void;
-  onDeleteError?: (error: unknown) => void;
-  onPrevious?: (data: unknown) => void;
-  onNext?: (data: unknown) => void;
-  isLoading?: boolean;
-  viewIndex?: number;
-  rowsPerPage?: number;
-  currentPage?: number;
-  pageCount?: number;
-};
-
-const DrawerFormSubmodule = (props: DrawerFormSubmoduleProps) => {
+const DrawerFormSubmodule = (props: FormSubmoduleProps) => {
   const {
     queryResource,
     viewMode,
@@ -87,11 +42,12 @@ const DrawerFormSubmodule = (props: DrawerFormSubmoduleProps) => {
     rowsPerPage,
     currentPage,
     pageCount,
+    isVisible,
     ...otherProps
   } = props;
 
   const [fieldValues, setFieldValues] =
-    useState<DrawerFormSubmoduleProps['formData']>(null);
+    useState<FormSubmoduleProps['formData']>(null);
 
   const { post, patch, del } = useDataProvider();
 
@@ -155,7 +111,7 @@ const DrawerFormSubmodule = (props: DrawerFormSubmoduleProps) => {
   };
 
   return (
-    <Drawer open={viewMode !== null} anchor="right">
+    <Drawer open={isVisible} anchor="right">
       <Box
         display="flex"
         alignItems="center"
diff --git a/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx b/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx
index 4224608a..1b6bc0b2 100644
--- a/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx
+++ b/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx
@@ -1,7 +1,5 @@
-import React, { PropsWithChildren, ReactNode } from 'react';
-
-import type { RJSFSchema, UiSchema, CustomValidator } from '@rjsf/utils';
-import type { IChangeEvent, FormProps } from '@rjsf/core';
+import React from 'react';
+import { IChangeEvent } from '@rjsf/core';
 import {
   Box,
   Button,
@@ -18,52 +16,11 @@ import CloseIcon from '@mui/icons-material/Close';
 import useDataProvider, { useQuery } from '@concepta/react-data-provider';
 import validator from '@rjsf/validator-ajv6';
 
-import { SchemaForm, SchemaFormProps } from '../../../components/SchemaForm';
+import { SchemaForm } from '../../../components/SchemaForm';
 import { CustomTextFieldWidget } from '../../../styles/CustomWidgets';
+import { FormSubmoduleProps } from '../types/Form';
 
-type Action = 'creation' | 'edit' | 'details' | null;
-
-type ModalFormSubmoduleProps = PropsWithChildren<
-  Omit<
-    SchemaFormProps,
-    | 'schema'
-    | 'uiSchema'
-    | 'validator'
-    | 'onSubmit'
-    | 'noHtml5Validate'
-    | 'showErrorList'
-    | 'formData'
-    | 'readonly'
-    | 'customValidate'
-  >
-> & {
-  title?: string;
-  queryResource: string;
-  formSchema?: RJSFSchema;
-  viewMode?: Action | null;
-  formUiSchema?: UiSchema;
-  formData?: Record<string, unknown> | null;
-  submitButtonTitle?: string;
-  cancelButtonTitle?: string;
-  hideCancelButton?: boolean;
-  customFooterContent?: ReactNode;
-  onClose?: () => void;
-  customValidate?: CustomValidator;
-  widgets?: FormProps['widgets'];
-  onSuccess?: (data: unknown) => void;
-  onError?: (error: unknown) => void;
-  onDeleteSuccess?: (data: unknown) => void;
-  onDeleteError?: (error: unknown) => void;
-  onPrevious?: (data: unknown) => void;
-  onNext?: (data: unknown) => void;
-  isLoading?: boolean;
-  viewIndex?: number;
-  rowsPerPage?: number;
-  currentPage?: number;
-  pageCount?: number;
-};
-
-const ModalFormSubmodule = (props: ModalFormSubmoduleProps) => {
+const ModalFormSubmodule = (props: FormSubmoduleProps) => {
   const {
     queryResource,
     viewMode,
@@ -87,6 +44,7 @@ const ModalFormSubmodule = (props: ModalFormSubmoduleProps) => {
     rowsPerPage,
     currentPage,
     pageCount,
+    isVisible,
     ...otherProps
   } = props;
 
@@ -150,7 +108,7 @@ const ModalFormSubmodule = (props: ModalFormSubmoduleProps) => {
   };
 
   return (
-    <Dialog open={viewMode !== null} maxWidth="md" fullWidth onClose={onClose}>
+    <Dialog open={isVisible} maxWidth="md" fullWidth onClose={onClose}>
       <DialogTitle>
         {viewMode === 'creation'
           ? 'Add Data'
@@ -189,92 +147,88 @@ const ModalFormSubmodule = (props: ModalFormSubmoduleProps) => {
           readonly={viewMode === 'details'}
           {...otherProps}
         >
-          <>
-            {children}
+          {children}
+          <Box
+            display="flex"
+            flexDirection="row"
+            alignItems="center"
+            justifyContent={
+              viewMode === 'creation' ? 'flex-end' : 'space-between'
+            }
+            mt={4}
+          >
+            {viewMode !== 'creation' && (
+              <Box display="flex" alignItems="center" gap={2}>
+                <IconButton
+                  onClick={() => onPrevious(formData)}
+                  disabled={isLoading || (currentPage === 1 && viewIndex === 1)}
+                >
+                  <ChevronLeft sx={{ color: '#333' }} />
+                </IconButton>
+                <Typography>
+                  {isLoading ? '' : `Row ${viewIndex}/${rowsPerPage}`}
+                </Typography>
+                <IconButton
+                  onClick={() => onNext(formData)}
+                  disabled={
+                    isLoading ||
+                    (currentPage === pageCount && viewIndex === rowsPerPage)
+                  }
+                >
+                  <ChevronRight sx={{ color: '#333' }} />
+                </IconButton>
+              </Box>
+            )}
             <Box
               display="flex"
               flexDirection="row"
               alignItems="center"
-              justifyContent={
-                viewMode === 'creation' ? 'flex-end' : 'space-between'
-              }
-              mt={4}
+              mt={2}
+              gap={2}
             >
-              {viewMode !== 'creation' && (
-                <Box display="flex" alignItems="center" gap={2}>
-                  <IconButton
-                    onClick={() => onPrevious(formData)}
-                    disabled={
-                      isLoading || (currentPage === 1 && viewIndex === 1)
-                    }
-                  >
-                    <ChevronLeft sx={{ color: '#333' }} />
-                  </IconButton>
-                  <Typography>
-                    {isLoading ? '' : `Row ${viewIndex}/${rowsPerPage}`}
-                  </Typography>
-                  <IconButton
-                    onClick={() => onNext(formData)}
-                    disabled={
-                      isLoading ||
-                      (currentPage === pageCount && viewIndex === rowsPerPage)
-                    }
-                  >
-                    <ChevronRight sx={{ color: '#333' }} />
-                  </IconButton>
-                </Box>
+              {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
-                display="flex"
-                flexDirection="row"
-                alignItems="center"
-                mt={2}
-                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>
-          </>
+          </Box>
         </SchemaForm.Form>
       </DialogContent>
     </Dialog>
diff --git a/packages/react-material-ui/src/components/submodules/types/Form.ts b/packages/react-material-ui/src/components/submodules/types/Form.ts
new file mode 100644
index 00000000..90f6a148
--- /dev/null
+++ b/packages/react-material-ui/src/components/submodules/types/Form.ts
@@ -0,0 +1,48 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { RJSFSchema, UiSchema, CustomValidator } from '@rjsf/utils';
+import { FormProps } from '@rjsf/core';
+
+import { SchemaFormProps } from '../../../components/SchemaForm';
+
+export type Action = 'creation' | 'edit' | 'details' | null;
+
+export type FormSubmoduleProps = PropsWithChildren<
+  Omit<
+    SchemaFormProps,
+    | 'schema'
+    | 'uiSchema'
+    | 'validator'
+    | 'onSubmit'
+    | 'noHtml5Validate'
+    | 'showErrorList'
+    | 'formData'
+    | 'readonly'
+    | 'customValidate'
+  >
+> & {
+  isVisible: boolean;
+  queryResource: string;
+  title?: string;
+  formSchema?: RJSFSchema;
+  viewMode?: Action | null;
+  formUiSchema?: UiSchema;
+  formData?: Record<string, unknown> | null;
+  submitButtonTitle?: string;
+  cancelButtonTitle?: string;
+  hideCancelButton?: boolean;
+  customFooterContent?: ReactNode;
+  onClose?: () => void;
+  customValidate?: CustomValidator;
+  widgets?: FormProps['widgets'];
+  onSuccess?: (data: unknown) => void;
+  onError?: (error: unknown) => void;
+  onDeleteSuccess?: (data: unknown) => void;
+  onDeleteError?: (error: unknown) => void;
+  onPrevious?: (data: unknown) => void;
+  onNext?: (data: unknown) => void;
+  isLoading?: boolean;
+  viewIndex?: number;
+  rowsPerPage?: number;
+  currentPage?: number;
+  pageCount?: number;
+};
diff --git a/packages/react-material-ui/src/modules/crud/index.tsx b/packages/react-material-ui/src/modules/crud/index.tsx
index bf098038..e7b59d95 100644
--- a/packages/react-material-ui/src/modules/crud/index.tsx
+++ b/packages/react-material-ui/src/modules/crud/index.tsx
@@ -89,6 +89,7 @@ const CrudModule = (props: ModuleProps) => {
   const [drawerViewMode, setDrawerViewMode] = useState<Action>(null);
   const [selectedRow, setSelectedRow] = useState<SelectedRow>(null);
   const [currentViewIndex, setCurrentViewIndex] = useState<number>(0);
+  const [isFormVisible, setFormVisible] = useState<boolean>(false);
 
   const useTableReturn = useTable(props.resource, {
     callbacks: {
@@ -224,11 +225,13 @@ const CrudModule = (props: ModuleProps) => {
             setSelectedRow(payload.row);
             setDrawerViewMode(payload.action);
             setCurrentViewIndex(payload.index);
+            setFormVisible(true);
           }}
           onAddNew={() => {
             setSelectedRow(null);
             setDrawerViewMode('creation');
             setCurrentViewIndex(0);
+            setFormVisible(true);
           }}
           hideAddButton={!props.createFormProps}
           hideEditButton={!props.editFormProps || props.hideEditButton}
@@ -250,37 +253,26 @@ const CrudModule = (props: ModuleProps) => {
 
         {enhancedFormProps && (
           <FormComponent
+            isVisible={isFormVisible}
             title={props.title}
             queryResource={props.resource}
             viewMode={drawerViewMode}
             formData={selectedRow}
             onSuccess={(data) => {
               useTableReturn.refresh();
-
-              setSelectedRow(null);
-              setDrawerViewMode(null);
-              setCurrentViewIndex(0);
-
+              setFormVisible(false);
               if (formOnSuccess) {
                 formOnSuccess(data);
               }
             }}
             onDeleteSuccess={(data) => {
               useTableReturn.refresh();
-
-              setSelectedRow(null);
-              setDrawerViewMode(null);
-              setCurrentViewIndex(0);
-
+              setFormVisible(false);
               if (formOnDeleteSuccess) {
                 formOnDeleteSuccess(data);
               }
             }}
-            onClose={() => {
-              setSelectedRow(null);
-              setDrawerViewMode(null);
-              setCurrentViewIndex(0);
-            }}
+            onClose={() => setFormVisible(false)}
             onPrevious={() => changeCurrentFormData('previous')}
             onNext={() => changeCurrentFormData('next')}
             isLoading={isPending}

From 9ce9d58a8f80a5dcd473e6c0799089dce25fa649 Mon Sep 17 00:00:00 2001
From: Jefferson Silva <brnmouras@gmail.com>
Date: Thu, 29 Aug 2024 16:12:56 -0300
Subject: [PATCH 2/3] refactor: move table row controls to separate component

---
 .../submodules/DrawerForm/index.tsx           | 37 ++++++--------
 .../components/submodules/ModalForm/index.tsx | 38 ++++++--------
 .../submodules/TableRowControls/index.tsx     | 51 +++++++++++++++++++
 3 files changed, 81 insertions(+), 45 deletions(-)
 create mode 100644 packages/react-material-ui/src/components/submodules/TableRowControls/index.tsx

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 5ee1e758..a7ee8abd 100644
--- a/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx
+++ b/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx
@@ -8,8 +8,6 @@ import {
   IconButton,
   Typography,
 } from '@mui/material';
-import ChevronLeft from '@mui/icons-material/ChevronLeft';
-import ChevronRight from '@mui/icons-material/ChevronRight';
 import CloseIcon from '@mui/icons-material/Close';
 import useDataProvider, { useQuery } from '@concepta/react-data-provider';
 import validator from '@rjsf/validator-ajv6';
@@ -17,6 +15,7 @@ import validator from '@rjsf/validator-ajv6';
 import { SchemaForm } from '../../../components/SchemaForm';
 import { CustomTextFieldWidget } from '../../../styles/CustomWidgets';
 import { FormSubmoduleProps } from '../types/Form';
+import TableRowControls from '../TableRowControls';
 
 const DrawerFormSubmodule = (props: FormSubmoduleProps) => {
   const {
@@ -181,26 +180,20 @@ const DrawerFormSubmodule = (props: FormSubmoduleProps) => {
           }
         >
           {viewMode !== 'creation' && (
-            <Box display="flex" alignItems="center" gap={2}>
-              <IconButton
-                onClick={() => onPrevious(formData)}
-                disabled={isLoading || (currentPage === 1 && viewIndex === 1)}
-              >
-                <ChevronLeft sx={{ color: '#333' }} />
-              </IconButton>
-              <Typography>
-                {isLoading ? '' : `Row ${viewIndex}/${rowsPerPage}`}
-              </Typography>
-              <IconButton
-                onClick={() => onNext(formData)}
-                disabled={
-                  isLoading ||
-                  (currentPage === pageCount && viewIndex === rowsPerPage)
-                }
-              >
-                <ChevronRight sx={{ color: '#333' }} />
-              </IconButton>
-            </Box>
+            <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}
diff --git a/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx b/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx
index 1b6bc0b2..1ebe9d60 100644
--- a/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx
+++ b/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx
@@ -8,10 +8,7 @@ import {
   DialogTitle,
   DialogContent,
   IconButton,
-  Typography,
 } from '@mui/material';
-import ChevronLeft from '@mui/icons-material/ChevronLeft';
-import ChevronRight from '@mui/icons-material/ChevronRight';
 import CloseIcon from '@mui/icons-material/Close';
 import useDataProvider, { useQuery } from '@concepta/react-data-provider';
 import validator from '@rjsf/validator-ajv6';
@@ -19,6 +16,7 @@ import validator from '@rjsf/validator-ajv6';
 import { SchemaForm } from '../../../components/SchemaForm';
 import { CustomTextFieldWidget } from '../../../styles/CustomWidgets';
 import { FormSubmoduleProps } from '../types/Form';
+import TableRowControls from '../TableRowControls';
 
 const ModalFormSubmodule = (props: FormSubmoduleProps) => {
   const {
@@ -158,26 +156,20 @@ const ModalFormSubmodule = (props: FormSubmoduleProps) => {
             mt={4}
           >
             {viewMode !== 'creation' && (
-              <Box display="flex" alignItems="center" gap={2}>
-                <IconButton
-                  onClick={() => onPrevious(formData)}
-                  disabled={isLoading || (currentPage === 1 && viewIndex === 1)}
-                >
-                  <ChevronLeft sx={{ color: '#333' }} />
-                </IconButton>
-                <Typography>
-                  {isLoading ? '' : `Row ${viewIndex}/${rowsPerPage}`}
-                </Typography>
-                <IconButton
-                  onClick={() => onNext(formData)}
-                  disabled={
-                    isLoading ||
-                    (currentPage === pageCount && viewIndex === rowsPerPage)
-                  }
-                >
-                  <ChevronRight sx={{ color: '#333' }} />
-                </IconButton>
-              </Box>
+              <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"
diff --git a/packages/react-material-ui/src/components/submodules/TableRowControls/index.tsx b/packages/react-material-ui/src/components/submodules/TableRowControls/index.tsx
new file mode 100644
index 00000000..d06e905b
--- /dev/null
+++ b/packages/react-material-ui/src/components/submodules/TableRowControls/index.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Box, IconButton, Typography, Skeleton } from '@mui/material';
+import ChevronLeft from '@mui/icons-material/ChevronLeft';
+import ChevronRight from '@mui/icons-material/ChevronRight';
+
+type Props = {
+  isLoading: boolean;
+  currentIndex: number;
+  rowsPerPage: number;
+  isPreviousDisabled: boolean;
+  isNextDisabled: boolean;
+  onPrevious: () => void;
+  onNext: () => void;
+};
+
+const TableRowControls = (props: Props) => {
+  const {
+    isLoading,
+    currentIndex,
+    rowsPerPage,
+    isPreviousDisabled,
+    isNextDisabled,
+    onPrevious,
+    onNext,
+  } = props;
+
+  return (
+    <Box display="flex" alignItems="center" gap={2}>
+      <IconButton onClick={onPrevious} disabled={isPreviousDisabled}>
+        <ChevronLeft sx={{ color: '#333' }} />
+      </IconButton>
+      <Typography sx={{ textTransform: 'uppercase', fontSize: '0.875rem' }}>
+        {isLoading ? (
+          <Skeleton
+            variant="text"
+            sx={{ fontSize: '0.875rem' }}
+            width={58}
+            height={22}
+          />
+        ) : (
+          `Row ${currentIndex}/${rowsPerPage}`
+        )}
+      </Typography>
+      <IconButton onClick={onNext} disabled={isNextDisabled}>
+        <ChevronRight sx={{ color: '#333' }} />
+      </IconButton>
+    </Box>
+  );
+};
+
+export default TableRowControls;

From 98c749613a0da73095a5eb7e908a251fd200e4bd Mon Sep 17 00:00:00 2001
From: Jefferson Silva <brnmouras@gmail.com>
Date: Thu, 29 Aug 2024 17:50:57 -0300
Subject: [PATCH 3/3] refactor: change position of action buttons on filter row

---
 .../components/submodules/Filter/index.tsx    |  3 +-
 .../src/components/submodules/Table/index.tsx | 70 +++++++++----------
 2 files changed, 35 insertions(+), 38 deletions(-)

diff --git a/packages/react-material-ui/src/components/submodules/Filter/index.tsx b/packages/react-material-ui/src/components/submodules/Filter/index.tsx
index 89c6e847..1f102059 100644
--- a/packages/react-material-ui/src/components/submodules/Filter/index.tsx
+++ b/packages/react-material-ui/src/components/submodules/Filter/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, ReactNode } from 'react';
 import {
   Filter,
   FilterVariant,
@@ -42,6 +42,7 @@ export type FilterCallback = (filter: FilterValues) => void;
 type Props = {
   orderableListCacheKey?: string;
   cacheApiPath?: string;
+  complementaryActions?: ReactNode;
 };
 
 const FilterSubmodule = (props: Props) => {
diff --git a/packages/react-material-ui/src/components/submodules/Table/index.tsx b/packages/react-material-ui/src/components/submodules/Table/index.tsx
index 66ca9d2a..2324eede 100644
--- a/packages/react-material-ui/src/components/submodules/Table/index.tsx
+++ b/packages/react-material-ui/src/components/submodules/Table/index.tsx
@@ -278,45 +278,41 @@ const TableSubmodule = (props: TableSubmoduleProps) => {
             <FilterSubmodule
               orderableListCacheKey={props.filterCacheKey}
               cacheApiPath={props.cacheApiPath}
+              complementaryActions={
+                <Box sx={{ display: 'flex' }}>
+                  {props.reordable !== false && (
+                    <Table.ColumnOrderable
+                      hasAllOption={props.hasAllOption}
+                      orderableListCacheKey={props.tableCacheKey}
+                      cacheApiPath={props.cacheApiPath}
+                    />
+                  )}
+                  <Box
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="flex-end"
+                  >
+                    {props.additionalFilterRowContent}
+                    {!props.hideAddButton && (
+                      <Button
+                        variant="contained"
+                        onClick={props.onAddNew}
+                        startIcon={props.addButtonStartIcon || <AddIcon />}
+                        endIcon={props.addButtonEndIcon}
+                        sx={{
+                          textTransform: 'capitalize',
+                          textWrap: 'nowrap',
+                          marginLeft: 2,
+                        }}
+                      >
+                        {props.addButtonContent || 'Add new'}
+                      </Button>
+                    )}
+                  </Box>
+                </Box>
+              }
             />
           )}
-
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: { xs: 'space-between', lg: 'initial' },
-              mt: { xs: filters ? 2 : 0, lg: 0 },
-              ml: { xs: 0, lg: 2 },
-              width: { xs: '100%', lg: 'auto' },
-            }}
-          >
-            {props.reordable !== false && (
-              <Table.ColumnOrderable
-                hasAllOption={props.hasAllOption}
-                orderableListCacheKey={props.tableCacheKey}
-                cacheApiPath={props.cacheApiPath}
-              />
-            )}
-            <Box display="flex" alignItems="center" justifyContent="flex-end">
-              {props.additionalFilterRowContent}
-              {!props.hideAddButton && (
-                <Button
-                  variant="contained"
-                  onClick={props.onAddNew}
-                  startIcon={props.addButtonStartIcon || <AddIcon />}
-                  endIcon={props.addButtonEndIcon}
-                  sx={{
-                    textTransform: 'capitalize',
-                    textWrap: 'nowrap',
-                    marginLeft: 2,
-                  }}
-                >
-                  {props.addButtonContent || 'Add new'}
-                </Button>
-              )}
-            </Box>
-          </Box>
         </Box>
 
         <TableContainer sx={tableTheme.tableContainer}>