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

ENCOA-311

Browse Source
This commit is contained in:
Carlos-Mesquita
2025-01-13 01:18:19 +00:00
parent 715a841483
commit ccbbf30058
33 changed files with 824 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ExamEditor/SettingsEditor/Shared/Generate.ts
View File

@@ -7,7 +7,7 @@ import { Module } from "@/interfaces";
interface GeneratorConfig {
method: 'GET' | 'POST';
queryParams?: Record<string, string>;
queryParams?: Record<string, string | string[]>;
files?: Record<string, string>;
body?: Record<string, any>;
}
@@ -61,9 +61,21 @@ export function generate(
setGenerating(level ? levelSectionId! : sectionId, type, level);
const queryString = config.queryParams
? new URLSearchParams(config.queryParams).toString()
: '';
function buildQueryString(params: Record<string, string | string[]>): string {
const searchParams = new URLSearchParams();
Object.entries(params).forEach(([key, value]) => {
if (Array.isArray(value)) {
value.forEach(v => searchParams.append(key, v));
} else {
searchParams.append(key, value);
}
});
return searchParams.toString();
}
const queryString = config.queryParams ? buildQueryString(config.queryParams) : '';
const url = `/api/exam/generate/${module}/${sectionId}${queryString ? `?${queryString}` : ''}`;

3
src/components/ExamEditor/SettingsEditor/level.tsx
View File

@@ -273,7 +273,6 @@ const LevelSettings: React.FC = () => {
<ExercisePicker
module="level"
sectionId={focusedSection}
difficulty={difficulty}
/>
</Dropdown>
</div>
@@ -335,7 +334,6 @@ const LevelSettings: React.FC = () => {
<ExercisePicker
module="writing"
sectionId={focusedSection}
difficulty={difficulty}
levelSectionId={focusedSection}
level
/>
@@ -370,7 +368,6 @@ const LevelSettings: React.FC = () => {
<ExercisePicker
module="speaking"
sectionId={focusedSection}
difficulty={difficulty}
levelSectionId={focusedSection}
level
/>

1
src/components/ExamEditor/SettingsEditor/listening/components.tsx
View File

@@ -297,7 +297,6 @@ const ListeningComponents: React.FC<Props> = ({ currentSection, localSettings, u
<ExercisePicker
module="listening"
sectionId={levelId !== undefined ? levelId : focusedSection}
difficulty={difficulty}
extraArgs={{ script: currentSection === undefined || currentSection.audio === undefined ? "" : currentSection.script }}
levelSectionId={focusedSection}
level={level}

1
src/components/ExamEditor/SettingsEditor/reading/components.tsx
View File

@@ -95,7 +95,6 @@ const ReadingComponents: React.FC<Props> = ({localSettings, updateLocalAndSchedu
<ExercisePicker
module="reading"
sectionId={levelId !== undefined ? levelId : focusedSection}
difficulty={difficulty}
extraArgs={{ text: currentSection === undefined || currentSection.text === undefined ? "" : currentSection.text.content }}
levelSectionId={focusedSection}
level={level}

99
src/components/ExamEditor/SettingsEditor/speaking/components.tsx
View File

@@ -7,11 +7,15 @@ import Input from "@/components/Low/Input";
import GenerateBtn from "../Shared/GenerateBtn";
import clsx from "clsx";
import { FaFemale, FaMale } from "react-icons/fa";
import { InteractiveSpeakingExercise, LevelPart, SpeakingExercise } from "@/interfaces/exam";
import { Difficulty, InteractiveSpeakingExercise, LevelPart, SpeakingExercise } from "@/interfaces/exam";
import { toast } from "react-toastify";
import { generateVideos } from "../Shared/generateVideos";
import { Module } from "@/interfaces";
import useCanGenerate from "./useCanGenerate";
import ReactSelect, { components } from "react-select";
import { capitalize } from "lodash";
import Option from "@/interfaces/option";
import { MdSignalCellularAlt } from "react-icons/md";
export interface Avatar {
name: string;
@@ -36,9 +40,23 @@ const SpeakingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSche
const [selectedAvatar, setSelectedAvatar] = useState<Avatar | null>(null);
const randomDiff = difficulty.length === 1
? capitalize(difficulty[0])
: `Random (${difficulty.map(dif => capitalize(dif)).join(", ")})` as Difficulty;
const DIFFICULTIES = difficulty.length === 1
? ["A1", "A2", "B1", "B2", "C1", "C2"]
: ["A1", "A2", "B1", "B2", "C1", "C2", randomDiff];
const difficultyOptions: Option[] = DIFFICULTIES.map(level => ({
label: level,
value: level
}));
const [specificDiff, setSpecificDiff] = useState(randomDiff);
const generateScript = useCallback((scriptSectionId: number) => {
const queryParams: {
difficulty: string;
difficulty: string[];
first_topic?: string;
second_topic?: string;
topic?: string;
@@ -70,19 +88,22 @@ const SpeakingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSche
return [{
prompts: data.questions,
first_topic: data.first_topic,
second_topic: data.second_topic
second_topic: data.second_topic,
difficulty: specificDiff.length == 2 ? specificDiff : difficulty,
}];
case 2:
return [{
topic: data.topic,
question: data.question,
prompts: data.prompts,
suffix: data.suffix
suffix: data.suffix,
difficulty: specificDiff.length == 2 ? specificDiff : difficulty,
}];
case 3:
return [{
title: data.topic,
prompts: data.questions
prompts: data.questions,
difficulty: specificDiff.length == 2 ? specificDiff : difficulty,
}];
default:
return [data];
@@ -92,7 +113,7 @@ const SpeakingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSche
level
);
}, [difficulty, level, section.sectionId, focusedSection, id, sectionId, localSettings.speakingTopic, localSettings.speakingSecondTopic]);
}, [difficulty, level, section.sectionId, focusedSection, id, sectionId, localSettings.speakingTopic, localSettings.speakingSecondTopic, specificDiff]);
const onTopicChange = useCallback((speakingTopic: string) => {
updateLocalAndScheduleGlobal({ speakingTopic });
@@ -192,7 +213,7 @@ const SpeakingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSche
contentWrapperClassName={level ? `border border-ielts-speaking` : ''}
>
<div className={clsx("gap-2 px-2 pb-4", secId === 1 ? "flex flex-col w-full" : "flex flex-row items-center")}>
<div className="gap-4 px-2 pb-4 flex flex-col w-full">
<div className="flex flex-col flex-grow gap-4 px-2">
<label className="font-normal text-base text-mti-gray-dim">{`${secId === 1 ? "First Topic" : "Topic"}`} (Optional)</label>
<Input
@@ -201,8 +222,9 @@ const SpeakingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSche
placeholder="Topic"
name="category"
onChange={onTopicChange}
roundness="full"
roundness="xl"
value={localSettings.speakingTopic}
thin
/>
</div>
{secId === 1 &&
@@ -214,12 +236,69 @@ const SpeakingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSche
placeholder="Topic"
name="category"
onChange={onSecondTopicChange}
roundness="full"
roundness="xl"
value={localSettings.speakingSecondTopic}
thin
/>
</div>
}
<div className={clsx("flex h-16 mb-1", secId === 1 ? "justify-center mt-4" : "self-end")}>
<div className="flex flex-col gap-2 px-2">
<label className="block font-normal text-base text-mti-gray-dim mb-2">Difficulty (Optional)</label>
<ReactSelect
options={difficultyOptions}
value={difficultyOptions.find(opt => opt.value === specificDiff)}
onChange={(value) => setSpecificDiff(value!.value as Difficulty)}
menuPortalTarget={document?.body}
components={{
IndicatorSeparator: null,
ValueContainer: ({ children, ...props }) => (
<components.ValueContainer {...props}>
<div className="flex flex-row gap-2 items-center pl-4">
<MdSignalCellularAlt size={14} className="text-gray-600" />
{children}
</div>
</components.ValueContainer>
)
}}
styles={{
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
control: (styles) => ({
...styles,
minHeight: '50px',
border: '1px solid #e5e7eb',
borderRadius: '0.5rem',
boxShadow: 'none',
backgroundColor: 'white',
cursor: 'pointer',
'&:hover': {
border: '1px solid #e5e7eb',
}
}),
valueContainer: (styles) => ({
...styles,
padding: '0 8px',
display: 'flex',
alignItems: 'center'
}),
input: (styles) => ({
...styles,
margin: '0',
padding: '0'
}),
dropdownIndicator: (styles) => ({
...styles,
padding: '8px'
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
className="text-sm"
/>
</div>
<div className="flex h-16 mb-1 justify-center mt-4">
<GenerateBtn
module="speaking"
genType={`${id ? `${id}-` : ''}speakingScript`}

249
src/components/ExamEditor/SettingsEditor/writing/components.tsx
View File

@@ -5,9 +5,13 @@ import { generate } from "../Shared/Generate";
import GenerateBtn from "../Shared/GenerateBtn";
import { LevelSectionSettings, WritingSectionSettings } from "@/stores/examEditor/types";
import useExamEditorStore from "@/stores/examEditor";
import { WritingExercise } from "@/interfaces/exam";
import { Difficulty, WritingExercise } from "@/interfaces/exam";
import clsx from "clsx";
import { FaFileUpload } from "react-icons/fa";
import ReactSelect, { components } from "react-select";
import Option from "@/interfaces/option"
import { MdSignalCellularAlt } from "react-icons/md";
import { capitalize } from "lodash";
interface Props {
@@ -25,6 +29,21 @@ const WritingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSched
type,
academic_url
} = useExamEditorStore((store) => store.modules["writing"]);
const randomDiff = difficulty.length === 1
? capitalize(difficulty[0])
: `Random (${difficulty.map(dif => capitalize(dif)).join(", ")})` as Difficulty;
const DIFFICULTIES = difficulty.length === 1
? ["A1", "A2", "B1", "B2", "C1", "C2"]
: ["A1", "A2", "B1", "B2", "C1", "C2", randomDiff];
const difficultyOptions: Option[] = DIFFICULTIES.map(level => ({
label: level,
value: level
}));
const [specificDiff, setSpecificDiff] = useState(randomDiff);
const generatePassage = useCallback((sectionId: number) => {
if (type === "academic" && academic_url !== undefined && sectionId == 1) {
generate(
@@ -34,7 +53,7 @@ const WritingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSched
{
method: 'POST',
queryParams: {
difficulty,
difficulty: specificDiff.length == 2 ? [specificDiff] : difficulty,
type: type!
},
files: {
@@ -42,7 +61,8 @@ const WritingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSched
}
},
(data: any) => [{
prompt: data.question
prompt: data.question,
difficulty: data.difficulty
}]
)
} else {
@@ -53,18 +73,18 @@ const WritingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSched
{
method: 'GET',
queryParams: {
difficulty,
difficulty: specificDiff.length == 2 ? [specificDiff] : difficulty,
type: type!,
...(localSettings.writingTopic && { topic: localSettings.writingTopic })
}
},
(data: any) => [{
prompt: data.question
prompt: data.question,
difficulty: data.difficulty
}]
);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [localSettings.writingTopic, difficulty, academic_url]);
}, [type, academic_url, currentModule, specificDiff, difficulty, localSettings.writingTopic]);
const onTopicChange = useCallback((writingTopic: string) => {
updateLocalAndScheduleGlobal({ writingTopic });
@@ -96,72 +116,181 @@ const WritingComponents: React.FC<Props> = ({ localSettings, updateLocalAndSched
setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isImageUploadOpen: isOpen }, false)}
contentWrapperClassName={level ? `border border-ielts-writing` : ''}
>
<div className="flex flex-row gap-2 items-center px-2 pb-4">
<div className="flex flex-row p-2 gap-4">
<span className="bg-gray-100 px-3.5 py-2.5 rounded-lg border border-gray-300 text-mti-gray-dim">
Upload a graph, chart or diagram
</span>
<input
type="file"
accept="image/png, image/jpeg"
onChange={handleFileUpload}
style={{ display: 'none' }}
ref={fileInputRef}
/>
<button
key={`section-${focusedSection}`}
className={clsx(
"flex items-center w-[140px] px-4 py-2 text-white rounded-xl transition-colors duration-300 text-lg disabled:cursor-not-allowed",
`bg-ielts-writing/70 border border-ielts-writing hover:bg-ielts-writing disabled:bg-ielts-writing/40`,
)}
onClick={triggerFileInput}
>
<div className="flex flex-row">
<FaFileUpload className="mr-2" size={24} />
<span>Upload</span>
</div>
</button>
<div className="flex w-full flex-row gap-2 items-center px-2 pb-4">
<div className="flex w-full flex-col gap-4">
<div className="flex flex-col gap-2">
<label className="block font-normal text-base text-mti-gray-dim mb-2">Difficulty (Optional)</label>
<ReactSelect
options={difficultyOptions}
value={difficultyOptions.find(opt => opt.value === specificDiff)}
onChange={(value) => setSpecificDiff(value!.value as Difficulty)}
menuPortalTarget={document?.body}
components={{
IndicatorSeparator: null,
ValueContainer: ({ children, ...props }) => (
<components.ValueContainer {...props}>
<div className="flex flex-row gap-2 items-center pl-4">
<MdSignalCellularAlt size={14} className="text-gray-600" />
{children}
</div>
</components.ValueContainer>
)
}}
styles={{
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
control: (styles) => ({
...styles,
minHeight: '50px',
border: '1px solid #e5e7eb',
borderRadius: '0.5rem',
boxShadow: 'none',
backgroundColor: 'white',
cursor: 'pointer',
'&:hover': {
border: '1px solid #e5e7eb',
}
}),
valueContainer: (styles) => ({
...styles,
padding: '0 8px',
display: 'flex',
alignItems: 'center'
}),
input: (styles) => ({
...styles,
margin: '0',
padding: '0'
}),
dropdownIndicator: (styles) => ({
...styles,
padding: '8px'
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
className="text-sm"
/>
</div>
<div className="flex flex-row justify-between gap-4">
<span className="bg-gray-100 px-3.5 py-2.5 rounded-lg border border-gray-300 text-mti-gray-dim flex-grow">
Upload a graph, chart or diagram
</span>
<input
type="file"
accept="image/png, image/jpeg"
onChange={handleFileUpload}
style={{ display: 'none' }}
ref={fileInputRef}
/>
<button
key={`section-${focusedSection}`}
className={clsx(
"flex items-center w-[140px] px-4 py-2 text-white rounded-xl transition-colors duration-300 text-lg disabled:cursor-not-allowed",
`bg-ielts-writing/70 border border-ielts-writing hover:bg-ielts-writing disabled:bg-ielts-writing/40`,
)}
onClick={triggerFileInput}
>
<div className="flex flex-row">
<FaFileUpload className="mr-2" size={24} />
<span>Upload</span>
</div>
</button>
</div>
</div>
</div>
</Dropdown>}
{
(type !== "academic" || (type === "academic" && academic_url !== undefined)) && <Dropdown
(type !== "academic" || (type === "academic" && focusedSection == 2)) && <Dropdown
title="Generate Instructions"
module={"writing"}
open={localSettings.isWritingTopicOpen}
setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isWritingTopicOpen: isOpen }, false)}
contentWrapperClassName={level ? `border border-ielts-writing` : ''}
>
<div className="flex flex-row gap-2 items-center px-2 pb-4">
{type !== "academic" ?
<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.writingTopic}
<div className="px-2 pb-4 flex flex-col w-full">
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
<label className="block font-normal text-base text-mti-gray-dim mb-2">Topic (Optional)</label>
<div className="flex gap-2 min-w-0">
<Input
key={`section-${focusedSection}`}
type="text"
placeholder="Topic"
name="category"
onChange={onTopicChange}
roundness="xl"
value={localSettings.writingTopic}
thin
/>
</div>
</div>
<div className="flex flex-col gap-2">
<label className="block font-normal text-base text-mti-gray-dim mb-2">Difficulty (Optional)</label>
<ReactSelect
options={difficultyOptions}
value={difficultyOptions.find(opt => opt.value === specificDiff)}
onChange={(value) => setSpecificDiff(value!.value as Difficulty)}
menuPortalTarget={document?.body}
components={{
IndicatorSeparator: null,
ValueContainer: ({ children, ...props }) => (
<components.ValueContainer {...props}>
<div className="flex flex-row gap-2 items-center pl-4">
<MdSignalCellularAlt size={14} className="text-gray-600" />
{children}
</div>
</components.ValueContainer>
)
}}
styles={{
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
control: (styles) => ({
...styles,
minHeight: '50px',
border: '1px solid #e5e7eb',
borderRadius: '0.5rem',
boxShadow: 'none',
backgroundColor: 'white',
cursor: 'pointer',
'&:hover': {
border: '1px solid #e5e7eb',
}
}),
valueContainer: (styles) => ({
...styles,
padding: '0 8px',
display: 'flex',
alignItems: 'center'
}),
input: (styles) => ({
...styles,
margin: '0',
padding: '0'
}),
dropdownIndicator: (styles) => ({
...styles,
padding: '8px'
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
className="text-sm"
/>
</div>
:
<div className="flex flex-col flex-grow gap-4 px-2">
<span className="bg-gray-100 px-3.5 py-2.5 rounded-lg border border-gray-300 text-mti-gray-dim">
Generate instructions based on the uploaded image.
</span>
<div className="flex w-full h-full justify-center items-center mt-2">
<GenerateBtn
genType="writing"
module={"writing"}
sectionId={focusedSection}
generateFnc={generatePassage}
/>
</div>
}
<div className="flex self-end h-16 mb-1">
<GenerateBtn
genType="writing"
module={"writing"}
sectionId={focusedSection}
generateFnc={generatePassage}
/>
</div>
</div>
</Dropdown>