111 lines
3.5 KiB
TypeScript
111 lines
3.5 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import {Stat, StudentUser, User} from "@/interfaces/user";
|
|
import {useState} from "react";
|
|
import {averageLevelCalculator} from "@/utils/score";
|
|
import {groupByExam} from "@/utils/stats";
|
|
import {createColumnHelper} from "@tanstack/react-table";
|
|
import Checkbox from "@/components/Low/Checkbox";
|
|
import Table from "@/components/High/Table";
|
|
|
|
type StudentPerformanceItem = StudentUser & {entitiesLabel: string; group: string};
|
|
|
|
const StudentPerformanceList = ({items = [], stats}: {items: StudentPerformanceItem[]; stats: Stat[]}) => {
|
|
const [isShowingAmount, setIsShowingAmount] = useState(false);
|
|
|
|
const columnHelper = createColumnHelper<StudentPerformanceItem>();
|
|
|
|
const columns = [
|
|
columnHelper.accessor("name", {
|
|
header: "Student Name",
|
|
cell: (info) => info.getValue(),
|
|
}),
|
|
columnHelper.accessor("email", {
|
|
header: "E-mail",
|
|
cell: (info) => info.getValue(),
|
|
}),
|
|
columnHelper.accessor("studentID", {
|
|
header: "ID",
|
|
cell: (info) => info.getValue() || "N/A",
|
|
}),
|
|
columnHelper.accessor("group", {
|
|
header: "Group",
|
|
cell: (info) => info.getValue(),
|
|
}),
|
|
columnHelper.accessor("entitiesLabel", {
|
|
header: "Entities",
|
|
cell: (info) => info.getValue() || "N/A",
|
|
}),
|
|
columnHelper.accessor("levels.reading", {
|
|
header: "Reading",
|
|
cell: (info) =>
|
|
!isShowingAmount
|
|
? info.getValue() || 0
|
|
: `${Object.keys(groupByExam(stats.filter((x) => x.module === "reading" && x.user === info.row.original.id))).length} exams`,
|
|
}),
|
|
columnHelper.accessor("levels.listening", {
|
|
header: "Listening",
|
|
cell: (info) =>
|
|
!isShowingAmount
|
|
? info.getValue() || 0
|
|
: `${Object.keys(groupByExam(stats.filter((x) => x.module === "listening" && x.user === info.row.original.id))).length} exams`,
|
|
}),
|
|
columnHelper.accessor("levels.writing", {
|
|
header: "Writing",
|
|
cell: (info) =>
|
|
!isShowingAmount
|
|
? info.getValue() || 0
|
|
: `${Object.keys(groupByExam(stats.filter((x) => x.module === "writing" && x.user === info.row.original.id))).length} exams`,
|
|
}),
|
|
columnHelper.accessor("levels.speaking", {
|
|
header: "Speaking",
|
|
cell: (info) =>
|
|
!isShowingAmount
|
|
? info.getValue() || 0
|
|
: `${Object.keys(groupByExam(stats.filter((x) => x.module === "speaking" && x.user === info.row.original.id))).length} exams`,
|
|
}),
|
|
columnHelper.accessor("levels.level", {
|
|
header: "Level",
|
|
cell: (info) =>
|
|
!isShowingAmount
|
|
? info.getValue() || 0
|
|
: `${Object.keys(groupByExam(stats.filter((x) => x.module === "level" && x.user === info.row.original.id))).length} exams`,
|
|
}),
|
|
columnHelper.accessor("levels", {
|
|
id: "overall_level",
|
|
header: "Overall",
|
|
cell: (info) =>
|
|
!isShowingAmount
|
|
? averageLevelCalculator(
|
|
items,
|
|
stats.filter((x) => x.user === info.row.original.id),
|
|
).toFixed(1)
|
|
: `${Object.keys(groupByExam(stats.filter((x) => x.user === info.row.original.id))).length} exams`,
|
|
}),
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 w-full h-full">
|
|
<Checkbox isChecked={isShowingAmount} onChange={setIsShowingAmount}>
|
|
Show Utilization
|
|
</Checkbox>
|
|
<Table<StudentPerformanceItem>
|
|
data={items.sort(
|
|
(a, b) =>
|
|
averageLevelCalculator(
|
|
items,
|
|
stats.filter((x) => x.user === b.id),
|
|
) -
|
|
averageLevelCalculator(
|
|
items,
|
|
stats.filter((x) => x.user === a.id),
|
|
),
|
|
)}
|
|
columns={columns}
|
|
searchFields={[["name"], ["email"], ["studentID"], ["entitiesLabel"], ["group"]]}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StudentPerformanceList;
|