Merge pull request #1288 from isaacphysics/feature/required-due-dates

Require due date when setting assignments and tests

Author: axlewin

src/app/components/elements/modals/QuizSettingModal.tsx

@@ -158,14 +158,14 @@ export function QuizSettingModal({quiz, dueDate: initialDueDate, scheduledStartD
             </UncontrolledTooltip>
             {scheduledStartDateInvalid && <small className={"pt-2 text-danger"}>Start date must be today or in the future.</small>}
         </Label>
-        <Label className="w-100 mb-4">Set an optional due date:<br/>
+        <Label className="w-100 mb-4">Set a due date:<br/>
             <DateInput invalid={dueDateInvalid || undefined} value={dueDate ?? undefined} yearRange={yearRange}
                 onChange={(e) => setDueDate(e.target.valueAsDate)}/>
             {dueDateInvalid && <small className={"pt-2 text-danger"}>{dueDate.valueOf() > TODAY().valueOf() ? "Due date must be on or after the start date." : `Due date must be after today.`}</small>}
         </Label>
 
         <Alert color={siteSpecific("warning", "info")} className="py-1 px-2 mb-4">
-            From {siteSpecific("Jan", "January")} 2025, due dates will be required for set tests.
+            Since {siteSpecific("Jan", "January")} 2025, due dates are required for set tests.
         </Alert>
 
         <div className="w-100">
@@ -179,7 +179,7 @@ export function QuizSettingModal({quiz, dueDate: initialDueDate, scheduledStartD
             </Button>
             <Button
                 className={"float-end mb-4 w-100 w-sm-auto"}
-                disabled={groupInvalid || !feedbackMode || isAssigning || dueDateInvalid || scheduledStartDateInvalid}
+                disabled={groupInvalid || !feedbackMode || isAssigning || !dueDate || dueDateInvalid || scheduledStartDateInvalid }
                 onMouseEnter={() => setValidated(new Set(['group', 'feedbackMode']))}
                 onClick={assign}
             >

src/app/components/pages/AssignmentSchedule.tsx

@@ -444,7 +444,7 @@ const AssignmentModal = ({user, showSetAssignmentUI, toggleSetAssignmentUI, assi
 
     const yearRange = range(currentYear, currentYear + 5);
 
-    const dueDateInvalid = dueDate && scheduledStartDate ? scheduledStartDate.valueOf() > dueDate.valueOf() : false;
+    const dueDateInvalid = isDefined(dueDate) && ((scheduledStartDate ? (nthHourOf(0, scheduledStartDate).valueOf() > dueDate.valueOf()) : false) || TODAY().valueOf() > dueDate.valueOf());
 
     useEffect(() => {
         if (showSetAssignmentUI) setShowGameboardPreview(false);
@@ -502,14 +502,14 @@ const AssignmentModal = ({user, showSetAssignmentUI, toggleSetAssignmentUI, assi
                 onChange={(e: ChangeEvent<HTMLInputElement>) => setScheduledStartDate(e.target.valueAsDate as Date)}
             />
         </Label>
-        <Label className="w-100 pb-2">Due date reminder <span className="text-muted"> (optional)</span>
+        <Label className="w-100 pb-2">Due date reminder
             <DateInput value={dueDate} placeholder="Select your due date..." yearRange={yearRange}
                 onChange={(e: ChangeEvent<HTMLInputElement>) => setDueDate(e.target.valueAsDate as Date)}
             />
             {dueDateInvalid && <small className={"pt-2 text-danger"}>Due date must be on or after start date.</small>}
         </Label>
         <Alert color={siteSpecific("warning", "info")} className="py-1">
-            From January 2025, due dates will be required for assignments.
+            Since January 2025, due dates are required for assignments.
         </Alert>
         {isStaff(user) && <Label className="w-100 pb-2">Notes (optional):
             <Input type="textarea"
@@ -529,7 +529,7 @@ const AssignmentModal = ({user, showSetAssignmentUI, toggleSetAssignmentUI, assi
                     className="mb-2 mb-sm-0 w-100"
                     block color={siteSpecific("secondary", "primary")}
                     onClick={assign}
-                    disabled={selectedGroups.length === 0 || (isDefined(assignmentNotes) && assignmentNotes.length > 500) || !isDefined(selectedGameboard) || alreadyAssignedGroupNames.length === selectedGroups.length}
+                    disabled={selectedGroups.length === 0 || (isDefined(assignmentNotes) && assignmentNotes.length > 500) || !isDefined(selectedGameboard) || alreadyAssignedGroupNames.length === selectedGroups.length || !dueDate || dueDateInvalid}
                 >
                     Assign to group{selectedGroups.length > 1 ? "s" : ""}
                 </Button>

src/app/components/pages/SetAssignments.tsx

@@ -96,7 +96,7 @@ const AssignGroup = ({groups, board}: AssignGroupProps) => {
     }
 
     const yearRange = range(currentYear, currentYear + 5);
-    const dueDateInvalid = dueDate && scheduledStartDate ? (nthHourOf(0, scheduledStartDate).valueOf() > dueDate.valueOf() || TODAY().valueOf() > dueDate.valueOf()) : false;
+    const dueDateInvalid = isDefined(dueDate) && ((scheduledStartDate ? (nthHourOf(0, scheduledStartDate).valueOf() > dueDate.valueOf()) : false) || TODAY().valueOf() > dueDate.valueOf());
     const startDateInvalid = scheduledStartDate ? TODAY().valueOf() > scheduledStartDate.valueOf() : false;
 
     function setScheduledStartDateAtSevenAM(e: ChangeEvent<HTMLInputElement>) {
@@ -124,14 +124,14 @@ const AssignGroup = ({groups, board}: AssignGroupProps) => {
                 onChange={setScheduledStartDateAtSevenAM} />
             {startDateInvalid && <small className={"pt-2 text-danger"}>Start date must be in the future.</small>}
         </Label>
-        <Label className="w-100 pb-2">Due date reminder <span className="text-muted"> (optional)</span>
+        <Label className="w-100 pb-2">Due date reminder
             <DateInput value={dueDate} placeholder="Select your due date..." yearRange={yearRange}
                 onChange={(e: ChangeEvent<HTMLInputElement>) => setDueDate(e.target.valueAsDate as Date)} /> {/* DANGER here with force-casting Date|null to Date */}
             {dueDateInvalid && <small className={"pt-2 text-danger"}>Due date must be on or after start date and in the future.</small>}
             {dueDateInvalid && startDateInvalid && <br/>}
         </Label>
         <Alert color={siteSpecific("warning", "info")} className="py-1 px-2">
-            From {siteSpecific("Jan", "January")} 2025, due dates will be required for assignments.
+            Since {siteSpecific("Jan", "January")} 2025, due dates are required for assignments.
         </Alert>
         {isEventLeaderOrStaff(user) && <Label className="w-100 pb-2">Notes (optional):
             <Input type="textarea"
@@ -150,7 +150,7 @@ const AssignGroup = ({groups, board}: AssignGroupProps) => {
             block color={siteSpecific("secondary", "primary")}
             onClick={assign}
             role={"button"}
-            disabled={selectedGroups.length === 0 || (isDefined(assignmentNotes) && assignmentNotes.length > 500) || dueDateInvalid || startDateInvalid}
+            disabled={selectedGroups.length === 0 || (isDefined(assignmentNotes) && assignmentNotes.length > 500) || !dueDate || dueDateInvalid || startDateInvalid}
         >Assign to group{selectedGroups.length > 1 ? "s" : ""}</Button>
     </Container>;
 };

src/test/pages/SetAssignments.test.tsx

@@ -170,9 +170,10 @@ describe("SetAssignments", () => {
 
         // Check scheduled start date and due date are there
         within(modal).getByLabelText("Schedule an assignment start date", {exact: false});
-        within(modal).getByLabelText("Due date reminder", {exact: false});
-        // TODO check setting scheduled start date and due date - might be best to transition to
-        //  react-select date picker UI for this functionality anyway
+        const dueDateContainer = within(modal).getByLabelText("Due date reminder", {exact: false});
+        // TODO check setting scheduled start date and due date leads to correctly saved values,
+        //  since this currently just checks any form of due date is set.
+        await userEvent.selectOptions(dueDateContainer, "1");
 
         // Add some notes
         const testNotes = "Test notes to test groups for test assignments";
@@ -195,7 +196,7 @@ describe("SetAssignments", () => {
             expect(requestGroupIds).toEqual([mockActiveGroups[1].id]);
             expect(requestAssignment.gameboardId).toEqual(mockGameboard.id);
             expect(requestAssignment.notes).toEqual(testNotes);
-            expect(requestAssignment.dueDate).not.toBeDefined();
+            expect(requestAssignment.dueDate).toBeDefined();
             expect(requestAssignment.scheduledStartDate).not.toBeDefined();
         });