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

Added the ability to view archived assignments and unarchive them

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-05-05 12:02:53 +01:00
parent cbb61d18fe
commit 0e53b4a454
5 changed files with 227 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
src/dashboards/AssignmentCard.tsx
View File

@@ -1,126 +1,105 @@
import ProgressBar from "@/components/Low/ProgressBar"; import ProgressBar from "@/components/Low/ProgressBar";
import useUsers from "@/hooks/useUsers"; import useUsers from "@/hooks/useUsers";
import { Module } from "@/interfaces"; import {Module} from "@/interfaces";
import { Assignment } from "@/interfaces/results"; import {Assignment} from "@/interfaces/results";
import { calculateBandScore } from "@/utils/score"; import {calculateBandScore} from "@/utils/score";
import clsx from "clsx"; import clsx from "clsx";
import moment from "moment"; import moment from "moment";
import { import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
BsBook, import {usePDFDownload} from "@/hooks/usePDFDownload";
BsClipboard, import {useAssignmentArchive} from "@/hooks/useAssignmentArchive";
BsHeadphones, import {uniqBy} from "lodash";
BsMegaphone, import {useAssignmentUnarchive} from "@/hooks/useAssignmentUnarchive";
BsPen,
} from "react-icons/bs";
import { usePDFDownload } from "@/hooks/usePDFDownload";
import { useAssignmentArchive } from "@/hooks/useAssignmentArchive";
import { uniqBy } from "lodash";
interface Props { interface Props {
onClick?: () => void; onClick?: () => void;
allowDownload?: boolean; allowDownload?: boolean;
reload?: Function; reload?: Function;
allowArchive?: boolean; allowArchive?: boolean;
allowUnarchive?: boolean;
} }
export default function AssignmentCard({ export default function AssignmentCard({
id, id,
name, name,
assigner, assigner,
startDate, startDate,
endDate, endDate,
assignees, assignees,
results, results,
exams, exams,
archived, archived,
onClick, onClick,
allowDownload, allowDownload,
reload, reload,
allowArchive, allowArchive,
allowUnarchive,
}: Assignment & Props) { }: Assignment & Props) {
const renderPdfIcon = usePDFDownload("assignments"); const renderPdfIcon = usePDFDownload("assignments");
const renderArchiveIcon = useAssignmentArchive(id, reload); const renderArchiveIcon = useAssignmentArchive(id, reload);
const renderUnarchiveIcon = useAssignmentUnarchive(id, reload);
const calculateAverageModuleScore = (module: Module) => { const calculateAverageModuleScore = (module: Module) => {
const resultModuleBandScores = results.map((r) => { const resultModuleBandScores = results.map((r) => {
const moduleStats = r.stats.filter((s) => s.module === module); const moduleStats = r.stats.filter((s) => s.module === module);
const correct = moduleStats.reduce( const correct = moduleStats.reduce((acc, curr) => acc + curr.score.correct, 0);
(acc, curr) => acc + curr.score.correct, const total = moduleStats.reduce((acc, curr) => acc + curr.score.total, 0);
0 return calculateBandScore(correct, total, module, r.type);
); });
const total = moduleStats.reduce(
(acc, curr) => acc + curr.score.total,
0
);
return calculateBandScore(correct, total, module, r.type);
});
return resultModuleBandScores.length === 0 return resultModuleBandScores.length === 0 ? -1 : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) / results.length;
? -1 };
: resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) /
results.length;
};
return ( return (
<div <div
onClick={onClick} onClick={onClick}
className="border-mti-gray-platinum flex h-fit w-[350px] cursor-pointer flex-col gap-6 rounded-xl border bg-white p-4 transition duration-300 ease-in-out hover:drop-shadow" className="border-mti-gray-platinum flex h-fit w-[350px] cursor-pointer flex-col gap-6 rounded-xl border bg-white p-4 transition duration-300 ease-in-out hover:drop-shadow">
> <div className="flex flex-col gap-3">
<div className="flex flex-col gap-3"> <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 && {allowArchive && !archived && renderArchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")} {allowUnarchive && archived && renderUnarchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
{allowArchive && </div>
!archived && </div>
renderArchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")} <ProgressBar
</div> color={results.length / assignees.length < 0.5 ? "red" : "purple"}
</div> percentage={(results.length / assignees.length) * 100}
<ProgressBar label={`${results.length}/${assignees.length}`}
color={results.length / assignees.length < 0.5 ? "red" : "purple"} className="h-5"
percentage={(results.length / assignees.length) * 100} textClassName={results.length / assignees.length < 0.5 ? "!text-mti-gray-dim font-light" : "text-white"}
label={`${results.length}/${assignees.length}`} />
className="h-5" </div>
textClassName={ <span className="flex justify-between gap-1">
results.length / assignees.length < 0.5 <span>{moment(startDate).format("DD/MM/YY, HH:mm")}</span>
? "!text-mti-gray-dim font-light" <span>-</span>
: "text-white" <span>{moment(endDate).format("DD/MM/YY, HH:mm")}</span>
} </span>
/> <div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
</div> {uniqBy(exams, (x) => x.module).map(({module}) => (
<span className="flex justify-between gap-1"> <div
<span>{moment(startDate).format("DD/MM/YY, HH:mm")}</span> key={module}
<span>-</span> className={clsx(
<span>{moment(endDate).format("DD/MM/YY, HH:mm")}</span> "-md:px-4 flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
</span> module === "reading" && "bg-ielts-reading",
<div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2"> module === "listening" && "bg-ielts-listening",
{uniqBy(exams, (x) => x.module).map(({ module }) => ( module === "writing" && "bg-ielts-writing",
<div module === "speaking" && "bg-ielts-speaking",
key={module} module === "level" && "bg-ielts-level",
className={clsx( )}>
"-md:px-4 flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4", {module === "reading" && <BsBook className="h-4 w-4" />}
module === "reading" && "bg-ielts-reading", {module === "listening" && <BsHeadphones className="h-4 w-4" />}
module === "listening" && "bg-ielts-listening", {module === "writing" && <BsPen className="h-4 w-4" />}
module === "writing" && "bg-ielts-writing", {module === "speaking" && <BsMegaphone className="h-4 w-4" />}
module === "speaking" && "bg-ielts-speaking", {module === "level" && <BsClipboard className="h-4 w-4" />}
module === "level" && "bg-ielts-level" {calculateAverageModuleScore(module) > -1 && (
)} <span className="text-sm">{calculateAverageModuleScore(module).toFixed(1)}</span>
> )}
{module === "reading" && <BsBook className="h-4 w-4" />} </div>
{module === "listening" && <BsHeadphones className="h-4 w-4" />} ))}
{module === "writing" && <BsPen className="h-4 w-4" />} </div>
{module === "speaking" && <BsMegaphone className="h-4 w-4" />} </div>
{module === "level" && <BsClipboard className="h-4 w-4" />} );
{calculateAverageModuleScore(module) > -1 && (
<span className="text-sm">
{calculateAverageModuleScore(module).toFixed(1)}
</span>
)}
</div>
))}
</div>
</div>
);
} }

