show more events at once, proper error handling

chpy04 · chpy04 · commit a7b25f263d6b · 2026-02-03T23:25:44.000-05:00
diff --git a/src/backend/src/services/calendar.services.ts b/src/backend/src/services/calendar.services.ts
@@ -453,7 +453,7 @@ export default class CalendarService {
           }))
         },
         initialDateScheduled,
-        status: foundEventType.requiresConfirmation ? Event_Status.UNCONFIRMED : Event_Status.CONFIRMED,
+        status: foundEventType.requiresConfirmation ? Event_Status.UNCONFIRMED : Event_Status.SCHEDULED,
         approved: hasConflict ? Conflict_Status.PENDING : Conflict_Status.NO_CONFLICT,
         approvalRequiredFromUserId: hasConflict ? conflictingEvent?.userCreated.userId : null,
         location,
@@ -523,9 +523,7 @@ export default class CalendarService {
                 projects.map((project) => project.wbsElement.name).join(', ')
               );
             } catch (err: unknown) {
-              if (err instanceof Error) {
-                throw new HttpException(500, `Failed to send slack notification: ${err.message}`);
-              }
+              console.error('Failed to send slack notification for event:', err);
             }
           }
         }
@@ -537,13 +535,17 @@ export default class CalendarService {
       for (const project of projects) {
         const projectTeams = project.teams;
         if (projectTeams.length > 0) {
-          await sendSlackEventNotifications(
-            projectTeams,
-            createdEvent,
-            submitter,
-            workPackageNames,
-            project.wbsElement.name
-          );
+          try {
+            await sendSlackEventNotifications(
+              projectTeams,
+              createdEvent,
+              submitter,
+              workPackageNames,
+              project.wbsElement.name
+            );
+          } catch (err: unknown) {
+            console.error('Failed to send slack notification for event:', err);
+          }
         }
       }
     }
