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

Merge remote-tracking branch 'origin/develop' into feature/training-content

Browse Source
This commit is contained in:
Carlos Mesquita
2024-08-27 09:44:22 +01:00
parent cc5be99b0f 65dc3e92d0
commit c464375414
12 changed files with 646 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/(admin)/BatchCreateUser.tsx
View File

@@ -104,7 +104,7 @@ export default function BatchCreateUser({user}: {user: User}) {
const information = uniqBy(
rows
.map((row) => {
const [firstName, lastName, country, passport_id, email, phone, group, studentID, corporate] = row as string[];
const [firstName, lastName, studentID, passport_id, email, phone, corporate, group, country] = row as string[];
const countryItem =
countryCodes.findOne("countryCode" as any, country.toUpperCase()) ||
countryCodes.all().find((x) => x.countryNameEn.toLowerCase() === country.toLowerCase());
@@ -179,13 +179,13 @@ export default function BatchCreateUser({user}: {user: User}) {
<tr>
<th className="border border-neutral-200 px-2 py-1">First Name</th>
<th className="border border-neutral-200 px-2 py-1">Last Name</th>
<th className="border border-neutral-200 px-2 py-1">Country</th>
<th className="border border-neutral-200 px-2 py-1">Student ID</th>
<th className="border border-neutral-200 px-2 py-1">Passport/National ID</th>
<th className="border border-neutral-200 px-2 py-1">E-mail</th>
<th className="border border-neutral-200 px-2 py-1">Phone Number</th>
<th className="border border-neutral-200 px-2 py-1">Group Name</th>
<th className="border border-neutral-200 px-2 py-1">Student ID</th>
{user?.type !== "corporate" && <th className="border border-neutral-200 px-2 py-1">Corporate (e-mail)</th>}
<th className="border border-neutral-200 px-2 py-1">Group Name</th>
<th className="border border-neutral-200 px-2 py-1">Country</th>
</tr>
</thead>
</table>

128
src/pages/(admin)/CorporateGradingSystem.tsx Normal file
View File

@@ -0,0 +1,128 @@
import Button from "@/components/Low/Button";
import Input from "@/components/Low/Input";
import {Grading, Step} from "@/interfaces";
import {User} from "@/interfaces/user";
import {CEFR_STEPS, GENERAL_STEPS, IELTS_STEPS, TOFEL_STEPS} from "@/resources/grading";
import axios from "axios";
import {useEffect, useState} from "react";
import {BsPlusCircle, BsTrash} from "react-icons/bs";
import {toast} from "react-toastify";
const areStepsOverlapped = (steps: Step[]) => {
for (let i = 0; i < steps.length; i++) {
if (i === 0) continue;
const step = steps[i];
const previous = steps[i - 1];
if (previous.max >= step.min) return true;
}
return false;
};
export default function CorporateGradingSystem({user, defaultSteps, mutate}: {user: User; defaultSteps: Step[]; mutate: (steps: Step[]) => void}) {
const [isLoading, setIsLoading] = useState(false);
const [steps, setSteps] = useState<Step[]>(defaultSteps || []);
const saveGradingSystem = () => {
if (!steps.every((x) => x.min < x.max)) return toast.error("One of your steps has a minimum threshold inferior to its superior threshold.");
if (areStepsOverlapped(steps)) return toast.error("There seems to be an overlap in one of your steps.");
if (
steps.reduce((acc, curr) => {
console.log(acc - (curr.max - curr.min + 1));
return acc - (curr.max - curr.min + 1);
}, 100) > 0
)
return toast.error("There seems to be an open interval in your steps.");
setIsLoading(true);
axios
.post("/api/grading", {user: user.id, steps})
.then(() => toast.success("Your grading system has been saved!"))
.then(() => mutate(steps))
.catch(() => toast.error("Something went wrong, please try again later"))
.finally(() => setIsLoading(false));
};
return (
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
<label className="font-normal text-base text-mti-gray-dim">Grading System</label>
<label className="font-normal text-base text-mti-gray-dim">Preset Systems</label>
<div className="grid grid-cols-4 gap-4">
<Button variant="outline" onClick={() => setSteps(CEFR_STEPS)}>
CEFR
</Button>
<Button variant="outline" onClick={() => setSteps(GENERAL_STEPS)}>
General English
</Button>
<Button variant="outline" onClick={() => setSteps(IELTS_STEPS)}>
IELTS
</Button>
<Button variant="outline" onClick={() => setSteps(TOFEL_STEPS)}>
TOFEL iBT
</Button>
</div>
{steps.map((step, index) => (
<>
<div className="flex items-center gap-4">
<div className="grid grid-cols-3 gap-4 w-full" key={step.min}>
<Input
label="Min. Percentage"
value={step.min}
type="number"
disabled={index === 0 || isLoading}
onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? {...x, min: parseInt(e)} : x)))}
name="min"
/>
<Input
label="Grade"
value={step.label}
type="text"
disabled={isLoading}
onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? {...x, label: e} : x)))}
name="min"
/>
<Input
label="Max. Percentage"
value={step.max}
type="number"
disabled={index === steps.length - 1 || isLoading}
onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? {...x, max: parseInt(e)} : x)))}
name="max"
/>
</div>
{index !== 0 && index !== steps.length - 1 && (
<button
disabled={isLoading}
className="pt-9 text-xl group"
onClick={() => setSteps((prev) => prev.filter((_, i) => i !== index))}>
<div className="w-full h-full flex items-center justify-center group-hover:bg-neutral-200 rounded-full p-3 transition ease-in-out duration-300">
<BsTrash />
</div>
</button>
)}
</div>
{index < steps.length - 1 && (
<Button
className="w-full flex items-center justify-center"
disabled={isLoading}
onClick={() => {
const item = {min: steps[index === 0 ? 0 : index - 1].max + 1, max: steps[index + 1].min - 1, label: ""};
setSteps((prev) => [...prev.slice(0, index + 1), item, ...prev.slice(index + 1, steps.length)]);
}}>
<BsPlusCircle />
</Button>
)}
</>
))}
<Button onClick={saveGradingSystem} isLoading={isLoading} disabled={isLoading} className="mt-8">
Save Grading System
</Button>
</div>
);
}

