From 0586a88cabeb6a1194f5e95bb54ec3a7e3021f0e Mon Sep 17 00:00:00 2001 From: karimaldeen Date: Sat, 14 Sep 2024 11:55:13 +0300 Subject: [PATCH] add validation --- src/Hooks/useFormField.tsx | 1 + src/Layout/Dashboard/FormikFormModel.tsx | 1 + src/Pages/Admin/question/AddPage.tsx | 147 ++++++++++++------ src/Pages/Admin/question/EditPage.tsx | 107 +++++++++++-- .../question/Model/Field/ChoiceFields.tsx | 1 + src/Pages/Admin/question/Model/Malty/Form.tsx | 4 +- .../Model/Malty/Tags/MaltySelectTag.tsx | 4 - src/Pages/Admin/question/Model/ModelForm.tsx | 9 +- src/Pages/Admin/question/Model/formUtil.ts | 34 +++- src/Pages/Auth/FormField.tsx | 22 +-- src/Pages/Auth/LoginForm.tsx | 4 +- src/Pages/Auth/formutils.ts | 4 +- src/translate/ar.json | 4 +- 13 files changed, 242 insertions(+), 100 deletions(-) diff --git a/src/Hooks/useFormField.tsx b/src/Hooks/useFormField.tsx index 81a7f03..c136873 100644 --- a/src/Hooks/useFormField.tsx +++ b/src/Hooks/useFormField.tsx @@ -7,6 +7,7 @@ import { useEffect } from "react"; const useFormField = (name: string, props?: any) => { const [field, meta] = useField({ name, ...props }); + const { t } = useTranslation(); const formik = useFormikContext(); diff --git a/src/Layout/Dashboard/FormikFormModel.tsx b/src/Layout/Dashboard/FormikFormModel.tsx index 6019065..c12a9cc 100644 --- a/src/Layout/Dashboard/FormikFormModel.tsx +++ b/src/Layout/Dashboard/FormikFormModel.tsx @@ -29,6 +29,7 @@ const FormikFormModel: React.FC = ({ initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit} + > {(formik) => { useEffect(() => { diff --git a/src/Pages/Admin/question/AddPage.tsx b/src/Pages/Admin/question/AddPage.tsx index c632a2e..7f96a8d 100644 --- a/src/Pages/Admin/question/AddPage.tsx +++ b/src/Pages/Admin/question/AddPage.tsx @@ -19,6 +19,7 @@ import { Question } from "../../../types/Item"; import BaseForm from "./Model/Malty/Form"; import ModelForm from "./Model/ModelForm"; import { toast } from "react-toastify"; +import { Form, Formik } from "formik"; const AcceptModal = lazy(() => import("./Model/AcceptModal")); const AddPage: React.FC = () => { @@ -30,12 +31,7 @@ const AddPage: React.FC = () => { const [t] = useTranslation(); const { subject_id, lesson_id } = useParams(); - console.log(objectToEdit, "objectToEdit"); - - const handleSubmit = ( - values: any, - { resetForm }: { resetForm: () => void }, - ) => { + const handleSubmit = ( values: any) => { const DataToSend = structuredClone(values); setTagsSearch(null); console.log(1); @@ -95,17 +91,6 @@ const AddPage: React.FC = () => { }; }); - if (answers?.length > 0) { - const isValidAnswers = answers?.some( - (answer: any) => answer?.isCorrect === 1, - ); - console.log(!isValidAnswers); - - if (!isValidAnswers) { - toast.error(t("validation.at_least_one_answer_should_be_correct")); - return; - } - } const NewQuestion = { ...values, @@ -122,6 +107,54 @@ const AddPage: React.FC = () => { } }; + + const handleValidateSingleQuestion = (values:any)=>{ + const haveAnswers = values?.answers?.length > 0 ; + const haveMoreThanOneAnswer = haveAnswers && values?.answers?.length > 1; + const haveOneAnswerRight = haveMoreThanOneAnswer && values?.answers?.some((item:any)=> item?.isCorrect === 1 || item.isCorrect === true ) + if(!haveAnswers){ + 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 ; + } + + } + + const handleValidateBaseQuestion = (values: any) => { + const haveAnswers = values?.Questions?.every((Question: any, QuestionsIndex: number) => { + 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); + + 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; + } + + return true; + }); + + console.log(haveAnswers, "haveAnswers"); + }; + const navigate = useNavigate(); const handleCancel = () => { @@ -129,7 +162,6 @@ const AddPage: React.FC = () => { }; const Loading = LoadingAsync || isLoading useEffect(() => { - console.log("all api success"); if (isSuccess) { setSuccess(true); } @@ -137,19 +169,28 @@ const AddPage: React.FC = () => { if (isBseQuestion) { return ( + +
- + {({ values,handleSubmit }) => ( + +
{t("practical.back")}
-
- +
+ )} + }> @@ -169,29 +212,43 @@ const AddPage: React.FC = () => { } return (
- -
-
- + { + handleSubmit(values); + }} +> + {({ values,handleSubmit }) => ( +
+
+
+ -
-
{t("practical.back")}
- -
-
- + {Loading && ( + + + + )} + +
+ + + )} + + }> diff --git a/src/Pages/Admin/question/EditPage.tsx b/src/Pages/Admin/question/EditPage.tsx index 8535c6c..b68ccb7 100644 --- a/src/Pages/Admin/question/EditPage.tsx +++ b/src/Pages/Admin/question/EditPage.tsx @@ -25,6 +25,7 @@ import BaseForm from "./Model/Malty/Form"; import { Question } from "../../../types/Item"; import { toast } from "react-toastify"; import { deletePathSegments } from "../../../utils/deletePathSegments"; +import { Form, Formik } from "formik"; const EditPage: React.FC = () => { const { subject_id, lesson_id, question_id } = useParams(); @@ -187,6 +188,54 @@ const EditPage: React.FC = () => { }; + const handleValidateSingleQuestion = (values:any)=>{ + const haveAnswers = values?.answers?.length > 0 ; + const haveMoreThanOneAnswer = haveAnswers && values?.answers?.length > 1; + const haveOneAnswerRight = haveMoreThanOneAnswer && values?.answers?.some((item:any)=> item?.isCorrect === 1 || item.isCorrect === true ) + if(!haveAnswers){ + 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 ; + } + +} + +const handleValidateBaseQuestion = (values: any) => { + const haveAnswers = values?.Questions?.every((Question: any, QuestionsIndex: number) => { + 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); + + 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; + } + + return true; + }); + + console.log(haveAnswers, "haveAnswers"); +}; + + useEffect(() => { if (isSuccess) { toast.success(t("validation.the_possess_done_successful")); @@ -202,12 +251,16 @@ const EditPage: React.FC = () => { if (objectToEdit?.isBase) { return (
- -
+ {({ values,handleSubmit }) => ( + +
+
{/*
*/}
@@ -218,8 +271,10 @@ const EditPage: React.FC = () => {
{t("practical.back")}
-
- +
+ )} + +
); } return (
- -
+ + { + handleSubmit(values); + }} +> + {({ values,handleSubmit }) => ( +
+
{/*
*/}
@@ -252,8 +316,13 @@ const EditPage: React.FC = () => {
{t("practical.back")}
-
- + +
+ )} + +
); }; diff --git a/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx b/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx index 19c7003..7539165 100644 --- a/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx +++ b/src/Pages/Admin/question/Model/Field/ChoiceFields.tsx @@ -39,6 +39,7 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => { name={index} id={`choice_${index + 1}`} type="TextArea" + /> diff --git a/src/Pages/Admin/question/Model/Malty/Form.tsx b/src/Pages/Admin/question/Model/Malty/Form.tsx index bad59e2..7bd2d90 100644 --- a/src/Pages/Admin/question/Model/Malty/Form.tsx +++ b/src/Pages/Admin/question/Model/Malty/Form.tsx @@ -86,6 +86,8 @@ const Form = () => { }, ); + + return (
@@ -99,7 +101,7 @@ const Form = () => {
-
+
{((formik?.values as any)?.Questions || [])?.map( (item: Choice, parent_index: number) => { diff --git a/src/Pages/Admin/question/Model/Malty/Tags/MaltySelectTag.tsx b/src/Pages/Admin/question/Model/Malty/Tags/MaltySelectTag.tsx index 18026d3..e140d88 100644 --- a/src/Pages/Admin/question/Model/Malty/Tags/MaltySelectTag.tsx +++ b/src/Pages/Admin/question/Model/Malty/Tags/MaltySelectTag.tsx @@ -41,14 +41,10 @@ const MaltySelectTag = ({ parent_index }: { parent_index: number }) => { ? [{ id: searchValue, name: searchValue }] : []; - console.log(options); const value = formik?.values?.Questions[parent_index]?.tags?.map( (item: any) => item?.id ?? item, ) ?? []; - console.log(formik?.values?.Questions[parent_index]); - - console.log(value); const AllOptions = [...options, ...additionalData]; diff --git a/src/Pages/Admin/question/Model/ModelForm.tsx b/src/Pages/Admin/question/Model/ModelForm.tsx index 483e1d8..2794d0d 100644 --- a/src/Pages/Admin/question/Model/ModelForm.tsx +++ b/src/Pages/Admin/question/Model/ModelForm.tsx @@ -20,7 +20,7 @@ const Form = () => { const handleAddChoice = (fromKeyCombination: boolean = false) => { formik.setFieldValue("answers", [ - ...((formik?.values as any)?.answers as Choice[]), + ...(formik?.values?.answers ?? []) , { content: null, content_image: null, @@ -42,13 +42,12 @@ const Form = () => { useEffect(() => { if (Success) { - formik?.setValues({}); - formik.setErrors({}); + formik.resetForm() setSuccess(false); - console.log(formik.errors); } }, [Success]); + return (
@@ -62,7 +61,7 @@ const Form = () => {
- {formik?.values?.answers?.length < 5 && ( + {(formik?.values?.answers === null || formik?.values?.answers === undefined || formik?.values?.answers?.length < 5) && (

handleAddChoice()} size={23} />{" "} {t("header.add_new_choice")} diff --git a/src/Pages/Admin/question/Model/formUtil.ts b/src/Pages/Admin/question/Model/formUtil.ts index 85d1cd9..0c4240a 100644 --- a/src/Pages/Admin/question/Model/formUtil.ts +++ b/src/Pages/Admin/question/Model/formUtil.ts @@ -6,7 +6,7 @@ export const getInitialValues = (objectToEdit: Question): any => { const tags = objectToEdit?.tags?.map((item: any, index: number) => { return { ...item }; }); - + return { id: objectToEdit?.id ?? null, content: objectToEdit?.content ?? "", @@ -16,7 +16,7 @@ export const getInitialValues = (objectToEdit: Question): any => { hint: objectToEdit?.hint ?? null, isBase: 0, parent_id: objectToEdit?.parent_id ?? "", - answers: objectToEdit?.answers ?? [], + answers: objectToEdit?.answers ?? null, tags: tags ?? [], }; }; @@ -32,6 +32,19 @@ export const getValidationSchema = () => { content_image: Yup.string().nullable(), isCorrect: Yup.boolean(), }), + ).min(2).nullable().test( + "at-least-one-correct", + "At least one answer must be correct", + (answers: any) => { + console.log(answers, "answers"); + if(answers === null){ + return true + } + return answers?.some( + (answer: any) => + answer?.isCorrect === true || answer?.isCorrect === 1, + ); + }, ), }); }; @@ -42,10 +55,18 @@ export const getInitialValuesBase = (objectToEdit: Question): any => { id: tag?.id, name: tag?.name, })); - console.log(item, "item"); + const newAnswers = item?.answers?.map((item:any)=>{ + return { + ...item, + content : item?.content ?? null + } + }) + console.log(newAnswers,"newAnswers"); + return { ...item, + answer:newAnswers, canAnswersBeShuffled: objectToEdit?.canAnswersBeShuffled ? 1 : 0, hint: objectToEdit?.hint ?? "", isBase: 0, @@ -53,7 +74,7 @@ export const getInitialValuesBase = (objectToEdit: Question): any => { }; }); - const questions = newQuestions ?? []; + const questions = newQuestions ?? [{answers:[]}]; return { id: objectToEdit?.id ?? null, @@ -84,12 +105,11 @@ export const getValidationSchemaBase = () => { answer_image: Yup.string().nullable(), isCorrect: Yup.boolean(), }), - ) + ).min(2) .test( "at-least-one-correct", "At least one answer must be correct", (answers: any) => { - console.log(answers, "answers"); return answers.some( (answer: any) => @@ -98,7 +118,7 @@ export const getValidationSchemaBase = () => { }, ), }), - ), + ).min(1), }); }; diff --git a/src/Pages/Auth/FormField.tsx b/src/Pages/Auth/FormField.tsx index 00181ca..28ec2d0 100644 --- a/src/Pages/Auth/FormField.tsx +++ b/src/Pages/Auth/FormField.tsx @@ -14,6 +14,7 @@ import { } from "../../config/AppKey"; import useFormatAuthDataToSelect from "../../utils/useFormatAuthDataToSelect"; import { useTranslation } from "react-i18next"; +import ValidationField from "../../Components/ValidationField/ValidationField"; type FormFieldType = { isLoading: boolean; @@ -25,22 +26,11 @@ const FormField = ({ isLoading }: FormFieldType) => {

{/* */}

{t("تسجيل الدخول إلى حسابك")}

-
- - -
-
+ + + + {/*
@@ -53,7 +43,7 @@ const FormField = ({ isLoading }: FormFieldType) => { className="passwordInput" size="large" /> -
+
*/}