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

Added option to start exam which serves as an alternative to start date for the exam

Browse Source
This commit is contained in:
Joao Ramos
2024-08-24 17:38:57 +01:00
parent 101605ad88
commit 74a53f55fd
8 changed files with 1850 additions and 1346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

918
src/dashboards/AssignmentCreator.tsx
View File

@@ -1,385 +1,593 @@
import Input from "@/components/Low/Input"; import Input from "@/components/Low/Input";
import Modal from "@/components/Modal"; import Modal from "@/components/Modal";
import {Module} from "@/interfaces"; import { Module } from "@/interfaces";
import clsx from "clsx"; import clsx from "clsx";
import {useEffect, useState} from "react"; import { useEffect, useState } from "react";
import {BsBook, BsCheckCircle, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle} from "react-icons/bs"; import {
import {generate} from "random-words"; BsBook,
import {capitalize} from "lodash"; BsCheckCircle,
BsClipboard,
BsHeadphones,
BsMegaphone,
BsPen,
BsXCircle,
} from "react-icons/bs";
import { generate } from "random-words";
import { capitalize } from "lodash";
import useUsers from "@/hooks/useUsers"; import useUsers from "@/hooks/useUsers";
import {Group, User} from "@/interfaces/user"; import { Group, User } from "@/interfaces/user";
import ProgressBar from "@/components/Low/ProgressBar"; import ProgressBar from "@/components/Low/ProgressBar";
import {calculateAverageLevel} from "@/utils/score"; import { calculateAverageLevel } from "@/utils/score";
import Button from "@/components/Low/Button"; import Button from "@/components/Low/Button";
import ReactDatePicker from "react-datepicker"; import ReactDatePicker from "react-datepicker";
import moment from "moment"; import moment from "moment";
import axios from "axios"; import axios from "axios";
import {getExam} from "@/utils/exams"; import { getExam } from "@/utils/exams";
import {toast} from "react-toastify"; import { toast } from "react-toastify";
import {Assignment} from "@/interfaces/results"; import { Assignment } from "@/interfaces/results";
import Checkbox from "@/components/Low/Checkbox"; import Checkbox from "@/components/Low/Checkbox";
import {InstructorGender, Variant} from "@/interfaces/exam"; import { InstructorGender, Variant } from "@/interfaces/exam";
import Select from "@/components/Low/Select"; import Select from "@/components/Low/Select";
import useExams from "@/hooks/useExams"; import useExams from "@/hooks/useExams";
interface Props { interface Props {
isCreating: boolean; isCreating: boolean;
assigner: string; assigner: string;
users: User[]; users: User[];
groups: Group[]; groups: Group[];
assignment?: Assignment; assignment?: Assignment;
cancelCreation: () => void; cancelCreation: () => void;
} }
export default function AssignmentCreator({isCreating, assignment, assigner, groups, users, cancelCreation}: Props) { export default function AssignmentCreator({
const [selectedModules, setSelectedModules] = useState<Module[]>(assignment?.exams.map((e) => e.module) || []); isCreating,
const [assignees, setAssignees] = useState<string[]>(assignment?.assignees || []); assignment,
const [name, setName] = useState(assignment?.name || generate({minLength: 6, maxLength: 8, min: 2, max: 3, join: " ", formatter: capitalize})); assigner,
const [isLoading, setIsLoading] = useState(false); groups,
const [startDate, setStartDate] = useState<Date | null>(assignment ? moment(assignment.startDate).toDate() : new Date()); users,
const [endDate, setEndDate] = useState<Date | null>( cancelCreation,
assignment ? moment(assignment.endDate).toDate() : moment().hours(23).minutes(59).add(8, "day").toDate(), }: Props) {
); const [selectedModules, setSelectedModules] = useState<Module[]>(
const [variant, setVariant] = useState<Variant>("full"); assignment?.exams.map((e) => e.module) || []
const [instructorGender, setInstructorGender] = useState<InstructorGender>(assignment?.instructorGender || "varied"); );
// creates a new exam for each assignee or just one exam for all assignees const [assignees, setAssignees] = useState<string[]>(
const [generateMultiple, setGenerateMultiple] = useState<boolean>(false); assignment?.assignees || []
const [useRandomExams, setUseRandomExams] = useState(true); );
const [examIDs, setExamIDs] = useState<{id: string; module: Module}[]>([]); const [name, setName] = useState(
assignment?.name ||
generate({
minLength: 6,
maxLength: 8,
min: 2,
max: 3,
join: " ",
formatter: capitalize,
})
);
const [isLoading, setIsLoading] = useState(false);
const [startDate, setStartDate] = useState<Date | null>(
assignment ? moment(assignment.startDate).toDate() : new Date()
);
const [endDate, setEndDate] = useState<Date | null>(
assignment
? moment(assignment.endDate).toDate()
: moment().hours(23).minutes(59).add(8, "day").toDate()
);
const [variant, setVariant] = useState<Variant>("full");
const [instructorGender, setInstructorGender] = useState<InstructorGender>(
assignment?.instructorGender || "varied"
);
// creates a new exam for each assignee or just one exam for all assignees
const [generateMultiple, setGenerateMultiple] = useState<boolean>(false);
const [useRandomExams, setUseRandomExams] = useState(true);
const [examIDs, setExamIDs] = useState<{ id: string; module: Module }[]>([]);
const {exams} = useExams(); const { exams } = useExams();
useEffect(() => { useEffect(() => {
setExamIDs((prev) => prev.filter((x) => selectedModules.includes(x.module))); setExamIDs((prev) =>
}, [selectedModules]); prev.filter((x) => selectedModules.includes(x.module))
);
}, [selectedModules]);
const toggleModule = (module: Module) => { const toggleModule = (module: Module) => {
const modules = selectedModules.filter((x) => x !== module); const modules = selectedModules.filter((x) => x !== module);
setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module])); setSelectedModules((prev) =>
}; prev.includes(module) ? modules : [...modules, module]
);
};
const toggleAssignee = (user: User) => { const toggleAssignee = (user: User) => {
setAssignees((prev) => (prev.includes(user.id) ? prev.filter((a) => a !== user.id) : [...prev, user.id])); setAssignees((prev) =>
}; prev.includes(user.id)
? prev.filter((a) => a !== user.id)
: [...prev, user.id]
);
};
const createAssignment = () => { const createAssignment = () => {
setIsLoading(true); setIsLoading(true);
(assignment ? axios.patch : axios.post)(`/api/assignments${assignment ? `/${assignment.id}` : ""}`, { (assignment ? axios.patch : axios.post)(
assignees, `/api/assignments${assignment ? `/${assignment.id}` : ""}`,
name, {
startDate, assignees,
examIDs: !useRandomExams ? examIDs : undefined, name,
endDate, startDate,
selectedModules, examIDs: !useRandomExams ? examIDs : undefined,
generateMultiple, endDate,
variant, selectedModules,
instructorGender, generateMultiple,
variant,
instructorGender,
}
)
.then(() => {
toast.success(
`The assignment "${name}" has been ${
assignment ? "updated" : "created"
} successfully!`
);
cancelCreation();
})
.catch((e) => {
console.log(e);
toast.error("Something went wrong, please try again later!");
})
.finally(() => setIsLoading(false));
};
const deleteAssignment = () => {
if (assignment) {
setIsLoading(true);
if (
!confirm(
`Are you sure you want to delete the "${assignment.name}" assignment?`
)
)
return;
axios
.delete(`api/assignments/${assignment.id}`)
.then(() => {
toast.success(
`The assignment "${name}" has been deleted successfully!`
);
cancelCreation();
})
.catch((e) => {
console.log(e);
toast.error("Something went wrong, please try again later!");
})
.finally(() => setIsLoading(false));
}
};
const startAssignment = () => {
if (assignment) {
setIsLoading(true);
axios
.post(`/api/assignments/${assignment.id}/start`)
.then(() => {
toast.success(
`The assignment "${name}" has been started successfully!`
);
cancelCreation();
}) })
.then(() => { .catch((e) => {
toast.success(`The assignment "${name}" has been ${assignment ? "updated" : "created"} successfully!`); console.log(e);
cancelCreation(); toast.error("Something went wrong, please try again later!");
}) })
.catch((e) => { .finally(() => setIsLoading(false));
console.log(e); }
toast.error("Something went wrong, please try again later!"); }
})
.finally(() => setIsLoading(false));
};
const deleteAssignment = () => { return (
if (assignment) { <Modal isOpen={isCreating} onClose={cancelCreation} title="New Assignment">
setIsLoading(true); <div className="w-full flex flex-col gap-4">
<section className="w-full grid -md:grid-cols-1 md:grid-cols-2 place-items-center lg:grid-cols-6 -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8">
<div
onClick={
!selectedModules.includes("level")
? () => toggleModule("reading")
: undefined
}
className={clsx(
"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
"lg:col-span-2",
selectedModules.includes("reading")
? "border-mti-purple-light"
: "border-mti-gray-platinum"
)}
>
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
<BsBook className="text-white w-7 h-7" />
</div>
<span className="ml-8 font-semibold">Reading</span>
{!selectedModules.includes("reading") &&
!selectedModules.includes("level") && (
<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
)}
{selectedModules.includes("level") && (
<BsXCircle className="text-mti-red-light w-8 h-8" />
)}
{selectedModules.includes("reading") && (
<BsCheckCircle className="text-mti-purple-light w-8 h-8" />
)}
</div>
<div
onClick={
!selectedModules.includes("level")
? () => toggleModule("listening")
: undefined
}
className={clsx(
"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
"lg:col-span-2",
selectedModules.includes("listening")
? "border-mti-purple-light"
: "border-mti-gray-platinum"
)}
>
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
<BsHeadphones className="text-white w-7 h-7" />
</div>
<span className="ml-8 font-semibold">Listening</span>
{!selectedModules.includes("listening") &&
!selectedModules.includes("level") && (
<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
)}
{selectedModules.includes("level") && (
<BsXCircle className="text-mti-red-light w-8 h-8" />
)}
{selectedModules.includes("listening") && (
<BsCheckCircle className="text-mti-purple-light w-8 h-8" />
)}
</div>
<div
onClick={
!selectedModules.includes("level")
? () => toggleModule("writing")
: undefined
}
className={clsx(
"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
"lg:col-span-2",
selectedModules.includes("writing")
? "border-mti-purple-light"
: "border-mti-gray-platinum"
)}
>
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
<BsPen className="text-white w-7 h-7" />
</div>
<span className="ml-8 font-semibold">Writing</span>
{!selectedModules.includes("writing") &&
!selectedModules.includes("level") && (
<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
)}
{selectedModules.includes("level") && (
<BsXCircle className="text-mti-red-light w-8 h-8" />
)}
{selectedModules.includes("writing") && (
<BsCheckCircle className="text-mti-purple-light w-8 h-8" />
)}
</div>
<div
onClick={
!selectedModules.includes("level")
? () => toggleModule("speaking")
: undefined
}
className={clsx(
"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
"lg:col-span-3",
selectedModules.includes("speaking")
? "border-mti-purple-light"
: "border-mti-gray-platinum"
)}
>
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
<BsMegaphone className="text-white w-7 h-7" />
</div>
<span className="ml-8 font-semibold">Speaking</span>
{!selectedModules.includes("speaking") &&
!selectedModules.includes("level") && (
<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
)}
{selectedModules.includes("level") && (
<BsXCircle className="text-mti-red-light w-8 h-8" />
)}
{selectedModules.includes("speaking") && (
<BsCheckCircle className="text-mti-purple-light w-8 h-8" />
)}
</div>
<div
onClick={
(!selectedModules.includes("level") &&
selectedModules.length === 0) ||
selectedModules.includes("level")
? () => toggleModule("level")
: undefined
}
className={clsx(
"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
"lg:col-span-3",
selectedModules.includes("level")
? "border-mti-purple-light"
: "border-mti-gray-platinum"
)}
>
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-level top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
<BsClipboard className="text-white w-7 h-7" />
</div>
<span className="ml-8 font-semibold">Level</span>
{!selectedModules.includes("level") &&
selectedModules.length === 0 && (
<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
)}
{!selectedModules.includes("level") &&
selectedModules.length > 0 && (
<BsXCircle className="text-mti-red-light w-8 h-8" />
)}
{selectedModules.includes("level") && (
<BsCheckCircle className="text-mti-purple-light w-8 h-8" />
)}
</div>
</section>
if (!confirm(`Are you sure you want to delete the "${assignment.name}" assignment?`)) return; <Input
axios type="text"
.delete(`api/assignments/${assignment.id}`) name="name"
.then(() => { onChange={(e) => setName(e)}
toast.success(`The assignment "${name}" has been deleted successfully!`); defaultValue={name}
cancelCreation(); label="Assignment Name"
}) required
.catch((e) => { />
console.log(e);
toast.error("Something went wrong, please try again later!");
})
.finally(() => setIsLoading(false));
}
};
return ( <div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
<Modal isOpen={isCreating} onClose={cancelCreation} title="New Assignment"> <div className="flex flex-col gap-2">
<div className="w-full flex flex-col gap-4"> <label className="font-normal text-base text-mti-gray-dim">
<section className="w-full grid -md:grid-cols-1 md:grid-cols-2 place-items-center lg:grid-cols-6 -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8"> Start Date *
<div </label>
onClick={!selectedModules.includes("level") ? () => toggleModule("reading") : undefined} <ReactDatePicker
className={clsx( className={clsx(
"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer", "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"lg:col-span-2", "hover:border-mti-purple tooltip z-10",
selectedModules.includes("reading") ? "border-mti-purple-light" : "border-mti-gray-platinum", "transition duration-300 ease-in-out"
)}> )}
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-1/2 -translate-y-1/2 left-0 -translate-x-1/2"> popperClassName="!z-20"
<BsBook className="text-white w-7 h-7" /> filterTime={(date) => moment(date).isSameOrAfter(new Date())}
</div> dateFormat="dd/MM/yyyy HH:mm"
<span className="ml-8 font-semibold">Reading</span> selected={startDate}
{!selectedModules.includes("reading") && !selectedModules.includes("level") && ( showTimeSelect
<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" /> onChange={(date) => setStartDate(date)}
)} />
{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />} </div>
{selectedModules.includes("reading") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />} <div className="flex flex-col gap-2">
</div> <label className="font-normal text-base text-mti-gray-dim">
<div End Date *
onClick={!selectedModules.includes("level") ? () => toggleModule("listening") : undefined} </label>
className={clsx( <ReactDatePicker
"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer", className={clsx(
"lg:col-span-2", "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
selectedModules.includes("listening") ? "border-mti-purple-light" : "border-mti-gray-platinum", "hover:border-mti-purple tooltip z-10",
)}> "transition duration-300 ease-in-out"
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-1/2 -translate-y-1/2 left-0 -translate-x-1/2"> )}
<BsHeadphones className="text-white w-7 h-7" /> popperClassName="!z-20"
</div> filterTime={(date) => moment(date).isAfter(startDate)}
<span className="ml-8 font-semibold">Listening</span> dateFormat="dd/MM/yyyy HH:mm"
{!selectedModules.includes("listening") && !selectedModules.includes("level") && ( selected={endDate}
<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" /> showTimeSelect
)} onChange={(date) => setEndDate(date)}
{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />} />
{selectedModules.includes("listening") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />} </div>
</div> </div>
<div
onClick={!selectedModules.includes("level") ? () => toggleModule("writing") : undefined}
className={clsx(
"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
"lg:col-span-2",
selectedModules.includes("writing") ? "border-mti-purple-light" : "border-mti-gray-platinum",
)}>
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
<BsPen className="text-white w-7 h-7" />
</div>
<span className="ml-8 font-semibold">Writing</span>
{!selectedModules.includes("writing") && !selectedModules.includes("level") && (
<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
)}
{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
{selectedModules.includes("writing") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
</div>
<div
onClick={!selectedModules.includes("level") ? () => toggleModule("speaking") : undefined}
className={clsx(
"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
"lg:col-span-3",
selectedModules.includes("speaking") ? "border-mti-purple-light" : "border-mti-gray-platinum",
)}>
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
<BsMegaphone className="text-white w-7 h-7" />
</div>
<span className="ml-8 font-semibold">Speaking</span>
{!selectedModules.includes("speaking") && !selectedModules.includes("level") && (
<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
)}
{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
{selectedModules.includes("speaking") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
</div>
<div
onClick={
(!selectedModules.includes("level") && selectedModules.length === 0) || selectedModules.includes("level")
? () => toggleModule("level")
: undefined
}
className={clsx(
"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
"lg:col-span-3",
selectedModules.includes("level") ? "border-mti-purple-light" : "border-mti-gray-platinum",
)}>
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-level top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
<BsClipboard className="text-white w-7 h-7" />
</div>
<span className="ml-8 font-semibold">Level</span>
{!selectedModules.includes("level") && selectedModules.length === 0 && (
<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
)}
{!selectedModules.includes("level") && selectedModules.length > 0 && <BsXCircle className="text-mti-red-light w-8 h-8" />}
{selectedModules.includes("level") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
</div>
</section>
<Input type="text" name="name" onChange={(e) => setName(e)} defaultValue={name} label="Assignment Name" required /> {selectedModules.includes("speaking") && (
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">
Speaking Instructor&apos;s Gender
</label>
<Select
value={{
value: instructorGender,
label: capitalize(instructorGender),
}}
onChange={(value) =>
value
? setInstructorGender(value.value as InstructorGender)
: null
}
disabled={!selectedModules.includes("speaking") || !!assignment}
options={[
{ value: "male", label: "Male" },
{ value: "female", label: "Female" },
{ value: "varied", label: "Varied" },
]}
/>
</div>
)}
<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8"> {selectedModules.length > 0 && (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Start Date *</label> <Checkbox isChecked={useRandomExams} onChange={setUseRandomExams}>
<ReactDatePicker Random Exams
className={clsx( </Checkbox>
"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer", {!useRandomExams && (
"hover:border-mti-purple tooltip z-10", <div className="grid md:grid-cols-2 w-full gap-4">
"transition duration-300 ease-in-out", {selectedModules.map((module) => (
)} <div key={module} className="flex flex-col gap-3 w-full">
popperClassName="!z-20" <label className="font-normal text-base text-mti-gray-dim">
filterTime={(date) => moment(date).isSameOrAfter(new Date())} {capitalize(module)} Exam
dateFormat="dd/MM/yyyy HH:mm" </label>
selected={startDate} <Select
showTimeSelect value={{
onChange={(date) => setStartDate(date)} value:
/> examIDs.find((e) => e.module === module)?.id || null,
</div> label:
<div className="flex flex-col gap-2"> examIDs.find((e) => e.module === module)?.id || "",
<label className="font-normal text-base text-mti-gray-dim">End Date *</label> }}
<ReactDatePicker onChange={(value) =>
className={clsx( value
"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer", ? setExamIDs((prev) => [
"hover:border-mti-purple tooltip z-10", ...prev.filter((x) => x.module !== module),
"transition duration-300 ease-in-out", { id: value.value!, module },
)} ])
popperClassName="!z-20" : setExamIDs((prev) =>
filterTime={(date) => moment(date).isAfter(startDate)} prev.filter((x) => x.module !== module)
dateFormat="dd/MM/yyyy HH:mm" )
selected={endDate} }
showTimeSelect options={exams
onChange={(date) => setEndDate(date)} .filter((x) => !x.isDiagnostic && x.module === module)
/> .map((x) => ({ value: x.id, label: x.id }))}
</div> />
</div> </div>
))}
</div>
)}
</div>
)}
{selectedModules.includes("speaking") && ( <section className="w-full flex flex-col gap-3">
<div className="flex flex-col gap-3 w-full"> <span className="font-semibold">
<label className="font-normal text-base text-mti-gray-dim">Speaking Instructor&apos;s Gender</label> Assignees ({assignees.length} selected)
<Select </span>
value={{value: instructorGender, label: capitalize(instructorGender)}} <div className="flex gap-4 overflow-x-scroll scrollbar-hide">
onChange={(value) => (value ? setInstructorGender(value.value as InstructorGender) : null)} {groups.map((g) => (
disabled={!selectedModules.includes("speaking") || !!assignment} <button
options={[ key={g.id}
{value: "male", label: "Male"}, onClick={() => {
{value: "female", label: "Female"}, const groupStudentIds = users
{value: "varied", label: "Varied"}, .filter((u) => g.participants.includes(u.id))
]} .map((u) => u.id);
/> if (groupStudentIds.every((u) => assignees.includes(u))) {
</div> setAssignees((prev) =>
)} prev.filter((a) => !groupStudentIds.includes(a))
);
{selectedModules.length > 0 && ( } else {
<div className="flex flex-col gap-3 w-full"> setAssignees((prev) => [
<Checkbox isChecked={useRandomExams} onChange={setUseRandomExams}> ...prev.filter((a) => !groupStudentIds.includes(a)),
Random Exams ...groupStudentIds,
</Checkbox> ]);
{!useRandomExams && ( }
<div className="grid md:grid-cols-2 w-full gap-4"> }}
{selectedModules.map((module) => ( className={clsx(
<div key={module} className="flex flex-col gap-3 w-full"> "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
<label className="font-normal text-base text-mti-gray-dim">{capitalize(module)} Exam</label> "transition duration-300 ease-in-out",
<Select users
value={{ .filter((u) => g.participants.includes(u.id))
value: examIDs.find((e) => e.module === module)?.id || null, .every((u) => assignees.includes(u.id)) &&
label: examIDs.find((e) => e.module === module)?.id || "", "!bg-mti-purple-light !text-white"
}} )}
onChange={(value) => >
value {g.name}
? setExamIDs((prev) => [...prev.filter((x) => x.module !== module), {id: value.value!, module}]) </button>
: setExamIDs((prev) => prev.filter((x) => x.module !== module)) ))}
} </div>
options={exams <div className="flex flex-wrap -md:justify-center gap-4">
.filter((x) => !x.isDiagnostic && x.module === module) {users.map((user) => (
.map((x) => ({value: x.id, label: x.id}))} <div
/> onClick={() => toggleAssignee(user)}
</div> className={clsx(
))} "p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
</div> "transition ease-in-out duration-300",
)} assignees.includes(user.id)
</div> ? "border-mti-purple"
)} : "border-mti-gray-platinum"
)}
<section className="w-full flex flex-col gap-3"> key={user.id}
<span className="font-semibold">Assignees ({assignees.length} selected)</span> >
<div className="flex gap-4 overflow-x-scroll scrollbar-hide"> <span className="flex flex-col gap-0 justify-center">
{groups.map((g) => ( <span className="font-semibold">{user.name}</span>
<button <span className="text-sm opacity-80">{user.email}</span>
key={g.id} </span>
onClick={() => { <ProgressBar
const groupStudentIds = users.filter((u) => g.participants.includes(u.id)).map((u) => u.id); color="purple"
if (groupStudentIds.every((u) => assignees.includes(u))) { textClassName="!text-mti-black/80"
setAssignees((prev) => prev.filter((a) => !groupStudentIds.includes(a))); label={`Level ${calculateAverageLevel(user.levels)}`}
} else { percentage={(calculateAverageLevel(user.levels) / 9) * 100}
setAssignees((prev) => [...prev.filter((a) => !groupStudentIds.includes(a)), ...groupStudentIds]); className="h-6"
} />
}} <span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
className={clsx( Groups:{" "}
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light", {groups
"transition duration-300 ease-in-out", .filter((g) => g.participants.includes(user.id))
users.filter((u) => g.participants.includes(u.id)).every((u) => assignees.includes(u.id)) && .map((g) => g.name)
"!bg-mti-purple-light !text-white", .join(", ")}
)}> </span>
{g.name} </div>
</button> ))}
))} </div>
</div> </section>
<div className="flex flex-wrap -md:justify-center gap-4"> <div className="flex flex-col gap-4 w-full items-end">
{users.map((user) => ( <Checkbox
<div isChecked={variant === "full"}
onClick={() => toggleAssignee(user)} onChange={() =>
className={clsx( setVariant((prev) => (prev === "full" ? "partial" : "full"))
"p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72", }
"transition ease-in-out duration-300", >
assignees.includes(user.id) ? "border-mti-purple" : "border-mti-gray-platinum", Full length exams
)} </Checkbox>
key={user.id}> <Checkbox
<span className="flex flex-col gap-0 justify-center"> isChecked={generateMultiple}
<span className="font-semibold">{user.name}</span> onChange={() => setGenerateMultiple((d) => !d)}
<span className="text-sm opacity-80">{user.email}</span> >
</span> Generate different exams
<ProgressBar </Checkbox>
color="purple" </div>
textClassName="!text-mti-black/80" <div className="flex gap-4 w-full justify-end">
label={`Level ${calculateAverageLevel(user.levels)}`} <Button
percentage={(calculateAverageLevel(user.levels) / 9) * 100} className="w-full max-w-[200px]"
className="h-6" variant="outline"
/> onClick={cancelCreation}
<span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2"> disabled={isLoading}
Groups:{" "} isLoading={isLoading}
{groups >
.filter((g) => g.participants.includes(user.id)) Cancel
.map((g) => g.name) </Button>
.join(", ")} {assignment && (
</span> <>
</div> <Button
))} className="w-full max-w-[200px]"
</div> color="green"
</section> variant="outline"
<div className="flex flex-col gap-4 w-full items-end"> onClick={startAssignment}
<Checkbox isChecked={variant === "full"} onChange={() => setVariant((prev) => (prev === "full" ? "partial" : "full"))}> disabled={isLoading || moment().isAfter(startDate)}
Full length exams isLoading={isLoading}
</Checkbox> >
<Checkbox isChecked={generateMultiple} onChange={() => setGenerateMultiple((d) => !d)}> Start
Generate different exams </Button>
</Checkbox> <Button
</div> className="w-full max-w-[200px]"
<div className="flex gap-4 w-full justify-end"> color="red"
<Button className="w-full max-w-[200px]" variant="outline" onClick={cancelCreation} disabled={isLoading} isLoading={isLoading}> variant="outline"
Cancel onClick={deleteAssignment}
</Button> disabled={isLoading}
{assignment && ( isLoading={isLoading}
<Button >
className="w-full max-w-[200px]" Delete
color="red" </Button>
variant="outline" </>
onClick={deleteAssignment} )}
disabled={isLoading} <Button
isLoading={isLoading}> disabled={
Delete selectedModules.length === 0 ||
</Button> !name ||
)} !startDate ||
<Button !endDate ||
disabled={ assignees.length === 0 ||
selectedModules.length === 0 || (!useRandomExams && examIDs.length < selectedModules.length)
!name || }
!startDate || className="w-full max-w-[200px]"
!endDate || onClick={createAssignment}
assignees.length === 0 || isLoading={isLoading}
(!useRandomExams && examIDs.length < selectedModules.length) >
} {assignment ? "Update" : "Create"}
className="w-full max-w-[200px]" </Button>
onClick={createAssignment} </div>
isLoading={isLoading}> </div>
{assignment ? "Update" : "Create"} </Modal>
</Button> );
</div>
</div>
</Modal>
);
} }

1346
src/dashboards/Corporate.tsx
View File

File diff suppressed because it is too large Load Diff

51
src/dashboards/MasterCorporate.tsx
View File

@@ -66,21 +66,17 @@ import {
PopoverTrigger, PopoverTrigger,
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import MasterStatistical from "./MasterStatistical"; import MasterStatistical from "./MasterStatistical";
import {
futureAssignmentFilter,
pastAssignmentFilter,
archivedAssignmentFilter,
activeAssignmentFilter
} from '@/utils/assignments';
interface Props { interface Props {
user: MasterCorporateUser; user: MasterCorporateUser;
} }
const activeFilter = (a: Assignment) =>
moment(a.endDate).isAfter(moment()) &&
moment(a.startDate).isBefore(moment()) &&
a.assignees.length > a.results.length;
const pastFilter = (a: Assignment) =>
(moment(a.endDate).isBefore(moment()) ||
a.assignees.length === a.results.length) &&
!a.archived;
const archivedFilter = (a: Assignment) => a.archived;
const futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment());
type StudentPerformanceItem = User & { type StudentPerformanceItem = User & {
corporate?: CorporateUser; corporate?: CorporateUser;
@@ -469,7 +465,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
useEffect(() => { useEffect(() => {
setCorporateAssignments( setCorporateAssignments(
assignments.filter(activeFilter).map((a) => ({ assignments.filter(activeAssignmentFilter).map((a) => ({
...a, ...a,
corporate: !!users.find((x) => x.id === a.assigner) corporate: !!users.find((x) => x.id === a.assigner)
? getCorporateUser( ? getCorporateUser(
@@ -606,19 +602,6 @@ export default function MasterCorporateDashboard({ user }: Props) {
); );
}; };
// const AssignmentsPage = () => {
// const activeFilter = (a: Assignment) =>
// moment(a.endDate).isAfter(moment()) &&
// moment(a.startDate).isBefore(moment()) &&
// a.assignees.length > a.results.length;
// const pastFilter = (a: Assignment) =>
// (moment(a.endDate).isBefore(moment()) ||
// a.assignees.length === a.results.length) &&
// !a.archived;
// const archivedFilter = (a: Assignment) => a.archived;
// const futureFilter = (a: Assignment) =>
// moment(a.startDate).isAfter(moment());
const StudentPerformancePage = () => { const StudentPerformancePage = () => {
const students = users const students = users
.filter( .filter(
@@ -727,11 +710,11 @@ export default function MasterCorporateDashboard({ user }: Props) {
<span> <span>
<b>Total:</b>{" "} <b>Total:</b>{" "}
{assignments {assignments
.filter(activeFilter) .filter(activeAssignmentFilter)
.reduce((acc, curr) => acc + curr.results.length, 0)} .reduce((acc, curr) => acc + curr.results.length, 0)}
/ /
{assignments {assignments
.filter(activeFilter) .filter(activeAssignmentFilter)
.reduce((acc, curr) => curr.exams.length + acc, 0)} .reduce((acc, curr) => curr.exams.length + acc, 0)}
</span> </span>
{Object.keys( {Object.keys(
@@ -761,10 +744,10 @@ export default function MasterCorporateDashboard({ user }: Props) {
</div> </div>
<section className="flex flex-col gap-4"> <section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold"> <h2 className="text-2xl font-semibold">
Active Assignments ({assignments.filter(activeFilter).length}) Active Assignments ({assignments.filter(activeAssignmentFilter).length})
</h2> </h2>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{assignments.filter(activeFilter).map((a) => ( {assignments.filter(activeAssignmentFilter).map((a) => (
<AssignmentCard <AssignmentCard
{...a} {...a}
users={users} users={users}
@@ -776,7 +759,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
</section> </section>
<section className="flex flex-col gap-4"> <section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold"> <h2 className="text-2xl font-semibold">
Planned Assignments ({assignments.filter(futureFilter).length}) Planned Assignments ({assignments.filter(futureAssignmentFilter).length})
</h2> </h2>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
<div <div
@@ -786,7 +769,7 @@ export default function MasterCorporateDashboard({ user }: Props) {
<BsPlus className="text-6xl" /> <BsPlus className="text-6xl" />
<span className="text-lg">New Assignment</span> <span className="text-lg">New Assignment</span>
</div> </div>
{assignments.filter(futureFilter).map((a) => ( {assignments.filter(futureAssignmentFilter).map((a) => (
<AssignmentCard <AssignmentCard
{...a} {...a}
users={users} users={users}
@@ -801,10 +784,10 @@ export default function MasterCorporateDashboard({ user }: Props) {
</section> </section>
<section className="flex flex-col gap-4"> <section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold"> <h2 className="text-2xl font-semibold">
Past Assignments ({assignments.filter(pastFilter).length}) Past Assignments ({assignments.filter(pastAssignmentFilter).length})
</h2> </h2>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{assignments.filter(pastFilter).map((a) => ( {assignments.filter(pastAssignmentFilter).map((a) => (
<AssignmentCard <AssignmentCard
{...a} {...a}
users={users} users={users}
@@ -820,10 +803,10 @@ export default function MasterCorporateDashboard({ user }: Props) {
</section> </section>
<section className="flex flex-col gap-4"> <section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold"> <h2 className="text-2xl font-semibold">
Archived Assignments ({assignments.filter(archivedFilter).length}) Archived Assignments ({assignments.filter(archivedAssignmentFilter).length})
</h2> </h2>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{assignments.filter(archivedFilter).map((a) => ( {assignments.filter(archivedAssignmentFilter).map((a) => (
<AssignmentCard <AssignmentCard
{...a} {...a}
users={users} users={users}

4
src/dashboards/Student.tsx
View File

@@ -174,14 +174,14 @@ export default function StudentDashboard({user}: Props) {
className="tooltip flex h-full w-full items-center justify-end pl-8 md:hidden" className="tooltip flex h-full w-full items-center justify-end pl-8 md:hidden"
data-tip="Your screen size is too small to perform an assignment"> data-tip="Your screen size is too small to perform an assignment">
<Button <Button
disabled={moment(assignment.startDate).isAfter(moment())} disabled={!assignment.start}
className="h-full w-full !rounded-xl" className="h-full w-full !rounded-xl"
variant="outline"> variant="outline">
Start Start
</Button> </Button>
</div> </div>
<Button <Button
disabled={moment(assignment.startDate).isAfter(moment())} disabled={!assignment.start}
className="-md:hidden h-full w-full max-w-[50%] !rounded-xl" className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"
onClick={() => startAssignment(assignment)} onClick={() => startAssignment(assignment)}
variant="outline"> variant="outline">

810
src/dashboards/Teacher.tsx
View File

@@ -2,408 +2,486 @@
import Modal from "@/components/Modal"; import Modal from "@/components/Modal";
import useStats from "@/hooks/useStats"; import useStats from "@/hooks/useStats";
import useUsers from "@/hooks/useUsers"; import useUsers from "@/hooks/useUsers";
import {CorporateUser, Group, Stat, User} from "@/interfaces/user"; import { CorporateUser, Group, Stat, User } from "@/interfaces/user";
import UserList from "@/pages/(admin)/Lists/UserList"; import UserList from "@/pages/(admin)/Lists/UserList";
import {dateSorter} from "@/utils"; import { dateSorter } from "@/utils";
import moment from "moment"; import moment from "moment";
import {useEffect, useState} from "react"; import { useEffect, useState } from "react";
import { import {
BsArrowLeft, BsArrowLeft,
BsArrowRepeat, BsArrowRepeat,
BsClipboard2Data, BsClipboard2Data,
BsClipboard2DataFill, BsClipboard2DataFill,
BsClipboard2Heart, BsClipboard2Heart,
BsClipboard2X, BsClipboard2X,
BsClipboardPulse, BsClipboardPulse,
BsClock, BsClock,
BsEnvelopePaper, BsEnvelopePaper,
BsGlobeCentralSouthAsia, BsGlobeCentralSouthAsia,
BsPaperclip, BsPaperclip,
BsPeople, BsPeople,
BsPerson, BsPerson,
BsPersonAdd, BsPersonAdd,
BsPersonFill, BsPersonFill,
BsPersonFillGear, BsPersonFillGear,
BsPersonGear, BsPersonGear,
BsPlus, BsPlus,
BsRepeat, BsRepeat,
BsRepeat1, BsRepeat1,
} from "react-icons/bs"; } from "react-icons/bs";
import UserCard from "@/components/UserCard"; import UserCard from "@/components/UserCard";
import useGroups from "@/hooks/useGroups"; import useGroups from "@/hooks/useGroups";
import {calculateAverageLevel, calculateBandScore} from "@/utils/score"; import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
import {MODULE_ARRAY} from "@/utils/moduleUtils"; import { MODULE_ARRAY } from "@/utils/moduleUtils";
import {Module} from "@/interfaces"; import { Module } from "@/interfaces";
import {groupByExam} from "@/utils/stats"; import { groupByExam } from "@/utils/stats";
import IconCard from "./IconCard"; import IconCard from "./IconCard";
import GroupList from "@/pages/(admin)/Lists/GroupList"; import GroupList from "@/pages/(admin)/Lists/GroupList";
import useAssignments from "@/hooks/useAssignments"; import useAssignments from "@/hooks/useAssignments";
import {Assignment} from "@/interfaces/results"; import { Assignment } from "@/interfaces/results";
import AssignmentCard from "./AssignmentCard"; import AssignmentCard from "./AssignmentCard";
import Button from "@/components/Low/Button"; import Button from "@/components/Low/Button";
import clsx from "clsx"; import clsx from "clsx";
import ProgressBar from "@/components/Low/ProgressBar"; import ProgressBar from "@/components/Low/ProgressBar";
import AssignmentCreator from "./AssignmentCreator"; import AssignmentCreator from "./AssignmentCreator";
import AssignmentView from "./AssignmentView"; import AssignmentView from "./AssignmentView";
import {getUserCorporate} from "@/utils/groups"; import { getUserCorporate } from "@/utils/groups";
import {checkAccess} from "@/utils/permissions"; import { checkAccess } from "@/utils/permissions";
import usePermissions from "@/hooks/usePermissions"; import usePermissions from "@/hooks/usePermissions";
import {
futureAssignmentFilter,
pastAssignmentFilter,
archivedAssignmentFilter,
activeAssignmentFilter
} from '@/utils/assignments';
interface Props { interface Props {
user: User; user: User;
} }
export default function TeacherDashboard({user}: Props) { export default function TeacherDashboard({ user }: Props) {
const [page, setPage] = useState(""); const [page, setPage] = useState("");
const [selectedUser, setSelectedUser] = useState<User>(); const [selectedUser, setSelectedUser] = useState<User>();
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const [selectedAssignment, setSelectedAssignment] = useState<Assignment>(); const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
const [isCreatingAssignment, setIsCreatingAssignment] = useState(false); const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>(); const [corporateUserToShow, setCorporateUserToShow] =
useState<CorporateUser>();
const {stats} = useStats(); const { stats } = useStats();
const {users, reload} = useUsers(); const { users, reload } = useUsers();
const {groups} = useGroups({adminAdmins: user.id}); const { groups } = useGroups({ adminAdmins: user.id });
const {permissions} = usePermissions(user.id); const { permissions } = usePermissions(user.id);
const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assigner: user.id}); const {
assignments,
isLoading: isAssignmentsLoading,
reload: reloadAssignments,
} = useAssignments({ assigner: user.id });
useEffect(() => { useEffect(() => {
setShowModal(!!selectedUser && page === ""); setShowModal(!!selectedUser && page === "");
}, [selectedUser, page]); }, [selectedUser, page]);
useEffect(() => { useEffect(() => {
getUserCorporate(user.id).then(setCorporateUserToShow); getUserCorporate(user.id).then(setCorporateUserToShow);
}, [user]); }, [user]);
const studentFilter = (user: User) => user.type === "student" && groups.flatMap((g) => g.participants).includes(user.id); const studentFilter = (user: User) =>
user.type === "student" &&
groups.flatMap((g) => g.participants).includes(user.id);
const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id); const getStatsByStudent = (user: User) =>
stats.filter((s) => s.user === user.id);
const UserDisplay = (displayUser: User) => ( const UserDisplay = (displayUser: User) => (
<div <div
onClick={() => setSelectedUser(displayUser)} onClick={() => setSelectedUser(displayUser)}
className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300"> className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300"
<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" /> >
<div className="flex flex-col gap-1 items-start"> <img
<span>{displayUser.name}</span> src={displayUser.profilePicture}
<span className="text-sm opacity-75">{displayUser.email}</span> alt={displayUser.name}
</div> className="rounded-full w-10 h-10"
</div> />
); <div className="flex flex-col gap-1 items-start">
<span>{displayUser.name}</span>
<span className="text-sm opacity-75">{displayUser.email}</span>
</div>
</div>
);
const StudentsList = () => { const StudentsList = () => {
const filter = (x: User) => const filter = (x: User) =>
x.type === "student" && x.type === "student" &&
(!!selectedUser (!!selectedUser
? groups ? groups
.filter((g) => g.admin === selectedUser.id) .filter((g) => g.admin === selectedUser.id)
.flatMap((g) => g.participants) .flatMap((g) => g.participants)
.includes(x.id) || false .includes(x.id) || false
: groups.flatMap((g) => g.participants).includes(x.id)); : groups.flatMap((g) => g.participants).includes(x.id));
return ( return (
<UserList <UserList
user={user} user={user}
filters={[filter]} filters={[filter]}
renderHeader={(total) => ( renderHeader={(total) => (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div <div
onClick={() => setPage("")} onClick={() => setPage("")}
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"> className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
<BsArrowLeft className="text-xl" /> >
<span>Back</span> <BsArrowLeft className="text-xl" />
</div> <span>Back</span>
<h2 className="text-2xl font-semibold">Students ({total})</h2> </div>
</div> <h2 className="text-2xl font-semibold">Students ({total})</h2>
)} </div>
/> )}
); />
}; );
};
const GroupsList = () => { const GroupsList = () => {
const filter = (x: Group) => x.admin === user.id; const filter = (x: Group) => x.admin === user.id;
return ( return (
<> <>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div <div
onClick={() => setPage("")} onClick={() => setPage("")}
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"> className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
<BsArrowLeft className="text-xl" /> >
<span>Back</span> <BsArrowLeft className="text-xl" />
</div> <span>Back</span>
<h2 className="text-2xl font-semibold">Groups ({groups.filter(filter).length})</h2> </div>
</div> <h2 className="text-2xl font-semibold">
Groups ({groups.filter(filter).length})
</h2>
</div>
<GroupList user={user} /> <GroupList user={user} />
</> </>
); );
}; };
const averageLevelCalculator = (studentStats: Stat[]) => { const averageLevelCalculator = (studentStats: Stat[]) => {
const formattedStats = studentStats const formattedStats = studentStats
.map((s) => ({ .map((s) => ({
focus: users.find((u) => u.id === s.user)?.focus, focus: users.find((u) => u.id === s.user)?.focus,
score: s.score, score: s.score,
module: s.module, module: s.module,
})) }))
.filter((f) => !!f.focus); .filter((f) => !!f.focus);
const bandScores = formattedStats.map((s) => ({ const bandScores = formattedStats.map((s) => ({
module: s.module, module: s.module,
level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!), level: calculateBandScore(
})); s.score.correct,
s.score.total,
s.module,
s.focus!
),
}));
const levels: {[key in Module]: number} = { const levels: { [key in Module]: number } = {
reading: 0, reading: 0,
listening: 0, listening: 0,
writing: 0, writing: 0,
speaking: 0, speaking: 0,
level: 0, level: 0,
}; };
bandScores.forEach((b) => (levels[b.module] += b.level)); bandScores.forEach((b) => (levels[b.module] += b.level));
return calculateAverageLevel(levels); return calculateAverageLevel(levels);
}; };
const AssignmentsPage = () => { const AssignmentsPage = () => {
const activeFilter = (a: Assignment) => return (
moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment()) && a.assignees.length > a.results.length; <>
const pastFilter = (a: Assignment) => (moment(a.endDate).isBefore(moment()) || a.assignees.length === a.results.length) && !a.archived; <AssignmentView
const archivedFilter = (a: Assignment) => a.archived; isOpen={!!selectedAssignment && !isCreatingAssignment}
const futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment()); onClose={() => {
setSelectedAssignment(undefined);
setIsCreatingAssignment(false);
reloadAssignments();
}}
assignment={selectedAssignment}
/>
<AssignmentCreator
assignment={selectedAssignment}
groups={groups.filter(
(x) => x.admin === user.id || x.participants.includes(user.id)
)}
users={users.filter(
(x) =>
x.type === "student" &&
(!!selectedUser
? groups
.filter((g) => g.admin === selectedUser.id)
.flatMap((g) => g.participants)
.includes(x.id)
: groups.flatMap((g) => g.participants).includes(x.id))
)}
assigner={user.id}
isCreating={isCreatingAssignment}
cancelCreation={() => {
setIsCreatingAssignment(false);
setSelectedAssignment(undefined);
reloadAssignments();
}}
/>
<div className="w-full flex justify-between items-center">
<div
onClick={() => setPage("")}
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
>
<BsArrowLeft className="text-xl" />
<span>Back</span>
</div>
<div
onClick={reloadAssignments}
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
>
<span>Reload</span>
<BsArrowRepeat
className={clsx(
"text-xl",
isAssignmentsLoading && "animate-spin"
)}
/>
</div>
</div>
<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">
Active Assignments ({assignments.filter(activeAssignmentFilter).length})
</h2>
<div className="flex flex-wrap gap-2">
{assignments.filter(activeAssignmentFilter).map((a) => (
<AssignmentCard
{...a}
users={users}
onClick={() => setSelectedAssignment(a)}
key={a.id}
/>
))}
</div>
</section>
<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">
Planned Assignments ({assignments.filter(futureAssignmentFilter).length})
</h2>
<div className="flex flex-wrap gap-2">
<div
onClick={() => setIsCreatingAssignment(true)}
className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300"
>
<BsPlus className="text-6xl" />
<span className="text-lg">New Assignment</span>
</div>
{assignments.filter(futureAssignmentFilter).map((a) => (
<AssignmentCard
{...a}
users={users}
onClick={() => {
setSelectedAssignment(a);
setIsCreatingAssignment(true);
}}
key={a.id}
/>
))}
</div>
</section>
<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">
Past Assignments ({assignments.filter(pastAssignmentFilter).length})
</h2>
<div className="flex flex-wrap gap-2">
{assignments.filter(pastAssignmentFilter).map((a) => (
<AssignmentCard
{...a}
users={users}
onClick={() => setSelectedAssignment(a)}
key={a.id}
allowDownload
reload={reloadAssignments}
allowArchive
allowExcelDownload
/>
))}
</div>
</section>
<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">
Archived Assignments ({assignments.filter(archivedAssignmentFilter).length})
</h2>
<div className="flex flex-wrap gap-2">
{assignments.filter(archivedAssignmentFilter).map((a) => (
<AssignmentCard
{...a}
users={users}
onClick={() => setSelectedAssignment(a)}
key={a.id}
allowDownload
reload={reloadAssignments}
allowUnarchive
allowExcelDownload
/>
))}
</div>
</section>
</>
);
};
return ( const DefaultDashboard = () => (
<> <>
<AssignmentView {corporateUserToShow && (
isOpen={!!selectedAssignment && !isCreatingAssignment} <div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
onClose={() => { Linked to:{" "}
setSelectedAssignment(undefined); <b>
setIsCreatingAssignment(false); {corporateUserToShow?.corporateInformation?.companyInformation
reloadAssignments(); .name || corporateUserToShow.name}
}} </b>
assignment={selectedAssignment} </div>
/> )}
<AssignmentCreator <section
assignment={selectedAssignment} className={clsx(
groups={groups.filter((x) => x.admin === user.id || x.participants.includes(user.id))} "flex -lg:flex-wrap gap-4 items-center -lg:justify-center lg:justify-start text-center",
users={users.filter( !!corporateUserToShow && "mt-12 xl:mt-6"
(x) => )}
x.type === "student" && >
(!!selectedUser <IconCard
? groups onClick={() => setPage("students")}
.filter((g) => g.admin === selectedUser.id) Icon={BsPersonFill}
.flatMap((g) => g.participants) label="Students"
.includes(x.id) value={users.filter(studentFilter).length}
: groups.flatMap((g) => g.participants).includes(x.id)), color="purple"
)} />
assigner={user.id} <IconCard
isCreating={isCreatingAssignment} Icon={BsClipboard2Data}
cancelCreation={() => { label="Exams Performed"
setIsCreatingAssignment(false); value={
setSelectedAssignment(undefined); stats.filter((s) =>
reloadAssignments(); groups.flatMap((g) => g.participants).includes(s.user)
}} ).length
/> }
<div className="w-full flex justify-between items-center"> color="purple"
<div />
onClick={() => setPage("")} <IconCard
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"> Icon={BsPaperclip}
<BsArrowLeft className="text-xl" /> label="Average Level"
<span>Back</span> value={averageLevelCalculator(
</div> stats.filter((s) =>
<div groups.flatMap((g) => g.participants).includes(s.user)
onClick={reloadAssignments} )
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"> ).toFixed(1)}
<span>Reload</span> color="purple"
<BsArrowRepeat className={clsx("text-xl", isAssignmentsLoading && "animate-spin")} /> />
</div> {checkAccess(
</div> user,
<section className="flex flex-col gap-4"> ["teacher", "developer"],
<h2 className="text-2xl font-semibold">Active Assignments ({assignments.filter(activeFilter).length})</h2> permissions,
<div className="flex flex-wrap gap-2"> "viewGroup"
{assignments.filter(activeFilter).map((a) => ( ) && (
<AssignmentCard {...a} users={users} onClick={() => setSelectedAssignment(a)} key={a.id} /> <IconCard
))} Icon={BsPeople}
</div> label="Groups"
</section> value={groups.filter((x) => x.admin === user.id).length}
<section className="flex flex-col gap-4"> color="purple"
<h2 className="text-2xl font-semibold">Planned Assignments ({assignments.filter(futureFilter).length})</h2> onClick={() => setPage("groups")}
<div className="flex flex-wrap gap-2"> />
<div )}
onClick={() => setIsCreatingAssignment(true)} <div
className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300"> onClick={() => setPage("assignments")}
<BsPlus className="text-6xl" /> className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300"
<span className="text-lg">New Assignment</span> >
</div> <BsEnvelopePaper className="text-6xl text-mti-purple-light" />
{assignments.filter(futureFilter).map((a) => ( <span className="flex flex-col gap-1 items-center text-xl">
<AssignmentCard <span className="text-lg">Assignments</span>
{...a} <span className="font-semibold text-mti-purple-light">
users={users} {assignments.filter((a) => !a.archived).length}
onClick={() => { </span>
setSelectedAssignment(a); </span>
setIsCreatingAssignment(true); </div>
}} </section>
key={a.id}
/>
))}
</div>
</section>
<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastFilter).length})</h2>
<div className="flex flex-wrap gap-2">
{assignments.filter(pastFilter).map((a) => (
<AssignmentCard
{...a}
users={users}
onClick={() => setSelectedAssignment(a)}
key={a.id}
allowDownload
reload={reloadAssignments}
allowArchive
allowExcelDownload
/>
))}
</div>
</section>
<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">Archived Assignments ({assignments.filter(archivedFilter).length})</h2>
<div className="flex flex-wrap gap-2">
{assignments.filter(archivedFilter).map((a) => (
<AssignmentCard
{...a}
users={users}
onClick={() => setSelectedAssignment(a)}
key={a.id}
allowDownload
reload={reloadAssignments}
allowUnarchive
allowExcelDownload
/>
))}
</div>
</section>
</>
);
};
const DefaultDashboard = () => ( <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full justify-between">
<> <div className="bg-white shadow flex flex-col rounded-xl w-full">
{corporateUserToShow && ( <span className="p-4">Latest students</span>
<div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1"> <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
Linked to: <b>{corporateUserToShow?.corporateInformation?.companyInformation.name || corporateUserToShow.name}</b> {users
</div> .filter(studentFilter)
)} .sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
<section .map((x) => (
className={clsx( <UserDisplay key={x.id} {...x} />
"flex -lg:flex-wrap gap-4 items-center -lg:justify-center lg:justify-start text-center", ))}
!!corporateUserToShow && "mt-12 xl:mt-6", </div>
)}> </div>
<IconCard <div className="bg-white shadow flex flex-col rounded-xl w-full">
onClick={() => setPage("students")} <span className="p-4">Highest level students</span>
Icon={BsPersonFill} <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
label="Students" {users
value={users.filter(studentFilter).length} .filter(studentFilter)
color="purple" .sort(
/> (a, b) =>
<IconCard calculateAverageLevel(b.levels) -
Icon={BsClipboard2Data} calculateAverageLevel(a.levels)
label="Exams Performed" )
value={stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)).length} .map((x) => (
color="purple" <UserDisplay key={x.id} {...x} />
/> ))}
<IconCard </div>
Icon={BsPaperclip} </div>
label="Average Level" <div className="bg-white shadow flex flex-col rounded-xl w-full">
value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)} <span className="p-4">Highest exam count students</span>
color="purple" <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
/> {users
{checkAccess(user, ["teacher", "developer"], permissions, "viewGroup") && ( .filter(studentFilter)
<IconCard .sort(
Icon={BsPeople} (a, b) =>
label="Groups" Object.keys(groupByExam(getStatsByStudent(b))).length -
value={groups.filter((x) => x.admin === user.id).length} Object.keys(groupByExam(getStatsByStudent(a))).length
color="purple" )
onClick={() => setPage("groups")} .map((x) => (
/> <UserDisplay key={x.id} {...x} />
)} ))}
<div </div>
onClick={() => setPage("assignments")} </div>
className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300"> </section>
<BsEnvelopePaper className="text-6xl text-mti-purple-light" /> </>
<span className="flex flex-col gap-1 items-center text-xl"> );
<span className="text-lg">Assignments</span>
<span className="font-semibold text-mti-purple-light">{assignments.filter((a) => !a.archived).length}</span>
</span>
</div>
</section>
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full justify-between"> return (
<div className="bg-white shadow flex flex-col rounded-xl w-full"> <>
<span className="p-4">Latest students</span> <Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide"> <>
{users {selectedUser && (
.filter(studentFilter) <div className="w-full flex flex-col gap-8">
.sort((a, b) => dateSorter(a, b, "desc", "registrationDate")) <UserCard
.map((x) => ( loggedInUser={user}
<UserDisplay key={x.id} {...x} /> onClose={(shouldReload) => {
))} setSelectedUser(undefined);
</div> if (shouldReload) reload();
</div> }}
<div className="bg-white shadow flex flex-col rounded-xl w-full"> onViewStudents={
<span className="p-4">Highest level students</span> selectedUser.type === "corporate" ||
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide"> selectedUser.type === "teacher"
{users ? () => setPage("students")
.filter(studentFilter) : undefined
.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels)) }
.map((x) => ( onViewTeachers={
<UserDisplay key={x.id} {...x} /> selectedUser.type === "corporate"
))} ? () => setPage("teachers")
</div> : undefined
</div> }
<div className="bg-white shadow flex flex-col rounded-xl w-full"> user={selectedUser}
<span className="p-4">Highest exam count students</span> />
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide"> </div>
{users )}
.filter(studentFilter) </>
.sort( </Modal>
(a, b) => {page === "students" && <StudentsList />}
Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length, {page === "groups" && <GroupsList />}
) {page === "assignments" && <AssignmentsPage />}
.map((x) => ( {page === "" && <DefaultDashboard />}
<UserDisplay key={x.id} {...x} /> </>
))} );
</div>
</div>
</section>
</>
);
return (
<>
<Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
<>
{selectedUser && (
<div className="w-full flex flex-col gap-8">
<UserCard
loggedInUser={user}
onClose={(shouldReload) => {
setSelectedUser(undefined);
if (shouldReload) reload();
}}
onViewStudents={
selectedUser.type === "corporate" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
}
onViewTeachers={selectedUser.type === "corporate" ? () => setPage("teachers") : undefined}
user={selectedUser}
/>
</div>
)}
</>
</Modal>
{page === "students" && <StudentsList />}
{page === "groups" && <GroupsList />}
{page === "assignments" && <AssignmentsPage />}
{page === "" && <DefaultDashboard />}
</>
);
} }

3
src/interfaces/results.ts
View File

@@ -28,6 +28,9 @@ export interface Assignment {
endDate: Date; endDate: Date;
archived?: boolean; archived?: boolean;
released?: boolean; released?: boolean;
// unless start is active, the assignment is not visible to the assignees
// start date now works as a limit time to start the exam
start?: boolean;
} }
export type AssignmentWithCorporateId = Assignment & { corporateId: string }; export type AssignmentWithCorporateId = Assignment & { corporateId: string };

46
src/pages/api/assignments/[id]/start.ts Normal file
View File

@@ -0,0 +1,46 @@
import type { NextApiRequest, NextApiResponse } from "next";
import { app } from "@/firebase";
import moment from "moment";
import { getFirestore, doc, getDoc, setDoc } from "firebase/firestore";
import { withIronSessionApiRoute } from "iron-session/next";
import { sessionOptions } from "@/lib/session";
const db = getFirestore(app);
export default withIronSessionApiRoute(handler, sessionOptions);
async function post(req: NextApiRequest, res: NextApiResponse) {
// verify if it's a logged user that is trying to archive
if (req.session.user) {
const { id } = req.query as { id: string };
const docSnap = await getDoc(doc(db, "assignments", id));
if (!docSnap.exists()) {
res.status(404).json({ ok: false });
return;
}
const data = docSnap.data();
if (moment().isAfter(moment(data.startDate))) {
res
.status(400)
.json({ ok: false, message: "Assignmentcan no longer " });
return;
}
await setDoc(
docSnap.ref,
{ start: true },
{ merge: true }
);
res.status(200).json({ ok: true });
return;
}
res.status(401).json({ ok: false });
}
async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method === "POST") return post(req, res);
res.status(404).json({ ok: false });
}

18
src/utils/assignments.ts Normal file
View File

@@ -0,0 +1,18 @@
import moment from "moment";
import { Assignment } from "@/interfaces/results";
export const futureAssignmentFilter = (a: Assignment) =>
moment(a.startDate).isAfter(moment()) && !a.archived && !a.start;
export const pastAssignmentFilter = (a: Assignment) =>
(moment(a.endDate).isBefore(moment()) ||
a.assignees.length === a.results.length ||
(moment(a.startDate).isBefore(moment()) && !a.start)) &&
!a.archived;
export const archivedAssignmentFilter = (a: Assignment) => a.archived;
export const activeAssignmentFilter = (a: Assignment) =>
moment(a.endDate).isAfter(moment()) &&
// && moment(a.startDate).isBefore(moment())
a.start &&
a.assignees.length > a.results.length;