Exam Edit on ExamList

src/pages/(admin)/Lists/ExamList.tsx

@@ -21,6 +21,9 @@ import { checkAccess } from "@/utils/permissions";
 import useGroups from "@/hooks/useGroups";
 import Button from "@/components/Low/Button";
 import { EntityWithRoles } from "@/interfaces/entity";
+import { FiEdit, FiArrowRight } from 'react-icons/fi';
+import { HiArrowRight } from "react-icons/hi";
+import { BiEdit } from "react-icons/bi";
 
 const searchFields = [["module"], ["id"], ["createdBy"]];
 
@@ -105,7 +108,7 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
 
 			return;
 		}
-		dispatch({type: "INIT_EXAM", payload: {exams: [exam], modules: [module]}})
+		dispatch({ type: "INIT_EXAM", payload: { exams: [exam], modules: [module] } })
 
 		router.push("/exam");
 	};
@@ -236,7 +239,7 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
 									{row.original.private ? <BsCircle /> : <BsBan />}
 								</button>
 								{checkAccess(user, ["admin", "developer", "mastercorporate"]) && (
-									<button data-tip="Edit owners" onClick={() => setSelectedExam(row.original)} className="cursor-pointer tooltip">
+									<button data-tip="Edit exam" onClick={() => setSelectedExam(row.original)} className="cursor-pointer tooltip">
 										<BsPencil />
 									</button>
 								)}
@@ -265,12 +268,54 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
 		getCoreRowModel: getCoreRowModel(),
 	});
 
+	const handleExamEdit = () => {
+		router.push(`/generation?id=${selectedExam!.id}&module=${selectedExam!.module}`);
+	}
+
 	return (
 		<div className="flex flex-col gap-4 w-full h-full">
 			{renderSearch()}
-			<Modal isOpen={!!selectedExam} title={`Edit Exam Owners - ${selectedExam?.id}`} onClose={() => setSelectedExam(undefined)}>
+			<Modal isOpen={!!selectedExam} onClose={() => setSelectedExam(undefined)} maxWidth="max-w-xl">
 				{!!selectedExam ? (
-					<ExamOwnerSelector options={filteredCorporates} exam={selectedExam} onSave={(owners) => updateExam(selectedExam, { owners })} />
+					<>
+						<div className="p-6">
+							<div className="mb-6">
+								<div className="flex items-center gap-2 mb-4">
+									<BiEdit className="w-5 h-5 text-gray-600" />
+									<span className="text-gray-600 font-medium">Ready to Edit</span>
+								</div>
+
+								<div className="bg-gray-50 rounded-lg p-4 mb-3">
+									<p className="font-medium mb-1">
+										Exam ID: {selectedExam.id}
+									</p>
+								</div>
+
+								<p className="text-gray-500 text-sm">
+									Click &apos;Next&apos; to proceed to the exam editor.
+								</p>
+							</div>
+
+							<div className="flex justify-between gap-4 mt-8">
+								<Button
+									color="purple"
+									variant="outline"
+									onClick={() => setSelectedExam(undefined)}
+									className="w-32"
+								>
+									Cancel
+								</Button>
+								<Button
+									color="purple"
+									onClick={handleExamEdit}
+									className="w-32 text-white flex items-center justify-center gap-2"
+								>
+									Proceed
+								</Button>
+							</div>
+						</div>
+						{/*<ExamOwnerSelector options={filteredCorporates} exam={selectedExam} onSave={(owners) => updateExam(selectedExam, { owners })} />*/}
+					</>
 				) : (
 					<div />
 				)}

src/pages/(exam)/ExamPage.tsx

@@ -345,7 +345,6 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
 										setUserSolutions(userSolutions);
 									}
 									setShuffles([]);
-									console.log(exam);
 									if (index === undefined) {
 										setFlags({ reviewAll: true });
 										setModuleIndex(0);

src/pages/generation.tsx

@@ -21,7 +21,7 @@ import { requestUser } from "@/utils/api";
 import { Module } from "@/interfaces";
 import { getExam, getExams } from "@/utils/exams.be";
 import { Exam, Exercise, InteractiveSpeakingExercise, ListeningPart, SpeakingExercise } from "@/interfaces/exam";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { isAdmin } from "@/utils/users";
 import axios from "axios";
@@ -47,26 +47,38 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, query })
 
 	if (Object.keys(permissions).every(p => !permissions[p as Module])) return redirect("/")
 
-	const { id, module } = query as { id?: string, module?: Module }
-	if (!id || !module) return { props: serialize({ user, permissions }) };
+	const { id, module: examModule } = query as { id?: string, module?: Module }
+	if (!id || !examModule) return { props: serialize({ user, permissions }) };
 
-	if (!permissions[module]) return redirect("/generation")
+	//if (!permissions[module]) return redirect("/generation")
 
-	const exam = await getExam(module, id)
+	const exam = await getExam(examModule, id)
 	if (!exam) return redirect("/generation")
 
 	return {
-		props: serialize({ user, exam, permissions }),
+		props: serialize({ id, user, exam, examModule, permissions }),
 	};
 }, sessionOptions);
 
-export default function Generation({ user, exam, permissions }: { user: User; exam?: Exam, permissions: Permission }) {
+export default function Generation({ id, user, exam, examModule, permissions }: { id: string, user: User; exam?: Exam, examModule?: Module, permissions: Permission }) {
 	const { title, currentModule, modules, dispatch } = useExamEditorStore();
+	const [examLevelParts, setExamLevelParts] = useState<number | undefined>(undefined);
 
 	const updateRoot = (updates: Partial<ExamEditorStore>) => {
 		dispatch({ type: 'UPDATE_ROOT', payload: { updates } });
 	};
 
+	useEffect(() => {
+		if (id && exam && examModule) {
+			if (examModule === "level" && exam.module === "level") {
+				setExamLevelParts(exam.parts.length);
+			}
+			updateRoot({currentModule: examModule})
+			dispatch({ type: "INIT_EXAM_EDIT", payload: { exam, id, examModule } })
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [id, exam, module])
+
 	useEffect(() => {
 		const fetchAvatars = async () => {
 			const response = await axios.get("/api/exam/avatars");
@@ -118,15 +130,11 @@ export default function Generation({ user, exam, permissions }: { user: User; ex
 					})
 				}
 			});
-			dispatch({type: 'FULL_RESET'});
+			dispatch({ type: 'FULL_RESET' });
 		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	useEffect(() => {
-		if (exam) { }
-	}, [exam])
-
 	return (
 		<>
 			<Head>
@@ -150,6 +158,7 @@ export default function Generation({ user, exam, permissions }: { user: User; ex
 							label="Title"
 							onChange={(title) => updateRoot({ title })}
 							roundness="xl"
+							value={title}
 							defaultValue={title}
 							required
 						/>
@@ -194,7 +203,7 @@ export default function Generation({ user, exam, permissions }: { user: User; ex
 							))}
 						</RadioGroup>
 					</div>
-					<ExamEditor />
+					<ExamEditor levelParts={examLevelParts} />
 				</Layout>
 			)}
 		</>