From 1b114adc458cb270e113ceecf82cf71609d4aeec Mon Sep 17 00:00:00 2001 From: upendraTekdi Date: Tue, 28 May 2024 18:48:38 +0530 Subject: [PATCH 1/9] Issue #PS-312 feat:View Teacher profile UI fixes ,url name change for profile --- public/locales/en/common.json | 4 +- src/components/Header.tsx | 22 +- .../{teacher-profile.tsx => profile.tsx} | 252 +++++++++++------- src/styles/customStyles.tsx | 3 + 4 files changed, 173 insertions(+), 108 deletions(-) rename src/pages/{teacher-profile.tsx => profile.tsx} (75%) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index e0fd59e3..3370d971 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -113,11 +113,11 @@ "MY_PROFILE": "My Profile", "VIEW_MORE": "View More", "VIEW_LESS": "View Less", - "DATA_RANAGE": "Data Ranage", + "DATA_RANAGE": "Data Range", "LEARNER_DETAILS": "Learner Details", "VIEW_DAY_WISE": "View Day-Wise", "SUBMITTED_ON": "Submitted On", "MARK_OBTAINED": "Mark Obtained", - "TOTAL_QUESTIONS":"Total Questions" + "TOTAL_QUESTIONS": "Total Questions" } } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 1ca5d5c4..d038bd89 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -68,8 +68,8 @@ const Header: React.FC = () => { })); const handleProfileClick = () => { - if (pathname !== '/teacher-profile') { - router.push('/teacher-profile'); + if (pathname !== '/profile') { + router.push('/profile'); } }; const handleLogoutClick = () => { @@ -105,8 +105,18 @@ const Header: React.FC = () => { const [language, setLanguage] = React.useState(selectedLanguage); return ( - - + + { justifyContent={'space-between'} alignItems={'center'} height="auto" - boxShadow = '0px 1px 3px 0px #0000004D' + boxShadow="0px 1px 3px 0px #0000004D" > @@ -166,7 +176,7 @@ const Header: React.FC = () => { - + { value: string; options: Record; type: string; + order: number; } const { t } = useTranslation(); @@ -64,7 +65,9 @@ const TeacherProfile = () => { type: string ) => { const updatedFields = [...updatedCustomFields]; - const index = updatedFields.findIndex((field) => field.fieldId === fieldId); + const index = updatedFields?.findIndex( + (field) => field.fieldId === fieldId + ); if (index !== -1) { if (type === 'checkbox' && Array.isArray(value)) { @@ -154,7 +157,7 @@ const TeacherProfile = () => { if (field.type === 'checkbox' && Array.isArray(field.value)) { return { ...field, - values: field.value.join(','), // Convert array to comma-separated string + value: field.value.join(', '), }; } return field; @@ -226,6 +229,7 @@ const TeacherProfile = () => { setImage(newImageUrl); }; + // render subjects i teach const techSubjectsField = customFieldsData?.find( (field) => field.label === 'Subjects I Teach' ); @@ -236,6 +240,21 @@ const TeacherProfile = () => { const techSubjects = techSubjectsField?.value?.split(', ') || []; const mainSubjects = mainSubjectsField?.value?.split(', ') || []; + const mutualSubjects = techSubjects.filter((subject) => + mainSubjects.includes(subject) + ); + const remainingSubjects = techSubjects.filter( + (subject) => !mainSubjects.includes(subject) + ); + const orderedSubjects = [...mutualSubjects, ...remainingSubjects]; + + // Define the desired order + const order = [1, 4, 2, 3, 5, 7]; + + const orderedFields = customFieldsData + ?.filter((field) => order?.includes(field.order)) + ?.sort((a, b) => order.indexOf(a.order) - order?.indexOf(b.order)); + return ( { textAlign: 'left', marginBottom: '2px', }} + fontSize={'22px'} + fontWeight={'400'} + lineHeight={'28px'} > {t('PROFILE.MY_PROFILE')} @@ -279,7 +301,7 @@ const TeacherProfile = () => { minWidth={'100%'} borderRadius={'12px'} border={'1px'} - bgcolor="warning.A400" + bgcolor={theme.palette.warning.A400} display="flex" flexDirection="row" > @@ -295,21 +317,39 @@ const TeacherProfile = () => { - -
+ + +
- {userData?.name} - - + {userData?.name} + + + {userData?.district || userData?.state ? ( ) : ( '' )} - + {userData?.district && userData?.state ? `${userData.district}, ${userData.state}` : `${userData?.district || ''}${userData?.state || ''}`} @@ -331,9 +371,9 @@ const TeacherProfile = () => { color: 'black', border: '1px solid black', borderColor: 'black', - backgroundColor: 'warning.A400', + backgroundColor: theme.palette.warning.A400, '&:hover': { - backgroundColor: 'warning.A400', + backgroundColor: theme.palette.warning.A400, }, }} startIcon={} @@ -354,88 +394,103 @@ const TeacherProfile = () => { minWidth={'100%'} borderRadius={'12px'} border={'1px'} - bgcolor="warning.A400" display="flex" flexDirection="row" > - - {customFieldsData && - customFieldsData?.map((item, i) => ( - <> - {item?.label !== 'Subjects I Teach' && - item?.label !== 'My Main Subjects' ? ( - - {/* question */} - - {item?.label} - - - {/* value */} - - {item?.value} - - - ) : null} - - ))} - - - - Subjects I Teach - - - - - {techSubjects?.map((subject, index) => ( - - ))} - {mainSubjects - .filter((subject) => !techSubjects.includes(subject)) - .map((subject, index) => ( - - - + + {orderedFields?.map((item, index) => { + if (item.order === 5) { + return ( + + + {item?.label} + + + {orderedSubjects?.map((subject, index) => ( + ))} + - - - + ); + } else if (item.order === 7) { + return ( + + + {item.label} + + + {item.value} + + + ); + } else { + return ( + + + {item.label} + + + {item.value} + + + ); + } + })} { variant="h2" style={{ textAlign: 'left', - color: '#4D4639', + color: theme.palette.warning.A200, }} > {t('PROFILE.EDIT_PROFILE')} @@ -530,9 +585,9 @@ const TeacherProfile = () => { color: 'black', border: '1px solid black', borderColor: 'black', - backgroundColor: 'warning.A400', + backgroundColor: theme.palette.warning.A400, '&:hover': { - backgroundColor: 'warning.A400', + backgroundColor: theme.palette.warning.A400, }, }} onClick={handleClickImage} @@ -567,24 +622,21 @@ const TeacherProfile = () => { textAlign={'start'} variant="h4" margin={0} - color={'#4D4639'} + color={theme.palette.warning.A200} > {field.label} - {console.log( - 'updatedCustomFields Data ', - updatedCustomFields - )} - {field.options.map((option: any) => ( + + {field?.options?.map((option: any) => ( f.fieldId === field.fieldId )?.values || [] ).includes(option.name) || false diff --git a/src/styles/customStyles.tsx b/src/styles/customStyles.tsx index f4246155..68eaadf5 100644 --- a/src/styles/customStyles.tsx +++ b/src/styles/customStyles.tsx @@ -19,6 +19,7 @@ const customTheme = extendTheme({ info: { main: '#064471', light: '#D6EEFF', + contrastText: ' #EFC570', }, warning: { '100': '#17130B', @@ -43,6 +44,7 @@ const customTheme = extendTheme({ activeChannel: '#987100', selectedChannel: '#dba403', }, + background: {}, }, }, dark: { @@ -62,6 +64,7 @@ const customTheme = extendTheme({ info: { main: '#064471', light: '#D6EEFF', + contrastText: ' #EFC570', }, warning: { '100': '#17130B', From e5c998725b73ce6c645933689c1bd74eedb0c52f Mon Sep 17 00:00:00 2001 From: upendraTekdi Date: Tue, 28 May 2024 18:56:59 +0530 Subject: [PATCH 2/9] Issue #PS-312 feat: updated image cover --- src/pages/profile.tsx | 49 ++++++++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index d3791815..e11c575e 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -31,7 +31,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import Image from 'next/image'; import { useRouter } from 'next/router'; const TeacherProfile = () => { - const user_placeholder_img: string = userPicture.src; + const user_placeholder_img: string = user_placeholder.src; interface CustomField { fieldId: string; @@ -420,29 +420,30 @@ const TeacherProfile = () => { flexWrap: 'wrap', }} > - {orderedSubjects?.map((subject, index) => ( - - ))} + {orderedSubjects && + orderedSubjects?.map((subject, index) => ( + + ))} ); From f9e35cc9f0bbfc89ae19bf7a9a017ed649dde44e Mon Sep 17 00:00:00 2001 From: upendraTekdi Date: Thu, 30 May 2024 11:46:46 +0530 Subject: [PATCH 3/9] Issue #PS-312 feat:View Teacher profile --- src/pages/profile.tsx | 40 ++++++++++++++++++++++------------------ 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index e11c575e..422cc2cf 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -189,22 +189,20 @@ const TeacherProfile = () => { try { if (userId) { const response = await getUserDetails(userId, true); + console.log('profile', response); + const data = response?.result; - if (response?.statusCode === 200) { - const data = response?.data; - if (data) { - const userData = data?.userData; - setUserData(userData); - const customDataFields = userData?.customFields; - console.log('customDataFields', customDataFields); - if (customDataFields?.length > 0) { - setCustomFieldsData(customDataFields); - } - } else { - console.log('No data Found'); + if (data) { + const userData = data?.userData; + + setUserData(userData); + const customDataFields = userData?.customFields; + console.log('dataResponse', customDataFields); + if (customDataFields?.length > 0) { + setCustomFieldsData(customDataFields); } } else { - console.log('No Response Found'); + console.log('No data Found'); } } } catch (error) { @@ -230,7 +228,7 @@ const TeacherProfile = () => { setImage(newImageUrl); }; - // render subjects i teach + // Find fields for "Subjects I Teach" and "My Main Subjects" const techSubjectsField = customFieldsData?.find( (field) => field.label === 'Subjects I Teach' ); @@ -238,9 +236,14 @@ const TeacherProfile = () => { (field) => field.label === 'My Main Subjects' ); - const techSubjects = techSubjectsField?.value?.split(', ') || []; - const mainSubjects = mainSubjectsField?.value?.split(', ') || []; + const techSubjects: string[] = Array.isArray(techSubjectsField?.value) + ? techSubjectsField?.value + : []; + const mainSubjects: string[] = Array.isArray(mainSubjectsField?.value) + ? mainSubjectsField?.value + : []; + // Find mutual and remaining subjects const mutualSubjects = techSubjects.filter((subject) => mainSubjects.includes(subject) ); @@ -252,9 +255,10 @@ const TeacherProfile = () => { // Define the desired order const order = [1, 4, 2, 3, 5, 7]; + // Order fields based on the predefined order const orderedFields = customFieldsData - ?.filter((field) => order?.includes(field.order)) - ?.sort((a, b) => order.indexOf(a.order) - order?.indexOf(b.order)); + ?.filter((field) => order.includes(field.order)) + ?.sort((a, b) => order.indexOf(a.order) - order.indexOf(b.order)); return ( Date: Thu, 30 May 2024 12:00:48 +0530 Subject: [PATCH 4/9] Issue #PS-312 feat:View Teacher profile --- src/pages/profile.tsx | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index 422cc2cf..75bfa0f9 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -365,6 +365,8 @@ const TeacherProfile = () => { {/* modal for edit profile */} @@ -697,17 +711,13 @@ const TeacherProfile = () => { From 2861d43b678a6cd99807558b58fafea1eace4fe0 Mon Sep 17 00:00:00 2001 From: upendraTekdi Date: Thu, 30 May 2024 12:06:21 +0530 Subject: [PATCH 5/9] Issue #PS-312 feat:View Teacher profile --- src/pages/profile.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index 75bfa0f9..f2d7a24c 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -132,7 +132,7 @@ const TeacherProfile = () => { left: '50%', transform: 'translate(-50%, -50%)', width: isDesktop ? 700 : 400, - bgcolor: 'warning.A400', + bgcolor: theme.palette.warning.A400, p: 4, textAlign: 'center', height: '85vh', @@ -378,10 +378,6 @@ const TeacherProfile = () => { color: theme.palette.warning.A200, border: '1px solid black', borderColor: theme.palette.warning['A100'], - backgroundColor: theme.palette.warning.A400, - '&:hover': { - backgroundColor: theme.palette.warning.A400, - }, }} startIcon={} onClick={handleOpen} @@ -572,7 +568,7 @@ const TeacherProfile = () => { }} borderRadius={'12px'} border={'1px'} - bgcolor="warning.A400" + bgcolor={theme.palette.warning.A400} display="flex" flexDirection="column" > @@ -605,10 +601,6 @@ const TeacherProfile = () => { color: 'black', border: '1px solid black', borderColor: 'black', - backgroundColor: theme.palette.warning.A400, - '&:hover': { - backgroundColor: theme.palette.warning.A400, - }, }} onClick={handleClickImage} > From 4407f8a81f71d77f913ad001b05a25db2ff45e05 Mon Sep 17 00:00:00 2001 From: upendraTekdi Date: Thu, 30 May 2024 12:07:35 +0530 Subject: [PATCH 6/9] Issue #PS-312 feat:View Teacher profile --- src/pages/profile.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index f2d7a24c..78c0e919 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -189,7 +189,7 @@ const TeacherProfile = () => { try { if (userId) { const response = await getUserDetails(userId, true); - console.log('profile', response); + const data = response?.result; if (data) { @@ -197,7 +197,6 @@ const TeacherProfile = () => { setUserData(userData); const customDataFields = userData?.customFields; - console.log('dataResponse', customDataFields); if (customDataFields?.length > 0) { setCustomFieldsData(customDataFields); } From e63467f0d86b98ffd27c7f3a966df32f21263aa5 Mon Sep 17 00:00:00 2001 From: upendraTekdi Date: Thu, 30 May 2024 19:52:13 +0530 Subject: [PATCH 7/9] Issue #PS-312 feat:View Teacher profile --- src/pages/profile.tsx | 81 +++++++++++++++++++++++++++++++++++++------ 1 file changed, 70 insertions(+), 11 deletions(-) diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index 78c0e919..c508d055 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -11,6 +11,8 @@ import { IconButton, InputLabel, MenuItem, + Radio, + RadioGroup, Select, TextField, Typography, @@ -59,6 +61,9 @@ const TeacherProfile = () => { 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 handleFieldChange = ( fieldId: string, @@ -126,6 +131,12 @@ const TeacherProfile = () => { handleFieldChange(fieldId, value, 'dropdown'); }; + const handleRadioChange = (fieldId: any, value: any) => { + setRadioValues((prev: any) => ({ + ...prev, + [fieldId]: value, + })); + }; const style = { position: 'absolute', top: '50%', @@ -182,6 +193,12 @@ const TeacherProfile = () => { } }; + // find Address + const getFieldValue = (data: any, label: string) => { + const field = data.find((item: any) => item.label === label); + return field ? field.value[0] : null; + }; + const fetchUserDetails = async () => { if (typeof window !== 'undefined' && window.localStorage) { const userId = localStorage.getItem('userId'); @@ -189,7 +206,7 @@ const TeacherProfile = () => { try { if (userId) { const response = await getUserDetails(userId, true); - + const data = response?.result; if (data) { @@ -199,6 +216,12 @@ const TeacherProfile = () => { 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); } } else { console.log('No data Found'); @@ -253,12 +276,20 @@ const TeacherProfile = () => { // Define the desired order const order = [1, 4, 2, 3, 5, 7]; - // Order fields based on the predefined order const orderedFields = customFieldsData ?.filter((field) => order.includes(field.order)) ?.sort((a, b) => order.indexOf(a.order) - order.indexOf(b.order)); + const address = [unitName, blockName, userData?.district, userData?.state] + ?.filter(Boolean) + ?.join(', '); + + // Filter and sort customFieldsData by order, excluding fields with order 0 + const filteredSortedFields = [...customFieldsData] + ?.filter((field) => field.order !== 0) + ?.sort((a, b) => a.order - b.order); + return ( { - {userData?.district || userData?.state ? ( + {address ? ( { fontWeight={'500'} lineHeight={'16px'} > - {userData?.district && userData?.state - ? `${userData.district}, ${userData.state}` - : `${userData?.district || ''}${userData?.state || ''}`} + {address} @@ -597,10 +626,9 @@ const TeacherProfile = () => { marginTop: '10px', flex: '1', textAlign: 'center', - color: 'black', - border: '1px solid black', - borderColor: 'black', + border: '1px solid ', }} + disabled // commment for temp onClick={handleClickImage} > {t('PROFILE.UPDATE_PICTURE')} @@ -608,8 +636,8 @@ const TeacherProfile = () => { - {customFieldsData && - customFieldsData.map((field) => ( + {filteredSortedFields && + filteredSortedFields.map((field) => ( {field.type === 'text' || field.type === 'numeric' ? ( { + ) : field.type === 'radio' ? ( + + + {field.label} + + + handleRadioChange(field.fieldId, e.target.value) + } + > + + {field.options?.map((option: any) => ( + } + label={option.name} + /> + ))} + + + ) : null} ))} From 3732f500a7dd29e6b43c92569849143d957ad58a Mon Sep 17 00:00:00 2001 From: upendraTekdi Date: Fri, 31 May 2024 02:00:29 +0530 Subject: [PATCH 8/9] Issue #PS-312 feat:View Teacher profile --- src/pages/profile.tsx | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index c508d055..80e19475 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -217,7 +217,6 @@ const TeacherProfile = () => { if (customDataFields?.length > 0) { setCustomFieldsData(customDataFields); - const unitName = getFieldValue(customDataFields, 'Unit Name'); setUnitName(unitName); const blockName = getFieldValue(customDataFields, 'Block Name'); @@ -274,22 +273,21 @@ const TeacherProfile = () => { ); const orderedSubjects = [...mutualSubjects, ...remainingSubjects]; - // Define the desired order - const order = [1, 4, 2, 3, 5, 7]; - // Order fields based on the predefined order - const orderedFields = customFieldsData - ?.filter((field) => order.includes(field.order)) - ?.sort((a, b) => order.indexOf(a.order) - order.indexOf(b.order)); + //fields for view profile by order + const filteredSortedForView = [...customFieldsData] + ?.filter((field) => field.order !== 0 && field.label !== 'My Main Subjects') + ?.sort((a, b) => a.order - b.order); + + //fields for edit popup by order + const filteredSortedForEdit = [...customFieldsData] + ?.filter((field) => field.order !== 0) + ?.sort((a, b) => a.order - b.order); + // address find const address = [unitName, blockName, userData?.district, userData?.state] ?.filter(Boolean) ?.join(', '); - // Filter and sort customFieldsData by order, excluding fields with order 0 - const filteredSortedFields = [...customFieldsData] - ?.filter((field) => field.order !== 0) - ?.sort((a, b) => a.order - b.order); - return ( { flexDirection="row" > - {orderedFields?.map((item, index) => { + {filteredSortedForView?.map((item, index) => { if (item.order === 5) { return ( @@ -636,8 +634,8 @@ const TeacherProfile = () => { - {filteredSortedFields && - filteredSortedFields.map((field) => ( + {filteredSortedForEdit && + filteredSortedForEdit?.map((field) => ( {field.type === 'text' || field.type === 'numeric' ? ( Date: Fri, 31 May 2024 15:03:51 +0530 Subject: [PATCH 9/9] Issue #PS-312 feat:View Teacher profile updation --- src/pages/profile.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index 80e19475..d4d49218 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -42,6 +42,7 @@ const TeacherProfile = () => { options: Record; type: string; order: number; + name: string; } const { t } = useTranslation(); @@ -250,32 +251,32 @@ const TeacherProfile = () => { }; // Find fields for "Subjects I Teach" and "My Main Subjects" - const techSubjectsField = customFieldsData?.find( - (field) => field.label === 'Subjects I Teach' + const teachSubjectsField = customFieldsData?.find( + (field) => field.name === 'subject_taught' ); const mainSubjectsField = customFieldsData?.find( - (field) => field.label === 'My Main Subjects' + (field) => field.name === 'main_subject' ); - const techSubjects: string[] = Array.isArray(techSubjectsField?.value) - ? techSubjectsField?.value + const teachSubjects: string[] = Array.isArray(teachSubjectsField?.value) + ? teachSubjectsField?.value : []; const mainSubjects: string[] = Array.isArray(mainSubjectsField?.value) ? mainSubjectsField?.value : []; // Find mutual and remaining subjects - const mutualSubjects = techSubjects.filter((subject) => - mainSubjects.includes(subject) + const mutualSubjects = teachSubjects?.filter((subject) => + mainSubjects?.includes(subject) ); - const remainingSubjects = techSubjects.filter( - (subject) => !mainSubjects.includes(subject) + const remainingSubjects = teachSubjects?.filter( + (subject) => !mainSubjects?.includes(subject) ); const orderedSubjects = [...mutualSubjects, ...remainingSubjects]; //fields for view profile by order const filteredSortedForView = [...customFieldsData] - ?.filter((field) => field.order !== 0 && field.label !== 'My Main Subjects') + ?.filter((field) => field.order !== 0 && field.name !== 'main_subject') ?.sort((a, b) => a.order - b.order); //fields for edit popup by order