ENCOA-260, ENCOA-259

src/components/ExamEditor/index.tsx

@@ -17,6 +17,8 @@ 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 "./ResetModule";
 
 const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
 
@@ -34,6 +36,7 @@ const ExamEditor: React.FC<{ levelParts?: number }> = ({ levelParts = 0 }) => {
     } = useExamEditorStore(state => state.modules[currentModule]);
 
     const [numberOfLevelParts, setNumberOfLevelParts] = useState(levelParts !== 0 ? levelParts : 1);
+    const [isResetModuleOpen, setIsResetModuleOpen] = useState(false);
 
     // For exam edits
     useEffect(() => {
@@ -129,6 +132,7 @@ const ExamEditor: React.FC<{ levelParts?: number }> = ({ levelParts = 0 }) => {
         <>
             {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">
                         <div className="flex flex-col gap-3">
                             <label className="font-normal text-base text-mti-gray-dim">Timer</label>
@@ -183,7 +187,8 @@ const ExamEditor: React.FC<{ levelParts?: number }> = ({ levelParts = 0 }) => {
                             </Checkbox>
                         </div>
                     </div>
-                    <div className="flex flex-col gap-3 w-full">
+                    <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"
@@ -194,6 +199,10 @@ const ExamEditor: React.FC<{ levelParts?: number }> = ({ levelParts = 0 }) => {
                             value={examLabel}
                             required
                         />
+                        </div>
+                        {["reading", "listening", "level"].includes(currentModule) && <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">
                         <Settings />