Merge pull request #4223 from Northeastern-Electric-Racing/4204-Responsive-Availability-Filler-Outer

#4204 responsive availability filler outer

Author: wavehassman

src/frontend/src/pages/CalendarPage/Components/EventAvailabilityPage.tsx

@@ -5,7 +5,7 @@
 
 import React, { useState, useEffect, useMemo } from 'react';
 import { useQuery as useQueryParam } from '../../../hooks/utils.hooks';
-import { Box, Grid, Typography, useTheme } from '@mui/material';
+import { Box, Grid, Typography, useMediaQuery, useTheme } from '@mui/material';
 import {
   Availability,
   getMostRecentAvailabilities,
@@ -157,13 +157,15 @@ export const EventAvailabilityPage: React.FC = () => {
     }
   }, [userScheduleSettings, displayDate]);
 
+  const isMobile = useMediaQuery('(max-width:480px)');
+
   // Auto-open modal for users who haven't confirmed (runs once when event loads)
   useEffect(() => {
-    if (!hasAutoOpened && event && !hasConfirmed) {
+    if (!hasAutoOpened && event && !hasConfirmed && !isMobile) {
       setEditAvailabilityOpen(true);
       setHasAutoOpened(true);
     }
-  }, [event, hasAutoOpened, hasConfirmed]);
+  }, [event, hasAutoOpened, hasConfirmed, isMobile]);
 
   if (eventLoading || !event) return <LoadingIndicator />;
   if (eventError) return <ErrorPage error={eventErrorMsg} message={eventErrorMsg?.message} />;
@@ -225,7 +227,24 @@ export const EventAvailabilityPage: React.FC = () => {
     return `${hour}:00 AM`;
   };
 
-  // RENDER
+  // MOBILE EDIT OPEN RENDER
+  if (isMobile && editAvailabilityOpen) {
+    return (
+      <AvailabilityEditModal
+        open={editAvailabilityOpen}
+        onHide={() => setEditAvailabilityOpen(false)}
+        header={editModalTitle}
+        confirmedAvailabilities={confirmedAvailabilities}
+        setConfirmedAvailabilities={setConfirmedAvailabilities}
+        totalAvailabilities={deeplyCopy(userScheduleSettings.availabilities, availabilityTransformer) as Availability[]}
+        initialDate={displayDate}
+        onSubmit={handleConfirm}
+        canChangeDateRange={false}
+      />
+    );
+  }
+
+  // RENDER NORMALLY
   return (
     <PageLayout
       title={workPackageNames}
@@ -356,15 +375,13 @@ export const EventAvailabilityPage: React.FC = () => {
           )}
         </Box>
       </Box>
-
       <SingleAvailabilityModal
         open={viewAvailabilityOpen}
         onHide={() => setViewAvailabilityOpen(false)}
         header="My Availability"
         availabilites={userScheduleSettings.availabilities}
         initialDate={displayDate}
       />
-
       <AvailabilityEditModal
         open={editAvailabilityOpen}
         onHide={() => setEditAvailabilityOpen(false)}
