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

Merge, do not push to develop yet, Listening.tsx is not updated

Browse Source
This commit is contained in:
Carlos-Mesquita
2024-11-26 10:33:02 +00:00
parent 2ed4e6509e 39ff336af5
commit de08164dd8
44 changed files with 1989 additions and 1452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Exercises/FillBlanks/index.tsx
View File

@@ -8,6 +8,7 @@ import { CommonProps } from "../types";
import { v4 } from "uuid"; import { v4 } from "uuid";
import MCDropdown from "./MCDropdown"; import MCDropdown from "./MCDropdown";
import useExamStore, { usePersistentExamStore } from "@/stores/exam"; import useExamStore, { usePersistentExamStore } from "@/stores/exam";
import PracticeBadge from "@/components/Low/PracticeBadge";
const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
id, id,
@@ -166,7 +167,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{headerButtons} {headerButtons}
<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (!headerButtons && !footerButtons) && "mb-20")}> <div className={clsx("flex flex-col gap-4 mt-4 h-full w-full relative", (!headerButtons && !footerButtons) && "mb-20")}>
{variant !== "mc" && ( {variant !== "mc" && (
<span className="text-sm w-full leading-6"> <span className="text-sm w-full leading-6">
{prompt.split("\\n").map((line, index) => ( {prompt.split("\\n").map((line, index) => (
@@ -177,6 +178,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
))} ))}
</span> </span>
)} )}
{isPractice && <PracticeBadge className="w-fit self-end" />}
<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">{memoizedLines}</span> <span className="bg-mti-gray-smoke rounded-xl px-5 py-6">{memoizedLines}</span>
{variant !== "mc" && ( {variant !== "mc" && (
<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-4"> <div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-4">

220
src/components/Exercises/InteractiveSpeaking/old.tsx
View File

@@ -1,220 +0,0 @@
import { InteractiveSpeakingExercise } from "@/interfaces/exam";
import { CommonProps } from "../types";
import { useEffect, useState } from "react";
import { BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPlayCircle, BsTrashFill } from "react-icons/bs";
import dynamic from "next/dynamic";
import useExamStore, { usePersistentExamStore } from "@/stores/exam";
const Waveform = dynamic(() => import("../../Waveform"), { ssr: false });
const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), {
ssr: false,
});
const InteractiveSpeaking: React.FC<InteractiveSpeakingExercise & CommonProps> = ({
id,
title,
first_title,
second_title,
examID,
type,
prompts,
userSolutions,
isPractice = false,
registerSolution,
headerButtons,
footerButtons,
preview,
}) => {
const [recordingDuration, setRecordingDuration] = useState(0);
const [isRecording, setIsRecording] = useState(false);
const [mediaBlob, setMediaBlob] = useState<string>();
const [answers, setAnswers] = useState<{ prompt: string; blob: string; questionIndex: number }[]>([]);
const examState = useExamStore((state) => state);
const persistentExamState = usePersistentExamStore((state) => state);
const { questionIndex } = !preview ? examState : persistentExamState;
useEffect(() => {
setAnswers((prev) => [...prev.filter(x => x.questionIndex !== questionIndex), {
questionIndex: questionIndex,
prompt: prompts[questionIndex].text,
blob: mediaBlob!,
}]);
setMediaBlob(undefined);
}, [answers, mediaBlob, prompts, questionIndex]);
useEffect(() => {
registerSolution(() => ({
exercise: id,
solutions: answers,
score: { correct: 100, total: 100, missing: 0 },
type,
isPractice
}));
}, [id, answers, mediaBlob, type, isPractice, prompts, registerSolution]);
useEffect(() => {
if (userSolutions.length > 0 && answers.length === 0) {
const solutions = userSolutions as unknown as typeof answers;
setAnswers(solutions);
if (!mediaBlob) setMediaBlob(solutions.find((x) => x.questionIndex === questionIndex)?.blob);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userSolutions, mediaBlob, answers]);
useEffect(() => {
let recordingInterval: NodeJS.Timer | undefined = undefined;
if (isRecording) {
recordingInterval = setInterval(() => setRecordingDuration((prev) => prev + 1), 1000);
} else if (recordingInterval) {
clearInterval(recordingInterval);
}
return () => {
if (recordingInterval) clearInterval(recordingInterval);
};
}, [isRecording]);
return (
<div className="flex flex-col gap-4 mt-4 w-full">
{headerButtons}
<div className="flex flex-col h-full w-full gap-9">
<div className="flex flex-col w-full gap-8 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
<div className="flex flex-col gap-3">
<span className="font-semibold">{!!first_title && !!second_title ? `${first_title} & ${second_title}` : title}</span>
</div>
{prompts && prompts.length > 0 && (
<div className="flex flex-col gap-4 w-full items-center">
<video key={questionIndex} autoPlay controls className="max-w-3xl rounded-xl">
<source src={prompts[questionIndex].video_url} />
</video>
</div>
)}
</div>
<ReactMediaRecorder
audio
key={questionIndex}
onStop={(blob) => setMediaBlob(blob)}
render={({ status, startRecording, stopRecording, pauseRecording, resumeRecording, clearBlobUrl, mediaBlobUrl }) => (
<div className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center">
<p className="text-base font-normal">Record your answer:</p>
<div className="flex gap-8 items-center justify-center py-8">
{status === "idle" && (
<>
<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
{status === "idle" && (
<BsMicFill
onClick={() => {
setRecordingDuration(0);
startRecording();
setIsRecording(true);
}}
className="h-5 w-5 text-mti-gray-cool cursor-pointer"
/>
)}
</>
)}
{status === "recording" && (
<>
<div className="flex gap-4 items-center">
<span className="text-xs w-9">
{Math.floor(recordingDuration / 60)
.toString(10)
.padStart(2, "0")}
:
{Math.floor(recordingDuration % 60)
.toString(10)
.padStart(2, "0")}
</span>
</div>
<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
<div className="flex gap-4 items-center">
<BsPauseCircle
onClick={() => {
setIsRecording(false);
pauseRecording();
}}
className="text-red-500 w-8 h-8 cursor-pointer"
/>
<BsCheckCircleFill
onClick={() => {
setIsRecording(false);
stopRecording();
}}
className="text-mti-purple-light w-8 h-8 cursor-pointer"
/>
</div>
</>
)}
{status === "paused" && (
<>
<div className="flex gap-4 items-center">
<span className="text-xs w-9">
{Math.floor(recordingDuration / 60)
.toString(10)
.padStart(2, "0")}
:
{Math.floor(recordingDuration % 60)
.toString(10)
.padStart(2, "0")}
</span>
</div>
<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
<div className="flex gap-4 items-center">
<BsPlayCircle
onClick={() => {
setIsRecording(true);
resumeRecording();
}}
className="text-mti-purple-light w-8 h-8 cursor-pointer"
/>
<BsCheckCircleFill
onClick={() => {
setIsRecording(false);
stopRecording();
}}
className="text-mti-purple-light w-8 h-8 cursor-pointer"
/>
</div>
</>
)}
{status === "stopped" && mediaBlobUrl && (
<>
<Waveform audio={mediaBlobUrl} waveColor="#FCDDEC" progressColor="#EF5DA8" />
<div className="flex gap-4 items-center">
<BsTrashFill
className="text-mti-gray-cool cursor-pointer w-5 h-5"
onClick={() => {
setRecordingDuration(0);
clearBlobUrl();
setMediaBlob(undefined);
}}
/>
<BsMicFill
onClick={() => {
clearBlobUrl();
setRecordingDuration(0);
startRecording();
setIsRecording(true);
setMediaBlob(undefined);
}}
className="h-5 w-5 text-mti-gray-cool cursor-pointer"
/>
</div>
</>
)}
</div>
</div>
)}
/>
</div>
{footerButtons}
</div>
);
}
export default InteractiveSpeaking;

3
src/components/Exercises/MatchSentences/index.tsx
View File

@@ -4,6 +4,7 @@ import { Fragment, useCallback, useEffect, useState } from "react";
import { CommonProps } from "../types"; import { CommonProps } from "../types";
import { DndContext, DragEndEvent } from "@dnd-kit/core"; import { DndContext, DragEndEvent } from "@dnd-kit/core";
import { DraggableOptionArea, DroppableQuestionArea } from "./DragNDrop"; import { DraggableOptionArea, DroppableQuestionArea } from "./DragNDrop";
import PracticeBadge from "../../Low/PracticeBadge";
const MatchSentences: React.FC<MatchSentencesExercise & CommonProps> = ({ const MatchSentences: React.FC<MatchSentencesExercise & CommonProps> = ({
id, id,
@@ -61,7 +62,7 @@ const MatchSentences: React.FC<MatchSentencesExercise & CommonProps> = ({
</Fragment> </Fragment>
))} ))}
</span> </span>
{isPractice && <PracticeBadge className="w-fit self-end" />}
<DndContext onDragEnd={handleDragEnd}> <DndContext onDragEnd={handleDragEnd}>
<div className="flex flex-col gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6"> <div className="flex flex-col gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">

10
src/components/Exercises/MultipleChoice/Question.tsx
View File

@@ -1,4 +1,5 @@
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
import PracticeBadge from "@/components/Low/PracticeBadge";
import { MultipleChoiceQuestion } from "@/interfaces/exam"; import { MultipleChoiceQuestion } from "@/interfaces/exam";
import clsx from "clsx"; import clsx from "clsx";
import reactStringReplace from "react-string-replace"; import reactStringReplace from "react-string-replace";
@@ -8,6 +9,7 @@ interface Props {
userSolution: string | undefined; userSolution: string | undefined;
onSelectOption?: (option: string) => void; onSelectOption?: (option: string) => void;
showSolution?: boolean; showSolution?: boolean;
isPractice?: boolean
} }
const Question: React.FC<MultipleChoiceQuestion & Props> = ({ const Question: React.FC<MultipleChoiceQuestion & Props> = ({
@@ -17,6 +19,7 @@ const Question: React.FC<MultipleChoiceQuestion & Props> = ({
options, options,
userSolution, userSolution,
onSelectOption, onSelectOption,
isPractice,
}) => { }) => {
const renderPrompt = (prompt: string) => { const renderPrompt = (prompt: string) => {
return reactStringReplace(prompt, /(<u>.*?<\/u>)/g, (match) => { return reactStringReplace(prompt, /(<u>.*?<\/u>)/g, (match) => {
@@ -26,11 +29,12 @@ const Question: React.FC<MultipleChoiceQuestion & Props> = ({
}; };
return ( return (
<div className="flex flex-col gap-8"> <div className="flex flex-col gap-8 relative">
{isPractice && <PracticeBadge className="absolute -top-4 -right-12" />}
{isNaN(Number(id)) ? ( {isNaN(Number(id)) ? (
<span className="text-lg">{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span> <span className={clsx("text-lg", isPractice && "text-mti-red")}>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span>
) : ( ) : (
<span className="text-lg"> <span className={clsx("text-lg", isPractice && "text-mti-red")}>
<> <>
{id} - <span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span> {id} - <span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span>
</> </>

4
src/components/Exercises/MultipleChoice/index.tsx
View File

@@ -4,6 +4,7 @@ import clsx from "clsx";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { CommonProps } from "../types"; import { CommonProps } from "../types";
import Question from "./Question"; import Question from "./Question";
import PracticeBadge from "../../Low/PracticeBadge";
const MultipleChoice: React.FC<MultipleChoiceExercise & CommonProps> = ({ const MultipleChoice: React.FC<MultipleChoiceExercise & CommonProps> = ({
@@ -81,6 +82,7 @@ const MultipleChoice: React.FC<MultipleChoiceExercise & CommonProps> = ({
key={question.id} className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8"> key={question.id} className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
<Question <Question
{...question} {...question}
isPractice={isPractice}
userSolution={answers.find((x) => question.id === x.question)?.option} userSolution={answers.find((x) => question.id === x.question)?.option}
onSelectOption={(option) => onSelectOption(option, question)} onSelectOption={(option) => onSelectOption(option, question)}
/> />
@@ -93,6 +95,7 @@ const MultipleChoice: React.FC<MultipleChoiceExercise & CommonProps> = ({
{questionIndex < questions.length && ( {questionIndex < questions.length && (
<Question <Question
{...questions[questionIndex]} {...questions[questionIndex]}
isPractice={isPractice}
userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option} userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
onSelectOption={(option) => onSelectOption(option, questions[questionIndex])} onSelectOption={(option) => onSelectOption(option, questions[questionIndex])}
/> />
@@ -103,6 +106,7 @@ const MultipleChoice: React.FC<MultipleChoiceExercise & CommonProps> = ({
<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8"> <div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
<Question <Question
{...questions[questionIndex + 1]} {...questions[questionIndex + 1]}
isPractice={isPractice}
userSolution={answers.find((x) => questions[questionIndex + 1].id === x.question)?.option} userSolution={answers.find((x) => questions[questionIndex + 1].id === x.question)?.option}
onSelectOption={(option) => onSelectOption(option, questions[questionIndex + 1])} onSelectOption={(option) => onSelectOption(option, questions[questionIndex + 1])}
/> />

3
src/components/Exercises/Speaking.tsx
View File

@@ -6,6 +6,7 @@ import dynamic from "next/dynamic";
import Button from "../Low/Button"; import Button from "../Low/Button";
import Modal from "../Modal"; import Modal from "../Modal";
import useExamStore, { usePersistentExamStore } from "@/stores/exam"; import useExamStore, { usePersistentExamStore } from "@/stores/exam";
import PracticeBadge from "../Low/PracticeBadge";
const Waveform = dynamic(() => import("../Waveform"), { ssr: false }); const Waveform = dynamic(() => import("../Waveform"), { ssr: false });
const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), { const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), {
@@ -133,6 +134,8 @@ const Speaking: React.FC<SpeakingExercise & CommonProps> = ({
</div> </div>
</div> </div>
{isPractice && <PracticeBadge className="w-fit self-end" />}
{prompts && prompts.length > 0 && ( {prompts && prompts.length > 0 && (
<div className="w-full h-full flex flex-col gap-4"> <div className="w-full h-full flex flex-col gap-4">
<textarea <textarea

2
src/components/Exercises/TrueFalse.tsx
View File

@@ -3,6 +3,7 @@ import clsx from "clsx";
import { Fragment, useCallback, useEffect, useState } from "react"; import { Fragment, useCallback, useEffect, useState } from "react";
import { CommonProps } from "./types"; import { CommonProps } from "./types";
import Button from "../Low/Button"; import Button from "../Low/Button";
import PracticeBadge from "../Low/PracticeBadge";
const TrueFalse: React.FC<TrueFalseExercise & CommonProps> = ({ const TrueFalse: React.FC<TrueFalseExercise & CommonProps> = ({
id, id,
@@ -80,6 +81,7 @@ const TrueFalse: React.FC<TrueFalseExercise & CommonProps> = ({
</div> </div>
</div> </div>
<span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span> <span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span>
{isPractice && <PracticeBadge className="w-fit self-end" />}
<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8"> <div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8">
{questions.map((question, index) => { {questions.map((question, index) => {
const id = question.id.toString(); const id = question.id.toString();

4
src/components/Exercises/WriteBlanks/index.tsx
View File

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from "react";
import reactStringReplace from "react-string-replace"; import reactStringReplace from "react-string-replace";
import { CommonProps } from "../types"; import { CommonProps } from "../types";
import Blank from "./Blank"; import Blank from "./Blank";
import PracticeBadge from "../../Low/PracticeBadge";
const WriteBlanks: React.FC<WriteBlanksExercise & CommonProps> = ({ const WriteBlanks: React.FC<WriteBlanksExercise & CommonProps> = ({
id, id,
@@ -63,7 +64,7 @@ const WriteBlanks: React.FC<WriteBlanksExercise & CommonProps> = ({
}; };
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4 relative">
{headerButtons} {headerButtons}
<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (!headerButtons && !footerButtons) && "mb-20")}> <div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (!headerButtons && !footerButtons) && "mb-20")}>
<span className="text-sm w-full leading-6"> <span className="text-sm w-full leading-6">
@@ -74,6 +75,7 @@ const WriteBlanks: React.FC<WriteBlanksExercise & CommonProps> = ({
</span> </span>
))} ))}
</span> </span>
{isPractice && <PracticeBadge className="w-fit self-end" />}
<span className="bg-mti-gray-smoke rounded-xl px-5 py-6"> <span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
{text.split("\\n").map((line, index) => ( {text.split("\\n").map((line, index) => (
<p key={index}> <p key={index}>

3
src/components/Exercises/Writing.tsx
View File

@@ -5,6 +5,7 @@ import { Dialog, DialogPanel, Transition, TransitionChild } from "@headlessui/re
import useExamStore, { usePersistentExamStore } from "@/stores/exam"; import useExamStore, { usePersistentExamStore } from "@/stores/exam";
import { CommonProps } from "./types"; import { CommonProps } from "./types";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import PracticeBadge from "../Low/PracticeBadge";
const Writing: React.FC<WritingExercise & CommonProps> = ({ const Writing: React.FC<WritingExercise & CommonProps> = ({
id, id,
@@ -145,6 +146,8 @@ const Writing: React.FC<WritingExercise & CommonProps> = ({
)} )}
</div> </div>
{isPractice && <PracticeBadge className="w-fit self-end" />}
<div className="w-full h-full flex flex-col gap-4"> <div className="w-full h-full flex flex-col gap-4">
<span className="whitespace-pre-wrap">{suffix}</span> <span className="whitespace-pre-wrap">{suffix}</span>
<textarea <textarea

12
src/components/High/Table.tsx
View File

@@ -11,15 +11,17 @@ interface Props<T> {
searchFields: string[][] searchFields: string[][]
size?: number size?: number
onDownload?: (rows: T[]) => void onDownload?: (rows: T[]) => void
isDownloadLoading?: boolean
searchPlaceholder?: string
} }
export default function Table<T>({ data, columns, searchFields, size = 16, onDownload }: Props<T>) { export default function Table<T>({ data, columns, searchFields, size = 16, onDownload, isDownloadLoading, searchPlaceholder }: Props<T>) {
const [pagination, setPagination] = useState<PaginationState>({ const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0, pageIndex: 0,
pageSize: 16, pageSize: size,
}) })
const { rows, renderSearch } = useListSearch<T>(searchFields, data); const { rows, renderSearch } = useListSearch<T>(searchFields, data, searchPlaceholder);
const table = useReactTable({ const table = useReactTable({
data: rows, data: rows,
@@ -38,8 +40,8 @@ export default function Table<T>({ data, columns, searchFields, size = 16, onDow
<div className="w-full flex gap-2 items-end"> <div className="w-full flex gap-2 items-end">
{renderSearch()} {renderSearch()}
{onDownload && ( {onDownload && (
<Button className="w-full max-w-[200px] mb-1" variant="outline" onClick={() => onDownload(rows)}> <Button isLoading={isDownloadLoading} className="w-full max-w-[200px] mb-1" variant="outline" onClick={() => onDownload(rows)}>
Download List Download
</Button> </Button>
) )
} }

11
src/components/Low/PracticeBadge.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { clsx } from "clsx"
interface Props {
className?: string
}
export default function PracticeBadge({ className }: Props) {
return (
<div className={clsx("bg-mti-rose/50 text-white px-2 py-1 rounded-full ring-1 ring-mti-red", className)}>Practice Exercise (Question Ungraded)</div>
)
}

2
src/components/Medium/StatGridItem.tsx
View File

@@ -77,7 +77,6 @@ interface StatsGridItemProps {
assignments: Assignment[]; assignments: Assignment[];
users: User[]; users: User[];
training?: boolean; training?: boolean;
gradingSystem?: Step[];
selectedTrainingExams?: string[]; selectedTrainingExams?: string[];
maxTrainingExams?: number; maxTrainingExams?: number;
setSelectedTrainingExams?: React.Dispatch<React.SetStateAction<string[]>>; setSelectedTrainingExams?: React.Dispatch<React.SetStateAction<string[]>>;
@@ -92,7 +91,6 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
users, users,
training, training,
selectedTrainingExams, selectedTrainingExams,
gradingSystem,
setSelectedTrainingExams, setSelectedTrainingExams,
renderPdfIcon, renderPdfIcon,
width = undefined, width = undefined,

12
src/components/Solutions/MultipleChoice.tsx
View File

@@ -6,6 +6,7 @@ import reactStringReplace from "react-string-replace";
import { CommonProps } from "."; import { CommonProps } from ".";
import Button from "../Low/Button"; import Button from "../Low/Button";
import { v4 } from "uuid"; import { v4 } from "uuid";
import PracticeBadge from "../Low/PracticeBadge";
function Question({ function Question({
id, id,
@@ -14,7 +15,8 @@ function Question({
solution, solution,
options, options,
userSolution, userSolution,
}: MultipleChoiceQuestion & { userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean }) { isPractice = false
}: MultipleChoiceQuestion & { userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean, isPractice?: boolean }) {
const { userSolutions } = useExamStore((state) => state); const { userSolutions } = useExamStore((state) => state);
const questionShuffleMap = userSolutions.reduce((foundMap, userSolution) => { const questionShuffleMap = userSolutions.reduce((foundMap, userSolution) => {
@@ -44,7 +46,8 @@ function Question({
}; };
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4 relative">
{isPractice && <PracticeBadge className="absolute -top-4 -right-12" />}
{isNaN(Number(id)) ? ( {isNaN(Number(id)) ? (
<span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span> <span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
) : ( ) : (
@@ -89,7 +92,7 @@ function Question({
); );
} }
export default function MultipleChoice({ id, type, prompt, questions, userSolutions, headerButtons, footerButtons}: MultipleChoiceExercise & CommonProps) { export default function MultipleChoice({ id, type, prompt, questions, userSolutions, headerButtons, footerButtons, isPractice = false}: MultipleChoiceExercise & CommonProps) {
const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state); const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state);
const stats = useExamStore((state) => state.userSolutions); const stats = useExamStore((state) => state.userSolutions);
@@ -116,6 +119,7 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
key={question.id} className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8"> key={question.id} className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
<Question <Question
{...question} {...question}
isPractice={isPractice}
userSolution={userSolutions.find((x) => question.id === x.question)?.option} userSolution={userSolutions.find((x) => question.id === x.question)?.option}
/> />
</div> </div>
@@ -127,6 +131,7 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
{questionIndex < questions.length && ( {questionIndex < questions.length && (
<Question <Question
{...questions[questionIndex]} {...questions[questionIndex]}
isPractice={isPractice}
userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option} userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
/> />
)} )}
@@ -136,6 +141,7 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8"> <div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
<Question <Question
{...questions[questionIndex + 1]} {...questions[questionIndex + 1]}
isPractice={isPractice}
userSolution={userSolutions.find((x) => questions[questionIndex + 1].id === x.question)?.option} userSolution={userSolutions.find((x) => questions[questionIndex + 1].id === x.question)?.option}
/> />
</div> </div>

2
src/dashboards/AssignmentView.tsx
View File

@@ -107,7 +107,7 @@ export default function AssignmentView({ isOpen, users, assignment, onClose }: P
}, },
}; };
stats.forEach((x) => { stats.filter(x => !x.isPractice).forEach((x) => {
scores[x.module!] = { scores[x.module!] = {
total: scores[x.module!].total + x.score.total, total: scores[x.module!].total + x.score.total,
correct: scores[x.module!].correct + x.score.correct, correct: scores[x.module!].correct + x.score.correct,

6
src/dashboards/IconCard.tsx
View File

@@ -10,10 +10,11 @@ interface Props {
onClick?: () => void; onClick?: () => void;
isSelected?: boolean; isSelected?: boolean;
isLoading?: boolean; isLoading?: boolean;
disabled?: boolean
className?: string; className?: string;
} }
export default function IconCard({Icon, label, value, color, tooltip, onClick, className, isLoading, isSelected}: Props) { export default function IconCard({ Icon, label, value, color, tooltip, onClick, className, isLoading, disabled, isSelected }: Props) {
const colorClasses: { [key in typeof color]: string } = { const colorClasses: { [key in typeof color]: string } = {
purple: "mti-purple-light", purple: "mti-purple-light",
red: "mti-red-light", red: "mti-red-light",
@@ -24,8 +25,9 @@ export default function IconCard({Icon, label, value, color, tooltip, onClick, c
return ( return (
<button <button
onClick={onClick} onClick={onClick}
disabled={disabled}
className={clsx( className={clsx(
"bg-white border rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-full h-52 justify-center cursor-pointer hover:shadow-lg hover:border-mti-purple-dark transition ease-in-out duration-300", "bg-white border rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-full h-52 justify-center cursor-pointer hover:shadow-lg hover:border-mti-purple-dark transition ease-in-out duration-300 disabled:grayscale-0",
tooltip && "tooltip tooltip-bottom", tooltip && "tooltip tooltip-bottom",
isSelected && `border border-solid border-${colorClasses[color]}`, isSelected && `border border-solid border-${colorClasses[color]}`,
className, className,

2
src/dashboards/Student.tsx
View File

@@ -37,7 +37,6 @@ interface Props {
} }
export default function StudentDashboard({ user, linkedCorporate }: Props) { export default function StudentDashboard({ user, linkedCorporate }: Props) {
const { gradingSystem } = useGradingSystem();
const { sessions } = useSessions(user.id); const { sessions } = useSessions(user.id);
const { data: stats } = useFilterRecordsByUser<Stat[]>(user.id, !user?.id); const { data: stats } = useFilterRecordsByUser<Stat[]>(user.id, !user?.id);
const { assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments } = useAssignments({ assignees: user?.id }); const { assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments } = useAssignments({ assignees: user?.id });
@@ -230,7 +229,6 @@ export default function StudentDashboard({ user, linkedCorporate }: Props) {
<div className="flex w-full justify-between"> <div className="flex w-full justify-between">
<span className="text-sm font-bold md:font-extrabold">{capitalize(module)}</span> <span className="text-sm font-bold md:font-extrabold">{capitalize(module)}</span>
<span className="text-mti-gray-dim text-sm font-normal"> <span className="text-mti-gray-dim text-sm font-normal">
{module === "level" && !!gradingSystem && `English Level: ${getGradingLabel(level, gradingSystem.steps)}`}
{module !== "level" && `Level ${level} / Level 9 (Desired Level: ${desiredLevel})`} {module !== "level" && `Level ${level} / Level 9 (Desired Level: ${desiredLevel})`}
</span> </span>
</div> </div>

31
src/exams/Finish.tsx
View File

@@ -7,7 +7,7 @@ import useExamStore from "@/stores/exam";
import { calculateBandScore, getGradingLabel } from "@/utils/score"; import { calculateBandScore, getGradingLabel } from "@/utils/score";
import clsx from "clsx"; import clsx from "clsx";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useEffect, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { import {
BsArrowCounterclockwise, BsArrowCounterclockwise,
BsBan, BsBan,
@@ -40,6 +40,7 @@ interface Props {
user: User; user: User;
modules: Module[]; modules: Module[];
scores: Score[]; scores: Score[];
practiceScores: Score[]
information: { information: {
timeSpent?: number; timeSpent?: number;
inactivity?: number; inactivity?: number;
@@ -51,14 +52,17 @@ interface Props {
destination?: string destination?: string
} }
export default function Finish({ user, scores, modules, information, solutions, isLoading, assignment, onViewResults, destination }: Props) { export default function Finish({ user, practiceScores, scores, modules, information, solutions, isLoading, assignment, onViewResults, destination }: Props) {
const [selectedModule, setSelectedModule] = useState(modules[0]); const [selectedModule, setSelectedModule] = useState(modules[0]);
const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!); const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!);
const [selectedPracticeScore, setSelectedPracticeScore] = useState<Score | undefined>(practiceScores.find((x) => x.module === modules[0]));
const [isExtraInformationOpen, setIsExtraInformationOpen] = useState(false); const [isExtraInformationOpen, setIsExtraInformationOpen] = useState(false);
const {selectedModules, exams, dispatch} = useExamStore((s) => s); const {selectedModules, exams, dispatch} = useExamStore((s) => s);
const aiUsage = Math.round(ai_usage(solutions) * 100); const aiUsage = Math.round(ai_usage(solutions) * 100);
const { gradingSystem } = useGradingSystem();
const entity = useMemo(() => assignment?.entity || user.entities[0]?.id || "", [assignment?.entity, user.entities])
const { gradingSystem } = useGradingSystem(entity);
const router = useRouter() const router = useRouter()
@@ -234,7 +238,7 @@ export default function Finish({ user, scores, modules, information, solutions,
{!isLoading && !(assignment && !assignment.released) && ( {!isLoading && !(assignment && !assignment.released) && (
<div className="mb-20 mt-32 flex w-full items-center justify-between gap-9"> <div className="mb-20 mt-32 flex w-full items-center justify-between gap-9">
<span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span> <span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span>
<div className="flex gap-9 px-16"> <div className="flex items-center gap-9 px-16">
<div <div
className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)} className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}
style={ style={
@@ -265,21 +269,32 @@ export default function Finish({ user, scores, modules, information, solutions,
</div> </div>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<div className="bg-mti-purple-light mt-1 h-3 w-3 rounded-full" /> <div className="bg-mti-purple-light mt-1 h-3 min-h-[0.75rem] w-3 min-w-[0.75rem] rounded-full" />
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-mti-purple-light">{selectedScore.correct.toString().padStart(2, "0")}</span> <span className="text-mti-purple-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
<span className="text-lg">Correct</span> <span className="text-lg whitespace-nowrap">Correct (Graded)</span>
</div> </div>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<div className="bg-mti-rose-light mt-1 h-3 w-3 rounded-full" /> <div className="bg-mti-rose-light mt-1 h-3 min-h-[0.75rem] w-3 min-w-[0.75rem] rounded-full" />
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-mti-rose-light"> <span className="text-mti-rose-light">
{(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")} {(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")}
</span> </span>
<span className="text-lg">Wrong</span> <span className="text-lg whitespace-nowrap">Wrong (Graded)</span>
</div> </div>
</div> </div>
{selectedPracticeScore && (
<div className="flex gap-2">
<div className="bg-mti-green mt-1 h-3 min-h-[0.75rem] w-3 min-w-[0.75rem] rounded-full" />
<div className="flex flex-col">
<span className="text-mti-green">
{selectedPracticeScore.correct} / {selectedScore.total}
</span>
<span className="text-lg whitespace-nowrap">Practice Questions</span>
</div>
</div>
)}
</div> </div>
) : ( ) : (
<div className="w-28 h-full" /> <div className="w-28 h-full" />

372
src/exams/Listening.tsx.bak Normal file
View File

@@ -0,0 +1,372 @@
import { ListeningExam, MultipleChoiceExercise, Script, UserSolution } from "@/interfaces/exam";
import { Fragment, useEffect, useState } from "react";
import { renderExercise } from "@/components/Exercises";
import { renderSolution } from "@/components/Solutions";
import ModuleTitle from "@/components/Medium/ModuleTitle";
import AudioPlayer from "@/components/Low/AudioPlayer";
import Button from "@/components/Low/Button";
import BlankQuestionsModal from "@/components/QuestionsModal";
import useExamStore, { usePersistentExamStore } from "@/stores/examStore";
import PartDivider from "./Navigation/SectionDivider";
import { Dialog, Transition } from "@headlessui/react";
import { capitalize } from "lodash";
import { mapBy } from "@/utils";
interface Props {
exam: ListeningExam;
showSolutions?: boolean;
preview?: boolean;
onFinish: (userSolutions: UserSolution[]) => void;
}
function ScriptModal({ isOpen, script, onClose }: { isOpen: boolean; script: Script; onClose: () => void }) {
return (
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={onClose}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0">
<div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95">
<Dialog.Panel className="w-full relative max-w-4xl transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
<div className="mt-2 overflow-auto mb-28">
<p className="text-sm">
{typeof script === "string" && script.split("\\n").map((line, index) => (
<Fragment key={index}>
{line}
<br />
</Fragment>
))}
{typeof script === "object" && script.map((line, index) => (
<span key={index}>
<b>{line.name} ({capitalize(line.gender)})</b>: {line.text}
<br />
<br />
</span>
))}
</p>
</div>
<div className="absolute bottom-8 right-8 max-w-[200px] self-end w-full">
<Button color="purple" variant="outline" className="max-w-[200px] self-end w-full" onClick={onClose}>
Close
</Button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
);
}
const INSTRUCTIONS_AUDIO_SRC =
"https://firebasestorage.googleapis.com/v0/b/storied-phalanx-349916.appspot.com/o/generic_listening_intro_v2.mp3?alt=media&token=16769f5f-1e9b-4a72-86a9-45a6f0fa9f82";
export default function Listening({ exam, showSolutions = false, preview = false, onFinish }: Props) {
const listeningBgColor = "bg-ielts-listening-light";
const [showTextModal, setShowTextModal] = useState(false);
const [timesListened, setTimesListened] = useState(0);
const [showBlankModal, setShowBlankModal] = useState(false);
const [multipleChoicesDone, setMultipleChoicesDone] = useState<{ id: string; amount: number }[]>([]);
const [seenParts, setSeenParts] = useState<Set<number>>(new Set(showSolutions ? exam.parts.map((_, index) => index) : []));
const [showPartDivider, setShowPartDivider] = useState<boolean>(typeof exam.parts[0].intro === "string" && exam.parts[0].intro !== "");
const examState = useExamStore((state) => state);
const persistentExamState = usePersistentExamStore((state) => state);
const {
hasExamEnded,
userSolutions,
exerciseIndex,
partIndex,
questionIndex: storeQuestionIndex,
setBgColor,
setUserSolutions,
setHasExamEnded,
setExerciseIndex,
setPartIndex,
setQuestionIndex: setStoreQuestionIndex
} = !preview ? examState : persistentExamState;
const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
useEffect(() => {
if (!showSolutions && exam.parts[partIndex]?.intro !== undefined && exam.parts[partIndex]?.intro !== "" && !seenParts.has(exerciseIndex)) {
setShowPartDivider(true);
setBgColor(listeningBgColor);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [partIndex]);
useEffect(() => {
if (showSolutions) return setExerciseIndex(0);
}, [setExerciseIndex, showSolutions]);
useEffect(() => {
if (partIndex === -1 && exam.variant === "partial") {
setPartIndex(0);
}
}, [partIndex, exam, setPartIndex]);
useEffect(() => {
const previousParts = exam.parts.filter((_, index) => index < partIndex);
let previousMultipleChoice = previousParts.flatMap((x) => x.exercises).filter((x) => x.type === "multipleChoice") as MultipleChoiceExercise[];
if (partIndex > -1 && exerciseIndex > -1) {
const previousPartExercises = exam.parts[partIndex].exercises.filter((_, index) => index < exerciseIndex);
const partMultipleChoice = previousPartExercises.filter((x) => x.type === "multipleChoice") as MultipleChoiceExercise[];
previousMultipleChoice = [...previousMultipleChoice, ...partMultipleChoice];
}
setMultipleChoicesDone(previousMultipleChoice.map((x) => ({ id: x.id, amount: x.questions.length - 1 })));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
if (hasExamEnded) onFinish(userSolutions)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [hasExamEnded]);
const confirmFinishModule = (keepGoing?: boolean) => {
if (!keepGoing) {
setShowBlankModal(false);
return;
}
onFinish(userSolutions);
};
const nextExercise = (solution?: UserSolution) => {
if (solution)
setUserSolutions([
...userSolutions.filter((x) => x.exercise !== solution.exercise),
{ ...solution, module: "listening", exam: exam.id }
]);
};
const previousExercise = (solution?: UserSolution) => {
scrollToTop();
if (solution)
setUserSolutions([
...userSolutions.filter((x) => x.exercise !== solution.exercise),
{ ...solution, module: "listening", exam: exam.id }
]);
setPartIndex(partIndex - 1)
};
const nextPart = () => {
scrollToTop()
if (partIndex + 1 < exam.parts.length && !hasExamEnded) {
setPartIndex(partIndex + 1);
setExerciseIndex(0);
return;
}
if (!showSolutions && !hasExamEnded) {
const exercises = partIndex < exam.parts.length ? exam.parts[partIndex].exercises : []
const exerciseIDs = mapBy(exercises, 'id')
const hasMissing = userSolutions.filter(x => exerciseIDs.includes(x.exercise)).map(x => x.score.missing).some(x => x > 0)
if (hasMissing) return setShowBlankModal(true);
}
setHasExamEnded(false);
onFinish(userSolutions);
}
const renderPartExercises = () => {
const exercises = partIndex > -1 ? exam.parts[partIndex].exercises : []
const formattedExercises = exercises.map(exercise => ({
...exercise,
userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [],
}))
return (
<div className="flex flex-col gap-4">
{formattedExercises.map(e => showSolutions
? renderSolution(e, nextExercise, previousExercise, undefined, true)
: renderExercise(e, exam.id, nextExercise, previousExercise, undefined, true))}
</div>
)
}
const renderAudioInstructionsPlayer = () => (
<div className="flex flex-col gap-8 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16">
<div className="flex flex-col w-full gap-2">
<h4 className="text-xl font-semibold">Please listen to the instructions audio attentively.</h4>
</div>
<div className="rounded-xl flex flex-col gap-4 items-center w-full h-fit">
<AudioPlayer key={partIndex} src={INSTRUCTIONS_AUDIO_SRC} color="listening" />
</div>
</div>
);
const renderAudioPlayer = () => (
<div className="flex flex-col gap-8 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16">
{exam?.parts[partIndex]?.audio?.source ? (
<>
<div className="w-full items-start flex justify-between">
<div className="flex flex-col w-full gap-2">
<h4 className="text-xl font-semibold">Please listen to the following audio attentively.</h4>
<span className="text-base">
{(() => {
const audioRepeatTimes = exam?.parts[partIndex]?.audio?.repeatableTimes;
return audioRepeatTimes && audioRepeatTimes > 0
? `You will only be allowed to listen to the audio ${audioRepeatTimes - timesListened} time(s).`
: "You may listen to the audio as many times as you would like.";
})()}
</span>
</div>
{partIndex > -1 && !examState.assignment && !!exam.parts[partIndex].script && (
<Button
onClick={() => setShowTextModal(true)}
variant="outline"
color="gray"
className="w-full max-w-[200px]"
>
View Transcript
</Button>
)}
</div>
<div className="rounded-xl flex flex-col gap-4 items-center w-full h-fit">
<AudioPlayer
key={partIndex}
src={exam?.parts[partIndex]?.audio?.source ?? ''}
color="listening"
onEnd={() => setTimesListened((prev) => prev + 1)}
disabled={exam?.parts[partIndex]?.audio?.repeatableTimes != null &&
timesListened === exam.parts[partIndex]?.audio?.repeatableTimes}
disablePause
/>
</div>
</>
) : (
<span>This section will be displayed the audio once it has been generated.</span>
)}
</div>
);
const progressButtons = () => (
<div className="flex justify-between w-full gap-8">
<Button
color="purple"
variant="outline"
onClick={previousExercise}
className="max-w-[200px] w-full">
Back
</Button>
<Button
color="purple"
onClick={nextPart}
className="max-w-[200px] self-end w-full">
Next
</Button>
</div>
)
return (
<>
{showPartDivider ?
<PartDivider
module="listening"
sectionLabel="Section"
defaultTitle="Listening exam"
section={exam.parts[partIndex]}
sectionIndex={partIndex}
onNext={() => { setShowPartDivider(false); setBgColor("bg-white"); setSeenParts((prev) => new Set(prev).add(exerciseIndex)) }}
/> : (
<>
<BlankQuestionsModal isOpen={showBlankModal} onClose={confirmFinishModule} />
{partIndex > -1 && exam.parts[partIndex].script &&
<ScriptModal script={exam.parts[partIndex].script!} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
}
<div className="flex flex-col h-full w-full gap-8 justify-between">
<ModuleTitle
exerciseIndex={partIndex + 1}
minTimer={exam.minTimer}
module="listening"
totalExercises={exam.parts.length}
disableTimer={showSolutions || preview}
indexLabel="Part"
/>
{/* Audio Player for the Instructions */}
{partIndex === -1 && renderAudioInstructionsPlayer()}
{/* Part's audio player */}
{partIndex > -1 && renderAudioPlayer()}
{/* Exercise renderer */}
{exerciseIndex > -1 && partIndex > -1 && (
<>
{progressButtons()}
{renderPartExercises()}
{progressButtons()}
</>
)}
</div>
{exerciseIndex === -1 && partIndex > -1 && exam.variant !== "partial" && (
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button
color="purple"
variant="outline"
onClick={() => {
if (partIndex === 0) return setPartIndex(-1);
setExerciseIndex(exam.parts[partIndex - 1].exercises.length - 1);
setPartIndex(partIndex - 1);
}}
className="max-w-[200px] w-full">
Back
</Button>
<Button color="purple" onClick={() => setExerciseIndex(0)} className="max-w-[200px] self-end w-full">
Next
</Button>
</div>
)}
{partIndex === -1 && exam.variant !== "partial" && (
<Button color="purple" onClick={() => setPartIndex(0)} className="max-w-[200px] self-end w-full justify-self-end">
Start now
</Button>
)}
{exerciseIndex === -1 && partIndex === 0 && exam.variant === "partial" && (
<Button color="purple" onClick={() => setExerciseIndex(0)} className="max-w-[200px] self-end w-full justify-self-end">
Start now
</Button>
)}
</>)
}
</>
);
}

6
src/hooks/useGrading.tsx
View File

@@ -3,7 +3,7 @@ import {Code, Group, User} from "@/interfaces/user";
import axios from "axios"; import axios from "axios";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
export default function useGradingSystem() { export default function useGradingSystem(entity: string) {
const [gradingSystem, setGradingSystem] = useState<Grading>(); const [gradingSystem, setGradingSystem] = useState<Grading>();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false); const [isError, setIsError] = useState(false);
@@ -11,12 +11,12 @@ export default function useGradingSystem() {
const getData = () => { const getData = () => {
setIsLoading(true); setIsLoading(true);
axios axios
.get<Grading>(`/api/grading`) .get<Grading>(`/api/grading?entity=${entity}`)
.then((response) => setGradingSystem(response.data)) .then((response) => setGradingSystem(response.data))
.finally(() => setIsLoading(false)); .finally(() => setIsLoading(false));
}; };
useEffect(getData, []); useEffect(getData, [entity]);
return { gradingSystem, isLoading, isError, reload: getData, mutate: setGradingSystem }; return { gradingSystem, isLoading, isError, reload: getData, mutate: setGradingSystem };
} }

5
src/hooks/useListSearch.tsx
View File

@@ -2,10 +2,11 @@ import {useState, useMemo} from "react";
import Input from "@/components/Low/Input"; import Input from "@/components/Low/Input";
import { search } from "@/utils/search"; import { search } from "@/utils/search";
export function useListSearch<T>(fields: string[][], rows: T[]) { export function useListSearch<T>(fields: string[][], rows: T[], placeholder?: string) {
const [text, setText] = useState(""); const [text, setText] = useState("");
const renderSearch = () => <Input type="text" name="search" onChange={setText} placeholder="Enter search text" value={text} />; const renderSearch = () =>
<Input type="text" name="search" onChange={setText} placeholder={placeholder || "Enter search text"} value={text} />;
const updatedRows = useMemo(() => { const updatedRows = useMemo(() => {
if (text.length > 0) return search(text, fields, rows); if (text.length > 0) return search(text, fields, rows);

3
src/interfaces/index.ts
View File

@@ -7,7 +7,6 @@ export interface Step {
} }
export interface Grading { export interface Grading {
user: string; entity: string;
entity?: string;
steps: Step[]; steps: Step[];
} }

36
src/pages/(admin)/CorporateGradingSystem.tsx
View File

@@ -1,9 +1,13 @@
import Button from "@/components/Low/Button"; import Button from "@/components/Low/Button";
import Input from "@/components/Low/Input"; import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select";
import { Grading, Step } from "@/interfaces"; import { Grading, Step } from "@/interfaces";
import { Entity } from "@/interfaces/entity";
import { User } from "@/interfaces/user"; import { User } from "@/interfaces/user";
import { CEFR_STEPS, GENERAL_STEPS, IELTS_STEPS, TOFEL_STEPS } from "@/resources/grading"; import { CEFR_STEPS, GENERAL_STEPS, IELTS_STEPS, TOFEL_STEPS } from "@/resources/grading";
import { checkAccess } from "@/utils/permissions";
import axios from "axios"; import axios from "axios";
import clsx from "clsx";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { BsPlusCircle, BsTrash } from "react-icons/bs"; import { BsPlusCircle, BsTrash } from "react-icons/bs";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
@@ -21,9 +25,24 @@ const areStepsOverlapped = (steps: Step[]) => {
return false; return false;
}; };
export default function CorporateGradingSystem({user, defaultSteps, mutate}: {user: User; defaultSteps: Step[]; mutate: (steps: Step[]) => void}) { interface Props {
user: User;
entitiesGrading: Grading[];
entities: Entity[]
mutate: () => void
}
export default function CorporateGradingSystem({ user, entitiesGrading = [], entities = [], mutate }: Props) {
const [entity, setEntity] = useState(entitiesGrading[0]?.entity || undefined)
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [steps, setSteps] = useState<Step[]>(defaultSteps || []); const [steps, setSteps] = useState<Step[]>([]);
useEffect(() => {
if (entity) {
const entitySteps = entitiesGrading.find(e => e.entity === entity)!.steps
setSteps(entitySteps || [])
}
}, [entitiesGrading, entity])
const saveGradingSystem = () => { 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 (!steps.every((x) => x.min < x.max)) return toast.error("One of your steps has a minimum threshold inferior to its superior threshold.");
@@ -37,9 +56,9 @@ export default function CorporateGradingSystem({user, defaultSteps, mutate}: {us
setIsLoading(true); setIsLoading(true);
axios axios
.post("/api/grading", {user: user.id, steps}) .post("/api/grading", { user: user.id, entity, steps })
.then(() => toast.success("Your grading system has been saved!")) .then(() => toast.success("Your grading system has been saved!"))
.then(() => mutate(steps)) .then(mutate)
.catch(() => toast.error("Something went wrong, please try again later")) .catch(() => toast.error("Something went wrong, please try again later"))
.finally(() => setIsLoading(false)); .finally(() => setIsLoading(false));
}; };
@@ -47,6 +66,15 @@ export default function CorporateGradingSystem({user, defaultSteps, mutate}: {us
return ( return (
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl"> <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">Grading System</label>
<div className={clsx("flex flex-col gap-4")}>
<label className="font-normal text-base text-mti-gray-dim">Entity</label>
<Select
defaultValue={{ value: (entities || [])[0]?.id, label: (entities || [])[0]?.label }}
options={entities.map((e) => ({ value: e.id, label: e.label }))}
onChange={(e) => setEntity(e?.value || undefined)}
isClearable={checkAccess(user, ["admin", "developer"])}
/>
</div>
<label className="font-normal text-base text-mti-gray-dim">Preset Systems</label> <label className="font-normal text-base text-mti-gray-dim">Preset Systems</label>
<div className="grid grid-cols-4 gap-4"> <div className="grid grid-cols-4 gap-4">

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

@@ -107,7 +107,7 @@ export default function ExamList({user, entities}: {user: User; entities: Entity
} }
dispatch({type: "INIT_EXAM", payload: {exams: [exam], modules: [module]}}) dispatch({type: "INIT_EXAM", payload: {exams: [exam], modules: [module]}})
router.push("/exercises"); router.push("/exam");
}; };
const privatizeExam = async (exam: Exam) => { const privatizeExam = async (exam: Exam) => {

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

@@ -222,7 +222,7 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
}, [saveStats, setFlags, setModuleIndex, evaluated, pendingExercises, setUserSolutions]); }, [saveStats, setFlags, setModuleIndex, evaluated, pendingExercises, setUserSolutions]);
const aggregateScoresByModule = (): { const aggregateScoresByModule = (isPractice?: boolean): {
module: Module; module: Module;
total: number; total: number;
missing: number; missing: number;
@@ -258,7 +258,7 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
}, },
}; };
userSolutions.filter(x => !x.isPractice).forEach((x) => { userSolutions.filter(x => isPractice ? x.isPractice : !x.isPractice).forEach((x) => {
const examModule = const examModule =
x.module || (x.type === "writing" ? "writing" : x.type === "speaking" || x.type === "interactiveSpeaking" ? "speaking" : undefined); x.module || (x.type === "writing" ? "writing" : x.type === "speaking" || x.type === "interactiveSpeaking" ? "speaking" : undefined);
@@ -360,6 +360,7 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
setPartIndex(0); setPartIndex(0);
}} }}
scores={aggregateScoresByModule()} scores={aggregateScoresByModule()}
practiceScores={aggregateScoresByModule(true)}
/>} />}
{/* Exam is on going, display it and the abandon modal */} {/* Exam is on going, display it and the abandon modal */}
{isExamLoaded && moduleIndex !== -1 && ( {isExamLoaded && moduleIndex !== -1 && (

255
src/pages/api/assignments/statistical/excel.ts
View File

@@ -1,255 +0,0 @@
import type {NextApiRequest, NextApiResponse} from "next";
import {storage} from "@/firebase";
import {withIronSessionApiRoute} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {ref, uploadBytes, getDownloadURL} from "firebase/storage";
import {AssignmentWithCorporateId} from "@/interfaces/results";
import moment from "moment-timezone";
import ExcelJS from "exceljs";
import {getSpecificUsers} from "@/utils/users.be";
import {checkAccess} from "@/utils/permissions";
import {getAssignmentsForCorporates} from "@/utils/assignments.be";
import {search} from "@/utils/search";
import {getGradingSystem} from "@/utils/grading.be";
import {StudentUser, User} from "@/interfaces/user";
import {calculateBandScore, getGradingLabel} from "@/utils/score";
import {Module} from "@/interfaces";
import {uniq} from "lodash";
import {getUserName} from "@/utils/users";
import {LevelExam} from "@/interfaces/exam";
import {getSpecificExams} from "@/utils/exams.be";
export default withIronSessionApiRoute(handler, sessionOptions);
interface TableData {
user: string;
studentID: string;
passportID: string;
exams: string;
email: string;
correct: number;
corporate: string;
submitted: boolean;
date: moment.Moment;
assignment: string;
corporateId: string;
score: number;
level: string;
part1?: string;
part2?: string;
part3?: string;
part4?: string;
part5?: string;
}
async function handler(req: NextApiRequest, res: NextApiResponse) {
// if (req.method === "GET") return get(req, res);
if (req.method === "POST") return await post(req, res);
}
const searchFilters = [["email"], ["user"], ["userId"], ["assignment"], ["exams"]];
async function post(req: NextApiRequest, res: NextApiResponse) {
// verify if it's a logged user that is trying to export
if (req.session.user) {
if (!checkAccess(req.session.user, ["mastercorporate", "corporate", "developer", "admin"])) {
return res.status(403).json({error: "Unauthorized"});
}
const {
ids,
startDate,
endDate,
searchText,
displaySelection = true,
} = req.body as {
ids: string[];
startDate?: string;
endDate?: string;
searchText: string;
displaySelection?: boolean;
};
const startDateParsed = startDate ? new Date(startDate) : undefined;
const endDateParsed = endDate ? new Date(endDate) : undefined;
const assignments = await getAssignmentsForCorporates(req.session.user.type, ids, startDateParsed, endDateParsed);
const assignmentUsers = uniq([...assignments.flatMap((x) => x.assignees), ...assignments.flatMap((x) => x.assigner)]);
const assigners = [...new Set(assignments.map((a) => a.assigner))];
const users = await getSpecificUsers(assignmentUsers);
const assignerUsers = await getSpecificUsers(assigners);
const exams = await getSpecificExams(uniq(assignments.flatMap((x) => x.exams.map((x) => x.id))));
const assignerUsersGradingSystems = await Promise.all(
assignerUsers.map(async (user: User) => {
const data = await getGradingSystem(user);
// in this context I need to override as I'll have to match to the assigner
return {...data, user: user.id};
}),
);
const getGradingSystemHelper = (
exams: {id: string; module: Module; assignee: string}[],
assigner: string,
user: User,
correct: number,
total: number,
) => {
if (exams.some((e) => e.module === "level")) {
const gradingSystem = assignerUsersGradingSystems.find((gs) => gs.user === assigner);
if (gradingSystem) {
const bandScore = calculateBandScore(correct, total, "level", user?.focus || "academic");
return {
label: getGradingLabel(bandScore, gradingSystem.steps || []),
score: bandScore,
};
}
}
return {score: -1, label: "N/A"};
};
const tableResults = assignments
.reduce((accmA: TableData[], a: AssignmentWithCorporateId) => {
const userResults = a.assignees.map((assignee) => {
const userStats = a.results.find((r) => r.user === assignee)?.stats || [];
const userData = users.find((u) => u.id === assignee);
const corporateUser = users.find((u) => u.id === a.assigner);
const correct = userStats.reduce((n, e) => n + e.score.correct, 0);
const total = userStats.reduce((n, e) => n + e.score.total, 0);
const {label: level, score} = getGradingSystemHelper(a.exams, a.assigner, userData!, correct, total);
const commonData = {
user: userData?.name || "",
email: userData?.email || "",
studentID: (userData as StudentUser)?.studentID || "",
passportID: (userData as StudentUser)?.demographicInformation?.passport_id || "",
userId: assignee,
exams: a.exams.map((x) => x.id).join(", "),
corporateId: a.corporateId,
corporate: !corporateUser ? "" : getUserName(corporateUser),
assignment: a.name,
level,
score,
};
if (userStats.length === 0) {
return {
...commonData,
correct: 0,
submitted: false,
// date: moment(),
};
}
let data: {total: number; correct: number}[] = [];
if (a.exams.every((x) => x.module === "level")) {
const exam = exams.find((x) => x.id === a.exams.find((x) => x.assignee === assignee)?.id) as LevelExam;
data = exam.parts.map((x) => {
const exerciseIDs = x.exercises.map((x) => x.id);
const stats = userStats.filter((x) => exerciseIDs.includes(x.exercise));
const total = stats.reduce((acc, curr) => acc + curr.score.total, 0);
const correct = stats.reduce((acc, curr) => acc + curr.score.correct, 0);
return {total, correct};
});
}
const partsData =
data.length > 0 ? data.reduce((acc, e, index) => ({...acc, [`part${index}`]: `${e.correct}/${e.total}`}), {}) : {};
return {
...commonData,
correct,
submitted: true,
date: moment.max(userStats.map((e) => moment(e.date))),
...partsData,
};
}) as TableData[];
return [...accmA, ...userResults];
}, [])
.sort((a, b) => b.score - a.score);
// Create a new workbook and add a worksheet
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet("Master Statistical");
const headers = [
{
label: "User",
value: (entry: TableData) => entry.user,
},
{
label: "Email",
value: (entry: TableData) => entry.email,
},
{
label: "Student ID",
value: (entry: TableData) => entry.studentID,
},
{
label: "Passport ID",
value: (entry: TableData) => entry.passportID,
},
...(displaySelection
? [
{
label: "Corporate",
value: (entry: TableData) => entry.corporate,
},
]
: []),
{
label: "Assignment",
value: (entry: TableData) => entry.assignment,
},
{
label: "Submitted",
value: (entry: TableData) => (entry.submitted ? "Yes" : "No"),
},
{
label: "Score",
value: (entry: TableData) => entry.correct,
},
{
label: "Date",
value: (entry: TableData) => entry.date?.format("YYYY/MM/DD") || "",
},
{
label: "Level",
value: (entry: TableData) => entry.level,
},
...new Array(5).fill(0).map((_, index) => ({
label: `Part ${index + 1}`,
value: (entry: TableData) => {
const key = `part${index}` as keyof TableData;
return entry[key] || "";
},
})),
];
const filteredSearch = !!searchText ? search(searchText, searchFilters, tableResults) : tableResults;
worksheet.addRow(headers.map((h) => h.label));
(filteredSearch as TableData[]).forEach((entry) => {
worksheet.addRow(headers.map((h) => h.value(entry)));
});
// Convert workbook to Buffer (Node.js) or Blob (Browser)
const buffer = await workbook.xlsx.writeBuffer();
// generate the file ref for storage
const fileName = `${Date.now().toString()}.xlsx`;
const refName = `statistical/${fileName}`;
const fileRef = ref(storage, refName);
// upload the pdf to storage
await uploadBytes(fileRef, buffer, {
contentType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
});
const url = await getDownloadURL(fileRef);
res.status(200).end(url);
return;
}
return res.status(401).json({error: "Unauthorized"});
}

25
src/pages/api/grading/index.ts
View File

@@ -14,8 +14,8 @@ import {Grading} from "@/interfaces";
import { getGroupsForUser } from "@/utils/groups.be"; import { getGroupsForUser } from "@/utils/groups.be";
import { uniq } from "lodash"; import { uniq } from "lodash";
import { getSpecificUsers, getUser } from "@/utils/users.be"; import { getSpecificUsers, getUser } from "@/utils/users.be";
import {getGradingSystem} from "@/utils/grading.be";
import client from "@/lib/mongodb"; import client from "@/lib/mongodb";
import { getGradingSystemByEntity } from "@/utils/grading.be";
const db = client.db(process.env.MONGODB_DB); const db = client.db(process.env.MONGODB_DB);
@@ -32,18 +32,11 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
return; return;
} }
const gradingSystem = await getGradingSystem(req.session.user); const entity = req.query.entity as string
const gradingSystem = await getGradingSystemByEntity(entity);
return res.status(200).json(gradingSystem); return res.status(200).json(gradingSystem);
} }
async function updateGrading(id: string, body: Grading) {
if (await db.collection("grading").findOne({id})) {
await db.collection("grading").updateOne({id}, {$set: body});
} else {
await db.collection("grading").insertOne({id, ...body});
}
}
async function post(req: NextApiRequest, res: NextApiResponse) { async function post(req: NextApiRequest, res: NextApiResponse) {
if (!req.session.user) { if (!req.session.user) {
res.status(401).json({ ok: false }); res.status(401).json({ ok: false });
@@ -57,17 +50,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
}); });
const body = req.body as Grading; const body = req.body as Grading;
await updateGrading(req.session.user.id, body); await db.collection("grading").updateOne({ entity: body.entity }, { $set: body }, { upsert: true });
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 getSpecificUsers(participants);
const corporateUsers = participantUsers.filter((x) => x?.type === "corporate") as CorporateUser[];
await Promise.all(corporateUsers.map(async (g) => await updateGrading(g.id, body)));
}
res.status(200).json({ ok: true }); res.status(200).json({ ok: true });
} }

205
src/pages/api/statistical.ts Normal file
View File

@@ -0,0 +1,205 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";
import { withIronSessionApiRoute } from "iron-session/next";
import { sessionOptions } from "@/lib/session";
import { getDownloadURL, getStorage, ref } from "firebase/storage";
import { app, storage } from "@/firebase";
import axios from "axios";
import { requestUser } from "@/utils/api";
import { checkAccess } from "@/utils/permissions";
import { EntityWithRoles } from "@/interfaces/entity";
import { Stat, StudentUser } from "@/interfaces/user";
import { Assignment, AssignmentResult } from "@/interfaces/results";
import { Exam } from "@/interfaces/exam";
import { capitalize, groupBy, uniqBy } from "lodash";
import { findBy, mapBy } from "@/utils";
import ExcelJS from "exceljs";
import moment from "moment";
import { Session } from "@/hooks/useSessions";
import { getGradingSystemByEntity } from "@/utils/grading.be";
import { getGradingLabel } from "@/utils/score";
export default withIronSessionApiRoute(handler, sessionOptions);
interface Item {
student: StudentUser
result: AssignmentResult
assignment: Assignment
exams: Exam[]
session?: Session
}
interface Body {
entities: EntityWithRoles[]
items: Item[]
assignments: Assignment[]
startDate: Date
endDate: Date
}
interface EntityInformation {
entity: EntityWithRoles
exams: Exam[]
numberOfAssignees: number
numberOfSubmissions: number
numberOfAbsentees: number
assignment: Assignment
items: Item[]
}
async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method !== "POST") return res.status(404).json({ ok: false })
const user = await requestUser(req, res)
if (!user) return res.status(401).json({ ok: false });
if (!checkAccess(user, ['admin', 'developer', 'mastercorporate', 'corporate'])) return res.status(403).json({ ok: false });
const { entities, items, assignments } = req.body as Body
const entityInformations: EntityInformation[] = []
for (const entity of entities) {
const entityItems = items.filter(i => i.assignment.entity === entity.id)
const groupedByAssignments = groupBy(entityItems, (a) => a.assignment.id)
for (const assignmentID of Object.keys(groupedByAssignments)) {
const assignmentItems = groupedByAssignments[assignmentID]
const assignment = findBy(assignments, 'id', assignmentID)!
const assignmentExams =
uniqBy(assignmentItems.flatMap(a => a.exams.map(e => ({ ...e, moduleID: `${e.id}_${e.module}` }))), 'moduleID')
const assignmentEntityInformation: EntityInformation = {
entity,
exams: assignmentExams,
numberOfAssignees: assignmentItems.length,
numberOfSubmissions: assignmentItems.filter(x => !!x.result).length,
numberOfAbsentees: assignmentItems.filter(x => !x.result).length,
assignment,
items: assignmentItems
}
entityInformations.push(assignmentEntityInformation)
}
}
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet("Statistical");
for (const e of entityInformations) {
await addEntityInformationToWorksheet(worksheet, e)
}
const buffer = await workbook.xlsx.writeBuffer()
res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
res.status(200).send(buffer);
}
const addEntityInformationToWorksheet = async (worksheet: ExcelJS.Worksheet, entityInformation: EntityInformation) => {
const data = [
['Entity', undefined, undefined, entityInformation.entity.label],
['Assignment', undefined, undefined, entityInformation.assignment.name],
['Date of the Assignment', undefined, undefined, moment(entityInformation.assignment.startDate).format("DD/MM/YYYY")],
['Exams', undefined, undefined, mapBy(entityInformation.exams, 'id').join(', ')],
['Modules', undefined, undefined, entityInformation.exams.map(e => capitalize(e.module)).join(', ')],
['Number of Assignees', undefined, undefined, entityInformation.numberOfAssignees],
['Number of Submissions', undefined, undefined, entityInformation.numberOfSubmissions],
['Number of Absentees', undefined, undefined, entityInformation.numberOfAbsentees]
]
const dataRows = worksheet.addRows(data);
dataRows.forEach(row => row.getCell(1).font = { bold: true, color: { argb: "ffffffff" } })
dataRows.forEach(row => row.getCell(1).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: "ff674ea7" } })
dataRows.forEach(row => worksheet.mergeCells(`${row.getCell(1).address}:${row.getCell(3).address}`))
dataRows.forEach(row => row.getCell(4).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: "FFD9D2E9" } })
dataRows.forEach(row => worksheet.mergeCells(`${row.getCell(4).address}:${row.getCell(7).address}`))
worksheet.addRows([[], []]);
const gradingSystem = await getGradingSystemByEntity(entityInformation.entity.id)
for (const exam of entityInformation.exams) {
const examRow = worksheet.addRow([`${capitalize(exam.module)} Exam`, undefined, exam.id])
examRow.getCell(1).font = { bold: true, color: { argb: "ffffffff" } }
examRow.getCell(1).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: "ff674ea7" } }
examRow.getCell(3).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: "FFD9D2E9" } }
worksheet.mergeCells(`${examRow.getCell(1).address}:${examRow.getCell(2).address}`)
worksheet.mergeCells(`${examRow.getCell(3).address}:${examRow.getCell(6).address}`)
const parts = exam.module === "level" || exam.module === "listening" || exam.module === "reading" ? exam.parts : []
const header = worksheet.addRow([
"#",
"Name",
"E-mail",
"Student ID",
"Passport/ID",
"Gender",
"Finished at",
"Score",
...(exam.module === "level" ? ["Grade"] : []),
...parts.map((_, i) => `Part ${i + 1}`)
])
header.font = { bold: true, color: { argb: "FFFFFFFF" } }
header.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: "FFD9D2E9" } }
const examItems =
entityInformation.items
.filter(i => !!i.result)
.map(i => ({
...i,
result: { ...i.result, stats: i.result.stats.filter(x => x.exam === exam.id) },
}))
const orderedItems = examItems.sort((a, b) => {
const aTotalScore = a.result.stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.correct, 0)
const bTotalScore = b.result.stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.correct, 0)
return bTotalScore - aTotalScore
})
const itemRows = orderedItems.map((item, index) => {
const { total, correct } = calculateScore(item.result.stats)
const score = `${correct} / ${total}`
const finishTimestamp = [...item.result.stats].sort((a, b) => b.date - a.date).shift()?.date || -1
const finishDate = finishTimestamp === -1 ? "N/A" : moment(new Date(finishTimestamp)).format("DD/MM/YYYY HH:mm")
const grade = getGradingLabel(correct, gradingSystem.steps)
return [
index + 1,
item.student.name,
item.student.email,
item.student.studentID || "N/A",
item.student.demographicInformation?.passport_id || "N/A",
item.student.demographicInformation?.gender || "N/A",
finishDate,
score,
...(exam.module === "level" ? [grade] : []),
...parts.map((part) => {
const exerciseIDs = mapBy(part.exercises, 'id')
const { total, correct } = calculateScore(item.result.stats.filter(s => exerciseIDs.includes(s.exercise)))
return `${correct} / ${total}`
})
]
})
worksheet.addRows(itemRows)
worksheet.addRows([[]]);
}
worksheet.addRows([[], []]);
}
const calculateScore = (stats: Stat[]) => {
const total = stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.total, 0)
const correct = stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.correct, 0)
return { total, correct }
}
export const config = {
api: {
bodyParser: {
sizeLimit: '20mb',
},
},
};

7
src/pages/assignments/[id].tsx
View File

@@ -23,8 +23,9 @@ import { withIronSessionSsr } from "iron-session/next";
import { checkAccess, doesEntityAllow } from "@/utils/permissions"; import { checkAccess, doesEntityAllow } from "@/utils/permissions";
import { mapBy, redirect, serialize } from "@/utils"; import { mapBy, redirect, serialize } from "@/utils";
import { getAssignment } from "@/utils/assignments.be"; import { getAssignment } from "@/utils/assignments.be";
import { getEntityUsers, getUsers } from "@/utils/users.be"; import { getEntitiesUsers, getEntityUsers, getUsers } from "@/utils/users.be";
import { getEntityWithRoles } from "@/utils/entities.be"; import { getEntitiesWithRoles, getEntityWithRoles } from "@/utils/entities.be";
import { getGroups, getGroupsByEntities, getGroupsByEntity } from "@/utils/groups.be";
import { sessionOptions } from "@/lib/session"; import { sessionOptions } from "@/lib/session";
import { EntityWithRoles } from "@/interfaces/entity"; import { EntityWithRoles } from "@/interfaces/entity";
import Head from "next/head"; import Head from "next/head";
@@ -155,7 +156,7 @@ export default function AssignmentView({ user, users, entity, assignment }: Prop
}, },
}; };
stats.forEach((x) => { stats.filter(x => !x.isPractice).forEach((x) => {
scores[x.module!] = { scores[x.module!] = {
total: scores[x.module!].total + x.score.total, total: scores[x.module!].total + x.score.total,
correct: scores[x.module!].correct + x.score.correct, correct: scores[x.module!].correct + x.score.correct,

33
src/pages/classrooms/index.tsx
View File

@@ -11,7 +11,7 @@ import {convertToUsers, getGroupsForEntities} from "@/utils/groups.be";
import { getSpecificUsers } from "@/utils/users.be"; import { getSpecificUsers } from "@/utils/users.be";
import Link from "next/link"; import Link from "next/link";
import { uniq } from "lodash"; import { uniq } from "lodash";
import {BsPlus} from "react-icons/bs"; import { BsFillMortarboardFill, BsPlus } from "react-icons/bs";
import CardList from "@/components/High/CardList"; import CardList from "@/components/High/CardList";
import Separator from "@/components/Low/Separator"; import Separator from "@/components/Low/Separator";
import { mapBy, redirect, serialize } from "@/utils"; import { mapBy, redirect, serialize } from "@/utils";
@@ -20,6 +20,7 @@ import { findAllowedEntities } from "@/utils/permissions";
import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be"; import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
import { useAllowedEntities } from "@/hooks/useEntityPermissions"; import { useAllowedEntities } from "@/hooks/useEntityPermissions";
import { EntityWithRoles } from "@/interfaces/entity"; import { EntityWithRoles } from "@/interfaces/entity";
import { FaPersonChalkboard } from "react-icons/fa6";
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => { export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
const user = await requestUser(req, res) const user = await requestUser(req, res)
@@ -33,7 +34,7 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const groups = await getGroupsForEntities(mapBy(allowedEntities, 'id')); const groups = await getGroupsForEntities(mapBy(allowedEntities, 'id'));
const users = await getSpecificUsers(uniq(groups.flatMap((g) => [...g.participants.slice(0, 5), g.admin]))); const users = await getSpecificUsers(uniq(groups.flatMap((g) => [...g.participants, g.admin])));
const groupsWithUsers: GroupWithUsers[] = groups.map((g) => convertToUsers(g, users)); const groupsWithUsers: GroupWithUsers[] = groups.map((g) => convertToUsers(g, users));
return { return {
@@ -63,27 +64,35 @@ export default function Home({user, groups, entities}: Props) {
<Link <Link
href={`/classrooms/${group.id}`} href={`/classrooms/${group.id}`}
key={group.id} key={group.id}
className="p-4 border rounded-xl flex flex-col gap-2 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer"> className="p-4 border-2 border-mti-purple-light/20 rounded-xl flex gap-2 justify-between hover:border-mti-purple group transition ease-in-out duration-300 text-left cursor-pointer">
<span> <div className="flex flex-col gap-2 w-full">
<b>Group: </b> <span className="flex items-center gap-1">
<span className="bg-mti-purple text-white font-semibold px-2">Classroom</span>
{group.name} {group.name}
</span> </span>
<span> <span className="flex items-center gap-1">
<b>Admin: </b> <span className="bg-mti-purple text-white font-semibold px-2">Admin</span>
{getUserName(group.admin)} {getUserName(group.admin)}
</span> </span>
<b>Participants ({group.participants.length}): </b> <span className="flex items-center gap-1">
<span> <span className="bg-mti-purple text-white font-semibold px-2">Participants</span>
{group.participants.slice(0, 5).map(getUserName).join(", ")} <span className="bg-mti-purple-light/50 px-2">{group.participants.length}</span>
{group.participants.length > 5 ? <span className="opacity-60"> and {group.participants.length - 5} more</span> : ""}
</span> </span>
<span>
{group.participants.slice(0, 3).map(getUserName).join(", ")}{' '}
{group.participants.length > 3 ? <span className="opacity-50 bg-mti-purple-light/50 px-1 text-sm">and {group.participants.length - 3} more</span> : ""}
</span>
</div>
<div className="w-fit">
<FaPersonChalkboard className="w-full h-20 -translate-y-[15%] group-hover:text-mti-purple transition ease-in-out duration-300" />
</div>
</Link> </Link>
); );
const firstCard = () => ( const firstCard = () => (
<Link <Link
href={`/classrooms/create`} href={`/classrooms/create`}
className="p-4 border hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer"> className="p-4 border-2 hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer">
<BsPlus size={40} /> <BsPlus size={40} />
<span className="font-semibold">Create Classroom</span> <span className="font-semibold">Create Classroom</span>
</Link> </Link>

7
src/pages/dashboard/admin.tsx
View File

@@ -151,7 +151,12 @@ export default function Dashboard({ user, users, entities, assignments, stats, g
color="purple" color="purple"
/> />
<IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" /> <IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" />
<IconCard Icon={BsPaperclip} label="Average Level" value={averageLevelCalculator(stats).toFixed(1)} color="purple" /> <IconCard Icon={BsPersonFillGear}
onClick={() => router.push("/statistical")}
label="Entity Statistics"
value={entities.length}
color="purple"
/>
<IconCard Icon={BsPersonFillGear} <IconCard Icon={BsPersonFillGear}
onClick={() => router.push("/users/performance")} onClick={() => router.push("/users/performance")}
label="Student Performance" label="Student Performance"

7
src/pages/dashboard/developer.tsx
View File

@@ -151,7 +151,12 @@ export default function Dashboard({ user, users, entities, assignments, stats, g
color="purple" color="purple"
/> />
<IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" /> <IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" />
<IconCard Icon={BsPaperclip} label="Average Level" value={averageLevelCalculator(stats).toFixed(1)} color="purple" /> <IconCard Icon={BsPersonFillGear}
onClick={() => router.push("/statistical")}
label="Entity Statistics"
value={entities.length}
color="purple"
/>
<IconCard Icon={BsPersonFillGear} <IconCard Icon={BsPersonFillGear}
onClick={() => router.push("/users/performance")} onClick={() => router.push("/users/performance")}
label="Student Performance" label="Student Performance"

37
src/pages/dashboard/mastercorporate.tsx
View File

@@ -2,6 +2,7 @@
import Layout from "@/components/High/Layout"; import Layout from "@/components/High/Layout";
import UserDisplayList from "@/components/UserDisplayList"; import UserDisplayList from "@/components/UserDisplayList";
import IconCard from "@/dashboards/IconCard"; import IconCard from "@/dashboards/IconCard";
import { useAllowedEntities } from "@/hooks/useEntityPermissions";
import { Module } from "@/interfaces"; import { Module } from "@/interfaces";
import { EntityWithRoles } from "@/interfaces/entity"; import { EntityWithRoles } from "@/interfaces/entity";
import { Assignment } from "@/interfaces/results"; import { Assignment } from "@/interfaces/results";
@@ -18,6 +19,7 @@ import { groupByExam } from "@/utils/stats";
import { getStatsByUsers } from "@/utils/stats.be"; import { getStatsByUsers } from "@/utils/stats.be";
import { filterAllowedUsers } from "@/utils/users.be"; import { filterAllowedUsers } from "@/utils/users.be";
import { getEntitiesUsers } from "@/utils/users.be"; import { getEntitiesUsers } from "@/utils/users.be";
import { clsx } from "clsx";
import { withIronSessionSsr } from "iron-session/next"; import { withIronSessionSsr } from "iron-session/next";
import { uniqBy } from "lodash"; import { uniqBy } from "lodash";
import moment from "moment"; import moment from "moment";
@@ -73,30 +75,7 @@ export default function Dashboard({ user, users, entities, assignments, stats, g
const router = useRouter(); const router = useRouter();
const averageLevelCalculator = (studentStats: Stat[]) => { const allowedEntityStatistics = useAllowedEntities(user, entities, 'view_entity_statistics')
const formattedStats = studentStats
.map((s) => ({
focus: students.find((u) => u.id === s.user)?.focus,
score: s.score,
module: s.module,
}))
.filter((f) => !!f.focus);
const bandScores = formattedStats.map((s) => ({
module: s.module,
level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
}));
const levels: { [key in Module]: number } = {
reading: 0,
listening: 0,
writing: 0,
speaking: 0,
level: 0,
};
bandScores.forEach((b) => (levels[b.module] += b.level));
return calculateAverageLevel(levels);
};
const UserDisplay = (displayUser: User) => ( const UserDisplay = (displayUser: User) => (
<div className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300"> <div className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
@@ -152,18 +131,26 @@ export default function Dashboard({ user, users, entities, assignments, stats, g
color="purple" color="purple"
/> />
<IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" /> <IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" />
<IconCard Icon={BsPaperclip} label="Average Level" value={averageLevelCalculator(stats).toFixed(1)} color="purple" />
<IconCard Icon={BsPersonFillGear} <IconCard Icon={BsPersonFillGear}
onClick={() => router.push("/users/performance")} onClick={() => router.push("/users/performance")}
label="Student Performance" label="Student Performance"
value={students.length} value={students.length}
color="purple" color="purple"
/> />
{allowedEntityStatistics.length > 0 && (
<IconCard Icon={BsPersonFillGear}
onClick={() => router.push("/statistical")}
label="Entity Statistics"
value={allowedEntityStatistics.length}
color="purple"
/>
)}
<IconCard <IconCard
Icon={BsEnvelopePaper} Icon={BsEnvelopePaper}
onClick={() => router.push("/assignments")} onClick={() => router.push("/assignments")}
label="Assignments" label="Assignments"
value={assignments.filter((a) => !a.archived).length} value={assignments.filter((a) => !a.archived).length}
className={clsx(allowedEntityStatistics.length === 0 && "col-span-2")}
color="purple" color="purple"
/> />
<IconCard <IconCard

50
src/pages/entities/[id]/roles/[role].tsx
View File

@@ -11,6 +11,7 @@ import { requestUser } from "@/utils/api";
import { getEntityWithRoles } from "@/utils/entities.be"; import { getEntityWithRoles } from "@/utils/entities.be";
import { shouldRedirectHome } from "@/utils/navigation.disabled"; import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { doesEntityAllow } from "@/utils/permissions"; import { doesEntityAllow } from "@/utils/permissions";
import { isAdmin } from "@/utils/users";
import { countEntityUsers } from "@/utils/users.be"; import { countEntityUsers } from "@/utils/users.be";
import axios from "axios"; import axios from "axios";
import { withIronSessionSsr } from "iron-session/next"; import { withIronSessionSsr } from "iron-session/next";
@@ -42,6 +43,10 @@ const USER_MANAGEMENT: PermissionLayout[] = [
{ label: "Delete Teachers", key: "delete_teachers" }, { label: "Delete Teachers", key: "delete_teachers" },
{ label: "Delete Corporate Accounts", key: "delete_corporates" }, { label: "Delete Corporate Accounts", key: "delete_corporates" },
{ label: "Delete Master Corporate Accounts", key: "delete_mastercorporates" }, { label: "Delete Master Corporate Accounts", key: "delete_mastercorporates" },
{ label: "Create a Single User", key: "create_user" },
{ label: "Create Users in Batch", key: "create_user_batch" },
{ label: "Create a Single Code", key: "create_code" },
{ label: "Create Codes in Batch", key: "create_code_batch" },
] ]
const EXAM_MANAGEMENT: PermissionLayout[] = [ const EXAM_MANAGEMENT: PermissionLayout[] = [
@@ -73,6 +78,7 @@ const CLASSROOM_MANAGEMENT: PermissionLayout[] = [
const ENTITY_MANAGEMENT: PermissionLayout[] = [ const ENTITY_MANAGEMENT: PermissionLayout[] = [
{ label: "View Entities", key: "view_entities" }, { label: "View Entities", key: "view_entities" },
{ label: "View Entity Statistics", key: "view_entity_statistics" },
{ label: "Rename Entity", key: "rename_entity" }, { label: "Rename Entity", key: "rename_entity" },
{ label: "Add to Entity", key: "add_to_entity" }, { label: "Add to Entity", key: "add_to_entity" },
{ label: "Remove from Entity", key: "remove_from_entity" }, { label: "Remove from Entity", key: "remove_from_entity" },
@@ -110,6 +116,7 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res, params})
if (!entityRole) return redirect(`/entities/${id}/roles`) if (!entityRole) return redirect(`/entities/${id}/roles`)
if (!doesEntityAllow(user, entity, "view_entity_roles")) return redirect(`/entities/${id}`) if (!doesEntityAllow(user, entity, "view_entity_roles")) return redirect(`/entities/${id}`)
const disableEdit = !isAdmin(user) && findBy(user.entities, 'id', entity.id)?.role === entityRole.id
const userCount = await countEntityUsers(id, { "entities.role": role }); const userCount = await countEntityUsers(id, { "entities.role": role });
@@ -119,6 +126,7 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res, params})
entity, entity,
role: entityRole, role: entityRole,
userCount, userCount,
disableEdit
}), }),
}; };
}, sessionOptions); }, sessionOptions);
@@ -128,9 +136,10 @@ interface Props {
entity: EntityWithRoles; entity: EntityWithRoles;
role: Role; role: Role;
userCount: number; userCount: number;
disableEdit?: boolean
} }
export default function Role({user, entity, role, userCount}: Props) { export default function Role({ user, entity, role, userCount, disableEdit }: Props) {
const [permissions, setPermissions] = useState(role.permissions) const [permissions, setPermissions] = useState(role.permissions)
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@@ -140,8 +149,9 @@ export default function Role({user, entity, role, userCount}: Props) {
const canRenameRole = useEntityPermission(user, entity, "rename_entity_role") const canRenameRole = useEntityPermission(user, entity, "rename_entity_role")
const canDeleteRole = useEntityPermission(user, entity, "delete_entity_role") const canDeleteRole = useEntityPermission(user, entity, "delete_entity_role")
const renameRole = () => { const renameRole = () => {
if (!canRenameRole) return; if (!canRenameRole || disableEdit) return;
const label = prompt("Rename this role:", role.label); const label = prompt("Rename this role:", role.label);
if (!label) return; if (!label) return;
@@ -161,7 +171,7 @@ export default function Role({user, entity, role, userCount}: Props) {
}; };
const deleteRole = () => { const deleteRole = () => {
if (!canDeleteRole || role.isDefault) return; if (!canDeleteRole || role.isDefault || disableEdit) return;
if (!confirm("Are you sure you want to delete this role?")) return; if (!confirm("Are you sure you want to delete this role?")) return;
setIsLoading(true); setIsLoading(true);
@@ -180,7 +190,7 @@ export default function Role({user, entity, role, userCount}: Props) {
}; };
const editPermissions = () => { const editPermissions = () => {
if (!canEditPermissions) return if (!canEditPermissions || disableEdit) return
setIsLoading(true); setIsLoading(true);
@@ -197,7 +207,14 @@ export default function Role({user, entity, role, userCount}: Props) {
.finally(() => setIsLoading(false)); .finally(() => setIsLoading(false));
} }
const enableCheckbox = (permission: RolePermission) => {
if (!canEditPermissions || disableEdit) return false
return doesEntityAllow(user, entity, permission)
}
const togglePermissions = (p: RolePermission) => setPermissions(prev => prev.includes(p) ? prev.filter(x => x !== p) : [...prev, p]) const togglePermissions = (p: RolePermission) => setPermissions(prev => prev.includes(p) ? prev.filter(x => x !== p) : [...prev, p])
const toggleMultiplePermissions = (p: RolePermission[]) =>
setPermissions(prev => [...prev.filter(x => !p.includes(x)), ...(p.every(x => prev.includes(x)) ? [] : p)])
return ( return (
<> <>
@@ -256,8 +273,9 @@ export default function Role({user, entity, role, userCount}: Props) {
<div className="w-full flex items-center justify-between"> <div className="w-full flex items-center justify-between">
<b>User Management</b> <b>User Management</b>
<Checkbox <Checkbox
disabled={!canEditPermissions || disableEdit}
isChecked={mapBy(USER_MANAGEMENT, 'key').every(k => permissions.includes(k))} isChecked={mapBy(USER_MANAGEMENT, 'key').every(k => permissions.includes(k))}
onChange={() => mapBy(USER_MANAGEMENT, 'key').forEach(togglePermissions)} onChange={() => toggleMultiplePermissions(mapBy(USER_MANAGEMENT, 'key').filter(enableCheckbox))}
> >
Select all Select all
</Checkbox> </Checkbox>
@@ -265,7 +283,7 @@ export default function Role({user, entity, role, userCount}: Props) {
<Separator /> <Separator />
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{USER_MANAGEMENT.map(({ label, key }) => ( {USER_MANAGEMENT.map(({ label, key }) => (
<Checkbox disabled={!canEditPermissions} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}> <Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
{label} {label}
</Checkbox> </Checkbox>
))} ))}
@@ -276,8 +294,9 @@ export default function Role({user, entity, role, userCount}: Props) {
<div className="w-full flex items-center justify-between"> <div className="w-full flex items-center justify-between">
<b>Exam Management</b> <b>Exam Management</b>
<Checkbox <Checkbox
disabled={!canEditPermissions || disableEdit}
isChecked={mapBy(EXAM_MANAGEMENT, 'key').every(k => permissions.includes(k))} isChecked={mapBy(EXAM_MANAGEMENT, 'key').every(k => permissions.includes(k))}
onChange={() => mapBy(EXAM_MANAGEMENT, 'key').forEach(togglePermissions)} onChange={() => toggleMultiplePermissions(mapBy(EXAM_MANAGEMENT, 'key').filter(enableCheckbox))}
> >
Select all Select all
</Checkbox> </Checkbox>
@@ -285,7 +304,7 @@ export default function Role({user, entity, role, userCount}: Props) {
<Separator /> <Separator />
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-4">
{EXAM_MANAGEMENT.map(({ label, key }) => ( {EXAM_MANAGEMENT.map(({ label, key }) => (
<Checkbox disabled={!canEditPermissions} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}> <Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
{label} {label}
</Checkbox> </Checkbox>
))} ))}
@@ -296,8 +315,9 @@ export default function Role({user, entity, role, userCount}: Props) {
<div className="w-full flex items-center justify-between"> <div className="w-full flex items-center justify-between">
<b>Clasroom Management</b> <b>Clasroom Management</b>
<Checkbox <Checkbox
disabled={!canEditPermissions || disableEdit}
isChecked={mapBy(CLASSROOM_MANAGEMENT, 'key').every(k => permissions.includes(k))} isChecked={mapBy(CLASSROOM_MANAGEMENT, 'key').every(k => permissions.includes(k))}
onChange={() => mapBy(CLASSROOM_MANAGEMENT, 'key').forEach(togglePermissions)} onChange={() => toggleMultiplePermissions(mapBy(CLASSROOM_MANAGEMENT, 'key').filter(enableCheckbox))}
> >
Select all Select all
</Checkbox> </Checkbox>
@@ -305,7 +325,7 @@ export default function Role({user, entity, role, userCount}: Props) {
<Separator /> <Separator />
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{CLASSROOM_MANAGEMENT.map(({ label, key }) => ( {CLASSROOM_MANAGEMENT.map(({ label, key }) => (
<Checkbox disabled={!canEditPermissions} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}> <Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
{label} {label}
</Checkbox> </Checkbox>
))} ))}
@@ -316,8 +336,9 @@ export default function Role({user, entity, role, userCount}: Props) {
<div className="w-full flex items-center justify-between"> <div className="w-full flex items-center justify-between">
<b>Entity Management</b> <b>Entity Management</b>
<Checkbox <Checkbox
disabled={!canEditPermissions || disableEdit}
isChecked={mapBy(ENTITY_MANAGEMENT, 'key').every(k => permissions.includes(k))} isChecked={mapBy(ENTITY_MANAGEMENT, 'key').every(k => permissions.includes(k))}
onChange={() => mapBy(ENTITY_MANAGEMENT, 'key').forEach(togglePermissions)} onChange={() => toggleMultiplePermissions(mapBy(ENTITY_MANAGEMENT, 'key').filter(enableCheckbox))}
> >
Select all Select all
</Checkbox> </Checkbox>
@@ -325,7 +346,7 @@ export default function Role({user, entity, role, userCount}: Props) {
<Separator /> <Separator />
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{ENTITY_MANAGEMENT.map(({ label, key }) => ( {ENTITY_MANAGEMENT.map(({ label, key }) => (
<Checkbox disabled={!canEditPermissions} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}> <Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
{label} {label}
</Checkbox> </Checkbox>
))} ))}
@@ -336,8 +357,9 @@ export default function Role({user, entity, role, userCount}: Props) {
<div className="w-full flex items-center justify-between"> <div className="w-full flex items-center justify-between">
<b>Assignment Management</b> <b>Assignment Management</b>
<Checkbox <Checkbox
disabled={!canEditPermissions || disableEdit}
isChecked={mapBy(ASSIGNMENT_MANAGEMENT, 'key').every(k => permissions.includes(k))} isChecked={mapBy(ASSIGNMENT_MANAGEMENT, 'key').every(k => permissions.includes(k))}
onChange={() => mapBy(ASSIGNMENT_MANAGEMENT, 'key').forEach(togglePermissions)} onChange={() => toggleMultiplePermissions(mapBy(ASSIGNMENT_MANAGEMENT, 'key').filter(enableCheckbox))}
> >
Select all Select all
</Checkbox> </Checkbox>
@@ -345,7 +367,7 @@ export default function Role({user, entity, role, userCount}: Props) {
<Separator /> <Separator />
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{ASSIGNMENT_MANAGEMENT.map(({ label, key }) => ( {ASSIGNMENT_MANAGEMENT.map(({ label, key }) => (
<Checkbox disabled={!canEditPermissions} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}> <Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
{label} {label}
</Checkbox> </Checkbox>
))} ))}

26
src/pages/entities/index.tsx
View File

@@ -12,7 +12,7 @@ import {countEntityUsers, getEntityUsers, getSpecificUsers} from "@/utils/users.
import { checkAccess, findAllowedEntities, getTypesOfUser } from "@/utils/permissions"; import { checkAccess, findAllowedEntities, getTypesOfUser } from "@/utils/permissions";
import Link from "next/link"; import Link from "next/link";
import { uniq } from "lodash"; import { uniq } from "lodash";
import {BsPlus} from "react-icons/bs"; import { BsBank, BsPlus } from "react-icons/bs";
import CardList from "@/components/High/CardList"; import CardList from "@/components/High/CardList";
import { getEntitiesWithRoles } from "@/utils/entities.be"; import { getEntitiesWithRoles } from "@/utils/entities.be";
import { EntityWithRoles } from "@/interfaces/entity"; import { EntityWithRoles } from "@/interfaces/entity";
@@ -52,23 +52,31 @@ export default function Home({user, entities}: Props) {
<Link <Link
href={`/entities/${entity.id}`} href={`/entities/${entity.id}`}
key={entity.id} key={entity.id}
className="p-4 border rounded-xl flex flex-col gap-2 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer"> className="p-4 border-2 border-mti-purple-light/20 rounded-xl flex gap-2 justify-between hover:border-mti-purple group transition ease-in-out duration-300 text-left cursor-pointer">
<span> <div className="flex flex-col gap-2 w-full">
<b>Entity: </b> <span className="flex items-center gap-1">
<span className="bg-mti-purple text-white font-semibold px-2">Entity</span>
{entity.label} {entity.label}
</span> </span>
<b>Members ({count}): </b> <span className="flex items-center gap-1">
<span> <span className="bg-mti-purple text-white font-semibold px-2">Members</span>
{users.map(getUserName).join(", ")} <span className="bg-mti-purple-light/50 px-2">{count}</span>
{count > 5 ? <span className="opacity-60"> and {count - 5} more</span> : ""}
</span> </span>
<span>
{users.map(getUserName).join(", ")}{' '}
{count > 5 ? <span className="opacity-50 bg-mti-purple-light/50 px-1 text-sm">and {count - 5} more</span> : ""}
</span>
</div>
<div className="w-fit">
<BsBank className="w-full h-20 -translate-y-[15%] group-hover:text-mti-purple transition ease-in-out duration-300" />
</div>
</Link> </Link>
); );
const firstCard = () => ( const firstCard = () => (
<Link <Link
href={`/entities/create`} href={`/entities/create`}
className="p-4 border hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer"> className="p-4 border-2 hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer">
<BsPlus size={40} /> <BsPlus size={40} />
<span className="font-semibold">Create Entity</span> <span className="font-semibold">Create Entity</span>
</Link> </Link>

1
src/pages/exam.tsx
View File

@@ -21,6 +21,7 @@ import { useRouter } from "next/router";
import { getSessionByAssignment } from "@/utils/sessions.be"; import { getSessionByAssignment } from "@/utils/sessions.be";
import { Session } from "@/hooks/useSessions"; import { Session } from "@/hooks/useSessions";
import { activeAssignmentFilter } from "@/utils/assignments"; import { activeAssignmentFilter } from "@/utils/assignments";
import { checkAccess } from "@/utils/permissions";
export const getServerSideProps = withIronSessionSsr(async ({ req, res, query }) => { export const getServerSideProps = withIronSessionSsr(async ({ req, res, query }) => {
const user = await requestUser(req, res) const user = await requestUser(req, res)

2
src/pages/record.tsx
View File

@@ -72,7 +72,6 @@ export default function History({ user, users, assignments, entities }: Props) {
const [filter, setFilter] = useState<Filter>(); const [filter, setFilter] = useState<Filter>();
const { data: stats, isLoading: isStatsLoading } = useFilterRecordsByUser<Stat[]>(statsUserId || user?.id); const { data: stats, isLoading: isStatsLoading } = useFilterRecordsByUser<Stat[]>(statsUserId || user?.id);
const { gradingSystem } = useGradingSystem();
const renderPdfIcon = usePDFDownload("stats"); const renderPdfIcon = usePDFDownload("stats");
@@ -167,7 +166,6 @@ export default function History({ user, users, assignments, entities }: Props) {
selectedTrainingExams={selectedTrainingExams} selectedTrainingExams={selectedTrainingExams}
setSelectedTrainingExams={setSelectedTrainingExams} setSelectedTrainingExams={setSelectedTrainingExams}
maxTrainingExams={MAX_TRAINING_EXAMS} maxTrainingExams={MAX_TRAINING_EXAMS}
gradingSystem={gradingSystem?.steps}
renderPdfIcon={renderPdfIcon} renderPdfIcon={renderPdfIcon}
/> />
); );

47
src/pages/settings.tsx
View File

@@ -20,7 +20,6 @@ import IconCard from "@/dashboards/IconCard";
import { BsCode, BsCodeSquare, BsGearFill, BsPeopleFill, BsPersonFill } from "react-icons/bs"; import { BsCode, BsCodeSquare, BsGearFill, BsPeopleFill, BsPersonFill } from "react-icons/bs";
import UserCreator from "./(admin)/UserCreator"; import UserCreator from "./(admin)/UserCreator";
import CorporateGradingSystem from "./(admin)/CorporateGradingSystem"; import CorporateGradingSystem from "./(admin)/CorporateGradingSystem";
import useGradingSystem from "@/hooks/useGrading";
import { CEFR_STEPS } from "@/resources/grading"; import { CEFR_STEPS } from "@/resources/grading";
import { User } from "@/interfaces/user"; import { User } from "@/interfaces/user";
import { getUserPermissions } from "@/utils/permissions.be"; import { getUserPermissions } from "@/utils/permissions.be";
@@ -32,6 +31,10 @@ import { mapBy, serialize, redirect } from "@/utils";
import { EntityWithRoles } from "@/interfaces/entity"; import { EntityWithRoles } from "@/interfaces/entity";
import { requestUser } from "@/utils/api"; import { requestUser } from "@/utils/api";
import { isAdmin } from "@/utils/users"; import { isAdmin } from "@/utils/users";
import { getGradingSystemByEntities, getGradingSystemByEntity } from "@/utils/grading.be";
import { Grading } from "@/interfaces";
import { useRouter } from "next/router";
import { useAllowedEntities } from "@/hooks/useEntityPermissions";
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => { export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
const user = await requestUser(req, res) const user = await requestUser(req, res)
@@ -43,9 +46,11 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
const permissions = await getUserPermissions(user.id); const permissions = await getUserPermissions(user.id);
const entities = isAdmin(user) ? await getEntitiesWithRoles() : await getEntitiesWithRoles(mapBy(user.entities, 'id')) const entities = isAdmin(user) ? await getEntitiesWithRoles() : await getEntitiesWithRoles(mapBy(user.entities, 'id'))
const allUsers = await getUsers() const allUsers = await getUsers()
const gradingSystems = await getGradingSystemByEntities(mapBy(entities, 'id'))
const entitiesGrading = entities.map(e => gradingSystems.find(g => g.entity === e.id) || { entity: e.id, steps: CEFR_STEPS })
return { return {
props: serialize({ user, permissions, entities, allUsers }), props: serialize({ user, permissions, entities, allUsers, entitiesGrading }),
}; };
}, sessionOptions); }, sessionOptions);
@@ -54,12 +59,17 @@ interface Props {
permissions: PermissionType[]; permissions: PermissionType[];
entities: EntityWithRoles[]; entities: EntityWithRoles[];
allUsers: User[] allUsers: User[]
entitiesGrading: Grading[]
} }
export default function Admin({ user, entities, permissions, allUsers }: Props) { export default function Admin({ user, entities, permissions, allUsers, entitiesGrading }: Props) {
const { gradingSystem, mutate } = useGradingSystem();
const [modalOpen, setModalOpen] = useState<string>(); const [modalOpen, setModalOpen] = useState<string>();
const router = useRouter()
const entitiesAllowCreateUser = useAllowedEntities(user, entities, 'create_user')
const entitiesAllowCreateUsers = useAllowedEntities(user, entities, 'create_user_batch')
const entitiesAllowCreateCode = useAllowedEntities(user, entities, 'create_code')
const entitiesAllowCreateCodes = useAllowedEntities(user, entities, 'create_code_batch')
return ( return (
<> <>
@@ -75,7 +85,12 @@ export default function Admin({ user, entities, permissions, allUsers }: Props)
<ToastContainer /> <ToastContainer />
<Layout user={user} className="gap-6"> <Layout user={user} className="gap-6">
<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)} maxWidth="max-w-[85%]"> <Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)} maxWidth="max-w-[85%]">
<BatchCreateUser user={user} entities={entities} permissions={permissions} onFinish={() => setModalOpen(undefined)} /> <BatchCreateUser
user={user}
entities={entitiesAllowCreateUser}
permissions={permissions}
onFinish={() => setModalOpen(undefined)}
/>
</Modal> </Modal>
<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}> <Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
<BatchCodeGenerator user={user} users={allUsers} permissions={permissions} onFinish={() => setModalOpen(undefined)} /> <BatchCodeGenerator user={user} users={allUsers} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
@@ -84,16 +99,20 @@ export default function Admin({ user, entities, permissions, allUsers }: Props)
<CodeGenerator user={user} permissions={permissions} onFinish={() => setModalOpen(undefined)} /> <CodeGenerator user={user} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
</Modal> </Modal>
<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}> <Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
<UserCreator user={user} entities={entities} users={allUsers} permissions={permissions} onFinish={() => setModalOpen(undefined)} /> <UserCreator
user={user}
entities={entitiesAllowCreateUsers}
users={allUsers}
permissions={permissions}
onFinish={() => setModalOpen(undefined)}
/>
</Modal> </Modal>
<Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}> <Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
<CorporateGradingSystem <CorporateGradingSystem
user={user} user={user}
defaultSteps={gradingSystem?.steps || CEFR_STEPS} entitiesGrading={entitiesGrading}
mutate={(steps) => { entities={entities}
mutate({ user: user.id, steps }); mutate={() => router.replace(router.asPath)}
setModalOpen(undefined);
}}
/> />
</Modal> </Modal>
@@ -107,6 +126,7 @@ export default function Admin({ user, entities, permissions, allUsers }: Props)
color="purple" color="purple"
className="w-full h-full" className="w-full h-full"
onClick={() => setModalOpen("createCode")} onClick={() => setModalOpen("createCode")}
disabled={entitiesAllowCreateCode.length > 0}
/> />
<IconCard <IconCard
Icon={BsCodeSquare} Icon={BsCodeSquare}
@@ -114,6 +134,7 @@ export default function Admin({ user, entities, permissions, allUsers }: Props)
color="purple" color="purple"
className="w-full h-full" className="w-full h-full"
onClick={() => setModalOpen("batchCreateCode")} onClick={() => setModalOpen("batchCreateCode")}
disabled={entitiesAllowCreateCodes.length > 0}
/> />
<IconCard <IconCard
Icon={BsPersonFill} Icon={BsPersonFill}
@@ -121,6 +142,7 @@ export default function Admin({ user, entities, permissions, allUsers }: Props)
color="purple" color="purple"
className="w-full h-full" className="w-full h-full"
onClick={() => setModalOpen("createUser")} onClick={() => setModalOpen("createUser")}
disabled={entitiesAllowCreateUser.length > 0}
/> />
<IconCard <IconCard
Icon={BsPeopleFill} Icon={BsPeopleFill}
@@ -128,6 +150,7 @@ export default function Admin({ user, entities, permissions, allUsers }: Props)
color="purple" color="purple"
className="w-full h-full" className="w-full h-full"
onClick={() => setModalOpen("batchCreateUser")} onClick={() => setModalOpen("batchCreateUser")}
disabled={entitiesAllowCreateUsers.length > 0}
/> />
{checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && ( {checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && (
<IconCard <IconCard

307
src/pages/statistical.tsx Normal file
View File

@@ -0,0 +1,307 @@
/* eslint-disable @next/next/no-img-element */
import Layout from "@/components/High/Layout";
import Table from "@/components/High/Table";
import Checkbox from "@/components/Low/Checkbox";
import Separator from "@/components/Low/Separator";
import { Session } from "@/hooks/useSessions";
import { Entity, EntityWithRoles } from "@/interfaces/entity";
import { Exam } from "@/interfaces/exam";
import { Assignment, AssignmentResult } from "@/interfaces/results";
import { Group, Stat, StudentUser, User } from "@/interfaces/user";
import { sessionOptions } from "@/lib/session";
import { filterBy, findBy, mapBy, redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api";
import { getEntitiesAssignments } from "@/utils/assignments.be";
import { getEntitiesWithRoles } from "@/utils/entities.be";
import { getExamsByIds } from "@/utils/exams.be";
import { checkAccess, findAllowedEntities } from "@/utils/permissions";
import { getSessionsByAssignments, getSessionsByUser } from "@/utils/sessions.be";
import { getStatsByUsers } from "@/utils/stats.be";
import { isAdmin } from "@/utils/users";
import { getEntitiesUsers } from "@/utils/users.be";
import { createColumnHelper } from "@tanstack/react-table";
import axios from "axios";
import { clsx } from "clsx";
import { withIronSessionSsr } from "iron-session/next";
import { capitalize, orderBy } from "lodash";
import moment from "moment";
import Head from "next/head";
import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import ReactDatePicker from "react-datepicker";
import {
BsBank,
BsChevronLeft,
BsX,
} from "react-icons/bs";
interface Props {
user: User;
students: StudentUser[];
entities: EntityWithRoles[];
assignments: Assignment[];
sessions: Session[]
exams: Exam[]
}
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
const user = await requestUser(req, res)
if (!user) return redirect("/login")
if (!checkAccess(user, ["admin", "developer", "mastercorporate"]))
return redirect("/")
const entityIDS = mapBy(user.entities, "id") || [];
const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
const allowedEntities = findAllowedEntities(user, entities, 'view_entity_statistics')
if (allowedEntities.length === 0) return redirect("/")
const studentsAllowedEntities = findAllowedEntities(user, entities, 'view_students')
const students = await getEntitiesUsers(mapBy(studentsAllowedEntities, 'id'), { type: "student" })
const assignments = await getEntitiesAssignments(mapBy(entities, "id"));
const sessions = await getSessionsByAssignments(mapBy(assignments, 'id'))
const exams = await getExamsByIds(assignments.flatMap(a => a.exams))
return { props: serialize({ user, students, entities: allowedEntities, assignments, sessions, exams }) };
}, sessionOptions);
interface Item {
student: StudentUser
result?: AssignmentResult
assignment: Assignment
exams: Exam[]
entity: Entity
session?: Session
}
const columnHelper = createColumnHelper<Item>();
export default function Statistical({ user, students, entities, assignments, sessions, exams }: Props) {
const [startDate, setStartDate] = useState<Date>(new Date());
const [endDate, setEndDate] = useState<Date | null>(moment().add(1, 'month').toDate());
const [selectedEntities, setSelectedEntities] = useState<string[]>([])
const [isDownloading, setIsDownloading] = useState(false)
const resetDateRange = () => {
const orderedAssignments = orderBy(assignments, ['startDate'], ['asc'])
setStartDate(moment(orderedAssignments.shift()?.startDate || "2024-01-01T00:00:01.986Z").toDate())
setEndDate(moment().add(1, 'month').toDate())
}
useEffect(resetDateRange, [assignments])
const updateDateRange = (dates: [Date, Date | null]) => {
const [start, end] = dates;
setStartDate(start!);
setEndDate(end);
};
const toggleEntity = (id: string) => setSelectedEntities(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id])
const renderAssignmentResolution = (entityID: string) => {
const entityAssignments = filterBy(assignments, 'entity', entityID)
const total = entityAssignments.reduce((acc, curr) => acc + curr.assignees.length, 0)
const results = entityAssignments.reduce((acc, curr) => acc + curr.results.length, 0)
return `${results}/${total}`
}
const totalAssignmentResolution = useMemo(() => {
const total = assignments.reduce((acc, curr) => acc + curr.assignees.length, 0)
const results = assignments.reduce((acc, curr) => acc + curr.results.length, 0)
return { results, total }
}, [assignments])
const filteredAssignments = useMemo(() => {
if (!startDate && !endDate) return assignments
const startDateFiltered = startDate ? assignments.filter(a => moment(a.startDate).isSameOrAfter(moment(startDate))) : assignments
return endDate ? startDateFiltered.filter(a => moment(a.endDate).isSameOrBefore(moment(endDate))) : startDateFiltered
}, [startDate, endDate, assignments])
const data: Item[] = useMemo(() =>
filteredAssignments.filter(a => selectedEntities.includes(a.entity || "")).flatMap(a => a.assignees.map(x => {
const result = findBy(a.results, 'user', x)
const student = findBy(students, 'id', x)
const entity = findBy(entities, 'id', a.entity)
const assignmentExams = exams.filter(e => a.exams.map(x => `${x.id}_${x.module}`).includes(`${e.id}_${e.module}`))
const session = sessions.find(s => s.assignment?.id === a.id && s.user === x)
if (!student) return undefined
return { student, result, assignment: a, exams: assignmentExams, session, entity }
})).filter(x => !!x) as Item[],
[students, selectedEntities, filteredAssignments, exams, sessions, entities]
)
const sortedData: Item[] = useMemo(() => data.sort((a, b) => {
const aTotalScore = a.result?.stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.correct, 0) || 0
const bTotalScore = b.result?.stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.correct, 0) || 0
return bTotalScore - aTotalScore
}), [data])
const downloadExcel = async () => {
setIsDownloading(true)
const request = await axios.post("/api/statistical", {
entities: entities.filter(e => selectedEntities.includes(e.id)),
items: data,
assignments: filteredAssignments,
startDate,
endDate
}, {
responseType: 'blob'
})
const href = URL.createObjectURL(request.data)
const link = document.createElement('a');
link.href = href;
link.setAttribute('download', `statistical_${new Date().toISOString()}.xlsx`);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(href);
setIsDownloading(false)
}
const columns = [
columnHelper.accessor("student.name", {
header: "Student",
cell: (info) => info.getValue(),
}),
columnHelper.accessor("student.studentID", {
header: "Student ID",
cell: (info) => info.getValue(),
}),
columnHelper.accessor("student.email", {
header: "E-mail",
cell: (info) => info.getValue(),
}),
columnHelper.accessor("entity.label", {
header: "Entity",
cell: (info) => info.getValue(),
}),
columnHelper.accessor("assignment.name", {
header: "Assignment",
cell: (info) => info.getValue(),
}),
columnHelper.accessor("assignment.startDate", {
header: "Date",
cell: (info) => moment(info.getValue()).format("DD/MM/YYYY"),
}),
columnHelper.accessor("result", {
header: "Progress",
cell: (info) => {
const student = info.row.original.student
const session = info.row.original.session
if (!student.lastLogin) return <span className="text-mti-red-dark">Never logged in</span>
if (info.getValue()) return <span className="text-mti-green font-semibold">Submitted</span>
if (!session) return <span className="text-mti-rose">Not started</span>
return <span className="font-semibold">
{capitalize(session.exam?.module || "")} Module, Part {session.partIndex + 1}, Exercise {session.exerciseIndex + 1}
</span>
},
})
]
return (
<>
<Head>
<title>Statistical | EnCoach</title>
<meta
name="description"
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Layout user={user}>
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between w-full">
<div className="flex items-center gap-2">
<Link href="/dashboard" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
<BsChevronLeft />
</Link>
<h2 className="font-bold text-2xl">Statistical</h2>
</div>
<Checkbox
onChange={value => setSelectedEntities(value ? mapBy(entities, 'id') : [])}
isChecked={selectedEntities.length === entities.length}
>
Select All
</Checkbox>
</div>
<Separator />
</div>
<section className="flex flex-col gap-3">
<div className="w-full flex items-center justify-between gap-4 flex-wrap">
{entities.map(entity => (
<button
onClick={() => toggleEntity(entity.id)}
className={clsx(
"flex flex-col items-center justify-between gap-3 border-2 drop-shadow rounded-xl bg-white p-8 px-2 w-48 h-52",
"transition ease-in-out duration-300 hover:shadow-xl hover:border-mti-purple",
selectedEntities.includes(entity.id) && "border-mti-purple text-mti-purple"
)}
key={entity.id}
>
<BsBank size={48} />
<div className="flex flex-col gap-1">
<span>{entity.label}</span>
<span className={clsx("font-semibold")}>
{renderAssignmentResolution(entity.id)}
</span>
</div>
</button>
))}
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<ReactDatePicker
className={clsx(
"p-6 px-12 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"hover:border-mti-purple tooltip",
"transition duration-300 ease-in-out",
)}
dateFormat="dd/MM/yyyy"
selectsRange
selected={startDate}
onChange={updateDateRange}
startDate={startDate}
endDate={endDate}
/>
{startDate !== null && endDate !== null && (
<button onClick={resetDateRange} className="transition ease-in-out duration-300 rounded-full p-2 hover:bg-mti-gray-cool/10">
<BsX size={24} />
</button>
)}
</div>
<span className="font-semibold text-lg pr-1">
Total: {totalAssignmentResolution.results} / {totalAssignmentResolution.total}
</span>
</div>
</section>
{selectedEntities.length > 0 && (
<Table
columns={columns}
data={sortedData}
searchFields={[["student", "name"], ["student", "email"], ["student", "studentID"], ["exams", "id"], ["assignment", "name"]]}
searchPlaceholder="Search by student, assignment or exam..."
onDownload={downloadExcel}
isDownloadLoading={isDownloading}
/>
)}
</Layout>
</>
)
}

12
src/resources/entityPermissions.ts
View File

@@ -48,7 +48,12 @@ export type RolePermission =
"edit_assignment" | "edit_assignment" |
"delete_assignment" | "delete_assignment" |
"start_assignment" | "start_assignment" |
"archive_assignment" "archive_assignment" |
"view_entity_statistics" |
"create_user" |
"create_user_batch" |
"create_code" |
"create_code_batch"
export const DEFAULT_PERMISSIONS: RolePermission[] = [ export const DEFAULT_PERMISSIONS: RolePermission[] = [
"view_students", "view_students",
@@ -109,4 +114,9 @@ export const ADMIN_PERMISSIONS: RolePermission[] = [
"delete_assignment", "delete_assignment",
"start_assignment", "start_assignment",
"archive_assignment", "archive_assignment",
"view_entity_statistics",
"create_user",
"create_user_batch",
"create_code",
"create_code_batch"
] ]

46
src/resources/speakingAvatars.ts
View File

@@ -1,37 +1,37 @@
export const AVATARS = [ export const AVATARS = [
{ {
name: "Gia", name: "Matthew Noah",
id: "gia.business", id: "5912afa7c77c47d3883af3d874047aaf",
gender: "female",
},
{
name: "Vadim",
id: "vadim.business",
gender: "male", gender: "male",
}, },
{ {
name: "Orhan", name: "Vera Cerise",
id: "orhan.business", id: "9e58d96a383e4568a7f1e49df549e0e4",
gender: "male",
},
{
name: "Flora",
id: "flora.business",
gender: "female", gender: "female",
}, },
{ {
name: "Scarlett", name: "Edward Tony",
id: "scarlett.business", id: "d2cdd9c0379a4d06ae2afb6e5039bd0c",
gender: "female",
},
{
name: "Parker",
id: "parker.casual",
gender: "male", gender: "male",
}, },
{ {
name: "Ethan", name: "Tanya Molly",
id: "ethan.business", id: "045cb5dcd00042b3a1e4f3bc1c12176b",
gender: "female",
},
{
name: "Kayla Abbi",
id: "1ae1e5396cc444bfad332155fdb7a934",
gender: "female",
},
{
name: "Jerome Ryan",
id: "0ee6aa7cc1084063a630ae514fccaa31",
gender: "male",
},
{
name: "Tyler Christopher",
id: "5772cff935844516ad7eeff21f839e43",
gender: "male", gender: "male",
}, },
]; ];

20
src/utils/grading.be.ts
View File

@@ -6,20 +6,8 @@ import client from "@/lib/mongodb";
const db = client.db(process.env.MONGODB_DB); const db = client.db(process.env.MONGODB_DB);
export const getGradingSystem = async (user: User): Promise<Grading> => {
const grading = await db.collection("grading").findOne<Grading>({id: user.id});
if (!!grading) return grading;
if (user.type !== "teacher" && user.type !== "student") return {steps: CEFR_STEPS, user: user.id};
const corporate = await getUserCorporate(user.id);
if (!corporate) return {steps: CEFR_STEPS, user: user.id};
const corporateSnapshot = await db.collection("grading").findOne<Grading>({id: corporate.id});
if (!!corporateSnapshot) return corporateSnapshot;
return {steps: CEFR_STEPS, user: user.id};
};
export const getGradingSystemByEntity = async (id: string) => export const getGradingSystemByEntity = async (id: string) =>
(await db.collection("grading").findOne<Grading>({entity: id})) || {steps: CEFR_STEPS, user: ""}; (await db.collection("grading").findOne<Grading>({ entity: id })) || { steps: CEFR_STEPS, entity: "" };
export const getGradingSystemByEntities = async (ids: string[]) =>
await db.collection("grading").find<Grading>({ entity: { $in: ids } }).toArray();

3
src/utils/permissions.ts
View File

@@ -4,6 +4,7 @@ import {User, Type, userTypes} from "@/interfaces/user";
import { RolePermission } from "@/resources/entityPermissions"; import { RolePermission } from "@/resources/entityPermissions";
import axios from "axios"; import axios from "axios";
import { findBy, mapBy } from "."; import { findBy, mapBy } from ".";
import { isAdmin } from "./users";
export function checkAccess(user: User, types: Type[], permissions?: PermissionType[], permission?: PermissionType) { export function checkAccess(user: User, types: Type[], permissions?: PermissionType[], permission?: PermissionType) {
if (!user) { if (!user) {
@@ -50,7 +51,7 @@ export function findAllowedEntitiesSomePermissions(user: User, entities: EntityW
} }
export function doesEntityAllow(user: User, entity: EntityWithRoles, permission: RolePermission) { export function doesEntityAllow(user: User, entity: EntityWithRoles, permission: RolePermission) {
if (["admin", "developer"].includes(user?.type)) return true if (isAdmin(user)) return true
const userEntity = findBy(user.entities, 'id', entity?.id) const userEntity = findBy(user.entities, 'id', entity?.id)
if (!userEntity) return false if (!userEntity) return false

5
src/utils/sessions.be.ts
View File

@@ -14,3 +14,8 @@ export const getSessionByAssignment = async (assignmentID: string) =>
await db await db
.collection("sessions") .collection("sessions")
.findOne<Session>({ "assignment.id": assignmentID }) .findOne<Session>({ "assignment.id": assignmentID })
export const getSessionsByAssignments = async (assignmentIDs: string[]) =>
await db
.collection("sessions")
.find<Session>({ "assignment.id": { $in: assignmentIDs } }).toArray()