Skip to content

Commit

Permalink
Merge pull request #199 from suvarnakale/shiksha-2.0
Browse files Browse the repository at this point in the history 
Issue #PS-628 and PS-629 feat: Mark attendance UI and API integration
  • Loading branch information
@itsvick
itsvick authored Jun 1, 2024
2 parents 65240cc + 7766e95 commit 752286f
Show file tree
Hide file tree
Showing 8 changed files with 283 additions and 137 deletions.
192 changes: 133 additions & 59 deletions src/components/AttendanceStatus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,19 @@ import { Box, Button, Grid, Typography } from '@mui/material';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import { formatToShowDateMonth, shortDateFormat } from '@/utils/Helper';

import { CreateOutlined } from '@mui/icons-material';
import {
CancelOutlined,
CheckCircleOutlineOutlined,
CreateOutlined,
} from '@mui/icons-material';
import useDeterminePathColor from '../hooks/useDeterminePathColor';
import { useTheme } from '@mui/material/styles';
import { useTranslation } from 'next-i18next';

interface AttendanceStatusProps {
date: Date;
formattedAttendanceData: FormattedAttendanceData;
formattedAttendanceData?: FormattedAttendanceData;
learnerAttendanceData?: learnerAttendanceData;
onDateSelection: Date;
onUpdate?: () => void;
}
Expand All @@ -25,9 +30,14 @@ type FormattedAttendanceData = {
[date: string]: AttendanceData;
};

type learnerAttendanceData = {
[date: string]: AttendanceData;
};

