From 2f1b7e3484a47e632d14d8078fd8f892cc9fc89e Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Wed, 29 May 2024 18:47:31 +0530 Subject: [PATCH 1/2] Issue #PS-674 feat: Scrollable Week cale nder done --- src/components/WeekCalender.tsx | 95 ++++++++++++++++----------------- src/pages/dashboard.tsx | 11 ++-- src/styles/globals.css | 14 +++++ 3 files changed, 68 insertions(+), 52 deletions(-) diff --git a/src/components/WeekCalender.tsx b/src/components/WeekCalender.tsx index aacd7445..60aab85a 100644 --- a/src/components/WeekCalender.tsx +++ b/src/components/WeekCalender.tsx @@ -1,8 +1,6 @@ import { useState } from 'react'; import { format, - subMonths, - addMonths, startOfWeek, addDays, isSameDay, @@ -10,38 +8,57 @@ import { getWeek, addWeeks, subWeeks, + subDays, } from 'date-fns'; import { Box } from '@mui/material'; import { CircularProgressbar, buildStyles } from 'react-circular-progressbar'; import useDeterminePathColor from '../hooks/useDeterminePathColor'; +import ArrowDropDownCircleOutlinedIcon from '@mui/icons-material/ArrowDropDownCircleOutlined'; const Calendar: React.FC = ({ showDetailsHandle, data }) => { const [currentMonth, setCurrentMonth] = useState(new Date()); const [currentWeek, setCurrentWeek] = useState(getWeek(currentMonth)); const [selectedDate, setSelectedDate] = useState(new Date()); const [color, setColor] = useState(true); + const [isPrevDisabled, setIsPrevDisabled] = useState(false); + const [isNextDisabled, setIsNextDisabled] = useState(true); const determinePathColor = useDeterminePathColor(); - const changeMonthHandle = (btnType: string) => { - if (btnType === 'prev') { - setCurrentMonth(subMonths(currentMonth, 1)); - } - if (btnType === 'next') { - setCurrentMonth(addMonths(currentMonth, 1)); - } - }; + // const changeMonthHandle = (btnType: string) => { + // if (btnType === 'prev') { + // setCurrentMonth(subMonths(currentMonth, 1)); + // } + // if (btnType === 'next') { + // setCurrentMonth(addMonths(currentMonth, 1)); + // } + // }; const changeWeekHandle = (btnType: string) => { - //console.log("current week", currentWeek); + const today = new Date(); + const startDate = subDays(today, 29); + if (btnType === 'prev') { - //console.log(subWeeks(currentMonth, 1)); - setCurrentMonth(subWeeks(currentMonth, 1)); - setCurrentWeek(getWeek(subWeeks(currentMonth, 1))); - } - if (btnType === 'next') { - //console.log(addWeeks(currentMonth, 1)); - setCurrentMonth(addWeeks(currentMonth, 1)); - setCurrentWeek(getWeek(addWeeks(currentMonth, 1))); + const newDate = subWeeks(currentMonth, 1); + const endDate = subWeeks(currentMonth, 2); + if (newDate >= startDate) { + setCurrentMonth(newDate); + setCurrentWeek(getWeek(newDate)); + setIsNextDisabled(false); + } + if (endDate <= startDate) { + setIsPrevDisabled(true); + } + } else if (btnType === 'next') { + const newDate = addWeeks(currentMonth, 1); + const finishDate = addWeeks(currentMonth, 2); + if (newDate <= today) { + setCurrentMonth(newDate); + setCurrentWeek(getWeek(newDate)); + setIsPrevDisabled(false); + } + if (finishDate >= today) { + setIsNextDisabled(true); + } } }; @@ -51,19 +68,6 @@ const Calendar: React.FC = ({ showDetailsHandle, data }) => { showDetailsHandle(dayStr); }; - const renderHeader = () => { - const dateFormat = 'MMM yyyy'; - return ( -
-
-
- {format(currentMonth, dateFormat)} -
-
-
- ); - }; - const renderDays = () => { const dateFormat = 'EEEEE'; const days = []; @@ -100,7 +104,6 @@ const Calendar: React.FC = ({ showDetailsHandle, data }) => { for (let i = 0; i < 7; i++) { formattedDate = format(day, dateFormat); const cloneDay = day; - // console.log('cloneDay', cloneDay); let percentage = 0; let pathColor; @@ -185,23 +188,19 @@ const Calendar: React.FC = ({ showDetailsHandle, data }) => { } return
{rows}
; }; - const renderFooter = () => { - return ( -
-
-
changeWeekHandle('prev')}> - prev week -
-
-
{currentWeek}
-
changeWeekHandle('next')}> -
next week
-
-
- ); - }; + return (
+ {!isPrevDisabled && ( +
changeWeekHandle('prev')}> + +
+ )} + {!isNextDisabled && ( +
changeWeekHandle('next')}> + +
+ )} {renderDays()} {renderCells()}
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 55173edd..f230499f 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -318,10 +318,13 @@ const Dashboard: React.FC = () => { const dayOfWeek = currentDate.getDay(); const diffToMonday = currentDate.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1); - const startDate = new Date(currentDate.setDate(diffToMonday)); + const weekStartDate = new Date(currentDate.setDate(diffToMonday)); + const startDate = new Date( + currentDate.setDate(currentDate.getDate() - 30) + ); startDate.setHours(0, 0, 0, 0); - const endDate = new Date(startDate); - endDate.setDate(startDate.getDate() + 6); + const endDate = new Date(weekStartDate); + endDate.setDate(weekStartDate.getDate() + 6); endDate.setHours(23, 59, 59, 999); const fromDateFormatted = shortDateFormat(startDate); const toDateFormatted = shortDateFormat(endDate); @@ -574,7 +577,7 @@ const Dashboard: React.FC = () => { - + Date: Thu, 30 May 2024 13:15:04 +0530 Subject: [PATCH 2/2] Issue #PS-674 feat: code optimized --- src/components/WeekCalender.tsx | 40 ++++++++++++++------------------- 1 file changed, 17 insertions(+), 23 deletions(-) diff --git a/src/components/WeekCalender.tsx b/src/components/WeekCalender.tsx index 60aab85a..215d45ff 100644 --- a/src/components/WeekCalender.tsx +++ b/src/components/WeekCalender.tsx @@ -36,29 +36,23 @@ const Calendar: React.FC = ({ showDetailsHandle, data }) => { const changeWeekHandle = (btnType: string) => { const today = new Date(); const startDate = subDays(today, 29); - - if (btnType === 'prev') { - const newDate = subWeeks(currentMonth, 1); - const endDate = subWeeks(currentMonth, 2); - if (newDate >= startDate) { - setCurrentMonth(newDate); - setCurrentWeek(getWeek(newDate)); - setIsNextDisabled(false); - } - if (endDate <= startDate) { - setIsPrevDisabled(true); - } - } else if (btnType === 'next') { - const newDate = addWeeks(currentMonth, 1); - const finishDate = addWeeks(currentMonth, 2); - if (newDate <= today) { - setCurrentMonth(newDate); - setCurrentWeek(getWeek(newDate)); - setIsPrevDisabled(false); - } - if (finishDate >= today) { - setIsNextDisabled(true); - } + const newDate = + btnType === 'prev' + ? subWeeks(currentMonth, 1) + : addWeeks(currentMonth, 1); + const endDate = + btnType === 'prev' + ? subWeeks(currentMonth, 2) + : addWeeks(currentMonth, 2); + setCurrentMonth(newDate); + setCurrentWeek(getWeek(newDate)); + setIsNextDisabled(false); + setIsPrevDisabled(false); + if (endDate <= startDate) { + setIsPrevDisabled(true); + } + if (endDate >= today) { + setIsNextDisabled(true); } };