Merge pull request #4234 from Northeastern-Electric-Racing/#4228-highlight-cell

highlight cell if all required members are available

Author: wavehassman

src/frontend/src/pages/CalendarPage/AvailabilityScheduleView.tsx

@@ -45,6 +45,17 @@ const AvailabilityScheduleView: React.FC<AvailabilityScheduleViewProps> = ({
     }
   };
 
+  // Boolean check to see if all required users can attend at the time.
+  const allRequiredUsersAvailable = (index: number) => {
+    const currUnavailableUsers: User[] = unavailableUsers.get(index) ?? [];
+    for (const user of currUnavailableUsers) {
+      if (event && event.requiredMembers.some((m) => m.userId === user.userId)) {
+        return false; // there is a required member unavailable
+      }
+    }
+    return true;
+  };
+
   // Handle mouse leave - clears the hover state and shows selected slot's users if any
   const handleMouseLeave = () => {
     if (setCurrentHoveredSlot) {
@@ -160,10 +171,16 @@ const AvailabilityScheduleView: React.FC<AvailabilityScheduleViewProps> = ({
               {potentialDays.map((day, dayIndex) => {
                 const index = dayIndex * enumToArray(REVIEW_TIMES).length + timeIndex;
                 return (
-                  <TableCell key={index} sx={{ p: 0 }}>
+                  <TableCell
+                    key={index}
+                    sx={{
+                      p: 0
+                    }}
+                  >
                     <EventTimeSlot
                       backgroundColor={getBackgroundColor(availableUsers.get(index)?.length, totalUsers)}
                       selected={selectedTimeslot === index}
+                      allRequiredAvailable={allRequiredUsersAvailable(index)}
                       onClick={() => handleTimeslotClick(index, day, timeIndex)}
                       onMouseEnter={() => handleTimeslotHover(index, day, timeIndex)}
                     />

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

@@ -4,6 +4,7 @@ interface EventTimeSlotProps {
   backgroundColor?: string;
   onClick?: () => void;
   selected?: boolean;
+  allRequiredAvailable?: boolean;
   onMouseDown?: (e: React.MouseEvent) => void;
   onMouseEnter?: (e: React.MouseEvent) => void;
   onMouseUp?: () => void;
@@ -13,17 +14,19 @@ const EventTimeSlot: React.FC<EventTimeSlotProps> = ({
   backgroundColor,
   onClick,
   selected = false,
+  allRequiredAvailable = false,
   onMouseDown,
   onMouseEnter,
   onMouseUp
 }) => {
   const getBorderColor = () => {
     if (selected) return '#ffff8c';
+    if (allRequiredAvailable) return '#216799';
     return 'gray';
   };
 
   const getBorderWidth = () => {
-    if (selected) return '3px';
+    if (selected || allRequiredAvailable) return '3px';
     return '0.1px';
   };