diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx index 60eb91d4..2008fe9c 100644 --- a/src/components/ManageUser.tsx +++ b/src/components/ManageUser.tsx @@ -249,27 +249,27 @@ const ManageUser: React.FC = ({ const toggleDrawer = (anchor: Anchor, open: boolean, user?: any, teacherUserId?: string) => - (event: React.KeyboardEvent | React.MouseEvent) => { - setCohortDeleteId(isFromFLProfile ? teacherUserId : user.userId); - if (!isFromFLProfile) { - const cohortNamesArray = user?.cohortNames?.split(', '); - const centerNames = cohortNamesArray?.map((cohortName: string) => - cohortName.trim() - ) || [t('ATTENDANCE.N/A')]; - setCenters(centerNames); - setSelectedUser(user); - } + (event: React.KeyboardEvent | React.MouseEvent) => { + setCohortDeleteId(isFromFLProfile ? teacherUserId : user.userId); + if (!isFromFLProfile) { + const cohortNamesArray = user?.cohortNames?.split(', '); + const centerNames = cohortNamesArray?.map((cohortName: string) => + cohortName.trim() + ) || [t('ATTENDANCE.N/A')]; + setCenters(centerNames); + setSelectedUser(user); + } - if ( - event.type === 'keydown' && - ((event as React.KeyboardEvent).key === 'Tab' || - (event as React.KeyboardEvent).key === 'Shift') - ) { - return; - } + if ( + event.type === 'keydown' && + ((event as React.KeyboardEvent).key === 'Tab' || + (event as React.KeyboardEvent).key === 'Shift') + ) { + return; + } - setState({ ...state, bottom: open }); - }; + setState({ ...state, bottom: open }); + }; const listItemClick = async (event: React.MouseEvent, name: string) => { if (name === 'delete-User') { @@ -473,7 +473,7 @@ const ManageUser: React.FC = ({ setOpenFacilitatorModal(false); }; - const handleDeleteUser = () => {}; + const handleDeleteUser = () => { }; const handleFacilitatorAdded = () => { setIsFacilitatorAdded((prev) => prev); @@ -483,81 +483,83 @@ const ManageUser: React.FC = ({ }; return (
- {loading ? ( - - ) : ( - <> - {/*
*/} - - - - {value === 1 && ( - <> - {!isFromFLProfile && ( - - - - - - - )} - - {isFromFLProfile ? ( - { - isMobile - ? toggleDrawer('bottom', true, teacherUserId)(event) - : handleMenuOpen(event); + <> + {/*
*/} + + + + + + {value === 1 && ( + <> + {!isFromFLProfile && ( + + + + + + )} + + + {isFromFLProfile ? ( + { + isMobile ? toggleDrawer('bottom', true, teacherUserId)(event) : handleMenuOpen(event) + }} + sx={{ + fontSize: '24px', + marginTop: '1rem', + color: theme.palette.warning['300'], + }} + /> + ) : ( + + - ) : ( - + > - + {loading ? ( + + + + ) : ( {users && users.length !== 0 && @@ -635,12 +637,11 @@ const ManageUser: React.FC = ({ }} > {user?.cohortNames - ? `${ - user.cohortNames - .charAt(0) - .toUpperCase() + - user.cohortNames.slice(1) - }` + ? `${user.cohortNames + .charAt(0) + .toUpperCase() + + user.cohortNames.slice(1) + }` : t('ATTENDANCE.N/A')} @@ -650,10 +651,10 @@ const ManageUser: React.FC = ({ onClick={(event) => { isMobile ? toggleDrawer( - 'bottom', - true, - user - )(event) + 'bottom', + true, + user + )(event) : handleMenuOpen(event); }} sx={{ @@ -688,195 +689,196 @@ const ManageUser: React.FC = ({ )} - + )} - )} - - - - ), - name: 'reassign-block', - }, - { - label: t('COMMON.REASSIGN_BLOCKS_REQUEST'), - icon: ( - - ), - name: 'reassign-block-request', - }, - { - label: t('COMMON.DELETE_USER'), - icon: ( - - ), - name: 'delete-User', - }, - ]} + + )} + + + + ), + name: 'reassign-block', + }, + { + label: t('COMMON.REASSIGN_BLOCKS_REQUEST'), + icon: ( + + ), + name: 'reassign-block-request', + }, + { + label: t('COMMON.DELETE_USER'), + icon: ( + + ), + name: 'delete-User', + }, + ]} + > + + {selectedUser?.name + ? selectedUser.name.charAt(0).toUpperCase() + + selectedUser.name.slice(1) + : ''} + + - {selectedUser?.name - ? selectedUser.name.charAt(0).toUpperCase() + - selectedUser.name.slice(1) - : ''} + {t('COMMON.CENTERS_ASSIGNED', { + block: newStore.block, + })} - - - {t('COMMON.CENTERS_ASSIGNED', { - block: newStore.block, - })} - - - {centers.length > 0 && - centers.map( - ( - name: - | string - | number - | bigint - | boolean - | React.ReactElement< - any, - string | React.JSXElementConstructor - > - | Iterable - | React.ReactPortal - | Promise - | null - | undefined - ) => ( - - ) - )} - + | Iterable + | React.ReactPortal + | Promise + | null + | undefined + ) => ( + + ) + )} - - - - - - + + + - + + + + + + + {' '} + + + {t('CENTERS.THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT')}{' '} + {removeCohortNames} +
+ {t('CENTERS.PLEASE_REMOVE_THE_USER_FROM_COHORT')} + + + + {openAddFacilitatorModal && ( + + )} + + )} + + - - - {' '} - - - {t('CENTERS.THE_USER_BELONGS_TO_THE_FOLLOWING_COHORT')}{' '} - {removeCohortNames} -
- {t('CENTERS.PLEASE_REMOVE_THE_USER_FROM_COHORT')} - - - - {openAddFacilitatorModal && ( - - )} - - )} - - - )}
); }; diff --git a/src/pages/centers/index.tsx b/src/pages/centers/index.tsx index 43cbcb29..6681d01d 100644 --- a/src/pages/centers/index.tsx +++ b/src/pages/centers/index.tsx @@ -197,7 +197,7 @@ const TeachingCenters = () => { return ( <>
- {loading && } + {loading && } {accessGranted('showBlockLevelData', accessControl, userRole) ? ( <> @@ -299,6 +299,9 @@ const TeachingCenters = () => { '& .MuiOutlinedInput-root': { boxShadow: 'none', }, + '@media (min-width: 900px)': { + width: '90%', + }, }} InputProps={{ endAdornment: ( @@ -323,11 +326,22 @@ const TeachingCenters = () => { /> - - + +