Skip to content

Commit

Permalink
Merge pull request #271 from Rushikesh-Sonawane99/shiksha-2.0
Browse files Browse the repository at this point in the history 
Issue #PS:281 chore: Modified attendance list  services and api calls to get data in ascending order and Modified code to display last 7 days attendance data on attendance overview page
  • Loading branch information
@itsvick
itsvick authored Jun 10, 2024
2 parents 0b85160 + bbb92d9 commit 4d56d7c
Show file tree
Hide file tree
Showing 8 changed files with 71 additions and 39 deletions.
3 changes: 3 additions & 0 deletions src/assets/images/checkMark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/components/AttendanceStatus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import { formatToShowDateMonth, shortDateFormat } from '@/utils/Helper';

import { modifyAttendanceLimit } from '../../app.config';
import useAttendanceRangeColor from '../hooks/useAttendanceRangeColor';
import useDeterminePathColor from '../hooks/useDeterminePathColor';
import { useTranslation } from 'next-i18next';

interface AttendanceStatusProps {
Expand Down Expand Up @@ -45,7 +45,7 @@ function AttendanceStatus({
onUpdate,
}: AttendanceStatusProps) {
const { t } = useTranslation();
const determinePathColor = useAttendanceRangeColor();
const determinePathColor = useDeterminePathColor();
const selectedDate = shortDateFormat(onDateSelection);
const dateString = shortDateFormat(onDateSelection);
const attendanceData = formattedAttendanceData?.[dateString];
Expand Down
27 changes: 18 additions & 9 deletions src/components/DateRangePopup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,15 @@ import {
import React, { useState } from 'react';
import { getDayAndMonthName, getTodayDate } from '@/utils/Helper';

import Check from '@mui/icons-material/Check';
import checkMark from '../assets/images/checkMark.svg';
import CloseIcon from '@mui/icons-material/Close';
import { Height } from '@mui/icons-material';
import ListItemIcon from '@mui/material/ListItemIcon';
import MonthCalender from './MonthCalender';
import WestIcon from '@mui/icons-material/West';
import { useTheme } from '@mui/material/styles';
import { useTranslation } from 'next-i18next';
import Image from 'next/image';

const modalStyle = {
position: 'absolute',
Expand Down Expand Up @@ -64,20 +65,20 @@ interface CustomSelectModalProps {
selectedValue: string;
setSelectedValue: (value: string) => void;
onDateRangeSelected: any;
currentDayMonth?: string;
dateRange?: string | Date| undefined ;
}

const DateRangePopup: React.FC<CustomSelectModalProps> = ({
menuItems,
selectedValue,
setSelectedValue,
onDateRangeSelected,
currentDayMonth,
dateRange,
}) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [isCalendarModalOpen, setIsCalenderModalOpen] = useState(false);
const [dateRangeArray, setDateRangeArray] = useState<any[]>([]);
const [selectedIndex, setSelectedIndex] = useState<number | null>(1);
const [selectedIndex, setSelectedIndex] = useState<number | null>(0);
const [displayCalendarFromDate, setDisplayCalendarFromDate] = React.useState(
getDayAndMonthName(getTodayDate())
);
Expand Down Expand Up @@ -210,12 +211,14 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
inputProps={{ readOnly: true }}
>
<MenuItem value="" disabled>
{t('DASHBOARD.AS_OF_TODAY_DATE', { day_date: currentDayMonth })}
{t('DASHBOARD.LAST_SEVEN_DAYS_RANGE', {
date_range: dateRange})}
</MenuItem>
<MenuItem value={selectedValue}>
{selectedValue
? selectedValue
: t('DASHBOARD.AS_OF_TODAY_DATE', { day_date: currentDayMonth })}
: t('DASHBOARD.LAST_SEVEN_DAYS_RANGE', {
date_range: dateRange})}
</MenuItem>
</Select>
</FormControl>
Expand Down Expand Up @@ -257,7 +260,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
alignItems: 'center',
paddingLeft: '32px',
backgroundColor: 'transparent',
color: index === 4 ? '#4D4639' : 'inherit',
color: index === 4 ? theme.palette.secondary.main : '#4D4639',
'&:hover': {
backgroundColor: 'transparent',
},
Expand All @@ -268,11 +271,17 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
sx={{
position: 'absolute',
left: '8px',
minWidth: 'auto',
minWidth: 'auto'
}}
className="text4D"
>
<Check className="text4D" fontSize="small" />
<Image
height={10}
width={12}
src={checkMark}
alt="logo"
style={{ cursor: 'pointer' }}
/>
</ListItemIcon>
)}
{item}
Expand Down
24 changes: 16 additions & 8 deletions src/pages/attendance-overview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
const router = useRouter();
const { t } = useTranslation();
const { push } = useRouter();
const today = new Date();
const [classId, setClassId] = React.useState('');
const [cohortsData, setCohortsData] = React.useState<Array<cohort>>([]);
const [manipulatedCohortData, setManipulatedCohortData] =
Expand All @@ -70,7 +71,9 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
const [searchWord, setSearchWord] = React.useState('');
const [modalOpen, setModalOpen] = React.useState(false);
const [learnerData, setLearnerData] = React.useState<Array<any>>([]);
const [isFromDate, setIsFromDate] = useState(getTodayDate());
const [isFromDate, setIsFromDate] = useState(formatSelectedDate(
new Date(today.getTime() - 6 * 24 * 60 * 60 * 1000)
));
const [isToDate, setIsToDate] = useState(getTodayDate());
const [displayStudentList, setDisplayStudentList] = React.useState<
Array<any>
Expand Down Expand Up @@ -125,7 +128,7 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {

useEffect(() => {
const getAttendanceMarkedDays = async () => {
const today = new Date();
// const today = new Date();
const todayFormattedDate = formatSelectedDate(new Date());
const lastSeventhDayDate = new Date(
today.getTime() - 6 * 24 * 60 * 60 * 1000
Expand Down Expand Up @@ -156,6 +159,7 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
contextId: classId,
},
facets: ['attendanceDate'],
sort: ['present_percentage', 'asc']
};
const res = await getCohortAttendance(cohortAttendanceData);
const response = res?.data?.result?.attendanceDate;
Expand All @@ -168,7 +172,9 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
if (classId) {
getAttendanceMarkedDays();
}
}, [classId, selectedValue === t('COMMON.LAST_SEVEN_DAYS')]);
}, [classId, selectedValue === t('DASHBOARD.LAST_SEVEN_DAYS_RANGE', {
date_range: dateRange,
})]);

