Fix restriction and form related bugs

Author: kevin-lann

course-matrix/frontend/src/components/time-picker-hr.tsx

@@ -60,7 +60,7 @@ export function TimePickerHr({ date, setDate }: TimePickerHrProps) {
       </div> */}
       <div className="grid gap-1 text-center">
         <Label htmlFor="period" className="text-xs">
-          Period
+          AM/PM
         </Label>
         <TimePeriodSelect
           period={period}

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

@@ -83,7 +83,7 @@ export const RestrictionSchema = z
     {
       message: "Start time must be before end time",
       path: ["startTime"],
-    },
+    }
   )
   .refine(
     (data) => {
@@ -98,7 +98,7 @@ export const RestrictionSchema = z
     {
       message: "Must choose time",
       path: ["endTime"],
-    },
+    }
   )
   .refine(
     (data) => {
@@ -113,7 +113,7 @@ export const RestrictionSchema = z
     {
       message: "Must choose time",
       path: ["startTime"],
-    },
+    }
   )
   .refine(
     (data) => {
@@ -129,7 +129,7 @@ export const RestrictionSchema = z
     {
       message: "Cannot block all days",
       path: ["days"],
-    },
+    }
   )
   .refine(
     (data) => {
@@ -145,7 +145,7 @@ export const RestrictionSchema = z
     {
       message: "Must choose at least 1 day",
       path: ["days"],
-    },
+    }
   )
   .refine(
     (data) => {
@@ -161,7 +161,7 @@ export const RestrictionSchema = z
     {
       message: "Cannot block all days",
       path: ["numDays"],
-    },
+    }
   )
   .refine(
     (data) => {
@@ -176,7 +176,41 @@ export const RestrictionSchema = z
     {
       message: "Number must be at least 1",
       path: ["numDays"],
+    }
+  )
+  .refine(
+    (data) => {
+      if (
+        data.type &&
+        data.type === "Restrict Before" &&
+        data.endTime?.getHours() === 0 &&
+        data.endTime?.getMinutes() === 0
+      ) {
+        return false;
+      }
+      return true;
+    },
+    {
+      message: "Cannot restrict whole day",
+      path: ["endTime"],
+    }
+  )
+  .refine(
+    (data) => {
+      if (
+        data.type &&
+        data.type === "Restrict After" &&
+        data.startTime?.getHours() === 0 &&
+        data.startTime?.getMinutes() === 0
+      ) {
+        return false;
+      }
+      return true;
     },
+    {
+      message: "Cannot restrict whole day",
+      path: ["startTime"],
+    }
   );
 
 export const TimetableFormSchema: ZodType<TimetableForm> = z
@@ -198,7 +232,7 @@ export const TimetableFormSchema: ZodType<TimetableForm> = z
     {
       message: "Must pick at least 1 course",
       path: ["search"],
-    },
+    }
   )
   .refine(
     (data) => {
@@ -207,7 +241,18 @@ export const TimetableFormSchema: ZodType<TimetableForm> = z
     {
       message: "Cannot pick more than 8 courses",
       path: ["search"],
+    }
+  )
+  .refine(
+    (data) => {
+      return !(
+        data.restrictions.filter((r) => r.type === "Days Off").length > 1
+      );
     },
+    {
+      message: "Already added minimum days off per week",
+      path: ["restrictions"],
+    }
   );
 
 export const baseTimetableForm: TimetableForm = {

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

@@ -81,6 +81,7 @@ const CourseSearch = ({
   const handleAddCourse = (item: CourseModel) => {
     if (!form) return;
     const currentList = form.getValues("courses") || [];
+    if (currentList.length > 7) return; // ensure max courses added is 8
     if (currentList.find((c) => c.id === item.id)) return; // ensure uniqueness
     const newList = [...currentList, item];
     console.log(newList);

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

@@ -96,6 +96,14 @@ const CreateCustomSetting = ({
     closeHandler();
   };
 
+  const form = useContext(FormContext)
+
+  const isDaysOffRestrictionApplied = () => {
+    const val =  form?.getValues("restrictions").some(r => r.type === "Days Off")
+    console.log(val)
+    return val
+  }
+
   const getRestrictionType = (value: string) => {
     if (
       value === "Restrict Before" ||
@@ -166,7 +174,7 @@ const CreateCustomSetting = ({
                             <SelectItem value="Restrict Day">
                               Restrict Entire Day
                             </SelectItem>
-                            <SelectItem value="Days Off">
+                            <SelectItem value="Days Off" disabled={isDaysOffRestrictionApplied()}>
                               Enforce Minimum Days Off Per Week
                             </SelectItem>
                           </SelectContent>

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

@@ -292,7 +292,7 @@ const TimetableBuilder = () => {
                   </div>
                   <div className="flex flex-col">
                     <p className="text-sm pb-2">
-                      Selected courses: {selectedCourses.length}
+                      Selected courses: {selectedCourses.length} (Max 8)
                     </p>
                     <div className="flex gap-2 flex-col">
                       {selectedCourses.map((course, index) => (
@@ -372,18 +372,19 @@ const TimetableBuilder = () => {
 
                   <Button type="submit">Generate</Button>
                 </form>
+
+                {isCustomSettingsOpen && (
+                  <CreateCustomSetting
+                    submitHandler={handleAddRestriction}
+                    closeHandler={() => setIsCustomSettingsOpen(false)}
+                  />
+                )}
               </FormContext.Provider>
             </Form>
           </div>
           <div className="w-3/5">
             <Calendar courseEvents={courseEvents} userEvents={userEvents} />
           </div>
-          {isCustomSettingsOpen && (
-            <CreateCustomSetting
-              submitHandler={handleAddRestriction}
-              closeHandler={() => setIsCustomSettingsOpen(false)}
-            />
-          )}
 
           {showFilters && (
             <SearchFilters