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/Shared/SectionPicker.tsx
+++ b/src/components/ExamEditor/SettingsEditor/Shared/SectionPicker.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { Module } from "@/interfaces";
+import useExamEditorStore from "@/stores/examEditor";
+import Dropdown from "./SettingsDropdown";
+import { LevelSectionSettings } from "@/stores/examEditor/types";
+
+interface Props {
+  module: Module;
+  sectionId: number;
+  localSettings: LevelSectionSettings;
+  updateLocalAndScheduleGlobal: (updates: Partial<LevelSectionSettings>, schedule?: boolean) => void;
+}
+
+const SectionPicker: React.FC<Props> = ({
+  module,
+  sectionId,
+  localSettings,
+  updateLocalAndScheduleGlobal
+}) => {
+  const { dispatch } = useExamEditorStore();
+  const [selectedValue, setSelectedValue] = React.useState<number | null>(null);
+  
+  const sectionState = useExamEditorStore(state =>
+    state.modules["level"].sections.find((s) => s.sectionId === sectionId)
+  );
+
+  if (sectionState === undefined) return null;
+  
+  const { readingSection, listeningSection } = sectionState;
+  const currentValue = selectedValue ?? (module === "reading" ? readingSection : listeningSection);
+  const options = module === "reading" ? [1, 2, 3] : [1, 2, 3, 4];
+  const openPicker = module === "reading" ? "isReadingPickerOpen" : "isListeningPickerOpen";
+
+  const handleSectionChange = (value: number) => {
+    setSelectedValue(value);
+    dispatch({
+      type: "UPDATE_SECTION_SINGLE_FIELD",
+      payload: {
+        sectionId,
+        module: "level",
+        field: module === "reading" ? "readingSection" : "listeningSection",
+        value: value
+      }
+    });
+  };
+
+  const getTitle = () => {
+    const section = module === "reading" ? "Passage" : "Section";
+    if (!currentValue) return `Choose a ${section}`;
+    return `${section} ${currentValue}`;
+  };
+
+  return (
+    <Dropdown
+      title={getTitle()}
+      module={module}
+      open={localSettings[openPicker]}
+      setIsOpen={(isOpen: boolean) =>
+        updateLocalAndScheduleGlobal({ [openPicker]: isOpen }, false)
+      }
+      contentWrapperClassName={`pt-6 px-4 bg-gray-200 rounded-b-lg shadow-md transition-all duration-300 ease-in-out border border-ielts-${module}`}
+    >
+      <div className="space-y-2 pt-3 pb-3 px-2 border border-gray-200 rounded-lg shadow-inner">
+        {options.map((num) => (
+          <label
+            key={num}
+            className={`
+              flex items-center space-x-3 font-semibold cursor-pointer p-2 rounded
+              transition-colors duration-200
+              ${currentValue === num
+                ? `bg-ielts-${module}/90 text-white`
+                : `hover:bg-ielts-${module}/70 text-gray-700`}
+            `}
+          >
+            <input
+              type="radio"
+              name={`${module === "reading" ? 'passage' : 'section'}-${sectionId}`}
+              value={num}
+              checked={currentValue === num}
+              onChange={() => handleSectionChange(num)}
+              className={`
+                h-5 w-5 cursor-pointer
+                accent-ielts-${module}
+              `}
+            />
+            <div className="flex items-center space-x-2">
+              <span>
+                {module === "reading" ? `Passage ${num}` : `Section ${num}`}
+              </span>
+            </div>
+          </label>
+        ))}
+      </div>
+    </Dropdown>
+  );
+};
+
+export default SectionPicker;