devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change to a single checkbox filter for all modules

Browse Source
This commit is contained in:
Joao Correia
2025-02-26 19:23:21 +00:00
parent ba8cc342b1
commit 4e3cfec9e8
1 changed files with 55 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/pages/assignments/creator/index.tsx
View File

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