Extracted the Admin Panel items
This commit is contained in:
Tiago Ribeiro
73
src/pages/(admin)/CodeGenerator.tsx
Normal file
73
src/pages/(admin)/CodeGenerator.tsx
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
import Button from "@/components/Low/Button";
|
||||||
|
import {Type} from "@/interfaces/user";
|
||||||
|
import axios from "axios";
|
||||||
|
import clsx from "clsx";
|
||||||
|
import {capitalize} from "lodash";
|
||||||
|
import {useState} from "react";
|
||||||
|
import {toast} from "react-toastify";
|
||||||
|
import ShortUniqueId from "short-unique-id";
|
||||||
|
|
||||||
|
export default function CodeGenerator() {
|
||||||
|
const [generatedCode, setGeneratedCode] = useState<string>();
|
||||||
|
|
||||||
|
const generateCode = (type: Type) => {
|
||||||
|
const uid = new ShortUniqueId();
|
||||||
|
const code = uid.randomUUID(6);
|
||||||
|
|
||||||
|
axios
|
||||||
|
.post("/api/code", {type, code})
|
||||||
|
.then(({data, status}) => {
|
||||||
|
if (data.ok) {
|
||||||
|
toast.success(`Successfully generated a ${capitalize(type)} code!`, {toastId: "success"});
|
||||||
|
setGeneratedCode(code);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status === 403) {
|
||||||
|
toast.error(`You do not have permission to generate a ${capitalize(type)} code!`, {toastId: "forbidden"});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(({response: {status}}) => {
|
||||||
|
if (status === 403) {
|
||||||
|
toast.error(`You do not have permission to generate a ${capitalize(type)} code!`, {toastId: "forbidden"});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.error(`Something went wrong, please try again later!`, {toastId: "error"});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
|
||||||
|
<label className="font-normal text-base text-mti-gray-dim">User Code Generator</label>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<Button className="w-48" variant="outline" onClick={() => generateCode("student")}>
|
||||||
|
Student
|
||||||
|
</Button>
|
||||||
|
<Button className="w-48" variant="outline" onClick={() => generateCode("teacher")}>
|
||||||
|
Teacher
|
||||||
|
</Button>
|
||||||
|
<Button className="w-48" variant="outline" onClick={() => generateCode("admin")}>
|
||||||
|
Admin
|
||||||
|
</Button>
|
||||||
|
<Button className="w-48" variant="outline" onClick={() => generateCode("owner")}>
|
||||||
|
Owner
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<label className="font-normal text-base text-mti-gray-dim">Generated Code:</label>
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
||||||
|
"hover:border-mti-purple tooltip",
|
||||||
|
"transition duration-300 ease-in-out",
|
||||||
|
)}
|
||||||
|
data-tip="Click to copy"
|
||||||
|
onClick={() => {
|
||||||
|
if (generatedCode) navigator.clipboard.writeText(generatedCode);
|
||||||
|
}}>
|
||||||
|
{generatedCode}
|
||||||
|
</div>
|
||||||
|
{generatedCode && <span className="text-sm text-mti-gray-dim font-light">Give this code to the user to complete their registration</span>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
76
src/pages/(admin)/ExamLoader.tsx
Normal file
76
src/pages/(admin)/ExamLoader.tsx
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
import Button from "@/components/Low/Button";
|
||||||
|
import Input from "@/components/Low/Input";
|
||||||
|
import {Module} from "@/interfaces";
|
||||||
|
import useExamStore from "@/stores/examStore";
|
||||||
|
import {getExamById} from "@/utils/exams";
|
||||||
|
import {MODULE_ARRAY} from "@/utils/moduleUtils";
|
||||||
|
import {RadioGroup} from "@headlessui/react";
|
||||||
|
import clsx from "clsx";
|
||||||
|
import {capitalize} from "lodash";
|
||||||
|
import {useRouter} from "next/router";
|
||||||
|
import {FormEvent, useState} from "react";
|
||||||
|
import {toast} from "react-toastify";
|
||||||
|
|
||||||
|
export default function ExamLoader() {
|
||||||
|
const [selectedModule, setSelectedModule] = useState<Module>();
|
||||||
|
const [examId, setExamId] = useState<string>();
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const setExams = useExamStore((state) => state.setExams);
|
||||||
|
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const loadExam = async (e?: FormEvent) => {
|
||||||
|
if (e) e.preventDefault();
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
if (selectedModule && examId) {
|
||||||
|
const exam = await getExamById(selectedModule, examId.trim());
|
||||||
|
if (!exam) {
|
||||||
|
toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
|
||||||
|
toastId: "invalid-exam-id",
|
||||||
|
});
|
||||||
|
|
||||||
|
setIsLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setExams([exam]);
|
||||||
|
setSelectedModules([selectedModule]);
|
||||||
|
|
||||||
|
router.push("/exercises");
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
|
||||||
|
<label className="font-normal text-base text-mti-gray-dim">Exam Loader</label>
|
||||||
|
<form className="flex flex-col gap-4 w-full" onSubmit={loadExam}>
|
||||||
|
<RadioGroup value={selectedModule} onChange={setSelectedModule} className="grid grid-cols-2 items-center gap-4 place-items-center">
|
||||||
|
{MODULE_ARRAY.map((module) => (
|
||||||
|
<RadioGroup.Option value={module} key={module}>
|
||||||
|
{({checked}) => (
|
||||||
|
<span
|
||||||
|
className={clsx(
|
||||||
|
"px-6 py-4 w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
||||||
|
"hover:bg-mti-purple-light hover:border-mti-purple-dark hover:text-white",
|
||||||
|
"transition duration-300 ease-in-out",
|
||||||
|
!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
|
||||||
|
)}>
|
||||||
|
{capitalize(module)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</RadioGroup.Option>
|
||||||
|
))}
|
||||||
|
</RadioGroup>
|
||||||
|
<Input type="text" name="examId" onChange={setExamId} placeholder="Exam ID" />
|
||||||
|
<Button disabled={!selectedModule || !examId} isLoading={isLoading}>
|
||||||
|
Load Exam
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -3,22 +3,10 @@ import Head from "next/head";
|
|||||||
import {withIronSessionSsr} from "iron-session/next";
|
import {withIronSessionSsr} from "iron-session/next";
|
||||||
import {sessionOptions} from "@/lib/session";
|
import {sessionOptions} from "@/lib/session";
|
||||||
import useUser from "@/hooks/useUser";
|
import useUser from "@/hooks/useUser";
|
||||||
import {toast, ToastContainer} from "react-toastify";
|
import {ToastContainer} from "react-toastify";
|
||||||
import Layout from "@/components/High/Layout";
|
import Layout from "@/components/High/Layout";
|
||||||
import {RadioGroup} from "@headlessui/react";
|
import CodeGenerator from "./(admin)/CodeGenerator";
|
||||||
import {MODULE_ARRAY} from "@/utils/moduleUtils";
|
import ExamLoader from "./(admin)/ExamLoader";
|
||||||
import clsx from "clsx";
|
|
||||||
import {capitalize} from "lodash";
|
|
||||||
import {FormEvent, useState} from "react";
|
|
||||||
import {Module} from "@/interfaces";
|
|
||||||
import Input from "@/components/Low/Input";
|
|
||||||
import Button from "@/components/Low/Button";
|
|
||||||
import {getExamById} from "@/utils/exams";
|
|
||||||
import useExamStore from "@/stores/examStore";
|
|
||||||
import {useRouter} from "next/router";
|
|
||||||
import ShortUniqueId from "short-unique-id";
|
|
||||||
import {Type} from "@/interfaces/user";
|
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
||||||
const user = req.session.user;
|
const user = req.session.user;
|
||||||
@@ -50,135 +38,6 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
|||||||
};
|
};
|
||||||
}, sessionOptions);
|
}, sessionOptions);
|
||||||
|
|
||||||
const ExamLoader = () => {
|
|
||||||
const [selectedModule, setSelectedModule] = useState<Module>();
|
|
||||||
const [examId, setExamId] = useState<string>();
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
|
|
||||||
const setExams = useExamStore((state) => state.setExams);
|
|
||||||
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const loadExam = async (e?: FormEvent) => {
|
|
||||||
if (e) e.preventDefault();
|
|
||||||
setIsLoading(true);
|
|
||||||
|
|
||||||
if (selectedModule && examId) {
|
|
||||||
const exam = await getExamById(selectedModule, examId.trim());
|
|
||||||
if (!exam) {
|
|
||||||
toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
|
|
||||||
toastId: "invalid-exam-id",
|
|
||||||
});
|
|
||||||
|
|
||||||
setIsLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setExams([exam]);
|
|
||||||
setSelectedModules([selectedModule]);
|
|
||||||
|
|
||||||
router.push("/exercises");
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsLoading(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
|
|
||||||
<label className="font-normal text-base text-mti-gray-dim">Exam Loader</label>
|
|
||||||
<form className="flex flex-col gap-4 w-full" onSubmit={loadExam}>
|
|
||||||
<RadioGroup value={selectedModule} onChange={setSelectedModule} className="grid grid-cols-2 items-center gap-4 place-items-center">
|
|
||||||
{MODULE_ARRAY.map((module) => (
|
|
||||||
<RadioGroup.Option value={module} key={module}>
|
|
||||||
{({checked}) => (
|
|
||||||
<span
|
|
||||||
className={clsx(
|
|
||||||
"px-6 py-4 w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
|
||||||
"hover:bg-mti-purple-light hover:border-mti-purple-dark hover:text-white",
|
|
||||||
"transition duration-300 ease-in-out",
|
|
||||||
!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
|
|
||||||
)}>
|
|
||||||
{capitalize(module)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</RadioGroup.Option>
|
|
||||||
))}
|
|
||||||
</RadioGroup>
|
|
||||||
<Input type="text" name="examId" onChange={setExamId} placeholder="Exam ID" />
|
|
||||||
<Button disabled={!selectedModule || !examId} isLoading={isLoading}>
|
|
||||||
Load Exam
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const CodeGenerator = () => {
|
|
||||||
const [generatedCode, setGeneratedCode] = useState<string>();
|
|
||||||
|
|
||||||
const generateCode = (type: Type) => {
|
|
||||||
const uid = new ShortUniqueId();
|
|
||||||
const code = uid.randomUUID(6);
|
|
||||||
|
|
||||||
axios
|
|
||||||
.post("/api/code", {type, code})
|
|
||||||
.then(({data, status}) => {
|
|
||||||
if (data.ok) {
|
|
||||||
toast.success(`Successfully generated a ${capitalize(type)} code!`, {toastId: "success"});
|
|
||||||
setGeneratedCode(code);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (status === 403) {
|
|
||||||
toast.error(`You do not have permission to generate a ${capitalize(type)} code!`, {toastId: "forbidden"});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(({response: {status}}) => {
|
|
||||||
if (status === 403) {
|
|
||||||
toast.error(`You do not have permission to generate a ${capitalize(type)} code!`, {toastId: "forbidden"});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
toast.error(`Something went wrong, please try again later!`, {toastId: "error"});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
|
|
||||||
<label className="font-normal text-base text-mti-gray-dim">User Code Generator</label>
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<Button className="w-48" variant="outline" onClick={() => generateCode("student")}>
|
|
||||||
Student
|
|
||||||
</Button>
|
|
||||||
<Button className="w-48" variant="outline" onClick={() => generateCode("teacher")}>
|
|
||||||
Teacher
|
|
||||||
</Button>
|
|
||||||
<Button className="w-48" variant="outline" onClick={() => generateCode("admin")}>
|
|
||||||
Admin
|
|
||||||
</Button>
|
|
||||||
<Button className="w-48" variant="outline" onClick={() => generateCode("owner")}>
|
|
||||||
Owner
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<label className="font-normal text-base text-mti-gray-dim">Generated Code:</label>
|
|
||||||
<div
|
|
||||||
className={clsx(
|
|
||||||
"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
|
||||||
"hover:border-mti-purple tooltip",
|
|
||||||
"transition duration-300 ease-in-out",
|
|
||||||
)}
|
|
||||||
data-tip="Click to copy"
|
|
||||||
onClick={() => {
|
|
||||||
if (generatedCode) navigator.clipboard.writeText(generatedCode);
|
|
||||||
}}>
|
|
||||||
{generatedCode}
|
|
||||||
</div>
|
|
||||||
{generatedCode && <span className="text-sm text-mti-gray-dim font-light">Give this code to the user to complete their registration</span>}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function Admin() {
|
export default function Admin() {
|
||||||
const {user} = useUser({redirectTo: "/login"});
|
const {user} = useUser({redirectTo: "/login"});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user