From 3b0dbb3e15beb4077a62b43acd5bf30b04b64420 Mon Sep 17 00:00:00 2001 From: Rushikesh-Sonawane99 Date: Thu, 30 May 2024 19:53:06 +0530 Subject: [PATCH] Issue #PS-388 chore: Modified code to get cohortAttendancePercent for selectedDate Range and added back button on attendance overview page --- src/components/AttendanceStatus.tsx | 1 + src/components/DateRangePopup.tsx | 2 +- src/components/MarkBulkAttendance.tsx | 14 +-- src/pages/attendance-history.tsx | 15 ++- src/pages/attendance-overview.tsx | 128 ++++++++++++++++---------- src/pages/dashboard.tsx | 77 ++++++++-------- 6 files changed, 137 insertions(+), 100 deletions(-) diff --git a/src/components/AttendanceStatus.tsx b/src/components/AttendanceStatus.tsx index b1c211dc..26fcebf2 100644 --- a/src/components/AttendanceStatus.tsx +++ b/src/components/AttendanceStatus.tsx @@ -15,6 +15,7 @@ interface AttendanceStatusProps { } type AttendanceData = { + totalcount: any; present_percentage: number; present_students: number; total_students: number; diff --git a/src/components/DateRangePopup.tsx b/src/components/DateRangePopup.tsx index dee230f3..c91b1b55 100644 --- a/src/components/DateRangePopup.tsx +++ b/src/components/DateRangePopup.tsx @@ -77,7 +77,7 @@ const DateRangePopup: React.FC = ({ switch (index) { case 0: fromDate = new Date(today); - fromDate.setDate(today.getDate() - 7); + fromDate.setDate(today.getDate() - 6); break; case 1: fromDate = new Date(today); diff --git a/src/components/MarkBulkAttendance.tsx b/src/components/MarkBulkAttendance.tsx index b99f521a..1bfa0fd8 100644 --- a/src/components/MarkBulkAttendance.tsx +++ b/src/components/MarkBulkAttendance.tsx @@ -147,13 +147,13 @@ const MarkBulkAttendance: React.FC = ({ const attendance = response.find( (status) => status.userId === userId ); - if (attendance) { - userAttendanceArray.push({ - userId, - attendance: attendance.attendance, + userAttendanceArray.push({ + userId, + attendance: attendance?.attendance + ? attendance.attendance + : '', + }); }); - } - }); return userAttendanceArray; }; const userAttendanceArray = getUserAttendanceStatus( @@ -231,7 +231,7 @@ const MarkBulkAttendance: React.FC = ({ if (classId !== '') { getCohortMemberList(); } - }, [classId, selectedDate]); + }, [classId, selectedDate, showUpdateButton]); const handleSave = () => { onClose(); diff --git a/src/pages/attendance-history.tsx b/src/pages/attendance-history.tsx index daaa4ad7..9db33d30 100644 --- a/src/pages/attendance-history.tsx +++ b/src/pages/attendance-history.tsx @@ -142,7 +142,6 @@ const UserAttendanceHistory = () => { const filteredData = extractedNames ?.map((item: any) => ({ cohortId: item?.cohortData?.cohortId, - parentId: item?.cohortData?.parentId, name: item?.cohortData?.name, })) ?.filter(Boolean); @@ -219,7 +218,7 @@ const UserAttendanceHistory = () => { page, filters, }); - const resp = response?.data?.userDetails; + const resp = response?.result?.results?.userDetails; if (resp) { const nameUserIdArray = resp?.map((entry: any) => ({ @@ -253,13 +252,13 @@ const UserAttendanceHistory = () => { const attendance = response.find( (status) => status.userId === userId ); - if (attendance) { - userAttendanceArray.push({ - userId, - attendance: attendance.attendance, + userAttendanceArray.push({ + userId, + attendance: attendance?.attendance + ? attendance.attendance + : '', + }); }); - } - }); return userAttendanceArray; }; const userAttendanceArray = getUserAttendanceStatus( diff --git a/src/pages/attendance-overview.tsx b/src/pages/attendance-overview.tsx index c63907f9..6751c45e 100644 --- a/src/pages/attendance-overview.tsx +++ b/src/pages/attendance-overview.tsx @@ -16,7 +16,7 @@ import { } from '@mui/material'; import React, { useEffect, useState } from 'react'; import { debounce, getTodayDate, toPascalCase } from '@/utils/Helper'; - +import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp'; import ClearIcon from '@mui/icons-material/Clear'; import DateRangePopup from '@/components/DateRangePopup'; @@ -28,7 +28,10 @@ import SearchIcon from '@mui/icons-material/Search'; import SortingModal from '@/components/SortingModal'; import StudentsStatsList from '@/components/LearnerAttendanceStatsListView'; import UpDownButton from '@/components/UpDownButton'; -import { classesMissedAttendancePercentList, getCohortAttendance,} from '@/services/AttendanceService'; +import { + classesMissedAttendancePercentList, + getCohortAttendance, +} from '@/services/AttendanceService'; import { cohort, cohortAttendancePercentParam } from '@/utils/Interfaces'; import { cohortList } from '@/services/CohortServices'; import { getMyCohortMemberList } from '@/services/MyClassDetailsService'; @@ -59,8 +62,11 @@ const AttendanceOverview: React.FC = () => { const [selectedValue, setSelectedValue] = React.useState( t('COMMON.AS_OF_TODAY') ); - const [presentPercentage, setPresentPercentage] = React.useState(''); - const [lowAttendanceLearnerList,setLowAttendanceLearnerList] = React.useState([]); + const [presentPercentage, setPresentPercentage] = React.useState< + string | number + >(''); + const [lowAttendanceLearnerList, setLowAttendanceLearnerList] = + React.useState([]); const theme = useTheme(); const pathname = usePathname(); @@ -85,18 +91,20 @@ const AttendanceOverview: React.FC = () => { let page = 0; let filters = { userId: userId }; const resp = await cohortList({ limit, page, filters }); - const extractedNames = resp?.data?.cohortDetails; - const filteredData = extractedNames - ?.map((item: any) => ({ - cohortId: item?.cohortData?.cohortId, - parentId: item?.cohortData?.parentId, - name: item?.cohortData?.name, - })) - ?.filter(Boolean); + const response = resp?.results; + const cohortDetails = response?.cohortDetails || []; + + const filteredData = cohortDetails.map((item: any) => ({ + cohortId: item?.cohortData?.cohortId, + name: item?.cohortData?.name, + })); setCohortsData(filteredData); - setClassId(filteredData?.[0]?.cohortId); - setLoading(false); + + if (filteredData.length > 0) { + setClassId(filteredData[0].cohortId); + } } + setLoading(false); } catch (error) { console.error('Error fetching cohort list:', error); setLoading(false); @@ -124,8 +132,7 @@ const AttendanceOverview: React.FC = () => { page, filters, }); - const resp = response?.data?.userDetails; - + const resp = response?.result?.results?.userDetails; if (resp) { const nameUserIdArray = resp?.map((entry: any) => ({ userId: entry.userId, @@ -184,8 +191,8 @@ const AttendanceOverview: React.FC = () => { // Extract names of these students const namesOfLowestAttendance: any[] = studentsWithLowestAttendance.map((student) => student.name); - setLowAttendanceLearnerList(namesOfLowestAttendance) - } + setLowAttendanceLearnerList(namesOfLowestAttendance); + } } } } @@ -340,22 +347,39 @@ const AttendanceOverview: React.FC = () => { setDisplayStudentList(sortedData); }; + const handleBackEvent = () => { + window.history.back(); + }; return (
{loading && ( - - )} - - - - {t('ATTENDANCE.ATTENDANCE_OVERVIEW')} - + + )} + + + + + + {t('ATTENDANCE.ATTENDANCE_OVERVIEW')} + - + @@ -374,17 +398,19 @@ const AttendanceOverview: React.FC = () => { }} > {cohortsData?.length !== 0 ? ( - <> - {cohortsData?.map((cohort) => ( + // <> + // { + cohortsData?.map((cohort) => ( {cohort.name} - ))} - - { t('ATTENDANCE.ALL_CENTERS')} - - + )) ) : ( + // } + // + // { t('ATTENDANCE.ALL_CENTERS')} + // + // {t('COMMON.NO_DATA_FOUND')} @@ -402,11 +428,15 @@ const AttendanceOverview: React.FC = () => { /> - + @@ -418,9 +448,9 @@ const AttendanceOverview: React.FC = () => { value= { learnerData.length ? lowAttendanceLearnerList: {t('ATTENDANCE.N/A')}} /> */} + label="Low Attendance Learners" + value="Bharat Kumar, Ankita Kulkarni and 3 more" + /> @@ -499,17 +529,19 @@ const AttendanceOverview: React.FC = () => { routeName={pathname} /> - {classId !== "all"? + {classId !== 'all' ? ( : - } - + numberOfColumns={3} + firstColumnName={t('COMMON.ATTENDANCE')} + secondColumnName={t('COMMON.CLASS_MISSED')} + /> + ) : ( + + )} + {loading && ( )} diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 36bcbb70..f502312a 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -58,6 +58,7 @@ interface DashboardProps { } const Dashboard: React.FC = () => { + const { t } = useTranslation(); const [open, setOpen] = React.useState(false); const [cohortsData, setCohortsData] = React.useState>([]); const [classId, setClassId] = React.useState(''); @@ -66,18 +67,18 @@ const Dashboard: React.FC = () => { const [selectedDate, setSelectedDate] = React.useState(getTodayDate()); const [percentageAttendanceData, setPercentageAttendanceData] = - React.useState(null); + React.useState(null); const [attendanceStats, setAttendanceStats] = React.useState(null); const [loading, setLoading] = React.useState(false); const [isAuthenticated, setIsAuthenticated] = React.useState(false); const [cohortPresentPercentage, setCohortPresentPercentage] = - React.useState(''); + React.useState(t('ATTENDANCE.N/A')); const [lowAttendanceLearnerList, setLowAttendanceLearnerList] = - React.useState([]); - const [fromDateFormatted, setFromDateFormatted] = React.useState< + React.useState(t('ATTENDANCE.N/A')); + const [startDateRange, setStartDateRange] = React.useState< Date | string >(''); - const [toDateFormatted, setToDateFormatted] = React.useState( + const [endDateRange, setEndDateRange] = React.useState( '' ); const [dateRange, setDateRange] = React.useState(''); @@ -88,30 +89,27 @@ const Dashboard: React.FC = () => { }); const { vertical, horizontal, openModal } = state; - const { t } = useTranslation(); const router = useRouter(); const contextId = classId; const theme = useTheme(); const determinePathColor = useDeterminePathColor(); + useEffect(() => { + const calculateDateRange = () => { + let endRangeDate = new Date(); + endRangeDate.setHours(23, 59, 59, 999); + let startRangeDate = new Date(endRangeDate); + startRangeDate.setDate(startRangeDate.getDate() - 6); + startRangeDate.setHours(0, 0, 0, 0); + let startDay = startRangeDate.getDate(); + let endDay = endRangeDate.getDate(); + let month = endRangeDate.toLocaleString('default', { month: 'long' }); + setDateRange(`(${startDay}-${endDay} ${month}`); + setStartDateRange(shortDateFormat(startRangeDate)); + setEndDateRange(shortDateFormat(endRangeDate)); + }; - // useEffect(() => { - // let date = new Date(); - // const dayOfWeek = date.getDay(); - // const diffToMonday = - // date.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1); - // let startDate = new Date(date); - // startDate.setDate(diffToMonday); - // startDate.setHours(0, 0, 0, 0); - // const endDate = new Date(startDate); - // endDate.setDate(startDate.getDate() + 6); - // endDate.setHours(23, 59, 59, 999); - // const startDay = startDate.getDate(); - // const endDay = endDate.getDate(); - // const month = endDate.toLocaleString('default', { month: 'long' }); - // setDateRange(`(${startDay}-${endDay} ${month}`); - // setFromDateFormatted(shortDateFormat(startDate)); - // setToDateFormatted(shortDateFormat(endDate)); - // }, []); + calculateDateRange(); + }, []); useEffect(() => { if (typeof window !== 'undefined' && window.localStorage) { @@ -171,22 +169,21 @@ const Dashboard: React.FC = () => { page: 0, filters: { scope: 'student', - fromDate: fromDateFormatted, - toDate: toDateFormatted, + fromDate: startDateRange, + toDate: endDateRange, contextId: classId, }, facets: ['contextId'], }; const res = await getCohortAttendance(cohortAttendanceData); const response = res?.data?.result; - const contextData = response?.contextId && response?.contextId[classId]; - const presentPercentage = - contextData && contextData != undefined ? ( - contextData?.present_percentage - ) : ( - {t('ATTENDANCE.N/A')} - ); - setCohortPresentPercentage(presentPercentage); + console.log('Response Data:', response); + const contextData = response?.contextId?.[classId]; + if (contextData && typeof contextData.present_percentage !== 'object') { + setCohortPresentPercentage(contextData.present_percentage.toString()); + } else { + setCohortPresentPercentage(t('ATTENDANCE.N/A')); + } } catch (error) { console.error('Error fetching cohort list:', error); setLoading(false); @@ -581,13 +578,21 @@ const Dashboard: React.FC = () => {