remove un used code
This commit is contained in:
parent
e981ce7481
commit
693c1cdb06
|
|
@ -63,7 +63,7 @@ const ImageBoxField = ({ name }: any) => {
|
||||||
<div className="VisibleHidden">hidden</div>
|
<div className="VisibleHidden">hidden</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="ImageBox">
|
<div className="ImageBox" onClick={handleButtonClick}>
|
||||||
{imagePreview ? (
|
{imagePreview ? (
|
||||||
<img src={imagePreview} onClick={handleButtonClick} alt="Preview" className="imagePreview" />
|
<img src={imagePreview} onClick={handleButtonClick} alt="Preview" className="imagePreview" />
|
||||||
) : (
|
) : (
|
||||||
|
|
|
||||||
|
|
@ -72,11 +72,11 @@ const Header = () => {
|
||||||
>
|
>
|
||||||
|
|
||||||
<GoArrowSwitch className="m-2" />
|
<GoArrowSwitch className="m-2" />
|
||||||
|
|
||||||
</Popconfirm>
|
|
||||||
{isBseQuestion || values?.isBase === 1
|
{isBseQuestion || values?.isBase === 1
|
||||||
? t("header.malty_exercise")
|
? t("header.malty_exercise")
|
||||||
: t("header.exercise")}
|
: t("header.exercise")}
|
||||||
|
|
||||||
|
</Popconfirm>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,12 @@
|
||||||
import React, { Suspense, lazy, useEffect } from "react";
|
import React, { Suspense, lazy, useEffect } from "react";
|
||||||
import { Spin } from "antd";
|
import { Spin } from "antd";
|
||||||
import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
|
|
||||||
import {
|
import {
|
||||||
getInitialValues,
|
getInitialValues,
|
||||||
getValidationSchema,
|
getValidationSchema,
|
||||||
getInitialValuesBase,
|
getInitialValuesBase,
|
||||||
getValidationSchemaBase,
|
getValidationSchemaBase,
|
||||||
processTags,
|
processTags,
|
||||||
} from "./Model/formUtil";
|
} from "./formUtil";
|
||||||
import { useAddQuestion, useAddQuestionAsync } from "../../../api/Question";
|
import { useAddQuestion, useAddQuestionAsync } from "../../../api/Question";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
||||||
|
|
@ -21,7 +20,6 @@ import ModelForm from "./Model/ModelForm";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
import { Form, Formik } from "formik";
|
import { Form, Formik } from "formik";
|
||||||
import { MdOutlineArrowForwardIos } from "react-icons/md";
|
import { MdOutlineArrowForwardIos } from "react-icons/md";
|
||||||
const AcceptModal = lazy(() => import("./Model/AcceptModal"));
|
|
||||||
|
|
||||||
const AddPage: React.FC = () => {
|
const AddPage: React.FC = () => {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
@ -163,7 +161,8 @@ const AddPage: React.FC = () => {
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
navigate(-1);
|
navigate(-1);
|
||||||
};
|
};
|
||||||
const Loading = LoadingAsync || isLoading
|
const Loading = LoadingAsync || isLoading;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isSuccess) {
|
if (isSuccess) {
|
||||||
setSuccess(true);
|
setSuccess(true);
|
||||||
|
|
@ -211,9 +210,7 @@ const AddPage: React.FC = () => {
|
||||||
</Form>
|
</Form>
|
||||||
)}
|
)}
|
||||||
</Formik>
|
</Formik>
|
||||||
<Suspense fallback={<Spin />}>
|
|
||||||
<AcceptModal />
|
|
||||||
</Suspense>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -264,9 +261,6 @@ const AddPage: React.FC = () => {
|
||||||
)}
|
)}
|
||||||
</Formik>
|
</Formik>
|
||||||
|
|
||||||
<Suspense fallback={<Spin />}>
|
|
||||||
<AcceptModal />
|
|
||||||
</Suspense>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,12 @@
|
||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
import { Modal, Spin } from "antd";
|
import { Modal, Spin } from "antd";
|
||||||
import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
|
|
||||||
import {
|
import {
|
||||||
getInitialValues,
|
getInitialValues,
|
||||||
getValidationSchema,
|
getValidationSchema,
|
||||||
getInitialValuesBase,
|
getInitialValuesBase,
|
||||||
getValidationSchemaBase,
|
getValidationSchemaBase,
|
||||||
processTags,
|
processTags,
|
||||||
} from "./Model/formUtil";
|
} from "./formUtil";
|
||||||
import {
|
import {
|
||||||
useAddQuestion,
|
useAddQuestion,
|
||||||
useDeleteQuestion,
|
useDeleteQuestion,
|
||||||
|
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { Modal } from "antd";
|
|
||||||
import { useModalState } from "../../../../zustand/Modal";
|
|
||||||
import { ModalEnum } from "../../../../enums/Model";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { QUESTION_OBJECT_KEY } from "../../../../config/AppKey";
|
|
||||||
|
|
||||||
const AcceptModal: React.FC = () => {
|
|
||||||
const { isOpen, setIsOpen } = useModalState((state) => state);
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const handleSubmit = () => {
|
|
||||||
localStorage.removeItem(QUESTION_OBJECT_KEY);
|
|
||||||
console.log("Handle submit clicked");
|
|
||||||
setIsOpen("");
|
|
||||||
|
|
||||||
navigate(-1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCancel = () => {
|
|
||||||
setIsOpen("");
|
|
||||||
};
|
|
||||||
|
|
||||||
const [t] = useTranslation();
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Modal
|
|
||||||
className="ModalForm"
|
|
||||||
centered
|
|
||||||
width={"40vw"}
|
|
||||||
footer={null}
|
|
||||||
open={isOpen === ModalEnum?.QUESTION_ACCEPT}
|
|
||||||
onCancel={handleCancel}
|
|
||||||
>
|
|
||||||
<header> {t("practical.accept_back")}</header>
|
|
||||||
|
|
||||||
<main className="main_modal">
|
|
||||||
<div className="ValidationField w-100 mb-5">
|
|
||||||
<label className="text h1 ">
|
|
||||||
{t(
|
|
||||||
"practical.Are you sure you want to go back and not save any changes?",
|
|
||||||
)}{" "}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="buttons">
|
|
||||||
<div onClick={handleCancel}>{t("practical.cancel")}</div>
|
|
||||||
<div onClick={handleSubmit}>{t("practical.accept")}</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</Modal>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AcceptModal;
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import useFormField from "../../../../../../Hooks/useFormField";
|
import { Checkbox } from "antd";
|
||||||
import { Checkbox, Form } from "antd";
|
import { useFormikContext } from "formik";
|
||||||
import { useFormik, useFormikContext } from "formik";
|
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
const CheckboxField = ({
|
const CheckboxField = ({
|
||||||
name,
|
name,
|
||||||
|
|
|
||||||
|
|
@ -6,10 +6,7 @@ import { useTranslation } from "react-i18next";
|
||||||
import { getCharFromNumber } from "../../../../../../utils/getCharFromNumber";
|
import { getCharFromNumber } from "../../../../../../utils/getCharFromNumber";
|
||||||
import CheckboxField from "./CheckboxField";
|
import CheckboxField from "./CheckboxField";
|
||||||
import TextField from "./TextField";
|
import TextField from "./TextField";
|
||||||
import File from "./File";
|
|
||||||
import { FaTrash } from "react-icons/fa";
|
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
import HintField from "./HintField";
|
|
||||||
import ImageBoxField from "../../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
|
import ImageBoxField from "../../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
|
||||||
import { GoTrash } from "react-icons/go";
|
import { GoTrash } from "react-icons/go";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,88 +0,0 @@
|
||||||
import { Button, Upload, UploadFile } from "antd";
|
|
||||||
import useFormField from "../../../../../../Hooks/useFormField";
|
|
||||||
import { UploadOutlined } from "@ant-design/icons";
|
|
||||||
import { useMemo } from "react";
|
|
||||||
|
|
||||||
const File = ({
|
|
||||||
name,
|
|
||||||
label,
|
|
||||||
onChange,
|
|
||||||
isDisabled,
|
|
||||||
placholder,
|
|
||||||
className,
|
|
||||||
parent_index,
|
|
||||||
props,
|
|
||||||
}: any) => {
|
|
||||||
const newName = `Questions[${parent_index}].answers[${name}].answer_image`;
|
|
||||||
|
|
||||||
const { formik, t, isError, errorMsg } = useFormField(newName, props);
|
|
||||||
let imageUrl =
|
|
||||||
formik?.values?.Questions?.[parent_index]?.answers[name]?.answer_image ??
|
|
||||||
null;
|
|
||||||
// console.log(imageUrl);
|
|
||||||
|
|
||||||
const fileList: UploadFile[] = useMemo(() => {
|
|
||||||
if (!imageUrl) return [];
|
|
||||||
|
|
||||||
return [
|
|
||||||
typeof imageUrl === "string"
|
|
||||||
? {
|
|
||||||
uid: "-1",
|
|
||||||
name: "uploaded-image",
|
|
||||||
status: "done",
|
|
||||||
url: imageUrl,
|
|
||||||
thumbUrl: imageUrl,
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
uid: imageUrl.uid || "-1",
|
|
||||||
name: imageUrl.name || "uploaded-image",
|
|
||||||
status: "done",
|
|
||||||
originFileObj: imageUrl,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}, [imageUrl]);
|
|
||||||
// console.log(1);
|
|
||||||
|
|
||||||
const FilehandleChange = (value: any) => {
|
|
||||||
// console.log(value,"filevalue");
|
|
||||||
if (value.fileList.length === 0) {
|
|
||||||
formik.setFieldValue(newName, null);
|
|
||||||
} else {
|
|
||||||
formik.setFieldValue(
|
|
||||||
`Questions[${parent_index}].answers[${name}].answer_image`,
|
|
||||||
value?.file?.originFileObj,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const customRequest = async ({ onSuccess, no_label, label_icon }: any) => {
|
|
||||||
onSuccess();
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div className={`ValidationField upload_image_button ${className ?? ""} `}>
|
|
||||||
<label htmlFor={name} className="text">
|
|
||||||
{t(`input.${label || name}`)}
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<Upload
|
|
||||||
disabled={isDisabled}
|
|
||||||
listType="picture"
|
|
||||||
maxCount={1}
|
|
||||||
fileList={[...fileList]}
|
|
||||||
onChange={onChange || FilehandleChange}
|
|
||||||
customRequest={customRequest}
|
|
||||||
className={` w-100`}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
className={isError ? "isError w-100 " : " w-100"}
|
|
||||||
icon={<UploadOutlined />}
|
|
||||||
>
|
|
||||||
{placholder ?? t("input.Click_to_upload_the_image")}
|
|
||||||
</Button>
|
|
||||||
<div className="Error_color"> {isError ? "required" : ""}</div>
|
|
||||||
{errorMsg}
|
|
||||||
</Upload>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default File;
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
import { Form, Input } from "antd";
|
|
||||||
import React from "react";
|
|
||||||
import useFormField from "../../../../../../Hooks/useFormField";
|
|
||||||
import { MdOutlineEdit } from "react-icons/md";
|
|
||||||
import { Field } from "formik";
|
|
||||||
|
|
||||||
const HintField = ({
|
|
||||||
name,
|
|
||||||
label,
|
|
||||||
label2,
|
|
||||||
placeholder,
|
|
||||||
isDisabled,
|
|
||||||
onChange,
|
|
||||||
props,
|
|
||||||
parent_index,
|
|
||||||
id,
|
|
||||||
className,
|
|
||||||
}: any) => {
|
|
||||||
const newName = `Questions[${parent_index}].answers[${name}].hint`;
|
|
||||||
|
|
||||||
const { formik, isError, errorMsg, t } = useFormField(newName, props);
|
|
||||||
const TextFilehandleChange = (
|
|
||||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
|
||||||
) => {
|
|
||||||
// console.log('Change:', e.target.value);
|
|
||||||
formik.setFieldValue(newName, e.target.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`ValidationField w-100 ${className ?? ""} `}>
|
|
||||||
<label htmlFor={name} className="text">
|
|
||||||
{label2 ? label2 : t(`input.${label ? label : name}`)}
|
|
||||||
</label>
|
|
||||||
<Form.Item
|
|
||||||
hasFeedback
|
|
||||||
validateStatus={isError ? "error" : ""}
|
|
||||||
help={isError ? errorMsg : ""}
|
|
||||||
>
|
|
||||||
<Field
|
|
||||||
as={Input}
|
|
||||||
placeholder={t(`input.${placeholder ? placeholder : name}`)}
|
|
||||||
name={newName}
|
|
||||||
disabled={isDisabled}
|
|
||||||
size="large"
|
|
||||||
onChange={onChange || TextFilehandleChange}
|
|
||||||
style={{ width: 200 }}
|
|
||||||
id={id}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default React.memo(HintField);
|
|
||||||
|
|
@ -87,6 +87,12 @@ const Form = () => {
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (Success) {
|
||||||
|
formik.resetForm()
|
||||||
|
setSuccess(false);
|
||||||
|
}
|
||||||
|
}, [Success]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Row className="w-100 exercise_form_container">
|
<Row className="w-100 exercise_form_container">
|
||||||
|
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
import { Button, Upload, UploadFile } from "antd";
|
|
||||||
import useFormField from "../../../../../../Hooks/useFormField";
|
|
||||||
import { UploadOutlined } from "@ant-design/icons";
|
|
||||||
import { useMemo } from "react";
|
|
||||||
|
|
||||||
const File = ({
|
|
||||||
name,
|
|
||||||
label,
|
|
||||||
onChange,
|
|
||||||
isDisabled,
|
|
||||||
placholder,
|
|
||||||
className,
|
|
||||||
props,
|
|
||||||
}: any) => {
|
|
||||||
const newName = `Questions[${name}].image`;
|
|
||||||
|
|
||||||
const { formik, t, isError, errorMsg } = useFormField(newName, props);
|
|
||||||
let imageUrl = formik?.values?.Questions?.[name]?.image ?? null;
|
|
||||||
// console.log(imageUrl);
|
|
||||||
|
|
||||||
const fileList: UploadFile[] = useMemo(() => {
|
|
||||||
if (!imageUrl) return [];
|
|
||||||
|
|
||||||
return [
|
|
||||||
typeof imageUrl === "string"
|
|
||||||
? {
|
|
||||||
uid: "-1",
|
|
||||||
name: "uploaded-image",
|
|
||||||
status: "done",
|
|
||||||
url: imageUrl,
|
|
||||||
thumbUrl: imageUrl,
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
uid: imageUrl.uid || "-1",
|
|
||||||
name: imageUrl.name || "uploaded-image",
|
|
||||||
status: "done",
|
|
||||||
originFileObj: imageUrl,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}, [imageUrl]);
|
|
||||||
// console.log(1);
|
|
||||||
|
|
||||||
const FilehandleChange = (value: any) => {
|
|
||||||
// console.log(value,"filevalue");
|
|
||||||
if (value.fileList.length === 0) {
|
|
||||||
formik.setFieldValue(newName, null);
|
|
||||||
} else {
|
|
||||||
formik.setFieldValue(
|
|
||||||
`Questions[${name}].image`,
|
|
||||||
value?.file?.originFileObj,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const customRequest = async ({ onSuccess, no_label, label_icon }: any) => {
|
|
||||||
onSuccess();
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div className={`ValidationField upload_image_button ${className ?? ""} `}>
|
|
||||||
<label htmlFor={name} className="text">
|
|
||||||
{t(`input.${label || name}`)}
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<Upload
|
|
||||||
disabled={isDisabled}
|
|
||||||
listType="picture"
|
|
||||||
maxCount={1}
|
|
||||||
fileList={[...fileList]}
|
|
||||||
onChange={onChange || FilehandleChange}
|
|
||||||
customRequest={customRequest}
|
|
||||||
className={` w-100`}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
className={isError ? "isError w-100 " : " w-100"}
|
|
||||||
icon={<UploadOutlined />}
|
|
||||||
>
|
|
||||||
{placholder ?? t("input.Click_to_upload_the_image")}
|
|
||||||
</Button>
|
|
||||||
<div className="Error_color"> {isError ? "required" : ""}</div>
|
|
||||||
{errorMsg}
|
|
||||||
</Upload>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default File;
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
import { Form, Input } from "antd";
|
|
||||||
import React from "react";
|
|
||||||
import useFormField from "../../../../../../Hooks/useFormField";
|
|
||||||
import { MdOutlineEdit } from "react-icons/md";
|
|
||||||
import { Field } from "formik";
|
|
||||||
|
|
||||||
const HintField = ({
|
|
||||||
name,
|
|
||||||
label,
|
|
||||||
label2,
|
|
||||||
placeholder,
|
|
||||||
isDisabled,
|
|
||||||
onChange,
|
|
||||||
props,
|
|
||||||
id,
|
|
||||||
className,
|
|
||||||
}: any) => {
|
|
||||||
const newName = `Questions[${name}].hint`;
|
|
||||||
const { formik, isError, errorMsg, t } = useFormField(newName, props);
|
|
||||||
const TextFilehandleChange = (
|
|
||||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
|
||||||
) => {
|
|
||||||
// console.log('Change:', e.target.value);
|
|
||||||
formik.setFieldValue(newName, e.target.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`ValidationField w-100 ${className ?? ""} `}>
|
|
||||||
<label htmlFor={name} className="text">
|
|
||||||
{label2 ? label2 : t(`input.${label ? label : name}`)}
|
|
||||||
</label>
|
|
||||||
<Form.Item
|
|
||||||
hasFeedback
|
|
||||||
validateStatus={isError ? "error" : ""}
|
|
||||||
help={isError ? errorMsg : ""}
|
|
||||||
>
|
|
||||||
<Field
|
|
||||||
as={Input}
|
|
||||||
placeholder={t(`input.${placeholder ? placeholder : name}`)}
|
|
||||||
name={newName}
|
|
||||||
disabled={isDisabled}
|
|
||||||
size="large"
|
|
||||||
onChange={onChange || TextFilehandleChange}
|
|
||||||
style={{ width: 200 }}
|
|
||||||
id={id}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default React.memo(HintField);
|
|
||||||
|
|
@ -1,16 +1,10 @@
|
||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
import { Choice } from "../../../../../../types/Item";
|
import { Choice } from "../../../../../../types/Item";
|
||||||
import ValidationField from "../../../../../../Components/ValidationField/ValidationField";
|
|
||||||
import { useFormikContext } from "formik";
|
import { useFormikContext } from "formik";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { getCharFromNumber } from "../../../../../../utils/getCharFromNumber";
|
import { getCharFromNumber } from "../../../../../../utils/getCharFromNumber";
|
||||||
import TextField from "./TextField";
|
import TextField from "./TextField";
|
||||||
import File from "./File";
|
|
||||||
import { FaTrash } from "react-icons/fa";
|
|
||||||
import { useObjectToEdit } from "../../../../../../zustand/ObjectToEditState";
|
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 ImageBoxField from "../../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
|
||||||
import { GoTrash } from "react-icons/go";
|
import { GoTrash } from "react-icons/go";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,107 +0,0 @@
|
||||||
import { useFormikContext } from "formik";
|
|
||||||
import React from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { FaCirclePlus } from "react-icons/fa6";
|
|
||||||
import Tag from "./Tag";
|
|
||||||
import { useObjectToEdit } from "../../../../../../zustand/ObjectToEditState";
|
|
||||||
import { useGetAllTag } from "../../../../../../api/tags";
|
|
||||||
|
|
||||||
const DynamicTags = ({ parent_index }: { parent_index: number }) => {
|
|
||||||
const formik = useFormikContext<any>();
|
|
||||||
const [t] = useTranslation();
|
|
||||||
const { TagsSearch, setTagsSearch, currentTag, currentParentIndex } =
|
|
||||||
useObjectToEdit();
|
|
||||||
const { data } = useGetAllTag({
|
|
||||||
name: TagsSearch,
|
|
||||||
});
|
|
||||||
const suggests = data?.data;
|
|
||||||
|
|
||||||
const handleAddChoice = () => {
|
|
||||||
const length = formik?.values?.Questions?.[parent_index]?.tags.length;
|
|
||||||
const lastElement =
|
|
||||||
formik?.values?.Questions?.[parent_index]?.tags[length - 1]?.name;
|
|
||||||
setTagsSearch(null);
|
|
||||||
|
|
||||||
if (lastElement !== "") {
|
|
||||||
formik.setFieldValue(`Questions.[${parent_index}].tags`, [
|
|
||||||
...((formik?.values as any)?.Questions?.[parent_index]?.tags as any[]),
|
|
||||||
|
|
||||||
{
|
|
||||||
id: length + "_new",
|
|
||||||
name: "",
|
|
||||||
key: length,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
} else {
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// console.log(formik?.values);
|
|
||||||
// console.log(currentTag);
|
|
||||||
|
|
||||||
const handleChoice = (item: any) => {
|
|
||||||
const length = formik?.values?.Questions?.[parent_index]?.tags?.length;
|
|
||||||
console.log(currentTag);
|
|
||||||
|
|
||||||
formik.setFieldValue(`Questions.[${parent_index}].tags[${currentTag}]`, {
|
|
||||||
...item,
|
|
||||||
key: length,
|
|
||||||
});
|
|
||||||
setTagsSearch(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
// console.log(formik?.values?.tags?.length);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="DynamicTags">
|
|
||||||
{formik?.values?.Questions?.[parent_index]?.tags?.length < 1 && (
|
|
||||||
<p className="add_new_button">
|
|
||||||
<FaCirclePlus size={23} onClick={handleAddChoice} />{" "}
|
|
||||||
{t("header.add_tag")}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="tag_container">
|
|
||||||
<div className="tags">
|
|
||||||
{(
|
|
||||||
((formik?.values as any)?.Questions?.[parent_index]
|
|
||||||
?.tags as any[]) || []
|
|
||||||
).map((item: any, index: number) => {
|
|
||||||
return (
|
|
||||||
<Tag
|
|
||||||
key={index}
|
|
||||||
parent_index={parent_index}
|
|
||||||
index={index}
|
|
||||||
data={item}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{formik?.values?.Questions?.[parent_index]?.tags?.length > 0 && (
|
|
||||||
<p className="add_new_button">
|
|
||||||
<FaCirclePlus onClick={handleAddChoice} size={20} />
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{TagsSearch && currentParentIndex === parent_index && (
|
|
||||||
<div className="suggests">
|
|
||||||
{suggests?.map((item: any, index: number) => {
|
|
||||||
console.log(currentParentIndex === parent_index);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="suggested"
|
|
||||||
key={index}
|
|
||||||
onClick={() => handleChoice(item)}
|
|
||||||
>
|
|
||||||
{item?.name}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DynamicTags;
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
import { useFormikContext } from "formik";
|
|
||||||
import React, { useRef, useEffect } from "react";
|
|
||||||
import { useObjectToEdit } from "../../../../../../zustand/ObjectToEditState";
|
|
||||||
import { FaTrash } from "react-icons/fa";
|
|
||||||
|
|
||||||
const Tag = ({
|
|
||||||
data,
|
|
||||||
index,
|
|
||||||
parent_index,
|
|
||||||
}: {
|
|
||||||
data: any;
|
|
||||||
index: number;
|
|
||||||
parent_index: number;
|
|
||||||
}) => {
|
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
|
||||||
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
||||||
const DEBOUNCE_DELAY = 500;
|
|
||||||
const formik = useFormikContext<any>();
|
|
||||||
const { setTagsSearch, setCurrentTag, setCurrentParentIndex } =
|
|
||||||
useObjectToEdit();
|
|
||||||
console.log(formik?.values?.Questions);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (inputRef.current) {
|
|
||||||
inputRef.current.style.width = `${(formik?.values?.Questions?.[parent_index]?.tags[index]?.name?.length + 1) * 8}px`;
|
|
||||||
}
|
|
||||||
}, [formik?.values?.Questions?.[parent_index]?.tags[index]?.name]);
|
|
||||||
|
|
||||||
const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
// console.log(e.target.value);
|
|
||||||
|
|
||||||
formik.setFieldValue(`Questions.[${parent_index}].tags[${index}]`, {
|
|
||||||
key: parent_index,
|
|
||||||
name: e.target.value,
|
|
||||||
id: `${parent_index}_key`,
|
|
||||||
});
|
|
||||||
setCurrentTag(index);
|
|
||||||
setCurrentParentIndex(parent_index);
|
|
||||||
if (timeoutRef.current) {
|
|
||||||
clearTimeout(timeoutRef.current);
|
|
||||||
}
|
|
||||||
|
|
||||||
timeoutRef.current = setTimeout(() => {
|
|
||||||
setTagsSearch(e.target.value);
|
|
||||||
}, DEBOUNCE_DELAY);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteChoice = () => {
|
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
// Create a copy of current tags array
|
|
||||||
const currentTags = [...formik.values.tags];
|
|
||||||
|
|
||||||
// Remove the item at the specified index from the array
|
|
||||||
currentTags.splice(index, 1);
|
|
||||||
|
|
||||||
console.log(currentTags); // Log the updated tags array
|
|
||||||
|
|
||||||
// Update formik field value with the updated tags array
|
|
||||||
formik.setFieldValue(`Questions.[${parent_index}].tags`, currentTags);
|
|
||||||
|
|
||||||
// Reset search state if needed
|
|
||||||
setTagsSearch(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="tag">
|
|
||||||
<input
|
|
||||||
ref={inputRef}
|
|
||||||
className="tagInput"
|
|
||||||
type="text"
|
|
||||||
value={formik?.values?.Questions?.[parent_index]?.tags[index]?.name}
|
|
||||||
onChange={handleEditInputChange}
|
|
||||||
/>
|
|
||||||
<FaTrash onClick={handleDeleteChoice} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Tag;
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import * as Yup from "yup";
|
import * as Yup from "yup";
|
||||||
import { Question } from "../../../../types/Item";
|
import { Question } from "../../../types/Item";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
|
|
||||||
export const getInitialValues = (objectToEdit: Question): any => {
|
export const getInitialValues = (objectToEdit: Question): any => {
|
||||||
Loading…
Reference in New Issue
Block a user