diff --git a/src/pages/centers/index.tsx b/src/pages/centers/index.tsx index 0be267eb..9fb6e287 100644 --- a/src/pages/centers/index.tsx +++ b/src/pages/centers/index.tsx @@ -1,4 +1,15 @@ -import { Box, Button } from '@mui/material'; +import { + Box, + Button, + FormControl, + Grid, + InputAdornment, + MenuItem, + Select, + Tab, + Tabs, + TextField, +} from '@mui/material'; import React, { useEffect } from 'react'; import { cohort, cohortAttendancePercentParam } from '@/utils/Interfaces'; @@ -9,12 +20,16 @@ import Header from '@/components/Header'; import Image from 'next/image'; import Loader from '@/components/Loader'; import building from '../../assets/images/apartment.png'; -import { cohortList } from '@/services/CohortServices'; +import { cohortList, getCohortList } from '@/services/CohortServices'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { showToastMessage } from '@/components/Toastify'; import { useRouter } from 'next/router'; import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'next-i18next'; +import SearchIcon from '@mui/icons-material/Search'; +import ManageUser from '@/components/ManageUser'; +import { setTimeout } from 'timers'; +import SmartDisplayOutlinedIcon from '@mui/icons-material/SmartDisplayOutlined'; const TeachingCenters = () => { const [loading, setLoading] = React.useState(false); @@ -22,6 +37,19 @@ const TeachingCenters = () => { const theme = useTheme(); const router = useRouter(); const [cohortsData, setCohortsData] = React.useState>([]); + const [value, setValue] = React.useState(1); + const [blockData, setBlockData] = + React.useState< + { bockName: string; district?: string; blockId: string; state?: string }[] + >(); + const [centerData, setCenterData] = + React.useState< + { cohortName: string; centerType?: string; cohortId: string }[] + >(); + const [isTeamLeader, setIsTeamLeader] = React.useState(false); + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue); + }; // API call to get center list useEffect(() => { @@ -52,112 +80,438 @@ const TeachingCenters = () => { fetchCohortList(); }, []); + useEffect(() => { + if (typeof window !== 'undefined' && window.localStorage) { + const role = localStorage.getItem('role'); + if (role === 'Team Leader') { + setIsTeamLeader(true); + } else { + setIsTeamLeader(false); + } + } + }, []); + + useEffect(() => { + const getCohortListForTL = async () => { + try { + if (typeof window !== 'undefined' && window.localStorage) { + const userId = localStorage.getItem('userId'); + if (userId && isTeamLeader) { + const response = await getCohortList(userId, { + customField: 'true', + }); + const blockData = response.map((block: any) => { + const blockName = block.cohortName; + const blockId = block.cohortId; + const stateField = block?.customField.find( + (field: any) => field.label === 'State' + ); + const districtField = block?.customField.find( + (field: any) => field.label === 'District' + ); + + const state = stateField ? stateField.value : ''; + const district = districtField ? districtField.value : ''; + return { blockName, blockId, state, district }; + }); + console.log(blockData); + setBlockData(blockData); + + const cohortData = response.map((res: any) => { + 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; + return { cohortName, cohortId, centerType }; + }); + console.log(centerData); + setCenterData(centerData); + }); + } + if (userId && !isTeamLeader) { + const response = await getCohortList(userId); + const cohortData = response.map((block: any) => { + const cohortName = block.cohortName; + const cohortId = block.cohortId; + return { cohortName, cohortId }; + }); + console.log(cohortData); + setTimeout(() => { + setCohortsData(cohortData); + }); + } + } + } catch (error) { + showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); + } + }; + getCohortListForTL(); + }, [isTeamLeader]); + return ( <>
{loading && } - - {t('DASHBOARD.MY_TEACHING_CENTERS')} - - {/* - - - - {t('COMMON.ADD_CENTER')} - - */} - - {cohortsData?.map((cohort: any, index) => { - return ( - + {isTeamLeader ? ( + <> + {blockData?.length !== 0 && + blockData?.map((block: any) => ( { - router.push(`/centers/${cohort.cohortId}`); - localStorage.setItem('classId', cohort.cohortId); - }} - sx={{ cursor: 'pointer', marginBottom: '20px' }} + key={block.blockId} + textAlign={'left'} + fontSize={'22px'} + p={'18px 0'} + color={theme?.palette?.warning['300']} > - - {cohort?.['customFields']?.address?.value} + {block.blockName} + + {block.district}, {block.state} - - - center - + + ))} + + ) : ( + + {t('DASHBOARD.MY_TEACHING_CENTERS')} + + )} + {isTeamLeader && ( + + + `1px solid ${theme.palette.primary.main}`, - + + + + + )} + + + {value === 1 && ( + <> + + + + + + + ), }} + /> + + + + + - - {cohort?.name} - - - + + {t('COMMON.FILTERS')} + + + - - - ); - })} + + {isTeamLeader && ( + + + {/* + + {t('COMMON.ADD_CENTER')} + */} + + )} + + + + {isTeamLeader && + centerData && + centerData?.map((center: any) => { + return ( + + { + router.push(`/centers/${center.cohortId}`); + localStorage.setItem('classId', center.cohortId); + }} + sx={{ cursor: 'pointer', marginBottom: '20px' }} + > + {center?.centerType === 'regular' || + (center?.centerType === undefined && ( + <> + + {center?.centerType} + + + + center + + + + + {center?.cohortName} + + + + + + ))} + {center?.centerType === 'remote' && ( + <> + + {center?.centerType} + + + + + + + + + {center?.cohortName} + + + + + + )} + + + ); + })} + + {!isTeamLeader && + cohortsData && + cohortsData?.map((cohort: any) => { + return ( + + { + router.push(`/centers/${cohort.cohortId}`); + localStorage.setItem('classId', cohort.cohortId); + }} + sx={{ cursor: 'pointer', marginBottom: '20px' }} + > + + {/* {cohort?.['customFields']?.address?.value} */} + + + + center + + + + + {cohort?.cohortName} + + + + + + + ); + })} + + + )} + {value === 2 && } );