Added a feature to automatically start an exam

src/dashboards/AssignmentCreator.tsx

@@ -48,6 +48,7 @@ export default function AssignmentCreator({isCreating, assignment, user, groups,
 	);
 	const [isLoading, setIsLoading] = useState(false);
 	const [startDate, setStartDate] = useState<Date | null>(assignment ? moment(assignment.startDate).toDate() : new Date());
+
 	const [endDate, setEndDate] = useState<Date | null>(
 		assignment ? moment(assignment.endDate).toDate() : moment().hours(23).minutes(59).add(8, "day").toDate(),
 	);
@@ -57,6 +58,9 @@ export default function AssignmentCreator({isCreating, assignment, user, groups,
 	const [generateMultiple, setGenerateMultiple] = useState<boolean>(false);
 	const [released, setReleased] = useState<boolean>(false);
 
+	const [autoStart, setAutostart] = useState<boolean>(false);
+	const [autoStartDate, setAutoStartDate] = useState<Date | null>(assignment ? moment(assignment.autoStartDate).toDate() : new Date());
+
 	const [useRandomExams, setUseRandomExams] = useState(true);
 	const [examIDs, setExamIDs] = useState<{id: string; module: Module}[]>([]);
 
@@ -90,6 +94,8 @@ export default function AssignmentCreator({isCreating, assignment, user, groups,
 			variant,
 			instructorGender,
 			released,
+			autoStart,
+			autoStartDate,
 		})
 			.then(() => {
 				toast.success(`The assignment "${name}" has been ${assignment ? "updated" : "created"} successfully!`);
@@ -233,7 +239,7 @@ export default function AssignmentCreator({isCreating, assignment, user, groups,
 
 				<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
 					<div className="flex flex-col gap-2">
-						<label className="font-normal text-base text-mti-gray-dim">Start Date *</label>
+						<label className="font-normal text-base text-mti-gray-dim">Limit Start Date *</label>
 						<ReactDatePicker
 							className={clsx(
 								"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
@@ -264,6 +270,23 @@ export default function AssignmentCreator({isCreating, assignment, user, groups,
 							onChange={(date) => setEndDate(date)}
 						/>
 					</div>
+					{autoStart && (<div className="flex flex-col gap-2">
+						<label className="font-normal text-base text-mti-gray-dim">Automatic Start Date *</label>
+						<ReactDatePicker
+							className={clsx(
+								"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+								"hover:border-mti-purple tooltip z-10",
+								"transition duration-300 ease-in-out",
+							)}
+							popperClassName="!z-20"
+							filterTime={(date) => moment(date).isSameOrAfter(new Date())}
+							dateFormat="dd/MM/yyyy HH:mm"
+							selected={autoStartDate}
+							showTimeSelect
+							onChange={(date) => setAutoStartDate(date)}
+						/>
+					</div>
+					)}
 				</div>
 
 				{selectedModules.includes("speaking") && (
@@ -382,6 +405,9 @@ export default function AssignmentCreator({isCreating, assignment, user, groups,
 					<Checkbox isChecked={released} onChange={() => setReleased((d) => !d)}>
 						Auto release results
 					</Checkbox>
+					<Checkbox isChecked={autoStart} onChange={() => setAutostart((d) => !d)}>
+						Auto start exam
+					</Checkbox>
 				</div>
 				<div className="flex gap-4 w-full justify-end">
 					<Button className="w-full max-w-[200px]" variant="outline" onClick={cancelCreation} disabled={isLoading} isLoading={isLoading}>

src/interfaces/results.ts

@@ -32,6 +32,8 @@ export interface Assignment {
 	// unless start is active, the assignment is not visible to the assignees
 	// start date now works as a limit time to start the exam
 	start?: boolean;
+	autoStartDate?: Date;
+	autoStart?: boolean;
 }
 
 export type AssignmentWithCorporateId = Assignment & {corporateId: string};