kl/SCRUM-129: Fix restriction and form related bugs (#67)

Co-authored-by: kevin-lann <[email protected]>

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

@@ -177,6 +177,40 @@ 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
@@ -208,6 +242,26 @@ 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"],
+    },
+  )
+  .refine(
+    (data) => {
+      return !hasDuplicate(data.restrictions);
+    },
+    {
+      message: "Duplicate restriction detected. Please remove.",
+      path: ["restrictions"],
+    },
   );
 
 export const baseTimetableForm: TimetableForm = {
@@ -224,3 +278,23 @@ export const baseRestrictionForm: RestrictionForm = {
   days: [],
   disabled: false,
 };
+
+function hasDuplicate(restrictions: RestrictionForm[]) {
+  const seen: RestrictionForm[] = [];
+  for (const r of restrictions) {
+    if (
+      seen.some(
+        (s) =>
+          s.type === r.type &&
+          ((s.numDays && r.numDays && s.numDays === r.numDays) ||
+            (s.days?.sort().join(" ") === r.days?.sort().join(" ") &&
+              s.startTime?.getHours() === r.startTime?.getHours() &&
+              s.endTime?.getHours() === s.endTime?.getHours())),
+      )
+    ) {
+      return true;
+    }
+    seen.push(r);
+  }
+  return false;
+}

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,16 @@ 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 +176,10 @@ 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) => (
@@ -332,9 +332,18 @@ const TimetableBuilder = () => {
                   </div>
 
                   <div className="flex flex-col">
-                    <p className="text-sm pb-2">
-                      Enabled Restrictions: {enabledRestrictions.length}
-                    </p>
+                    <FormField
+                      control={form.control}
+                      name="restrictions"
+                      render={({ field }) => (
+                        <FormItem className="pb-2">
+                          <p className="text-sm">
+                            Enabled Restrictions: {enabledRestrictions.length}
+                          </p>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
                     <div className="flex gap-2 flex-col">
                       {enabledRestrictions.map((restric, index) => (
                         <div
@@ -372,18 +381,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