Skip to content

Commit

Permalink
Merge pull request #272 from suvarnakale/shiksha-2.0
Browse files Browse the repository at this point in the history 
Issue #0000 feat: custom range calender mobile touch selection feature added
  • Loading branch information
@itsvick
itsvick authored Jun 17, 2024
2 parents 8a4a2bb + 44d0880 commit 4e8796d
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 50 deletions.
44 changes: 1 addition & 43 deletions src/components/MarkAttendance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ const MarkAttendance: React.FC<MarkAttendanceProps> = ({
const { t } = useTranslation();

const [updatedStatus, setUpdatedStatus] = React.useState(currentStatus);

useEffect(() => {
if (isOpen) {
setUpdatedStatus(currentStatus);
Expand All @@ -73,7 +74,6 @@ const MarkAttendance: React.FC<MarkAttendanceProps> = ({
const { vertical, horizontal, openModal } = modal;

const submitUpdateAttendance = async () => {
console.log(updatedStatus);
try {
const learnerId = localStorage.getItem('learnerId');
const classId = localStorage.getItem('classId');
Expand All @@ -100,50 +100,17 @@ const MarkAttendance: React.FC<MarkAttendanceProps> = ({
setModal({ ...newState, openModal: true });
};

// const submitClearAttendance = () => {
// setStatus(ATTENDANCE_ENUM.NOT_MARKED);
// handleClose();
// handleMarkClearAttendanceModal();
// };

// const submitAttendance = (newState: SnackbarOrigin) => () => {
// handleSubmit(date, status);
// // setOpenMarkUpdateAttendance(!openMarkUpdateAttendance);
// setModal({ ...newState, openModal: true });
// setTimeout(() => {
// handleSnackbarClose();
// }, SNACKBAR_AUTO_HIDE_DURATION);
// };

// const submitConfirmAttendance = (newState: SnackbarOrigin) => () => {
// // setOpenMarkClearAttendance(!openMarkClearAttendance);
// handleMarkUpdateAttendanceModal();
// handleSubmit(date, status);

// setModal({ ...newState, openModal: true });
// setTimeout(() => {
// handleSnackbarClose();
// }, SNACKBAR_AUTO_HIDE_DURATION);
// };

const handleSnackbarClose = () => {
setModal({ ...modal, openModal: false });
};

// const handleClear = () => {
// if (status !== ATTENDANCE_ENUM.NOT_MARKED) {
// setStatus(ATTENDANCE_ENUM.NOT_MARKED);
// }
// };

const getButtonComponent = (
value: string,
icon1: IconType,
icon2: IconType,
text: string
) => {
// setStatus(currentStatus);

return (
<Box
display="flex"
Expand Down Expand Up @@ -251,16 +218,7 @@ const MarkAttendance: React.FC<MarkAttendanceProps> = ({
<Button
variant="contained"
onClick={() => {
// if (currentStatus === ATTENDANCE_ENUM.NOT_MARKED) {
// {
// submitAttendance({
// vertical: 'bottom',
// horizontal: 'center',
// })();
// }
// } else {
submitUpdateAttendance();
// }
}}
disabled={
updatedStatus === ATTENDANCE_ENUM.NOT_MARKED ||
Expand Down
1 change: 0 additions & 1 deletion src/components/MarkBulkAttendance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,6 @@ const MarkBulkAttendance: React.FC<MarkBulkAttendanceProps> = ({
filters,
});
const resp = response?.result?.results?.userDetails;

if (resp) {
const nameUserIdArray = resp?.map((entry: any) => ({
userId: entry.userId,
Expand Down
80 changes: 76 additions & 4 deletions src/components/MonthCalender.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
CheckCircleOutlineOutlined,
} from '@mui/icons-material';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';

import Value from 'react-calendar';
import { shortDateFormat } from '@/utils/Helper';
Expand Down Expand Up @@ -59,11 +59,78 @@ const MonthCalender: React.FC<CalendarWithAttendanceProps> = ({
[Date | null, Date | null] | null
>(null);
const determinePathColor = useDeterminePathColor();
// useEffect(() => {
// const currentDate = new Date();
// localStorage.setItem('activeStartDate', currentDate.toDateString());
// }, []);

useEffect(() => {
const currentDate = new Date();
localStorage.setItem('activeStartDate', currentDate.toDateString());
}, []);
const handleTouchStart = (event: TouchEvent) => {
if (selectionType === 'range') {
setDate(null);
const touch = event.touches[0];
const startDate = getDateFromTouch(touch);
console.log('startDate', startDate);
if (startDate) {
setSelectedDates([startDate, startDate]);
onDateChange([startDate, startDate]);
}
}
};

const handleTouchMove = (event: TouchEvent) => {
if (selectionType === 'range') {
const touch = event.touches[0];
const moveDate = getDateFromTouch(touch);
console.log('moveDate', moveDate);

if (moveDate && selectedDates) {
const [startDate] = selectedDates;
setSelectedDates([startDate, moveDate]);
onDateChange([startDate, moveDate]);
}
}
};

const handleTouchEnd = (event: TouchEvent) => {
if (selectionType === 'range') {
const touch = event.changedTouches[0];
const endDate = getDateFromTouch(touch);
console.log('endDate', endDate);
if (endDate && selectedDates) {
const [startDate] = selectedDates;
setSelectedDates([startDate, endDate]);
onDateChange([startDate, endDate]);
}
}
};
const getDateFromTouch = (touch: Touch) => {
const element = document.elementFromPoint(touch.clientX, touch.clientY);
if (element) {
const tile = element.closest('.react-calendar__tile');
if (tile) {
const abbr = tile.querySelector('abbr');
if (abbr) {
const dateString = abbr.getAttribute('aria-label');
if (dateString) {
return new Date(dateString);
}
}
}
}
return null;
};

document.addEventListener('touchstart', handleTouchStart);
document.addEventListener('touchmove', handleTouchMove);
document.addEventListener('touchend', handleTouchEnd);

return () => {
document.removeEventListener('touchstart', handleTouchStart);
document.removeEventListener('touchmove', handleTouchMove);
document.removeEventListener('touchend', handleTouchEnd);
};
}, [selectedDates, onDateChange]);

function tileContent({
date,
Expand Down Expand Up @@ -147,6 +214,8 @@ const MonthCalender: React.FC<CalendarWithAttendanceProps> = ({

if (currentDate > startDate && currentDate < endDate) {
classes.push('selected-range');
} else if (currentDate === startDate || currentDate === endDate) {
classes.push('selected-start-end');
}
}
}
Expand Down Expand Up @@ -182,6 +251,9 @@ const MonthCalender: React.FC<CalendarWithAttendanceProps> = ({
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
};
setDate(newDate);
setSelectedDates(Array.isArray(newDate) ? newDate : [newDate, newDate]);
onDateChange(newDate);

if (newDate === null) {
setDate(null);
Expand Down
5 changes: 3 additions & 2 deletions src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -719,13 +719,14 @@ main {
.selected-range {
background-color: var(--mui-palette-Skeleton-bg) !important;
}

.flex-center {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

.text4D {
color: #4d4639 !important;
}
.selected-start-end {
background-color: var(--mui-palette-primary-main) !important;
}

0 comments on commit 4e8796d

Please sign in to comment.