Merge pull request #185 from suvarnakale/shiksha-2.0

Issue #PS-674 feat: Scrollable Week calender done
tekdi · May 30, 2024 · dd2c513 · dd2c513
2 parents ba4feac + ce57bf7
commit dd2c513
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 50 deletions.
diff --git a/src/components/WeekCalender.tsx b/src/components/WeekCalender.tsx
@@ -1,47 +1,58 @@
 import { useState } from 'react';
 import {
   format,
-  subMonths,
-  addMonths,
   startOfWeek,
   addDays,
   isSameDay,
   lastDayOfWeek,
   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<any> = ({ 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);
-    if (btnType === 'prev') {
-      //console.log(subWeeks(currentMonth, 1));
-      setCurrentMonth(subWeeks(currentMonth, 1));
-      setCurrentWeek(getWeek(subWeeks(currentMonth, 1)));
+    const today = new Date();
+    const startDate = subDays(today, 29);
+    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 (btnType === 'next') {
-      //console.log(addWeeks(currentMonth, 1));
-      setCurrentMonth(addWeeks(currentMonth, 1));
-      setCurrentWeek(getWeek(addWeeks(currentMonth, 1)));
+    if (endDate >= today) {
+      setIsNextDisabled(true);
     }
   };
 
@@ -51,19 +62,6 @@ const Calendar: React.FC<any> = ({ showDetailsHandle, data }) => {
     showDetailsHandle(dayStr);
   };
 
-  const renderHeader = () => {
-    const dateFormat = 'MMM yyyy';
-    return (
-      <div className="header row flex-middle">
-        <div className="col col-start"></div>
-        <div className="col col-center">
-          <span>{format(currentMonth, dateFormat)}</span>
-        </div>
-        <div className="col col-end"></div>
-      </div>
-    );
-  };
-
   const renderDays = () => {
     const dateFormat = 'EEEEE';
     const days = [];
@@ -100,7 +98,6 @@ const Calendar: React.FC<any> = ({ 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 +182,19 @@ const Calendar: React.FC<any> = ({ showDetailsHandle, data }) => {
     }
     return <div className="body">{rows}</div>;
   };
-  const renderFooter = () => {
-    return (
-      <div className="header row flex-middle">
-        <div className="col col-start">
-          <div className="icon" onClick={() => changeWeekHandle('prev')}>
-            prev week
-          </div>
-        </div>
-        <div>{currentWeek}</div>
-        <div className="col col-end" onClick={() => changeWeekHandle('next')}>
-          <div className="icon">next week</div>
-        </div>
-      </div>
-    );
-  };
+
   return (
     <div className="calendar">
+      {!isPrevDisabled && (
+        <div className="prev_btn" onClick={() => changeWeekHandle('prev')}>
+          <ArrowDropDownCircleOutlinedIcon />
+        </div>
+      )}
+      {!isNextDisabled && (
+        <div className="next_btn" onClick={() => changeWeekHandle('next')}>
+          <ArrowDropDownCircleOutlinedIcon />
+        </div>
+      )}
       {renderDays()}
       {renderCells()}
     </div>

diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
@@ -215,6 +215,20 @@ const Dashboard: React.FC<DashboardProps> = () => {
     const getAttendaceData = async () => {
       try {
         if (contextId !== '') {
+          const currentDate = new Date();
+          const dayOfWeek = currentDate.getDay();
+          const diffToMonday =
+            currentDate.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1);
+          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(weekStartDate);
+          endDate.setDate(weekStartDate.getDate() + 6);
+          endDate.setHours(23, 59, 59, 999);
+          const fromDateFormatted = shortDateFormat(startDate);
+          const toDateFormatted = shortDateFormat(endDate);
           const attendanceRequest: AttendancePercentageProps = {
             limit: 300,
             page: 0,
@@ -394,7 +408,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
                     </FormControl>
                   </Box>
                 </Box>
-                <Box sx={{ mt: 1.5 }}>
+                <Box sx={{ mt: 1.5, position: 'relative' }}>
                   <WeekCalender
                     showDetailsHandle={showDetailsHandle}
                     data={percentageAttendanceData}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -528,7 +528,20 @@ main {
     right: 360px;
   }
 } */
-
+.prev_btn {
+  position: absolute;
+  top: 53px;
+  z-index: 999;
+  left: -14px;
+  transform: rotate(90deg);
+}
+.next_btn {
+  position: absolute;
+  top: 53px;
+  right: -14px;
+  z-index: 999;
+  transform: rotate(270deg);
+}
 .menuSvg path {
   width: 36px;
   height: 24px;