Merge pull request #20 from Rushikesh-Sonawane99/release-1.0.0

Issue #PS-1276 chore: Added logic to overide button of FormWithMaterialUI and added custom buttons
tekdi · Jul 18, 2024 · cf5b87a · cf5b87a
2 parents 9d962fe + 13fa1d5
commit cf5b87a
Show file tree

Hide file tree

Showing 7 changed files with 623 additions and 527 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -110,7 +110,8 @@
     "PAGE_NOT_FOUND": "Page not found",
     "ACCESS_DENIED": "Access Denied",
     "YOU_DONT_HAVE_PERMISSION_TO_ACCESS_THIS_PAGE": "You don't have access to this page",
-    "NEW_LEARNER": "New Learner"
+    "NEW_LEARNER": "New Learner",
+    "SUBMIT": "Submit"
   },
   "LOGIN_PAGE": {
     "USERNAME": "Username",

diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx
@@ -82,19 +82,7 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose }) => {
       <SimpleModal
         open={open}
         onClose={onClose}
-        primaryText="Back"
-        primaryActionHandler={() => {
-          const formElement = document.getElementById(
-            'dynamic-form'
-          ) as HTMLFormElement;
-          if (formElement) {
-            formElement.dispatchEvent(
-              new Event('submit', { cancelable: true, bubbles: true })
-            );
-          }
-        }}
-        secondaryText="Create"
-        secondaryActionHandler={onClose}
+        showFooter={false}
         modalTitle={t('COMMON.NEW_LEARNER')}
       >
         {schema && uiSchema && (
@@ -107,6 +95,7 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose }) => {
             widgets={{}}
             showErrorList={true}
             customFields={customFields}
+            showTwoButtons={true} 
           />
         )}
       </SimpleModal>

diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx
@@ -7,6 +7,8 @@ import MultiSelectCheckboxes from './MultiSelectCheckboxes';
 import CustomRadioWidget from './CustomRadioWidget';
 import { RJSFSchema, RegistryFieldsType, WidgetProps } from '@rjsf/utils';
 import { useTranslation } from 'next-i18next';
+import { Button, Divider } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 
 const FormWithMaterialUI = withTheme(MaterialUITheme);
 
@@ -27,6 +29,7 @@ interface DynamicFormProps {
   customFields: {
     [key: string]: React.FC<RegistryFieldsType<any, RJSFSchema, any>>;
   };
+  showTwoButtons?: boolean;
 }
 const DynamicForm: React.FC<DynamicFormProps> = ({
   schema,
@@ -36,13 +39,15 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
   onChange,
   onError,
   customFields,
+  showTwoButtons = false,
 }) => {
   const widgets = {
     MultiSelectCheckboxes: MultiSelectCheckboxes,
     CustomRadioWidget: CustomRadioWidget,
   };
 
   const { t } = useTranslation();
+  const theme = useTheme<any>();
 
   // console.log('CustomErrorList', CustomErrorList);
 
@@ -125,23 +130,109 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
     onChange(event);
   }
 
+  const primaryActionHandler = () => {
+    const formElement = document.getElementById(
+      'dynamic-form'
+    ) as HTMLFormElement;
+    if (formElement) {
+      formElement.dispatchEvent(
+        new Event('submit', { cancelable: true, bubbles: true })
+      );
+    }
+  };
+
+  const secondaryActionHandler = () => {
+    console.log('Secondary action handler clicked');
+  };
+
+  const CustomSubmitButton = () => (
+    <div
+      style={{
+        marginTop: '16px',
+        display: 'flex',
+        justifyContent: 'space-between',
+      }}
+    >
+      {showTwoButtons ? (
+        <>
+          <Button
+            variant="contained"
+            color="primary"
+            sx={{
+              '&.Mui-disabled': {
+                backgroundColor: theme?.palette?.primary?.main,
+              },
+              minWidth: '84px',
+              height: '2.5rem',
+              padding: theme.spacing(1),
+              fontWeight: '500',
+              width: '48%',
+            }}
+            onClick={primaryActionHandler}
+          >
+          {t('COMMON.BACK')}
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            sx={{
+              '&.Mui-disabled': {
+                backgroundColor: theme?.palette?.primary?.main,
+              },
+              minWidth: '84px',
+              height: '2.5rem',
+              padding: theme.spacing(1),
+              fontWeight: '500',
+              width: '48%',
+            }}
+            onClick={secondaryActionHandler}
+          >
+            {t('COMMON.SUBMIT')}
+          </Button>
+        </>
+      ) : (
+        <Button
+          variant="contained"
+          color="primary"
+          sx={{
+            '&.Mui-disabled': {
+              backgroundColor: theme?.palette?.primary?.main,
+            },
+            minWidth: '84px',
+            height: '2.5rem',
+            padding: theme.spacing(1),
+            fontWeight: '500',
+            width: '100%',
+          }}
+          onClick={secondaryActionHandler}
+        >
+          Submit
+        </Button>
+      )}
+    </div>
+  );
+
   return (
-    <FormWithMaterialUI
-      schema={schema}
-      uiSchema={uiSchema}
-      formData={formData}
-      onChange={handleChange}
-      onSubmit={onSubmit}
-      validator={validator}
-      liveValidate
-      showErrorList={false}
-      widgets={widgets}
-      noHtml5Validate
-      onError={handleError}
-      transformErrors={transformErrors}
-      fields={customFields}
-      // ErrorList={CustomErrorList}
-    />
+    <div>
+      <FormWithMaterialUI
+        schema={schema}
+        uiSchema={uiSchema}
+        formData={formData}
+        onChange={handleChange}
+        onSubmit={onSubmit}
+        validator={validator}
+        liveValidate
+        showErrorList={false}
+        widgets={widgets}
+        noHtml5Validate
+        onError={handleError}
+        transformErrors={transformErrors}
+        fields={customFields}
+      >
+        <Divider />
+        <CustomSubmitButton />
+      </FormWithMaterialUI>
+    </div>
   );
 };
 

