Merge pull request #186 from shreyas1434shinde/calenderView

Issue PS-652 fix:scrolling issue when user uses the scroll up/down button
tekdi · May 30, 2024 · ba4feac · ba4feac
2 parents 6c1a133 + 41bf0d5
commit ba4feac
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 43 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -127,19 +127,28 @@ const Header: React.FC = () => {
           height="auto"
           boxShadow="0px 1px 3px 0px #0000004D"
         >
-          <Box onClick={toggleDrawer(true)} mt={'0.5rem'} paddingLeft={'1rem'}>
-            <MenuIcon style={{ fill: theme.palette.warning['A200'] }} />
-          </Box>
-          <Box sx={{ margin: '0 auto' }}>
-            <Image
-              height={40}
-              width={40}
-              src={logoLight}
-              alt="logo"
-              onClick={() => router.push('/dashboard')}
-              style={{ cursor: 'pointer' }}
+          <Box
+            onClick={toggleDrawer(true)}
+            mt={'0.5rem'}
+            sx={{ cursor: 'pointer' }}
+            paddingLeft={'1rem'}
+          >
+            <MenuIcon
+              style={{
+                fill: theme.palette.warning['A200'],
+              }}
+              className="menuSvg"
             />
           </Box>
+
+          <Image
+            height={40}
+            width={44}
+            src={logoLight}
+            alt="logo"
+            onClick={() => router.push('/dashboard')}
+            style={{ cursor: 'pointer' }}
+          />
           <Box
             onClick={handleClick}
             sx={{ cursor: 'pointer', position: 'relative' }}
@@ -153,9 +162,13 @@ const Header: React.FC = () => {
             flexDirection={'column'}
             mt={'0.5rem'}
           >
-            <AccountCircleIcon fontSize="large" style={{ fill: theme.palette.warning['A200'] }} />
+            <AccountCircleIcon
+              fontSize="large"
+              className="accIcon"
+              style={{ fill: theme.palette.warning['A200'] }}
+            />
           </Box>
-          <div>
+          <div style={{ position: 'absolute' }}>
             <StyledMenu
               id="profile-menu"
               MenuListProps={{

diff --git a/src/components/MenuDrawer.tsx b/src/components/MenuDrawer.tsx
@@ -20,6 +20,7 @@ interface DrawerProps {
   language: string;
   setLanguage: (lang: string) => void;
 }
+
 const MenuDrawer: React.FC<DrawerProps> = ({
   toggleDrawer,
   open,
@@ -49,6 +50,12 @@ const MenuDrawer: React.FC<DrawerProps> = ({
     }
   };
 
+  const navigateToDashboard = () => {
+    router.push('/dashboard');
+  };
+
+  const isDashboard = router.pathname === '/dashboard';
+
   return (
     <Drawer
       open={isOpen}
@@ -135,7 +142,9 @@ const MenuDrawer: React.FC<DrawerProps> = ({
               width: '100%',
               display: 'flex',
               justifyContent: 'flex-start',
-              background: theme.palette.primary.main,
+              background: isDashboard
+                ? theme.palette.primary.main
+                : 'rgba(29, 27, 32, 0.12)',
               padding: '16px !important',
               marginTop: '15px',
               color: '#2E1500',
@@ -144,6 +153,7 @@ const MenuDrawer: React.FC<DrawerProps> = ({
               },
             }}
             startIcon={<DashboardOutlinedIcon />}
+            onClick={navigateToDashboard}
           >
             {t('DASHBOARD.DASHBOARD')}
           </Button>

diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
@@ -37,6 +37,7 @@ import Divider from '@mui/material/Divider';
 import Header from '../components/Header';
 import Link from 'next/link';
 import Loader from '../components/Loader';
+import MarkBulkAttendance from '@/components/MarkBulkAttendance';
 import OverviewCard from '@/components/OverviewCard';
 import WeekCalender from '@/components/WeekCalender';
 import { cohortList } from '../services/CohortServices';
@@ -45,7 +46,6 @@ import useDeterminePathColor from '../hooks/useDeterminePathColor';
 import { useRouter } from 'next/navigation';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
-import MarkBulkAttendance from '@/components/MarkBulkAttendance';
 
 interface State extends SnackbarOrigin {
   openModal: boolean;
@@ -61,7 +61,8 @@ const Dashboard: React.FC<DashboardProps> = () => {
   const [classId, setClassId] = React.useState('');
   const [showDetails, setShowDetails] = React.useState(false);
   const [handleSaveHasRun, setHandleSaveHasRun] = React.useState(false);
-  const [selectedDate, setSelectedDate] = React.useState<string>(getTodayDate());
+  const [selectedDate, setSelectedDate] =
+    React.useState<string>(getTodayDate());
   const [percentageAttendanceData, setPercentageAttendanceData] =
     React.useState(null);
   const [percentageAttendance, setPercentageAttendance] =
@@ -161,32 +162,31 @@ const Dashboard: React.FC<DashboardProps> = () => {
 
   //API for getting student list
   useEffect(() => {
-              const cohortAttendancePercent = async () => {
-                setLoading(true);
-                try {
-                const cohortAttendanceData: cohortAttendancePercentParam = {
-                  limit: 0,
-                  page: 0,
-                  filters: {
-                    scope: 'student',
-                    fromDate: fromDateFormatted,
-                    toDate: toDateFormatted,
-                    contextId: classId,
-                  },
-                  facets: ['contextId'],
-                };
-                const res = await getCohortAttendance(cohortAttendanceData);
-                const response = res?.data?.result;
-                const contextData =
-                  response?.contextId && response?.contextId[classId];
-                const presentPercentage = contextData && contextData != undefined ? (
-                  contextData?.present_percentage
-                ) : (
-                  <Typography>{t('ATTENDANCE.N/A')}</Typography>
-                );
-                setCohortPresentPercentage(presentPercentage);
-            }
-       catch (error) {
+    const cohortAttendancePercent = async () => {
+      setLoading(true);
+      try {
+        const cohortAttendanceData: cohortAttendancePercentParam = {
+          limit: 0,
+          page: 0,
+          filters: {
+            scope: 'student',
+            fromDate: fromDateFormatted,
+            toDate: toDateFormatted,
+            contextId: classId,
+          },
+          facets: ['contextId'],
+        };
+        const res = await getCohortAttendance(cohortAttendanceData);
+        const response = res?.data?.result;
+        const contextData = response?.contextId && response?.contextId[classId];
+        const presentPercentage =
+          contextData && contextData != undefined ? (
+            contextData?.present_percentage
+          ) : (
+            <Typography>{t('ATTENDANCE.N/A')}</Typography>
+          );
+        setCohortPresentPercentage(presentPercentage);
+      } catch (error) {
         console.error('Error fetching cohort list:', error);
         setLoading(false);
       } finally {
@@ -195,7 +195,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
     };
 
     if (classId?.length) {
-      cohortAttendancePercent()
+      cohortAttendancePercent();
     }
   }, [classId, selectedDate]);
 

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -14,6 +14,7 @@ body {
   margin: 0 !important;
   padding: 0 !important;
   box-sizing: border-box;
+  background-color: white;
 }
 
 .drawer-select div div {
@@ -527,3 +528,12 @@ main {
     right: 360px;
   }
 } */
+
+.menuSvg path {
+  width: 36px;
+  height: 24px;
+}
+.accIcon path {
+  width: 20;
+  height: 20px;
+}