302 lines
10 KiB
TypeScript
302 lines
10 KiB
TypeScript
import clsx from "clsx";
|
|
import SectionRenderer from "./SectionRenderer";
|
|
import Checkbox from "../Low/Checkbox";
|
|
import Input from "../Low/Input";
|
|
import Select from "../Low/Select";
|
|
import { capitalize } from "lodash";
|
|
import { AccessType, ACCESSTYPE, Difficulty } from "@/interfaces/exam";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { toast } from "react-toastify";
|
|
import { ModuleState, SectionState } from "@/stores/examEditor/types";
|
|
import { Module } from "@/interfaces";
|
|
import useExamEditorStore from "@/stores/examEditor";
|
|
import WritingSettings from "./SettingsEditor/writing";
|
|
import ReadingSettings from "./SettingsEditor/reading";
|
|
import LevelSettings from "./SettingsEditor/level";
|
|
import ListeningSettings from "./SettingsEditor/listening";
|
|
import SpeakingSettings from "./SettingsEditor/speaking";
|
|
import ImportOrStartFromScratch from "./ImportExam/ImportOrFromScratch";
|
|
import { defaultSectionSettings } from "@/stores/examEditor/defaults";
|
|
import Button from "../Low/Button";
|
|
import ResetModule from "./Standalone/ResetModule";
|
|
import ListeningInstructions from "./Standalone/ListeningInstructions";
|
|
import { EntityWithRoles } from "@/interfaces/entity";
|
|
|
|
const DIFFICULTIES: Difficulty[] = ["A1", "A2", "B1", "B2", "C1", "C2"];
|
|
|
|
const ExamEditor: React.FC<{
|
|
levelParts?: number;
|
|
entitiesAllowEditPrivacy: EntityWithRoles[];
|
|
}> = ({ levelParts = 0, entitiesAllowEditPrivacy = [] }) => {
|
|
const { currentModule, dispatch } = useExamEditorStore();
|
|
const {
|
|
sections,
|
|
minTimer,
|
|
expandedSections,
|
|
examLabel,
|
|
access,
|
|
difficulty,
|
|
sectionLabels,
|
|
importModule,
|
|
} = useExamEditorStore((state) => state.modules[currentModule]);
|
|
|
|
const [numberOfLevelParts, setNumberOfLevelParts] = useState(
|
|
levelParts !== 0 ? levelParts : 1
|
|
);
|
|
const [isResetModuleOpen, setIsResetModuleOpen] = useState(false);
|
|
|
|
// For exam edits
|
|
useEffect(() => {
|
|
if (levelParts !== 0) {
|
|
setNumberOfLevelParts(levelParts);
|
|
dispatch({
|
|
type: "UPDATE_MODULE",
|
|
payload: {
|
|
updates: {
|
|
sectionLabels: Array.from({ length: levelParts }).map((_, i) => ({
|
|
id: i + 1,
|
|
label: `Part ${i + 1}`,
|
|
})),
|
|
},
|
|
module: "level",
|
|
},
|
|
});
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [levelParts]);
|
|
|
|
useEffect(() => {
|
|
const currentSections = sections;
|
|
const currentLabels = sectionLabels;
|
|
let updatedSections: SectionState[];
|
|
let updatedLabels: any;
|
|
if (
|
|
(currentModule === "level" &&
|
|
currentSections.length !== currentLabels.length) ||
|
|
numberOfLevelParts !== currentSections.length
|
|
) {
|
|
const newSections = [...currentSections];
|
|
const newLabels = [...currentLabels];
|
|
for (let i = currentLabels.length; i < numberOfLevelParts; i++) {
|
|
if (currentSections.length !== numberOfLevelParts)
|
|
newSections.push(defaultSectionSettings(currentModule, i + 1));
|
|
newLabels.push({
|
|
id: i + 1,
|
|
label: `Part ${i + 1}`,
|
|
});
|
|
}
|
|
updatedSections = newSections;
|
|
updatedLabels = newLabels;
|
|
} else if (numberOfLevelParts < currentSections.length) {
|
|
updatedSections = currentSections.slice(0, numberOfLevelParts);
|
|
updatedLabels = currentLabels.slice(0, numberOfLevelParts);
|
|
} else {
|
|
return;
|
|
}
|
|
|
|
const updatedExpandedSections = expandedSections.filter((sectionId) =>
|
|
updatedSections.some((section) => section.sectionId === sectionId)
|
|
);
|
|
|
|
dispatch({
|
|
type: "UPDATE_MODULE",
|
|
payload: {
|
|
updates: {
|
|
sections: updatedSections,
|
|
sectionLabels: updatedLabels,
|
|
expandedSections: updatedExpandedSections,
|
|
},
|
|
},
|
|
});
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [numberOfLevelParts]);
|
|
|
|
const sectionIds = sections.map((section) => section.sectionId);
|
|
|
|
const updateModule = useCallback(
|
|
(updates: Partial<ModuleState>) => {
|
|
dispatch({ type: "UPDATE_MODULE", payload: { updates } });
|
|
},
|
|
[dispatch]
|
|
);
|
|
|
|
const toggleSection = (sectionId: number) => {
|
|
if (expandedSections.length === 1 && sectionIds.includes(sectionId)) {
|
|
toast.error("Include at least one section!");
|
|
return;
|
|
}
|
|
dispatch({ type: "TOGGLE_SECTION", payload: { sectionId } });
|
|
};
|
|
|
|
const ModuleSettings: Record<Module, React.ComponentType> = {
|
|
reading: ReadingSettings,
|
|
writing: WritingSettings,
|
|
speaking: SpeakingSettings,
|
|
listening: ListeningSettings,
|
|
level: LevelSettings,
|
|
};
|
|
|
|
const Settings = ModuleSettings[currentModule];
|
|
const showImport =
|
|
importModule && ["reading", "listening", "level"].includes(currentModule);
|
|
|
|
const updateLevelParts = (parts: number) => {
|
|
setNumberOfLevelParts(parts);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{showImport ? (
|
|
<ImportOrStartFromScratch
|
|
module={currentModule}
|
|
setNumberOfLevelParts={updateLevelParts}
|
|
/>
|
|
) : (
|
|
<>
|
|
{isResetModuleOpen && (
|
|
<ResetModule
|
|
module={currentModule}
|
|
isOpen={isResetModuleOpen}
|
|
setIsOpen={setIsResetModuleOpen}
|
|
setNumberOfLevelParts={setNumberOfLevelParts}
|
|
/>
|
|
)}
|
|
<div className="flex gap-4 w-full items-center -xl:flex-col">
|
|
<div className="flex flex-row gap-3 w-full">
|
|
<div className="flex flex-col gap-3">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Timer
|
|
</label>
|
|
<Input
|
|
type="number"
|
|
name="minTimer"
|
|
onChange={(e) =>
|
|
updateModule({
|
|
minTimer: parseInt(e) < 15 ? 15 : parseInt(e),
|
|
})
|
|
}
|
|
value={minTimer}
|
|
className="max-w-[300px]"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-3 flex-grow">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Difficulty
|
|
</label>
|
|
<Select
|
|
isMulti={true}
|
|
options={DIFFICULTIES.map((x) => ({
|
|
value: x,
|
|
label: capitalize(x),
|
|
}))}
|
|
onChange={(values) => {
|
|
const selectedDifficulties = values
|
|
? values.map((v) => v.value as Difficulty)
|
|
: [];
|
|
updateModule({ difficulty: selectedDifficulties });
|
|
}}
|
|
value={
|
|
difficulty
|
|
? (Array.isArray(difficulty)
|
|
? difficulty
|
|
: [difficulty]
|
|
).map((d) => ({
|
|
value: d,
|
|
label: capitalize(d),
|
|
}))
|
|
: null
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{sectionLabels.length != 0 && currentModule !== "level" ? (
|
|
<div className="flex flex-col gap-3 -xl:w-full">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
{sectionLabels[0].label.split(" ")[0]}
|
|
</label>
|
|
<div className="flex flex-row gap-8">
|
|
{sectionLabels.map(({ id, label }) => (
|
|
<span
|
|
key={id}
|
|
className={clsx(
|
|
"px-6 py-4 w-48 h-[72px] flex justify-center items-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
|
"transition duration-300 ease-in-out",
|
|
sectionIds.includes(id)
|
|
? `bg-ielts-${currentModule}/70 border-ielts-${currentModule} text-white`
|
|
: "bg-white border-mti-gray-platinum"
|
|
)}
|
|
onClick={() => toggleSection(id)}
|
|
>
|
|
{label}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-3 w-1/3">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Number of Parts
|
|
</label>
|
|
<Input
|
|
type="number"
|
|
name="Number of Parts"
|
|
min={1}
|
|
onChange={(v) => setNumberOfLevelParts(parseInt(v))}
|
|
value={numberOfLevelParts}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-row gap-3 w-64">
|
|
<Select
|
|
label="Access Type"
|
|
options={ACCESSTYPE.map((item) => ({
|
|
value: item,
|
|
label: capitalize(item),
|
|
}))}
|
|
onChange={(value) => {
|
|
if (value?.value) {
|
|
updateModule({ access: value.value! as AccessType });
|
|
}
|
|
}}
|
|
value={{ value: access, label: capitalize(access) }}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-row gap-3 w-full">
|
|
<div className="flex flex-col gap-3 flex-grow">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Exam Label *
|
|
</label>
|
|
<Input
|
|
type="text"
|
|
placeholder="Exam Label"
|
|
name="label"
|
|
onChange={(text) => updateModule({ examLabel: text })}
|
|
roundness="xl"
|
|
value={examLabel}
|
|
required
|
|
/>
|
|
</div>
|
|
{currentModule === "listening" && <ListeningInstructions />}
|
|
<Button
|
|
onClick={() => setIsResetModuleOpen(true)}
|
|
customColor={`bg-ielts-${currentModule}/70 hover:bg-ielts-${currentModule} border-ielts-${currentModule}`}
|
|
className={`text-white self-end`}
|
|
>
|
|
Reset Module
|
|
</Button>
|
|
</div>
|
|
<div className="flex flex-row gap-8 -2xl:flex-col">
|
|
<Settings />
|
|
<div className="flex-grow max-w-[66%] -2xl:max-w-full">
|
|
<SectionRenderer />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ExamEditor;
|