From 34d8a821b0ced1c436a033f7ed14124c129c05f6 Mon Sep 17 00:00:00 2001
From: karimaldeen <mhmadkarimaldeen@gmail.com>
Date: Sat, 21 Sep 2024 16:10:28 +0300
Subject: [PATCH] add validation

---
 src/Components/LatextInput/LaTeXInputMemo.tsx      |  7 ++++---
 .../ValidationField/utils/ValidationField.scss     |  1 +
 src/Pages/Admin/question/AddPage.tsx               |  2 +-
 src/Pages/Admin/question/Model/ModelForm.tsx       |  3 ++-
 src/Pages/Admin/question/formUtil.ts               | 10 +++++++++-
 src/Styles/Pages/exercise.scss                     | 14 ++++++++++++++
 6 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/Components/LatextInput/LaTeXInputMemo.tsx b/src/Components/LatextInput/LaTeXInputMemo.tsx
index 7bcd3a2..9a3838f 100644
--- a/src/Components/LatextInput/LaTeXInputMemo.tsx
+++ b/src/Components/LatextInput/LaTeXInputMemo.tsx
@@ -18,7 +18,7 @@ const EditLazyModal = React.lazy(() => import("./EditLaTexModal"));
 const LaTeXInputMemo: React.FC<any> =  React.memo(({ field ,form, label, ...props }) => {
   const { name  ,value} = field;
   
-  const { setFieldValue } = form;
+  const { setFieldValue ,touched ,errors } = form;
 
   const { ShowLatexOption, Success } = useObjectToEdit();
   const [showPreview, setShowPreview] = useState(false);      
@@ -58,11 +58,12 @@ const LaTeXInputMemo: React.FC<any> =  React.memo(({ field ,form, label, ...prop
     }
   }, [Success])
   
-
+  const isError = !!touched?.[name] && !!errors?.[name];
+  const errorMessage = isError ? errors?.[name] as string ?? "" : "" ;
   return (
     <div className='LaTeXInput'>
       <label htmlFor={name} className="text">
-        {t(label || name)}
+        <div>{t(label || name)}</div> <div className='error_message'>{t(errorMessage)}</div>
       </label>
 
       <div className='LaTeXInputArea'>
diff --git a/src/Components/ValidationField/utils/ValidationField.scss b/src/Components/ValidationField/utils/ValidationField.scss
index 049c303..1f79cd1 100644
--- a/src/Components/ValidationField/utils/ValidationField.scss
+++ b/src/Components/ValidationField/utils/ValidationField.scss
@@ -16,6 +16,7 @@
     margin-bottom: 7px !important;
     font-weight: bold;
     font-size: 19px;
+
     > span {
       color: transparent;
     }
diff --git a/src/Pages/Admin/question/AddPage.tsx b/src/Pages/Admin/question/AddPage.tsx
index 6345d98..cea8594 100644
--- a/src/Pages/Admin/question/AddPage.tsx
+++ b/src/Pages/Admin/question/AddPage.tsx
@@ -291,7 +291,7 @@ const AddPage: React.FC = () => {
           <div onClick={handleCancel}>{t("practical.back")}</div>
           <div
             className="relative"
-            onClick={()=>{ Loading ? ()=>{} : handleValidateSingleQuestion(values,isValid,handleSubmit)  }}
+            onClick={()=>{ handleSubmit()  }}
           >
             {t("practical.add")}
 
diff --git a/src/Pages/Admin/question/Model/ModelForm.tsx b/src/Pages/Admin/question/Model/ModelForm.tsx
index 6265ae2..9b95d40 100644
--- a/src/Pages/Admin/question/Model/ModelForm.tsx
+++ b/src/Pages/Admin/question/Model/ModelForm.tsx
@@ -10,7 +10,6 @@ import SelectTag from "../../../../Components/CustomFields/SelectTag";
 import useKeyCombination from "../../../../Hooks/useKeyCombination";
 import { CombinationKeyEnum } from "../../../../enums/CombinationKeyEnum";
 import { toast } from "react-toastify";
-import LaTeXInput from "../../../../Components/LatextInput/LaTeXInput";
 import LaTeXInputMemo from "../../../../Components/LatextInput/LaTeXInputMemo";
 import ImageBoxFieldMemo from "../../../../Components/CustomFields/ImageBoxField/ImageBoxFieldMemo";
 
@@ -48,6 +47,8 @@ const Form = () => {
     }
   }, [Success]);
 
+  console.log(formik.errors);
+  
 
   return (
     <Row className="w-100 exercise_form_container">
diff --git a/src/Pages/Admin/question/formUtil.ts b/src/Pages/Admin/question/formUtil.ts
index 645dece..de56145 100644
--- a/src/Pages/Admin/question/formUtil.ts
+++ b/src/Pages/Admin/question/formUtil.ts
@@ -24,7 +24,15 @@ export const getValidationSchema = () => {
   // validate input
   return Yup.object().shape({
     content_image: Yup.string().nullable(),
-    content: Yup.string().nullable(),
+    content: Yup.string().test(
+      "content",
+      "validation.one_of_image_and_content_should_be_enter_in_question",
+      (value: any,options:any) => {
+       const {content,content_image} = options?.parent
+       const haveImageOrContent = !(content)  && !(content_image)          
+        return !haveImageOrContent ;
+      },
+    ),
     answers: Yup.array().of(
       Yup.object().shape({
         content: Yup.string().nullable(),
diff --git a/src/Styles/Pages/exercise.scss b/src/Styles/Pages/exercise.scss
index 0067e88..92d63ca 100644
--- a/src/Styles/Pages/exercise.scss
+++ b/src/Styles/Pages/exercise.scss
@@ -359,4 +359,18 @@
 .ListQuestions{
   @include Scrollbar();
 
+}
+
+
+.LaTeXInput{
+  .text{
+    display: flex !important;
+    align-items: center;
+   gap: 10px;
+   .error_message{
+    color: red;
+    font-weight: bold;
+     font-size: 12px;
+   }
+  }
 }
\ No newline at end of file