diff --git a/public/locales/en/common.json b/public/locales/en/common.json index e78fb286..7489e316 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -114,7 +114,8 @@ "NEW_LEARNER": "New Learner", "NEW_FACILITATOR": "New Facilitator", "SUBMIT": "Submit", - "LEARNER_CREATED_SUCCESSFULLY": "Leaner has been Successfully Created!" + "LEARNER_CREATED_SUCCESSFULLY": "Leaner has been Successfully Created!", + "LEARNER_UPDATED_SUCCESSFULLY": "Learner has been Updated Created!" }, "LOGIN_PAGE": { "USERNAME": "Username", @@ -393,7 +394,7 @@ "DESIGNATION": "Designation", "NUMBER_OF_CLUSTERS_I_TEACH": "Number of Clusters I Teach", "YEAR_OF_JOINING_SCP": "Year of joining SCP", - "MAIN_SUBJECT": "My Main Subjects", + "MY_MAIN_SUBJECTS": "My Main Subjects", "SUBJECTS_I_TEACH": "Subjects I Teach", "GENDER": "Gender", "UNIT_NAME": "Unit Name", diff --git a/src/components/AddFacilitator.tsx b/src/components/AddFacilitator.tsx index 16e57a82..cc0f9e5e 100644 --- a/src/components/AddFacilitator.tsx +++ b/src/components/AddFacilitator.tsx @@ -14,14 +14,22 @@ import { Field, FormData } from '@/utils/Interfaces'; import { IChangeEvent } from '@rjsf/core'; import { RJSFSchema } from '@rjsf/utils'; import { useTranslation } from 'next-i18next'; +import { showToastMessage } from './Toastify'; +import { editEditUser } from '@/services/ProfileService'; interface AddFacilitatorModalprops { open: boolean; onClose: () => void; + formData?: object; + isEditModal?: boolean; + userId?: string; } const AddFacilitatorModal: React.FC = ({ open, onClose, + formData, + isEditModal = false, + userId, }) => { const [schema, setSchema] = React.useState(); const [openModal, setOpenModal] = React.useState(false); @@ -68,8 +76,10 @@ const AddFacilitatorModal: React.FC = ({ coreField: 0, maxSelections: null, }; - response?.fields.push(assignCentersField); - console.log(response); + if (!isEditModal){ + response?.fields.push(assignCentersField); + console.log(response); + } if (response) { const { schema, uiSchema } = GenerateSchemaAndUiSchema(response, t); @@ -134,19 +144,21 @@ const AddFacilitatorModal: React.FC = ({ if (typeof fieldValue !== 'object') { apiBody[fieldKey] = fieldValue; } - } else if ( - Object.hasOwn(fieldSchema, 'isDropdown') || - Object.hasOwn(fieldSchema, 'isCheckbox') - ) { - apiBody.customFields.push({ - fieldId: fieldId, - value: [String(fieldValue)], - }); } else { - apiBody.customFields.push({ - fieldId: fieldId, - value: String(fieldValue), - }); + if ( + fieldSchema?.hasOwnProperty('isDropdown') || + fieldSchema.hasOwnProperty('isCheckbox') + ) { + apiBody.customFields.push({ + fieldId: fieldId, + value: [String(fieldValue)], + }); + } else { + apiBody.customFields.push({ + fieldId: fieldId, + value: String(fieldValue), + }); + } } }); @@ -170,10 +182,32 @@ const AddFacilitatorModal: React.FC = ({ // }); console.log(apiBody); + try { + if (isEditModal && userId) { + const userData = { + name: apiBody.name, + mobile: apiBody.mobile, + father_name: apiBody.father_name, + }; + const customFields = apiBody.customFields; + console.log(customFields); + const object = { + userData: userData, + customFields: customFields, + }; + const response = await editEditUser(userId, object); + showToastMessage(t('COMMON.LEARNER_UPDATED_SUCCESSFULLY'), 'success'); + } else { const response = await createUser(apiBody); console.log(response); - }; - + showToastMessage(t('LEARNERS.LEARNER_CREATED_SUCCESSFULLY'), 'success'); + } + onClose(); + }catch (error) { + onClose(); + showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); + } +}; const handleChange = (event: IChangeEvent) => { console.log('Form data changed:', event.formData); }; @@ -195,18 +229,38 @@ const AddFacilitatorModal: React.FC = ({ showFooter={false} modalTitle={t('COMMON.NEW_FACILITATOR')} > - {schema && uiSchema && ( - - )} + {formData + ? schema && + uiSchema && ( + + {/* */} + + ) + : schema && + uiSchema && ( + + {/* */} + + )} diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx index 4c76e208..7f61930f 100644 --- a/src/components/AddLeanerModal.tsx +++ b/src/components/AddLeanerModal.tsx @@ -14,24 +14,34 @@ import { RJSFSchema } from '@rjsf/utils'; import React, { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { showToastMessage } from './Toastify'; +import { editEditUser } from '@/services/ProfileService'; interface AddLearnerModalProps { open: boolean; onClose: () => void; - onLearnerAdded: () => void; + onLearnerAdded?: () => void; + formData?: object; + isEditModal?: boolean; + userId?: string; + onReload?: (() => void)| undefined; } const AddLearnerModal: React.FC = ({ open, onClose, onLearnerAdded, + formData, + isEditModal = false, + userId, + onReload }) => { const [schema, setSchema] = React.useState(); const [uiSchema, setUiSchema] = React.useState(); + const [reloadProfile, setReloadProfile] = React.useState(false); const [credentials, setCredentials] = React.useState({ username: '', password: '', }); - // const [learnerFormData, setLearnerFormData] = React.useState(); + const { t } = useTranslation(); const theme = useTheme(); @@ -83,9 +93,8 @@ const AddLearnerModal: React.FC = ({ const schemaProperties = schema.properties; let cohortId, teacherData; if (typeof window !== 'undefined' && window.localStorage) { - teacherData = JSON.parse(localStorage.getItem('teacherApp') ?? ''); - cohortId = - localStorage.getItem('cohortId') ?? localStorage.getItem('classId'); + teacherData = JSON.parse(localStorage.getItem('teacherApp') || ''); + localStorage.getItem('cohortId') ?? localStorage.getItem('classId'); } const { username, password } = generateUsernameAndPassword( teacherData?.state?.stateCode, @@ -116,43 +125,70 @@ const AddLearnerModal: React.FC = ({ if (typeof fieldValue !== 'object') { apiBody[fieldKey] = fieldValue; } - } else if ( - Object.hasOwn(fieldSchema, 'isDropdown') || - Object.hasOwn(fieldSchema, 'isCheckbox') - ) { - apiBody.customFields.push({ - fieldId: fieldId, - value: [String(fieldValue)], - }); } else { - apiBody.customFields.push({ - fieldId: fieldId, - value: String(fieldValue), - }); + if ( + fieldSchema?.hasOwnProperty('isDropdown') || + fieldSchema.hasOwnProperty('isCheckbox') + ) { + apiBody.customFields.push({ + fieldId: fieldId, + value: [String(fieldValue)], + }); + } else { + apiBody.customFields.push({ + fieldId: fieldId, + value: String(fieldValue), + }); + } } }); - apiBody.customFields.push({ - fieldId: teacherData?.state?.blockId, - value: [teacherData?.state?.blockCode], - }); - apiBody.customFields.push({ - fieldId: teacherData?.state?.stateId, - value: [teacherData?.state?.stateCode], - }); - apiBody.customFields.push({ - fieldId: teacherData?.state?.districtId, - value: [teacherData?.state?.districtCode], - }); - console.log(apiBody); + if (!isEditModal) { + apiBody.customFields.push({ + fieldId: teacherData?.state?.blockId, + value: [teacherData?.state?.blockCode], + }); + apiBody.customFields.push({ + fieldId: teacherData?.state?.stateId, + value: [teacherData?.state?.stateCode], + }); + apiBody.customFields.push({ + fieldId: teacherData?.state?.districtId, + value: [teacherData?.state?.districtCode], + }); + console.log(apiBody); + } - const response = await createUser(apiBody); - if (response) { + try { + if (isEditModal && userId) { + console.log('apiBody', apiBody); + const userData = { + name: apiBody.name, + mobile: apiBody.mobile, + father_name: apiBody.father_name, + }; + const customFields = apiBody.customFields; + console.log(customFields); + const object = { + userData: userData, + customFields: customFields, + }; + const response = await editEditUser(userId, object); + if (response) { + showToastMessage(t('COMMON.LEARNER_UPDATED_SUCCESSFULLY'), 'success'); + setReloadProfile(true); + onReload?.(); + } + } else { + const response = await createUser(apiBody); + showToastMessage(t('LEARNERS.LEARNER_CREATED_SUCCESSFULLY'), 'success'); + } + onClose(); + // onLearnerAdded(); + } catch (error) { onClose(); - onLearnerAdded(); - showToastMessage(t('COMMON.LEARNER_CREATED_SUCCESSFULLY'), 'success'); - } else { - showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'success'); + showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); + setReloadProfile(true); } }; @@ -178,6 +214,7 @@ const AddLearnerModal: React.FC = ({ justifyContent: 'space-between', }} > + <> + ); @@ -232,27 +270,47 @@ const AddLearnerModal: React.FC = ({ }; return ( + <> - {schema && uiSchema && ( - - {/* */} - - )} + {formData + ? schema && + uiSchema && ( + + {/* */} + + ) + : schema && + uiSchema && ( + + {/* */} + + )} + ); }; diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx index 0850fe48..b14666fe 100644 --- a/src/components/DynamicForm.tsx +++ b/src/components/DynamicForm.tsx @@ -1,15 +1,14 @@ -import React, { ReactNode } from 'react'; -import { IChangeEvent } from '@rjsf/core'; -import validator from '@rjsf/validator-ajv8'; -import { Theme as MaterialUITheme } from '@rjsf/mui'; -import { withTheme } from '@rjsf/core'; -import MultiSelectCheckboxes from './MultiSelectCheckboxes'; -import CustomRadioWidget from './CustomRadioWidget'; -import MultiSelectDropdown from './MultiSelectDropdown'; -import { RJSFSchema, RegistryFieldsType, WidgetProps } from '@rjsf/utils'; -import { useTranslation } from 'next-i18next'; +import { IChangeEvent, withTheme } from "@rjsf/core"; +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, { ReactNode } from "react"; +import CustomRadioWidget from "./CustomRadioWidget"; +import MultiSelectCheckboxes from "./MultiSelectCheckboxes"; import { Button, Divider } from '@mui/material'; import { useTheme } from '@mui/material/styles'; +import MultiSelectDropdown from './MultiSelectDropdown'; const FormWithMaterialUI = withTheme(MaterialUITheme); @@ -24,6 +23,7 @@ interface DynamicFormProps { onChange: (event: IChangeEvent) => void; onError: (errors: any) => void; showErrorList: boolean; + widgets: { [key: string]: React.FC>; }; @@ -32,6 +32,7 @@ interface DynamicFormProps { }; children?: ReactNode; } + const DynamicForm: React.FC = ({ schema, uiSchema, @@ -42,6 +43,7 @@ const DynamicForm: React.FC = ({ customFields, children, }) => { + console.log(formData) const widgets = { MultiSelectCheckboxes: MultiSelectCheckboxes, CustomRadioWidget: CustomRadioWidget, @@ -49,12 +51,9 @@ const DynamicForm: React.FC = ({ }; const { t } = useTranslation(); - // console.log('CustomErrorList', CustomErrorList); - const handleError = (errors: any) => { if (errors.length > 0) { - // Adjust the selector based on the actual structure of the form element names - const property = errors[0].property?.replace(/^root\./, ''); + const property = errors[0].property?.replace(/^root\./, ""); const errorField = document.querySelector( `[name$="${property}"]` ) as HTMLElement; @@ -62,7 +61,6 @@ const DynamicForm: React.FC = ({ if (errorField) { errorField.focus(); } else { - // If the name-based selector fails, try to select by ID as a fallback const fallbackField = document.getElementById(property) as HTMLElement; if (fallbackField) { fallbackField.focus(); @@ -73,52 +71,73 @@ const DynamicForm: React.FC = ({ }; function transformErrors(errors: any) { - console.log('errors', errors); - console.log('schema', schema); + console.log("errors", errors); + console.log("schema", schema); return errors.map((error: any) => { switch (error.name) { - case 'required': { - // error.message = t('FORM_ERROR_MESSAGES.FIELD_REQUIRED', { - // field: t(`FORM.${schema.properties[error.property].title}`), - // }); - - error.message = t('FORM_ERROR_MESSAGES.THIS_IS_REQUIRED_FIELD'); + case "required": { + error.message = t("FORM_ERROR_MESSAGES.THIS_IS_REQUIRED_FIELD"); break; } - case 'pattern': { - const property = error.property.substring(1); - console.log('schema===>', schema); - if (schema.properties?.[property]?.validation?.includes('numeric')) { - error.message = t('FORM_ERROR_MESSAGES.ENTER_ONLY_DIGITS'); - } else if ( - schema.properties?.[property]?.validation?.includes( - 'characters-with-space' - ) - ) { - error.message = t( - 'FORM_ERROR_MESSAGES.NUMBER_AND_SPECIAL_CHARACTERS_NOT_ALLOWED' - ); + case "pattern": { + const pattern = error?.params?.pattern; + const property = error.property.substring(1); + + switch (pattern) { + case "^[a-z A-Z]+$": { + error.message = t( + "FORM_ERROR_MESSAGES.NUMBER_AND_SPECIAL_CHARACTERS_NOT_ALLOWED" + ); + break; + } + case "^[0-9]{10}$": { + if (schema.properties?.[property]?.validation?.includes("mobile")) { + error.message = t( + "FORM_ERROR_MESSAGES.ENTER_VALID_MOBILE_NUMBER" + ); + } else { + error.message = t( + "FORM_ERROR_MESSAGES.CHARACTERS_AND_SPECIAL_CHARACTERS_NOT_ALLOWED" + ); + } + break; + } + case "^\d{10}$": { + error.message = t( + "FORM_ERROR_MESSAGES.CHARACTERS_AND_SPECIAL_CHARACTERS_NOT_ALLOWED" + ); + break; + } + } break; } - case 'minLength': { + case "minLength": { const property = error.property.substring(1); - if (schema.properties?.[property]?.validation?.includes('numeric')) { - error.message = t('FORM_ERROR_MESSAGES.MIN_LENGTH_DIGITS_ERROR', { + if (schema.properties?.[property]?.validation?.includes("numeric")) { + error.message = t("FORM_ERROR_MESSAGES.MIN_LENGTH_DIGITS_ERROR", { minLength: schema.properties?.[property]?.minLength, }); } break; } - case 'maxLength': { + case "maxLength": { const property = error.property.substring(1); - if (schema.properties?.[property]?.validation?.includes('numeric')) { - error.message = t('FORM_ERROR_MESSAGES.MAX_LENGTH_DIGITS_ERROR', { + if (schema.properties?.[property]?.validation?.includes("numeric")) { + error.message = t("FORM_ERROR_MESSAGES.MAX_LENGTH_DIGITS_ERROR", { maxLength: schema.properties?.[property]?.maxLength, }); } break; } + case "format": { + const format = error?.params?.format; + switch (format) { + case "email": { + error.message = t("FORM_ERROR_MESSAGES.ENTER_VALID_EMAIL"); + } + } + } } return error; @@ -126,7 +145,7 @@ const DynamicForm: React.FC = ({ } function handleChange(event: any) { - console.log('Form data event:', event); + console.log("Form data changed:", event.formData); onChange(event); } @@ -153,4 +172,4 @@ const DynamicForm: React.FC = ({ ); }; -export default DynamicForm; +export default DynamicForm; \ No newline at end of file diff --git a/src/components/GeneratedSchemas.ts b/src/components/GeneratedSchemas.ts index 1435e3e7..6c0de28e 100644 --- a/src/components/GeneratedSchemas.ts +++ b/src/components/GeneratedSchemas.ts @@ -1,7 +1,7 @@ -import { Field, FieldOption, FormData } from '@/utils/Interfaces'; import { UiSchema } from '@rjsf/utils'; import { JSONSchema7 } from 'json-schema'; import NumberInputField from './form/NumberInputField'; +import { FormData, Field, FieldOption } from '@/utils/Interfaces'; export const customFields = { NumberInputField: NumberInputField, @@ -22,6 +22,7 @@ export const GenerateSchemaAndUiSchema = ( }; const uiSchema: UiSchema = {}; //form ui schema + let formValues: any = {}; // console.log('FormData', formData) formData?.fields?.forEach((field: Field) => { @@ -49,10 +50,14 @@ export const GenerateSchemaAndUiSchema = ( switch (type) { case 'text': fieldSchema.type = 'string'; - fieldUiSchema['ui:help'] = field?.hint ? t(`FORM.${field?.hint}`) : ''; + if (field?.hint){ + fieldUiSchema['ui:help'] = t(`FORM.${field?.hint}`); + } + break; case 'email': fieldSchema.type = 'string'; + fieldSchema.format = 'email'; break; case 'numeric': fieldSchema.type = 'number'; @@ -228,5 +233,5 @@ export const GenerateSchemaAndUiSchema = ( } }); - return { schema, uiSchema, customFields }; -}; + return { schema, uiSchema, customFields, formValues }; +}; \ No newline at end of file diff --git a/src/components/LearnersListItem.tsx b/src/components/LearnersListItem.tsx index df6607d3..e9c4156f 100644 --- a/src/components/LearnersListItem.tsx +++ b/src/components/LearnersListItem.tsx @@ -431,7 +431,7 @@ const LearnersListItem: React.FC = ({ {learnerName} ) : ( - + e.preventDefault()}> { showMiniProfile diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx index d9a02000..8a3d01fa 100644 --- a/src/components/ManageUser.tsx +++ b/src/components/ManageUser.tsx @@ -604,7 +604,7 @@ const manageUsers: React.FC = ({ img - + e.preventDefault()}> { handleTeacherFullProfile(user.userId!); diff --git a/src/pages/learner/[userId].tsx b/src/pages/learner/[userId].tsx index 39f67049..d9960945 100644 --- a/src/pages/learner/[userId].tsx +++ b/src/pages/learner/[userId].tsx @@ -11,28 +11,17 @@ import { Button, Card, CardContent, - Checkbox, Divider, FormControl, - FormControlLabel, - FormGroup, - FormHelperText, Grid, - IconButton, InputLabel, MenuItem, - Modal, - Radio, - RadioGroup, Select, SelectChangeEvent, - TextField, Typography, - useMediaQuery, } from '@mui/material'; import { CustomField, - LearnerData, UserData, CohortAttendancePercentParam, UpdateCustomField, @@ -52,19 +41,14 @@ import { toPascalCase, } from '@/utils/Helper'; -import CloseIcon from '@mui/icons-material/Close'; import CreateOutlinedIcon from '@mui/icons-material/CreateOutlined'; import DateRangePopup from '@/components/DateRangePopup'; import { GetStaticPaths } from 'next'; import Header from '@/components/Header'; import Loader from '@/components/Loader'; import MarksObtainedCard from '@/components/MarksObtainedCard'; -import MoreVertIcon from '@mui/icons-material/MoreVert'; import ReactGA from 'react-ga4'; -// import Header from '../components/Header'; -// import { formatDate, getTodayDate } from '../utils/Helper'; import StudentStatsCard from '@/components/StudentStatsCard'; -import ToastMessage from '@/components/ToastMessage'; import { format } from 'date-fns'; import { logEvent } from '@/utils/googleAnalytics'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; @@ -75,20 +59,15 @@ import withAccessControl from '@/utils/hoc/withAccessControl'; import { accessControl } from '../../../app.config'; import { getFormRead } from '@/services/CreateUserService'; import { FormContext, FormContextType } from '@/utils/app.constant'; +import AddLearnerModal from '@/components/AddLeanerModal'; -// import { UserData, UpdateCustomField } from '../utils/Interfaces'; - -interface QuestionValue { - question: string; - mark_obtained: number; - totalMarks: number; -} -interface QuestionValues { - totalMaxScore: number; - totalScore: number; - length: number; - questions: QuestionValue[]; +interface OverallAttendance { + absent?: any; + present?: any; + absent_percentage: any; + present_percentage: any; } + const LearnerProfile: React.FC = () => { const { t } = useTranslation(); const theme = useTheme(); @@ -101,30 +80,14 @@ const LearnerProfile: React.FC = () => { } const [userData, setUserData] = useState(null); - // const [attendanceReport, setAttendanceReport] = useState(null); - const [limit, setLimit] = useState(10); - const [page, setPage] = useState(1); - const [filter, setFilter] = useState({}); - const [maritalStatus, setMaritalStatus] = useState(''); - const [currentDate, setCurrentDate] = React.useState(getTodayDate); - const [selectedIndex, setSelectedIndex] = useState(null); - // const [selectedValue, setSelectedValue] = useState(''); const [assesmentData, setAssesmentData] = useState(null); - const [questionData, setQuestionData] = useState([]); - const [age, setAge] = React.useState(''); const [test, setTest] = React.useState('Pre Test'); const [subject, setSubject] = React.useState('English'); - const [anchorEl, setAnchorEl] = React.useState(null); const [customFieldsData, setCustomFieldsData] = useState( [] ); - interface OverallAttendance { - absent?: any; // Adjust the type according to your actual data - present?: any; - absent_percentage: any; - present_percentage: any; - // Add other properties as needed - } + const [loading, setLoading] = useState(false); + const [userName, setUserName] = useState(null); const [isFromDate, setIsFromDate] = useState( formatSelectedDate(new Date(today.getTime() - 6 * 24 * 60 * 60 * 1000)) ); @@ -138,14 +101,8 @@ const LearnerProfile: React.FC = () => { useState(0); const [dateRange, setDateRange] = React.useState(''); const [classId, setClassId] = React.useState(''); - const open = Boolean(anchorEl); const [totalMaxScore, setTotalMaxScore] = useState(''); const [totalScore, setTotalScore] = useState(''); - const [errors, setErrors] = useState<{ [key: string]: boolean }>({}); - const [hasErrors, setHasErrors] = useState(false); - const [hasInputChanged, setHasInputChanged] = React.useState(false); - const [isValidationTriggered, setIsValidationTriggered] = - React.useState(false); const [unitName, setUnitName] = useState(''); const [blockName, setBlockName] = useState(''); const [uniqueDoId, setUniqueDoId] = useState(''); @@ -153,6 +110,13 @@ const LearnerProfile: React.FC = () => { React.useState(null); const openOption = Boolean(anchorElOption); const [isError, setIsError] = React.useState(false); + const [formData, setFormData] = useState<{ [key: string]: any }>({}); + const [openAddLearnerModal, setOpenAddLearnerModal] = React.useState(false); + const [reload, setReload] = React.useState(false); + + const handleReload = () => { + setReload(prev => !prev); + }; const StyledMenu = styled((props: MenuProps) => ( { }, })); - const handleClickOption = (event: React.MouseEvent) => { - setAnchorElOption(event.currentTarget); - }; - const handleCloseOption = () => { setAnchorElOption(null); // Set anchorElOption to null to close the menu }; @@ -209,7 +169,6 @@ const LearnerProfile: React.FC = () => { setIsFromDate(fromDate); setIsToDate(toDate); getAttendanceData(fromDate, toDate); - // Handle the date range values as needed }; const menuItems = [ t('DASHBOARD.LAST_SEVEN_DAYS_RANGE', { @@ -227,15 +186,86 @@ const LearnerProfile: React.FC = () => { setSelectedValue(currentDayMonth); }, []); + const handleOpenAddLearnerModal = () => { + setOpenAddLearnerModal(true); + }; + + const handleCloseAddLearnerModal = () => { + setOpenAddLearnerModal(false); + }; + + const mapFields = (formFields: any, response: any) => { + let initialFormData: any = {}; + formFields.fields.forEach((item: any) => { + const userData = response?.userData; + const customField = userData?.customFields?.find( + (field: any) => field.fieldId === item.fieldId + ); + const getValue = (data: any, field: any) => { + if (item?.isMultiSelect) { + if (data[item.name] && item?.maxSelections > 1) { + return [field.value]; + } else if (item?.type === 'checkbox') { + return String(field.value).split(','); + } else { + return field.value; + } + } else { + if (item?.type === 'numeric') { + return Number(field.value); + } else if (item?.type === 'text') { + return String(field.value); + } else { + return field.value; + } + } + }; + if (item.coreField) { + if (item?.isMultiSelect) { + if (userData[item.name] && item?.maxSelections > 1) { + initialFormData[item.name] = [userData[item.name]]; + } else { + initialFormData[item.name] = userData[item.name] || ''; + } + } else if (item?.type === 'numeric') { + initialFormData[item.name] = Number(userData[item.name]); + } else if (item?.type === 'text') { + initialFormData[item.name] = String(userData[item.name]); + } else { + initialFormData[item.name] = userData[item.name]; + } + } else { + initialFormData[item.name] = getValue(userData, customField); + } + }); + console.log('initialFormData', initialFormData); + return initialFormData; + }; + + const fetchDataAndInitializeForm = async () => { + try { + let formFields; + const response = await getUserDetails(userId, true); + formFields = await getFormRead('USERS', 'STUDENT'); + console.log('response', response); + console.log('formFields', formFields); + setFormData(mapFields(formFields, response?.result)); + } catch (error) { + console.error('Error fetching data or initializing form:', error); + } + }; + + useEffect(() => { + fetchDataAndInitializeForm(); + }, [userId, reload]); + const getAttendanceData = async (fromDates: any, toDates: any) => { const fromDate = fromDates; const toDate = toDates; const filters = { - // contextId: classId, fromDate, toDate, userId: userId, - // scope: 'student', }; const response = await classesMissedAttendancePercentList({ filters, @@ -244,8 +274,6 @@ const LearnerProfile: React.FC = () => { if (response?.statusCode === 200) { const userData = response?.data.result.userId[userId]; setOverallAttendance(userData); - - // if (setOverallAttendance) } }; @@ -324,7 +352,6 @@ const LearnerProfile: React.FC = () => { ); const customDataFields = mergedProfileData?.fields; // setIsData(true); - if (customDataFields?.length > 0) { setCustomFieldsData(customDataFields); @@ -433,16 +460,16 @@ const LearnerProfile: React.FC = () => { }; const getDoIdForAssesmentReport = async (tests: string, subjects: string) => { - const steteName = localStorage.getItem('stateName'); + const stateName = localStorage.getItem('stateName'); const filters = { program: ['Second chance'], - se_boards: [steteName ? steteName : ''], + se_boards: [stateName ? stateName : ''], subject: [subjects ? subjects : subject], assessment1: tests ? tests : test, }; try { - if (steteName) { + if (stateName) { if (filters) { setLoading(true); const searchResults = await getDoIdForAssesmentDetails({ filters }); @@ -579,232 +606,7 @@ const LearnerProfile: React.FC = () => { router.push('/learner-attendance-history'); }; - //-------Edit Learner Profile------------------ - - //fields for edit popup by order - - const filteredSortedForEdit = [...customFieldsData] - ?.filter((field) => field.isEditable) - ?.sort((a, b) => a.order - b.order); - - const isDesktop = useMediaQuery(theme.breakpoints.up('md')); - const [userName, setUserName] = useState(null); - const [contactNumber, setContactNumber] = useState(null); - const [openEdit, setOpenEdit] = React.useState(false); - const [loading, setLoading] = useState(false); - const handleOpen = () => { - setOpenEdit(true); - logEvent({ - action: 'edit-learner-profile-modal-open', - category: 'Learner Detail Page', - label: 'Edit Learner Profile Modal Open', - }); - }; - const handleClose = () => { - logEvent({ - action: 'edit-learner-profile-modal-close', - category: 'Learner Detail Page', - label: 'Edit Learner Profile Modal Close', - }); - setOpenEdit(false); - initialFormData(); - setHasInputChanged(false); - setHasErrors(false); - setErrors({}); - }; - const style = { - position: 'absolute', - top: '50%', - '@media (min-width: 600px)': { - width: '450px', - }, - left: '50%', - width: '85%', - transform: 'translate(-50%, -50%)', - bgcolor: theme.palette.warning.A400, - height: '526px', - textAlign: 'center', - }; - - const [formData, setFormData] = useState<{ - userData: LearnerData; - customFields: { fieldId: string; type: string; value: string[] | string }[]; - }>({ - userData: { - name: userName || '', - }, - customFields: customFieldsData?.map((field) => ({ - fieldId: field.fieldId, - type: field.type, - value: field.value, - })), - }); - - const initialFormData = () => { - setFormData({ - userData: { - name: userName || '', - }, - customFields: customFieldsData?.map((field) => ({ - fieldId: field.fieldId, - type: field.type, - value: field.value, - })), - }); - }; - - useEffect(() => { - initialFormData(); - }, [userData, customFieldsData]); - - const handleFieldChange = (fieldId: string, value: string) => { - const sanitizedValue = value.replace(/^\s+/, '').replace(/\s+/g, ' '); - - setFormData((prevState) => ({ - ...prevState, - customFields: prevState.customFields.map((field) => - field.fieldId === fieldId - ? { ...field, value: [sanitizedValue] } - : field - ), - })); - setHasInputChanged(true); - setIsValidationTriggered(true); - validateFields(); - }; - - const handleCheckboxChange = ( - fieldId: string, - optionName: string, - isChecked: boolean - ) => { - setFormData((prevState) => ({ - ...prevState, - customFields: prevState.customFields.map((field) => - field.fieldId === fieldId - ? { - ...field, - value: isChecked - ? [...(field.value as string[]), optionName] - : (field.value as string[]).filter( - (item) => item !== optionName - ), - } - : field - ), - })); - setHasInputChanged(true); - setIsValidationTriggered(true); - validateFields(); - }; - - const handleDropdownChange = (fieldId: string, value: string) => { - setFormData((prevState) => ({ - ...prevState, - customFields: prevState.customFields.map((field) => - field.fieldId === fieldId ? { ...field, value: [value] } : field - ), - })); - setHasInputChanged(true); - setIsValidationTriggered(true); - validateFields(); - }; - - const handleRadioChange = (fieldId: string, value: string) => { - setFormData((prevState) => ({ - ...prevState, - customFields: prevState.customFields.map((field) => - field.fieldId === fieldId ? { ...field, value: [value] } : field - ), - })); - setHasInputChanged(true); - setIsValidationTriggered(true); - validateFields(); - }; - - const handleSubmit = async ( - e: React.MouseEvent - ) => { - e.preventDefault(); - logEvent({ - action: 'save-button-clicked-edit-learner-profile', - category: 'Learner Detail Page', - label: 'Learner Profile Save Button Clicked', - }); - setLoading(true); - const user_id = userId; - const data = { - userData: formData?.userData, - customFields: formData?.customFields?.map((field) => ({ - fieldId: field.fieldId, - // type: field.type, - value: Array.isArray(field?.value) - ? field?.value?.length > 0 - ? field?.value - : '' - : field?.value, - })), - }; - const userDetails = data; - try { - if (userId) { - console.log('HELLO'); - - const response = await editEditUser(user_id, userDetails); - ReactGA.event('edit-learner-profile-successful', { userId: userId }); - - if (response.responseCode !== 200 || response.params.err) { - ReactGA.event('edit-learner-profile-failed', { userId: userId }); - throw new Error( - response.params.errmsg || - 'An error occurred while updating the user.' - ); - } - - handleClose(); - - console.log(response.params.successmessage); - fetchUserDetails(); - setIsError(false); - setLoading(false); - } - } catch (error) { - setIsError(true); - showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); - console.error('Error:', error); - } - }; - - const FieldComponent = ({ - data, - label, - size, - }: { - data: any; - label: string; - size: number; - }) => ( - - {/* question */} - - {label} - - - {/* value */} - - {data} - - - ); + // //-------Edit Learner Profile------------------ //----- code for Attendance Marked out of 7 days ------------ useEffect(() => { @@ -861,62 +663,6 @@ const LearnerProfile: React.FC = () => { date_range: dateRange, }), ]); - - //-------------validation for edit fields --------------------------- - - const validateFields = () => { - const newErrors: { [key: string]: boolean } = {}; - - const fieldsToValidate = [...customFieldsData]; - filteredSortedForEdit?.forEach((field) => { - const value = - formData?.customFields?.find((f) => f.fieldId === field.fieldId) - ?.value?.[0] || ''; - - if (field.type === 'text') { - newErrors[field.fieldId] = !value.trim() || /^\s/.test(value); - } else if (field.type === 'numeric') { - newErrors[field.fieldId] = !/^\d{1,4}$/.test(value); - } else if (field.type === 'drop_down') { - newErrors[field.fieldId] = !value.trim() || value === ''; - } - }); - - // Validate name field - newErrors['name'] = !formData.userData.name.trim(); - - setErrors(newErrors); - setHasErrors(Object.values(newErrors).some((error) => error)); - }; - const handleInputChange = (e: React.ChangeEvent) => { - const { value } = e.target; - const sanitizedValue = value - .replace(/[^a-zA-Z_ ]/g, '') - .replace(/^\s+/, '') - .replace(/\s+/g, ' '); - - setFormData((prevData) => ({ - ...prevData, - userData: { - ...prevData.userData, - name: sanitizedValue, - }, - })); - - // setHasErrors(!sanitizedValue.trim()); - setHasInputChanged(true); - setIsValidationTriggered(true); - validateFields(); - }; - - useEffect(() => { - if (hasInputChanged) { - validateFields(); - } - }, [formData, customFieldsData]); - - // flag for contactNumberAdded in dynamic list fo fields in lerner basic details - let contactNumberAdded = false; return ( <>
@@ -981,25 +727,7 @@ const LearnerProfile: React.FC = () => { aria-expanded={openOption ? 'true' : undefined} aria-haspopup="true" > - {/* ---- comment for temp------------ - - - */} - - {/* */} - { }} > - {/* - Attendance Marked : 3 out of last 7 days - */} {selectedValue === t('DASHBOARD.LAST_SEVEN_DAYS_RANGE', { date_range: dateRange, @@ -1178,7 +896,7 @@ const LearnerProfile: React.FC = () => { color: theme.palette.warning.A200, border: `1px solid #4D4639`, }} - onClick={handleOpen} + onClick={handleOpenAddLearnerModal} > { + + {openAddLearnerModal && ( +
+ +
+ )} + { {item?.displayValue} - + {/* {item?.order === 3 && !contactNumberAdded && ( { /> {(contactNumberAdded = true)} - )} + )} */} ))} - { - - - - {loading && ( - - )} - - - {t('PROFILE.EDIT_PROFILE')} - - - - - - - - {/* - user - - - - - - */} - - {filteredSortedForEdit?.map((field) => { - const fieldValue = - formData?.customFields?.find((f) => f.fieldId === field.fieldId) - ?.value?.[0] || ''; - const isError: any = errors[field.fieldId]; - - return ( - - {field.type === 'text' ? ( - { - handleFieldChange(field.fieldId, e.target.value); - validateFields(); - }} - error={isError} - helperText={isError && t('PROFILE.ENTER_CHARACTER')} - /> - ) : field.type === 'numeric' ? ( - { - // Allow only numeric keys, Backspace, and Delete - if ( - !( - ( - /[0-9]/.test(e.key) || - e.key === 'Backspace' || - e.key === 'Delete' - ) // Allow decimal point if needed - ) - ) { - e.preventDefault(); - } - }} - onChange={(e) => { - const inputValue = e.target.value; - if (/^\d{0,4}$/.test(inputValue)) { - handleFieldChange(field.fieldId, inputValue); - validateFields(); - } - }} - error={isError} - helperText={isError && t('PROFILE.ENTER_NUMBER')} - /> - ) : field.type === 'checkbox' ? ( - - - {field?.label && - t(`FORM.${field.label.toUpperCase()}`, field.label)} - - {field.options?.map((option: any) => ( - - f.fieldId === field.fieldId - )?.value || [] - )?.includes(option.value)} - onChange={(e) => - handleCheckboxChange( - field.fieldId, - option.value, - e.target.checked - ) - } - /> - } - label={option.label} - /> - - ))} - - ) : field.type === 'drop_down' || - field.type === 'dropdown' ? ( - - - - {field?.label && - t(`FORM.${field.label.toUpperCase()}`, field.label)} - - - {isError && ( - - {t('PROFILE.SELECT_OPTION')} - - )} - - - ) : field.type === 'radio' || field.type === 'Radio' ? ( - - - {field?.label && - t(`FORM.${field.label.toUpperCase()}`, field.label)} - - - handleRadioChange(field.fieldId, e.target.value) - } - > - - {field?.options?.map((option: any) => ( - } - label={option.label} - /> - ))} - - - - ) : null} - - ); - })} - - - - - - - - ); }; diff --git a/src/pages/user-profile/[userId].tsx b/src/pages/user-profile/[userId].tsx index edcd043a..59bd93f6 100644 --- a/src/pages/user-profile/[userId].tsx +++ b/src/pages/user-profile/[userId].tsx @@ -1,79 +1,40 @@ -import { - Box, - Checkbox, - Divider, - FormControl, - FormControlLabel, - FormGroup, - FormHelperText, - Grid, - IconButton, - InputLabel, - MenuItem, - Radio, - RadioGroup, - Select, - SelectChangeEvent, - TextField, - Typography, - useMediaQuery, -} from '@mui/material'; +import { Box, Grid, Typography, useMediaQuery } from '@mui/material'; import { ArrowBack as ArrowBackIcon, East as EastIcon, } from '@mui/icons-material'; -import { CustomField, IUserData } from '@/utils/Interfaces'; -import React, { ChangeEvent, useEffect, useRef, useState } from 'react'; +import { CustomField } from '@/utils/Interfaces'; +import React, { useEffect, useRef, useState } from 'react'; import { editEditUser, getUserDetails } from '@/services/ProfileService'; -import { useTheme, withStyles } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles'; import { GetStaticPaths } from 'next'; import Button from '@mui/material/Button'; -import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'; -import CloseIcon from '@mui/icons-material/Close'; import CreateOutlinedIcon from '@mui/icons-material/CreateOutlined'; import Header from '@/components/Header'; import Image from 'next/image'; import Loader from '@/components/Loader'; -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, - mapFieldIdToValue, -} from '@/utils/Helper'; +import { toPascalCase, mapFieldIdToValue } from '@/utils/Helper'; import { logEvent } from '@/utils/googleAnalytics'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { showToastMessage } from '@/components/Toastify'; import { useProfileInfo } from '@/services/queries'; import { useRouter } from 'next/router'; 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; - label: string; - value: string; - order: string; -} +import AddFacilitatorModal from '@/components/AddFacilitator'; interface UserData { name: string; } -interface EditFormProps { - userData: UserData; - customFieldsData: CustomField[]; - updateUser: (payload: any) => void; -} - const TeacherProfile = () => { const user_placeholder_img: string = user_placeholder.src; @@ -83,82 +44,119 @@ const TeacherProfile = () => { const store = useStore(); const userRole = store.userRole; const userStore = manageUserStore(); - const selfUserId = userStore.userId; + const selfUserId = localStorage.getItem('userId'); const theme = useTheme(); - const [open, setOpen] = React.useState(false); - const handleOpen = () => { - setOpen(true); - logEvent({ - action: 'edit-teacher-profile-modal-open', - category: 'Profile Page', - label: 'Edit Teacher Profile Modal Open', - }); - }; - const [errors, setErrors] = useState<{ [key: string]: boolean }>({}); - const handleClose = () => { - setOpen(false); - initialFormData(); - setHasInputChanged(false); - setHasErrors(false); - setErrors({}); - logEvent({ - action: 'edit-teacher-profile-modal-close', - category: 'Profile Page', - label: 'Edit Teacher Profile Modal Close', - }); - }; const [userData, setUserData] = useState(null); const [userName, setUserName] = useState(null); - const [updatedCustomFields, setUpdatedCustomFields] = useState([]); const isDesktop = useMediaQuery(theme.breakpoints.up('md')); const fileInputRef = useRef(null); - const [dropdownValues, setDropdownValues] = useState({}); const [customFieldsData, setCustomFieldsData] = useState([]); const [loading, setLoading] = useState(false); const [image, setImage] = useState(user_placeholder_img); - const [gender, setGender] = React.useState(''); const [isAuthenticated, setIsAuthenticated] = React.useState(false); const [unitName, setUnitName] = useState(''); const [blockName, setBlockName] = useState(''); - const [radioValues, setRadioValues] = useState([]); const [isError, setIsError] = React.useState(false); const [isData, setIsData] = React.useState(false); - const [hasInputChanged, setHasInputChanged] = React.useState(false); - const [isValidationTriggered, setIsValidationTriggered] = - React.useState(false); - // const [userId, setUserId] = useState(null); + const [formData, setFormData] = useState<{ [key: string]: any }>({}); + const [openAddLearnerModal, setOpenAddLearnerModal] = React.useState(false); - const handleNameFieldChange = (event: ChangeEvent) => { - const { value } = event.target; - setUserName(value); + const handleOpenAddLearnerModal = () => { + setOpenAddLearnerModal(true); + logEvent({ + action: 'edit-teacher-profile-modal-open', + category: 'Profile Page', + label: 'Edit Teacher Profile Modal Open', + }); }; - const style = { - position: 'absolute', - top: '50%', - width: '85%', - left: '50%', - transform: 'translate(-50%, -50%)', - bgcolor: theme.palette.warning.A400, - height: '526px', - textAlign: 'center', - '@media (min-width: 600px)': { - width: '450px', - }, + const handleCloseAddLearnerModal = () => { + setOpenAddLearnerModal(false); + logEvent({ + action: 'edit-teacher-profile-modal-close', + category: 'Profile Page', + label: 'Edit Teacher Profile Modal Close', + }); }; + const mapFields = (formFields: any, response: any) => { + let initialFormData: any = {}; + formFields.fields.forEach((item: any) => { + const userData = response?.userData; + const customField = userData?.customFields?.find( + (field: any) => field.fieldId === item.fieldId + ); + const getValue = (data: any, field: any) => { + if (item.default) { + return item.default; + } + if (item?.isMultiSelect) { + if (data[item.name] && item?.maxSelections > 1) { + return [field.value]; + } else if (item?.type === 'checkbox') { + return String(field.value).split(','); + } else { + return field.value; + } + } else { + if (item?.type === 'numeric') { + return Number(field.value); + } else if (item?.type === 'text') { + return String(field.value); + } else { + return field.value; + } + } + }; + if (item.coreField) { + if (item?.isMultiSelect) { + if (userData[item.name] && item?.maxSelections > 1) { + initialFormData[item.name] = [userData[item.name]]; + } else { + initialFormData[item.name] = userData[item.name] || ''; + } + } else if (item?.type === 'numeric') { + initialFormData[item.name] = Number(userData[item.name]); + } else if (item?.type === 'text') { + initialFormData[item.name] = String(userData[item.name]); + } else { + initialFormData[item.name] = userData[item.name]; + } + } else { + initialFormData[item.name] = getValue(userData, customField); + } + }); + console.log('initialFormData', initialFormData); + return initialFormData; + }; + + const fetchDataAndInitializeForm = async () => { + try { + let formFields; + const response = await getUserDetails(userId, true); + formFields = await getFormRead('USERS', 'TEACHER'); //TODO: Change for TL + console.log('response', response); + console.log('formFields', formFields); + setFormData(mapFields(formFields, response?.result)); + } catch (error) { + console.error('Error fetching data or initializing form:', error); + } + }; + + useEffect(() => { + fetchDataAndInitializeForm(); + }, [userId]); + useEffect(() => { if (typeof window !== 'undefined' && window.localStorage) { const token = localStorage.getItem('token'); - // const storedUserId = localStorage.getItem('userId'); if (token) { setIsAuthenticated(true); } else { router.push('/login'); } - // setUserId(storedUserId); } }, []); @@ -251,19 +249,6 @@ const TeacherProfile = () => { } }, [data, error, isLoading]); - const handleClickImage = () => { - fileInputRef.current && fileInputRef.current.click(); - }; - - const handleImageUpload = (e: any) => { - const image: any[] = [e.target.files[0]]; - const newImageUrl: any = []; - image.forEach((dataImage: any) => - newImageUrl.push(URL.createObjectURL(dataImage)) - ); - setImage(newImageUrl); - }; - // Find fields for "Subjects I Teach" and "My Main Subjects" const teachSubjectsField = customFieldsData?.find( (field) => field.name === 'subject_taught' @@ -320,208 +305,7 @@ const TeacherProfile = () => { ?.filter(Boolean) ?.join(', '); - //------------edit teacher profile------------ - - const [formData, setFormData] = useState<{ - userData: IUserData; - customFields: { fieldId: string; type: string; value: string[] | string }[]; - }>({ - userData: { - name: 'userName', - }, - customFields: customFieldsData?.map((field) => ({ - fieldId: field.fieldId, - type: field.type, - value: field.value ? field.value : '', - })), - }); - - const initialFormData = () => { - setFormData({ - userData: { - name: userName || '', - }, - customFields: customFieldsData?.map((field) => ({ - fieldId: field.fieldId, - type: field.type, - value: field.value ? field.value : '', - })), - }); - }; - - useEffect(() => { - initialFormData(); - }, [userData, customFieldsData]); - - const [hasErrors, setHasErrors] = useState(false); - - const handleInputChange = (e: React.ChangeEvent) => { - const { value } = e.target; - const sanitizedValue = value - .replace(/[^a-zA-Z_ ]/g, '') - .replace(/^\s+/, '') - .replace(/\s+/g, ' '); - - setFormData((prevData) => ({ - ...prevData, - userData: { - ...prevData.userData, - name: sanitizedValue, - }, - })); - setHasInputChanged(true); - setIsValidationTriggered(true); - validateFields(); - // setHasErrors(!sanitizedValue.trim()); - }; - - //fields for edit popup by order - const filteredSortedForEdit = [...customFieldsData] - ?.filter((field) => field.isEditable) - ?.sort((a, b) => a.order - b.order); - - const validateFields = () => { - const newErrors: { [key: string]: boolean } = {}; - - filteredSortedForEdit?.forEach((field) => { - const value = - formData?.customFields?.find((f) => f.fieldId === field.fieldId) - ?.value[0] || ''; - - if (field.type === 'text') { - newErrors[field.fieldId] = !value.trim(); - } else if (field.type === 'numeric') { - newErrors[field.fieldId] = !/^\d{1,4}$/.test(value); - } else if (field.type === 'dropdown' || field.type === 'drop_down') { - newErrors[field.fieldId] = !value.trim(); - } - }); - - newErrors['name'] = !formData.userData.name.trim(); - - setErrors(newErrors); - setHasErrors(Object.values(newErrors).some((error) => error)); - }; - - useEffect(() => { - if (hasInputChanged) { - validateFields(); - } - }, [formData, customFieldsData]); - - const handleFieldChange = (fieldId: string, value: string) => { - const sanitizedValue = value.replace(/^\s+/, '').replace(/\s+/g, ' '); - - setFormData((prevState) => ({ - ...prevState, - customFields: prevState.customFields.map((field) => - field.fieldId === fieldId - ? { ...field, value: [sanitizedValue] } - : field - ), - })); - setHasInputChanged(true); - setIsValidationTriggered(true); - validateFields(); - }; - - const handleCheckboxChange = ( - fieldId: string, - optionName: string, - isChecked: boolean - ) => { - setFormData((prevState) => ({ - ...prevState, - customFields: prevState.customFields.map((field) => - field.fieldId === fieldId - ? { - ...field, - value: isChecked - ? [...(field.value as string[]), optionName] - : (field.value as string[]).filter( - (item) => item !== optionName - ), - } - : field - ), - })); - setHasInputChanged(true); - setIsValidationTriggered(true); - validateFields(); - }; - - const handleDropdownChange = (fieldId: string, value: string) => { - setFormData((prevState) => ({ - ...prevState, - customFields: prevState.customFields.map((field) => - field.fieldId === fieldId ? { ...field, value: [value] } : field - ), - })); - setHasInputChanged(true); - setIsValidationTriggered(true); - validateFields(); - }; - - const handleRadioChange = (fieldId: string, value: string) => { - setFormData((prevState) => ({ - ...prevState, - customFields: prevState.customFields.map((field) => - field.fieldId === fieldId ? { ...field, value: [value] } : field - ), - })); - setHasInputChanged(true); - setIsValidationTriggered(true); - validateFields(); - }; - - const handleSubmit = async ( - e: React.MouseEvent - ) => { - e.preventDefault(); - logEvent({ - action: 'save-button-clicked-edit-teacher-profile', - category: 'Profile Page', - label: 'Teacher Profile Save Button Clicked', - }); - setLoading(true); - const data = { - userData: formData?.userData, - customFields: formData?.customFields?.map((field) => ({ - fieldId: field.fieldId, - // type: field.type, - value: Array.isArray(field?.value) - ? field?.value?.length > 0 - ? field?.value - : '' - : field?.value, - })), - }; - const userDetails = data; - try { - if (userId) { - const response = await editEditUser(userId, userDetails); - ReactGA.event('edit-teacher-profile-successful', { userId: userId }); - if (response.responseCode !== 200 || response.params.err) { - ReactGA.event('edit-teacher-profile-error', { userId: userId }); - throw new Error( - response.params.errmsg || - 'An error occurred while updating the user.' - ); - } - handleClose(); - console.log(response.params.successmessage); - setIsError(false); - setLoading(false); - } - } catch (error) { - setIsError(true); - showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); - console.error('Error:', error); - } - - console.log('payload', data); - }; - + // //------------edit teacher profile------------ return ( <> { { window.history.back(); - // logEvent({ - // action: 'back-button-clicked-teacher-profile-page', - // category: 'Teacher Profile Page', - // label: 'Back Button Clicked', - // }); + logEvent({ + action: 'back-button-clicked-teacher-profile-page', + category: 'Teacher Profile Page', + label: 'Back Button Clicked', + }); }} > { lineHeight={'1.75rem'} color={theme.palette.warning['A200']} > - {userName?.length > 18 - ? `${userName?.substring(0, 18)}...` - : userName} + {userName} { color: theme.palette.warning.A200, border: `1px solid #4D4639`, }} - onClick={handleOpen} + onClick={handleOpenAddLearnerModal} > { ) : null} + {openAddLearnerModal && ( +
+ +
+ )} { } else { return ( + {/* Profile Field Labels */} { > {item?.label && t(`FORM.${item.label}`, item.label)} + {/* Profile Field Values */} { - {/* modal for edit profile */} - - - {loading && ( - - )} - - - {t('PROFILE.EDIT_PROFILE')} - - - - - - - - - - {/* user */} - - - - {/* ------- comment for temp - */} - - - - - {customFieldsData - ?.filter((field) => field.isEditable) - ?.sort((a, b) => a.order - b.order) - ?.map((field) => { - const fieldValue = - formData?.customFields?.find( - (f) => f.fieldId === field.fieldId - )?.value[0] || ''; - const isError = errors[field.fieldId]; - - return ( - - {field.type === 'text' ? ( - { - handleFieldChange( - field.fieldId, - e.target.value - ); - validateFields(); - }} - error={isError} - helperText={ - isError && t('PROFILE.ENTER_CHARACTER') - } - /> - ) : field.type === 'numeric' ? ( - { - // Allow only numeric keys, Backspace, and Delete - if ( - !( - ( - /[0-9]/.test(e.key) || - e.key === 'Backspace' || - e.key === 'Delete' - ) // Allow decimal point if needed - ) - ) { - e.preventDefault(); - } - }} - onChange={(e) => { - const inputValue = e.target.value; - if (/^\d{0,4}$/.test(inputValue)) { - handleFieldChange(field.fieldId, inputValue); - validateFields(); - } - }} - error={isError} - helperText={isError && t('PROFILE.ENTER_NUMBER')} - /> - ) : field.type === 'checkbox' ? ( - - - {field?.label && field.name - ? t( - `FORM.${field.name.toUpperCase()}`, - field.label - ) - : field.label} - - {field.options?.map((option: any) => ( - - f.fieldId === field.fieldId - )?.value || [] - )?.includes(option.value)} - onChange={(e) => - handleCheckboxChange( - field.fieldId, - option.value, - e.target.checked - ) - } - /> - } - label={option.label} - /> - - ))} - - ) : field.type === 'drop_down' || - field.type === 'dropdown' ? ( - - - - {field?.label && field.name - ? t( - `FORM.${field.name.toUpperCase()}`, - field.label - ) - : field.label} - - - {errors[field.fieldId] && ( - - {t('PROFILE.SELECT_OPTION')} - - )} - - - ) : field.type === 'radio' || - field.type === 'Radio' ? ( - - - {field?.label && field.name - ? t( - `FORM.${field.name.toUpperCase()}`, - field.label - ) - : field.label} - - - handleRadioChange( - field.fieldId, - e.target.value - ) - } - > - - {field?.options?.map((option: any) => ( - } - label={option.label} - /> - ))} - - - - ) : null} - - ); - })} - - - - - - - - ) : (