diff --git a/src/components/AddFacilitator.tsx b/src/components/AddFacilitator.tsx index 5ff4ab92..474b9e61 100644 --- a/src/components/AddFacilitator.tsx +++ b/src/components/AddFacilitator.tsx @@ -19,7 +19,17 @@ import { editEditUser } from '@/services/ProfileService'; import { tenantId } from '../../app.config'; import FormButtons from './FormButtons'; import { sendCredentialService } from '@/services/NotificationService'; - +import { + Box, + Button, + Divider, + Modal, + Typography, + useTheme, +} from '@mui/material'; +import CloseIcon from '@mui/icons-material/Close'; +import { modalStyles } from '@/styles/modalStyles'; +import useSubmittedButtonStore from '@/store/useSubmittedButtonStore'; interface AddFacilitatorModalprops { open: boolean; onClose: () => void; @@ -39,7 +49,8 @@ const AddFacilitatorModal: React.FC = ({ onFacilitatorAdded, }) => { const [schema, setSchema] = React.useState(); - const [openModal, setOpenModal] = React.useState(false); + const [openSendCredModal, setOpenSendCredModal] = React.useState(false); + const [createFacilitator, setCreateFacilitator] = React.useState(false); const [uiSchema, setUiSchema] = React.useState(); const [reloadProfile, setReloadProfile] = React.useState(false); const [email, setEmail] = React.useState(''); @@ -50,7 +61,10 @@ const AddFacilitatorModal: React.FC = ({ const [coreFields, setCoreFields] = React.useState([]); const { t } = useTranslation(); - + const theme = useTheme(); + const setSubmittedButtonStatus = useSubmittedButtonStore( + (state: any) => state.setSubmittedButtonStatus + ); useEffect(() => { const getAddFacilitatorFormData = async () => { try { @@ -122,34 +136,17 @@ const AddFacilitatorModal: React.FC = ({ setTimeout(() => { setFormData(data.formData); }); - const target = event.target as HTMLFormElement; - const elementsArray = Array.from(target.elements); - - // for (const element of elementsArray) { - // if ( - // (element instanceof HTMLInputElement || - // element instanceof HTMLSelectElement || - // element instanceof HTMLTextAreaElement) && - // (element.value === '' || - // (Array.isArray(element.value) && element.value.length === 0)) - // ) { - // element.focus(); - // return; - // } - // } - - const formData = data.formData; - console.log('Form data submitted:', formData); }; useEffect(() => { if (formData) { handleButtonClick(); } - }, [formData]); + }, [formData, createFacilitator]); const handleButtonClick = async () => { console.log('Form data:', formData); + setSubmittedButtonStatus(true); if (formData) { const schemaProperties = schema.properties; setEmail(formData?.email); @@ -262,60 +259,70 @@ const AddFacilitatorModal: React.FC = ({ } } else { if (formData?.assignCenters?.length > 0) { - const response = await createUser(apiBody); - console.log(response); - if (response) { - onFacilitatorAdded?.(); - onClose(); - showToastMessage( - t('COMMON.FACILITATOR_ADDED_SUCCESSFULLY'), - 'success' - ); - - const isQueue = false; - const context = 'USER'; - let createrName; - if (typeof window !== 'undefined' && window.localStorage) { - createrName = localStorage.getItem('userName'); - } - const key = 'onFacilitatorCreated'; - const replacements = [apiBody['name'], username, password]; + setOpenSendCredModal(true); + if (createFacilitator) { + try { + const response = await createUser(apiBody); - const sendTo = { - receipients: [formData?.email], - }; - if (replacements && sendTo) { - const response = await sendCredentialService({ - isQueue, - context, - key, - replacements, - email: sendTo, - }); - if (response.result[0].data[0].status === 'success') { + if (response) { + onFacilitatorAdded?.(); + onClose(); showToastMessage( - t('COMMON.USER_CREDENTIAL_SEND_SUCCESSFULLY'), + t('COMMON.FACILITATOR_ADDED_SUCCESSFULLY'), 'success' ); + + const isQueue = false; + const context = 'USER'; + const key = 'onFacilitatorCreated'; + const replacements = [apiBody['name'], username, password]; + const sendTo = { + receipients: [formData?.email], + }; + + let createrName; + if (typeof window !== 'undefined' && window.localStorage) { + createrName = localStorage.getItem('userName'); + } + + if (replacements && sendTo) { + const credentialResponse = await sendCredentialService({ + isQueue, + context, + key, + replacements, + email: sendTo, + }); + + if ( + credentialResponse?.result[0]?.data[0]?.status === + 'success' + ) { + showToastMessage( + t('COMMON.USER_CREDENTIAL_SEND_SUCCESSFULLY'), + 'success' + ); + } else { + showToastMessage( + t('COMMON.USER_CREDENTIALS_WILL_BE_SEND_SOON'), + 'success' + ); + } + } else { + showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); + } } else { - showToastMessage( - t('COMMON.USER_CREDENTIALS_WILL_BE_SEND_SOON'), - 'success' - ); + showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); } - } else { + } catch (error) { + console.error(error); showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); } - - setOpenModal(true); - } else { - showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); } } else { showToastMessage(t('COMMON.PLEASE_SELECT_THE_CENTER'), 'error'); } } - onClose(); } catch (error) { onClose(); showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); @@ -332,8 +339,16 @@ const AddFacilitatorModal: React.FC = ({ console.log('Form errors:', errors); }; - const onCloseModal = () => { - setOpenModal(false); + const handleBackAction = () => { + setCreateFacilitator(false); + setOpenSendCredModal(false); + }; + + const handleAction = () => { + setTimeout(() => { + setCreateFacilitator(true); + }); + setOpenSendCredModal(false); }; return ( @@ -381,6 +396,7 @@ const AddFacilitatorModal: React.FC = ({ widgets={{}} showErrorList={true} customFields={customFields} + formData={createFacilitator ? '' : formData} > = ({ )} - + + + + + + {t('COMMON.NEW', { role: 'Learner' })} + + + + + + {/* {isButtonAbsent ? ( */} + + + + {t('COMMON.CREDENTIALS_EMAILED')} + + + + + {email} + + + + + <> + + + + + + + + + + ); }; diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx index 4657576c..e5e4a908 100644 --- a/src/components/AddLeanerModal.tsx +++ b/src/components/AddLeanerModal.tsx @@ -8,7 +8,6 @@ import { createUser, getFormRead } from '@/services/CreateUserService'; import { generateUsernameAndPassword } from '@/utils/Helper'; import { FormData } from '@/utils/Interfaces'; import { FormContext, FormContextType, RoleId } from '@/utils/app.constant'; -import { Button, useTheme } from '@mui/material'; import { IChangeEvent } from '@rjsf/core'; import { RJSFSchema } from '@rjsf/utils'; import React, { useEffect } from 'react'; @@ -19,6 +18,7 @@ import { tenantId } from '../../app.config'; import SendCredentialModal from './SendCredentialModal'; import FormButtons from './FormButtons'; import { sendCredentialService } from '@/services/NotificationService'; +import useSubmittedButtonStore from '@/store/useSubmittedButtonStore'; interface AddLearnerModalProps { open: boolean; @@ -46,7 +46,9 @@ const AddLearnerModal: React.FC = ({ const [fullname, setFullname] = React.useState(); const { t } = useTranslation(); - const theme = useTheme(); + const setSubmittedButtonStatus = useSubmittedButtonStore( + (state: any) => state.setSubmittedButtonStatus + ); let userEmail: string = ''; if (typeof window !== 'undefined' && window.localStorage) { userEmail = localStorage.getItem('userEmail') || ''; @@ -108,6 +110,7 @@ const AddLearnerModal: React.FC = ({ const handleButtonClick = async () => { console.log('Form data:', formData); + setSubmittedButtonStatus(true); if (learnerFormData) { const schemaProperties = schema.properties; let cohortId, fieldData; diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx index 49ddf90b..b1d394d8 100644 --- a/src/components/DynamicForm.tsx +++ b/src/components/DynamicForm.tsx @@ -3,12 +3,12 @@ import { Theme as MaterialUITheme } from '@rjsf/mui'; import { RJSFSchema, RegistryFieldsType, WidgetProps } from '@rjsf/utils'; import validator from '@rjsf/validator-ajv8'; import { useTranslation } from 'next-i18next'; -import React, { Children, ReactNode } from 'react'; +import React, { Children, ReactNode, useEffect } from 'react'; import CustomRadioWidget from './CustomRadioWidget'; import MultiSelectCheckboxes from './MultiSelectCheckboxes'; import MultiSelectDropdown from './MultiSelectDropdown'; import { getCurrentYearPattern } from '@/utils/Helper'; -import FormButtons from './FormButtons'; +import useSubmittedButtonStore from '@/store/useSubmittedButtonStore'; const FormWithMaterialUI = withTheme(MaterialUITheme); @@ -43,7 +43,6 @@ const DynamicForm: React.FC = ({ customFields, children, }) => { - console.log(formData); const widgets = { MultiSelectCheckboxes: MultiSelectCheckboxes, CustomRadioWidget: CustomRadioWidget, @@ -51,6 +50,17 @@ const DynamicForm: React.FC = ({ }; const { t } = useTranslation(); + const submittedButtonStatus = useSubmittedButtonStore( + (state: any) => state.submittedButtonStatus + ); + const setSubmittedButtonStatus = useSubmittedButtonStore( + (state: any) => state.setSubmittedButtonStatus + ); + + useEffect(() => { + setSubmittedButtonStatus(false); + }, []); + const handleError = (errors: any) => { if (errors.length > 0) { const property = errors[0].property?.replace(/^root\./, ''); @@ -78,7 +88,9 @@ const DynamicForm: React.FC = ({ return errors.map((error: any) => { switch (error.name) { case 'required': { - error.message = t('FORM_ERROR_MESSAGES.THIS_IS_REQUIRED_FIELD'); + error.message = submittedButtonStatus + ? t('FORM_ERROR_MESSAGES.THIS_IS_REQUIRED_FIELD') + : ''; break; } case 'maximum': { @@ -146,10 +158,6 @@ const DynamicForm: React.FC = ({ error.message = t( 'FORM_ERROR_MESSAGES.ENTER_VALID_MOBILE_NUMBER' ); - } else if ( - schema.properties?.[property]?.validation?.includes(".age") - ) { - error.message = t("age must be valid"); } else { error.message = t( 'FORM_ERROR_MESSAGES.CHARACTERS_AND_SPECIAL_CHARACTERS_NOT_ALLOWED' diff --git a/src/components/FormButtons.tsx b/src/components/FormButtons.tsx index 20c09fed..db3b77b7 100644 --- a/src/components/FormButtons.tsx +++ b/src/components/FormButtons.tsx @@ -28,7 +28,7 @@ const FormButtons: React.FC = ({ : (isCreateCentered && !isCreatedFacilitator && !isCreatedLearner) || (isCreatedLearner && !isCreatedFacilitator && !isCreateCentered) ? t('COMMON.CREATE') - : t('COMMON.SUBMIT'); + : t('GUIDE_TOUR.NEXT'); console.log(isCreateCentered); diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx index effea065..fbd25298 100644 --- a/src/components/ManageUser.tsx +++ b/src/components/ManageUser.tsx @@ -7,7 +7,7 @@ import ManageCentersModal from '@/components/ManageCentersModal'; import ManageUsersModal from '@/components/ManageUsersModal'; import { showToastMessage } from '@/components/Toastify'; import { cohortList, getCohortList } from '@/services/CohortServices'; -import { Role } from '@/utils/app.constant'; +import { Role, Status } from '@/utils/app.constant'; import AddIcon from '@mui/icons-material/Add'; import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; @@ -138,25 +138,23 @@ const ManageUser: React.FC = ({ const limit = 0; const page = 0; const filters = { - states: 'MH', - districts: 'MUM', - blocks: 'BOR', - role: 'Teacher', - status: ['active'], + states: store.stateCode, + districts: store.districtCode, + blocks: store.blockCode, + role: Role.TEACHER, + status: [Status.ACTIVE], }; const fields = ['age']; const resp = await getMyUserList({ limit, page, filters, fields }); const facilitatorList = resp.result?.getUserDetails; - 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' }) @@ -177,7 +175,6 @@ const ManageUser: React.FC = ({ } }); - console.log('Cohort Details:', cohortDetails); const extractedData = facilitatorList?.map( (user: any, index: number) => { @@ -227,7 +224,6 @@ const ManageUser: React.FC = ({ }); const cohortResponses = await Promise.all(fetchCohortPromises); - console.log('cohortResponses', cohortResponses); const allCohortsData: CohortsData = cohortResponses?.reduce( (acc: CohortsData, curr) => { acc[curr.userId] = curr?.cohorts?.map((item: Cohort) => ({ diff --git a/src/components/center/CreateCenterModal.tsx b/src/components/center/CreateCenterModal.tsx index 5ed068fa..5e9d3c8c 100644 --- a/src/components/center/CreateCenterModal.tsx +++ b/src/components/center/CreateCenterModal.tsx @@ -18,6 +18,7 @@ import DynamicForm from '../DynamicForm'; import { GenerateSchemaAndUiSchema } from '../GeneratedSchemas'; import { showToastMessage } from '../Toastify'; import FormButtons from '../FormButtons'; +import useSubmittedButtonStore from '@/store/useSubmittedButtonStore'; interface CreateBlockModalProps { open: boolean; @@ -56,6 +57,9 @@ const CreateCenterModal: React.FC = ({ const [uiSchema, setUiSchema] = React.useState(); const [formData, setFormData] = useState(); + const setSubmittedButtonStatus = useSubmittedButtonStore( + (state: any) => state.setSubmittedButtonStatus + ); useEffect(() => { const getForm = async () => { try { @@ -89,6 +93,7 @@ const CreateCenterModal: React.FC = ({ const handleButtonClick = async () => { console.log('Form data:', formData); + setSubmittedButtonStatus(true); if (formData) { console.log('Form data submitted:', formData); @@ -99,29 +104,31 @@ const CreateCenterModal: React.FC = ({ parentId: parentId, customFields: [], }; - - Object.entries(formData).forEach(([fieldKey, fieldValue]) => { - const fieldSchema = schema.properties[fieldKey]; - const fieldId = fieldSchema?.fieldId; - if (fieldId !== null) { - cohortDetails.customFields.push({ - fieldId: fieldId, - value: formData.cohort_type, - }); - cohortDetails.customFields.push({ - fieldId: '6469c3ac-8c46-49d7-852a-00f9589737c5', - value: ['MH'], - }); - cohortDetails.customFields.push({ - fieldId: 'b61edfc6-3787-4079-86d3-37262bf23a9e', - value: ['MUM'], - }); - cohortDetails.customFields.push({ - fieldId: '4aab68ae-8382-43aa-a45a-e9b239319857', - value: ['BOR'], - }); - } - }); + if (typeof window !== 'undefined' && window.localStorage) { + const fieldData = JSON.parse(localStorage.getItem('fieldData') ?? ''); + Object.entries(formData).forEach(([fieldKey, fieldValue]) => { + const fieldSchema = schema.properties[fieldKey]; + const fieldId = fieldSchema?.fieldId; + if (fieldId !== null) { + cohortDetails.customFields.push({ + fieldId: fieldId, + value: formData.cohort_type, + }); + cohortDetails.customFields.push({ + fieldId: fieldData?.state?.stateId, + value: [fieldData?.state?.stateCode], + }); + cohortDetails.customFields.push({ + fieldId: fieldData?.state?.districtId, + value: [fieldData?.state?.districtCode], + }); + cohortDetails.customFields.push({ + fieldId: fieldData?.state?.blockId, + value: [fieldData?.state?.blockCode], + }); + } + }); + } const cohortData = await createCohort(cohortDetails); if (cohortData) { showToastMessage(t('CENTERS.CENTER_CREATED'), 'success'); diff --git a/src/store/useSubmittedButtonStore.ts b/src/store/useSubmittedButtonStore.ts new file mode 100644 index 00000000..cd4ff30c --- /dev/null +++ b/src/store/useSubmittedButtonStore.ts @@ -0,0 +1,9 @@ +import { create } from 'zustand'; + +const useSubmittedButtonStore = create((set) => ({ + submittedButtonStatus: false, + setSubmittedButtonStatus: (status: boolean) => + set({ submittedButtonStatus: status }), +})); + +export default useSubmittedButtonStore; diff --git a/src/styles/modalStyles.tsx b/src/styles/modalStyles.tsx index 6b1b1c5c..0e454fc5 100644 --- a/src/styles/modalStyles.tsx +++ b/src/styles/modalStyles.tsx @@ -1,5 +1,5 @@ -export const modalStyles = (theme: any) => ({ - width: '85%', +export const modalStyles = (theme: any, width?: string) => ({ + width: width ?? '85%', position: 'absolute', top: '50%', left: '50%',