Skip to content

Commit

Permalink
Merge pull request #142 from shreyas1434shinde/calenderView
Browse files Browse the repository at this point in the history 
Issue #PS-394 fix:modal UI fixes
  • Loading branch information
@itsvick
itsvick authored May 23, 2024
2 parents 38228ac + 81d164e commit e540080
Show file tree
Hide file tree
Showing 6 changed files with 160 additions and 124 deletions.
24 changes: 19 additions & 5 deletions src/components/AttendanceStatus.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { Box, Button, Grid, Typography } from '@mui/material';
import { CreateOutlined } from '@mui/icons-material';
import { useTranslation } from 'next-i18next';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import { shortDateFormat } from '@/utils/Helper';
import { useTheme } from '@mui/material/styles';
import { formatToShowDateMonth, shortDateFormat } from '@/utils/Helper';

import { 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;
onDateSelection: Date;
onUpdate?: () => void;
Expand All @@ -23,6 +25,7 @@ type FormattedAttendanceData = {
};

function AttendanceStatus({
date,
formattedAttendanceData,
onDateSelection,
onUpdate,
Expand Down Expand Up @@ -56,7 +59,18 @@ function AttendanceStatus({
justifyContent="space-between"
alignItems={'center'}
>
<Grid item xs={8} display={'flex'}>
<Grid item xs={8}>
<Box display={'flex'} width={'100%'}>
<Typography
marginBottom={'0px'}
ml={1}
fontSize={'14px'}
fontWeight={'500'}
color={'black'}
>
{formatToShowDateMonth(date)}
</Typography>
</Box>
<Box display={'flex'}>
{attendanceStatus !== 'notMarked' &&
attendanceStatus !== 'futureDate' && (
Expand Down
139 changes: 74 additions & 65 deletions src/components/AttendanceStatusListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Box, Typography } from '@mui/material';

import { ATTENDANCE_ENUM } from '../utils/Helper';
import { AttendanceStatusListViewProps } from '../utils/Interfaces';
import { BorderBottom } from '@mui/icons-material';
import CancelIcon from '@mui/icons-material/Cancel'; //absent
import CheckCircleIcon from '@mui/icons-material/CheckCircle'; //present
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
Expand All @@ -22,14 +23,17 @@ const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({

const boxStyling = {
display: 'flex',
height: '56px',
height: isBulkAction ? '56px' : '',
// width: '100%',
// borderBottom: `0.5px solid ${theme.palette.warning[400]}`,
padding: '8px',
alignItems: 'center',
borderRadius: isBulkAction ? '8px' : 0,
marginBottom: '12px',
// marginBottom: '12px',
backgroundColor: isBulkAction ? theme.palette.warning[800] : 'none',
// position: isBulkAction ? 'fixed' : 'none',
// width: isBulkAction ? '89%' : '100%',
borderBottom: isBulkAction ? 'none' : '1px solid #D0C5B4',
};

const handleClickAction = (
Expand All @@ -42,73 +46,78 @@ const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
}
};
return (
<Box sx={boxStyling}>
<Typography
variant="body1"
marginRight="auto"
marginY="auto"
sx={{ color: theme.palette.warning['300'], textAlign:'left'}}
>
{isBulkAction ? t('ATTENDANCE.MARK_ALL') : userData?.name}
</Typography>
<Box
display="flex"
flexDirection="column"
alignItems="center"
className="icon_holder"
p={2}
onClick={() =>
handleClickAction(
isBulkAction,
ATTENDANCE_ENUM.PRESENT,
isBulkAction ? '' : userData?.userId
)
}
>
{[userData?.attendance, bulkAttendanceStatus].includes(
ATTENDANCE_ENUM.PRESENT
) ? (
<CheckCircleIcon sx={{ color: () => theme.palette.warning[400] }} />
) : (
<CheckCircleOutlineIcon
sx={{ color: () => theme.palette.warning[400] }}
/>
)}
<Box>
<Box sx={boxStyling}>
<Typography
variant="h6"
marginTop={1}
sx={{ color: () => theme.palette.warning[400] }}
variant="body1"
marginRight="auto"
marginY="auto"
sx={{
color: theme.palette.warning['300'],
textAlign: 'left',
}}
>
{t('ATTENDANCE.PRESENT')}
{isBulkAction ? t('ATTENDANCE.MARK_ALL') : userData?.name}
</Typography>
</Box>
<Box
display="flex"
flexDirection="column"
alignItems="center"
p={2}
onClick={() =>
handleClickAction(
isBulkAction,
ATTENDANCE_ENUM.ABSENT,
isBulkAction ? '' : userData?.userId
)
}
>
{[userData?.attendance, bulkAttendanceStatus].includes(
ATTENDANCE_ENUM.ABSENT
) ? (
<CancelIcon sx={{ color: () => theme.palette.warning[400] }} />
) : (
<HighlightOffIcon />
)}
<Typography
variant="h6"
marginTop={1}
sx={{ color: () => theme.palette.warning[400] }}
<Box
display="flex"
flexDirection="column"
alignItems="center"
className="icon_holder"
p={2}
onClick={() =>
handleClickAction(
isBulkAction,
ATTENDANCE_ENUM.PRESENT,
isBulkAction ? '' : userData?.userId
)
}
>
{t('ATTENDANCE.ABSENT')}
</Typography>
{[userData?.attendance, bulkAttendanceStatus].includes(
ATTENDANCE_ENUM.PRESENT
) ? (
<CheckCircleIcon sx={{ color: () => theme.palette.warning[400] }} />
) : (
<CheckCircleOutlineIcon
sx={{ color: () => theme.palette.warning[400] }}
/>
)}
<Typography
variant="h6"
marginTop={1}
sx={{ color: () => theme.palette.warning[400] }}
>
{t('ATTENDANCE.PRESENT')}
</Typography>
</Box>
<Box
display="flex"
flexDirection="column"
alignItems="center"
p={2}
onClick={() =>
handleClickAction(
isBulkAction,
ATTENDANCE_ENUM.ABSENT,
isBulkAction ? '' : userData?.userId
)
}
>
{[userData?.attendance, bulkAttendanceStatus].includes(
ATTENDANCE_ENUM.ABSENT
) ? (
<CancelIcon sx={{ color: () => theme.palette.warning[400] }} />
) : (
<HighlightOffIcon />
)}
<Typography
variant="h6"
marginTop={1}
sx={{ color: () => theme.palette.warning[400] }}
>
{t('ATTENDANCE.ABSENT')}
</Typography>
</Box>
</Box>
</Box>
);
Expand Down
41 changes: 26 additions & 15 deletions src/components/MarkBulkAttendance.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
import { Box, Button, Fade, Modal, Typography } from '@mui/material';
import React, { useEffect } from 'react';
import Loader from './Loader';
import AttendanceStatusListView from './AttendanceStatusListView';
import { useTranslation } from 'next-i18next';
import { shortDateFormat } from '../utils/Helper';
import CloseIcon from '@mui/icons-material/Close';
import { useTheme } from '@mui/material/styles';
import Backdrop from '@mui/material/Backdrop';
import { getMyCohortMemberList } from '@/services/MyClassDetailsService';
import Snackbar, { SnackbarOrigin } from '@mui/material/Snackbar';
import {
attendanceStatusList,
bulkAttendance,
} from '@/services/AttendanceService';
import Snackbar, { SnackbarOrigin } from '@mui/material/Snackbar';

import { AttendanceStatusListProps } from '../utils/Interfaces';
import AttendanceStatusListView from './AttendanceStatusListView';
import Backdrop from '@mui/material/Backdrop';
import CloseIcon from '@mui/icons-material/Close';
import Loader from './Loader';
import { getMyCohortMemberList } from '@/services/MyClassDetailsService';
import { shortDateFormat } from '../utils/Helper';
import { useTheme } from '@mui/material/styles';
import { useTranslation } from 'next-i18next';

interface State extends SnackbarOrigin {
openModal: boolean;
Expand Down Expand Up @@ -277,6 +278,7 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
timeout: 500,
},
}}
className="modal_mark"
>
<Fade in={open}>
<Box
Expand All @@ -289,7 +291,11 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
height={'80%'}
>
<Box height={'100%'} width={'100%'}>
<Box display={'flex'} justifyContent={'space-between'}>
<Box
display={'flex'}
justifyContent={'space-between'}
sx={{ padding: '0 10px' }}
>
<Box marginBottom={'0px'}>
<Typography
variant="h2"
Expand Down Expand Up @@ -332,6 +338,7 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
marginTop: '10px',
fontSize: '12px',
color: theme.palette.warning['A200'],
padding: '0 10px',
}}
>
{t('ATTENDANCE.TOTAL_STUDENTS', {
Expand All @@ -340,10 +347,14 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
</Typography>
{cohortMemberList && cohortMemberList?.length != 0 ? (
<Box
height={'58%'}
sx={{ overflowY: 'scroll', marginTop: '10px' }}
height={'100%'}
sx={{
overflowY: 'scroll',
marginTop: '10px',
padding: '0 10px',
}}
>
<Box>
<Box className="modalBulk">
<AttendanceStatusListView
isEdit={true}
isBulkAction={true}
Expand Down Expand Up @@ -371,13 +382,13 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
</Box>
<Box
position={'absolute'}
bottom="10px"
bottom="0"
display={'flex'}
gap={'20px'}
flexDirection={'row'}
justifyContent={'space-evenly'}
marginBottom={0}
sx={{ background: '#fff', padding: '15px 0 0 0' }}
sx={{ background: '#fff', padding: '15px 0 15px 0' }}
>
<Button
variant="outlined"
Expand Down
Loading

0 comments on commit e540080

Please sign in to comment.