diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx index e04baa98..eb910147 100644 --- a/src/components/ManageUser.tsx +++ b/src/components/ManageUser.tsx @@ -30,6 +30,7 @@ import ReassignModal from './ReassignModal'; import SimpleModal from './SimpleModal'; import { setTimeout } from 'timers'; import Loader from './Loader'; +import { useMediaQuery } from '@mui/material'; interface Cohort { cohortId: string; @@ -69,7 +70,7 @@ const ManageUser: React.FC = ({ setReloadState, cohortData, isFromFLProfile = false, - teacherUserId + teacherUserId, }) => { const { t } = useTranslation(); const theme = useTheme(); @@ -111,6 +112,7 @@ const ManageUser: React.FC = ({ const [removeCohortNames, setRemoveCohortNames] = React.useState(''); const [reassignCohortNames, setReassignCohortNames] = React.useState(''); const [userId, setUserId] = React.useState(''); + const isMobile = useMediaQuery(theme.breakpoints.down('md')); const CustomLink = styled(Link)(({ theme }) => ({ textDecoration: 'underline', textDecorationColor: theme?.palette?.secondary.main, @@ -122,6 +124,7 @@ const ManageUser: React.FC = ({ const setReassignFacilitatorUserId = reassignLearnerStore( (state) => state.setReassignFacilitatorUserId ); + const [anchorEl, setAnchorEl] = useState(null); useEffect(() => { if (reloadState) { @@ -288,9 +291,10 @@ const ManageUser: React.FC = ({ const toggleDrawer = (anchor: Anchor, open: boolean, user?: any, teacherUserId?: string) => (event: React.KeyboardEvent | React.MouseEvent) => { - setCohortDeleteId(isFromFLProfile? teacherUserId : user.userId); + setCohortDeleteId(isFromFLProfile ? teacherUserId : user.userId); if (!isFromFLProfile) { - const centerNames = cohortsData?.[user?.userId]?.map((cohort) => cohort?.name) || []; + const centerNames = + cohortsData?.[user?.userId]?.map((cohort) => cohort?.name) || []; setCenters(centerNames); setSelectedUser(user); } // TODO: check condition for profile @@ -308,7 +312,7 @@ const ManageUser: React.FC = ({ const listItemClick = async (event: React.MouseEvent, name: string) => { if (name === 'delete-User') { - const userId = isFromFLProfile? teacherUserId : store?.deleteId; + const userId = isFromFLProfile ? teacherUserId : store?.deleteId; setUserId(userId); const cohortList = await getCohortList(userId); @@ -346,9 +350,13 @@ const ManageUser: React.FC = ({ // } } if (name === 'reassign-block') { - const reassignuserId = isFromFLProfile? teacherUserId : selectedUser?.userId; + const reassignuserId = isFromFLProfile + ? teacherUserId + : selectedUser?.userId; - setReassignFacilitatorUserId(isFromFLProfile? teacherUserId : selectedUser?.userId); + setReassignFacilitatorUserId( + isFromFLProfile ? teacherUserId : selectedUser?.userId + ); const fetchCohortList = async () => { if (!selectedUser?.userId) { @@ -357,7 +365,9 @@ const ManageUser: React.FC = ({ } try { - const cohortList = await getCohortList(isFromFLProfile ? teacherUserId ?? '' : selectedUser.userId); + const cohortList = await getCohortList( + isFromFLProfile ? teacherUserId ?? '' : selectedUser.userId + ); console.log('Cohort List:', cohortList); if (cohortList && cohortList?.length > 0) { const cohortDetails = cohortList?.map( @@ -549,19 +559,19 @@ const ManageUser: React.FC = ({ */} - - {value === 1 && ( - <> - {!isFromFLProfile && ( - - - {/* + + {value === 1 && ( + <> + {!isFromFLProfile && ( + + + {/* = ({ }} /> */} - - - {/* + + + {/* */} - - - - {/* + + + + {/* {t('COMMON.ADD_CENTER')} */} - - - )} + + + )} - - {isFromFLProfile ? ( - - ) : ( - - - + {isFromFLProfile ? ( + - - {users && - users.length !== 0 && - [...users] - .sort((a, b) => a.name.localeCompare(b.name)) - .map((user) => ( - - - + ) : ( + + + + + {users && + users.length !== 0 && + [...users] + .sort((a, b) => a.name.localeCompare(b.name)) + .map((user) => ( + - - e.preventDefault()} + + - { - handleTeacherFullProfile( - user.userId! - ); - // ReactGA.event('teacher-details-link-clicked', { - // userId: userId, - // }); - }} + + e.preventDefault()} + > + { + handleTeacherFullProfile( + user.userId! + ); + // ReactGA.event('teacher-details-link-clicked', { + // userId: userId, + // }); + }} + sx={{ + textAlign: 'left', + fontSize: '16px', + fontWeight: '400', + marginTop: '5px', + color: + theme.palette.secondary.main, + }} + > + {user.name + .charAt(0) + .toUpperCase() + + user.name.slice(1)} + + + + {user?.cohortNames + ? `${user.cohortNames}` + : t('ATTENDANCE.N/A')} + + + + + - {user.name.charAt(0).toUpperCase() + - user.name.slice(1)} - - - - {user?.cohortNames - ? `${user.cohortNames}` - : t('ATTENDANCE.N/A')} + /> - - - - - - - ))} - {!users?.length && ( - - - {t('COMMON.NO_DATA_FOUND')} - - - )} - + + ))} + {!users?.length && ( + + + {t('COMMON.NO_DATA_FOUND')} + + + )} + + + - - - )} - - - - ), - name: 'reassign-block', - }, - { - label: t('COMMON.REASSIGN_BLOCKS_REQUEST'), - icon: ( - - ), - name: 'reassign-block-request', - }, - // { - // label: t('COMMON.REASSIGN_CENTERS'), - // icon: ( - // - // ), - // name: 'reassign-centers', - // }, - { - 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.REASSIGN_CENTERS'), + // icon: ( + // + // ), + // name: 'reassign-centers', + // }, + { + label: t('COMMON.DELETE_USER'), + icon: ( + + ), + name: 'delete-User', + }, + ]} + > + {/*