@@ -376,7 +393,6 @@ export const EventAvailabilityPage: React.FC = () => {
         onSubmit={handleConfirm}
         canChangeDateRange={false}
       />
-
       {selectedSlot && (
         <ScheduleEventModal
           open={scheduleModalOpen}

src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/AvailabilityEditModal.tsx

@@ -1,6 +1,10 @@
 import { Availability } from 'shared';
 import NERModal from '../../../../components/NERModal';
 import EditAvailability from './EditAvailability';
+import { Box, useMediaQuery } from '@mui/system';
+import PageLayout from '../../../../components/PageLayout';
+import NERFailButton from '../../../../components/NERFailButton';
+import NERSuccessButton from '../../../../components/NERSuccessButton';
 
 interface DRCEditModalProps {
   open: boolean;
@@ -30,6 +34,41 @@ const AvailabilityEditModal: React.FC<DRCEditModalProps> = ({
     onHide();
   };
 
+  const isMobile = useMediaQuery('(max-width:480px)');
+
+  if (isMobile && open) {
+    return (
+      <PageLayout title={header}>
+        <EditAvailability
+          editedAvailabilities={confirmedAvailabilities}
+          setEditedAvailabilities={setConfirmedAvailabilities}
+          totalAvailabilities={totalAvailabilities}
+          canChangeDateRange={canChangeDateRange}
+          initialDate={initialDate}
+        />
+
+        <Box
+          sx={{
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            p: 2,
+            display: 'flex',
+            gap: 2,
+            backgroundColor: 'background.paper'
+          }}
+        >
+          <NERFailButton sx={{ flex: 1 }} onClick={onCancel}>
+            CANCEL
+          </NERFailButton>
+          <NERSuccessButton sx={{ flex: 1 }} onClick={onSubmit}>
+            SAVE
+          </NERSuccessButton>
+        </Box>
+      </PageLayout>
+    );
+  }
   return (
     <NERModal
       open={open}
@@ -49,5 +88,4 @@ const AvailabilityEditModal: React.FC<DRCEditModalProps> = ({
     </NERModal>
   );
 };
-
 export default AvailabilityEditModal;

src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/EditAvailability.tsx

@@ -1,4 +1,14 @@
-import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+  useMediaQuery
+} from '@mui/material';
 import { useEffect, useState } from 'react';
 import { HeatmapColors, enumToArray, REVIEW_TIMES } from '../../../../utils/design-review.utils';
 import { addDaysToDate, Availability, getDayOfWeek, getMostRecentAvailabilities } from 'shared';
@@ -116,6 +126,8 @@ const EditAvailability: React.FC<EditAvailabilityProps> = ({
     bgcolor: 'background.paper'
   };
 
+  const isMobile = useMediaQuery('(max-width:480px)');
+
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
       <Box display="flex" justifyContent="space-between" mb={1}>
@@ -128,8 +140,10 @@ const EditAvailability: React.FC<EditAvailabilityProps> = ({
       <TableContainer
         sx={{
           overflowX: 'auto',
-          overflowY: 'hidden',
+          overflowY: 'auto',
           maxWidth: '100%',
+          maxHeight: '100%',
+          scrollSnapType: 'x mandatory',
           flex: 1
         }}
       >
@@ -158,13 +172,15 @@ const EditAvailability: React.FC<EditAvailabilityProps> = ({
         >
           <TableHead>
             <TableRow>
-              <TableCell sx={stickyLeft}></TableCell>
+              <TableCell sx={{ ...stickyLeft, scrollSnapAlign: 'start' }}></TableCell>
               {currentlyDisplayedAvailabilities.map((availability, idx) => (
-                <TableCell key={idx}>
+                <TableCell key={idx} sx={{ scrollSnapAlign: 'start' }}>
                   <Typography variant="body1" align="center" fontWeight="bold" sx={{ fontSize: 15 }}>
-                    {getDayOfWeek(availability.dateSet)}
+                    {!isMobile && getDayOfWeek(availability.dateSet)}
+                    {isMobile && getDayOfWeek(availability.dateSet).slice(0, 3)}
                     <br />
-                    {datePipe(availability.dateSet)}
+                    {!isMobile && datePipe(availability.dateSet)}
+                    {isMobile && datePipe(availability.dateSet, false)}
                   </Typography>
                 </TableCell>
               ))}
@@ -173,15 +189,15 @@ const EditAvailability: React.FC<EditAvailabilityProps> = ({
           <TableBody>
             {enumToArray(REVIEW_TIMES).map((time, timeIndex) => (
               <TableRow key={time}>
-                <TableCell sx={{ ...stickyLeft, zIndex: 1 }}>
+                <TableCell sx={{ ...stickyLeft, zIndex: 1, scrollSnapAlign: 'start' }}>
                   <Typography variant="body1" align="center" sx={{ fontSize: 15 }}>
                     {time}
                   </Typography>
                 </TableCell>
                 {currentlyDisplayedAvailabilities.map((availability, dayIndex) => {
                   const isAvailable = availability.availability.includes(timeIndex);
                   return (
-                    <TableCell key={dayIndex} sx={{ p: 0 }}>
+                    <TableCell key={dayIndex} sx={{ p: 0, scrollSnapAlign: 'start' }}>
                       <EventTimeSlot
                         backgroundColor={isAvailable ? HeatmapColors[3] : HeatmapColors[0]}
                         selected={false}
@@ -206,5 +222,4 @@ const EditAvailability: React.FC<EditAvailabilityProps> = ({
     </Box>
   );
 };
-
 export default EditAvailability;