diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 9ae7566a9..57320bf7c 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -224,10 +224,10 @@ "FIELDS": { "DESIGNATION": "Designation", - "NO_OF_CLUSTERS": "Number of Clusters I Teach", + "NUMBER_OF_CLUSTERS_I_TEACH": "Number of Clusters I Teach", "YEAR_OF_JOINING_SCP": "Year of joining SCP", "MAIN_SUBJECT": "My Main Subjects", - "SUBJECT_TAUGHT": "Subjects I Teach", + "SUBJECTS_I_TEACH": "Subjects I Teach", "GENDER": "Gender", "UNIT_NAME": "Unit Name", "UNIT_CODE": "Unit Code", @@ -390,10 +390,10 @@ "REASON_FOR_DROP_OUT_FROM_SCHOOL": "Reason for drop out from School", "EMAIL": "Email", "DESIGNATION": "Designation", - "NO_OF_CLUSTERS": "Number of Clusters I Teach", + "NUMBER_OF_CLUSTERS_I_TEACH": "Number of Clusters I Teach", "YEAR_OF_JOINING_SCP": "Year of joining SCP", "MAIN_SUBJECT": "My Main Subjects", - "SUBJECT_TAUGHT": "Subjects I Teach", + "SUBJECTS_I_TEACH": "Subjects I Teach", "GENDER": "Gender", "UNIT_NAME": "Unit Name", "UNIT_CODE": "Unit Code", diff --git a/src/pages/learner/[userId].tsx b/src/pages/learner/[userId].tsx index 0ca959dea..39f670496 100644 --- a/src/pages/learner/[userId].tsx +++ b/src/pages/learner/[userId].tsx @@ -31,6 +31,7 @@ import { useMediaQuery, } from '@mui/material'; import { + CustomField, LearnerData, UserData, CohortAttendancePercentParam, @@ -44,7 +45,12 @@ import { getCohortAttendance, } from '@/services/AttendanceService'; import { editEditUser, getUserDetails } from '@/services/ProfileService'; -import { formatSelectedDate, getTodayDate, toPascalCase } from '@/utils/Helper'; +import { + formatSelectedDate, + getTodayDate, + mapFieldIdToValue, + toPascalCase, +} from '@/utils/Helper'; import CloseIcon from '@mui/icons-material/Close'; import CreateOutlinedIcon from '@mui/icons-material/CreateOutlined'; @@ -67,6 +73,8 @@ import { useRouter } from 'next/router'; import { useTranslation } from 'next-i18next'; import withAccessControl from '@/utils/hoc/withAccessControl'; import { accessControl } from '../../../app.config'; +import { getFormRead } from '@/services/CreateUserService'; +import { FormContext, FormContextType } from '@/utils/app.constant'; // import { UserData, UpdateCustomField } from '../utils/Interfaces'; @@ -258,24 +266,89 @@ const LearnerProfile: React.FC = () => { const response = await getUserDetails(user, true); if (response?.responseCode === 200) { - const data = response?.result; + const data = response; if (data) { - const userData = data?.userData; - - setUserData(userData); - - const customDataFields = userData?.customFields; - if (customDataFields?.length > 0) { - setCustomFieldsData(customDataFields); - const unitName = getFieldValue(customDataFields, 'Unit Name'); - setUnitName(unitName); - - const blockName = getFieldValue(customDataFields, 'Block Name'); - setBlockName(blockName); - - setUserName(userData?.name); - setContactNumber(userData?.mobile); - setLoading(false); + if (data) { + const coreFieldData = data?.result?.userData; + setUserName(coreFieldData?.name); + const fields: CustomField[] = + data?.result?.userData?.customFields; + const fieldIdToValueMap: { [key: string]: string } = + mapFieldIdToValue(fields); + console.log(`coreFieldData`, coreFieldData); + + const fetchFormData = async () => { + try { + const response: FormData = await getFormRead( + FormContext.USERS, + FormContextType.STUDENT + ); + console.log('response', response); + if (response) { + const mergeData = ( + fieldIdToValueMap: { [key: string]: string }, + response: any + ): any => { + response.fields.forEach( + (field: { + name: any; + fieldId: string | number; + value: string; + coreField: number; + }) => { + if ( + field.fieldId && + fieldIdToValueMap[field.fieldId] + ) { + // Update field value from fieldIdToValueMap if fieldId is available + field.value = + fieldIdToValueMap[field.fieldId] || '-'; + } else if (field.coreField === 1) { + // Set field value from fieldIdToValueMap if coreField is 1 and fieldId is not in the map + field.value = coreFieldData[field.name] || '-'; + } + } + ); + return response; + }; + + const mergedProfileData = mergeData( + fieldIdToValueMap, + response + ); + console.log(`mergedProfileData`, mergedProfileData); + if (mergedProfileData) { + setUserData(mergedProfileData?.fields); + const nameField = mergedProfileData.fields.find( + (field: { name: string }) => field.name === 'name' + ); + const customDataFields = mergedProfileData?.fields; + // setIsData(true); + + if (customDataFields?.length > 0) { + setCustomFieldsData(customDataFields); + + const unitName = getFieldValue( + customDataFields, + 'Unit Name' + ); + setUnitName(unitName); + const blockName = getFieldValue( + customDataFields, + 'Block Name' + ); + setBlockName(blockName); + } + } + } else { + // setIsData(false); + console.log('No data Found'); + } + } catch (error) { + console.error('Error fetching form data:', error); + } + }; + fetchFormData(); } } else { setLoading(false); @@ -305,22 +378,29 @@ const LearnerProfile: React.FC = () => { ?.sort((a, b) => a.order - b.order) ?.filter((field) => field.order <= 12) ?.map((field) => { + const getSelectedOption = (field: any) => { + return ( + field?.options?.find( + (option: any) => option?.value === field?.value?.[0] + ) || '-' + ); + }; + if ( field.type === 'drop_down' || field.type === 'radio' || field.type === 'dropdown' || (field.type === 'Radio' && field.options && field.value.length) ) { - const selectedOption = field?.options?.find( - (option: any) => option.value === field.value[0] - ); + const selectedOption = getSelectedOption(field); return { ...field, - displayValue: selectedOption - ? selectedOption.label - : field.value - ? toPascalCase(field.value) - : '-', + displayValue: + selectedOption !== '-' + ? selectedOption.label + : field.value + ? toPascalCase(field.value) + : '-', }; } return { @@ -791,7 +871,7 @@ const LearnerProfile: React.FC = () => { filteredSortedForEdit?.forEach((field) => { const value = formData?.customFields?.find((f) => f.fieldId === field.fieldId) - ?.value[0] || ''; + ?.value?.[0] || ''; if (field.type === 'text') { newErrors[field.fieldId] = !value.trim() || /^\s/.test(value); @@ -878,9 +958,9 @@ const LearnerProfile: React.FC = () => { lineHeight={'28px'} color={theme.palette.warning['A200']} > - {userData?.name?.length > 18 - ? `${userData?.name?.substring(0, 18)}...` - : userData?.name} + {userName?.length > 18 + ? `${userName?.substring(0, 18)}...` + : userName} { padding="15px" > - - {learnerDetailsByOrder && learnerDetailsByOrder.map((item: any, i: number) => ( @@ -1420,7 +1494,7 @@ const LearnerProfile: React.FC = () => { {filteredSortedForEdit?.map((field) => { const fieldValue = formData?.customFields?.find((f) => f.fieldId === field.fieldId) - ?.value[0] || ''; + ?.value?.[0] || ''; const isError: any = errors[field.fieldId]; return ( diff --git a/src/pages/login.tsx b/src/pages/login.tsx index c1f846832..37ff718d8 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -28,9 +28,13 @@ import appLogo from '../../public/images/appLogo.png'; import Loader from '../components/Loader'; import { login } from '../services/LoginService'; import { getUserId } from '../services/ProfileService'; +import manageUserStore from '@/store/manageUserStore'; const LoginPage = () => { const { t } = useTranslation(); + const store = useStore(); + const userStore = manageUserStore(); + const setUserId = manageUserStore((state) => state.setUserId); const setUserRole = useStore( (state: { setUserRole: any }) => state.setUserRole ); @@ -122,6 +126,7 @@ const LoginPage = () => { const userResponse = await getUserId(); localStorage.setItem('userId', userResponse?.userId); + setUserId(userResponse?.userId); localStorage.setItem('state', userResponse?.state); localStorage.setItem('district', userResponse?.district); localStorage.setItem('role', userResponse?.tenantData[0]?.roleName); diff --git a/src/pages/user-profile/[userId].tsx b/src/pages/user-profile/[userId].tsx index 2772d652b..cbf4acd43 100644 --- a/src/pages/user-profile/[userId].tsx +++ b/src/pages/user-profile/[userId].tsx @@ -18,7 +18,11 @@ import { Typography, useMediaQuery, } from '@mui/material'; -import { CustomField, UserDatas, UpdateCustomField } from '@/utils/Interfaces'; +import { + ArrowBack as ArrowBackIcon, + East as EastIcon, +} from '@mui/icons-material'; +import { CustomField, UserDatas } from '@/utils/Interfaces'; import React, { ChangeEvent, useEffect, useRef, useState } from 'react'; import { editEditUser, getUserDetails } from '@/services/ProfileService'; import { useTheme, withStyles } from '@mui/material/styles'; @@ -34,7 +38,11 @@ import Modal from '@mui/material/Modal'; import PlaceOutlinedIcon from '@mui/icons-material/PlaceOutlined'; import ReactGA from 'react-ga4'; import { accessControl } from '../../../app.config'; -import { getLabelForValue, toPascalCase } from '@/utils/Helper'; +import { + getLabelForValue, + toPascalCase, + mapFieldIdToValue, +} from '@/utils/Helper'; import { logEvent } from '@/utils/googleAnalytics'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { showToastMessage } from '@/components/Toastify'; @@ -44,6 +52,10 @@ import { useTranslation } from 'next-i18next'; import userPicture from '@/assets/images/imageOne.jpg'; import user_placeholder from '../../assets/images/user_placeholder.png'; import withAccessControl from '@/utils/hoc/withAccessControl'; +import { getFormRead } from '@/services/CreateUserService'; +import { FormContext, FormContextType, Role } from '@/utils/app.constant'; +import manageUserStore from '@/store/manageUserStore'; +import useStore from '@/store/store'; interface FieldOption { name: string; @@ -68,6 +80,10 @@ const TeacherProfile = () => { const { t } = useTranslation(); const router = useRouter(); const { userId }: any = router.query; + const store = useStore(); + const userRole = store.userRole; + const userStore = manageUserStore(); + const selfUserId = userStore.userId; const theme = useTheme(); const [open, setOpen] = React.useState(false); const handleOpen = () => { @@ -166,22 +182,72 @@ const TeacherProfile = () => { } if (data) { - const userData = data?.result?.userData; - setUserData(userData); - setUserName(userData?.name); - const customDataFields = userData?.customFields; - setIsData(true); - if (customDataFields?.length > 0) { - setCustomFieldsData(customDataFields); + const coreFieldData = data?.result?.userData; + setUserName(toPascalCase(coreFieldData?.name)); + const fields: CustomField[] = data?.result?.userData?.customFields; + const fieldIdToValueMap: { [key: string]: string } = + mapFieldIdToValue(fields); + console.log(`coreFieldData`, coreFieldData); - const unitName = getFieldValue(customDataFields, 'Unit Name'); - setUnitName(unitName); - const blockName = getFieldValue(customDataFields, 'Block Name'); - setBlockName(blockName); - } - } else { - setIsData(false); - console.log('No data Found'); + const fetchFormData = async () => { + try { + const response: FormData = await getFormRead( + FormContext.USERS, + FormContextType.TEACHER + ); + console.log('response', response); + if (response) { + const mergeData = ( + fieldIdToValueMap: { [key: string]: string }, + response: any + ): any => { + response.fields.forEach( + (field: { + name: any; + fieldId: string | number; + value: string; + coreField: number; + }) => { + if (field.fieldId && fieldIdToValueMap[field.fieldId]) { + // Update field value from fieldIdToValueMap if fieldId is available + field.value = fieldIdToValueMap[field.fieldId] || '-'; + } else if (field.coreField === 1) { + // Set field value from fieldIdToValueMap if coreField is 1 and fieldId is not in the map + field.value = coreFieldData[field.name] || '-'; + } + } + ); + return response; + }; + + const mergedProfileData = mergeData(fieldIdToValueMap, response); + console.log(`mergedProfileData`, mergedProfileData); + if (mergedProfileData) { + setUserData(mergedProfileData?.fields); + const nameField = mergedProfileData.fields.find( + (field: { name: string }) => field.name === 'name' + ); + const customDataFields = mergedProfileData?.fields; + setIsData(true); + + if (customDataFields?.length > 0) { + setCustomFieldsData(customDataFields); + + const unitName = getFieldValue(customDataFields, 'Unit Name'); + setUnitName(unitName); + const blockName = getFieldValue(customDataFields, 'Block Name'); + setBlockName(blockName); + } + } + } else { + setIsData(false); + console.log('No data Found'); + } + } catch (error) { + console.error('Error fetching form data:', error); + } + }; + fetchFormData(); } }, [data, error, isLoading]); @@ -207,10 +273,10 @@ const TeacherProfile = () => { ); const teachSubjects: string[] = teachSubjectsField - ? teachSubjectsField?.value.split(',') + ? teachSubjectsField?.value?.split(',') : []; const mainSubjects: string[] = mainSubjectsField - ? mainSubjectsField?.value.split(',') + ? mainSubjectsField?.value?.split(',') : []; // Find mutual and remaining subjects @@ -261,7 +327,7 @@ const TeacherProfile = () => { customFields: { fieldId: string; type: string; value: string[] | string }[]; }>({ userData: { - name: userName || '', + name: 'userName' || '', }, customFields: customFieldsData?.map((field) => ({ fieldId: field.fieldId, @@ -418,7 +484,6 @@ const TeacherProfile = () => { label: 'Teacher Profile Save Button Clicked', }); setLoading(true); - // const userId = localStorage.getItem('userId'); const data = { userData: formData?.userData, customFields: formData?.customFields?.map((field) => ({ @@ -443,11 +508,8 @@ const TeacherProfile = () => { 'An error occurred while updating the user.' ); } - handleClose(); - console.log(response.params.successmessage); - setIsError(false); setLoading(false); } @@ -480,28 +542,87 @@ const TeacherProfile = () => { justifyContent={'center'} alignItems={'center'} > - - - {t('PROFILE.MY_PROFILE')} - - + + {t('PROFILE.MY_PROFILE')} + + + ) : ( + + + { + window.history.back(); + // logEvent({ + // action: 'back-button-clicked-teacher-profile-page', + // category: 'Teacher Profile Page', + // label: 'Back Button Clicked', + // }); + }} + > + + + + + {userName?.length > 18 + ? `${userName?.substring(0, 18)}...` + : userName} + + + {address} + + + + + )} { className="text-dark-grey two-line-text" mr={'40px'} > - {toPascalCase(userData?.name)} + {toPascalCase( + userData?.find( + (field: { name: string }) => field.name === 'name' + )?.value + )} @@ -591,41 +716,42 @@ const TeacherProfile = () => { // }, }} > - - + + {t('PROFILE.EDIT_PROFILE')} + + + + + + ) : null} { color={theme.palette.warning.A200} sx={{ wordBreak: 'break-word' }} > - {item.value ? toPascalCase(item.value) : '-'} + {item.value ? toPascalCase(item?.value) : '-'} ); @@ -747,7 +873,9 @@ const TeacherProfile = () => { sx={{ wordBreak: 'break-word' }} > {item.value - ? toPascalCase(getLabelForValue(item, item.value)) + ? toPascalCase( + getLabelForValue(item, item?.value) + ) : '-'}{' '} {/* apply elipses/ truncating here */} diff --git a/src/store/manageUserStore.js b/src/store/manageUserStore.js index 87bc448f5..b7e68ab5f 100644 --- a/src/store/manageUserStore.js +++ b/src/store/manageUserStore.js @@ -4,6 +4,7 @@ import { persist } from 'zustand/middleware'; const manageUserStore = create( persist( (set) => ({ + userId: '', deleteId: '', learnerDeleteId: '', blockCode: '', @@ -12,6 +13,8 @@ const manageUserStore = create( blockId: 'a717bb68-5c8a-45cb-b6dd-376caa605736', districtId: 'aecb84c9-fe4c-4960-817f-3d228c0c7300', stateId: '61b5909a-0b45-4282-8721-e614fd36d7bd', + setUserId: (newUserId) => + set((state) => ({ userId: newUserId })), setCohortDeleteId: (newCohortDeleteId) => set((state) => ({ deleteId: newCohortDeleteId })), setCohortLearnerDeleteId: (newCohortLearnerDeleteId) => diff --git a/src/utils/Helper.ts b/src/utils/Helper.ts index db02ec6cf..ee51d50a2 100644 --- a/src/utils/Helper.ts +++ b/src/utils/Helper.ts @@ -1,6 +1,8 @@ import { Role, Status } from './app.constant'; import FingerprintJS from 'fingerprintjs2'; +import { i18n } from 'next-i18next'; +import { CustomField } from './Interfaces'; export const ATTENDANCE_ENUM = { PRESENT: 'present', @@ -118,7 +120,11 @@ export const debounce = any>( }; //Function to convert names in capitalize case -export const toPascalCase = (name: string) => { +export const toPascalCase = (name: string | any) => { + if (typeof name !== 'string') { + return name; + } + return name .toLowerCase() .split(' ') @@ -283,3 +289,11 @@ export const generateUsernameAndPassword = ( return { username, password }; }; + +export const mapFieldIdToValue = (fields: CustomField[]): { [key: string]: string } => { + return fields.reduce((acc: { [key: string]: string }, field: CustomField) => { + acc[field.fieldId] = field.value; + return acc; + }, {}); +}; +