Merge pull request #54 from ITPNYU/riho/sync_events

Adjusted block of time after initial selection isn't reflected in mul…
ITPNYU · Nov 6, 2023 · c425209 · c425209
2 parents cf548ab + 3073464
commit c425209
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 27 deletions.
diff --git a/media_commons_booking_app/src/client/admin-page/components/Bookings.tsx b/media_commons_booking_app/src/client/admin-page/components/Bookings.tsx
@@ -38,11 +38,12 @@ export const Bookings = () => {
   const [showModal, setShowModal] = useState(false);
   const [selectedInfo, setSelectedInfo] = useState<Booking>();
   const [tab, setTab] = useState('bookings');
+  const [reload, setReload] = useState(false);
 
   useEffect(() => {
     fetchBookings();
     fetchBookingStatuses();
-  }, []);
+  }, [reload]);
   useEffect(() => {
     const mappings = bookings
       .map((booking, index) => {
@@ -245,7 +246,7 @@ export const Bookings = () => {
                           await serverFunctions.approveBooking(
                             booking.calendarEventId
                           );
-                          window.location.reload();
+                          setReload(true);
                         }}
                       >
                         Second Approve
@@ -258,7 +259,7 @@ export const Bookings = () => {
                           await serverFunctions.approveBooking(
                             booking.calendarEventId
                           );
-                          window.location.reload();
+                          setReload(true);
                         }}
                       >
                         First Approve
@@ -268,7 +269,7 @@ export const Bookings = () => {
                       className="font-medium text-blue-600 dark:text-blue-500 hover:underline mx-2"
                       onClick={async () => {
                         await serverFunctions.reject(booking.calendarEventId);
-                        window.location.reload();
+                        setReload(true);
                       }}
                     >
                       Reject
@@ -277,7 +278,7 @@ export const Bookings = () => {
                       className="font-medium text-blue-600 dark:text-blue-500 hover:underline mx-2"
                       onClick={async () => {
                         await serverFunctions.cancel(booking.calendarEventId);
-                        window.location.reload();
+                        setReload(true);
                       }}
                     >
                       Cancel
@@ -289,7 +290,7 @@ export const Bookings = () => {
                           await serverFunctions.checkin(
                             booking.calendarEventId
                           );
-                          window.location.reload();
+                          setReload(true);
                         }}
                       >
                         Check In

diff --git a/media_commons_booking_app/src/client/booking/components/Calendars.tsx b/media_commons_booking_app/src/client/booking/components/Calendars.tsx
@@ -26,15 +26,15 @@ export const Calendars = ({
   handleSetDate,
 }: CalendarProps) => {
   const [enrolledThisis, setEnrolledThesis] = useState(false);
-  const [bookInfo, setBookInfo] = useState<DateSelectArg>();
+  const [bookingTimeEvent, setBookingTimeEvent] = useState<DateSelectArg>();
 
   const editableEvent = (info) => {
     return info.title.includes(TITLE_TAG);
   };
   const validateEvents = (e) => {
     e.stopPropagation;
-    const overlap = isOverlap(bookInfo);
-    const past = bookInfo.start < new Date();
+    const overlap = isOverlap(bookingTimeEvent);
+    const past = bookingTimeEvent.start < new Date();
     if (past) {
       alert("You can't schedule events in the past");
       return;
@@ -44,15 +44,15 @@ export const Calendars = ({
       alert('The new event overlaps with an existing event on the same day!');
       return;
     }
-    if (bookInfo) {
+    if (bookingTimeEvent) {
       const isConfirmed = window.confirm(
         `You are requesting to book the following rooms${selectedRooms.map(
           (room) => `${room.roomId} ${room.name}`
-        )}  for the time slot ${formatDate(bookInfo.startStr)} ~ ${formatDate(
-          bookInfo.endStr
-        )}`
+        )}  for the time slot ${formatDate(
+          bookingTimeEvent.startStr
+        )} ~ ${formatDate(bookingTimeEvent.endStr)}`
       );
-      if (isConfirmed) handleSetDate(bookInfo);
+      if (isConfirmed) handleSetDate(bookingTimeEvent);
     }
   };
 
@@ -88,7 +88,7 @@ export const Calendars = ({
           }
         });
       });
-      setBookInfo(null);
+      setBookingTimeEvent(null);
       return;
     }
   };
@@ -102,7 +102,7 @@ export const Calendars = ({
   }),
     [selectedRooms];
   const handleDateSelect = (selectInfo) => {
-    if (bookInfo) {
+    if (bookingTimeEvent) {
       alert('You can only book one time slot per reservation');
       return;
     }
@@ -118,7 +118,7 @@ export const Calendars = ({
         groupId: selectInfo.startStr,
       });
     });
-    setBookInfo(selectInfo);
+    setBookingTimeEvent(selectInfo);
   };
 
   const handleChange = (selectedDate: Date) => {
@@ -140,6 +140,24 @@ export const Calendars = ({
     console.log('isOverlap', !isOverlap(selectInfo));
     return !isOverlap(selectInfo);
   };
+
+  const syncEventLengthAcrossCalendars = (changedEvent) => {
+    allRooms.forEach((room) => {
+      const targetGroupId = changedEvent.groupId;
+      if (room.calendarRef.current) {
+        let calendarApi = room.calendarRef.current.getApi();
+        const events = calendarApi.getEvents();
+        events.map((event) => {
+          //All events are retrieved, so change only for the event retrieved this time.
+          if (event.groupId === targetGroupId) {
+            event.setStart(changedEvent.start);
+            event.setEnd(changedEvent.end);
+          }
+        });
+      }
+    });
+    setBookingTimeEvent(changedEvent);
+  };
   return (
     <div className="mt-5 flex flex-col justify-center">
       <div className="flex justify-center items-center space-x-4 my-8">
@@ -160,12 +178,12 @@ export const Calendars = ({
         <div className="flex flex-col items-center ">
           <button
             key="calendarNextButton"
-            disabled={!bookInfo}
+            disabled={!bookingTimeEvent}
             onClick={(e) => {
               validateEvents(e);
             }}
             className={`px-4 py-2 text-white rounded-md focus:outline-none ${
-              bookInfo
+              bookingTimeEvent
                 ? 'bg-blue-600 hover:bg-blue-700'
                 : 'bg-gray-300 pointer-events-none'
             }`}
@@ -233,6 +251,12 @@ export const Calendars = ({
                 return editableEvent(draggedEvent);
               }}
               selectAllow={(e) => handleSelectAllow(e)}
+              eventResize={(info) => {
+                syncEventLengthAcrossCalendars(info.event);
+              }}
+              eventDrop={(info) => {
+                syncEventLengthAcrossCalendars(info.event);
+              }}
             />
           </div>
         ))}

diff --git a/media_commons_booking_app/src/client/booking/components/FormInput.tsx b/media_commons_booking_app/src/client/booking/components/FormInput.tsx
@@ -691,14 +691,6 @@ const FormInput = ({ hasEmail, roomNumber, handleParentSubmit }) => {
           <p className="text-xs">
             It is required for the reservation holder to pay and arrange for CBS
             cleaning services if the event includes catering.
-            <a
-              href=""
-              target="_blank"
-              className="text-blue-600 hover:underline dark:text-blue-500 mx-1"
-            >
-              Please see this link for more information
-            </a>
-            .
           </p>
           <div className="flex items-center mb-4">
             <select