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

Merge branch 'develop' of https://bitbucket.org/ecropdev/ielts-ui into feature/training-content

Browse Source
This commit is contained in:
Carlos Mesquita
2024-08-02 15:01:05 +01:00
parent a71e6632d6 752a46b247
commit 12bb124d91
16 changed files with 1007 additions and 1014 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -12,6 +12,7 @@
"dependencies": { "dependencies": {
"@beam-australia/react-env": "^3.1.1", "@beam-australia/react-env": "^3.1.1",
"@dnd-kit/core": "^6.1.0", "@dnd-kit/core": "^6.1.0",
"@firebase/util": "^1.9.7",
"@headlessui/react": "^1.7.13", "@headlessui/react": "^1.7.13",
"@mdi/js": "^7.1.96", "@mdi/js": "^7.1.96",
"@mdi/react": "^1.6.1", "@mdi/react": "^1.6.1",

2
src/components/Low/Select.tsx
View File

@@ -4,7 +4,7 @@ import ReactSelect, {GroupBase, StylesConfig} from "react-select";
interface Option { interface Option {
[key: string]: any; [key: string]: any;
value: string; value: string | null;
label: string; label: string;
} }

62
src/components/PermissionList.tsx Normal file
View File

@@ -0,0 +1,62 @@
import {Permission} from "@/interfaces/permissions";
import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
import Link from "next/link";
import {convertCamelCaseToReadable} from "@/utils/string";
interface Props {
permissions: Permission[];
}
const columnHelper = createColumnHelper<Permission>();
const defaultColumns = [
columnHelper.accessor("type", {
header: () => <span>Type</span>,
cell: ({row, getValue}) => (
<Link
href={`/permissions/${row.original.id}`}
key={row.id}
className="underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer">
{convertCamelCaseToReadable(getValue() as string)}
</Link>
),
}),
];
export default function PermissionList({permissions}: Props) {
const table = useReactTable({
data: permissions,
columns: defaultColumns,
getCoreRowModel: getCoreRowModel(),
});
return (
<div className="w-full">
<div className="w-full flex flex-col gap-2">
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th className="py-4 px-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 items-center w-fit" key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}

81
src/dashboards/AssignmentCreator.tsx
View File

@@ -2,7 +2,7 @@ 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 {useState} from "react"; import {useEffect, useState} from "react";
import {BsBook, BsCheckCircle, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle} from "react-icons/bs"; import {BsBook, BsCheckCircle, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle} from "react-icons/bs";
import {generate} from "random-words"; import {generate} from "random-words";
import {capitalize} from "lodash"; import {capitalize} from "lodash";
@@ -16,11 +16,11 @@ 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 {uuidv4} from "@firebase/util";
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";
interface Props { interface Props {
isCreating: boolean; isCreating: boolean;
@@ -44,6 +44,14 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
const [instructorGender, setInstructorGender] = useState<InstructorGender>(assignment?.instructorGender || "varied"); const [instructorGender, setInstructorGender] = useState<InstructorGender>(assignment?.instructorGender || "varied");
// creates a new exam for each assignee or just one exam for all assignees // creates a new exam for each assignee or just one exam for all assignees
const [generateMultiple, setGenerateMultiple] = useState<boolean>(false); const [generateMultiple, setGenerateMultiple] = useState<boolean>(false);
const [useRandomExams, setUseRandomExams] = useState(true);
const [examIDs, setExamIDs] = useState<{id: string; module: Module}[]>([]);
const {exams} = useExams();
useEffect(() => {
setExamIDs((prev) => 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);
@@ -61,6 +69,7 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
assignees, assignees,
name, name,
startDate, startDate,
examIDs: !useRandomExams ? examIDs : undefined,
endDate, endDate,
selectedModules, selectedModules,
generateMultiple, generateMultiple,
@@ -229,19 +238,52 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
</div> </div>
</div> </div>
<div className="flex flex-col gap-3 w-full"> {selectedModules.includes("speaking") && (
<label className="font-normal text-base text-mti-gray-dim">Speaking Instructor&apos;s Gender</label> <div className="flex flex-col gap-3 w-full">
<Select <label className="font-normal text-base text-mti-gray-dim">Speaking Instructor&apos;s Gender</label>
value={{value: instructorGender, label: capitalize(instructorGender)}} <Select
onChange={(value) => (value ? setInstructorGender(value.value as InstructorGender) : null)} value={{value: instructorGender, label: capitalize(instructorGender)}}
disabled={!selectedModules.includes("speaking") || !!assignment} onChange={(value) => (value ? setInstructorGender(value.value as InstructorGender) : null)}
options={[ disabled={!selectedModules.includes("speaking") || !!assignment}
{value: "male", label: "Male"}, options={[
{value: "female", label: "Female"}, {value: "male", label: "Male"},
{value: "varied", label: "Varied"}, {value: "female", label: "Female"},
]} {value: "varied", label: "Varied"},
/> ]}
</div> />
</div>
)}
{selectedModules.length > 0 && (
<div className="flex flex-col gap-3 w-full">
<Checkbox isChecked={useRandomExams} onChange={setUseRandomExams}>
Random Exams
</Checkbox>
{!useRandomExams && (
<div className="grid md:grid-cols-2 w-full gap-4">
{selectedModules.map((module) => (
<div key={module} className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">{capitalize(module)} Exam</label>
<Select
value={{
value: examIDs.find((e) => e.module === module)?.id || null,
label: examIDs.find((e) => e.module === module)?.id || "",
}}
onChange={(value) =>
value
? setExamIDs((prev) => [...prev.filter((x) => x.module !== module), {id: value.value!, module}])
: setExamIDs((prev) => prev.filter((x) => x.module !== module))
}
options={exams
.filter((x) => !x.isDiagnostic && x.module === module)
.map((x) => ({value: x.id, label: x.id}))}
/>
</div>
))}
</div>
)}
</div>
)}
<section className="w-full flex flex-col gap-3"> <section className="w-full flex flex-col gap-3">
<span className="font-semibold">Assignees ({assignees.length} selected)</span> <span className="font-semibold">Assignees ({assignees.length} selected)</span>
@@ -323,7 +365,14 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
</Button> </Button>
)} )}
<Button <Button
disabled={selectedModules.length === 0 || !name || !startDate || !endDate || assignees.length === 0} disabled={
selectedModules.length === 0 ||
!name ||
!startDate ||
!endDate ||
assignees.length === 0 ||
(!!examIDs && examIDs.length < selectedModules.length)
}
className="w-full max-w-[200px]" className="w-full max-w-[200px]"
onClick={createAssignment} onClick={createAssignment}
isLoading={isLoading}> isLoading={isLoading}>

4
src/pages/(generation)/LevelGeneration.tsx
View File

@@ -193,7 +193,7 @@ const TaskTab = ({section, setSection}: {section: LevelSection; setSection: (sec
<label className="font-normal text-base text-mti-gray-dim">Exercise Type</label> <label className="font-normal text-base text-mti-gray-dim">Exercise Type</label>
<Select <Select
options={Object.keys(TYPES).map((key) => ({value: key, label: TYPES[key]}))} options={Object.keys(TYPES).map((key) => ({value: key, label: TYPES[key]}))}
onChange={(e) => setSection({...section, type: e!.value})} onChange={(e) => setSection({...section, type: e!.value!})}
value={{value: section?.type || "multiple_choice_4", label: TYPES[section?.type || "multiple_choice_4"]}} value={{value: section?.type || "multiple_choice_4", label: TYPES[section?.type || "multiple_choice_4"]}}
/> />
</div> </div>
@@ -296,7 +296,7 @@ const LevelGeneration = () => {
module: "level", module: "level",
difficulty, difficulty,
variant: "full", variant: "full",
isDiagnostic: true, isDiagnostic: false,
parts: parts parts: parts
.map((part, index) => { .map((part, index) => {
const currentExercise = result.data.exercises[`exercise_${index + 1}`] as any; const currentExercise = result.data.exercises[`exercise_${index + 1}`] as any;

871
src/pages/(generation)/ListeningGeneration.tsx
View File

@@ -1,526 +1,449 @@
import MultipleChoiceEdit from "@/components/Generation/multiple.choice.edit"; import MultipleChoiceEdit from "@/components/Generation/multiple.choice.edit";
import Input from "@/components/Low/Input"; import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select"; import Select from "@/components/Low/Select";
import { Difficulty, Exercise, ListeningExam } from "@/interfaces/exam"; import {Difficulty, Exercise, ListeningExam} from "@/interfaces/exam";
import useExamStore from "@/stores/examStore"; import useExamStore from "@/stores/examStore";
import { getExamById } from "@/utils/exams"; import {getExamById} from "@/utils/exams";
import { playSound } from "@/utils/sound"; import {playSound} from "@/utils/sound";
import { convertCamelCaseToReadable } from "@/utils/string"; import {convertCamelCaseToReadable} from "@/utils/string";
import { Tab } from "@headlessui/react"; import {Tab} from "@headlessui/react";
import axios from "axios"; import axios from "axios";
import clsx from "clsx"; import clsx from "clsx";
import { capitalize, sample } from "lodash"; import {capitalize, sample} from "lodash";
import { useRouter } from "next/router"; import {useRouter} from "next/router";
import { useEffect, useState, Dispatch, SetStateAction } from "react"; import {useEffect, useState, Dispatch, SetStateAction} from "react";
import { BsArrowRepeat, BsCheck } from "react-icons/bs"; import {BsArrowRepeat, BsCheck} from "react-icons/bs";
import { toast } from "react-toastify"; import {toast} from "react-toastify";
import WriteBlanksEdit from "@/components/Generation/write.blanks.edit"; import WriteBlanksEdit from "@/components/Generation/write.blanks.edit";
import {generate} from "random-words";
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"]; const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
const MULTIPLE_CHOICE = { type: "multipleChoice", label: "Multiple Choice" }; const MULTIPLE_CHOICE = {type: "multipleChoice", label: "Multiple Choice"};
const WRITE_BLANKS_QUESTIONS = { const WRITE_BLANKS_QUESTIONS = {
type: "writeBlanksQuestions", type: "writeBlanksQuestions",
label: "Write the Blanks: Questions", label: "Write the Blanks: Questions",
}; };
const WRITE_BLANKS_FILL = { const WRITE_BLANKS_FILL = {
type: "writeBlanksFill", type: "writeBlanksFill",
label: "Write the Blanks: Fill", label: "Write the Blanks: Fill",
}; };
const WRITE_BLANKS_FORM = { const WRITE_BLANKS_FORM = {
type: "writeBlanksForm", type: "writeBlanksForm",
label: "Write the Blanks: Form", label: "Write the Blanks: Form",
}; };
const MULTIPLE_CHOICE_3 = { const MULTIPLE_CHOICE_3 = {
type: "multipleChoice3Options", type: "multipleChoice3Options",
label: "Multiple Choice", label: "Multiple Choice",
}; };
const PartTab = ({ const PartTab = ({
part, part,
difficulty, difficulty,
availableTypes, availableTypes,
index, index,
setPart, setPart,
updatePart, updatePart,
}: { }: {
part?: ListeningPart; part?: ListeningPart;
difficulty: Difficulty; difficulty: Difficulty;
availableTypes: { type: string; label: string }[]; availableTypes: {type: string; label: string}[];
index: number; index: number;
setPart: (part?: ListeningPart) => void; setPart: (part?: ListeningPart) => void;
updatePart: Dispatch<SetStateAction<ListeningPart | undefined>>; updatePart: Dispatch<SetStateAction<ListeningPart | undefined>>;
}) => { }) => {
const [topic, setTopic] = useState(""); const [topic, setTopic] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [types, setTypes] = useState<string[]>([]); const [types, setTypes] = useState<string[]>([]);
const generate = () => { const generate = () => {
const url = new URLSearchParams(); const url = new URLSearchParams();
url.append("difficulty", difficulty); url.append("difficulty", difficulty);
if (topic) url.append("topic", topic); if (topic) url.append("topic", topic);
if (types) types.forEach((t) => url.append("exercises", t)); if (types) types.forEach((t) => url.append("exercises", t));
setPart(undefined); setPart(undefined);
setIsLoading(true); setIsLoading(true);
axios axios
.get( .get(`/api/exam/listening/generate/listening_section_${index}${topic || types ? `?${url.toString()}` : ""}`)
`/api/exam/listening/generate/listening_section_${index}${ .then((result) => {
topic || types ? `?${url.toString()}` : "" playSound(typeof result.data === "string" ? "error" : "check");
}` if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
) setPart(result.data);
.then((result) => { })
playSound(typeof result.data === "string" ? "error" : "check"); .catch((error) => {
if (typeof result.data === "string") console.log(error);
return toast.error( toast.error("Something went wrong!");
"Something went wrong, please try to generate again." })
); .finally(() => setIsLoading(false));
setPart(result.data); };
})
.catch((error) => {
console.log(error);
toast.error("Something went wrong!");
})
.finally(() => setIsLoading(false));
};
const renderExercises = () => { const renderExercises = () => {
return part?.exercises.map((exercise) => { return part?.exercises.map((exercise) => {
switch (exercise.type) { switch (exercise.type) {
case "multipleChoice": case "multipleChoice":
return ( return (
<> <>
<h1>Exercise: Multiple Choice</h1> <h1>Exercise: Multiple Choice</h1>
<MultipleChoiceEdit <MultipleChoiceEdit
exercise={exercise} exercise={exercise}
key={exercise.id} key={exercise.id}
updateExercise={(data: any) => updateExercise={(data: any) =>
updatePart((part?: ListeningPart) => { updatePart((part?: ListeningPart) => {
if (part) { if (part) {
const exercises = part.exercises.map((x) => const exercises = part.exercises.map((x) => (x.id === exercise.id ? {...x, ...data} : x)) as Exercise[];
x.id === exercise.id ? { ...x, ...data } : x const updatedPart = {
) as Exercise[]; ...part,
const updatedPart = { exercises,
...part, } as ListeningPart;
exercises, return updatedPart;
} as ListeningPart; }
return updatedPart;
}
return part; return part;
}) })
} }
/> />
</> </>
); );
// TODO: This might be broken as they all returns the same // TODO: This might be broken as they all returns the same
case "writeBlanks": case "writeBlanks":
return ( return (
<> <>
<h1>Exercise: Write Blanks</h1> <h1>Exercise: Write Blanks</h1>
<WriteBlanksEdit <WriteBlanksEdit
exercise={exercise} exercise={exercise}
key={exercise.id} key={exercise.id}
updateExercise={(data: any) => { updateExercise={(data: any) => {
updatePart((part?: ListeningPart) => { updatePart((part?: ListeningPart) => {
if (part) { if (part) {
return { return {
...part, ...part,
exercises: part.exercises.map((x) => exercises: part.exercises.map((x) => (x.id === exercise.id ? {...x, ...data} : x)),
x.id === exercise.id ? { ...x, ...data } : x } as ListeningPart;
), }
} as ListeningPart;
}
return part; return part;
}); });
}} }}
/> />
</> </>
); );
default: default:
return null; return null;
} }
}); });
}; };
const toggleType = (type: string) => const toggleType = (type: string) => setTypes((prev) => (prev.includes(type) ? [...prev.filter((x) => x !== type)] : [...prev, type]));
setTypes((prev) =>
prev.includes(type)
? [...prev.filter((x) => x !== type)]
: [...prev, type]
);
return ( return (
<Tab.Panel className="w-full bg-ielts-listening/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4"> <Tab.Panel className="w-full bg-ielts-listening/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Exercises</label>
Exercises <div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
</label> {availableTypes.map((x) => (
<div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between"> <span
{availableTypes.map((x) => ( onClick={() => toggleType(x.type)}
<span key={x.type}
onClick={() => toggleType(x.type)} className={clsx(
key={x.type} "px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
className={clsx( "transition duration-300 ease-in-out",
"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer", !types.includes(x.type)
"transition duration-300 ease-in-out", ? "bg-white border-mti-gray-platinum"
!types.includes(x.type) : "bg-ielts-listening/70 border-ielts-listening text-white",
? "bg-white border-mti-gray-platinum" )}>
: "bg-ielts-listening/70 border-ielts-listening text-white" {x.label}
)} </span>
> ))}
{x.label} </div>
</span> </div>
))} <div className="flex gap-4 items-end">
</div> <Input type="text" placeholder="Grand Canyon..." name="topic" label="Topic" onChange={setTopic} roundness="xl" defaultValue={topic} />
</div> <button
<div className="flex gap-4 items-end"> onClick={generate}
<Input disabled={isLoading || types.length === 0}
type="text" data-tip="The passage is currently being generated"
placeholder="Grand Canyon..." className={clsx(
name="topic" "bg-ielts-listening/70 border border-ielts-listening text-white w-full max-w-[200px] rounded-xl h-[70px]",
label="Topic" "hover:bg-ielts-listening disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
onChange={setTopic} "transition ease-in-out duration-300",
roundness="xl" isLoading && "tooltip",
defaultValue={topic} )}>
/> {isLoading ? (
<button <div className="flex items-center justify-center">
onClick={generate} <BsArrowRepeat className="text-white animate-spin" size={25} />
disabled={isLoading || types.length === 0} </div>
data-tip="The passage is currently being generated" ) : (
className={clsx( "Generate"
"bg-ielts-listening/70 border border-ielts-listening text-white w-full max-w-[200px] rounded-xl h-[70px]", )}
"hover:bg-ielts-listening disabled:bg-ielts-listening/40 disabled:cursor-not-allowed", </button>
"transition ease-in-out duration-300", </div>
isLoading && "tooltip" {isLoading && (
)} <div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
> <span className={clsx("loading loading-infinity w-32 text-ielts-listening")} />
{isLoading ? ( <span className={clsx("font-bold text-2xl text-ielts-listening")}>Generating...</span>
<div className="flex items-center justify-center"> </div>
<BsArrowRepeat className="text-white animate-spin" size={25} /> )}
</div> {part && (
) : ( <>
"Generate" <div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide">
)} <div className="flex gap-4">
</button> {part.exercises.map((x) => (
</div> <span className="rounded-xl bg-white border border-ielts-listening p-1 px-4" key={x.id}>
{isLoading && ( {x.type && convertCamelCaseToReadable(x.type)}
<div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center"> </span>
<span ))}
className={clsx( </div>
"loading loading-infinity w-32 text-ielts-listening" {typeof part.text === "string" && <span className="w-full h-96">{part.text.replaceAll("\n\n", " ")}</span>}
)} {typeof part.text !== "string" && (
/> <div className="w-full h-96 flex flex-col gap-2">
<span className={clsx("font-bold text-2xl text-ielts-listening")}> {part.text.conversation.map((x, index) => (
Generating... <span key={index} className="flex gap-1">
</span> <span className="font-semibold">{x.name}:</span>
</div> {x.text.replaceAll("\n\n", " ")}
)} </span>
{part && ( ))}
<> </div>
<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide"> )}
<div className="flex gap-4"> </div>
{part.exercises.map((x) => ( {renderExercises()}
<span </>
className="rounded-xl bg-white border border-ielts-listening p-1 px-4" )}
key={x.id} </Tab.Panel>
> );
{x.type && convertCamelCaseToReadable(x.type)}
</span>
))}
</div>
{typeof part.text === "string" && (
<span className="w-full h-96">
{part.text.replaceAll("\n\n", " ")}
</span>
)}
{typeof part.text !== "string" && (
<div className="w-full h-96 flex flex-col gap-2">
{part.text.conversation.map((x, index) => (
<span key={index} className="flex gap-1">
<span className="font-semibold">{x.name}:</span>
{x.text.replaceAll("\n\n", " ")}
</span>
))}
</div>
)}
</div>
{renderExercises()}
</>
)}
</Tab.Panel>
);
}; };
interface ListeningPart { interface ListeningPart {
exercises: Exercise[]; exercises: Exercise[];
text: text:
| { | {
conversation: { conversation: {
gender: string; gender: string;
name: string; name: string;
text: string; text: string;
voice: string; voice: string;
}[]; }[];
} }
| string; | string;
} }
const ListeningGeneration = () => { const ListeningGeneration = () => {
const [part1, setPart1] = useState<ListeningPart>(); const [part1, setPart1] = useState<ListeningPart>();
const [part2, setPart2] = useState<ListeningPart>(); const [part2, setPart2] = useState<ListeningPart>();
const [part3, setPart3] = useState<ListeningPart>(); const [part3, setPart3] = useState<ListeningPart>();
const [part4, setPart4] = useState<ListeningPart>(); const [part4, setPart4] = useState<ListeningPart>();
const [minTimer, setMinTimer] = useState(30); const [minTimer, setMinTimer] = useState(30);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [resultingExam, setResultingExam] = useState<ListeningExam>(); const [resultingExam, setResultingExam] = useState<ListeningExam>();
const [difficulty, setDifficulty] = useState<Difficulty>( const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
sample(DIFFICULTIES)!
);
useEffect(() => { useEffect(() => {
const part1Timer = part1 ? 5 : 0; const part1Timer = part1 ? 5 : 0;
const part2Timer = part2 ? 8 : 0; const part2Timer = part2 ? 8 : 0;
const part3Timer = part3 ? 8 : 0; const part3Timer = part3 ? 8 : 0;
const part4Timer = part4 ? 9 : 0; const part4Timer = part4 ? 9 : 0;
const sum = part1Timer + part2Timer + part3Timer + part4Timer; const sum = part1Timer + part2Timer + part3Timer + part4Timer;
setMinTimer(sum > 0 ? sum : 5); setMinTimer(sum > 0 ? sum : 5);
}, [part1, part2, part3, part4]); }, [part1, part2, part3, part4]);
const router = useRouter(); const router = useRouter();
const setExams = useExamStore((state) => state.setExams); const setExams = useExamStore((state) => state.setExams);
const setSelectedModules = useExamStore((state) => state.setSelectedModules); const setSelectedModules = useExamStore((state) => state.setSelectedModules);
const submitExam = () => { const submitExam = () => {
const parts = [part1, part2, part3, part4].filter((x) => !!x); const parts = [part1, part2, part3, part4].filter((x) => !!x);
console.log({ parts }); console.log({parts});
if (parts.length === 0) if (parts.length === 0) return toast.error("Please generate at least one section!");
return toast.error("Please generate at least one section!");
setIsLoading(true); setIsLoading(true);
axios axios
.post(`/api/exam/listening/generate/listening`, { .post(`/api/exam/listening/generate/listening`, {
parts, id: generate({minLength: 4, maxLength: 8, min: 3, max: 5, join: " ", formatter: capitalize}),
minTimer, parts,
difficulty, minTimer,
}) difficulty,
.then((result) => { })
playSound("sent"); .then((result) => {
console.log(`Generated Exam ID: ${result.data.id}`); playSound("sent");
toast.success( console.log(`Generated Exam ID: ${result.data.id}`);
"This new exam has been generated successfully! Check the ID in our browser's console." toast.success(`Generated Exam ID: ${result.data.id}`);
); setResultingExam(result.data);
setResultingExam(result.data);
setPart1(undefined); setPart1(undefined);
setPart2(undefined); setPart2(undefined);
setPart3(undefined); setPart3(undefined);
setPart4(undefined); setPart4(undefined);
setDifficulty(sample(DIFFICULTIES)!); setDifficulty(sample(DIFFICULTIES)!);
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);
toast.error("Something went wrong!"); toast.error("Something went wrong!");
}) })
.finally(() => setIsLoading(false)); .finally(() => setIsLoading(false));
}; };
const loadExam = async (examId: string) => { const loadExam = async (examId: string) => {
const exam = await getExamById("listening", examId.trim()); const exam = await getExamById("listening", examId.trim());
if (!exam) { if (!exam) {
toast.error( toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
"Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", toastId: "invalid-exam-id",
{ });
toastId: "invalid-exam-id",
}
);
return; return;
} }
setExams([exam]); setExams([exam]);
setSelectedModules(["listening"]); setSelectedModules(["listening"]);
router.push("/exercises"); router.push("/exercises");
}; };
return ( return (
<> <>
<div className="flex gap-4 w-1/2"> <div className="flex gap-4 w-1/2">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Timer</label>
Timer <Input
</label> type="number"
<Input name="minTimer"
type="number" onChange={(e) => setMinTimer(parseInt(e) < 15 ? 15 : parseInt(e))}
name="minTimer" value={minTimer}
onChange={(e) => setMinTimer(parseInt(e) < 15 ? 15 : parseInt(e))} className="max-w-[300px]"
value={minTimer} />
className="max-w-[300px]" </div>
/> <div className="flex flex-col gap-3 w-full">
</div> <label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
<div className="flex flex-col gap-3 w-full"> <Select
<label className="font-normal text-base text-mti-gray-dim"> options={DIFFICULTIES.map((x) => ({
Difficulty value: x,
</label> label: capitalize(x),
<Select }))}
options={DIFFICULTIES.map((x) => ({ onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
value: x, value={{value: difficulty, label: capitalize(difficulty)}}
label: capitalize(x), disabled={!!part1 || !!part2 || !!part3 || !!part4}
}))} />
onChange={(value) => </div>
value ? setDifficulty(value.value as Difficulty) : null </div>
} <Tab.Group>
value={{ value: difficulty, label: capitalize(difficulty) }} <Tab.List className="flex space-x-1 rounded-xl bg-ielts-listening/20 p-1">
disabled={!!part1 || !!part2 || !!part3 || !!part4} <Tab
/> className={({selected}) =>
</div> clsx(
</div> "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
<Tab.Group> "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-listening/20 p-1"> "transition duration-300 ease-in-out",
<Tab selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
className={({ selected }) => )
clsx( }>
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center", Section 1 {part1 && <BsCheck />}
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2", </Tab>
"transition duration-300 ease-in-out", <Tab
selected className={({selected}) =>
? "bg-white shadow" clsx(
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening" "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
) "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
} "transition duration-300 ease-in-out",
> selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
Section 1 {part1 && <BsCheck />} )
</Tab> }>
<Tab Section 2 {part2 && <BsCheck />}
className={({ selected }) => </Tab>
clsx( <Tab
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center", className={({selected}) =>
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2", clsx(
"transition duration-300 ease-in-out", "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
selected "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
? "bg-white shadow" "transition duration-300 ease-in-out",
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening" selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
) )
} }>
> Section 3 {part3 && <BsCheck />}
Section 2 {part2 && <BsCheck />} </Tab>
</Tab> <Tab
<Tab className={({selected}) =>
className={({ selected }) => clsx(
clsx( "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center", "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2", "transition duration-300 ease-in-out",
"transition duration-300 ease-in-out", selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
selected )
? "bg-white shadow" }>
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening" Section 4 {part4 && <BsCheck />}
) </Tab>
} </Tab.List>
> <Tab.Panels>
Section 3 {part3 && <BsCheck />} {[
</Tab> {
<Tab part: part1,
className={({ selected }) => setPart: setPart1,
clsx( types: [MULTIPLE_CHOICE, WRITE_BLANKS_QUESTIONS, WRITE_BLANKS_FILL, WRITE_BLANKS_FORM],
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center", },
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2", {
"transition duration-300 ease-in-out", part: part2,
selected setPart: setPart2,
? "bg-white shadow" types: [MULTIPLE_CHOICE, WRITE_BLANKS_QUESTIONS],
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening" },
) {
} part: part3,
> setPart: setPart3,
Section 4 {part4 && <BsCheck />} types: [MULTIPLE_CHOICE_3, WRITE_BLANKS_QUESTIONS],
</Tab> },
</Tab.List> {
<Tab.Panels> part: part4,
{[ setPart: setPart4,
{ types: [MULTIPLE_CHOICE, WRITE_BLANKS_QUESTIONS, WRITE_BLANKS_FILL, WRITE_BLANKS_FORM],
part: part1, },
setPart: setPart1, ].map(({part, setPart, types}, index) => (
types: [ <PartTab
MULTIPLE_CHOICE, part={part}
WRITE_BLANKS_QUESTIONS, difficulty={difficulty}
WRITE_BLANKS_FILL, availableTypes={types}
WRITE_BLANKS_FORM, index={index + 1}
], key={index}
}, setPart={setPart}
{ updatePart={setPart}
part: part2, />
setPart: setPart2, ))}
types: [MULTIPLE_CHOICE, WRITE_BLANKS_QUESTIONS], </Tab.Panels>
}, </Tab.Group>
{ <div className="w-full flex justify-end gap-4">
part: part3, {resultingExam && (
setPart: setPart3, <button
types: [MULTIPLE_CHOICE_3, WRITE_BLANKS_QUESTIONS], disabled={isLoading}
}, onClick={() => loadExam(resultingExam.id)}
{ className={clsx(
part: part4, "bg-white border border-ielts-listening text-ielts-listening w-full max-w-[200px] rounded-xl h-[70px] self-end",
setPart: setPart4, "hover:bg-ielts-listening hover:text-white disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
types: [ "transition ease-in-out duration-300",
MULTIPLE_CHOICE, )}>
WRITE_BLANKS_QUESTIONS, Perform Exam
WRITE_BLANKS_FILL, </button>
WRITE_BLANKS_FORM, )}
], <button
}, disabled={(!part1 && !part2 && !part3 && !part4) || isLoading}
].map(({ part, setPart, types }, index) => ( data-tip="Please generate all three passages"
<PartTab onClick={submitExam}
part={part} className={clsx(
difficulty={difficulty} "bg-ielts-listening/70 border border-ielts-listening text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
availableTypes={types} "hover:bg-ielts-listening disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
index={index + 1} "transition ease-in-out duration-300",
key={index} !part1 && !part2 && !part3 && !part4 && "tooltip",
setPart={setPart} )}>
updatePart={setPart} {isLoading ? (
/> <div className="flex items-center justify-center">
))} <BsArrowRepeat className="text-white animate-spin" size={25} />
</Tab.Panels> </div>
</Tab.Group> ) : (
<div className="w-full flex justify-end gap-4"> "Submit"
{resultingExam && ( )}
<button </button>
disabled={isLoading} </div>
onClick={() => loadExam(resultingExam.id)} </>
className={clsx( );
"bg-white border border-ielts-listening text-ielts-listening w-full max-w-[200px] rounded-xl h-[70px] self-end",
"hover:bg-ielts-listening hover:text-white disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300"
)}
>
Perform Exam
</button>
)}
<button
disabled={(!part1 && !part2 && !part3 && !part4) || isLoading}
data-tip="Please generate all three passages"
onClick={submitExam}
className={clsx(
"bg-ielts-listening/70 border border-ielts-listening text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
"hover:bg-ielts-listening disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300",
!part1 && !part2 && !part3 && !part4 && "tooltip"
)}
>
{isLoading ? (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />
</div>
) : (
"Submit"
)}
</button>
</div>
</>
);
}; };
export default ListeningGeneration; export default ListeningGeneration;

28
src/pages/(generation)/ReadingGeneration.tsx
View File

@@ -5,6 +5,7 @@ import useExamStore from "@/stores/examStore";
import {getExamById} from "@/utils/exams"; import {getExamById} from "@/utils/exams";
import {playSound} from "@/utils/sound"; import {playSound} from "@/utils/sound";
import {convertCamelCaseToReadable} from "@/utils/string"; import {convertCamelCaseToReadable} from "@/utils/string";
import {generate} from "random-words";
import {Tab} from "@headlessui/react"; import {Tab} from "@headlessui/react";
import axios from "axios"; import axios from "axios";
import clsx from "clsx"; import clsx from "clsx";
@@ -18,6 +19,7 @@ import FillBlanksEdit from "@/components/Generation/fill.blanks.edit";
import TrueFalseEdit from "@/components/Generation/true.false.edit"; import TrueFalseEdit from "@/components/Generation/true.false.edit";
import WriteBlanksEdit from "@/components/Generation/write.blanks.edit"; import WriteBlanksEdit from "@/components/Generation/write.blanks.edit";
import MatchSentencesEdit from "@/components/Generation/match.sentences.edit"; import MatchSentencesEdit from "@/components/Generation/match.sentences.edit";
import MultipleChoiceEdit from "@/components/Generation/multiple.choice.edit";
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"]; const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
@@ -118,6 +120,28 @@ const PartTab = ({
/> />
</> </>
); );
case "multipleChoice":
return (
<>
<h1>Exercise: True or False</h1>
<MultipleChoiceEdit
exercise={exercise}
key={exercise.id}
updateExercise={(data: any) => {
updatePart((part?: ReadingPart) => {
if (part) {
return {
...part,
exercises: part.exercises.map((x) => (x.id === exercise.id ? {...x, ...data} : x)),
} as ReadingPart;
}
return part;
});
}}
/>
</>
);
case "writeBlanks": case "writeBlanks":
return ( return (
<> <>
@@ -282,7 +306,7 @@ const ReadingGeneration = () => {
isDiagnostic: false, isDiagnostic: false,
minTimer, minTimer,
module: "reading", module: "reading",
id: v4(), id: generate({minLength: 4, maxLength: 8, min: 3, max: 5, join: " ", formatter: capitalize}),
type: "academic", type: "academic",
variant: parts.length === 3 ? "full" : "partial", variant: parts.length === 3 ? "full" : "partial",
difficulty, difficulty,
@@ -293,7 +317,7 @@ const ReadingGeneration = () => {
.then((result) => { .then((result) => {
playSound("sent"); playSound("sent");
console.log(`Generated Exam ID: ${result.data.id}`); console.log(`Generated Exam ID: ${result.data.id}`);
toast.success("This new exam has been generated successfully! Check the ID in our browser's console."); toast.success(`Generated Exam ID: ${result.data.id}`);
setResultingExam(result.data); setResultingExam(result.data);
setPart1(undefined); setPart1(undefined);

823
src/pages/(generation)/SpeakingGeneration.tsx
View File

@@ -1,503 +1,414 @@
import Input from "@/components/Low/Input"; import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select"; import Select from "@/components/Low/Select";
import { import {Difficulty, Exercise, InteractiveSpeakingExercise, SpeakingExam, SpeakingExercise} from "@/interfaces/exam";
Difficulty, import {AVATARS} from "@/resources/speakingAvatars";
Exercise,
InteractiveSpeakingExercise,
SpeakingExam,
SpeakingExercise,
} from "@/interfaces/exam";
import { AVATARS } from "@/resources/speakingAvatars";
import useExamStore from "@/stores/examStore"; import useExamStore from "@/stores/examStore";
import { getExamById } from "@/utils/exams"; import {getExamById} from "@/utils/exams";
import { playSound } from "@/utils/sound"; import {playSound} from "@/utils/sound";
import { convertCamelCaseToReadable } from "@/utils/string"; import {convertCamelCaseToReadable} from "@/utils/string";
import { Tab } from "@headlessui/react"; import {Tab} from "@headlessui/react";
import axios from "axios"; import axios from "axios";
import clsx from "clsx"; import clsx from "clsx";
import { capitalize, sample, uniq } from "lodash"; import {capitalize, sample, uniq} from "lodash";
import moment from "moment"; import moment from "moment";
import { useRouter } from "next/router"; import {useRouter} from "next/router";
import { useEffect, useState, Dispatch, SetStateAction } from "react"; import {generate} from "random-words";
import { BsArrowRepeat, BsCheck } from "react-icons/bs"; import {useEffect, useState, Dispatch, SetStateAction} from "react";
import { toast } from "react-toastify"; import {BsArrowRepeat, BsCheck} from "react-icons/bs";
import { v4 } from "uuid"; import {toast} from "react-toastify";
import {v4} from "uuid";
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"]; const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
const PartTab = ({ const PartTab = ({
part, part,
index, index,
difficulty, difficulty,
setPart, setPart,
updatePart, updatePart,
}: { }: {
part?: SpeakingPart; part?: SpeakingPart;
difficulty: Difficulty; difficulty: Difficulty;
index: number; index: number;
setPart: (part?: SpeakingPart) => void; setPart: (part?: SpeakingPart) => void;
updatePart: Dispatch<SetStateAction<SpeakingPart | undefined>>; updatePart: Dispatch<SetStateAction<SpeakingPart | undefined>>;
}) => { }) => {
const [gender, setGender] = useState<"male" | "female">("male"); const [gender, setGender] = useState<"male" | "female">("male");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const generate = () => { const generate = () => {
setPart(undefined); setPart(undefined);
setIsLoading(true); setIsLoading(true);
const url = new URLSearchParams(); const url = new URLSearchParams();
url.append("difficulty", difficulty); url.append("difficulty", difficulty);
axios axios
.get( .get(`/api/exam/speaking/generate/speaking_task_${index}?${url.toString()}`)
`/api/exam/speaking/generate/speaking_task_${index}?${url.toString()}` .then((result) => {
) playSound(typeof result.data === "string" ? "error" : "check");
.then((result) => { if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
playSound(typeof result.data === "string" ? "error" : "check"); console.log(result.data);
if (typeof result.data === "string") setPart(result.data);
return toast.error( })
"Something went wrong, please try to generate again." .catch((error) => {
); console.log(error);
console.log(result.data); toast.error("Something went wrong!");
setPart(result.data); })
}) .finally(() => setIsLoading(false));
.catch((error) => { };
console.log(error);
toast.error("Something went wrong!");
})
.finally(() => setIsLoading(false));
};
const generateVideo = async () => { const generateVideo = async () => {
if (!part) if (!part) return toast.error("Please generate the first part before generating the video!");
return toast.error( toast.info("This will take quite a while, please do not leave this page or close the tab/window.");
"Please generate the first part before generating the video!"
);
toast.info(
"This will take quite a while, please do not leave this page or close the tab/window."
);
const avatar = sample(AVATARS.filter((x) => x.gender === gender)); const avatar = sample(AVATARS.filter((x) => x.gender === gender));
setIsLoading(true); setIsLoading(true);
const initialTime = moment(); const initialTime = moment();
axios axios
.post(`/api/exam/speaking/generate/speaking/generate_video_${index}`, { .post(`/api/exam/speaking/generate/speaking/generate_video_${index}`, {
...part, ...part,
avatar: avatar?.id, avatar: avatar?.id,
}) })
.then((result) => { .then((result) => {
const isError = const isError = typeof result.data === "string" || moment().diff(initialTime, "seconds") < 60;
typeof result.data === "string" ||
moment().diff(initialTime, "seconds") < 60;
playSound(isError ? "error" : "check"); playSound(isError ? "error" : "check");
console.log(result.data); console.log(result.data);
if (isError) if (isError) return toast.error("Something went wrong, please try to generate the video again.");
return toast.error( setPart({
"Something went wrong, please try to generate the video again." ...part,
); result: {...result.data, topic: part?.topic},
setPart({ gender,
...part, avatar,
result: { ...result.data, topic: part?.topic }, });
gender, })
avatar, .catch((e) => {
}); toast.error("Something went wrong!");
}) console.log(e);
.catch((e) => { })
toast.error("Something went wrong!"); .finally(() => setIsLoading(false));
console.log(e); };
})
.finally(() => setIsLoading(false));
};
return ( return (
<Tab.Panel className="w-full bg-ielts-speaking/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4"> <Tab.Panel className="w-full bg-ielts-speaking/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Gender</label>
Gender <Select
</label> options={[
<Select {value: "male", label: "Male"},
options={[ {value: "female", label: "Female"},
{ value: "male", label: "Male" }, ]}
{ value: "female", label: "Female" }, value={{value: gender, label: capitalize(gender)}}
]} onChange={(value) => (value ? setGender(value.value as typeof gender) : null)}
value={{ value: gender, label: capitalize(gender) }} disabled={isLoading}
onChange={(value) => />
value ? setGender(value.value as typeof gender) : null </div>
} <div className="flex gap-4 items-end">
disabled={isLoading} <button
/> onClick={generate}
</div> disabled={isLoading}
<div className="flex gap-4 items-end"> data-tip="The passage is currently being generated"
<button className={clsx(
onClick={generate} "bg-ielts-speaking/70 border border-ielts-speaking text-white w-full rounded-xl h-[70px]",
disabled={isLoading} "hover:bg-ielts-speaking disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
data-tip="The passage is currently being generated" "transition ease-in-out duration-300",
className={clsx( isLoading && "tooltip",
"bg-ielts-speaking/70 border border-ielts-speaking text-white w-full rounded-xl h-[70px]", )}>
"hover:bg-ielts-speaking disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed", {isLoading ? (
"transition ease-in-out duration-300", <div className="flex items-center justify-center">
isLoading && "tooltip" <BsArrowRepeat className="text-white animate-spin" size={25} />
)} </div>
> ) : (
{isLoading ? ( "Generate"
<div className="flex items-center justify-center"> )}
<BsArrowRepeat className="text-white animate-spin" size={25} /> </button>
</div> <button
) : ( onClick={generateVideo}
"Generate" disabled={isLoading || !part}
)} data-tip="The passage is currently being generated"
</button> className={clsx(
<button "bg-ielts-speaking/70 border border-ielts-speaking text-white w-full rounded-xl h-[70px]",
onClick={generateVideo} "hover:bg-ielts-speaking disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
disabled={isLoading || !part} "transition ease-in-out duration-300",
data-tip="The passage is currently being generated" isLoading && "tooltip",
className={clsx( )}>
"bg-ielts-speaking/70 border border-ielts-speaking text-white w-full rounded-xl h-[70px]", {isLoading ? (
"hover:bg-ielts-speaking disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed", <div className="flex items-center justify-center">
"transition ease-in-out duration-300", <BsArrowRepeat className="text-white animate-spin" size={25} />
isLoading && "tooltip" </div>
)} ) : (
> "Generate Video"
{isLoading ? ( )}
<div className="flex items-center justify-center"> </button>
<BsArrowRepeat className="text-white animate-spin" size={25} /> </div>
</div> {isLoading && (
) : ( <div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
"Generate Video" <span className={clsx("loading loading-infinity w-32 text-ielts-speaking")} />
)} <span className={clsx("font-bold text-2xl text-ielts-speaking")}>Generating...</span>
</button> </div>
</div> )}
{isLoading && ( {part && !isLoading && (
<div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center"> <div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide h-96">
<span <h3 className="text-xl font-semibold">
className={clsx( {!!part.first_topic && !!part.second_topic ? `${part.first_topic} & ${part.second_topic}` : part.topic}
"loading loading-infinity w-32 text-ielts-speaking" </h3>
)} {part.question && <span className="w-full">{part.question}</span>}
/> {part.questions && (
<span className={clsx("font-bold text-2xl text-ielts-speaking")}> <div className="flex flex-col gap-1">
Generating... {part.questions.map((question, index) => (
</span> <span className="w-full" key={index}>
</div> - {question}
)} </span>
{part && !isLoading && ( ))}
<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide h-96"> </div>
<h3 className="text-xl font-semibold"> )}
{!!part.first_topic && !!part.second_topic {part.prompts && (
? `${part.first_topic} & ${part.second_topic}` <div className="flex flex-col gap-1">
: part.topic} <span className="font-medium">You should talk about the following things:</span>
</h3> {part.prompts.map((prompt, index) => (
{part.question && <span className="w-full">{part.question}</span>} <span className="w-full" key={index}>
{part.questions && ( - {prompt}
<div className="flex flex-col gap-1"> </span>
{part.questions.map((question, index) => ( ))}
<span className="w-full" key={index}> </div>
- {question} )}
</span> {part.result && <span className="font-bold mt-4">Video Generated: ✅</span>}
))} {part.avatar && part.gender && (
</div> <span>
)} <b>Instructor:</b> {part.avatar.name} - {capitalize(part.avatar.gender)}
{part.prompts && ( </span>
<div className="flex flex-col gap-1"> )}
<span className="font-medium"> {part.questions?.map((question, index) => (
You should talk about the following things: <Input
</span> key={index}
{part.prompts.map((prompt, index) => ( type="text"
<span className="w-full" key={index}> label="Question"
- {prompt} name="question"
</span> required
))} value={question}
</div> onChange={(value) =>
)} updatePart((part?: SpeakingPart) => {
{part.result && ( if (part) {
<span className="font-bold mt-4">Video Generated: ✅</span> return {
)} ...part,
{part.avatar && part.gender && ( questions: part.questions?.map((x, xIndex) => (xIndex === index ? value : x)),
<span> } as SpeakingPart;
<b>Instructor:</b> {part.avatar.name} -{" "} }
{capitalize(part.avatar.gender)}
</span>
)}
{part.questions?.map((question, index) => (
<Input
key={index}
type="text"
label="Question"
name="question"
required
value={question}
onChange={
(value) =>
updatePart((part?: SpeakingPart) => {
if (part) {
return {
...part,
questions: part.questions?.map((x, xIndex) =>
xIndex === index ? value : x
),
} as SpeakingPart;
}
return part; return part;
}) })
} }
/> />
))} ))}
</div> </div>
)} )}
</Tab.Panel> </Tab.Panel>
); );
}; };
interface SpeakingPart { interface SpeakingPart {
prompts?: string[]; prompts?: string[];
question?: string; question?: string;
questions?: string[]; questions?: string[];
topic: string; topic: string;
first_topic?: string; first_topic?: string;
second_topic?: string; second_topic?: string;
result?: SpeakingExercise | InteractiveSpeakingExercise; result?: SpeakingExercise | InteractiveSpeakingExercise;
gender?: "male" | "female"; gender?: "male" | "female";
avatar?: (typeof AVATARS)[number]; avatar?: (typeof AVATARS)[number];
} }
const SpeakingGeneration = () => { const SpeakingGeneration = () => {
const [part1, setPart1] = useState<SpeakingPart>(); const [part1, setPart1] = useState<SpeakingPart>();
const [part2, setPart2] = useState<SpeakingPart>(); const [part2, setPart2] = useState<SpeakingPart>();
const [part3, setPart3] = useState<SpeakingPart>(); const [part3, setPart3] = useState<SpeakingPart>();
const [minTimer, setMinTimer] = useState(14); const [minTimer, setMinTimer] = useState(14);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [resultingExam, setResultingExam] = useState<SpeakingExam>(); const [resultingExam, setResultingExam] = useState<SpeakingExam>();
const [difficulty, setDifficulty] = useState<Difficulty>( const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
sample(DIFFICULTIES)!
);
useEffect(() => { useEffect(() => {
const parts = [part1, part2, part3].filter((x) => !!x); const parts = [part1, part2, part3].filter((x) => !!x);
setMinTimer(parts.length === 0 ? 5 : parts.length * 5); setMinTimer(parts.length === 0 ? 5 : parts.length * 5);
}, [part1, part2, part3]); }, [part1, part2, part3]);
const router = useRouter(); const router = useRouter();
const setExams = useExamStore((state) => state.setExams); const setExams = useExamStore((state) => state.setExams);
const setSelectedModules = useExamStore((state) => state.setSelectedModules); const setSelectedModules = useExamStore((state) => state.setSelectedModules);
const submitExam = () => { const submitExam = () => {
if (!part1?.result && !part2?.result && !part3?.result) if (!part1?.result && !part2?.result && !part3?.result) return toast.error("Please generate at least one task!");
return toast.error("Please generate at least one task!");
setIsLoading(true); setIsLoading(true);
const genders = [part1?.gender, part2?.gender, part3?.gender].filter( const genders = [part1?.gender, part2?.gender, part3?.gender].filter((x) => !!x);
(x) => !!x
);
const exercises = [part1?.result, part2?.result, part3?.result] const exercises = [part1?.result, part2?.result, part3?.result]
.filter((x) => !!x) .filter((x) => !!x)
.map((x) => ({ .map((x) => ({
...x, ...x,
first_title: first_title: x?.type === "interactiveSpeaking" ? x.first_topic : undefined,
x?.type === "interactiveSpeaking" ? x.first_topic : undefined, second_title: x?.type === "interactiveSpeaking" ? x.second_topic : undefined,
second_title: }));
x?.type === "interactiveSpeaking" ? x.second_topic : undefined,
}));
const exam: SpeakingExam = { const exam: SpeakingExam = {
id: v4(), id: generate({minLength: 4, maxLength: 8, min: 3, max: 5, join: " ", formatter: capitalize}),
isDiagnostic: false, isDiagnostic: false,
exercises: exercises as ( exercises: exercises as (SpeakingExercise | InteractiveSpeakingExercise)[],
| SpeakingExercise minTimer,
| InteractiveSpeakingExercise variant: minTimer >= 14 ? "full" : "partial",
)[], module: "speaking",
minTimer, instructorGender: genders.every((x) => x === "male") ? "male" : genders.every((x) => x === "female") ? "female" : "varied",
variant: minTimer >= 14 ? "full" : "partial", };
module: "speaking",
instructorGender: genders.every((x) => x === "male")
? "male"
: genders.every((x) => x === "female")
? "female"
: "varied",
};
axios axios
.post(`/api/exam/speaking`, exam) .post(`/api/exam/speaking`, exam)
.then((result) => { .then((result) => {
playSound("sent"); playSound("sent");
console.log(`Generated Exam ID: ${result.data.id}`); console.log(`Generated Exam ID: ${result.data.id}`);
toast.success( toast.success(`Generated Exam ID: ${result.data.id}`);
"This new exam has been generated successfully! Check the ID in our browser's console." setResultingExam(result.data);
);
setResultingExam(result.data);
setPart1(undefined); setPart1(undefined);
setPart2(undefined); setPart2(undefined);
setPart3(undefined); setPart3(undefined);
setDifficulty(sample(DIFFICULTIES)!); setDifficulty(sample(DIFFICULTIES)!);
setMinTimer(14); setMinTimer(14);
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);
toast.error( toast.error("Something went wrong while generating, please try again later.");
"Something went wrong while generating, please try again later." })
); .finally(() => setIsLoading(false));
}) };
.finally(() => setIsLoading(false));
};
const loadExam = async (examId: string) => { const loadExam = async (examId: string) => {
const exam = await getExamById("speaking", examId.trim()); const exam = await getExamById("speaking", examId.trim());
if (!exam) { if (!exam) {
toast.error( toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
"Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", toastId: "invalid-exam-id",
{ });
toastId: "invalid-exam-id",
}
);
return; return;
} }
setExams([exam]); setExams([exam]);
setSelectedModules(["speaking"]); setSelectedModules(["speaking"]);
router.push("/exercises"); router.push("/exercises");
}; };
return ( return (
<> <>
<div className="flex gap-4 w-1/2"> <div className="flex gap-4 w-1/2">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Timer</label>
Timer <Input
</label> type="number"
<Input name="minTimer"
type="number" onChange={(e) => setMinTimer(parseInt(e) < 5 ? 5 : parseInt(e))}
name="minTimer" value={minTimer}
onChange={(e) => setMinTimer(parseInt(e) < 5 ? 5 : parseInt(e))} className="max-w-[300px]"
value={minTimer} />
className="max-w-[300px]" </div>
/> <div className="flex flex-col gap-3 w-full">
</div> <label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
<div className="flex flex-col gap-3 w-full"> <Select
<label className="font-normal text-base text-mti-gray-dim"> options={DIFFICULTIES.map((x) => ({
Difficulty value: x,
</label> label: capitalize(x),
<Select }))}
options={DIFFICULTIES.map((x) => ({ onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
value: x, value={{value: difficulty, label: capitalize(difficulty)}}
label: capitalize(x), disabled={!!part1 || !!part2 || !!part3}
}))} />
onChange={(value) => </div>
value ? setDifficulty(value.value as Difficulty) : null </div>
}
value={{ value: difficulty, label: capitalize(difficulty) }}
disabled={!!part1 || !!part2 || !!part3}
/>
</div>
</div>
<Tab.Group> <Tab.Group>
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-speaking/20 p-1"> <Tab.List className="flex space-x-1 rounded-xl bg-ielts-speaking/20 p-1">
<Tab <Tab
className={({ selected }) => className={({selected}) =>
clsx( clsx(
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center", "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2", "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out", "transition duration-300 ease-in-out",
selected selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
? "bg-white shadow" )
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking" }>
) Exercise 1 {part1 && part1.result && <BsCheck />}
} </Tab>
> <Tab
Exercise 1 {part1 && part1.result && <BsCheck />} className={({selected}) =>
</Tab> clsx(
<Tab "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center",
className={({ selected }) => "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
clsx( "transition duration-300 ease-in-out",
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center", selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2", )
"transition duration-300 ease-in-out", }>
selected Exercise 2 {part2 && part2.result && <BsCheck />}
? "bg-white shadow" </Tab>
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking" <Tab
) className={({selected}) =>
} clsx(
> "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center",
Exercise 2 {part2 && part2.result && <BsCheck />} "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
</Tab> "transition duration-300 ease-in-out",
<Tab selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
className={({ selected }) => )
clsx( }>
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center", Interactive {part3 && part3.result && <BsCheck />}
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2", </Tab>
"transition duration-300 ease-in-out", </Tab.List>
selected <Tab.Panels>
? "bg-white shadow" {[
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking" {part: part1, setPart: setPart1},
) {part: part2, setPart: setPart2},
} {part: part3, setPart: setPart3},
> ].map(({part, setPart}, index) => (
Interactive {part3 && part3.result && <BsCheck />} <PartTab difficulty={difficulty} part={part} index={index + 1} key={index} setPart={setPart} updatePart={setPart} />
</Tab> ))}
</Tab.List> </Tab.Panels>
<Tab.Panels> </Tab.Group>
{[ <div className="w-full flex justify-end gap-4">
{ part: part1, setPart: setPart1 }, {resultingExam && (
{ part: part2, setPart: setPart2 }, <button
{ part: part3, setPart: setPart3 }, disabled={isLoading}
].map(({ part, setPart }, index) => ( onClick={() => loadExam(resultingExam.id)}
<PartTab className={clsx(
difficulty={difficulty} "bg-white border border-ielts-speaking text-ielts-speaking w-full max-w-[200px] rounded-xl h-[70px] self-end",
part={part} "hover:bg-ielts-speaking hover:text-white disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
index={index + 1} "transition ease-in-out duration-300",
key={index} )}>
setPart={setPart} Perform Exam
updatePart={setPart} </button>
/> )}
))} <button
</Tab.Panels> disabled={(!part1?.result && !part2?.result && !part3?.result) || isLoading}
</Tab.Group> data-tip="Please generate all three passages"
<div className="w-full flex justify-end gap-4"> onClick={submitExam}
{resultingExam && ( className={clsx(
<button "bg-ielts-speaking/70 border border-ielts-speaking text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
disabled={isLoading} "hover:bg-ielts-speaking disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
onClick={() => loadExam(resultingExam.id)} "transition ease-in-out duration-300",
className={clsx( !part1 && !part2 && !part3 && "tooltip",
"bg-white border border-ielts-speaking text-ielts-speaking w-full max-w-[200px] rounded-xl h-[70px] self-end", )}>
"hover:bg-ielts-speaking hover:text-white disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed", {isLoading ? (
"transition ease-in-out duration-300" <div className="flex items-center justify-center">
)} <BsArrowRepeat className="text-white animate-spin" size={25} />
> </div>
Perform Exam ) : (
</button> "Submit"
)} )}
<button </button>
disabled={ </div>
(!part1?.result && !part2?.result && !part3?.result) || isLoading </>
} );
data-tip="Please generate all three passages"
onClick={submitExam}
className={clsx(
"bg-ielts-speaking/70 border border-ielts-speaking text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
"hover:bg-ielts-speaking disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300",
!part1 && !part2 && !part3 && "tooltip"
)}
>
{isLoading ? (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />
</div>
) : (
"Submit"
)}
</button>
</div>
</>
);
}; };
export default SpeakingGeneration; export default SpeakingGeneration;

4
src/pages/(generation)/WritingGeneration.tsx
View File

@@ -9,6 +9,7 @@ import axios from "axios";
import clsx from "clsx"; import clsx from "clsx";
import {capitalize, sample} from "lodash"; import {capitalize, sample} from "lodash";
import {useRouter} from "next/router"; import {useRouter} from "next/router";
import {generate} from "random-words";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import {BsArrowRepeat, BsCheck} from "react-icons/bs"; import {BsArrowRepeat, BsCheck} from "react-icons/bs";
import {toast} from "react-toastify"; import {toast} from "react-toastify";
@@ -151,7 +152,7 @@ const WritingGeneration = () => {
minTimer, minTimer,
module: "writing", module: "writing",
exercises: [...(exercise1 ? [exercise1] : []), ...(exercise2 ? [exercise2] : [])], exercises: [...(exercise1 ? [exercise1] : []), ...(exercise2 ? [exercise2] : [])],
id: v4(), id: generate({minLength: 4, maxLength: 8, min: 3, max: 5, join: " ", formatter: capitalize}),
variant: exercise1 && exercise2 ? "full" : "partial", variant: exercise1 && exercise2 ? "full" : "partial",
difficulty, difficulty,
}; };
@@ -160,6 +161,7 @@ const WritingGeneration = () => {
.post(`/api/exam/writing`, exam) .post(`/api/exam/writing`, exam)
.then((result) => { .then((result) => {
console.log(`Generated Exam ID: ${result.data.id}`); console.log(`Generated Exam ID: ${result.data.id}`);
toast.success(`Generated Exam ID: ${result.data.id}`);
playSound("sent"); playSound("sent");
toast.success("This new exam has been generated successfully! Check the ID in our browser's console."); toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
setResultingExam(result.data); setResultingExam(result.data);

2
src/pages/api/assignments/[id]/index.ts
View File

@@ -4,7 +4,7 @@ import {app} from "@/firebase";
import {getFirestore, collection, getDocs, query, where, setDoc, doc, getDoc, deleteDoc} from "firebase/firestore"; import {getFirestore, collection, getDocs, query, where, setDoc, doc, getDoc, deleteDoc} from "firebase/firestore";
import {withIronSessionApiRoute} from "iron-session/next"; import {withIronSessionApiRoute} from "iron-session/next";
import {sessionOptions} from "@/lib/session"; import {sessionOptions} from "@/lib/session";
import {uuidv4} from "@firebase/util";
const db = getFirestore(app); const db = getFirestore(app);

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

@@ -102,6 +102,7 @@ const generateExams = async (
async function POST(req: NextApiRequest, res: NextApiResponse) { async function POST(req: NextApiRequest, res: NextApiResponse) {
const { const {
examIDs,
selectedModules, selectedModules,
assignees, assignees,
// Generate multiple true would generate an unique exam for each user // Generate multiple true would generate an unique exam for each user
@@ -111,6 +112,7 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
instructorGender, instructorGender,
...body ...body
} = req.body as { } = req.body as {
examIDs?: {id: string; module: Module}[];
selectedModules: Module[]; selectedModules: Module[];
assignees: string[]; assignees: string[];
generateMultiple: Boolean; generateMultiple: Boolean;
@@ -121,7 +123,9 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
instructorGender?: InstructorGender; instructorGender?: InstructorGender;
}; };
const exams: ExamWithUser[] = await generateExams(generateMultiple, selectedModules, assignees, variant, instructorGender); const exams: ExamWithUser[] = !!examIDs
? examIDs.flatMap((e) => assignees.map((a) => ({...e, assignee: a})))
: await generateExams(generateMultiple, selectedModules, assignees, variant, instructorGender);
if (exams.length === 0) { if (exams.length === 0) {
res.status(400).json({ok: false, error: "No exams found for the selected modules"}); res.status(400).json({ok: false, error: "No exams found for the selected modules"});

37
src/pages/permissions/[id].tsx
View File

@@ -14,10 +14,11 @@ import Select from "@/components/Low/Select";
import Button from "@/components/Low/Button"; import Button from "@/components/Low/Button";
import axios from "axios"; import axios from "axios";
import { toast, ToastContainer } from "react-toastify"; import { toast, ToastContainer } from "react-toastify";
import {Type as UserType} from '@/interfaces/user'
interface BasicUser { interface BasicUser {
id: string; id: string;
name: string; name: string;
type: UserType
} }
interface PermissionWithBasicUsers { interface PermissionWithBasicUsers {
@@ -61,9 +62,11 @@ export const getServerSideProps = withIronSessionSsr(async (context) => {
const permission: Permission = await getPermissionDoc(params.id as string); const permission: Permission = await getPermissionDoc(params.id as string);
const allUserData: User[] = await getUsers(); const allUserData: User[] = await getUsers();
const users = allUserData.map((u) => ({ const users = allUserData.map((u) => ({
id: u.id, id: u.id,
name: u.name, name: u.name,
type: u.type
})) as BasicUser[]; })) as BasicUser[];
// const res = await fetch("api/permissions"); // const res = await fetch("api/permissions");
@@ -101,16 +104,15 @@ interface Props {
} }
export default function Page(props: Props) { export default function Page(props: Props) {
console.log("Props", props);
const { permission, user, users } = props; const { permission, user, users } = props;
const [selectedUsers, setSelectedUsers] = useState<string[]>(() => const [selectedUsers, setSelectedUsers] = useState<string[]>(() =>
permission.users.map((u) => u.id) permission.users.map((u) => u.id)
); );
const onChange = (value: any) => { const onChange = (value: any) => {
console.log("value", value);
setSelectedUsers((prev) => { setSelectedUsers((prev) => {
if (value?.value) { if (value?.value) {
return [...prev, value?.value]; return [...prev, value?.value];
@@ -123,7 +125,7 @@ export default function Page(props: Props) {
}; };
const update = async () => { const update = async () => {
console.log("update", selectedUsers);
try { try {
await axios.patch(`/api/permissions/${permission.id}`, { await axios.patch(`/api/permissions/${permission.id}`, {
users: selectedUsers, users: selectedUsers,
@@ -156,24 +158,25 @@ export default function Page(props: Props) {
options={users options={users
.filter((u) => !selectedUsers.includes(u.id)) .filter((u) => !selectedUsers.includes(u.id))
.map((u) => ({ .map((u) => ({
label: u.name, label: `${u?.type}-${u?.name}`,
value: u.id, value: u.id,
}))} }))}
onChange={onChange} onChange={onChange}
/> />
<Button onClick={update}>Update</Button> <Button onClick={update}>Update</Button>
</div> </div>
<div className="flex flex-col gap-3"> <div className="flex flex-row justify-between">
<div className="flex flex-col gap-3">
<h2>Blacklisted Users</h2> <h2>Blacklisted Users</h2>
<div className="flex gap-3 flex-wrap"> <div className="flex gap-3 flex-wrap">
{selectedUsers.map((userId) => { {selectedUsers.map((userId) => {
const name = users.find((u) => u.id === userId)?.name; const user = users.find((u) => u.id === userId);
return ( return (
<div <div
className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4" className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4"
key={userId} key={userId}
> >
<span className="text-base">{name}</span> <span className="text-base first-letter:uppercase">{user?.type}-{user?.name}</span>
<BsTrash <BsTrash
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
onClick={() => removeUser(userId)} onClick={() => removeUser(userId)}
@@ -184,6 +187,22 @@ export default function Page(props: Props) {
})} })}
</div> </div>
</div> </div>
<div className="flex flex-col gap-3">
<h2>Whitelisted Users</h2>
<div className="flex flex-col gap-3 flex-wrap">
{users.filter(user => !selectedUsers.includes(user.id)).map((user) => {
return (
<div
className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4"
key={user.id}
>
<span className="text-base first-letter:uppercase">{user?.type}-{user?.name}</span>
</div>
);
})}
</div>
</div>
</div>
</Layout> </Layout>
</> </>
); );

18
src/pages/permissions/index.tsx
View File

@@ -7,7 +7,7 @@ import { Permission } from "@/interfaces/permissions";
import { getPermissionDocs } from "@/utils/permissions.be"; import { getPermissionDocs } from "@/utils/permissions.be";
import { User } from "@/interfaces/user"; import { User } from "@/interfaces/user";
import Layout from "@/components/High/Layout"; import Layout from "@/components/High/Layout";
import Link from "next/link"; import PermissionList from '@/components/PermissionList'
export const getServerSideProps = withIronSessionSsr(async ({ req }) => { export const getServerSideProps = withIronSessionSsr(async ({ req }) => {
const user = req.session.user; const user = req.session.user;
@@ -33,7 +33,6 @@ export const getServerSideProps = withIronSessionSsr(async ({ req }) => {
// Fetch data from external API // Fetch data from external API
const permissions: Permission[] = await getPermissionDocs(); const permissions: Permission[] = await getPermissionDocs();
console.log("Permissions", permissions);
// const res = await fetch("api/permissions"); // const res = await fetch("api/permissions");
// const permissions: Permission[] = await res.json(); // const permissions: Permission[] = await res.json();
@@ -56,7 +55,6 @@ interface Props {
} }
export default function Page(props: Props) { export default function Page(props: Props) {
console.log("Props", props);
const { permissions, user } = props; const { permissions, user } = props;
@@ -74,19 +72,7 @@ export default function Page(props: Props) {
<Layout user={user} className="gap-6"> <Layout user={user} className="gap-6">
<h1 className="text-2xl font-semibold">Permissions</h1> <h1 className="text-2xl font-semibold">Permissions</h1>
<div className="flex gap-3 flex-wrap"> <div className="flex gap-3 flex-wrap">
{permissions.map((permission: Permission) => { <PermissionList permissions={permissions} />
const id = permission.id as string;
const type = permission.type as string;
return (
<Link href={`/permissions/${id}`} key={id}>
<div className="card bg-primary text-primary-content">
<div className="card-body">
<h1 className="card-title">{type}</h1>
</div>
</div>
</Link>
);
})}
</div> </div>
</Layout> </Layout>
</> </>

4
src/pages/record.tsx
View File

@@ -285,7 +285,7 @@ export default function History({ user }: { user: User }) {
label: `${x.name} - ${x.email}`, label: `${x.name} - ${x.email}`,
}))} }))}
value={selectedUserSelectValue} value={selectedUserSelectValue}
onChange={(value) => setStatsUserId(value?.value)} onChange={(value) => setStatsUserId(value?.value!)}
styles={{ styles={{
menuPortal: (base) => ({ ...base, zIndex: 9999 }), menuPortal: (base) => ({ ...base, zIndex: 9999 }),
option: (styles, state) => ({ option: (styles, state) => ({
@@ -309,7 +309,7 @@ export default function History({ user }: { user: User }) {
label: `${x.name} - ${x.email}`, label: `${x.name} - ${x.email}`,
}))} }))}
value={selectedUserSelectValue} value={selectedUserSelectValue}
onChange={(value) => setStatsUserId(value?.value)} onChange={(value) => setStatsUserId(value?.value!)}
styles={{ styles={{
menuPortal: (base) => ({ ...base, zIndex: 9999 }), menuPortal: (base) => ({ ...base, zIndex: 9999 }),
option: (styles, state) => ({ option: (styles, state) => ({

58
src/pages/tickets.tsx
View File

@@ -70,27 +70,33 @@ const SOURCE_OPTIONS = [
type CustomStatus = TicketStatus | "all" | "pending"; type CustomStatus = TicketStatus | "all" | "pending";
const STATUS_OPTIONS = [{ const STATUS_OPTIONS = [
label: 'Pending', {
value: 'pending', label: "Pending",
filter: (x: Ticket) => x.status !== 'completed', value: "pending",
}, { filter: (x: Ticket) => x.status !== "completed",
label: 'All', },
value: 'all', {
filter: (x: Ticket) => true, label: "All",
}, { value: "all",
label: 'Completed', filter: (x: Ticket) => true,
value: 'completed', },
filter: (x: Ticket) => x.status === 'completed', {
}, { label: "Completed",
label: 'In Progress', value: "completed",
value: 'in-progress', filter: (x: Ticket) => x.status === "completed",
filter: (x: Ticket) => x.status === 'in-progress', },
}, { {
label: 'Submitted', label: "In Progress",
value: 'submitted', value: "in-progress",
filter: (x: Ticket) => x.status === 'submitted', filter: (x: Ticket) => x.status === "in-progress",
}] },
{
label: "Submitted",
value: "submitted",
filter: (x: Ticket) => x.status === "submitted",
},
];
export default function Tickets() { export default function Tickets() {
const [filteredTickets, setFilteredTickets] = useState<Ticket[]>([]); const [filteredTickets, setFilteredTickets] = useState<Ticket[]>([]);
@@ -101,7 +107,7 @@ export default function Tickets() {
const [dateSorting, setDateSorting] = useState<"asc" | "desc">("desc"); const [dateSorting, setDateSorting] = useState<"asc" | "desc">("desc");
const [typeFilter, setTypeFilter] = useState<TicketType>(); const [typeFilter, setTypeFilter] = useState<TicketType>();
const [statusFilter, setStatusFilter] = useState<CustomStatus>('pending'); const [statusFilter, setStatusFilter] = useState<CustomStatus>("pending");
const {user} = useUser({redirectTo: "/login"}); const {user} = useUser({redirectTo: "/login"});
const {users} = useUsers(); const {users} = useUsers();
@@ -116,7 +122,7 @@ export default function Tickets() {
if (user?.type === "agent") filters.push((x: Ticket) => x.assignedTo === user.id); if (user?.type === "agent") filters.push((x: Ticket) => x.assignedTo === user.id);
if (typeFilter) filters.push((x: Ticket) => x.type === typeFilter); if (typeFilter) filters.push((x: Ticket) => x.type === typeFilter);
if (statusFilter) { if (statusFilter) {
const filter = STATUS_OPTIONS.find(x => x.value === statusFilter)?.filter; const filter = STATUS_OPTIONS.find((x) => x.value === statusFilter)?.filter;
if (filter) filters.push(filter); if (filter) filters.push(filter);
} }
if (assigneeFilter) filters.push((x: Ticket) => x.assignedTo === assigneeFilter); if (assigneeFilter) filters.push((x: Ticket) => x.assignedTo === assigneeFilter);
@@ -242,9 +248,7 @@ export default function Tickets() {
<label className="text-mti-gray-dim text-base font-normal">Status</label> <label className="text-mti-gray-dim text-base font-normal">Status</label>
<Select <Select
options={STATUS_OPTIONS} options={STATUS_OPTIONS}
value={ value={STATUS_OPTIONS.find((x) => x.value === statusFilter)}
STATUS_OPTIONS.find((x) => x.value === statusFilter)
}
onChange={(value) => setStatusFilter((value?.value as TicketStatus) ?? undefined)} onChange={(value) => setStatusFilter((value?.value as TicketStatus) ?? undefined)}
isClearable isClearable
placeholder="Status..." placeholder="Status..."
@@ -278,7 +282,7 @@ export default function Tickets() {
disabled={user.type === "agent"} disabled={user.type === "agent"}
value={getAssigneeValue()} value={getAssigneeValue()}
onChange={(value) => onChange={(value) =>
value ? setAssigneeFilter(value.value === "me" ? user.id : value.value) : setAssigneeFilter(undefined) value ? setAssigneeFilter(value.value === "me" ? user.id : value.value!) : setAssigneeFilter(undefined)
} }
placeholder="Assignee..." placeholder="Assignee..."
isClearable isClearable

10
yarn.lock
View File

@@ -718,6 +718,13 @@
dependencies: dependencies:
tslib "^2.1.0" tslib "^2.1.0"
"@firebase/util@^1.9.7":
version "1.9.7"
resolved "https://registry.yarnpkg.com/@firebase/util/-/util-1.9.7.tgz#c03b0ae065b3bba22800da0bd5314ef030848038"
integrity sha512-fBVNH/8bRbYjqlbIhZ+lBtdAAS4WqZumx03K06/u7fJSpz1TGjEMm1ImvKD47w+xaFKIP2ori6z8BrbakRfjJA==
dependencies:
tslib "^2.1.0"
"@firebase/webchannel-wrapper@0.9.0": "@firebase/webchannel-wrapper@0.9.0":
version "0.9.0" version "0.9.0"
resolved "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.9.0.tgz" resolved "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.9.0.tgz"
@@ -6312,7 +6319,8 @@ wordwrap@^1.0.0:
resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz" resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz"
integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
name wrap-ansi-cjs
version "7.0.0" version "7.0.0"
resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==