From d7f2746f5d5057282be1ecae85f993f0da3b7405 Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Fri, 5 Jul 2024 10:09:36 +0530 Subject: [PATCH] Issue #1103 feat: UI issue fixes and data mapping changes --- public/locales/en/common.json | 11 +- src/components/LearnersList.tsx | 13 +- src/components/ManageCentersModal.tsx | 4 +- src/components/ManageUser.tsx | 35 +++- src/components/center/CreateCenterModal.tsx | 13 +- src/pages/blocks/centre.tsx | 2 +- src/pages/centers/index.tsx | 201 ++++++++++++-------- src/services/CohortServices.ts | 2 +- 8 files changed, 183 insertions(+), 98 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 28c71512..60530518 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -77,7 +77,7 @@ "MANAGE_USERS": "Manage Users", "FACILITATORS": "Facilitators", "CENTERS_ASSIGNED": "Centers Assigned in {{block}}", - "REASSIGN_CENTERS": "Re-assign Centers", + "REASSIGN_CENTERS": "Re-assign Center", "REASSIGN_BLOCKS_REQUEST": "Request to Re-assign Block", "ASSIGN": "Assign", "SEARCH_FACILITATORS": "Search Facilitators..", @@ -252,12 +252,14 @@ "NEW_BLOCK": "New Block", "BLOCK_NAME": "Block Name", "CREATE": "Create", - "SEARCH_BLOCKS": "Search Blocks" + "SEARCH_BLOCKS": "Search Blocks", + "REASSIGN_BLOCK_REQUESTED": "Reassign Block Requested Successfully!" }, "CENTERS": { "CENTERS": "Centers", "REGULAR_CENTERS": "Regular Centers", - "REMOTE_CENTERS": "Remote Center", + "REMOTE_CENTERS": "Remote Centers", + "REMOTE_CENTER": "Remote Center", "REGULAR": "Regular", "REMOTE": "Remote", "SEARCH_BLOCKS": "Search Blocks", @@ -265,7 +267,8 @@ "NEW_CENTER": "New Center", "CENTER_TYPE": "Center Type", "UNIT_NAME": "Unit Name", - "NOTE": "Note: This will be the center name" + "NOTE": "Note: This will be the center name", + "CENTER_CREATED": "Center Created Successfully!" }, "MANAGE_USERS": { "CENTERS_REQUESTED_SUCCESSFULLY": "Center Requested Successfully" diff --git a/src/components/LearnersList.tsx b/src/components/LearnersList.tsx index 5714904c..336c6bce 100644 --- a/src/components/LearnersList.tsx +++ b/src/components/LearnersList.tsx @@ -27,6 +27,7 @@ import { Status, names } from '@/utils/app.constant'; import ApartmentIcon from '@mui/icons-material/Apartment'; import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; import ManageCentersModal from './ManageCentersModal'; +import { styled } from '@mui/system'; type Anchor = 'bottom'; const centerList = ['Nashik', 'Shirdi', 'kamptee']; @@ -68,6 +69,12 @@ const LearnersList: React.FC = ({ const { t } = useTranslation(); const [openCentersModal, setOpenCentersModal] = React.useState(false); + const CustomLink = styled(Link)(({ theme }) => ({ + textDecoration: 'underline', + textDecorationColor: theme?.palette?.secondary.main, + textDecorationThickness: '1px', + })); + useEffect(() => { if (reloadState) { setReloadState(false); @@ -359,7 +366,7 @@ const LearnersList: React.FC = ({ {learnerName} ) : ( - + { handleOpenModalLearner(userId!); @@ -376,7 +383,7 @@ const LearnersList: React.FC = ({ > {learnerName} - + )} = ({ name: isDropout ? 'unmark-drop-out' : 'mark-drop-out', }, { - label: t('COMMON.REMOVE_FROM_CENTER'), + label: t('COMMON.DELETE_USER'), icon: ( = ({ bgcolor: theme.palette.warning['A400'], boxShadow: 24, borderRadius: '16px', - height: '526px', + height: 'auto', '@media (min-width: 600px)': { width: '450px', }, @@ -111,7 +111,7 @@ const ManageCentersModal: React.FC = ({ }} component="h2" > - {t('COMMON.MANAGE_CENTERS')} + {t('COMMON.REASSIGN_CENTERS')} = ({ const [reassignBlockRequestModalOpen, setReassignBlockRequestModalOpen] = React.useState(false); + const CustomLink = styled(Link)(({ theme }) => ({ + textDecoration: 'underline', + textDecorationColor: theme?.palette?.secondary.main, + textDecorationThickness: '1px', + })); + useEffect(() => { const getFacilitator = async () => { setLoading(true); @@ -332,7 +339,7 @@ const manageUsers: React.FC = ({ // if (response) { // centers; // handleCloseCentersModal(); - // toggleDrawer('bottom', false, ''); + // setState({ ...state, bottom: false }); // } } catch (error) { console.error('Error assigning centers:', error); @@ -354,6 +361,11 @@ const manageUsers: React.FC = ({ }; const noop = () => {}; + const handleRequestBlockAction = () => { + showToastMessage(t('BLOCKS.REASSIGN_BLOCK_REQUESTED'), 'success'); + setState({ ...state, bottom: false }); + }; + return ( <> {/*
*/} @@ -508,7 +520,7 @@ const manageUsers: React.FC = ({ color: theme.palette.warning['300'], }} > - + { handleLearnerFullProfile(user.userId!); @@ -522,7 +534,7 @@ const manageUsers: React.FC = ({ > {user.name} - + = ({ ))} + {!users?.length && ( + + + {t('COMMON.NO_DATA_FOUND')} + + + )} @@ -662,6 +688,7 @@ const manageUsers: React.FC = ({ = ({ const handleCreateButtonClick = () => { console.log('Entered Center Name:', centerName); console.log('Selected Center Type:', centerType); - + showToastMessage(t('CENTERS.CENTER_CREATED'), 'success'); handleClose(); }; @@ -101,12 +102,10 @@ const CreateCenterModal: React.FC = ({ - {t('CENTERS.CENTER_TYPE')} - + + {t('CENTERS.CENTER_TYPE')} + + } diff --git a/src/pages/blocks/centre.tsx b/src/pages/blocks/centre.tsx index 4f4df44d..38262247 100644 --- a/src/pages/blocks/centre.tsx +++ b/src/pages/blocks/centre.tsx @@ -256,7 +256,7 @@ const Blocks: React.FC = () => { ))} - {t('CENTERS.REMOTE_CENTERS')} + {t('CENTERS.REMOTE_CENTER')} { const [loading, setLoading] = React.useState(false); @@ -50,6 +51,8 @@ const TeachingCenters = () => { const handleChange = (event: React.SyntheticEvent, newValue: number) => { setValue(newValue); }; + const [openCreateCenterModal, setOpenCreateCenterModal] = + React.useState(false); // API call to get center list useEffect(() => { @@ -121,10 +124,11 @@ const TeachingCenters = () => { const centerData = res?.childData.map((child: any) => { const cohortName = child.name; const cohortId = child.cohortId; - const centerTypeField = child?.customField.map((field: any) => { - return field.value; - }); - const centerType = centerTypeField.value; + const centerTypeField = child?.customField.find( + (field: any) => field.label === 'Type of Cohort' + ); + + const centerType = centerTypeField ? centerTypeField.value : ''; return { cohortName, cohortId, centerType }; }); console.log(centerData); @@ -151,6 +155,10 @@ const TeachingCenters = () => { getCohortListForTL(); }, [isTeamLeader]); + const handleCreateCenterClose = () => { + setOpenCreateCenterModal(false); + }; + return ( <>
@@ -168,9 +176,11 @@ const TeachingCenters = () => { color={theme?.palette?.warning['300']} > {block.blockName} - - {block.district}, {block.state} - + {block?.district && ( + + {block.district}, {block.state} + + )} ))} @@ -287,6 +297,7 @@ const TeachingCenters = () => { }} className="text-1E" endIcon={} + onClick={() => setOpenCreateCenterModal(true)} > {t('BLOCKS.CREATE_NEW')} @@ -298,35 +309,51 @@ const TeachingCenters = () => { )} + - {isTeamLeader && - centerData && - centerData?.map((center: any) => { - return ( - + {isTeamLeader && centerData && ( + <> + {/* Regular Centers */} + {centerData.some( + (center) => + center.centerType === 'Regular' || + center.centerType === '' + ) && ( +
{ - router.push(`/centers/${center.cohortId}`); - localStorage.setItem('classId', center.cohortId); + sx={{ + fontSize: '12px', + fontWeight: '500', + color: theme.palette.warning['300'], }} - sx={{ cursor: 'pointer', marginBottom: '20px' }} > - {center?.centerType === 'regular' || - (center?.centerType === undefined && ( - <> - - {center?.centerType} - + {t('CENTERS.REGULAR_CENTERS')} + + {centerData + .filter( + (center) => + center.centerType === 'Regular' || + center.centerType === '' + ) + .map((center) => ( + + { + router.push(`/centers/${center.cohortId}`); + localStorage.setItem( + 'classId', + center.cohortId + ); + }} + sx={{ cursor: 'pointer', marginBottom: '20px' }} + > { color: theme.palette.warning['300'], }} > - {center?.cohortName} + {center.cohortName} - - ))} - {center?.centerType === 'remote' && ( - <> - - {center?.centerType} + + ))} +
+ )} + + {/* Remote Centers */} + {centerData.some( + (center) => center.centerType === 'Remote' + ) && ( +
+ + {t('CENTERS.REMOTE_CENTERS')} + + {centerData + .filter((center) => center.centerType === 'Remote') + .map((center) => ( + { + router.push(`/centers/${center.cohortId}`); + localStorage.setItem( + 'classId', + center.cohortId + ); }} - mt={1} + sx={{ cursor: 'pointer', marginBottom: '20px' }} > - - + + + - - {center?.cohortName} + + {center.cohortName} + + - - - )} - - - ); - })} + + ))} +
+ )} + + )} {!isTeamLeader && cohortsData && diff --git a/src/services/CohortServices.ts b/src/services/CohortServices.ts index 280490dc..7a9e0fb1 100644 --- a/src/services/CohortServices.ts +++ b/src/services/CohortServices.ts @@ -23,7 +23,7 @@ export const getCohortDetails = async (cohortId: string): Promise => { return response?.data?.result; } catch (error) { console.error('error in getting cohort details', error); - throw error; + // throw error; } };