308 lines
9.6 KiB
TypeScript
308 lines
9.6 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import {
|
|
processTags,
|
|
} from "./formUtil";
|
|
import {
|
|
useAddQuestion,
|
|
useDeleteQuestion,
|
|
useGetAllQuestion,
|
|
useUpdateQuestion,
|
|
} from "../../../api/Question";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
|
import { ParamsEnum } from "../../../enums/params";
|
|
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
|
|
import { removeStringKeys } from "../../../utils/removeStringKeys";
|
|
import SpinContainer from "../../../Components/Layout/SpinContainer";
|
|
import { Question } from "../../../types/Item";
|
|
import { toast } from "react-toastify";
|
|
import { deletePathSegments } from "../../../utils/deletePathSegments";
|
|
import BaseFormContainer from "./Model/EditForm/BaseFormContainer";
|
|
import FormContainer from "./Model/EditForm/FormContainer";
|
|
|
|
const EditPage: React.FC = () => {
|
|
const { subject_id, lesson_id, question_id } = useParams<ParamsEnum>();
|
|
const { isBseQuestion, setIsBseQuestion, setTagsSearch, DeletedQuestions, ShowHint, setShowHint, ShowLatexOption, setShowLatexOption } =
|
|
useObjectToEdit();
|
|
|
|
const { mutate, isSuccess, isLoading } = useUpdateQuestion();
|
|
const { mutate: DeleteQuestion } = useDeleteQuestion();
|
|
const { mutate: mutateAdd, isLoading: LoadingAsync } = useAddQuestion();
|
|
|
|
const { data, isLoading: dataLoading } = useGetAllQuestion({
|
|
show: question_id,
|
|
});
|
|
|
|
const { data: Questions, isLoading: QuestionsDataLoading } =
|
|
useGetAllQuestion({
|
|
parent_id: question_id,
|
|
isPaginated: false
|
|
});
|
|
|
|
const objectToEdit = { ...data?.data, Questions: Questions?.data };
|
|
|
|
useEffect(() => {
|
|
if (objectToEdit?.isBase && isBseQuestion !== true) {
|
|
setIsBseQuestion(true);
|
|
}
|
|
}, [objectToEdit?.isBase]);
|
|
|
|
const [t] = useTranslation();
|
|
|
|
const handleSubmit = (values: any) => {
|
|
const DataToSend = structuredClone(values);
|
|
setTagsSearch(null);
|
|
|
|
if (isBseQuestion) {
|
|
|
|
const UpdateBseQuestion = {
|
|
id: DataToSend?.id,
|
|
content: DataToSend?.content,
|
|
content_image: DataToSend?.content_image ?? "",
|
|
};
|
|
if (
|
|
typeof UpdateBseQuestion?.content_image === "string" &&
|
|
UpdateBseQuestion?.content_image !== ""
|
|
) {
|
|
delete UpdateBseQuestion["content_image"];
|
|
}
|
|
console.log(DeletedQuestions, "DeletedQuestions");
|
|
console.log(UpdateBseQuestion);
|
|
|
|
mutate(UpdateBseQuestion);
|
|
|
|
DeletedQuestions?.map((item: any) => {
|
|
DeleteQuestion({ id: item?.id });
|
|
});
|
|
|
|
const Questions = DataToSend?.Questions;
|
|
console.log(Questions, "Questions");
|
|
|
|
Questions?.map((item: Question) => {
|
|
console.log(item);
|
|
if (item?.id) {
|
|
const itemToSend = structuredClone(item);
|
|
const keysToRemove = ["content_image"];
|
|
console.log(itemToSend, "itemToSend");
|
|
|
|
const updatedObject = removeStringKeys(itemToSend, keysToRemove);
|
|
console.log(updatedObject, "updatedObject");
|
|
|
|
const tags = processTags(updatedObject);
|
|
const oldAnswers = [] as any;
|
|
const newAnswers = [] as any;
|
|
|
|
if (updatedObject?.content_image === null) {
|
|
updatedObject["content_image"] = ""
|
|
}
|
|
|
|
updatedObject?.answers?.forEach((item: any) => {
|
|
if (item?.id) {
|
|
if (item?.content_image === null) {
|
|
item["content_image"] = ""
|
|
|
|
}
|
|
oldAnswers.push({ ...item, isCorrect: item?.isCorrect ? 1 : 0 });
|
|
} else {
|
|
newAnswers.push({ ...item, isCorrect: item?.isCorrect ? 1 : 0 });
|
|
}
|
|
});
|
|
const answers = {
|
|
old: oldAnswers,
|
|
new: newAnswers,
|
|
};
|
|
const emptyTag = tags?.new?.length === 0 && tags?.old?.length === 0
|
|
const tagToSend = emptyTag ? "" : tags
|
|
mutate({
|
|
...updatedObject,
|
|
answers,
|
|
tags: tagToSend,
|
|
});
|
|
} else {
|
|
console.log(values?.id);
|
|
|
|
const tags = processTags(item);
|
|
console.log(item, "DataToSend");
|
|
|
|
console.log(tags, "tags");
|
|
mutateAdd({
|
|
...item,
|
|
subject_id: subject_id,
|
|
tags,
|
|
lessons_ids: [lesson_id],
|
|
parent_id: values?.id,
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
const keysToRemove = ["content_image"];
|
|
console.log(DataToSend);
|
|
const updatedObject = removeStringKeys(DataToSend, keysToRemove);
|
|
delete updatedObject["parent_id"];
|
|
const tags = processTags(updatedObject);
|
|
if (!values?.content_image) {
|
|
updatedObject["content_image"] = "";
|
|
}
|
|
|
|
const oldAnswers = [] as any;
|
|
const newAnswers = [] as any;
|
|
updatedObject?.answers?.forEach((item: any) => {
|
|
if (item?.id) {
|
|
console.log(item, "item");
|
|
const deletedImage = item?.content_image === null
|
|
if (deletedImage) {
|
|
oldAnswers.push({ ...item, isCorrect: item?.isCorrect ? 1 : 0, content_image: "" });
|
|
|
|
} else {
|
|
oldAnswers.push({ ...item, isCorrect: item?.isCorrect ? 1 : 0 });
|
|
|
|
}
|
|
} else {
|
|
newAnswers.push({ ...item, isCorrect: item?.isCorrect ? 1 : 0 });
|
|
}
|
|
});
|
|
|
|
const answers = {
|
|
old: oldAnswers,
|
|
new: newAnswers,
|
|
};
|
|
console.log(tags, "tags");
|
|
if (tags?.new?.length < 1 && tags?.old?.length < 1) {
|
|
mutate({ ...updatedObject, answers, tags: "" });
|
|
} else {
|
|
mutate({ ...updatedObject, answers, tags });
|
|
}
|
|
}
|
|
};
|
|
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
const handleValidateSingleQuestion = (values: any, isValid: boolean, handleSubmit: any) => {
|
|
const haveMoreThanOneAnswer = values?.answers?.length > 1;
|
|
const haveOneAnswerRight = haveMoreThanOneAnswer && values?.answers?.some((item: any) => item?.isCorrect === 1 || item.isCorrect === true)
|
|
const haveImageOrContent = haveOneAnswerRight && values?.answers?.some((item: any) => !(item?.content) && !(item.content_image))
|
|
const content = values.content;
|
|
const content_image = values.content_image;
|
|
const haveContentOrContentImage = !!content || !!content_image;
|
|
console.log(haveImageOrContent, "haveImageOrContent");
|
|
if (!haveContentOrContentImage) {
|
|
toast.error(`${t("validation.one_of_image_and_content_should_be_enter_in_question")}`);
|
|
return false;
|
|
}
|
|
|
|
if (!haveMoreThanOneAnswer) {
|
|
toast.error(t("validation.it_should_have_more_than_one_answers"));
|
|
return false;
|
|
}
|
|
if (!haveOneAnswerRight) {
|
|
toast.error(t("validation.it_should_have_more_than_one_correct_answers"));
|
|
return false;
|
|
}
|
|
if (haveImageOrContent) {
|
|
toast.error(t("validation.one_of_image_and_content_should_be_enter_in_answer"))
|
|
return false
|
|
}
|
|
|
|
console.log(1);
|
|
|
|
if (isValid) {
|
|
handleSubmit(values)
|
|
}
|
|
|
|
}
|
|
const handleValidateBaseQuestion = (values: any, isValid: boolean, handleSubmit: any) => {
|
|
const content = values.content;
|
|
const content_image = values.content_image;
|
|
const haveContentOrContentImage = !!content || !!content_image;
|
|
console.log(2);
|
|
|
|
if (!haveContentOrContentImage) {
|
|
toast.error(`${t("validation.one_of_image_and_content_should_be_enter_in_question")}`);
|
|
return false;
|
|
}
|
|
console.log(1);
|
|
|
|
const isValidate = values?.Questions?.every((Question: any, QuestionsIndex: number) => {
|
|
|
|
|
|
const content = Question.content;
|
|
const content_image = Question.content_image;
|
|
const haveContentOrContentImage = !!content || !!content_image;
|
|
if (!haveContentOrContentImage) {
|
|
toast.error(`${t("validation.one_of_image_and_content_should_be_enter_in_question")}`);
|
|
return false;
|
|
}
|
|
|
|
|
|
//// answers
|
|
const answers = Question?.answers;
|
|
const haveAnswers = answers?.length > 0;
|
|
const haveMoreThanOneAnswer = haveAnswers && answers?.length > 1;
|
|
const haveOneAnswerRight = haveMoreThanOneAnswer && answers?.some((item: any) => item?.isCorrect === 1 || item.isCorrect === true);
|
|
const haveImageOrContent = haveOneAnswerRight && answers?.some((item: any) => !(item?.content) && !(item.content_image))
|
|
|
|
|
|
|
|
|
|
if (!haveAnswers) {
|
|
toast.error(t("validation.it_should_have_more_than_one_answers"));
|
|
return false;
|
|
}
|
|
|
|
if (!haveMoreThanOneAnswer) {
|
|
toast.error(t("validation.it_should_have_more_than_one_answers"));
|
|
return false;
|
|
}
|
|
|
|
if (!haveOneAnswerRight) {
|
|
toast.error(t("validation.it_should_have_more_than_one_correct_answers"));
|
|
return false;
|
|
}
|
|
|
|
if (haveImageOrContent) {
|
|
toast.error(t("validation.one_of_image_and_content_should_be_enter_in_answer"))
|
|
return false
|
|
}
|
|
|
|
return true
|
|
});
|
|
|
|
console.log(1);
|
|
|
|
if (isValid && isValidate) {
|
|
console.log(2);
|
|
handleSubmit(values)
|
|
}
|
|
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isSuccess) {
|
|
toast.success(t("validation.the_possess_done_successful"));
|
|
navigate(deletePathSegments(location.pathname, 2));
|
|
}
|
|
}, [isSuccess]);
|
|
|
|
|
|
|
|
|
|
const Loading = LoadingAsync || isLoading
|
|
|
|
if (dataLoading || QuestionsDataLoading) {
|
|
return <SpinContainer />;
|
|
}
|
|
if (objectToEdit?.isBase) {
|
|
return (
|
|
<BaseFormContainer t={t} Loading={Loading} handleSubmit={handleSubmit} handleValidateBaseQuestion={handleValidateBaseQuestion} objectToEdit={objectToEdit} />
|
|
);
|
|
}
|
|
|
|
|
|
return (
|
|
<FormContainer t={t} Loading={Loading} handleSubmit={handleSubmit} handleValidateSingleQuestion={handleValidateSingleQuestion} objectToEdit={objectToEdit} />
|
|
);
|
|
};
|
|
|
|
export default EditPage;
|