diff --git a/src/components/GeneratedSchemas.ts b/src/components/GeneratedSchemas.ts
@@ -13,7 +13,7 @@ export const GenerateSchemaAndUiSchema = (
 ) => {
   const schema: JSONSchema7 = {
     //Form schema
-    title: formData.title,
+    title: '',
     description: '',
     type: 'object',
     required: [],

diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx
@@ -149,30 +149,34 @@ const manageUsers: React.FC<ManageUsersProps> = ({
           const resp = await getMyUserList({ limit, page, filters, fields });
           const facilitatorList = resp.result?.getUserDetails;
 
-            console.log(facilitatorList);
-
+          console.log(facilitatorList);
 
           if (!facilitatorList || facilitatorList?.length === 0) {
             console.log('No users found.');
             return;
           }
           const userIds = facilitatorList?.map((user: any) => user.userId);
           console.log(userIds);
-          
+
           const cohortDetailsPromises = userIds?.map((userId: string) =>
             getCohortList(userId, { filter: 'true' })
           );
-          const cohortDetailsResults = await Promise.allSettled(cohortDetailsPromises);
-
+          const cohortDetailsResults = await Promise.allSettled(
+            cohortDetailsPromises
+          );
+
           const cohortDetails = cohortDetailsResults.map((result) => {
             if (result.status === 'fulfilled') {
               return result.value;
             } else {
-              console.error('Error fetching cohort details for a user:', result.reason);
+              console.error(
+                'Error fetching cohort details for a user:',
+                result.reason
+              );
               return null; // or handle the error as needed
             }
           });
-          
+
           console.log('Cohort Details:', cohortDetails);
 
           const extractedData = facilitatorList?.map(
@@ -190,10 +194,9 @@ const manageUsers: React.FC<ManageUsersProps> = ({
             }
           );
 
-
           setTimeout(() => {
             console.log('extractedData');
-            
+
             setUsers(extractedData);
           });
         }
@@ -305,11 +308,11 @@ const manageUsers: React.FC<ManageUsersProps> = ({
       const cohortList = await getCohortList(userId);
       console.log('Cohort List:', cohortList);
 
-      if (cohortList && cohortList?.length > 0 ) {
+      if (cohortList && cohortList?.length > 0) {
         const cohortNames = cohortList
           .map((cohort: { cohortName: any }) => cohort?.cohortName)
           .join(', ');
-        
+
         setOpenRemoveUserModal(true);
         setRemoveCohortNames(cohortNames);
       } else {
@@ -767,12 +770,12 @@ const manageUsers: React.FC<ManageUsersProps> = ({
             >
               {' '}
               <Box mt={1.5} mb={1.5}>
-              <Typography>
-  {t('CENTERS.THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT')}{' '}
-  <strong>{removeCohortNames}</strong>
-  <br />
-  {t('CENTERS.PLEASE_REMOVE_THE_USER_FROM_COHORT')}
-</Typography>
+                <Typography>
+                  {t('CENTERS.THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT')}{' '}
+                  <strong>{removeCohortNames}</strong>
+                  <br />
+                  {t('CENTERS.PLEASE_REMOVE_THE_USER_FROM_COHORT')}
+                </Typography>
               </Box>
             </SimpleModal>
           </>