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

Merged in features-21-08-24 (pull request #79)

Browse Source 
ENCOA: 86 + 101 + 102

Approved-by: Tiago Ribeiro
This commit is contained in:
João Ramos
2024-08-25 17:35:59 +00:00
committed by Tiago Ribeiro
parent 032d20b4b2 8d37e60f5d
commit af00f49adc
19 changed files with 3450 additions and 2169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/StatGridItem.tsx
View File

@@ -178,6 +178,15 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
} }
}; };
const shouldRenderPDFIcon = () => {
if(assignment) {
return assignment.released;
}
return true;
}
const content = ( const content = (
<> <>
<div className="w-full flex justify-between -md:items-center 2xl:items-center"> <div className="w-full flex justify-between -md:items-center 2xl:items-center">
@@ -202,7 +211,7 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
Level{" "} Level{" "}
{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)} {(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
</span> </span>
{renderPdfIcon(session, textColor, textColor)} {shouldRenderPDFIcon() && renderPdfIcon(session, textColor, textColor)}
</div> </div>
{examNumber === undefined ? ( {examNumber === undefined ? (
<> <>

9
src/dashboards/AssignmentCard.tsx
View File

@@ -10,6 +10,7 @@ import {usePDFDownload} from "@/hooks/usePDFDownload";
import {useAssignmentArchive} from "@/hooks/useAssignmentArchive"; import {useAssignmentArchive} from "@/hooks/useAssignmentArchive";
import {uniqBy} from "lodash"; import {uniqBy} from "lodash";
import {useAssignmentUnarchive} from "@/hooks/useAssignmentUnarchive"; import {useAssignmentUnarchive} from "@/hooks/useAssignmentUnarchive";
import {useAssignmentRelease} from "@/hooks/useAssignmentRelease";
import {getUserName} from "@/utils/users"; import {getUserName} from "@/utils/users";
import {User} from "@/interfaces/user"; import {User} from "@/interfaces/user";
@@ -40,11 +41,14 @@ export default function AssignmentCard({
allowUnarchive, allowUnarchive,
allowExcelDownload, allowExcelDownload,
users, users,
released,
}: Assignment & Props) { }: Assignment & Props) {
const renderPdfIcon = usePDFDownload("assignments"); const renderPdfIcon = usePDFDownload("assignments");
const renderExcelIcon = usePDFDownload("assignments", "excel"); const renderExcelIcon = usePDFDownload("assignments", "excel");
const renderArchiveIcon = useAssignmentArchive(id, reload); const renderArchiveIcon = useAssignmentArchive(id, reload);
const renderUnarchiveIcon = useAssignmentUnarchive(id, reload); const renderUnarchiveIcon = useAssignmentUnarchive(id, reload);
const renderReleaseIcon = useAssignmentRelease(id, reload);
const calculateAverageModuleScore = (module: Module) => { const calculateAverageModuleScore = (module: Module) => {
const resultModuleBandScores = results.map((r) => { const resultModuleBandScores = results.map((r) => {
@@ -66,10 +70,11 @@ export default function AssignmentCard({
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between">
<h3 className="text-xl font-semibold">{name}</h3> <h3 className="text-xl font-semibold">{name}</h3>
<div className="flex gap-2"> <div className="flex gap-2">
{allowDownload && renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")} {allowDownload && released && renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
{allowExcelDownload && renderExcelIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")} {allowExcelDownload && released && renderExcelIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
{allowArchive && !archived && renderArchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")} {allowArchive && !archived && renderArchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
{allowUnarchive && archived && renderUnarchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")} {allowUnarchive && archived && renderUnarchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
{!released && renderReleaseIcon("text-mti-gray-dim", "text-mti-gray-dim")}
</div> </div>
</div> </div>
<ProgressBar <ProgressBar

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>
);
} }

1332
src/dashboards/Corporate.tsx
View File

File diff suppressed because it is too large Load Diff

76
src/dashboards/IconCard.tsx
View File

@@ -1,38 +1,52 @@
import clsx from "clsx"; import clsx from "clsx";
import {IconType} from "react-icons"; import { IconType } from "react-icons";
interface Props { interface Props {
Icon: IconType; Icon: IconType;
label: string; label: string;
value?: string | number; value?: string | number;
color: "purple" | "rose" | "red" | "green"; color: "purple" | "rose" | "red" | "green";
className?: string; tooltip?: string;
tooltip?: string; onClick?: () => void;
onClick?: () => void; isSelected?: boolean;
className?: string;
} }
export default function IconCard({Icon, label, value, color, tooltip, className, onClick}: Props) { export default function IconCard({
const colorClasses: {[key in typeof color]: string} = { Icon,
purple: "text-mti-purple-light", label,
red: "text-mti-red-light", value,
rose: "text-mti-rose-light", color,
green: "text-mti-green-light", tooltip,
}; onClick,
className,
isSelected,
}: Props) {
const colorClasses: { [key in typeof color]: string } = {
purple: "mti-purple-light",
red: "mti-red-light",
rose: "mti-rose-light",
green: "mti-green-light",
};
return ( return (
<div <div
onClick={onClick} onClick={onClick}
className={clsx( className={clsx(
"bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300", "bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300",
tooltip && "tooltip tooltip-bottom", tooltip && "tooltip tooltip-bottom",
className, isSelected && `border border-solid border-${colorClasses[color]}`,
)} className,
data-tip={tooltip}> )}
<Icon className={clsx("text-6xl", colorClasses[color])} /> data-tip={tooltip}
<span className="flex flex-col gap-1 items-center text-xl"> >
<span className="text-lg">{label}</span> <Icon className={clsx("text-6xl", `text-${colorClasses[color]}`)} />
<span className={clsx("font-semibold", colorClasses[color])}>{value}</span> <span className="flex flex-col gap-1 items-center text-xl">
</span> <span className="text-lg">{label}</span>
</div> <span className={clsx("font-semibold", `text-${colorClasses[color]}`)}>
); {value}
</span>
</span>
</div>
);
} }

1820
src/dashboards/MasterCorporate.tsx
View File

File diff suppressed because it is too large Load Diff

352
src/dashboards/MasterStatistical.tsx
View File

@@ -1,34 +1,342 @@
import React from "react"; import React from "react";
import {CorporateUser} from "@/interfaces/user"; import { CorporateUser, User } from "@/interfaces/user";
import {BsBank, BsPersonFill} from "react-icons/bs"; import { BsBank, BsPersonFill } from "react-icons/bs";
import IconCard from "./IconCard"; import IconCard from "./IconCard";
import useAssignmentsCorporates from "@/hooks/useAssignmentCorporates"; import useAssignmentsCorporates from "@/hooks/useAssignmentCorporates";
import ReactDatePicker from "react-datepicker";
import moment from "moment";
import { Assignment, AssignmentWithCorporateId } from "@/interfaces/results";
import {
CellContext,
createColumnHelper,
flexRender,
getCoreRowModel,
HeaderGroup,
Table,
useReactTable,
} from "@tanstack/react-table";
import Checkbox from "@/components/Low/Checkbox";
interface Props { interface Props {
users: CorporateUser[]; corporateUsers: User[];
users: User[];
} }
interface TableData {
user: string;
correct: number;
corporate: string;
submitted: boolean;
date: moment.Moment;
assignment: string;
corporateId: string;
}
interface UserCount {
userCount: number;
maxUserCount: number;
}
const MasterStatistical = (props: Props) => { const MasterStatistical = (props: Props) => {
const {users} = props; const { users, corporateUsers } = props;
const usersList = React.useMemo(() => users.map((x) => x.id), [users]); const corporateRelevantUsers = React.useMemo(
() => corporateUsers.filter((x) => x.type !== "student") as CorporateUser[],
[corporateUsers]
);
const {assignments} = useAssignmentsCorporates({corporates: usersList}); const corporates = React.useMemo(
() => corporateRelevantUsers.map((x) => x.id),
[corporateRelevantUsers]
);
return ( const [selectedCorporates, setSelectedCorporates] =
<div className="flex flex-wrap gap-2 items-center text-center"> React.useState<string[]>(corporates);
<IconCard Icon={BsBank} label="Consolidate" value={0} color="purple" onClick={() => console.log("clicked")} /> const [startDate, setStartDate] = React.useState<Date | null>(
{users.map((group) => ( moment("01/01/2023").toDate()
<IconCard );
key={group.id} const [endDate, setEndDate] = React.useState<Date | null>(
Icon={BsBank} moment().endOf("year").toDate()
label={group.corporateInformation?.companyInformation?.name} );
value={0}
color="purple" const { assignments } = useAssignmentsCorporates({
onClick={() => console.log("clicked", group)} // corporates: [...corporates, "tYU0HTiJdjMsS8SB7XJsUdMMP892"],
/> corporates: selectedCorporates,
))} startDate,
<IconCard onClick={() => console.log("clicked")} Icon={BsPersonFill} label="Consolidate Highest Student" color="purple" /> endDate,
</div> });
);
const tableResults = React.useMemo(
() =>
assignments.reduce((accmA: TableData[], a: AssignmentWithCorporateId) => {
const userResults = a.assignees.map((assignee) => {
const userStats =
a.results.find((r) => r.user === assignee)?.stats || [];
const userName = users.find((u) => u.id === assignee)?.name || "";
const corporate = users.find((u) => u.id === a.assigner)?.name || "";
const commonData = {
user: userName,
corporateId: a.corporateId,
corporate,
assignment: a.name,
};
if (userStats.length === 0) {
return {
...commonData,
correct: 0,
submitted: false,
// date: moment(),
};
}
return {
...commonData,
correct: userStats.reduce((n, e) => n + e.score.correct, 0),
submitted: true,
date: moment.max(userStats.map((e) => moment(e.date))),
};
}) as TableData[];
return [...accmA, ...userResults];
}, []),
[assignments, users]
);
const getCorporateScores = (corporateId: string): UserCount => {
const corporateAssignmentsUsers = assignments
.filter((a) => a.corporateId === corporateId)
.reduce((acc, a) => acc + a.assignees.length, 0);
const corporateResults = tableResults.filter(
(r) => r.corporateId === corporateId
).length;
return {
maxUserCount: corporateAssignmentsUsers,
userCount: corporateResults,
};
};
const corporateScores = corporates.reduce(
(accm, id) => ({
...accm,
[id]: getCorporateScores(id),
}),
{}
) as Record<string, UserCount>;
const consolidateScore = Object.values(corporateScores).reduce(
(acc: UserCount, { userCount, maxUserCount }: UserCount) => ({
userCount: acc.userCount + userCount,
maxUserCount: acc.maxUserCount + maxUserCount,
}),
{ userCount: 0, maxUserCount: 0 }
);
const getConsolidateScoreStr = (data: UserCount) =>
`${data.userCount}/${data.maxUserCount}`;
const columnHelper = createColumnHelper<TableData>();
const defaultColumns = [
columnHelper.accessor("user", {
header: "User",
id: "user",
cell: (info) => {
return <span>{info.getValue()}</span>;
},
}),
columnHelper.accessor("corporate", {
header: "Corporate",
id: "corporate",
cell: (info) => {
return <span>{info.getValue()}</span>;
},
}),
columnHelper.accessor("assignment", {
header: "Assignment",
id: "assignment",
cell: (info) => {
return <span>{info.getValue()}</span>;
},
}),
columnHelper.accessor("submitted", {
header: "Submitted",
id: "submitted",
cell: (info) => {
return (
<Checkbox isChecked={info.getValue()} disabled onChange={() => {}}>
<span></span>
</Checkbox>
);
},
}),
columnHelper.accessor("correct", {
header: "Correct",
id: "correct",
cell: (info) => {
return <span>{info.getValue()}</span>;
},
}),
columnHelper.accessor("date", {
header: "Date",
id: "date",
cell: (info) => {
const date = info.getValue();
if (date) {
return <span>{date.format("DD/MM/YYYY")}</span>;
}
return <span>{""}</span>;
},
}),
];
const table = useReactTable({
data: tableResults,
columns: defaultColumns,
getCoreRowModel: getCoreRowModel(),
});
const areAllSelected = selectedCorporates.length === corporates.length;
const getStudentsConsolidateScore = () => {
if (tableResults.length === 0) {
return { highest: null, lowest: null };
}
// Find the student with the highest and lowest score
return tableResults.reduce(
(acc, curr) => {
if (curr.correct > acc.highest.correct) {
acc.highest = curr;
}
if (curr.correct < acc.lowest.correct) {
acc.lowest = curr;
}
return acc;
},
{ highest: tableResults[0], lowest: tableResults[0] }
);
};
const consolidateResults = getStudentsConsolidateScore();
return (
<>
<div className="flex flex-wrap gap-2 items-center text-center">
<IconCard
Icon={BsBank}
label="Consolidate"
value={getConsolidateScoreStr(consolidateScore)}
color="purple"
onClick={() => {
if (areAllSelected) {
setSelectedCorporates([]);
return;
}
setSelectedCorporates(corporates);
}}
isSelected={areAllSelected}
/>
{corporateRelevantUsers.map((group) => {
const isSelected = selectedCorporates.includes(group.id);
return (
<IconCard
key={group.id}
Icon={BsBank}
label={group.corporateInformation?.companyInformation?.name}
value={getConsolidateScoreStr(corporateScores[group.id])}
color="purple"
onClick={() => {
if (isSelected) {
setSelectedCorporates(
selectedCorporates.filter((x) => x !== group.id)
);
return;
}
setSelectedCorporates([...selectedCorporates, group.id]);
}}
isSelected={isSelected}
/>
);
})}
</div>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Date</label>
<ReactDatePicker
dateFormat="dd/MM/yyyy"
className="px-4 py-6 w-52 text-sm text-center font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
selected={startDate}
startDate={startDate}
endDate={endDate}
selectsRange
showMonthDropdown
onChange={([initialDate, finalDate]: [Date, Date]) => {
setStartDate(initialDate ?? moment("01/01/2023").toDate());
if (finalDate) {
// basicly selecting a final day works as if I'm selecting the first
// minute of that day. this way it covers the whole day
setEndDate(moment(finalDate).endOf("day").toDate());
return;
}
setEndDate(null);
}}
/>
</div>
<div>
<table className="rounded-xl h-full bg-mti-purple-ultralight/40 w-full">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th className="p-4 text-left" key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</th>
))}
</tr>
))}
</thead>
<tbody className="px-2">
{table.getRowModel().rows.map((row) => (
<tr
className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
key={row.id}
>
{row.getVisibleCells().map((cell) => (
<td className="px-4 py-2" key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
<div className="flex flex-wrap gap-2 items-center text-center">
{consolidateResults.highest && (
<IconCard
onClick={() => {}}
Icon={BsPersonFill}
label={`Highest result: ${consolidateResults.highest.user}`}
color="purple"
/>
)}
{consolidateResults.lowest && (
<IconCard
onClick={() => {}}
Icon={BsPersonFill}
label={`Lowest result: ${consolidateResults.lowest.user}`}
color="purple"
/>
)}
</div>
</>
);
}; };
export default MasterStatistical; export default MasterStatistical;

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 />}
</>
);
} }

20
src/hooks/useAssignmentCorporates.tsx
View File

@@ -1,13 +1,17 @@
import { Assignment } from "@/interfaces/results"; import { AssignmentWithCorporateId } from "@/interfaces/results";
import axios from "axios"; import axios from "axios";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
export default function useAssignmentsCorporates({ export default function useAssignmentsCorporates({
corporates, corporates,
startDate,
endDate,
}: { }: {
corporates: string[]; corporates: string[];
startDate: Date | null;
endDate: Date | null;
}) { }) {
const [assignments, setAssignments] = useState<Assignment[]>([]); const [assignments, setAssignments] = useState<AssignmentWithCorporateId[]>([]);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false); const [isError, setIsError] = useState(false);
@@ -18,9 +22,15 @@ export default function useAssignmentsCorporates({
} }
setIsLoading(true); setIsLoading(true);
const urlSearchParams = new URLSearchParams({
ids: corporates.join(","),
...(startDate ? { startDate: startDate.toISOString() } : {}),
...(endDate ? { endDate: endDate.toISOString() } : {}),
});
axios axios
.get<Assignment[]>( .get<AssignmentWithCorporateId[]>(
`/api/assignments/corporate?ids=${corporates.join(",")}` `/api/assignments/corporate?${urlSearchParams.toString()}`
) )
.then(async (response) => { .then(async (response) => {
setAssignments(response.data); setAssignments(response.data);
@@ -28,7 +38,7 @@ export default function useAssignmentsCorporates({
.finally(() => setIsLoading(false)); .finally(() => setIsLoading(false));
}; };
useEffect(getData, [corporates]); useEffect(getData, [corporates, startDate, endDate]);
return { assignments, isLoading, isError, reload: getData }; return { assignments, isLoading, isError, reload: getData };
} }

42
src/hooks/useAssignmentRelease.tsx Normal file
View File

@@ -0,0 +1,42 @@
import React from "react";
import axios from "axios";
import {toast} from "react-toastify";
import {BsDoorOpen} from "react-icons/bs";
export const useAssignmentRelease = (assignmentId: string, reload?: Function) => {
const [loading, setLoading] = React.useState(false);
const archive = () => {
// archive assignment
setLoading(true);
axios
.post(`/api/assignments/${assignmentId}/release`)
.then((res) => {
toast.success("Assignment released!");
if (reload) reload();
setLoading(false);
})
.catch((err) => {
toast.error("Failed to release the assignment!");
setLoading(false);
});
};
const renderIcon = (downloadClasses: string, loadingClasses: string) => {
if (loading) {
return <span className={`${loadingClasses} loading loading-infinity w-6`} />;
}
return (
<div
className="tooltip flex items-center justify-center w-fit h-fit"
data-tip="Release assignment"
onClick={(e) => {
e.stopPropagation();
archive();
}}>
<BsDoorOpen className={`${downloadClasses} text-2xl cursor-pointer tooltip`} />
</div>
);
};
return renderIcon;
};

18
src/interfaces/results.ts
View File

@@ -10,19 +10,27 @@ interface ModuleResult {
total: number; total: number;
} }
export interface AssignmentResult {
user: string;
type: "academic" | "general";
stats: Stat[];
}
export interface Assignment { export interface Assignment {
id: string; id: string;
name: string; name: string;
assigner: string; assigner: string;
assignees: string[]; assignees: string[];
results: { results: AssignmentResult[];
user: string;
type: "academic" | "general";
stats: Stat[];
}[];
exams: {id: string; module: Module; assignee: string}[]; exams: {id: string; module: Module; assignee: string}[];
instructorGender?: InstructorGender; instructorGender?: InstructorGender;
startDate: Date; startDate: Date;
endDate: Date; endDate: Date;
archived?: boolean; archived?: 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 };

33
src/pages/api/assignments/[id]/release.ts Normal file
View File

@@ -0,0 +1,33 @@
import type { NextApiRequest, NextApiResponse } from "next";
import { app } from "@/firebase";
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;
}
await setDoc(docSnap.ref, { released: 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 });
}

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 });
}

46
src/pages/api/assignments/corporate/index.ts
View File

@@ -5,7 +5,6 @@ import { sessionOptions } from "@/lib/session";
import { getAllAssignersByCorporate } from "@/utils/groups.be"; import { getAllAssignersByCorporate } from "@/utils/groups.be";
import { getAssignmentsByAssigners } from "@/utils/assignments.be"; import { getAssignmentsByAssigners } from "@/utils/assignments.be";
export default withIronSessionApiRoute(handler, sessionOptions); export default withIronSessionApiRoute(handler, sessionOptions);
async function handler(req: NextApiRequest, res: NextApiResponse) { async function handler(req: NextApiRequest, res: NextApiResponse) {
@@ -20,14 +19,49 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
} }
async function GET(req: NextApiRequest, res: NextApiResponse) { async function GET(req: NextApiRequest, res: NextApiResponse) {
const { ids } = req.query as { ids: string }; const { ids, startDate, endDate } = req.query as {
ids: string;
startDate?: string;
endDate?: string;
};
const startDateParsed = startDate ? new Date(startDate) : undefined;
const endDateParsed = endDate ? new Date(endDate) : undefined;
try { try {
const idsList = ids.split(","); const idsList = ids.split(",");
const assigners = await Promise.all(idsList.map(getAllAssignersByCorporate)); const assigners = await Promise.all(
const assignmentList = [...assigners.flat(), ...idsList]; idsList.map(async (id) => {
const assignments = await getAssignmentsByAssigners(assignmentList); const assigners = await getAllAssignersByCorporate(id);
res.status(200).json(assignments); return {
corporateId: id,
assigners,
};
})
);
const assignments = await Promise.all(assigners.map(async (data) => {
try {
const assigners = [...new Set([...data.assigners, data.corporateId])];
const assignments = await getAssignmentsByAssigners(
assigners,
startDateParsed,
endDateParsed
);
return assignments.map((assignment) => ({
...assignment,
corporateId: data.corporateId,
}));
} catch (err) {
console.error(err);
return [];
}
}));
console.log(assignments);
// const assignments = await getAssignmentsByAssigners(assignmentList, startDateParsed, endDateParsed);
res.status(200).json(assignments.flat());
} catch (err: any) { } catch (err: any) {
res.status(500).json({ error: err.message }); res.status(500).json({ error: err.message });
} }

2
src/pages/api/assignments/index.ts
View File

@@ -12,6 +12,7 @@ import {capitalize, flatten, uniqBy} from "lodash";
import {User} from "@/interfaces/user"; import {User} from "@/interfaces/user";
import moment from "moment"; import moment from "moment";
import {sendEmail} from "@/email"; import {sendEmail} from "@/email";
import { release } from "os";
const db = getFirestore(app); const db = getFirestore(app);
@@ -138,6 +139,7 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
results: [], results: [],
exams, exams,
instructorGender, instructorGender,
released: false,
...body, ...body,
}); });

61
src/utils/assignments.be.ts
View File

@@ -1,19 +1,58 @@
import {app} from "@/firebase"; import { app } from "@/firebase";
import {Assignment} from "@/interfaces/results"; import { Assignment } from "@/interfaces/results";
import {collection, getDocs, getFirestore, query, where} from "firebase/firestore"; import {
collection,
getDocs,
getFirestore,
query,
where,
} from "firebase/firestore";
const db = getFirestore(app); const db = getFirestore(app);
export const getAssignmentsByAssigner = async (id: string) => { export const getAssignmentsByAssigner = async (
const {docs} = await getDocs(query(collection(db, "assignments"), where("assigner", "==", id))); id: string,
return docs.map((x) => ({...x.data(), id: x.id})) as Assignment[]; startDate?: Date,
endDate?: Date
) => {
const { docs } = await getDocs(
query(
collection(db, "assignments"),
...[
where("assigner", "==", id),
...(startDate ? [where("startDate", ">=", startDate.toISOString())] : []),
// firebase doesnt accept compound queries so we have to filter on the server
// ...endDate ? [where("endDate", "<=", endDate)] : [],
]
)
);
if (endDate) {
return docs
.map((x) => ({ ...(x.data() as Assignment), id: x.id }))
.filter((x) => new Date(x.endDate) <= endDate) as Assignment[];
}
return docs.map((x) => ({ ...x.data(), id: x.id })) as Assignment[];
}; };
export const getAssignmentsByAssignerBetweenDates = async (id: string, startDate: Date, endDate: Date) => { export const getAssignmentsByAssignerBetweenDates = async (
const {docs} = await getDocs(query(collection(db, "assignments"), where("assigner", "==", id), )); id: string,
return docs.map((x) => ({...x.data(), id: x.id})) as Assignment[]; startDate: Date,
endDate: Date
) => {
const { docs } = await getDocs(
query(collection(db, "assignments"), where("assigner", "==", id))
);
return docs.map((x) => ({ ...x.data(), id: x.id })) as Assignment[];
}; };
export const getAssignmentsByAssigners = async (ids: string[]) => { export const getAssignmentsByAssigners = async (
return (await Promise.all(ids.map(getAssignmentsByAssigner))).flat(); ids: string[],
startDate?: Date,
endDate?: Date
) => {
return (
await Promise.all(
ids.map((id) => getAssignmentsByAssigner(id, startDate, endDate))
)
).flat();
}; };

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;

1
src/utils/stats.ts
View File

@@ -128,6 +128,7 @@ export const groupBySession = (stats: Stat[]) => groupBy(stats, "session");
export const groupByDate = (stats: Stat[]) => groupBy(stats, "date"); export const groupByDate = (stats: Stat[]) => groupBy(stats, "date");
export const groupByExam = (stats: Stat[]) => groupBy(stats, "exam"); export const groupByExam = (stats: Stat[]) => groupBy(stats, "exam");
export const groupByModule = (stats: Stat[]) => groupBy(stats, "module"); export const groupByModule = (stats: Stat[]) => groupBy(stats, "module");
export const groupByUser = (stats: Stat[]) => groupBy(stats, "user");
export const convertToUserSolutions = (stats: Stat[]): UserSolution[] => { export const convertToUserSolutions = (stats: Stat[]): UserSolution[] => {
return stats.map((stat) => ({ return stats.map((stat) => ({