ENCOA-228 Now when user navigates between modules the generation items persist. Reading, listening and writing added to level module

2024-11-12 14:17:54 +00:00
parent 696c968ebc
commit fdf411d133
66 changed files with 2546 additions and 1635 deletions
--- a/src/components/ExamEditor/SettingsEditor/reading/components.tsx
+++ b/src/components/ExamEditor/SettingsEditor/reading/components.tsx
@@ -0,0 +1,108 @@
+import React, { useCallback } from "react";
+import Dropdown from "../Shared/SettingsDropdown";
+import Input from "@/components/Low/Input";
+import ExercisePicker from "../../ExercisePicker";
+import { generate } from "../Shared/Generate";
+import GenerateBtn from "../Shared/GenerateBtn";
+import { LevelPart, ReadingPart } from "@/interfaces/exam";
+import { LevelSectionSettings, ReadingSectionSettings } from "@/stores/examEditor/types";
+import useExamEditorStore from "@/stores/examEditor";
+
+interface Props {
+    localSettings: ReadingSectionSettings | LevelSectionSettings;
+    updateLocalAndScheduleGlobal: (updates: Partial<ReadingSectionSettings | LevelSectionSettings>, schedule?: boolean) => void;
+    currentSection: ReadingPart | LevelPart;
+    generatePassageDisabled?: boolean;
+    levelId?: number;
+    level?: boolean;
+}
+
+const ReadingComponents: React.FC<Props> = ({localSettings, updateLocalAndScheduleGlobal, currentSection, levelId, level = false, generatePassageDisabled = false}) => {
+    const { currentModule } = useExamEditorStore();
+    const {
+        focusedSection,
+        difficulty,
+    } = useExamEditorStore(state => state.modules[currentModule]);
+
+    const generatePassage = useCallback(() => {
+        generate(
+            levelId ? levelId : focusedSection,
+            "reading",
+            "passage",
+            {
+                method: 'GET',
+                queryParams: {
+                    difficulty,
+                    ...(localSettings.readingTopic && { topic: localSettings.readingTopic })
+                }
+            },
+            (data: any) => [{
+                title: data.title,
+                text: data.text
+            }],
+            level ? focusedSection : undefined,
+            level
+        );
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [localSettings.readingTopic, difficulty, focusedSection, levelId]);
+
+    const onTopicChange = useCallback((readingTopic: string) => {
+        updateLocalAndScheduleGlobal({ readingTopic });
+    }, [updateLocalAndScheduleGlobal]);
+
+    return (
+        <>
+            <Dropdown
+                title="Generate Passage"
+                module="reading"
+                open={localSettings.isPassageOpen}
+                setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isPassageOpen: isOpen }, false)}
+                contentWrapperClassName={level ? `border border-ielts-reading`: ''}
+                disabled={generatePassageDisabled}
+            >
+                <div className="flex flex-row gap-2 items-center px-2 pb-4">
+                    <div className="flex flex-col flex-grow gap-4 px-2">
+                        <label className="font-normal text-base text-mti-gray-dim">Topic (Optional)</label>
+                        <Input
+                            key={`section-${focusedSection}`}
+                            type="text"
+                            placeholder="Topic"
+                            name="category"
+                            onChange={onTopicChange}
+                            roundness="full"
+                            value={localSettings.readingTopic}
+                        />
+                    </div>
+                    <div className="flex self-end h-16 mb-1">
+                        <GenerateBtn
+                            module="reading"
+                            genType="passage"
+                            sectionId={focusedSection}
+                            generateFnc={generatePassage}
+                            level={level}
+                        />
+                    </div>
+                </div>
+            </Dropdown>
+            <Dropdown
+                title="Add Exercises"
+                module="reading"
+                open={localSettings.isReadingTopicOpean}
+                setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isReadingTopicOpean: isOpen })}
+                contentWrapperClassName={level ? `border border-ielts-reading`: ''}
+                disabled={currentSection === undefined || currentSection.text === undefined || currentSection.text.content === "" || currentSection.text.title === ""}
+            >
+                <ExercisePicker
+                    module="reading"
+                    sectionId={levelId !== undefined ? levelId : focusedSection}
+                    difficulty={difficulty}
+                    extraArgs={{ text: currentSection === undefined || currentSection.text === undefined ? "" : currentSection.text.content }}
+                    levelSectionId={focusedSection}
+                    level={level}
+                />
+            </Dropdown>
+        </>
+    );
+};
+
+export default ReadingComponents;