change to a single checkbox filter for all modules

This commit is contained in:
Joao Correia
2025-02-26 19:23:21 +00:00
parent ba8cc342b1
commit 4e3cfec9e8

View File

@@ -101,14 +101,6 @@ interface Props {
const SIZE = 9;
type ExamApprovalFilterMap = {
writing: boolean;
reading: boolean;
listening: boolean;
speaking: boolean;
level: boolean;
};
export default function AssignmentsPage({
user,
users,
@@ -151,20 +143,8 @@ export default function AssignmentsPage({
const [useRandomExams, setUseRandomExams] = useState(true);
const [examIDs, setExamIDs] = useState<{ id: string; module: Module }[]>([]);
const [showExamsThatRequiredApproval, setShowExamsThatRequiredApproval] = useState<ExamApprovalFilterMap>({
writing: true,
reading: true,
listening: true,
speaking: true,
level: true,
});
const [showExamsThatDidntRequireApproval, setShowExamsThatDidntRequireApproval] = useState<ExamApprovalFilterMap>({
writing: true,
reading: true,
listening: true,
speaking: true,
level: true,
});
const [showApprovedExams, setShowApprovedExams] = useState<boolean>(true);
const [showNonApprovedExams, setShowNonApprovedExams] = useState<boolean>(true);
const { exams } = useExams();
const router = useRouter();
@@ -524,69 +504,64 @@ export default function AssignmentsPage({
Random Exams
</Checkbox>
{!useRandomExams && (
<div className="grid md:grid-cols-2 w-full gap-4">
{selectedModules.map((module) => (
<div key={module} className="flex flex-col gap-3 w-full">
<div className="flex flex-row gap-6">
<>
<Checkbox
isChecked={showApprovedExams}
onChange={() => {
setShowApprovedExams((prev) => !prev)
}}
>
Show approved exams
</Checkbox>
<Checkbox
isChecked={showNonApprovedExams}
onChange={() => {
setShowNonApprovedExams((prev) => !prev)
}}
>
Show non-approved exams
</Checkbox>
<div className="grid md:grid-cols-2 w-full gap-4">
{selectedModules.map((module) => (
<div key={module} className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">
{capitalize(module)} Exam
</label>
<Checkbox
isChecked={showExamsThatRequiredApproval[module]}
onChange={() => {
setShowExamsThatRequiredApproval(prev => ({
...prev,
[module]: !prev[module],
}))
<Select
isClearable
value={{
value:
examIDs.find((e) => e.module === module)?.id ||
null,
label:
examIDs.find((e) => e.module === module)?.id || "",
}}
>
Show exams that required approval
</Checkbox>
<Checkbox
isChecked={showExamsThatDidntRequireApproval[module]}
onChange={() => {
setShowExamsThatDidntRequireApproval(prev => ({
...prev,
[module]: !prev[module],
}))
}}
>
Show exams that did not require approval
</Checkbox>
onChange={(value) =>
value
? setExamIDs((prev) => [
...prev.filter((x) => x.module !== module),
{ id: value.value!, module },
])
: setExamIDs((prev) =>
prev.filter((x) => x.module !== module)
)
}
options={exams
.filter((x) =>
!x.isDiagnostic &&
x.module === module &&
x.access !== "confidential" &&
(
(x.requiresApproval && showApprovedExams) ||
(!x.requiresApproval && showNonApprovedExams)
)
)
.map((x) => ({ value: x.id, label: x.id }))}
/>
</div>
<Select
isClearable
value={{
value:
examIDs.find((e) => e.module === module)?.id ||
null,
label:
examIDs.find((e) => e.module === module)?.id || "",
}}
onChange={(value) =>
value
? setExamIDs((prev) => [
...prev.filter((x) => x.module !== module),
{ id: value.value!, module },
])
: setExamIDs((prev) =>
prev.filter((x) => x.module !== module)
)
}
options={exams
.filter((x) =>
!x.isDiagnostic &&
x.module === module &&
(
(x.requiresApproval && showExamsThatRequiredApproval[module]) ||
(!x.requiresApproval && showExamsThatDidntRequireApproval[module])
)
)
.map((x) => ({ value: x.id, label: x.id }))}
/>
</div>
))}
</div>
))}
</div>
</>
)}
</div>
)}