function AttendanceStatus({
date,
formattedAttendanceData,
learnerAttendanceData,
onDateSelection,
onUpdate,
}: AttendanceStatusProps) {
Expand All @@ -37,6 +47,7 @@ function AttendanceStatus({
const selectedDate = shortDateFormat(onDateSelection);
const dateString = shortDateFormat(onDateSelection);
const attendanceData = formattedAttendanceData?.[dateString];
const learnerAttendance = learnerAttendanceData?.[dateString];
const todayDate = shortDateFormat(new Date());
const currentDate = new Date();
const sevenDaysAgo = new Date();
Expand All @@ -45,6 +56,7 @@ function AttendanceStatus({
const currentAttendance =
formattedAttendanceData?.[dateString] || 'notMarked';
let attendanceStatus;
let learnerAttendanceStatus = learnerAttendance?.attendanceStatus;

if (!attendanceData) {
attendanceStatus = 'notMarked';
Expand All @@ -53,6 +65,33 @@ function AttendanceStatus({
}
}

if (learnerAttendanceData && !learnerAttendance) {
learnerAttendanceStatus = 'notMarked';
if (selectedDate > todayDate) {
learnerAttendanceStatus = 'futureDate';
}
}

let icon, message;
switch (learnerAttendanceStatus) {
case 'present':
icon = <CheckCircleOutlineOutlined />;
message = 'Present';
break;
case 'absent':
icon = <CancelOutlined />;
message = 'Absent';
break;
case 'notMarked':
message = t('DASHBOARD.NOT_MARKED');
break;
case 'futureDate':
message = t('DASHBOARD.FUTURE_DATE_CANT_MARK');
break;
default:
break;
}

const presentPercentage = currentAttendance?.present_percentage;
const pathColor = determinePathColor(presentPercentage);

Expand All @@ -76,72 +115,102 @@ function AttendanceStatus({
{formatToShowDateMonth(date)}
</Typography>
</Box>
<Box display={'flex'}>
{attendanceStatus !== 'notMarked' &&
attendanceStatus !== 'futureDate' && (
<>
<Box
width={'25px'}
height={'2rem'}
marginTop={'1rem'}
margin={'5px'}
>
<CircularProgressbar
value={presentPercentage}
styles={buildStyles({
textColor: pathColor,
pathColor: pathColor,
trailColor: '#E6E6E6',
strokeLinecap: 'round',
})}
strokeWidth={20}
/>
</Box>
<Box display={'flex'} alignItems={'center'}>
<Typography
variant="h6"
className="word-break"
color={pathColor}
>
{t('DASHBOARD.PERCENT_ATTENDANCE', {
percent_students: currentAttendance?.present_percentage,
})}
</Typography>
&nbsp;
<Typography
variant="h6"
className="word-break"
color={pathColor}
{formattedAttendanceData && (
<Box display={'flex'}>
{attendanceStatus !== 'notMarked' &&
attendanceStatus !== 'futureDate' && (
<>
<Box
width={'25px'}
height={'2rem'}
marginTop={'1rem'}
margin={'5px'}
>
{t('DASHBOARD.PRESENT_STUDENTS', {
present_students: currentAttendance?.present_students,
total_students: currentAttendance?.totalcount,
})}
</Typography>
</Box>
</>
<CircularProgressbar
value={presentPercentage}
styles={buildStyles({
textColor: pathColor,
pathColor: pathColor,
trailColor: '#E6E6E6',
strokeLinecap: 'round',
})}
strokeWidth={20}
/>
</Box>
<Box display={'flex'} alignItems={'center'}>
<Typography
variant="h6"
className="word-break"
color={pathColor}
>
{t('DASHBOARD.PERCENT_ATTENDANCE', {
percent_students:
currentAttendance?.present_percentage,
})}
</Typography>
&nbsp;
<Typography
variant="h6"
className="word-break"
color={pathColor}
>
{t('DASHBOARD.PRESENT_STUDENTS', {
present_students: currentAttendance?.present_students,
total_students: currentAttendance?.totalcount,
})}
</Typography>
</Box>
</>
)}

{attendanceStatus === 'notMarked' && (
<Typography fontSize={'0.8rem'} color={pathColor}>
{t('DASHBOARD.NOT_MARKED')}
</Typography>
)}

{attendanceStatus === 'notMarked' && (
<Typography fontSize={'0.8rem'} color={pathColor}>
{t('DASHBOARD.NOT_MARKED')}
</Typography>
)}
{attendanceStatus === 'futureDate' && (
<Typography
fontSize={'0.8rem'}
color={pathColor}
fontStyle="italic"
fontWeight={'500'}
>
{t('DASHBOARD.FUTURE_DATE_CANT_MARK')}
</Typography>
)}
</Box>
)}

{attendanceStatus === 'futureDate' && (
{learnerAttendanceStatus && (
<Grid item display={'flex'}>
{icon && (
<div
className={`${learnerAttendanceStatus?.toLowerCase()}-marker`}
>
{icon}
</div>
)}
<Typography
fontSize={'0.8rem'}
color={pathColor}
fontStyle="italic"
fontWeight={'500'}
>
{t('DASHBOARD.FUTURE_DATE_CANT_MARK')}
{message}
</Typography>
)}
</Box>
</Grid>
)}
</Grid>

{onUpdate && (
<Grid item xs={4} display={'flex'} justifyContent={'end'}>
<Grid
item
xs={4}
display={'flex'}
justifyContent={'end'}
sx={{ cursor: 'pointer' }}
>
<Button
variant="text"
endIcon={<CreateOutlined />}
Expand All @@ -152,10 +221,15 @@ function AttendanceStatus({
formatedSevenDaysAgo > selectedDate)
}
>
{attendanceStatus === 'notMarked' ||
attendanceStatus === 'futureDate'
? t('COMMON.MARK')
: t('COMMON.MODIFY')}
{learnerAttendanceStatus === 'notMarked' ||
learnerAttendanceStatus === 'futureDate' ||
learnerAttendanceStatus === 'present' ||
learnerAttendanceStatus === 'absent'
? t('COMMON.MODIFY')
: attendanceStatus === 'notMarked' ||
attendanceStatus === 'futureDate'
? t('COMMON.MARK')
: t('COMMON.MODIFY')}
</Button>
</Grid>
)}
Expand Down
Loading

0 comments on commit 752286f

Please sign in to comment.