Merge branch 'develop' into kl/scrum-168-image-enhancements

Author: kevin-lann

course-matrix/backend/__tests__/timetablesController.test.ts

@@ -320,27 +320,6 @@ describe("PUT /api/timetables/:id", () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
-  test("should return error code 400 and message 'New timetable title or semester or updated favorite status is required when updating a timetable' if request body is empty", async () => {
-    // Make sure the test user is authenticated
-    const user_id = "testuser04-f84fd0da-d775-4424-ad88-d9675282453c";
-    const timetableData = {};
-
-    // Mock authHandler to simulate the user being logged in
-    (
-      authHandler as jest.MockedFunction<typeof authHandler>
-    ).mockImplementationOnce(mockAuthHandler(user_id));
-
-    const response = await request(app)
-      .put("/api/timetables/1")
-      .send(timetableData);
-
-    // Check that the `update` method was called
-    expect(response.statusCode).toBe(400);
-    expect(response.body).toEqual({
-      error:
-        "New timetable title or semester or updated favorite status or email notifications enabled is required when updating a timetable",
-    });
-  });
 
   test("should update the timetable successfully", async () => {
     // Make sure the test user is authenticated
@@ -361,7 +340,7 @@ describe("PUT /api/timetables/:id", () => {
 
     // Check that the `update` method was called
     expect(response.statusCode).toBe(200);
-    expect(response.body).toEqual({
+    expect(response.body).toMatchObject({
       timetable_title: "Updated Title",
       semester: "Spring 2025",
     });

course-matrix/backend/src/constants/availableFunctions.ts

@@ -116,6 +116,7 @@ export const availableFunctions: AvailableFunctions = {
       }
 
       let updateData: any = {};
+      updateData.updated_at = new Date().toISOString();
       if (timetable_title) updateData.timetable_title = timetable_title;
       if (semester) updateData.semester = semester;
 

course-matrix/backend/src/controllers/timetablesController.ts

@@ -179,17 +179,6 @@ export default {
         favorite,
         email_notifications_enabled,
       } = req.body;
-      if (
-        !timetable_title &&
-        !semester &&
-        favorite === undefined &&
-        email_notifications_enabled === undefined
-      ) {
-        return res.status(400).json({
-          error:
-            "New timetable title or semester or updated favorite status or email notifications enabled is required when updating a timetable",
-        });
-      }
 
       // Timetables cannot be longer than 50 characters.
       if (timetable_title && timetable_title.length > 50) {
@@ -236,6 +225,7 @@ export default {
           .json({ error: "Another timetable with this title already exists" });
       }
       let updateData: any = {};
+      updateData.updated_at = new Date().toISOString();
       if (timetable_title) updateData.timetable_title = timetable_title;
       if (semester) updateData.semester = semester;
       if (favorite !== undefined) updateData.favorite = favorite;

course-matrix/frontend/__tests__/convertTimestampToLocaleTime.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it, test } from "@jest/globals";
+
+import { convertTimestampToLocaleTime } from "../src/utils/convert-timestamp-to-locale-time";
+
+describe("convertTimestampToLocaleTime", () => {
+  test("should convert a valid timestamp string to a locale time string", () => {
+    const timestamp = "2025-03-28T12:00:00Z";
+    const result = convertTimestampToLocaleTime(timestamp);
+    expect(typeof result).toBe("string");
+    expect(result.length).toBeGreaterThan(0); // Ensures it returns a non-empty string
+  });
+
+  test("should convert a valid numeric timestamp to a locale time string", () => {
+    const timestamp = 1711622400000; // Equivalent to 2025-03-28T12:00:00Z
+    // in milliseconds
+    const result = convertTimestampToLocaleTime(timestamp);
+    expect(typeof result).toBe("string");
+    expect(result.length).toBeGreaterThan(0);
+  });
+
+  test("convert to locale time date is different", () => {
+    const timestamp = "2025-03-28 02:33:02.589Z";
+    const result = convertTimestampToLocaleTime(timestamp);
+    expect(typeof result).toBe("string");
+    expect(result.length).toBeGreaterThan(0);
+  });
+
+  test("should return 'Invalid Date' for an invalid timestamp", () => {
+    const timestamp = "invalid";
+    const result = convertTimestampToLocaleTime(timestamp);
+    expect(result).toBe("Invalid Date");
+  });
+});

course-matrix/frontend/src/models/timetable-form.ts

@@ -106,7 +106,7 @@ export const RestrictionSchema = z
   })
   .refine(
     (data) => {
-      if (data.startTime && data.endTime) {
+      if (data.type === "Restrict Between" && data.startTime && data.endTime) {
         return data.startTime < data.endTime;
       }
       return true; // Allow if either undefined

course-matrix/frontend/src/pages/Home/TimetableCard.tsx

@@ -21,6 +21,7 @@ import { Link } from "react-router-dom";
 import { TimetableModel } from "@/models/models";
 import { ImagePlaceholder } from "@/components/imagePlaceholder";
 import { SemesterIcon } from "@/components/semester-icon";
+import { convertTimestampToLocaleTime } from "../../utils/convert-timestamp-to-locale-time";
 
 const semesterToBgColor = (semester: string) => {
   if (semester.startsWith("Fall")) {
@@ -67,7 +68,6 @@ const TimetableCard = ({
   /// small blurred version
 
   const [updateTimetable] = useUpdateTimetableMutation();
-
   const timetableId = timetable.id;
 
   const user_metadata = JSON.parse(localStorage.getItem("userInfo") ?? "{}");
@@ -79,21 +79,14 @@ const TimetableCard = ({
     ? (usernameData ?? "John Doe")
     : loggedInUsername;
 
-  const lastEditedDateArray = lastEditedDate
-    .toISOString()
-    .split("T")[0]
-    .split("-");
-  const lastEditedYear = lastEditedDateArray[0];
-  const lastEditedMonth = lastEditedDateArray[1];
-  const lastEditedDay = lastEditedDateArray[2];
-  const lastEditedDateTimestamp =
-    lastEditedMonth + "/" + lastEditedDay + "/" + lastEditedYear;
-
   const [timetableCardTitle, setTimetableCardTitle] = useState(title);
   const [isEditingTitle, setIsEditingTitle] = useState(false);
-  const { data } = useGetTimetableQuery(timetableId);
+  const { data, refetch } = useGetTimetableQuery(timetableId);
   const [toggled, setToggled] = useState(favorite);
   const [imageLoaded, setImageLoaded] = useState(false);
+  const [lastEdited, setLastEdited] = useState(
+    convertTimestampToLocaleTime(lastEditedDate.toISOString()).split(",")[0],
+  );
 
   const handleSave = async () => {
     try {
@@ -107,6 +100,7 @@ const TimetableCard = ({
       setErrorMessage(errorData?.error ?? "Unknown error occurred");
       return;
     }
+    refetch();
   };
 
   useEffect(() => {
@@ -115,6 +109,11 @@ const TimetableCard = ({
       if (val !== undefined) {
         setToggled(val);
       }
+      setLastEdited(
+        convertTimestampToLocaleTime(
+          (data as TimetableModel[])[0]?.updated_at,
+        ).split(",")[0],
+      );
     }
   }, [data]);
 
@@ -175,7 +174,15 @@ const TimetableCard = ({
       </CardHeader>
       <CardContent className="-mt-3">
         <CardDescription className="flex justify-between text-xs">
-          <div>Last edited {lastEditedDateTimestamp}</div>
+          <div>
+            Last edited{" "}
+            {
+              convertTimestampToLocaleTime(lastEditedDate.toISOString()).split(
+                ",",
+              )[0]
+            }
+          </div>
+
           <div>Owned by: {ownerUsername}</div>
         </CardDescription>
       </CardContent>
@@ -249,7 +256,7 @@ const TimetableCard = ({
       </CardHeader>
       <CardContent className="-mt-3">
         <CardDescription className="flex justify-between text-xs">
-          <div>Last edited {lastEditedDateTimestamp}</div>
+          <div>Last edited {lastEdited}</div>
           <div>Owned by: {ownerUsername}</div>
         </CardDescription>
       </CardContent>

course-matrix/frontend/src/pages/TimetableBuilder/Calendar.tsx

@@ -28,6 +28,7 @@ import { TimetableFormSchema } from "@/models/timetable-form";
 import {
   useGetTimetablesQuery,
   useCreateTimetableMutation,
+  useUpdateTimetableMutation,
 } from "@/api/timetableApiSlice";
 import {
   useGetRestrictionsQuery,
@@ -41,6 +42,7 @@ import {
   useCreateEventMutation,
   useGetEventsQuery,
   useDeleteEventMutation,
+  useUpdateEventMutation,
 } from "@/api/eventsApiSlice";
 import { useGetOfferingsQuery } from "@/api/offeringsApiSlice";
 import { useGetOfferingEventsQuery } from "@/api/offeringsApiSlice";
@@ -89,13 +91,16 @@ const Calendar = React.memo<CalendarProps>(
     const editingTimetableId = parseInt(queryParams.get("edit") ?? "0");
 
     const [createTimetable] = useCreateTimetableMutation();
+    const [updateTimetable] = useUpdateTimetableMutation();
     const [createEvent] = useCreateEventMutation();
     const [deleteEvent] = useDeleteEventMutation();
     const [createRestriction] = useCreateRestrictionMutation();
     const [deleteRestriction] = useDeleteRestrictionMutation();
 
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
-
+    const [updateErrorMessage, setUpdateErrorMessage] = useState<string | null>(
+      null,
+    );
     const semesterStartDate = getSemesterStartAndEndDates(semester).start;
     const { start: semesterStartDatePlusOneWeek, end: semesterEndDate } =
       getSemesterStartAndEndDatesPlusOneWeek(semester);
@@ -262,13 +267,20 @@ const Calendar = React.memo<CalendarProps>(
     };
 
     const handleUpdate = async () => {
+      const timetableTitle = timetableTitleRef.current?.value ?? "";
       setShowLoadingPage(true);
+
       const offeringIdsToDelete = oldOfferingIds.filter(
         (offeringId) => !newOfferingIds.includes(offeringId),
       );
       const offeringIdsToAdd = newOfferingIds.filter(
         (offeringId) => !oldOfferingIds.includes(offeringId),
       );
+      if (offeringIdsToAdd.length === 0 && offeringIdsToDelete.length === 0) {
+        setUpdateErrorMessage("You have made no changes to the timetable!");
+        setShowLoadingPage(false);
+        return;
+      }
       // Delete course events
       for (const offeringId of offeringIdsToDelete) {
         const { error: deleteError } = await deleteEvent({
@@ -322,12 +334,23 @@ const Calendar = React.memo<CalendarProps>(
           console.error(restrictionError);
         }
       }
+
+      try {
+        await updateTimetable({
+          id: editingTimetableId,
+          timetable_title: timetableTitle,
+        }).unwrap();
+      } catch (error) {
+        setUpdateErrorMessage("You have made no changes to the timetable");
+        setShowLoadingPage(false);
+        return;
+      }
       navigate("/home");
     };
 
     return (
       <div>
-        <h1 className="text-2xl flex flex-row justify-between font-medium tracking-tight mb-8">
+        <h1 className="text-2xl flex flex-row justify-between font-medium tracking-tight mb-4">
           <div>{header}</div>
           <TimetableErrorDialog
             errorMessage={errorMessage}
@@ -381,29 +404,35 @@ const Calendar = React.memo<CalendarProps>(
               </DialogContent>
             </Dialog>
           ) : (
-            <div className="flex gap-2">
-              {isChoosingSectionsManually &&
-                !allOfferingSectionsHaveBeenSelected && (
-                  <p className="text-sm text-red-500 pr-2">
-                    Please select all LEC/TUT/PRA sections for your courses in
-                    order to save your timetable.
-                  </p>
-                )}
+            <div>
+              <div className="flex gap-2">
+                {isChoosingSectionsManually &&
+                  !allOfferingSectionsHaveBeenSelected && (
+                    <p className="text-sm text-red-500 pr-2">
+                      Please select all LEC/TUT/PRA sections for your courses in
+                      order to save your timetable.
+                    </p>
+                  )}
 
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => navigate("/home")}
-              >
-                Cancel Editing
-              </Button>
-              <Button
-                size="sm"
-                disabled={!allOfferingSectionsHaveBeenSelected}
-                onClick={handleUpdate}
-              >
-                Update Timetable
-              </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => navigate("/home")}
+                >
+                  Cancel Editing
+                </Button>
+                <Button
+                  size="sm"
+                  disabled={!allOfferingSectionsHaveBeenSelected}
+                  onClick={handleUpdate}
+                >
+                  Update Timetable
+                </Button>
+              </div>
+              <div className="mt-1 text-sm text-red-500 font-bold">
+                {" "}
+                {updateErrorMessage}{" "}
+              </div>
             </div>
           )}
         </h1>

course-matrix/frontend/src/pages/TimetableBuilder/GeneratedCalendars.tsx

@@ -16,7 +16,7 @@ import {
 } from "@/utils/semester-utils";
 import { courseEventStyles } from "@/constants/calendarConstants";
 import { createEventModalPlugin } from "@schedule-x/event-modal";
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useGetOfferingEventsQuery } from "@/api/offeringsApiSlice";
 import { Button } from "@/components/ui/button";
 import {
@@ -107,7 +107,7 @@ export const GeneratedCalendars = React.memo<GeneratedCalendarsProps>(
 
     const { data: courseEventsData, isLoading } = useGetOfferingEventsQuery({
       offering_ids: currentTimetableOfferings
-        .map((offering) => offering.id)
+        ?.map((offering) => offering.id)
         .join(","),
       semester_start_date: semesterStartDate,
       semester_end_date: semesterEndDate,
@@ -200,6 +200,10 @@ export const GeneratedCalendars = React.memo<GeneratedCalendarsProps>(
       isResponsive: false,
     });
 
+    useEffect(() => {
+      setCurrentTimetableIndex(0);
+    }, [generatedTimetables]);
+
     return (
       <>
         <div>

course-matrix/frontend/src/utils/convert-timestamp-to-locale-time.ts

@@ -0,0 +1,7 @@
+export function convertTimestampToLocaleTime(
+  timestampz: string | number,
+): string {
+  const date = new Date(timestampz);
+
+  return date.toLocaleString(); // Uses system's default locale
+}