diff --git a/src/Components/CustomFields/SelectTag.tsx b/src/Components/CustomFields/SelectTag.tsx index 7e2ae54..0d844b9 100644 --- a/src/Components/CustomFields/SelectTag.tsx +++ b/src/Components/CustomFields/SelectTag.tsx @@ -3,14 +3,17 @@ import { Select, Spin } from 'antd'; import { useTranslation } from 'react-i18next'; import { useDebounce } from '../../utils/useDebounce'; import { useGetAllTag } from '../../api/tags'; +import { useFormikContext } from 'formik'; const SelectTag: React.FC = () => { const [searchValue, setSearchValue] = useState(''); const [fieldValue, setFieldValue] = useState(''); - + const formik = useFormikContext() const handleChange = (value: string[]) => { + formik.setFieldValue("tags",value) setSearchValue(''); setFieldValue(''); + }; const handleSearch = useDebounce((value: string) => { @@ -35,9 +38,7 @@ const SelectTag: React.FC = () => { const [t] = useTranslation(); const options = data?.data ?? [] - console.log(options,"options"); const additionalData = options?.length < 1 && searchValue.length > 1 && !isLoading ? [{id:`new_${searchValue}`,name:searchValue}] :[]; - console.log(additionalData); return (
@@ -66,6 +67,7 @@ const SelectTag: React.FC = () => { handleBlur(); } }} + value={formik?.values?.tags ?? []} />
); diff --git a/src/Pages/Admin/question/AddPage.tsx b/src/Pages/Admin/question/AddPage.tsx index 7340c8f..fec667d 100644 --- a/src/Pages/Admin/question/AddPage.tsx +++ b/src/Pages/Admin/question/AddPage.tsx @@ -16,7 +16,7 @@ import { useObjectToEdit } from "../../../zustand/ObjectToEditState"; import Header from "../../../Components/exercise/Header"; import { Question } from "../../../types/Item"; -import BaseForm from "./Model/Malty/Add"; +import BaseForm from "./Model/Malty/Form"; import ModelForm from "./Model/ModelForm"; const AcceptModal = lazy(() => import("./Model/AcceptModal")); diff --git a/src/Pages/Admin/question/EditPage.tsx b/src/Pages/Admin/question/EditPage.tsx index 9821817..78f5e63 100644 --- a/src/Pages/Admin/question/EditPage.tsx +++ b/src/Pages/Admin/question/EditPage.tsx @@ -22,7 +22,7 @@ import { useObjectToEdit } from "../../../zustand/ObjectToEditState"; import { removeStringKeys } from "../../../utils/removeStringKeys"; import SpinContainer from "../../../Components/Layout/SpinContainer"; import ModelForm from "./Model/ModelForm"; -import BaseForm from "./Model/Malty/Edit"; +import BaseForm from "./Model/Malty/Form"; import { Question } from "../../../types/Item"; import { toast } from "react-toastify"; import useSetPageTitle from "../../../Hooks/useSetPageTitle"; diff --git a/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx b/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx index 066f494..1cb6273 100644 --- a/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx +++ b/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx @@ -31,7 +31,7 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => { - - -

- -

+ + +
+ + +

+{t("header.delete_choice")} + +

+
-
- +
diff --git a/src/Pages/Admin/question/Model/Malty/Form.tsx b/src/Pages/Admin/question/Model/Malty/Form.tsx new file mode 100644 index 0000000..b7d5ad9 --- /dev/null +++ b/src/Pages/Admin/question/Model/Malty/Form.tsx @@ -0,0 +1,134 @@ +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"; + +const Form = () => { + const formik = useFormikContext(); + 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 ( + +
+ + + + +
+
+
+ + {((formik?.values as any)?.Questions || [])?.map( + (item: Choice, parent_index: number) => { + return ( +
+
+ +
+ + + + {formik?.values?.Questions?.[parent_index]?.answers + ?.length < 5 && ( +

+ handleAddChoice(parent_index)} + size={23} + />{" "} + {t("header.add_new_choice")} +

+ )} + + +
+ + + +
+
+ ); + }, + )} + +

+ {" "} + {t("header.add_new_question")} +

+
+ ); +}; + +export default Form; diff --git a/src/Pages/Admin/question/Model/Malty/QuestionFIeld/QuestionFIeld.tsx b/src/Pages/Admin/question/Model/Malty/QuestionFIeld/QuestionFIeld.tsx index 4138f8b..0574302 100644 --- a/src/Pages/Admin/question/Model/Malty/QuestionFIeld/QuestionFIeld.tsx +++ b/src/Pages/Admin/question/Model/Malty/QuestionFIeld/QuestionFIeld.tsx @@ -11,6 +11,8 @@ import { useObjectToEdit } from "../../../../../../zustand/ObjectToEditState"; import { toast } from "react-toastify"; import CheckboxField from "./CheckboxField"; import HintField from "./HintField"; +import ImageBoxField from "../../../../../../Components/CustomFields/ImageBoxField/ImageBoxField"; +import { GoTrash } from "react-icons/go"; const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => { const formik = useFormikContext(); @@ -33,39 +35,36 @@ const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => { }; return ( -
-
- - - - - + <> + +
+
+ -

- -

-
+ -
- +
+ +

+ {t("header.delete_question")} + +

+ +
- -
+ + + + +
+ ); }; diff --git a/src/Pages/Admin/question/Model/Malty/Tags/MaltySelectTag.tsx b/src/Pages/Admin/question/Model/Malty/Tags/MaltySelectTag.tsx new file mode 100644 index 0000000..8e5b443 --- /dev/null +++ b/src/Pages/Admin/question/Model/Malty/Tags/MaltySelectTag.tsx @@ -0,0 +1,77 @@ +import React, { useState, useMemo } from 'react'; +import { Select, Spin } from 'antd'; +import { useTranslation } from 'react-i18next'; +import { useFormikContext } from 'formik'; +import { useDebounce } from '../../../../../../utils/useDebounce'; +import { useGetAllTag } from '../../../../../../api/tags'; + +const MaltySelectTag = ({parent_index}:{parent_index:number}) => { + const [searchValue, setSearchValue] = useState(''); + const [fieldValue, setFieldValue] = useState(''); + const formik = useFormikContext(); + const values = formik?.values?.Questions?.[parent_index]?.tags; + const handleChange = (value: string[]) => { + formik.setFieldValue(`Questions.[${parent_index}].tags`,value) + setSearchValue(''); + setFieldValue(''); + + }; + + const handleSearch = useDebounce((value: string) => { + setSearchValue(value); + + }); + + const handleFieldChange = (value: string) => { + setFieldValue(value); + + }; + + const handleBlur = () => { + setSearchValue(''); + setFieldValue(''); + }; + + const { data, isLoading } = useGetAllTag({ + name: searchValue, + }); + + const [t] = useTranslation(); + + const options = data?.data ?? [] + const additionalData = options?.length < 1 && searchValue.length > 1 && !isLoading ? [{id:`new_${searchValue}`,name:searchValue}] :[]; + + return ( +
+ + +