From b0b92a46475757b9213086ffbc4bebeb096d3abd Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Mon, 10 Jun 2024 18:34:04 +0530 Subject: [PATCH 1/4] Issue #0000 feat: custom range calender mobile touch selection feature added --- src/components/MarkBulkAttendance.tsx | 1 - src/styles/globals.css | 5 ++++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/MarkBulkAttendance.tsx b/src/components/MarkBulkAttendance.tsx index faca6595..152c6a66 100644 --- a/src/components/MarkBulkAttendance.tsx +++ b/src/components/MarkBulkAttendance.tsx @@ -133,7 +133,6 @@ const MarkBulkAttendance: React.FC = ({ filters, }); const resp = response?.result?.results?.userDetails; - if (resp) { const nameUserIdArray = resp?.map((entry: any) => ({ userId: entry.userId, diff --git a/src/styles/globals.css b/src/styles/globals.css index 4ab796e5..fe2df534 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -500,7 +500,7 @@ main { .react-calendar *:after { text-decoration: none; color: var(--mui-palette-warning-300); - font-size: 16px; + font-size: 18px; font-weight: 400; } .react-calendar__navigation button { @@ -666,3 +666,6 @@ main { .text4D { color: #4d4639 !important; } +.selected-start-end { + background-color: var(--mui-palette-primary-main) !important; +} From d83a13f9b928569e70aa144798dae4655bf4ae89 Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Mon, 10 Jun 2024 18:34:59 +0530 Subject: [PATCH 2/4] Issue #000 chore: PR updated --- src/components/MonthCalender.tsx | 80 ++++++++++++++++++++++++++++++-- 1 file changed, 76 insertions(+), 4 deletions(-) diff --git a/src/components/MonthCalender.tsx b/src/components/MonthCalender.tsx index 7a852785..97dd9c8c 100644 --- a/src/components/MonthCalender.tsx +++ b/src/components/MonthCalender.tsx @@ -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'; @@ -59,11 +59,78 @@ const MonthCalender: React.FC = ({ [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, @@ -147,6 +214,8 @@ const MonthCalender: React.FC = ({ if (currentDate > startDate && currentDate < endDate) { classes.push('selected-range'); + } else if (currentDate === startDate || currentDate === endDate) { + classes.push('selected-start-end'); } } } @@ -182,6 +251,9 @@ const MonthCalender: React.FC = ({ 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); From 0290852e859e966772b5ed40aed76880e1305b8d Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Thu, 13 Jun 2024 10:28:57 +0530 Subject: [PATCH 3/4] Issue #000 bug: modal retaining value even after modify button is not clicked --- src/components/MarkAttendance.tsx | 51 ++++--------------------------- 1 file changed, 6 insertions(+), 45 deletions(-) diff --git a/src/components/MarkAttendance.tsx b/src/components/MarkAttendance.tsx index 025ad78a..c77b3650 100644 --- a/src/components/MarkAttendance.tsx +++ b/src/components/MarkAttendance.tsx @@ -50,9 +50,13 @@ const MarkAttendance: React.FC = ({ const { t } = useTranslation(); const [updatedStatus, setUpdatedStatus] = React.useState(currentStatus); + useEffect(() => { - setUpdatedStatus(currentStatus); - }, [currentStatus]); + if (isOpen) { + setUpdatedStatus(currentStatus); + } + }, [currentStatus, isOpen]); + const theme = useTheme(); const [openMarkUpdateAttendance, setOpenMarkUpdateAttendance] = React.useState(false); @@ -71,7 +75,6 @@ const MarkAttendance: React.FC = ({ const { vertical, horizontal, openModal } = modal; const submitUpdateAttendance = async () => { - console.log(updatedStatus); try { const learnerId = localStorage.getItem('learnerId'); const classId = localStorage.getItem('classId'); @@ -98,42 +101,10 @@ const MarkAttendance: React.FC = ({ 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, @@ -141,7 +112,6 @@ const MarkAttendance: React.FC = ({ text: string ) => { // setStatus(currentStatus); - return ( = ({