diff --git a/src/frontend/src/apis/transformers/calendar.transformer.ts b/src/frontend/src/apis/transformers/calendar.transformer.ts
@@ -10,6 +10,10 @@ export const shopTransformer = (shop: Shop): Shop => {
 };
 
 export const filterEventTransformer = (event: Event): Event => {
+  // Guard against error responses being passed through transformResponse
+  if (!event || !event.scheduledTimes) {
+    return event;
+  }
   return {
     ...event,
     dateCreated: new Date(event.dateCreated),
@@ -22,6 +26,10 @@ export const filterEventTransformer = (event: Event): Event => {
 };
 
 export const eventTransformer = (event: Event): Event => {
+  // Guard against error responses being passed through transformResponse
+  if (!event || !event.scheduledTimes) {
+    return event;
+  }
   return {
     ...event,
     dateCreated: new Date(event.dateCreated),
@@ -35,6 +43,10 @@ export const eventTransformer = (event: Event): Event => {
 };
 
 export const eventWithMembersTransformer = (event: EventWithMembers): EventWithMembers => {
+  // Guard against error responses being passed through transformResponse
+  if (!event || !event.scheduledTimes) {
+    return event;
+  }
   return {
     ...event,
     dateCreated: new Date(event.dateCreated),
diff --git a/src/frontend/src/pages/CalendarPage/CalendarDayCard.tsx b/src/frontend/src/pages/CalendarPage/CalendarDayCard.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { Box, Card, CardContent, Grid, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import { Calendar, ConflictStatus, DayOfWeek, EventInstance, EventStatus, EventType } from 'shared';
 import ConstructionIcon from '@mui/icons-material/Construction';
@@ -48,6 +48,11 @@ interface CalendarDayCardProps {
   onCreateEventClick: (date: Date) => void;
 }
 
+// Constants for dynamic event display calculation
+const TITLE_HEIGHT = 28; // Height of the day number title
+const EVENT_CARD_HEIGHT = 24; // Height of each event card
+const EVENT_MARGIN = 4; // Margin between events
+
 const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
   cardDate,
   displayMonth,
@@ -78,6 +83,28 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
   const [selectedEvent, setSelectedEvent] = useState<EventInstance | null>(null);
   const toast = useToast();
 
+  // Ref and state for dynamic event count calculation
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [maxVisibleEvents, setMaxVisibleEvents] = useState(2);
+
+  // Calculate how many events can fit based on container height
+  useEffect(() => {
+    const calculateMaxEvents = () => {
+      if (containerRef.current) {
+        const containerHeight = containerRef.current.clientHeight;
+        const availableHeight = containerHeight - TITLE_HEIGHT;
+        const eventSlotHeight = EVENT_CARD_HEIGHT + EVENT_MARGIN;
+        // Reserve space for the "+N more" card if there are extra events
+        const maxEvents = Math.max(1, Math.floor(availableHeight / eventSlotHeight));
+        setMaxVisibleEvents(maxEvents);
+      }
+    };
+
+    calculateMaxEvents();
+    window.addEventListener('resize', calculateMaxEvents);
+    return () => window.removeEventListener('resize', calculateMaxEvents);
+  }, []);
+
   const { mutateAsync: deleteEvent } = useDeleteEvent(selectedEvent?.eventId ?? '');
   const { mutateAsync: deleteScheduleSlot } = useDeleteScheduleSlot(
     selectedEvent?.eventId ?? '',
@@ -169,7 +196,7 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
     return (
       <Box
         marginLeft={0.5}
-        marginBottom={0.5}
+        marginBottom={0.25}
         marginRight={0.5}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => {
@@ -194,8 +221,8 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
             backgroundColor: bgColor,
             borderRadius: 1,
             width: '100%',
-            minHeight: 30,
-            maxHeight: 30,
+            minHeight: EVENT_CARD_HEIGHT,
+            maxHeight: EVENT_CARD_HEIGHT,
             ...(isPending && {
               border: `1px dashed ${baseColor}`,
               opacity: 0.8
@@ -259,7 +286,7 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
           >
             <Typography
               marginX={0.5}
-              marginY={0.6}
+              marginY={0.3}
               lineHeight="120%"
               fontSize={14}
               fontWeight="bold"
@@ -359,7 +386,7 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
 
   const ExtraEventsCard = ({ extraEvents }: { extraEvents: EventInstance[] }) => {
     return (
-      <Box marginLeft={0.5} marginRight={0.5} marginBottom={0.2} sx={{ position: 'relative', zIndex: 2 }}>
+      <Box marginLeft={0.5} marginRight={0.5} marginBottom={0.25} sx={{ position: 'relative', zIndex: 2 }}>
         <Tooltip
           placement="right"
           arrow
@@ -406,8 +433,8 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
               backgroundColor: theme.palette.grey[800],
               borderRadius: 1,
               width: '100%',
-              minHeight: 30,
-              maxHeight: 30,
+              minHeight: EVENT_CARD_HEIGHT,
+              maxHeight: EVENT_CARD_HEIGHT,
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center'
@@ -441,6 +468,7 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
       )}
 
       <Card
+        ref={containerRef}
         onMouseEnter={() => isClickable && setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         sx={{
@@ -470,19 +498,22 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
 
         <CardContent sx={{ padding: 0 }}>
           <DayCardTitle />
-          {events.length === 1 ? (
-            <EventCard event={events[0]} />
-          ) : events.length === 2 ? (
-            <>
-              <EventCard event={events[0]} />
-              <EventCard event={events[1]} />
-            </>
-          ) : events.length >= 3 ? (
+          {events.length > 0 && (
             <>
-              <EventCard event={events[0]} />
-              <ExtraEventsCard extraEvents={events.slice(1)} />
+              {events.length <= maxVisibleEvents ? (
+                // All events fit - show them all
+                events.map((event) => <EventCard key={event.eventId} event={event} />)
+              ) : (
+                // Too many events - show as many as possible with "+N more"
+                <>
+                  {events.slice(0, maxVisibleEvents - 1).map((event) => (
+                    <EventCard key={event.eventId} event={event} />
+                  ))}
+                  <ExtraEventsCard extraEvents={events.slice(maxVisibleEvents - 1)} />
+                </>
+              )}
             </>
-          ) : null}
+          )}
         </CardContent>
       </Card>
 
diff --git a/src/frontend/src/pages/CalendarPage/EventClickPopup.tsx b/src/frontend/src/pages/CalendarPage/EventClickPopup.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Alert, Box, Button, IconButton, Link, Popover, Stack, Typography, useTheme } from '@mui/material';
-import { Calendar, DayOfWeek, EventInstance, EventStatus, EventType, isAdmin, isHead } from 'shared';
+import { Calendar, DayOfWeek, EventInstance, EventStatus, EventType, isAdmin, isHead, wbsPipe } from 'shared';
 import { useCurrentUser } from '../../hooks/users.hooks';
 import { Link as RouterLink } from 'react-router-dom';
 import { routes } from '../../utils/routes';
@@ -121,8 +121,6 @@ export const EventClickContent: React.FC<EventClickContentProps> = ({
   const teamsText = event.teams.length > 0 ? event.teams.map((t) => t.teamName).join(', ') : '';
   const machineryText = event.machinery.length > 0 ? event.machinery.map((m) => m.name || 'Machinery').join(', ') : '';
   const shopsText = event.shops.length > 0 ? event.shops.map((s) => s.name).join(', ') : '';
-  const workPackagesText =
-    event.workPackages.length > 0 ? event.workPackages.map((wp) => wp.wbsElement?.name || 'Work package').join(', ') : '';
 
   const descriptionText = (event.description ?? '').trim();
   const locationText = (event.location ?? '').trim();
@@ -331,11 +329,26 @@ export const EventClickContent: React.FC<EventClickContentProps> = ({
         )}
 
         {/* Work packages */}
-        {hasValue(workPackagesText) && (
+        {event.workPackages.length > 0 && (
           <Stack direction="row" spacing={1.25} alignItems="flex-start">
             <BusinessCenterIcon fontSize="small" sx={{ mt: 0.3 }} />
             <Typography variant="body2" sx={{ flex: 1 }}>
-              <b>Work packages:</b> {workPackagesText}
+              <b>Work packages:</b>{' '}
+              {event.workPackages.map((wp, index) => {
+                const wbsNum = {
+                  carNumber: wp.wbsElement.carNumber,
+                  projectNumber: wp.wbsElement.projectNumber,
+                  workPackageNumber: wp.wbsElement.workPackageNumber
+                };
+                return (
+                  <span key={wp.workPackageId}>
+                    {index > 0 && ', '}
+                    <Link component={RouterLink} to={`${routes.PROJECTS}/${wbsPipe(wbsNum)}`} onClick={stopClick}>
+                      {wp.wbsElement?.name || 'Work package'}
+                    </Link>
+                  </span>
+                );
+              })}
             </Typography>
           </Stack>
         )}
