Skip to content

Commit

Permalink
Merge pull request #304 from Rushikesh-Sonawane99/shiksha-2.0
Browse files Browse the repository at this point in the history 
Issue #PS-792 feat: API Integration of list view of learners within a centre and updated UI for it to accept props dynamically
  • Loading branch information
@itsvick
itsvick authored Jun 19, 2024
2 parents 1f5a9cb + b728bbe commit 0f75028
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 98 deletions.
76 changes: 76 additions & 0 deletions src/components/CohortLearnerList.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import React, { useEffect } from 'react';
import { getMyCohortMemberList } from '@/services/MyClassDetailsService';
import {
capitalizeEachWord,
getFieldValue,
toPascalCase,
} from '@/utils/Helper';
import LearnersList from '@/components/LearnersList';
import { limit } from '@/utils/app.constant';
import { showToastMessage } from './Toastify';
import { useTranslation } from 'next-i18next';

const CohortLearnerList = () => {
const [loading, setLoading] = React.useState<boolean>(false);
const [userData, setUserData] = React.useState<{}[]>();
const { t } = useTranslation();
// const classId = localStorage.getItem('classId');
const classId = '18e800d0-11c4-4a8c-af97-8f9811976ed6'; // TODO: get userId as a prop or from localStorage dynamically

useEffect(() => {
const getCohortMemberList = async () => {
setLoading(true);
try {
if (classId) {
const page = 0;
const filters = { cohortId: classId };
const response = await getMyCohortMemberList({
limit,
page,
filters,
});
const resp = response?.result?.results?.userDetails;

if (resp) {
const userDetails = resp.map((user: any) => ({
name: toPascalCase(user.name),
userId: user.userId,
memberStatus: user.memberStatus,
cohortMembershipId: user.cohortMembershipId,
enrollmentNumber: capitalizeEachWord(
getFieldValue(user.customField, 'Enrollment Number')
),
}));
console.log(`userDetails`, userDetails);
setUserData(userDetails);
}
}
} catch (error) {
console.error('Error fetching cohort list:', error);
showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
setLoading(false);
} finally {
setLoading(false);
}
};
getCohortMemberList();
}, [classId]);

return (
<div>
{
userData?.map((userData: any) => {
return (
<LearnersList
key={userData.userId}
learnerName={userData.name}
enrollmentId={userData.enrollmentNumber}
isDropout={userData.memberStatus === 'dropout'}
/>
);
})}
</div>
);
};

export default CohortLearnerList;
152 changes: 56 additions & 96 deletions src/components/LearnersList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,18 @@ import { Box } from '@mui/material';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import DropOutModal from './DropOutModal';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
// import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import NoAccountsIcon from '@mui/icons-material/NoAccounts';
import React from 'react';
import Woman2Icon from '@mui/icons-material/Woman2';
// import Woman2Icon from '@mui/icons-material/Woman2';
import { useTheme } from '@mui/material/styles';
import { useTranslation } from 'next-i18next';
import { LearnerListProps } from '@/utils/Interfaces';

type Anchor = 'bottom';

