Implement form page for CrudModule

packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Box, Button, Dialog, DialogContent, Typography } from '@mui/material';
+import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+};
+
+const ConfirmationModal = ({ isOpen, onClose, onConfirm }: Props) => {
+  return (
+    <Dialog open={isOpen} onClose={onClose} maxWidth="xs">
+      <DialogContent>
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          textAlign="center"
+        >
+          <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            sx={{
+              backgroundColor: '#FEE2E2',
+              width: '48px',
+              height: '48px',
+              borderRadius: '24px',
+            }}
+          >
+            <ReportProblemOutlinedIcon
+              color="error"
+              sx={{ width: '24px', height: '24px' }}
+            />
+          </Box>
+          <Typography variant="h5" sx={{ marginTop: 2 }}>
+            Delete Item
+          </Typography>
+          <Typography sx={{ marginTop: 2 }}>
+            Are you sure you want to delete this item?
+          </Typography>
+        </Box>
+        <Box display="flex" justifyContent="center" sx={{ marginTop: 2 }}>
+          <Button
+            onClick={onClose}
+            variant="outlined"
+            color="error"
+            sx={{ marginRight: 2 }}
+          >
+            Cancel
+          </Button>
+          <Button onClick={onConfirm} variant="contained" color="error">
+            Confirm
+          </Button>
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ConfirmationModal;

packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx

@@ -18,7 +18,7 @@ import useDataProvider, { useQuery } from '@concepta/react-data-provider';
 import validator from '@rjsf/validator-ajv6';
 
 import { SchemaForm, SchemaFormProps } from '../../../components/SchemaForm';
-
+import ConfirmationModal from '../ConfirmationModal';
 import { CustomTextFieldWidget } from '../../../styles/CustomWidgets';
 
 type Action = 'creation' | 'edit' | 'details' | null;
@@ -64,6 +64,9 @@ type DrawerFormSubmoduleProps = PropsWithChildren<
 };
 
 const DrawerFormSubmodule = (props: DrawerFormSubmoduleProps) => {
+  const [isConfirmationModalOpen, setConfirmationModalOpen] =
+    useState<boolean>(false);
+
   const {
     queryResource,
     viewMode,
@@ -257,7 +260,7 @@ const DrawerFormSubmodule = (props: DrawerFormSubmoduleProps) => {
               <Button
                 variant="contained"
                 color="error"
-                onClick={() => deleteItem(formData)}
+                onClick={() => setConfirmationModalOpen(true)}
                 sx={{ flex: 1 }}
               >
                 {isLoadingDelete ? (
@@ -290,6 +293,14 @@ const DrawerFormSubmodule = (props: DrawerFormSubmoduleProps) => {
           </Box>
         </Box>
       </Box>
+      <ConfirmationModal
+        isOpen={isConfirmationModalOpen}
+        onClose={() => setConfirmationModalOpen(false)}
+        onConfirm={() => {
+          setConfirmationModalOpen(false);
+          deleteItem(formData);
+        }}
+      />
     </Drawer>
   );
 };

packages/react-material-ui/src/components/submodules/ModalForm/index.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ReactNode } from 'react';
+import React, { PropsWithChildren, ReactNode, useState } from 'react';
 
 import type { RJSFSchema, UiSchema, CustomValidator } from '@rjsf/utils';
 import type { IChangeEvent, FormProps } from '@rjsf/core';
@@ -20,6 +20,7 @@ import validator from '@rjsf/validator-ajv6';
 
 import { SchemaForm, SchemaFormProps } from '../../../components/SchemaForm';
 import { CustomTextFieldWidget } from '../../../styles/CustomWidgets';
+import ConfirmationModal from '../ConfirmationModal';
 
 type Action = 'creation' | 'edit' | 'details' | null;
 
@@ -64,6 +65,9 @@ type ModalFormSubmoduleProps = PropsWithChildren<
 };
 
 const ModalFormSubmodule = (props: ModalFormSubmoduleProps) => {
+  const [isConfirmationModalOpen, setConfirmationModalOpen] =
+    useState<boolean>(false);
+
   const {
     queryResource,
     viewMode,
@@ -241,7 +245,7 @@ const ModalFormSubmodule = (props: ModalFormSubmoduleProps) => {
                   <Button
                     variant="contained"
                     color="error"
-                    onClick={() => deleteItem(formData)}
+                    onClick={() => setConfirmationModalOpen(true)}
                     sx={{ flex: 1 }}
                   >
                     {isLoadingDelete ? (
@@ -277,6 +281,14 @@ const ModalFormSubmodule = (props: ModalFormSubmoduleProps) => {
           </>
         </SchemaForm.Form>
       </DialogContent>
+      <ConfirmationModal
+        isOpen={isConfirmationModalOpen}
+        onClose={() => setConfirmationModalOpen(false)}
+        onConfirm={() => {
+          setConfirmationModalOpen(false);
+          deleteItem(formData);
+        }}
+      />
     </Dialog>
   );
 };

packages/react-material-ui/src/index.ts

@@ -81,6 +81,7 @@ export {
 
 export { AuthModule, AuthModuleProps } from './modules/auth';
 export { default as CrudModule } from './modules/crud';
+export { default as FormModule } from './modules/form';
 export { default as UsersModule } from './modules/users';
 
 export { default as OtpInput } from './components/OtpInput';

packages/react-material-ui/src/modules/crud/index.tsx

@@ -64,7 +64,7 @@ export interface ModuleProps {
   title?: string;
   resource: string;
   tableProps: TableProps;
-  formContainerVariation?: 'drawer' | 'modal';
+  formContainerVariation?: 'drawer' | 'modal' | 'page';
   detailsFormProps?: PropsWithChildren<FormProps>;
   createFormProps?: PropsWithChildren<FormProps>;
   editFormProps?: PropsWithChildren<FormProps>;
@@ -221,11 +221,21 @@ const CrudModule = (props: ModuleProps) => {
         <TableSubmodule
           queryResource={props.resource}
           onAction={(payload) => {
+            if (props.formContainerVariation === 'page') {
+              props.navigate(
+                `/${props.resource}/${payload.action}/${payload.row.id}`,
+              );
+            }
+
             setSelectedRow(payload.row);
             setDrawerViewMode(payload.action);
             setCurrentViewIndex(payload.index);
           }}
           onAddNew={() => {
+            if (props.formContainerVariation === 'page') {
+              props.navigate(`/${props.resource}/new`);
+            }
+
             setSelectedRow(null);
             setDrawerViewMode('creation');
             setCurrentViewIndex(0);