// API call to get center list
useEffect(() => {
Expand Down Expand Up @@ -279,7 +285,7 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
const response = await classesMissedAttendancePercentList({
filters,
facets: ['userId'],
sort: ['absent_percentage', 'asc'],
sort: ['present_percentage', 'asc'],
});
let resp = response?.data?.result?.userId;
if (resp) {
Expand Down Expand Up @@ -338,6 +344,7 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
contextId: classId,
},
facets: ['contextId'],
sort: ['present_percentage', 'asc']
};
const res = await getCohortAttendance(cohortAttendanceData);
const response = res?.data?.result;
Expand Down Expand Up @@ -672,12 +679,12 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
selectedValue={selectedValue}
setSelectedValue={setSelectedValue}
onDateRangeSelected={handleDateRangeSelected}
currentDayMonth={currentDayMonth}
dateRange={dateRange}
/>
{selectedValue ==
{(selectedValue ===
t('DASHBOARD.LAST_SEVEN_DAYS_RANGE', {
date_range: dateRange,
}) ? (
}) || selectedValue === "") ? (
<Typography
color={theme.palette.warning['400']}
fontSize={'0.75rem'}
Expand Down Expand Up @@ -724,7 +731,8 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
: t('ATTENDANCE.N/A')
}
valuePartTwo={
Array.isArray(lowAttendanceLearnerList) && lowAttendanceLearnerList.length > 2
Array.isArray(lowAttendanceLearnerList) &&
lowAttendanceLearnerList.length > 2
? `${t('COMMON.AND')} ${lowAttendanceLearnerList.length - 2} ${t('COMMON.MORE')}`
: null
}
Expand Down
1 change: 1 addition & 0 deletions src/pages/dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
contextId: classId,
},
facets: ['contextId'],
sort: ['present_percentage', 'asc']
};
const res = await getCohortAttendance(cohortAttendanceData);
const response = res?.data?.result;
Expand Down
43 changes: 25 additions & 18 deletions src/pages/learner/[userId].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ interface QuestionValues {
const LearnerProfile: React.FC = () => {
const { t } = useTranslation();
const theme = useTheme<any>();

const today = new Date();
const router = useRouter();
const { userId }: any = router.query;

Expand Down Expand Up @@ -111,19 +111,19 @@ const LearnerProfile: React.FC = () => {
present_percentage: any;
// Add other properties as needed
}
const [isFromDate, setIsFromDate] = useState(getTodayDate());
const [isFromDate, setIsFromDate] = useState(formatSelectedDate(
new Date(today.getTime() - 6 * 24 * 60 * 60 * 1000)
));
const [isToDate, setIsToDate] = useState(getTodayDate());
const [submittedOn, setSubmitedOn] = useState();
const [overallAttendance, setOverallAttendance] =
useState<OverallAttendance>();
const [selectedValue, setSelectedValue] = React.useState<string>(
t('COMMON.AS_OF_TODAY')
);
const [currentDayMonth, setCurrentDayMonth] = React.useState<string>('');
const [selectedValue, setSelectedValue] = React.useState<any>('');
const [numberOfDaysAttendanceMarked, setNumberOfDaysAttendanceMarked] =
useState(0);
const [dateRange, setDateRange] = React.useState<Date | string>('');
const [classId, setClassId] = React.useState('');
const [currentDayMonth, setCurrentDayMonth] = React.useState<string>('');
const open = Boolean(anchorEl);
const [totalMaxScore, setTotalMaxScore] = useState('');
const [totalScore, setTotalScore] = useState('');
Expand Down Expand Up @@ -192,7 +192,7 @@ const LearnerProfile: React.FC = () => {
const handleDateRangeSelected = ({ fromDate, toDate }: any) => {
setIsFromDate(fromDate);
setIsToDate(toDate);
getAttendaceData(fromDate, toDate);
getAttendanceData(fromDate, toDate);
// Handle the date range values as needed
};
const menuItems = [
Expand All @@ -207,7 +207,11 @@ const LearnerProfile: React.FC = () => {
t('COMMON.CUSTOM_RANGE'),
];

const getAttendaceData = async (fromDates: any, toDates: any) => {
useEffect(() => {
setSelectedValue(currentDayMonth);
}, []);

const getAttendanceData = async (fromDates: any, toDates: any) => {
let fromDate = fromDates;
let toDate = toDates;
let filters = {
Expand Down Expand Up @@ -463,11 +467,11 @@ const LearnerProfile: React.FC = () => {
const class_Id = localStorage.getItem('classId') || '';
setClassId(class_Id);

const today = new Date();
// const today = new Date();
const formatDate = (date: Date) => date.toISOString().split('T')[0];
let toDay = formatDate(today);

getAttendaceData(toDay, toDay);
getAttendanceData(isFromDate, toDay);
fetchUserDetails();
// testReportDetails();
getDoIdForAssesmentReport(test, subject);
Expand Down Expand Up @@ -659,7 +663,7 @@ const LearnerProfile: React.FC = () => {
//----- code for Attendance Marked out of 7 days ------------
useEffect(() => {
const getAttendanceMarkedDays = async () => {
const today = new Date();
// const today = new Date();
const todayFormattedDate = formatSelectedDate(new Date());
const lastSeventhDayDate = new Date(
today.getTime() - 6 * 24 * 60 * 60 * 1000
Expand Down Expand Up @@ -691,6 +695,7 @@ const LearnerProfile: React.FC = () => {
contextId: classId,
},
facets: ['attendanceDate'],
sort: ['present_percentage', 'asc']
};
const res = await getCohortAttendance(cohortAttendanceData);
const response = res?.data?.result?.attendanceDate;
Expand All @@ -703,7 +708,9 @@ const LearnerProfile: React.FC = () => {
if (classId) {
getAttendanceMarkedDays();
}
}, [classId, selectedValue === t('COMMON.LAST_SEVEN_DAYS')]);
}, [classId, selectedValue === t('DASHBOARD.LAST_SEVEN_DAYS_RANGE', {
date_range: dateRange,
})]);

//-------------validation for edit fields ---------------------------

Expand Down Expand Up @@ -893,7 +900,7 @@ const LearnerProfile: React.FC = () => {
selectedValue={selectedValue}
setSelectedValue={setSelectedValue}
onDateRangeSelected={handleDateRangeSelected}
currentDayMonth={currentDayMonth}
dateRange={dateRange}
/>
</Box>
</Box>
Expand All @@ -915,10 +922,10 @@ const LearnerProfile: React.FC = () => {
>
Attendance Marked : 3 out of last 7 days
</Typography> */}
{selectedValue ==
t('DASHBOARD.LAST_SEVEN_DAYS_RANGE', {
date_range: dateRange,
}) ? (
{(selectedValue ===
t('DASHBOARD.LAST_SEVEN_DAYS_RANGE', {
date_range: dateRange,
}) || selectedValue === "")? (
<Typography
color={theme.palette.warning['400']}
fontSize={'0.75rem'}
Expand All @@ -942,7 +949,7 @@ const LearnerProfile: React.FC = () => {
<Grid container spacing={2}>
<Grid item xs={6}>
<StudentStatsCard
label1={t('COMMON.ATTENDANCE') + '%'}
label1={t('COMMON.ATTENDANCE') + ' (%)'}
value1={`${Math.round(overallAttendance?.present_percentage || 0)}%`}
label2={false}
value2=""
Expand Down
7 changes: 5 additions & 2 deletions src/services/AttendanceService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export const getLearnerAttendanceStatus = async ({
return postAttendanceList({
limit,
page,
filters: { contextId, scope, toDate, fromDate, userId },
filters: { contextId, scope, toDate, fromDate, userId }
});
};

Expand All @@ -106,12 +106,14 @@ export const getCohortAttendance = async ({
page,
filters: { scope, fromDate, toDate, contextId },
facets,
sort
}: cohortAttendancePercentParam): Promise<any> => {
return postAttendanceList({
limit,
page,
filters: { scope, fromDate, toDate, contextId },
facets,
sort
});
};

Expand All @@ -132,10 +134,11 @@ export const getAllCenterAttendance = async ({
export const classesMissedAttendancePercentList = async ({
filters,
facets,
sort
}: any): Promise<any> => {
const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/attendance/list`;
try {
const response = await post(apiUrl, { filters, facets });
const response = await post(apiUrl, { filters, facets, sort });
return response?.data;
} catch (error) {
console.error('Error in fetching attendance list', error);
Expand Down
1 change: 1 addition & 0 deletions src/utils/Interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,7 @@ export interface cohortAttendancePercentParam {
contextId: string;
};
facets: Array<string>;
sort?: Array<string>;
}
export interface gerDoIdServiceParam {
filters: {
Expand Down

0 comments on commit 4d56d7c

Please sign in to comment.