From 1ff51d5241201944d8e86b9fb355318d8f14f05d Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Tue, 11 Feb 2025 12:33:04 +0530 Subject: [PATCH] Issue feat PS-3834: Integrate mentor form fields API --- public/locales/en/common.json | 4 +- src/components/CommonUserModal.tsx | 334 ++++++++++++++------ src/components/UserTable.tsx | 18 +- src/components/layouts/sidebar/MenuItems.js | 8 + src/pages/mentors.tsx | 81 +++++ src/utils/Helper.ts | 2 + src/utils/app.constant.ts | 7 +- 7 files changed, 350 insertions(+), 104 deletions(-) create mode 100644 src/pages/mentors.tsx diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 84ebbc9d..e18d749c 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -201,7 +201,9 @@ "CONTENT_CREATOR_REVIEWER": "Content Creator/Reviewer", "SCTA": "State Content Team Associate", - "WORKSPACE": "Workspace" + "WORKSPACE": "Workspace", + "MENTOR":"Mentor", + "MENTOR_LEADER":"Mentor Leader" }, "FACILITATORS": { "STATE": "State", diff --git a/src/components/CommonUserModal.tsx b/src/components/CommonUserModal.tsx index 7fbdeff9..fffc905a 100644 --- a/src/components/CommonUserModal.tsx +++ b/src/components/CommonUserModal.tsx @@ -49,6 +49,7 @@ import AreaSelection from "./AreaSelection"; import CustomModal from "./CustomModal"; import SendCredentialModal from "./SendCredentialModal"; import { showToastMessage } from "./Toastify"; +import { getStateBlockDistrictList } from "@/services/MasterDataService"; interface UserModalProps { open: boolean; @@ -76,15 +77,21 @@ const CommonUserModal: React.FC = ({ userNameFieldValue, }) => { const [schema, setSchema] = React.useState(); + const [uiSchema, setUiSchema] = React.useState(); + const [formState, setFormState] = React.useState(); + const [formDistrict, setFormDistrict] = React.useState(""); + const [formBlock, setFormBlock] = React.useState(); + const [formVillage, setFormVillage] = React.useState(); + const [openModal, setOpenModal] = React.useState(false); const [adminInfo, setAdminInfo] = React.useState(); const [createTLAlertModal, setcreateTLAlertModal] = useState(false); const [confirmButtonDisable, setConfirmButtonDisable] = useState(true); const [checkedConfirmation, setCheckedConfirmation] = useState(false); - const [originalSchema, setOriginalSchema] = React.useState(schema); - const messageKeyMap: Record = { + const [originalSchema, setOriginalSchema] = React.useState(schema); + const messageKeyMap: Record = { [FormContextType.STUDENT]: "LEARNERS.LEARNER_CREATED_SUCCESSFULLY", [FormContextType.TEACHER]: "FACILITATORS.FACILITATOR_CREATED_SUCCESSFULLY", [FormContextType.TEAM_LEADER]: @@ -127,15 +134,10 @@ const CommonUserModal: React.FC = ({ queryFn: () => getFormRead(FormContext.USERS, FormContextType.TEACHER), staleTime: apiCatchingDuration.GETREADFORM, }); - // const { - // data: mentorFormData, - // isLoading: mentorFormDataLoading, - // error: mentorFormDataErrror, - // } = useQuery({ - // queryKey: ["mentorFormData"], - // queryFn: () => getFormRead(FormContext.USERS, FormContextType.MENTOR), - // staleTime: apiCatchingDuration.GETREADFORM, - // }); + + + //const [mentorFormData, setMentorFormData] = React.useState(m); + const { data: studentFormData, isLoading: studentFormDataLoading, @@ -154,6 +156,15 @@ const CommonUserModal: React.FC = ({ queryFn: () => getFormRead(FormContext.USERS, FormContextType.TEAM_LEADER), staleTime: apiCatchingDuration.GETREADFORM, }); + const { + data: mentorFormData, + isLoading: mentorFormDataLoading, + error: mentorFormDataErrror, + } = useQuery({ + queryKey: ["mentorFormData"], + queryFn: () => getFormRead(FormContext.USERS, FormContextType.MENTOR), + staleTime: apiCatchingDuration.GETREADFORM, + }); const { i18n } = useTranslation(); const { @@ -220,18 +231,118 @@ const CommonUserModal: React.FC = ({ assignedTeamLeaderNames, selectedStateCohortId, } = useLocationState(open, onClose, roleType); - + + const [mentorData, setMentorData] = React.useState(mentorFormData); + const updateFieldOptions = (fieldName: string, options: any[]) => { + setMentorData((prevData: any) => { + const updatedFields = prevData.fields.map((field: any) => + field.name === fieldName ? { ...field, options } : field + ); + + if (JSON.stringify(updatedFields) === JSON.stringify(prevData.fields)) { + return prevData; + } + + return { + ...prevData, + fields: updatedFields, + }; + }); + }; useEffect(() => { - const getAddUserFormData = () => { + const getAddUserFormData = async () => { try { // const response: FormData = await getFormRead( // FormContext.USERS, // userType // ); - // const response2= await getFormRead( + // const mentorFormData= await getFormRead( // FormContext.USERS, - // userType - // ); + // FormContextType.MENTOR + // ); + + const admin = localStorage.getItem("adminInfo"); + if (admin) { + const stateField = JSON.parse(admin).customFields.find( + (field: any) => field.label === "STATE" + ); + console.log("stateField", stateField); + + const stateOptions = [ + { value: stateField?.code, label: stateField?.value }, + ]; + const districtObject = { + controllingfieldfk: stateField?.code, + fieldName: "district", + }; + + const districtResult = + await getStateBlockDistrictList(districtObject); + + // const districtResult = await formatedDistricts(); + console.log("districtResult", districtResult); + // Modify the original fields array + const districtField = mentorFormData.fields.find( + (field: any) => field.name === "district" + ); + const blockField = mentorFormData.fields.find( + (field: any) => field.name === "block" + ); + const villageField = mentorFormData.fields.find( + (field: any) => field.name === "villages" + ); + const StateField = mentorFormData.fields.find( + (field: any) => field.name === "state" + ); + if (StateField) { + StateField.options = stateOptions; + updateFieldOptions("state", stateOptions); + } + if (districtResult && districtField) { + const districtOptions = districtResult?.result?.values.map( + (item: any) => ({ + value: item.value.toString(), + label: item.label, + }) + ); + setFormDistrict(districtResult?.result?.values[0].value); + districtField.options = districtOptions; + updateFieldOptions("district", districtOptions); + } + if (blockField) { + const blockObject = { + controllingfieldfk: districtResult?.result?.values[0].value, + fieldName: "block", + }; + const blockResult = await getStateBlockDistrictList(blockObject); + const blockOptions = blockResult?.result?.values.map( + (item: any) => ({ + value: item.value.toString(), + label: item.label, + }) + ); + blockField.options = blockOptions; + updateFieldOptions("block", blockOptions); + + if (villageField) { + const villageObject = { + controllingfieldfk: blockResult?.result?.values[0].value, + fieldName: "village", + }; + const villageResult = + await getStateBlockDistrictList(villageObject); + const villageOptions = villageResult?.result?.values.map( + (item: any) => ({ + value: item.value.toString(), + label: item.label, + }) + ); + villageField.options = villageOptions; + updateFieldOptions("villages", villageOptions); + } + } + } + // console.log(fields); const response: FormData = userType === FormContextType.TEACHER ? teacherFormData @@ -239,7 +350,9 @@ const CommonUserModal: React.FC = ({ ? studentFormData : userType === FormContextType.CONTENT_CREATOR ? contentCreatorFormData - : teamLeaderFormData; + : userType === FormContextType.MENTOR + ? mentorData + : teamLeaderFormData; if (response) { if (userType === FormContextType.TEACHER) { @@ -280,6 +393,7 @@ const CommonUserModal: React.FC = ({ studentFormData, teamLeaderFormData, contentCreatorFormData, + mentorData, i18n.language, ]); const { getNotification } = useNotification(); @@ -308,8 +422,8 @@ const CommonUserModal: React.FC = ({ const apiBody: any = { username: userType === FormContextType.STUDENT ? username : formData.email, - password:userType === FormContextType.STUDENT ? username : password, - + password: userType === FormContextType.STUDENT ? username : password, + tenantCohortRoleMapping: [ { tenantId: TENANT_ID, @@ -377,7 +491,12 @@ const CommonUserModal: React.FC = ({ fieldId: stateFieldId, value: [selectedStateCode], }); - } else if (!isEditModal) { + } else if ( + !isEditModal && + selectedBlockCode && + selectedDistrictCode && + selectedStateCode + ) { apiBody.customFields.push({ fieldId: blockFieldId, value: [selectedBlockCode], @@ -535,19 +654,20 @@ const CommonUserModal: React.FC = ({ apiBody["firstName"] ), "{Password}": apiBody["username"], - "{appUrl}": process.env.NEXT_PUBLIC_TEACHER_APP_URL as string || '', - + "{appUrl}": + (process.env.NEXT_PUBLIC_TEACHER_APP_URL as string) || "", }; } else { replacements = { "{FirstName}": firstLetterInUpperCase(apiBody["firstName"]), "{UserName}": formData?.email, "{Password}": password, - "{appUrl}": process.env.NEXT_PUBLIC_TEACHER_APP_URL as string || '', + "{appUrl}": + (process.env.NEXT_PUBLIC_TEACHER_APP_URL as string) || "", }; } } - + const sendTo = { // receipients: [userEmail], receipients: @@ -615,85 +735,96 @@ const CommonUserModal: React.FC = ({ } }; - const handleChange = (event: IChangeEvent) => { + const handleChange = async (event: IChangeEvent) => { const { formData } = event; - if(userType === FormContextType.STUDENT) - { - let newFormData = { ...formData }; - - const dob = event.formData.dob; - const dependencyKeys = Object.keys(schema?.dependencies)[0]; - const dependentFields = schema?.dependencies?.dob?.properties; - // if (!isUsernameEdited) { - // if (event.formData.firstName && event.formData.lastName) { - // event.formData.username = - // event.formData.firstName + event.formData.lastName; - // } else { - // event.formData.username = null; - // } - // } - if (dob) { - const age = calculateAge(new Date(dob)); - if (age >= 18) { - const newSchema = { ...schema }; - const dependentFieldKeys = Object.keys(dependentFields); - newSchema.properties = Object.keys(newSchema.properties) - .filter((key) => !dependentFieldKeys.includes(key)) - .reduce((acc: any, key) => { - acc[key] = newSchema.properties[key]; - return acc; - }, {}); - // Remove dependent fields from the formData - const updatedFormData = { ...event.formData }; - dependentFieldKeys.forEach((key) => { - delete updatedFormData[key]; - }); - newSchema.dependencies = Object.keys(newSchema.dependencies) - .filter((key) => !dependentFieldKeys.includes(key)) - .reduce((acc: any, key) => { - // Remove dependentFieldKeys from properties within dependencies - const filteredProperties = Object.keys( - newSchema.dependencies[key].properties - ) - .filter((propKey) => !dependentFieldKeys.includes(propKey)) - .reduce((nestedAcc: any, propKey) => { - nestedAcc[propKey] = - newSchema.dependencies[key].properties[propKey]; - return nestedAcc; - }, {}); - // Add filtered dependencies back - acc[key] = { properties: filteredProperties }; - return acc; - }, {}); - setSchema(newSchema); - // setFormData(updatedFormData); - // setCustomFormData(updatedFormData); - newFormData = { ...updatedFormData }; - } else if (age < 18) { - const newSchema = { ...originalSchema }; - // Add dependent fields and reorder them in the schema - const reorderedFields: any[] = []; - const filteredFields = Object.keys(newSchema.properties).filter( - (key) => !Object.keys(dependentFields).includes(key) - ); - filteredFields.forEach((key) => { - reorderedFields.push(key); - if (key === dependencyKeys) { - reorderedFields.push(...Object.keys(dependentFields)); - } - }); - newSchema.properties = reorderedFields.reduce((acc: any, key: any) => { - acc[key] = dependentFields[key] || newSchema.properties[key]; - return acc; - }, {}); - setSchema(newSchema); - // setFormData({ ...event.formData }); - // setCustomFormData({ ...event.formData }); - newFormData = { ...event.formData }; + + + if (formDistrict !== event.formData.district && formDistrict !== "") { + + } + if (formBlock !== event.formData.block) { + } + if (formVillage !== event.formData.village) { + } + + if (userType === FormContextType.STUDENT) { + let newFormData = { ...formData }; + + const dob = event.formData.dob; + const dependencyKeys = Object.keys(schema?.dependencies)[0]; + const dependentFields = schema?.dependencies?.dob?.properties; + // if (!isUsernameEdited) { + // if (event.formData.firstName && event.formData.lastName) { + // event.formData.username = + // event.formData.firstName + event.formData.lastName; + // } else { + // event.formData.username = null; + // } + // } + if (dob) { + const age = calculateAge(new Date(dob)); + if (age >= 18) { + const newSchema = { ...schema }; + const dependentFieldKeys = Object.keys(dependentFields); + newSchema.properties = Object.keys(newSchema.properties) + .filter((key) => !dependentFieldKeys.includes(key)) + .reduce((acc: any, key) => { + acc[key] = newSchema.properties[key]; + return acc; + }, {}); + // Remove dependent fields from the formData + const updatedFormData = { ...event.formData }; + dependentFieldKeys.forEach((key) => { + delete updatedFormData[key]; + }); + newSchema.dependencies = Object.keys(newSchema.dependencies) + .filter((key) => !dependentFieldKeys.includes(key)) + .reduce((acc: any, key) => { + // Remove dependentFieldKeys from properties within dependencies + const filteredProperties = Object.keys( + newSchema.dependencies[key].properties + ) + .filter((propKey) => !dependentFieldKeys.includes(propKey)) + .reduce((nestedAcc: any, propKey) => { + nestedAcc[propKey] = + newSchema.dependencies[key].properties[propKey]; + return nestedAcc; + }, {}); + // Add filtered dependencies back + acc[key] = { properties: filteredProperties }; + return acc; + }, {}); + setSchema(newSchema); + // setFormData(updatedFormData); + // setCustomFormData(updatedFormData); + newFormData = { ...updatedFormData }; + } else if (age < 18) { + const newSchema = { ...originalSchema }; + // Add dependent fields and reorder them in the schema + const reorderedFields: any[] = []; + const filteredFields = Object.keys(newSchema.properties).filter( + (key) => !Object.keys(dependentFields).includes(key) + ); + filteredFields.forEach((key) => { + reorderedFields.push(key); + if (key === dependencyKeys) { + reorderedFields.push(...Object.keys(dependentFields)); + } + }); + newSchema.properties = reorderedFields.reduce( + (acc: any, key: any) => { + acc[key] = dependentFields[key] || newSchema.properties[key]; + return acc; + }, + {} + ); + setSchema(newSchema); + // setFormData({ ...event.formData }); + // setCustomFormData({ ...event.formData }); + newFormData = { ...event.formData }; + } } } - - } if (!isEditModal) { const { firstName, lastName, username } = formData; if (firstName && lastName) { @@ -746,6 +877,9 @@ const CommonUserModal: React.FC = ({ setFormValue({}); } }, [open]); + useEffect(() => { + setMentorData(mentorFormData); + }, [mentorFormData]); const handleChangeCheckBox = (event: React.ChangeEvent) => { setCheckedConfirmation(event.target.checked); }; diff --git a/src/components/UserTable.tsx b/src/components/UserTable.tsx index 831e589f..a96b1589 100644 --- a/src/components/UserTable.tsx +++ b/src/components/UserTable.tsx @@ -258,6 +258,16 @@ const UserTable: React.FC = ({ staleTime: apiCatchingDuration.GETREADFORM, enabled: false, }); + const { + data: mentorFormData, + isLoading: mentorFormDataLoading, + error: mentorFormDataErrror, + } = useQuery({ + queryKey: ["mentorFormData"], + queryFn: () => Promise.resolve([]), + staleTime: apiCatchingDuration.GETREADFORM, + enabled: false, + }); const handleOpenAddLearnerModal = () => { setOpenAddLearnerModal(true); }; @@ -775,6 +785,10 @@ const UserTable: React.FC = ({ formFields = await getFormRead("USERS", Role.CONTENT_CREATOR); setFormData(mapFields(contentCreatorFormData, response)); } + else if(Role.MENTOR === role){ + formFields = await getFormRead("USERS", Role.CONTENT_CREATOR); + setFormData(mapFields(mentorFormData, response)); + } handleOpenAddLearnerModal(); } catch (error) { @@ -1075,10 +1089,12 @@ const UserTable: React.FC = ({ console.log(error); } }; + if ( selectedBlockCode !== "" || (selectedDistrictCode !== "" && selectedBlockCode === "") || - (userType === Role.TEAM_LEADERS && selectedDistrictCode !== "") + (userType === Role.TEAM_LEADERS && selectedDistrictCode !== "") || + (userType===Role.MENTOR) ) { fetchUserList(); } diff --git a/src/components/layouts/sidebar/MenuItems.js b/src/components/layouts/sidebar/MenuItems.js index b823f6c3..ef696cde 100644 --- a/src/components/layouts/sidebar/MenuItems.js +++ b/src/components/layouts/sidebar/MenuItems.js @@ -37,6 +37,14 @@ const Menuitems = [ title: "SIDEBAR.LEARNERS", href: ["/learners"], }, + { + title: "SIDEBAR.MENTOR", + href: ["/mentors"], + }, + // { + // title: "SIDEBAR.MENTOR_LEADER", + // href: ["/mentor-leaders"], + // }, ], }, { diff --git a/src/pages/mentors.tsx b/src/pages/mentors.tsx new file mode 100644 index 00000000..80e5276f --- /dev/null +++ b/src/pages/mentors.tsx @@ -0,0 +1,81 @@ +import React from "react"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import UserTable from "@/components/UserTable"; +import { useTranslation } from "next-i18next"; +import { Role, FormContextType, TelemetryEventType } from "@/utils/app.constant"; +import CommonUserModal from "@/components/CommonUserModal"; +import useSubmittedButtonStore from "@/utils/useSharedState"; +import { telemetryFactory } from "@/utils/telemetry"; + +const Mentors: React.FC = () => { + const { t } = useTranslation(); + const [openAddMentorModal, setOpenAddMentorModal] = React.useState(false); + const [submitValue, setSubmitValue] = React.useState(false); + const setSubmittedButtonStatus = useSubmittedButtonStore((state:any) => state.setSubmittedButtonStatus); + + const handleOpenAddMentorModal = () => { + setOpenAddMentorModal(true); + }; + const handleModalSubmit = (value: boolean) => { + setSubmitValue(true); + }; + const handleCloseAddMentorModal = () => { + setSubmittedButtonStatus(false) + setOpenAddMentorModal(false); + }; + const handleAddMentorClick = () => { + const windowUrl = window.location.pathname; + const cleanedUrl = windowUrl.replace(/^\//, ''); + const env = cleanedUrl.split("/")[0]; + + + const telemetryInteract = { + context: { + env: env, + cdata: [], + }, + edata: { + id: 'click-on-add-new', + type: TelemetryEventType.CLICK, + subtype: '', + pageid: cleanedUrl, + }, + }; + telemetryFactory.interact(telemetryInteract); + + handleOpenAddMentorModal(); + }; + return ( + <> + + {/* */} + + + ); +}; + +export async function getStaticProps({ locale }: any) { + return { + props: { + ...(await serverSideTranslations(locale, ["common"])), + }, + }; +} + +export default Mentors; diff --git a/src/utils/Helper.ts b/src/utils/Helper.ts index fde5de39..5039ddce 100644 --- a/src/utils/Helper.ts +++ b/src/utils/Helper.ts @@ -105,6 +105,8 @@ export const generateUsernameAndPassword = ( [FormContextType.STUDENT]: "SC", [FormContextType.TEAM_LEADER]: "TLSC", [FormContextType.CONTENT_CREATOR]: "SCTA", //prefix is not fix till now assume this SCTA(State Content Team Associate) + [FormContextType.MENTOR]: "ME", //Add temporary prefix as mentor have no email field + }; if (!(role in rolePrefixes)) { diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts index 2283e112..fa2e16be 100644 --- a/src/utils/app.constant.ts +++ b/src/utils/app.constant.ts @@ -28,7 +28,8 @@ export enum Role { TEACHER = "Teacher", TEAM_LEADER = "Team Leader", TEAM_LEADERS = "Team Leaders", - + MENTOR="Mentor", + MENTOR_LEADER="Mentor Leader", ADMIN = "State Admin", CENTRAL_ADMIN = "Central Admin", LEARNERS = "Learners", @@ -79,7 +80,9 @@ export enum FormContextType { ADMIN = "ADMIN", ADMIN_CENTER = "ADMIN_CENTER", COHORT = "cohort", - CONTENT_CREATOR = "CONTENT CREATOR" + CONTENT_CREATOR = "CONTENT CREATOR", + MENTOR="MENTOR", + MENTOR_LEADER=" MENTOR LEADER" } export enum RoleId {