79
src/pages/(exam)/ExamPage.tsx
View File

@@ -1,6 +1,6 @@
/* eslint-disable @next/next/no-img-element */
import { Module } from "@/interfaces";
import { useEffect, useState } from "react";
import {Module} from "@/interfaces";
import {useEffect, useState} from "react";
import AbandonPopup from "@/components/AbandonPopup";
import Layout from "@/components/High/Layout";
@@ -12,24 +12,25 @@ import Selection from "@/exams/Selection";
import Speaking from "@/exams/Speaking";
import Writing from "@/exams/Writing";
import useUser from "@/hooks/useUser";
import { Exam, LevelExam, UserSolution, Variant } from "@/interfaces/exam";
import { Stat } from "@/interfaces/user";
import {Exam, LevelExam, UserSolution, Variant} from "@/interfaces/exam";
import {Stat} from "@/interfaces/user";
import useExamStore from "@/stores/examStore";
import { evaluateSpeakingAnswer, evaluateWritingAnswer } from "@/utils/evaluation";
import { defaultExamUserSolutions, getExam } from "@/utils/exams";
import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
import {defaultExamUserSolutions, getExam} from "@/utils/exams";
import axios from "axios";
import { useRouter } from "next/router";
import { toast, ToastContainer } from "react-toastify";
import { v4 as uuidv4 } from "uuid";
import {useRouter} from "next/router";
import {toast, ToastContainer} from "react-toastify";
import {v4 as uuidv4} from "uuid";
import useSessions from "@/hooks/useSessions";
import ShortUniqueId from "short-unique-id";
import clsx from "clsx";
import useGradingSystem from "@/hooks/useGrading";
interface Props {
page: "exams" | "exercises";
}
export default function ExamPage({ page }: Props) {
export default function ExamPage({page}: Props) {
const [variant, setVariant] = useState<Variant>("full");
const [avoidRepeated, setAvoidRepeated] = useState(false);
const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
@@ -44,21 +45,21 @@ export default function ExamPage({ page }: Props) {
const assignment = useExamStore((state) => state.assignment);
const initialTimeSpent = useExamStore((state) => state.timeSpent);
const { exam, setExam } = useExamStore((state) => state);
const { exams, setExams } = useExamStore((state) => state);
const { sessionId, setSessionId } = useExamStore((state) => state);
const { partIndex, setPartIndex } = useExamStore((state) => state);
const { moduleIndex, setModuleIndex } = useExamStore((state) => state);
const { questionIndex, setQuestionIndex } = useExamStore((state) => state);
const { exerciseIndex, setExerciseIndex } = useExamStore((state) => state);
const { userSolutions, setUserSolutions } = useExamStore((state) => state);
const { showSolutions, setShowSolutions } = useExamStore((state) => state);
const { selectedModules, setSelectedModules } = useExamStore((state) => state);
const { inactivity, setInactivity } = useExamStore((state) => state);
const { bgColor, setBgColor } = useExamStore((state) => state);
const setShuffleMaps = useExamStore((state) => state.setShuffles)
const {exam, setExam} = useExamStore((state) => state);
const {exams, setExams} = useExamStore((state) => state);
const {sessionId, setSessionId} = useExamStore((state) => state);
const {partIndex, setPartIndex} = useExamStore((state) => state);
const {moduleIndex, setModuleIndex} = useExamStore((state) => state);
const {questionIndex, setQuestionIndex} = useExamStore((state) => state);
const {exerciseIndex, setExerciseIndex} = useExamStore((state) => state);
const {userSolutions, setUserSolutions} = useExamStore((state) => state);
const {showSolutions, setShowSolutions} = useExamStore((state) => state);
const {selectedModules, setSelectedModules} = useExamStore((state) => state);
const {inactivity, setInactivity} = useExamStore((state) => state);
const {bgColor, setBgColor} = useExamStore((state) => state);
const setShuffleMaps = useExamStore((state) => state.setShuffles);
const { user } = useUser({ redirectTo: "/login" });
const {user} = useUser({redirectTo: "/login"});
const router = useRouter();
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -205,9 +206,7 @@ export default function ExamPage({ page }: Props) {
});
useEffect(() => {
if (showSolutions) {
setModuleIndex(-1);
}
if (showSolutions) setModuleIndex(-1);
}, [setModuleIndex, showSolutions]);
useEffect(() => {
@@ -261,11 +260,11 @@ export default function ExamPage({ page }: Props) {
date: new Date().getTime(),
isDisabled: solution.isDisabled,
shuffleMaps: solution.shuffleMaps,
...(assignment ? { assignment: assignment.id } : {}),
...(assignment ? {assignment: assignment.id} : {}),
}));
axios
.post<{ ok: boolean }>("/api/stats", newStats)
.post<{ok: boolean}>("/api/stats", newStats)
.then((response) => setHasBeenUploaded(response.data.ok))
.catch(() => setHasBeenUploaded(false));
}
@@ -277,18 +276,13 @@ export default function ExamPage({ page }: Props) {
}, [statsAwaitingEvaluation]);
useEffect(() => {
if (statsAwaitingEvaluation.length > 0) {
checkIfStatsHaveBeenEvaluated(statsAwaitingEvaluation);
}
if (statsAwaitingEvaluation.length > 0) checkIfStatsHaveBeenEvaluated(statsAwaitingEvaluation);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [statsAwaitingEvaluation]);
useEffect(() => {
if (exam && exam.module === "level" && exam.parts[0].intro && !showSolutions) {
setBgColor("bg-ielts-level-light");
}
}, [exam, showSolutions, setBgColor])
if (exam && exam.module === "level" && exam.parts[0].intro && !showSolutions) setBgColor("bg-ielts-level-light");
}, [exam, showSolutions, setBgColor]);
const checkIfStatsHaveBeenEvaluated = (ids: string[]) => {
setTimeout(async () => {
@@ -333,7 +327,7 @@ export default function ExamPage({ page }: Props) {
),
}),
);
return Object.assign(exam, { parts });
return Object.assign(exam, {parts});
}
const exercises = exam.exercises.map((x) =>
@@ -341,7 +335,7 @@ export default function ExamPage({ page }: Props) {
userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions,
}),
);
return Object.assign(exam, { exercises });
return Object.assign(exam, {exercises});
};
const onFinish = async (solutions: UserSolution[]) => {
@@ -396,7 +390,7 @@ export default function ExamPage({ page }: Props) {
correct: number;
}[] => {
const scores: {
[key in Module]: { total: number; missing: number; correct: number };
[key in Module]: {total: number; missing: number; correct: number};
} = {
reading: {
total: 0,
@@ -438,7 +432,7 @@ export default function ExamPage({ page }: Props) {
return Object.keys(scores)
.filter((x) => scores[x as Module].total > 0)
.map((x) => ({ module: x as Module, ...scores[x as Module] }));
.map((x) => ({module: x as Module, ...scores[x as Module]}));
};
const renderScreen = () => {
@@ -472,7 +466,7 @@ export default function ExamPage({ page }: Props) {
onViewResults={(index?: number) => {
if (exams[0].module === "level") {
const levelExam = exams[0] as LevelExam;
const allExercises = levelExam.parts.flatMap(part => part.exercises);
const allExercises = levelExam.parts.flatMap((part) => part.exercises);
const exerciseOrderMap = new Map(allExercises.map((ex, index) => [ex.id, index]));
const orderedSolutions = userSolutions.slice().sort((a, b) => {
const indexA = exerciseOrderMap.get(a.exercise) ?? Infinity;
@@ -480,7 +474,6 @@ export default function ExamPage({ page }: Props) {
return indexA - indexB;
});
setUserSolutions(orderedSolutions);
} else {
setUserSolutions(userSolutions);
}

75
src/pages/api/grading/index.ts Normal file
View File

@@ -0,0 +1,75 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type {NextApiRequest, NextApiResponse} from "next";
import {app} from "@/firebase";
import {getFirestore, collection, getDocs, setDoc, doc, getDoc, deleteDoc, query} from "firebase/firestore";
import {withIronSessionApiRoute} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {CorporateUser, Group} from "@/interfaces/user";
import {Discount, Package} from "@/interfaces/paypal";
import {v4} from "uuid";
import {checkAccess} from "@/utils/permissions";
import {CEFR_STEPS} from "@/resources/grading";
import {getCorporateUser} from "@/resources/user";
import {getUserCorporate} from "@/utils/groups";
import {Grading} from "@/interfaces";
import {getGroupsForUser} from "@/utils/groups.be";
import {uniq} from "lodash";
import {getUser} from "@/utils/users.be";
const db = getFirestore(app);
export default withIronSessionApiRoute(handler, sessionOptions);
async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method === "GET") await get(req, res);
if (req.method === "POST") await post(req, res);
}
async function get(req: NextApiRequest, res: NextApiResponse) {
if (!req.session.user) {
res.status(401).json({ok: false});
return;
}
const snapshot = await getDoc(doc(db, "grading", req.session.user.id));
if (snapshot.exists()) return res.status(200).json(snapshot.data());
if (req.session.user.type !== "teacher" && req.session.user.type !== "student")
return res.status(200).json({steps: CEFR_STEPS, user: req.session.user.id});
const corporate = await getUserCorporate(req.session.user.id);
if (!corporate) return res.status(200).json(CEFR_STEPS);
const corporateSnapshot = await getDoc(doc(db, "grading", corporate.id));
if (corporateSnapshot.exists()) return res.status(200).json(snapshot.data());
return res.status(200).json({steps: CEFR_STEPS, user: req.session.user.id});
}
async function post(req: NextApiRequest, res: NextApiResponse) {
if (!req.session.user) {
res.status(401).json({ok: false});
return;
}
if (!checkAccess(req.session.user, ["admin", "developer", "mastercorporate", "corporate"]))
return res.status(403).json({
ok: false,
reason: "You do not have permission to create a new grading system",
});
const body = req.body as Grading;
await setDoc(doc(db, "grading", req.session.user.id), body);
if (req.session.user.type === "mastercorporate") {
const groups = await getGroupsForUser(req.session.user.id);
const participants = uniq(groups.flatMap((x) => x.participants));
const participantUsers = await Promise.all(participants.map(getUser));
const corporateUsers = participantUsers.filter((x) => x.type === "corporate") as CorporateUser[];
await Promise.all(corporateUsers.map(async (g) => await setDoc(doc(db, "grading", g.id), body)));
}
res.status(200).json({ok: true});
}

26
src/pages/settings.tsx
View File

@@ -19,8 +19,11 @@ import usePermissions from "@/hooks/usePermissions";
import {useState} from "react";
import Modal from "@/components/Modal";
import IconCard from "@/dashboards/IconCard";
import {BsCode, BsCodeSquare, BsPeopleFill, BsPersonFill} from "react-icons/bs";
import {BsCode, BsCodeSquare, BsGearFill, BsPeopleFill, BsPersonFill} from "react-icons/bs";
import UserCreator from "./(admin)/UserCreator";
import CorporateGradingSystem from "./(admin)/CorporateGradingSystem";
import useGradingSystem from "@/hooks/useGrading";
import {CEFR_STEPS} from "@/resources/grading";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -50,6 +53,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
export default function Admin() {
const {user} = useUser({redirectTo: "/login"});
const {permissions} = usePermissions(user?.id || "");
const {gradingSystem, mutate} = useGradingSystem();
const [modalOpen, setModalOpen] = useState<string>();
@@ -71,14 +75,21 @@ export default function Admin() {
<BatchCreateUser user={user} />
</Modal>
<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
<CodeGenerator user={user} />
<BatchCodeGenerator user={user} />
</Modal>
<Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
<BatchCodeGenerator user={user} />
<CodeGenerator user={user} />
</Modal>
<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
<UserCreator user={user} />
</Modal>
<Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
<CorporateGradingSystem
user={user}
defaultSteps={gradingSystem?.steps || CEFR_STEPS}
mutate={(steps) => mutate({user: user.id, steps})}
/>
</Modal>
<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
<ExamLoader />
@@ -112,6 +123,15 @@ export default function Admin() {
className="w-full h-full"
onClick={() => setModalOpen("batchCreateUser")}
/>
{checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && (
<IconCard
Icon={BsGearFill}
label="Grading System"
color="purple"
className="w-full h-full col-span-2"
onClick={() => setModalOpen("gradingSystem")}
/>
)}
</div>
)}
</section>