Design Review Workflow Fixes

Author: chpy04

src/backend/src/controllers/calendar.controllers.ts

@@ -484,6 +484,25 @@ export default class CalendarController {
     }
   }
 
+  // Schedule an event by adding a schedule slot and changing status to SCHEDULED
+  static async scheduleEvent(req: Request, res: Response, next: NextFunction) {
+    try {
+      const { eventId } = req.params as Record<string, string>;
+      const { startTime, endTime } = req.body;
+
+      const updatedEvent = await CalendarService.scheduleEvent(
+        req.currentUser,
+        eventId,
+        new Date(startTime),
+        new Date(endTime),
+        req.organization
+      );
+      res.status(200).json(updatedEvent);
+    } catch (error: unknown) {
+      next(error);
+    }
+  }
+
   //overall filtering for events
   static async getFilteredEvents(req: Request, res: Response, next: NextFunction) {
     try {

src/backend/src/routes/calendar.routes.ts

@@ -197,6 +197,14 @@ calendarRouter.post(
   CalendarController.setStatus
 );
 
+calendarRouter.post(
+  '/event/:eventId/schedule',
+  isDate(body('startTime')),
+  isDate(body('endTime')),
+  validateInputs,
+  CalendarController.scheduleEvent
+);
+
 calendarRouter.post('/event/:eventId/delete', CalendarController.deleteEvent);
 
 calendarRouter.get('/event/:eventId/conflict', CalendarController.getConflictingEvent);

src/backend/src/services/calendar.services.ts

@@ -766,15 +766,6 @@ export default class CalendarService {
 
     let newStatus = status;
 
-    // If all required members are confirmed, set the status to SCHEDULED
-    const allRequiredMembersConfirmed = updatedRequiredMembers.every((member) =>
-      foundEvent.confirmedMembers.map((user: { userId: string }) => user.userId).includes(member.userId)
-    );
-
-    if (status === Event_Status.CONFIRMED && allRequiredMembersConfirmed) {
-      newStatus = Event_Status.SCHEDULED;
-    }
-
     // Update the event with new data (excluding schedule slots)
     const updatedEvent = await prisma.event.update({
       where: { eventId },
@@ -1407,6 +1398,95 @@ export default class CalendarService {
     return eventTransformer(event);
   }
 
+  /**
+   * Schedules an event by adding a schedule slot and changing the status to SCHEDULED.
+   * Only the event creator can schedule the event.
+   *
+   * @param submitter The user submitting the request.
+   * @param eventId The id of the event to schedule.
+   * @param startTime The start time of the scheduled slot.
+   * @param endTime The end time of the scheduled slot.
+   * @param organization The organization context.
+   *
+   * @returns The updated event with the new schedule slot.
+   *
+   * @throws NotFoundException If the event is not found.
+   * @throws DeletedException If the event has been deleted.
+   * @throws AccessDeniedException If the user is not the event creator or an admin.
+   * @throws HttpException If the event is not in CONFIRMED status.
+   */
+  static async scheduleEvent(
+    submitter: User,
+    eventId: string,
+    startTime: Date,
+    endTime: Date,
+    organization: Organization
+  ): Promise<Event> {
+    const event = await prisma.event.findUnique({
+      where: { eventId },
+      ...getEventQueryArgs(organization.organizationId)
+    });
+
+    if (!event) throw new NotFoundException('Event', eventId);
+    if (event.dateDeleted) throw new DeletedException('Event', eventId);
+
+    // Cannot schedule an already scheduled event
+    if (event.status === Event_Status.SCHEDULED) {
+      throw new HttpException(400, 'Event is already scheduled');
+    }
+
+    // Only the event creator can schedule the event
+    if (
+      submitter.userId !== event.userCreatedId &&
+      !(await userHasPermission(submitter.userId, organization.organizationId, isAdmin))
+    ) {
+      throw new AccessDeniedException('Only the event creator and admins can schedule the event');
+    }
+
+    // Check for conflicts with the new time
+    const newSlotData: ScheduleSlotCreateArgs = {
+      startTime,
+      endTime,
+      allDay: false
+    };
+
+    const { hasConflict, conflictingEvent } = await checkEventConflicts(
+      [newSlotData],
+      organization,
+      event.location ?? undefined,
+      event.eventId
+    );
+
+    // Update the event with a new schedule slot and change status to SCHEDULED
+    const updatedEvent = await prisma.event.update({
+      where: { eventId },
+      data: {
+        status: Event_Status.SCHEDULED,
+        scheduledTimes: {
+          create: {
+            startTime,
+            endTime,
+            allDay: false
+          }
+        },
+        approved: hasConflict ? Conflict_Status.PENDING : event.approved,
+        approvalRequiredFromUserId: hasConflict ? conflictingEvent?.userCreated.userId : event.approvalRequiredFromUserId
+      },
+      ...getEventQueryArgs(organization.organizationId)
+    });
+
+    const { eventTypeId } = updatedEvent;
+    const foundEventType = await prisma.event_Type.findUnique({
+      where: { eventTypeId }
+    });
+
+    if (foundEventType?.sendSlackNotifications) {
+      await sendEventScheduledSlackNotif(updatedEvent.notificationSlackThreads, eventTransformer(updatedEvent));
+    }
+
+    return eventTransformer(updatedEvent);
+  }
+
   /**
    * Sets the status of an event, only admin or the user who created the event can set the status.
    * @param user the user trying to set the status

src/backend/src/utils/slack.utils.ts

@@ -253,8 +253,8 @@ export const sendSlackEventConfirmNotification = async (
   if (!isProduction && !DEV_TESTING_OVERRIDE) return; // don't send msgs unless in prod
   const msg = `You have been invited to the ${eventName} Design Review in project ${projectName}!`;
   const fullLink = isProduction
-    ? `https://finishlinebyner.com/settings/preferences?eventId=${eventId}`
-    : `http://localhost:3000/settings/preferences?eventId=${eventId}`;
+    ? `https://finishlinebyner.com/calendar/event/${eventId}`
+    : `http://localhost:3000/calendar/event/${eventId}`;
   const linkButtonText = 'Confirm Availability';
 
   try {

src/frontend/src/apis/calendar.api.ts

@@ -12,7 +12,7 @@ import {
   FilterArgs,
   ScheduleSlot
 } from 'shared';
-import { eventTransformer } from './transformers/calendar.transformer';
+import { eventTransformer, eventWithMembersTransformer } from './transformers/calendar.transformer';
 import { EditEventArgs, EditScheduleSlotArgs, EventCreateArgs } from '../hooks/calendar.hooks';
 
 export const getAllCalendars = () => {
@@ -129,7 +129,7 @@ export const getSingleEvent = async (id: string) => {
 
 export const getSingleEventWithMembers = async (id: string) => {
   return axios.get(apiUrls.calendarGetSingleEventWithMembers(id), {
-    transformResponse: (data) => eventTransformer(JSON.parse(data))
+    transformResponse: (data) => eventWithMembersTransformer(JSON.parse(data))
   });
 };
 
@@ -251,3 +251,15 @@ export const downloadDocumentPdf = async (fileId: string): Promise<Blob> => {
   });
   return response.data; // response.data is already a Blob
 };
+
+/**
+ * Schedules an event by adding a schedule slot and changing status to SCHEDULED
+ *
+ * @param eventId The id of the event to schedule
+ * @param payload The start and end times for the new schedule slot
+ */
+export const scheduleEvent = async (eventId: string, payload: { startTime: Date; endTime: Date }) => {
+  return axios.post<Event>(apiUrls.calendarScheduleEvent(eventId), payload, {
+    transformResponse: (data) => eventTransformer(JSON.parse(data))
+  });
+};

src/frontend/src/hooks/calendar.hooks.ts

@@ -47,7 +47,8 @@ import {
   postEditScheduleSlot,
   getSingleEventWithMembers,
   previewScheduleSlotRecurringEdits,
-  postDeleteScheduleSlot
+  postDeleteScheduleSlot,
+  scheduleEvent
 } from '../apis/calendar.api';
 import { useCurrentUser } from './users.hooks';
 import { PDFDocument } from 'pdf-lib';
@@ -565,6 +566,29 @@ export const useDenyEvent = (id: string) => {
   );
 };
 
+/**
+ * Hook to schedule an event by adding a schedule slot and changing status to SCHEDULED.
+ * Only the event creator can schedule the event.
+ */
+export const useScheduleEvent = (eventId: string) => {
+  const queryClient = useQueryClient();
+  return useMutation<Event, Error, { startTime: Date; endTime: Date }>(
+    ['events', 'schedule', eventId],
+    async (payload) => {
+      const { data } = await scheduleEvent(eventId, payload);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['events', eventId]);
+        queryClient.invalidateQueries(['events', eventId, 'with-members']);
+        queryClient.invalidateQueries(['filter-events']);
+        queryClient.invalidateQueries(EVENT_KEY);
+      }
+    }
+  );
+};
+
 /**
  * Custom React Hook to upload a new document.
  */

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

@@ -1,5 +1,5 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
-import { Availability, Event, getDayOfWeek, getNextSevenDays, User } from 'shared';
+import { Availability, Event, EventWithMembers, getDayOfWeek, getNextSevenDays, User } from 'shared';
 import React, { useState } from 'react';
 import { enumToArray, getBackgroundColor, NUMBER_OF_TIME_SLOTS, REVIEW_TIMES } from '../../utils/design-review.utils';
 import { datePipe } from '../../utils/pipes';
@@ -11,8 +11,10 @@ interface AvailabilityScheduleViewProps {
   usersToAvailabilities: Map<User, Availability[]>;
   setCurrentAvailableUsers: (val: User[]) => void;
   setCurrentUnavailableUsers: (val: User[]) => void;
-  event: Event;
+  setCurrentHoveredSlot?: (slot: { day: Date; startHour: number; endHour: number } | null) => void;
+  event: Event | EventWithMembers;
   displayDate?: Date;
+  onSlotScheduleClick?: (day: Date | null, startHour: number, endHour: number) => void;
 }
 
 const AvailabilityScheduleView: React.FC<AvailabilityScheduleViewProps> = ({
@@ -21,24 +23,56 @@ const AvailabilityScheduleView: React.FC<AvailabilityScheduleViewProps> = ({
   usersToAvailabilities,
   setCurrentAvailableUsers,
   setCurrentUnavailableUsers,
+  setCurrentHoveredSlot,
   event,
-  displayDate
+  displayDate,
+  onSlotScheduleClick
 }) => {
   const totalUsers = usersToAvailabilities.size;
   const [selectedTimeslot, setSelectedTimeslot] = useState<number | null>(null);
   // Use displayDate if provided, otherwise fall back to event's initial date
   const initialDate = displayDate || event.initialDateScheduled || new Date();
   const potentialDays = getNextSevenDays(initialDate);
 
-  const handleTimeslotClick = (index: number, _day: Date) => {
+  // Handle hover - updates the sidebar with available/unavailable users and slot info
+  const handleTimeslotHover = (index: number, day: Date, timeIndex: number) => {
+    setCurrentAvailableUsers(availableUsers.get(index) || []);
+    setCurrentUnavailableUsers(unavailableUsers.get(index) || []);
+    if (setCurrentHoveredSlot) {
+      const startHour = 10 + timeIndex;
+      const endHour = 11 + timeIndex;
+      setCurrentHoveredSlot({ day, startHour, endHour });
+    }
+  };
+
+  // Handle mouse leave - clears the hover state and shows selected slot's users if any
+  const handleMouseLeave = () => {
+    if (setCurrentHoveredSlot) {
+      setCurrentHoveredSlot(null);
+    }
+    // If there's a selected slot, show its users
+    if (selectedTimeslot !== null) {
+      setCurrentAvailableUsers(availableUsers.get(selectedTimeslot) || []);
+      setCurrentUnavailableUsers(unavailableUsers.get(selectedTimeslot) || []);
+    }
+  };
+
+  // Handle click - selects/deselects the time slot
+  const handleTimeslotClick = (index: number, day: Date, timeIndex: number) => {
     if (selectedTimeslot === index) {
+      // Deselect
       setSelectedTimeslot(null);
-      setCurrentAvailableUsers([]);
-      setCurrentUnavailableUsers([]);
+      if (onSlotScheduleClick) {
+        onSlotScheduleClick(null, 0, 0); // Clear selection in parent
+      }
     } else {
+      // Select
       setSelectedTimeslot(index);
-      setCurrentAvailableUsers(availableUsers.get(index) || []);
-      setCurrentUnavailableUsers(unavailableUsers.get(index) || []);
+      if (onSlotScheduleClick) {
+        const startHour = 10 + timeIndex;
+        const endHour = 11 + timeIndex;
+        onSlotScheduleClick(day, startHour, endHour);
+      }
     }
   };
 
@@ -77,17 +111,30 @@ const AvailabilityScheduleView: React.FC<AvailabilityScheduleViewProps> = ({
     <TableContainer
       sx={{
         overflowX: 'auto',
-        overflowY: 'auto',
-        maxWidth: '100%'
+        overflowY: 'hidden',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column'
       }}
+      onMouseLeave={handleMouseLeave}
     >
       <Table
         stickyHeader
+        size="small"
         sx={{
+          height: '100%',
+          tableLayout: 'fixed',
           '& .MuiTableCell-head': {
-            bgcolor: 'background.paper'
+            bgcolor: 'background.paper',
+            px: 0.5,
+            py: 0.5
+          },
+          '& .MuiTableCell-body': {
+            px: 0,
+            py: 0,
+            height: `calc((100% - 40px) / 12)` // 12 time slots, minus header height
           },
-          minWidth: 650
+          minWidth: 400
         }}
       >
         <TableHead>
@@ -113,12 +160,12 @@ const AvailabilityScheduleView: React.FC<AvailabilityScheduleViewProps> = ({
               {potentialDays.map((day, dayIndex) => {
                 const index = dayIndex * enumToArray(REVIEW_TIMES).length + timeIndex;
                 return (
-                  <TableCell sx={{ p: 0 }}>
+                  <TableCell key={index} sx={{ p: 0 }}>
                     <EventTimeSlot
-                      key={index}
                       backgroundColor={getBackgroundColor(availableUsers.get(index)?.length, totalUsers)}
                       selected={selectedTimeslot === index}
-                      onClick={() => handleTimeslotClick(index, day)}
+                      onClick={() => handleTimeslotClick(index, day, timeIndex)}
+                      onMouseEnter={() => handleTimeslotHover(index, day, timeIndex)}
                     />
                   </TableCell>
                 );

src/frontend/src/pages/CalendarPage/CalendarDayCard.tsx

@@ -159,6 +159,7 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({
     const baseColor = specificCalendar?.color ?? 'gray';
     const isPending =
       event.status === EventStatus.UNCONFIRMED ||
+      event.status === EventStatus.CONFIRMED ||
       event.approved === ConflictStatus.PENDING ||
       event.approved === ConflictStatus.DENIED;
     const bgColor = isPending ? getMutedColor(baseColor, 0.35) : baseColor;