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

Merged in ENCOA-78_ExamList (pull request #63)

Browse Source 
Added more columns to exam list

Approved-by: Tiago Ribeiro
This commit is contained in:
João Ramos
2024-08-06 18:46:20 +00:00
committed by Tiago Ribeiro
parent cf64a91651 2a58e0d33f
commit a31070d4a3
3 changed files with 211 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/interfaces/exam.ts
View File

@@ -5,15 +5,20 @@ export type Variant = "full" | "partial";
export type InstructorGender = "male" | "female" | "varied";
export type Difficulty = "easy" | "medium" | "hard";
export interface ReadingExam {
parts: ReadingPart[];
interface ExamBase {
id: string;
module: "reading";
module: Module;
minTimer: number;
type: "academic" | "general";
isDiagnostic: boolean;
variant?: Variant;
difficulty?: Difficulty;
createdBy?: string; // option as it has been added later
createdAt?: string; // option as it has been added later
}
export interface ReadingExam extends ExamBase {
module: "reading";
parts: ReadingPart[];
type: "academic" | "general";
}
export interface ReadingPart {
@@ -24,14 +29,9 @@ export interface ReadingPart {
exercises: Exercise[];
}
export interface LevelExam {
export interface LevelExam extends ExamBase {
module: "level";
id: string;
parts: LevelPart[];
minTimer: number;
isDiagnostic: boolean;
variant?: Variant;
difficulty?: Difficulty;
}
export interface LevelPart {
@@ -39,14 +39,9 @@ export interface LevelPart {
exercises: Exercise[];
}
export interface ListeningExam {
export interface ListeningExam extends ExamBase {
parts: ListeningPart[];
id: string;
module: "listening";
minTimer: number;
isDiagnostic: boolean;
variant?: Variant;
difficulty?: Difficulty;
}
export interface ListeningPart {
@@ -72,14 +67,9 @@ export interface UserSolution {
isDisabled?: boolean;
}
export interface WritingExam {
export interface WritingExam extends ExamBase {
module: "writing";
id: string;
exercises: WritingExercise[];
minTimer: number;
isDiagnostic: boolean;
variant?: Variant;
difficulty?: Difficulty;
}
interface WordCounter {
@@ -87,15 +77,10 @@ interface WordCounter {
limit: number;
}
export interface SpeakingExam {
id: string;
export interface SpeakingExam extends ExamBase {
module: "speaking";
exercises: (SpeakingExercise | InteractiveSpeakingExercise)[];
minTimer: number;
isDiagnostic: boolean;
variant?: Variant;
instructorGender: InstructorGender;
difficulty?: Difficulty;
}
export type Exercise =

91
src/pages/(admin)/Lists/ExamList.tsx
View File

@@ -1,3 +1,4 @@
import { useMemo } from "react";
import { PERMISSIONS } from "@/constants/userPermissions";
import useExams from "@/hooks/useExams";
import useUsers from "@/hooks/useUsers";
@@ -7,7 +8,12 @@ import {Type, User} from "@/interfaces/user";
import useExamStore from "@/stores/examStore";
import { getExamById } from "@/utils/exams";
import { countExercises } from "@/utils/moduleUtils";
import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
import {
createColumnHelper,
flexRender,
getCoreRowModel,
useReactTable,
} from "@tanstack/react-table";
import axios from "axios";
import clsx from "clsx";
import { capitalize } from "lodash";
@@ -27,6 +33,23 @@ const columnHelper = createColumnHelper<Exam>();
export default function ExamList({ user }: { user: User }) {
const { exams, reload } = useExams();
const { users } = useUsers();
const parsedExams = useMemo(() => {
return exams.map((exam) => {
if (exam.createdBy) {
const user = users.find((u) => u.id === exam.createdBy);
if (!user) return exam;
return {
...exam,
createdBy: user.type === "developer" ? "system" : user.name,
};
}
return exam;
});
}, [exams, users]);
const setExams = useExamStore((state) => state.setExams);
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
@@ -36,9 +59,12 @@ export default function ExamList({user}: {user: User}) {
const loadExam = async (module: Module, examId: string) => {
const exam = await getExamById(module, examId.trim());
if (!exam) {
toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
toast.error(
"Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
{
toastId: "invalid-exam-id",
});
}
);
return;
}
@@ -50,7 +76,12 @@ export default function ExamList({user}: {user: User}) {
};
const deleteExam = async (exam: Exam) => {
if (!confirm(`Are you sure you want to delete this ${capitalize(exam.module)} exam?`)) return;
if (
!confirm(
`Are you sure you want to delete this ${capitalize(exam.module)} exam?`
)
)
return;
axios
.delete(`/api/exam/${exam.module}/${exam.id}`)
@@ -72,7 +103,11 @@ export default function ExamList({user}: {user: User}) {
};
const getTotalExercises = (exam: Exam) => {
if (exam.module === "reading" || exam.module === "listening" || exam.module === "level") {
if (
exam.module === "reading" ||
exam.module === "listening" ||
exam.module === "level"
) {
return countExercises(exam.parts.flatMap((x) => x.exercises));
}
@@ -86,7 +121,11 @@ export default function ExamList({user}: {user: User}) {
}),
columnHelper.accessor("module", {
header: "Module",
cell: (info) => <span className={CLASSES[info.getValue()]}>{capitalize(info.getValue())}</span>,
cell: (info) => (
<span className={CLASSES[info.getValue()]}>
{capitalize(info.getValue())}
</span>
),
}),
columnHelper.accessor((x) => getTotalExercises(x), {
header: "Exercises",
@@ -96,6 +135,21 @@ export default function ExamList({user}: {user: User}) {
header: "Timer",
cell: (info) => <>{info.getValue()} minute(s)</>,
}),
columnHelper.accessor("createdAt", {
header: "Created At",
cell: (info) => {
const value = info.getValue();
if (value) {
return new Date(value).toLocaleDateString();
}
return null;
},
}),
columnHelper.accessor("createdBy", {
header: "Created By",
cell: (info) => info.getValue(),
}),
{
header: "",
id: "actions",
@@ -105,11 +159,18 @@ export default function ExamList({user}: {user: User}) {
<div
data-tip="Load exam"
className="cursor-pointer tooltip"
onClick={async () => await loadExam(row.original.module, row.original.id)}>
onClick={async () =>
await loadExam(row.original.module, row.original.id)
}
>
<BsUpload className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div>
{PERMISSIONS.examManagement.delete.includes(user.type) && (
<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteExam(row.original)}>
<div
data-tip="Delete"
className="cursor-pointer tooltip"
onClick={() => deleteExam(row.original)}
>
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div>
)}
@@ -120,7 +181,7 @@ export default function ExamList({user}: {user: User}) {
];
const table = useReactTable({
data: exams,
data: parsedExams,
columns: defaultColumns,
getCoreRowModel: getCoreRowModel(),
});
@@ -132,7 +193,12 @@ export default function ExamList({user}: {user: User}) {
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th className="p-4 text-left" key={header.id}>
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</th>
))}
</tr>
@@ -140,7 +206,10 @@ export default function ExamList({user}: {user: User}) {
</thead>
<tbody className="px-2">
{table.getRowModel().rows.map((row) => (
<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
<tr
className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
key={row.id}
>
{row.getVisibleCells().map((cell) => (
<td className="px-4 py-2" key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}

2
src/pages/api/exam/[module]/index.ts
View File

@@ -47,7 +47,7 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
}
const {module} = req.query as {module: string};
const exam = {...req.body, module: module};
const exam = {...req.body, module: module, createdBy: req.session.user.id, createdAt: new Date().toISOString()};
await setDoc(doc(db, module, req.body.id), exam);
res.status(200).json(exam);