28
src/dashboards/Teacher.tsx
View File

@@ -151,8 +151,10 @@ export default function TeacherDashboard({user}: Props) {
}; };
const AssignmentsPage = () => { const AssignmentsPage = () => {
const activeFilter = (a: Assignment) => moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment()) && a.assignees.length > a.results.length; 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 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 futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment());
return ( return (
@@ -234,7 +236,29 @@ export default function TeacherDashboard({user}: Props) {
<h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastFilter).length})</h2> <h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastFilter).length})</h2>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{assignments.filter(pastFilter).map((a) => ( {assignments.filter(pastFilter).map((a) => (
<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} allowDownload reload={reloadAssignments} allowArchive/> <AssignmentCard
{...a}
onClick={() => setSelectedAssignment(a)}
key={a.id}
allowDownload
reload={reloadAssignments}
allowArchive
/>
))}
</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}
onClick={() => setSelectedAssignment(a)}
key={a.id}
allowDownload
reload={reloadAssignments}
allowUnarchive
/>
))} ))}
</div> </div>
</section> </section>

75
src/hooks/useAssignmentArchive.tsx
View File

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

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

@@ -0,0 +1,42 @@
import React from "react";
import axios from "axios";
import {toast} from "react-toastify";
import {BsArchive, BsFileEarmarkCheck, BsFileEarmarkCheckFill} from "react-icons/bs";
export const useAssignmentUnarchive = (assignmentId: string, reload?: Function) => {
const [loading, setLoading] = React.useState(false);
const archive = () => {
// archive assignment
setLoading(true);
axios
.post(`/api/assignments/${assignmentId}/unarchive`)
.then((res) => {
toast.success("Assignment unarchived!");
if (reload) reload();
setLoading(false);
})
.catch((err) => {
toast.error("Failed to unarchive 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="Unarchive assignment"
onClick={(e) => {
e.stopPropagation();
archive();
}}>
<BsFileEarmarkCheck className={`${downloadClasses} text-2xl cursor-pointer tooltip`} />
</div>
);
};
return renderIcon;
};

33
src/pages/api/assignments/[id]/unarchive.tsx 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, {archived: false}, {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});
}