Issue #PS-1254 chore: Modified code for custom button, added helper t…

…o create userName and Password and added roleId in constant file
tekdi · Jul 19, 2024 · 7183d7c · 7183d7c
1 parent f65fa97
commit 7183d7c
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 92 deletions.
diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx
@@ -6,15 +6,16 @@ import {
 } from '@/components/GeneratedSchemas';
 import { IChangeEvent } from '@rjsf/core';
 import ISubmitEvent from '@rjsf/core';
-import { Box } from '@mui/material';
+import { Box, Button, useTheme } from '@mui/material';
 import { RJSFSchema } from '@rjsf/utils';
 import SendCredentialModal from '@/components/SendCredentialModal';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { getFormRead } from '@/services/CreateUserService';
+import { createUser, getFormRead } from '@/services/CreateUserService';
 import { FormData } from '@/utils/Interfaces';
 import { FormContext, FormContextType } from '@/utils/app.constant';
 import SimpleModal from '@/components/SimpleModal';
 import { useTranslation } from 'react-i18next';
+import { generateUsernameAndPassword } from '@/utils/Helper';
 
 interface AddLearnerModalProps {
  open: boolean;
@@ -23,7 +24,16 @@ interface AddLearnerModalProps {
 const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose }) => {
  const [schema, setSchema] = React.useState<any>();
  const [uiSchema, setUiSchema] = React.useState<any>();
+ const [credentials, setCredentials] = React.useState({ username: '', password: '' });
+ // const [learnerFormData, setLearnerFormData] = React.useState<any>();
  const { t } = useTranslation();
+ const theme = useTheme<any>();
+
+ const handleGenerateCredentials = () => {
+ const stateCode = 'MH';
+ const newCredentials = generateUsernameAndPassword(stateCode);
+ setCredentials(newCredentials);
+ };
 
  useEffect(() => {
  const getAddLearnerFormData = async () => {
@@ -71,12 +81,79 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose }) => {
 
  const handleChange = (event: IChangeEvent<any>) => {
  console.log('Form data changed:', event.formData);
+ // setFormData({
+ // ...formData,
+ // [event.target.name]: event.target.value
+ // });
  };
 
  const handleError = (errors: any) => {
  console.log('Form errors:', errors);
  };
 
+ const CustomSubmitButton: React.FC<{ onClose: () => void }> = ({ onClose }) => (
+ <div
+ style={{
+ marginTop: '16px',
+ display: 'flex',
+ justifyContent: 'space-between',
+ }}
+ >
+ <>
+ <Button
+ variant="outlined"
+ color="primary"
+ sx={{
+ '&.Mui-disabled': {
+ backgroundColor: theme?.palette?.primary?.main,
+ },
+ minWidth: '84px',
+ height: '2.5rem',
+ padding: theme.spacing(1),
+ fontWeight: '500',
+ width: '48%',
+ }}
+ onClick={onClose}
+ >
+ {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>
+ </>
+ </div>
+ );
+
+ const primaryActionHandler = () => {
+ onClose();
+ };
+
+ const secondaryActionHandler = async (e: React.FormEvent) => {
+ // console.log('Secondary action handler clicked');
+ e.preventDefault();
+ handleGenerateCredentials();
+ // try {
+ // const response = await createUser(learnerFormData);
+ // console.log('User created successfully', response);
+ // } catch (error) {
+ // console.error('Error creating user', error);
+ // }
+ };
+
  return (
  <>
  <SimpleModal
@@ -95,8 +172,9 @@ const AddLearnerModal: React.FC<AddLearnerModalProps> = ({ open, onClose }) => {
  widgets={{}}
  showErrorList={true}
  customFields={customFields}
- showTwoButtons={true} 
- />
+ >
+ <CustomSubmitButton onClose={primaryActionHandler}/>
+ </DynamicForm>
  )}
  </SimpleModal>
  </>

diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { IChangeEvent } from '@rjsf/core';
 import validator from '@rjsf/validator-ajv8';
 import { Theme as MaterialUITheme } from '@rjsf/mui';
@@ -29,7 +29,7 @@ interface DynamicFormProps {
  customFields: {
  [key: string]: React.FC<RegistryFieldsType<any, RJSFSchema, any>>;
  };
- showTwoButtons?: boolean;
+ children?: ReactNode
 }
 const DynamicForm: React.FC<DynamicFormProps> = ({
  schema,
@@ -39,15 +39,14 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
  onChange,
  onError,
  customFields,
- showTwoButtons = false,
+ children
 }) => {
  const widgets = {
  MultiSelectCheckboxes: MultiSelectCheckboxes,
  CustomRadioWidget: CustomRadioWidget,
  };
-
  const { t } = useTranslation();
- const theme = useTheme<any>();
+
 
  // console.log('CustomErrorList', CustomErrorList);
 
@@ -130,87 +129,6 @@ 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="outlined"
- 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 (
  <div>
@@ -229,8 +147,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
  transformErrors={transformErrors}
  fields={customFields}
  >
- <Divider />
- <CustomSubmitButton />
+ {children}
  </FormWithMaterialUI>
  </div>
  );

diff --git a/src/utils/Helper.ts b/src/utils/Helper.ts
@@ -267,3 +267,13 @@ export const accessGranted = (
  }
  return false;
 };
+
+export const generateUsernameAndPassword = (stateCode: string) => {
+ const currentYear = new Date().getFullYear().toString().slice(-2);
+ const randomNum = Math.floor(10000 + Math.random() * 90000).toString(); 
+
+ const username = `SC${stateCode}${currentYear}${randomNum}`;
+ const password = randomNum;
+
+ return { username, password };
+};
diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts
@@ -47,3 +47,10 @@ export enum FormContextType {
  TEACHER = 'TEACHER',
  TEAM_LEADER = 'TEAMLEADER',
 }
+
+export enum RoleId {
+ STUDENT = '493c04e2-a9db-47f2-b304-503da358d5f4',
+ TEACHER = '3bde0028-6900-4900-9d05-eeb608843718',
+ TEAM_LEADER = '9dd9328f-1bc7-444f-96e3-c5e1daa3514a',
+ ADMIN = 'ee482faf-8a41-45fe-9656-5533dd6a787c'
+}