ENCOA-245 & ENCOA-240

src/pages/assignments/[id].tsx

@@ -2,13 +2,13 @@ import Button from "@/components/Low/Button";
 import ProgressBar from "@/components/Low/ProgressBar";
 import Modal from "@/components/Modal";
 import useUsers from "@/hooks/useUsers";
-import { Module } from "@/interfaces";
+import { Grading, Module } from "@/interfaces";
 import { Assignment } from "@/interfaces/results";
 import { Group, Stat, User } from "@/interfaces/user";
 import useExamStore from "@/stores/exam";
 import { getExamById } from "@/utils/exams";
 import { sortByModule } from "@/utils/moduleUtils";
-import { calculateBandScore } from "@/utils/score";
+import { calculateBandScore, getGradingLabel } from "@/utils/score";
 import { convertToUserSolutions } from "@/utils/stats";
 import { getUserName } from "@/utils/users";
 import axios from "axios";
@@ -34,6 +34,7 @@ import Separator from "@/components/Low/Separator";
 import Link from "next/link";
 import { requestUser } from "@/utils/api";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
+import { getGradingSystemByEntity } from "@/utils/grading.be";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
 	const user = await requestUser(req, res)
@@ -58,8 +59,9 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 	if (!doesEntityAllow(user, entity, 'view_assignments')) return redirect("/assignments")
 
 	const users = await (checkAccess(user, ["developer", "admin"]) ? getUsers() : getEntityUsers(entity.id));
+	const gradingSystem = await getGradingSystemByEntity(entity.id)
 
-	return { props: serialize({ user, users, entity, assignment }) };
+	return { props: serialize({ user, users, entity, assignment, gradingSystem }) };
 }, sessionOptions);
 
 interface Props {
@@ -67,9 +69,10 @@ interface Props {
 	users: User[];
 	assignment: Assignment;
 	entity?: EntityWithRoles
+	gradingSystem?: Grading
 }
 
-export default function AssignmentView({ user, users, entity, assignment }: Props) {
+export default function AssignmentView({ user, users, entity, assignment, gradingSystem }: Props) {
 	const canDeleteAssignment = useEntityPermission(user, entity, 'delete_assignment')
 	const canStartAssignment = useEntityPermission(user, entity, 'start_assignment')
 
@@ -169,6 +172,24 @@ export default function AssignmentView({ user, users, entity, assignment }: Prop
 			.map((x) => ({ module: x as Module, ...scores[x as Module] }));
 	};
 
+	const levelAverage = (aggregatedLevels: { module: Module, level: number }[]) =>
+		aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length
+
+	const renderLevelScore = (stats: Stat[], aggregatedLevels: { module: Module, level: number }[]) => {
+		const defaultLevelScore = levelAverage(aggregatedLevels).toFixed(1)
+		if (!stats.every(s => s.module === "level")) return defaultLevelScore
+		if (!gradingSystem) return defaultLevelScore
+
+		const score = {
+			correct: stats.reduce((acc, curr) => acc + curr.score.correct, 0),
+			total: stats.reduce((acc, curr) => acc + curr.score.total, 0)
+		}
+
+		const level: number = calculateBandScore(score.correct, score.total, "level", user.focus);
+
+		return getGradingLabel(level, gradingSystem.steps)
+	}
+
 	const customContent = (stats: Stat[], user: string, focus: "academic" | "general") => {
 		const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
 		const total = stats.reduce((accumulator, current) => accumulator + current.score.total, 0);
@@ -219,8 +240,8 @@ export default function AssignmentView({ user, users, entity, assignment }: Prop
 							correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
 							correct / total < 0.3 && "text-mti-rose",
 						)}>
-						Level{" "}
-						{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
+						Level{' '}
+						{renderLevelScore(stats, aggregatedLevels)}
 					</span>
 				</div>