139 lines
3.8 KiB
TypeScript
139 lines
3.8 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";
|
|
|
|
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();
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
<Row className="w-100">
|
|
<div className="exercise_form">
|
|
<ValidationField
|
|
className="textarea_exercise"
|
|
name="content"
|
|
label="main_question"
|
|
type="TextArea"
|
|
/>
|
|
<ValidationField
|
|
className="file_exercise"
|
|
name="image"
|
|
label="attachment"
|
|
type="File"
|
|
/>
|
|
|
|
{/* <div className="">
|
|
<ValidationField name="max_mark" label="max_mark" type="Number" className="inputSmall" disabled />
|
|
<ValidationField name="min_mark_to_pass" label="min_mark_to_pass" className="inputSmall" type="Number" />
|
|
|
|
</div> */}
|
|
<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>
|
|
)}
|
|
|
|
<DynamicTags parent_index={parent_index} />
|
|
</div>
|
|
);
|
|
},
|
|
)}
|
|
|
|
<p className="add_new_button">
|
|
<FaCirclePlus onClick={handleAddQuestion} size={23} />{" "}
|
|
{t("header.add_new_question")}
|
|
</p>
|
|
</Row>
|
|
);
|
|
};
|
|
|
|
export default Form;
|