add animations

src/Components/Layout/SideBar/MenuItem.tsx

@@ -37,14 +37,14 @@ export const MenuItem = ({ item, location, index, isOpen }: any) => {
                 className="DropDownIcon"
                 onClick={() => handleDropdown(index)}
               >
-                <MdExpandLess className="sidebar_menu_icaon" />
+                <MdExpandLess className="sidebar_menu_icon" />
               </div>
             ) : (
               <div
                 className="DropDownIcon"
                 onClick={() => handleDropdown(index)}
               >
-                <MdExpandMore className="sidebar_menu_icaon"/>
+                <MdExpandMore className="sidebar_menu_icon"/>
               </div>
             )}
           </>

src/Layout/Dashboard/LayoutModel.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { QueryStatusEnum } from "../../enums/QueryStatus";
 import SpinContainer from "../../Components/Layout/SpinContainer";
 import { MdCancel } from "react-icons/md";
+import { Form, Formik } from "formik";
 
 interface LayoutModalProps {
   isAddModal?: boolean;
@@ -65,12 +66,29 @@ const LayoutModel = ({
         open={isOpen === ModelEnum}
         onCancel={handleCancel}
       >
-        <FormikForm
+
-          handleSubmit={handleSubmit}
+<Formik
-          initialValues={getInitialValues}
+      enableReinitialize={true}
-          validationSchema={getValidationSchema}
+      initialValues={getInitialValues}
-        >
+      validationSchema={getValidationSchema}
-          <header>
+      onSubmit={handleSubmit}
+      
+    >
+      {(formik) => {
+        useEffect(() => {
+          if (isOpen === "" || isOpen === "isSuccess") {
+            formik.setErrors({});
+            formik.resetForm();
+          }
+        }, [isOpen]);
+
+        console.log(formik.initialValues);
+        console.log(formik?.values);
+        
+        
+        return <Form className="w-100">
+
+<header>
             <span>
               {t(`practical.${isAddModal ? "add" : "edit"}`)}{" "}
               {t(`models.${modelTitle}`)}{" "}
@@ -88,7 +106,7 @@ const LayoutModel = ({
               </div>
               <button
                 className="add_button"
-                disabled={status === QueryStatusEnum.LOADING}
+                disabled={status === QueryStatusEnum.LOADING || !formik.dirty}
                 type="submit"
               >
                 {t(`practical.${isAddModal ? "add" : "edit"}`)}
@@ -100,7 +118,10 @@ const LayoutModel = ({
               </button>
             </div>
           </main>
-        </FormikForm>
+
+        </Form>;
+      }}
+    </Formik>
       </Modal>
     </>
   );

src/Pages/Admin/question/AddPage.tsx

@@ -26,7 +26,7 @@ const AddPage: React.FC = () => {
 
   const { mutateAsync,isLoading:LoadingAsync } = useAddQuestionAsync();
   const { mutate, isLoading, isSuccess } = useAddQuestion();
-  const { isBseQuestion, setTagsSearch, setSuccess } =
+  const { isBseQuestion, setTagsSearch, setSuccess , ShowHint,setShowHint } =
     useObjectToEdit();
 
   const [t] = useTranslation();

src/Pages/Admin/question/EditPage.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Modal, Spin } from "antd";
+import { Checkbox, Modal, Popover, Spin } from "antd";
 import {
   getInitialValues,
   getValidationSchema,
@@ -26,10 +26,12 @@ import { toast } from "react-toastify";
 import { deletePathSegments } from "../../../utils/deletePathSegments";
 import { Form, Formik } from "formik";
 import { MdOutlineArrowForwardIos } from "react-icons/md";
+import { SettingFilled } from "@ant-design/icons";
+import { CheckboxProps } from "antd/lib";
 
 const EditPage: React.FC = () => {
   const { subject_id, lesson_id, question_id } = useParams<ParamsEnum>();
-  const { isBseQuestion, setIsBseQuestion, setTagsSearch, DeletedQuestions } =
+  const { isBseQuestion, setIsBseQuestion, setTagsSearch, DeletedQuestions , ShowHint,setShowHint } =
     useObjectToEdit();
 
   const { mutate, isSuccess, isLoading } = useUpdateQuestion();
@@ -60,6 +62,7 @@ const EditPage: React.FC = () => {
     setTagsSearch(null);
     
     if (isBseQuestion) {
+
       const UpdateBseQuestion = {
         id: DataToSend?.id,
         content: DataToSend?.content,
@@ -74,7 +77,7 @@ const EditPage: React.FC = () => {
       console.log(DeletedQuestions, "DeletedQuestions");
       console.log(UpdateBseQuestion);
 
-      mutate(UpdateBseQuestion);
+      // mutate(UpdateBseQuestion);
 
       DeletedQuestions?.map((item: any) => {
         DeleteQuestion({ id: item?.id });
@@ -97,8 +100,16 @@ const EditPage: React.FC = () => {
           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 });
@@ -108,11 +119,12 @@ const EditPage: React.FC = () => {
             old: oldAnswers,
             new: newAnswers,
           };
-          console.log(answers);
+          const emptyTag = tags?.new?.length === 0 &&  tags?.old?.length === 0
+            const tagToSend = emptyTag  ? "" :  tags
           mutate({
             ...updatedObject,
             answers,
-            tags,
+            tags:tagToSend,
           });
         } else {
           console.log(values?.id);
@@ -247,6 +259,22 @@ const handleNavigateToPage = () => {
     }
   }, [isSuccess]);
 
+  const onChange: CheckboxProps['onChange'] = (e) => {
+    setShowHint(e.target.checked);
+  };
+
+  const contentSetting = (
+    <div>
+    
+      <Checkbox checked={ShowHint} onChange={onChange}>
+      { t("header.show_hint")}
+      </Checkbox>
+
+    </div>
+  );
+
+
+
   const Loading = LoadingAsync || isLoading
 
   if (dataLoading || QuestionsDataLoading) {
@@ -277,7 +305,13 @@ const handleNavigateToPage = () => {
               <div>
                 {t("practical.edit")} {t("models.exercise")}{" "}
               </div>
+              <div className="SettingEdit">
+              <Popover   trigger="click" content={contentSetting}>
+          <SettingFilled/>
+          
+  </Popover>
               <div>{t("header.exercise")}</div>
+              </div>
             </header>
             <BaseForm />
             <div className="exercise_add_buttons">
@@ -321,7 +355,7 @@ const handleNavigateToPage = () => {
     handleSubmit(values); 
   }}
 >
-  {({ values,handleSubmit }) => (
+  {({ values,handleSubmit , dirty }) => (
     <Form className="w-100">
   <main className="w-100 exercise_add_main">
           {/* <Header/> */}
@@ -335,13 +369,13 @@ const handleNavigateToPage = () => {
           <div className="exercise_add_buttons">
             <div onClick={handleCancel}>{t("practical.back")}</div>
             <button
-            disabled={Loading}
+            disabled={Loading || !dirty}
             className="relative"
             onClick={()=>{handleValidateSingleQuestion(values) ;handleSubmit(values)}}
             onSubmit={()=>{handleValidateSingleQuestion(values) ;handleSubmit(values) }}
             type="submit"
+            
           >              {t("practical.edit")}
-
               {Loading && (
                 <span className="Spinier_Div">
                   <Spin />

src/Pages/Admin/question/Model/Field/ChoiceFields.tsx

@@ -11,21 +11,23 @@ import { GoTrash } from "react-icons/go";
 import { Popconfirm } from "antd";
 import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
 
-const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
+const ChoiceFields = ({ index }: { index: number; data: Choice }) => {
   const formik = useFormikContext<any>();
 
   const [t] = useTranslation();
   const { ShowHint } = useObjectToEdit();
 
-  const handleDeleteChoice = () => {
+  const handleDeleteChoice = () => {  
-    console.log(index);
+    document.getElementById(`ChoiceField_${index}`)?.classList.add("exit")    
-    console.log(formik.values.answers[index]);
-
     const updatedAnswers = formik.values.answers.filter(
       (_: any, i: any) => i !== index,
     );
+    setTimeout(() => {
+      formik.setFieldValue("answers", updatedAnswers);
+      document.getElementById(`ChoiceField_${index}`)?.classList.remove("exit")
+
+    }, 500);
 
-    formik.setFieldValue("answers", updatedAnswers);
   };
 
   const values = formik?.values?.answers?.[index] ;
@@ -40,7 +42,7 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
   
   return (
     <>
-      <div className="ChoiceFields">
+      <div id={`ChoiceField_${index}`} className="ChoiceFields">
         <TextField
           className="textarea_exercise"
           placeholder={"choice"}
@@ -87,7 +89,6 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
               {t("header.delete_choice")}
               <GoTrash
                 className="trash_icon"
-                
                 size={17}
               />
             </p>

src/Pages/Admin/question/Model/Malty/ChoiceField/ChoiceFields.tsx

@@ -26,25 +26,19 @@ const ChoiceFields = ({
   const [t] = useTranslation();
   const { ShowHint } = useObjectToEdit();
   const handleDeleteChoice = () => {
-    const arrayLength = formik.values.Questions?.[parent_index].answers?.length;
+    document.getElementById(`ChoiceField_${parent_index}_${index}`)?.classList.add("exit")    
-
-    console.log(arrayLength);
-
-    if (arrayLength === 1) {
-      toast.error(
-        t("validation.Sorry, the question must have at least one option"),
-      );
-      return;
-    }
 
     const updatedAnswers = formik.values.Questions?.[
       parent_index
     ].answers.filter((_: any, i: any) => i !== index);
-    formik.setFieldValue(`Questions[${parent_index}].answers`, updatedAnswers);
+    setTimeout(() => {
+      formik.setFieldValue(`Questions[${parent_index}].answers`, updatedAnswers);
+      document.getElementById(`ChoiceField_${parent_index}_${index}`)?.classList.remove("exit")    
+
+    }, 500);
   };
 
   const values = formik.values.Questions?.[parent_index]?.answers?.[index] ;
-  console.log(values,"values");
   
   const handelCanDeleteAnswers = ()=>{
     const content = values?.content ;
@@ -58,7 +52,7 @@ const ChoiceFields = ({
 
   return (
     <>
-      <div className="ChoiceFields">
+      <div id={`ChoiceField_${parent_index}_${index}`} className="ChoiceFields">
         <TextField
           className="textarea_exercise"
           placeholder={"choice"}

src/Pages/Admin/question/Model/Malty/Form.tsx

@@ -26,7 +26,6 @@ const Form = () => {
     parent_index: number,
     fromKeyCombination: boolean = false,
   ) => {
-    console.log(parent_index);
 
     formik.setFieldValue(`Questions.[${parent_index}].answers`, [
       ...((formik?.values as any)?.Questions?.[parent_index]

src/Pages/Admin/question/Page.tsx

@@ -51,6 +51,7 @@ const TableHeader = () => {
     {name:LessonName, path:`lesson/${lesson_id  }`}
   ]);
 
+  
   return (
     <div className="TableWithHeader">
       <Suspense fallback={<Spin />}>

src/Pages/Admin/question/formUtil.ts

@@ -24,7 +24,7 @@ export const getValidationSchema = () => {
   // validate input
   return Yup.object().shape({
     content_image: Yup.string().nullable(),
-    content: Yup.string().required("validation.required").nullable(),
+    content: Yup.string().nullable(),
     answers: Yup.array().of(
       Yup.object().shape({
         content: Yup.string().nullable(),
@@ -97,7 +97,7 @@ export const getValidationSchemaBase = () => {
         answers: Yup.array()
           .of(
             Yup.object().shape({
-              content: Yup.string().required("validation.required"),
+              content: Yup.string(),
               answer_image: Yup.string().nullable(),
               isCorrect: Yup.boolean(),
             }),

src/Pages/Auth/FormField.tsx

@@ -10,7 +10,6 @@ type FormFieldType = {
 const FormField = ({ isLoading }: FormFieldType) => {
   const [t] = useTranslation();
     const {isValid} = useFormikContext();
-    console.log(isValid,"isValid");
     
   return (
     <Form className="AuthForm">
@@ -20,20 +19,6 @@ const FormField = ({ isLoading }: FormFieldType) => {
       <ValidationField name="username" label="username" />
 
         <ValidationField name="password" label="password" />
-      {/* <div className="AuthInput">
-        <label className="form-label" htmlFor="password">
-          {t("input.Password")}
-        </label>
-        <Field
-          placeholder={t("input.Password")}
-          as={Input.Password}
-          type="password"
-          id="password"
-          name="password"
-          className="passwordInput"
-          size="large"
-        />
-      </div> */}
 
       <button disabled={ !isValid || isLoading} type="submit" className="auth_submit_button">
         {t("practical.login")}

src/Pages/Auth/LoginForm.tsx

@@ -1,12 +1,10 @@
 import React, { useEffect } from "react";
 import { Formik } from "formik";
 import useAuthState from "../../zustand/AuthState";
-import useNavigateOnSuccess from "../../Hooks/useNavigateOnSuccess";
 import { useLoginAdmin } from "../../api/auth";
 import FormField from "./FormField";
-import { initialValues, validationSchema } from "./formutils";
+import { initialValues, validationSchema } from "./formUtils";
 import { FormValues } from "../../types/Auth";
-import { toast } from "react-toastify";
 import { useTranslation } from "react-i18next";
 import { getLocalStorage } from "../../utils/LocalStorage";
 import { USER_KEY } from "../../config/AppKey";
@@ -39,7 +37,7 @@ const LoginForm = () => {
 
   return (
     <div className="LoginForm">
-      <Formik initialValues={initialValues} onSubmit={handelSubmit} isInitialValid={false}  validationSchema={validationSchema} >
+      <Formik initialValues={initialValues} onSubmit={handelSubmit} validateOnMount={true}  validationSchema={validationSchema} >
         {(formikProps) => <FormField isLoading={isLoading} />}
       </Formik>
     </div>

src/Pages/Home/Dummy.tsx

@@ -5,7 +5,7 @@ import { Select } from "antd";
 
 const Dummy = () => {
   const [t] = useTranslation();
-  const { FilterButton, FilterBody } = useFilter();
+  // const { FilterButton, FilterBody } = useFilter();
   return (
     <div className="DummyHomePage">
       
@@ -16,8 +16,8 @@ const Dummy = () => {
       <Select 
         style={{width:"200px"}}
         showSearch
-      /> */}
+      />
-      
+       */}
     </div>
   );
 };

src/Styles/App/App.scss

@@ -81,8 +81,25 @@ svg {
 }
 
 .DropDownIcon{
-  .sidebar_menu_icaon{
+  .sidebar_menu_icon{
     background: transparent !important;
     color: var(--primary) !important;
   }
+}
+
+.back_button,button{
+  cursor: pointer;
+      transition: .5s ease-in-out;
+      &:hover{
+        scale: 1.02;
+      }
+}
+
+
+svg{
+  cursor: pointer;
+  transition: .5s ease-in-out;
+  &:hover{
+    scale: 1.1;
+  }
 }

src/Styles/DataTable/FillterNav.scss

@@ -58,8 +58,14 @@
   justify-content: center;
   gap: 7px;
   font-size: 14px;
+  
   svg {
     font-size: 16px;
     
   }
+  transition: .4s ease-in-out;
+
+  &:hover{
+    scale: 1.1;
+  }
 }

src/Styles/Layout/DataTable.scss

@@ -1,7 +1,7 @@
 .DataTable {
   width: 100%;
   border-radius: 0 0 10px 10px;
-  box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 32px 2px #080F3414;
 }
 
 .ant-table-cell {

src/Styles/Pages/exercise.scss

@@ -65,6 +65,11 @@
       gap: 5px;
       font-size: 1vw;
       width: 10vw;
+      cursor: pointer;
+      transition: .5s ease-in-out;
+      &:hover{
+        scale: 1.1;
+      }
     }
   }
 }
@@ -144,6 +149,10 @@
   div{
     margin-left: 25px;
     display: flex;
+    align-items: center;
+  }
+  .SettingEdit{
+    display: flex; gap: 20px;
   }
   img {
     cursor: pointer;
@@ -268,9 +277,9 @@
 
 
 .Choices{
-  padding-inline: 20px;
+  padding-inline: 40px;
   .textarea_exercise,.hint{
-    width: calc(50vw - 10px) !important;
+    width: calc(50vw - 30px) !important;
   }
   .ValidationField{
    
@@ -281,9 +290,9 @@
 }
 
 .QuestionFIeld{
-  padding-inline: 10px;
+  padding-inline: 20px;
   .textarea_exercise{
-    width: calc(50vw - 10px) !important;
+    width: calc(50vw - 20px) !important;
 
   }
   
@@ -296,7 +305,7 @@
 
 .Choices.ChoicesMalty{
   .textarea_exercise,.hint{
-    width: calc(50vw - 20px) !important;
+    width: calc(50vw - 40px) !important;
   }
   .ValidationField{
    
@@ -309,4 +318,36 @@
 
 .question_header_setting{
   margin-inline: 40px;
+}
+
+.Choices {
+  transition: 0.5s ease-in-out ;
+  animation: fadeIn .5s ease-in-out ;
+}
+
+.exit {
+  transition: 0.5s ease-in-out ;
+  animation: fadeOut .5s ease-in-out ; 
+}
+
+
+@keyframes fadeIn {
+  0% {
+    transform: translateY(-40px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-40px);
+    opacity: 0;
+  }
 }

src/zustand/ObjectToEditState.ts

@@ -52,6 +52,6 @@ export const useObjectToEdit = create<ModelState>((set) => ({
   setDeletedQuestions: (data) => set(() => ({ DeletedQuestions: data })),
   SavedQuestionData: [],
   setSavedQuestionData: (data) => set(() => ({ SavedQuestionData: data })),
-  ShowHint: true,
+  ShowHint: false,
   setShowHint: (data) => set(() => ({ ShowHint: data })),
 }));