152 lines
4.4 KiB
TypeScript
152 lines
4.4 KiB
TypeScript
import { Col, Row } from "reactstrap";
|
|
import React, { useEffect } from "react";
|
|
import ValidationField from "../../../../../Components/ValidationField/ValidationField";
|
|
import { useFormikContext } from "formik";
|
|
import { useModalState } from "../../../../../zustand/Modal";
|
|
import ChoiceFields from "./ChoiceField/ChoiceFields";
|
|
import { FaCirclePlus } from "react-icons/fa6";
|
|
import { Choice } from "../../../../../types/Item";
|
|
import { useTranslation } from "react-i18next";
|
|
import DynamicTags from "./Tags/DynamicTags";
|
|
import QuestionFIeld from "./QuestionFIeld/QuestionFIeld";
|
|
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
|
|
import Choices from "./ChoiceField/Choices";
|
|
import ImageBoxField from "../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
|
|
import MaltySelectTag from "./Tags/MaltySelectTag";
|
|
import useKeyCombination from "../../../../../Hooks/useKeyCombination";
|
|
import { CombinationKeyEnum } from "../../../../../enums/CombinationKeyEnum";
|
|
|
|
const Form = () => {
|
|
const formik = useFormikContext<any>();
|
|
const { setSuccess, Success, setSavedQuestionData } = useObjectToEdit();
|
|
|
|
useEffect(() => {
|
|
if (Success) {
|
|
formik.setErrors({});
|
|
formik.resetForm({ values: {} });
|
|
setSuccess(false);
|
|
}
|
|
}, [Success]);
|
|
|
|
useEffect(() => {
|
|
setSavedQuestionData(formik.values);
|
|
}, [formik?.values]);
|
|
|
|
// console.log(formik?.errors);
|
|
|
|
const handleAddChoice = (parent_index: number) => {
|
|
console.log(parent_index);
|
|
|
|
formik.setFieldValue(`Questions.[${parent_index}].answers`, [
|
|
...((formik?.values as any)?.Questions?.[parent_index]?.answers as Choice[]),
|
|
|
|
{
|
|
answer: null,
|
|
answer_image: null,
|
|
isCorrect: 0,
|
|
},
|
|
]);
|
|
};
|
|
|
|
const handleAddQuestion = () => {
|
|
formik.setFieldValue("Questions", [
|
|
...((formik?.values as any)?.Questions as Choice[]),
|
|
|
|
{
|
|
content: "",
|
|
image: "",
|
|
parent: "",
|
|
isBase: 0,
|
|
// max_mark: 1,
|
|
// min_mark_to_pass: 1,
|
|
answers: [{ answer: null, answer_image: null, isCorrect: 0 }],
|
|
tags: [],
|
|
},
|
|
]);
|
|
|
|
const max_mark = formik?.values?.max_mark + 1;
|
|
|
|
formik.setFieldValue("max_mark", max_mark);
|
|
};
|
|
const [t] = useTranslation();
|
|
|
|
|
|
const lastQuestions = formik?.values?.Questions?.length -1 ;
|
|
useKeyCombination({ ctrlKey: true, shiftKey: true, code: CombinationKeyEnum.CHOICE }, () => {
|
|
handleAddChoice(lastQuestions)
|
|
});
|
|
|
|
useKeyCombination({ ctrlKey: true, shiftKey: true, code: CombinationKeyEnum.QUESTION }, () => {
|
|
|
|
handleAddQuestion()
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Row className="w-100 exercise_form_container">
|
|
<div className="exercise_form">
|
|
<ValidationField
|
|
className="textarea_exercise"
|
|
name="content"
|
|
label="main_question"
|
|
type="TextArea"
|
|
/>
|
|
<ImageBoxField name="content_image" />
|
|
|
|
<div></div>
|
|
</div>
|
|
<div className=" flex "></div>
|
|
|
|
{((formik?.values as any)?.Questions || [])?.map(
|
|
(item: Choice, parent_index: number) => {
|
|
return (
|
|
<div key={parent_index}>
|
|
<div className="exercise_form">
|
|
<QuestionFIeld
|
|
key={parent_index}
|
|
index={parent_index}
|
|
data={item}
|
|
/>
|
|
</div>
|
|
|
|
<Choices parent_index={parent_index} />
|
|
|
|
{formik?.values?.Questions?.[parent_index]?.answers?.length <
|
|
5 && (
|
|
<p className="add_new_button">
|
|
<FaCirclePlus
|
|
onClick={() => handleAddChoice(parent_index)}
|
|
size={23}
|
|
/>{" "}
|
|
{t("header.add_new_choice")}
|
|
</p>
|
|
)}
|
|
|
|
<div className="exercise_form_width">
|
|
<ValidationField
|
|
className=" "
|
|
placeholder="_"
|
|
name={`Questions.${parent_index}.hint`}
|
|
label="hint_question"
|
|
type="text"
|
|
style={{ width: "100%" }}
|
|
/>
|
|
<MaltySelectTag parent_index={parent_index} />
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
)}
|
|
|
|
<p className="add_new_button">
|
|
<FaCirclePlus onClick={handleAddQuestion} size={23} />{" "}
|
|
{t("header.add_new_question")}
|
|
</p>
|
|
</Row>
|
|
);
|
|
};
|
|
|
|
export default Form;
|