const LearnersList = () => {
const LearnersList: React.FC<LearnerListProps> = ({learnerName, isDropout, enrollmentId}) => {
const [state, setState] = React.useState({
bottom: false,
});
Expand Down Expand Up @@ -43,7 +44,11 @@ const LearnersList = () => {

return (
<>
<Box px={'18px'} mt={2} sx={{ borderBottom: '1px solid #D0C5B4' }}>
<Box
px={'18px'}
mt={2}
sx={{ borderBottom: `1px solid ${theme.palette.warning['A100']}` }}
>
<Box
sx={{
display: 'flex',
Expand All @@ -54,92 +59,31 @@ const LearnersList = () => {
}}
>
<Box sx={{ display: 'flex', gap: '15px', alignItems: 'center' }}>
<Box className="box_shadow_center">
{/* <Box className="box_shadow_center">
<Woman2Icon
sx={{ fontSize: '24px', color: theme.palette.warning['300'] }}
/>
</Box>
</Box> */}
<Box>
<Box
sx={{ fontSize: '16px', color: theme.palette.warning['300'] }}
sx={{ fontSize: '16px', color: theme.palette.warning['300'], fontWeight: '600' }}
>
Aanya Gupta
{learnerName}
</Box>
<Box
sx={{
display: 'flex',
gap: '10px',
alignItems: 'center',
justifyContent: 'center',
justifyContent: 'left',
}}
>
<Box
sx={{ fontSize: '12px', color: theme.palette.warning['400'] }}
>
19 y/o
</Box>
<FiberManualRecordIcon
sx={{
fontSize: '9px',
color: theme.palette.secondary.contrastText,
}}
/>
<Box
{/* <Box
sx={{ fontSize: '12px', color: theme.palette.warning['400'] }}
>
1102929282
</Box>
</Box>
</Box>
</Box>
<MoreVertIcon
onClick={toggleDrawer('bottom', true)}
sx={{ fontSize: '24px', color: theme.palette.warning['300'] }}
/>
</Box>
</Box>

<Box px={'18px'} mt={2} sx={{ borderBottom: '1px solid #D0C5B4' }}>
<Box
sx={{
display: 'flex',
gap: '20px',
alignItems: 'center',
justifyContent: 'space-between',
paddingBottom: '15px',
}}
>
<Box sx={{ display: 'flex', gap: '15px', alignItems: 'center' }}>
<Box className="box_shadow_center">
<Woman2Icon
sx={{ fontSize: '24px', color: theme.palette.warning['300'] }}
/>
</Box>
<Box>
<Box
sx={{ fontSize: '16px', color: theme.palette.warning['300'] }}
>
Aanya Gupta
</Box>
<Box
sx={{
display: 'flex',
gap: '10px',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Box
sx={{ fontSize: '12px', color: theme.palette.warning['300'] }}
>
19 y/o
</Box>
<FiberManualRecordIcon
sx={{
fontSize: '9px',
color: theme.palette.secondary.contrastText,
}}
/>
</Box> */}
{isDropout ? (
<Box
sx={{
fontSize: '12px',
Expand All @@ -157,6 +101,22 @@ const LearnersList = () => {
<Box sx={{ marginTop: '1px' }}>Dropped Out</Box>
<ErrorOutlineIcon style={{ fontSize: '13px' }} />
</Box>
) : (
<>

{/* <FiberManualRecordIcon
sx={{
fontSize: '9px',
color: theme.palette.secondary.contrastText,
}}
/> */}
<Box
sx={{ fontSize: '14px', color: theme.palette.warning['400']}}
>
{enrollmentId}
</Box>
</>
)}
</Box>
</Box>
</Box>
Expand All @@ -165,30 +125,30 @@ const LearnersList = () => {
sx={{ fontSize: '24px', color: theme.palette.warning['300'] }}
/>
</Box>
<BottomDrawer
toggleDrawer={toggleDrawer}
state={state}
listItemClick={listItemClick}
optionList={[
{
label: t('COMMON.MARK_DROP_OUT'),
icon: (
<NoAccountsIcon sx={{ color: theme.palette.warning['300'] }} />
),
name: 'mark-drop-out',
},
{
label: t('COMMON.REMOVE_FROM_CENTER'),
icon: (
<DeleteOutlineIcon
sx={{ color: theme.palette.warning['300'] }}
/>
),
name: 'remove-from-center',
},
]}
/>
</Box>

<BottomDrawer
toggleDrawer={toggleDrawer}
state={state}
listItemClick={listItemClick}
optionList={[
{
label: t('COMMON.MARK_DROP_OUT'),
icon: (
<NoAccountsIcon sx={{ color: theme.palette.warning['300'] }} />
),
name: 'mark-drop-out',
},
{
label: t('COMMON.REMOVE_FROM_CENTER'),
icon: (
<DeleteOutlineIcon sx={{ color: theme.palette.warning['300'] }} />
),
name: 'remove-from-center',
},
]}
/>

<DropOutModal open={showModal} onClose={() => setShowModal(false)} />
</>
);
Expand Down
4 changes: 2 additions & 2 deletions src/pages/centers/[cohortId].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import Box from '@mui/material/Box';
import Header from '@/components/Header';
import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
import LearnersList from '@/components/LearnersList';
import React from 'react';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
Expand All @@ -14,6 +13,7 @@ import { useTheme } from '@mui/material/styles';
import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/router';
import { GetStaticPaths } from 'next';
import CohortLearnerList from '@/components/CohortLearnerList';

const TeachingCenterDetails = () => {
const [value, setValue] = React.useState(1);
Expand Down Expand Up @@ -128,7 +128,7 @@ const TeachingCenterDetails = () => {
/>
</Box>
<Box>
<LearnersList />
<CohortLearnerList/>
</Box>
</>
)}
Expand Down
6 changes: 6 additions & 0 deletions src/utils/Interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,3 +229,9 @@ export interface updateCohortMemberStatusParams {
memberStatus: string;
statusReason?: string;
}

export interface LearnerListProps {
isDropout: boolean;
enrollmentId?: string | number;
learnerName: string;
}

0 comments on commit 0f75028

Please sign in to comment.