From 21cbcc91bbdea0413a532bb08e95eede035e0370 Mon Sep 17 00:00:00 2001
From: karimaldeen <mhmadkarimaldeen@gmail.com>
Date: Sun, 15 Sep 2024 11:28:51 +0300
Subject: [PATCH] change tag

---
 .../ImageBoxField/ImageBoxField.scss          |  1 +
 src/Layout/Dashboard/PageHeader.tsx           |  8 +-
 src/Pages/Admin/Tags/Model/ModelForm.tsx      |  2 +-
 src/Pages/Admin/Tags/field/SelectTag.tsx      | 81 +++++++++++++++++++
 src/Pages/Admin/Tags/synonyms/DynamicTags.tsx | 21 ++++-
 src/Pages/Admin/Tags/synonyms/Tag.tsx         | 33 ++++----
 src/Styles/Pages/exercise.scss                | 14 +++-
 7 files changed, 130 insertions(+), 30 deletions(-)
 create mode 100644 src/Pages/Admin/Tags/field/SelectTag.tsx

diff --git a/src/Components/CustomFields/ImageBoxField/ImageBoxField.scss b/src/Components/CustomFields/ImageBoxField/ImageBoxField.scss
index 66e2f2f..6ac8a4e 100644
--- a/src/Components/CustomFields/ImageBoxField/ImageBoxField.scss
+++ b/src/Components/CustomFields/ImageBoxField/ImageBoxField.scss
@@ -9,6 +9,7 @@
     margin-block: 10px;
     border-radius: 5px;
     z-index: 9999999 !important;
+    cursor: pointer;
     .ImageBoxIcon {
       cursor: pointer;
     }
diff --git a/src/Layout/Dashboard/PageHeader.tsx b/src/Layout/Dashboard/PageHeader.tsx
index 85085c8..79773e4 100644
--- a/src/Layout/Dashboard/PageHeader.tsx
+++ b/src/Layout/Dashboard/PageHeader.tsx
@@ -1,10 +1,8 @@
 
-import { Button } from "antd";
 import { BsPlusCircleFill } from "react-icons/bs";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import useModalHandler from "../../utils/useModalHandler";
-import { MdOutlineArrowForwardIos } from "react-icons/md";
 import { deletePathSegments } from "../../utils/deletePathSegments";
 import { getPrevPathRoute } from "../../utils/getPrevPathRoute";
 import PageTitleComponent from "./PageTitle";
@@ -33,10 +31,10 @@ const PageHeader = ({
     if (PrevPath === 0) {
       return;
     }
-    // navigate(deletePathSegments(location.pathname, PrevPath));
+    navigate(deletePathSegments(location.pathname, PrevPath));
   };
   const handleNavigateToPage = (location: string) => {
-    // navigate(location);
+    navigate(location);
   };
 
   console.log();
@@ -46,7 +44,7 @@ const PageHeader = ({
         <span className="page_header_links" onClick={handelNavigate}>
           <h1 className="page_title">{t(`PageTitle.${pageTitle}`)}</h1>
           <span className="page_links">
-            <MdOutlineArrowForwardIos /> <PageTitleComponent/>
+            <PageTitleComponent/>
           </span>
         </span>
         { addModal ? canAdd && (
diff --git a/src/Pages/Admin/Tags/Model/ModelForm.tsx b/src/Pages/Admin/Tags/Model/ModelForm.tsx
index 20abab5..a8e5c27 100644
--- a/src/Pages/Admin/Tags/Model/ModelForm.tsx
+++ b/src/Pages/Admin/Tags/Model/ModelForm.tsx
@@ -9,7 +9,7 @@ const Form = () => {
         <ValidationField placeholder="name" label="name" name="name" />
       </Col>
 
-      <div>
+      <div className="DynamicTags">
         <DynamicTags />
       </div>
     </Row>
diff --git a/src/Pages/Admin/Tags/field/SelectTag.tsx b/src/Pages/Admin/Tags/field/SelectTag.tsx
new file mode 100644
index 0000000..5a307cb
--- /dev/null
+++ b/src/Pages/Admin/Tags/field/SelectTag.tsx
@@ -0,0 +1,81 @@
+import React, { useState, useMemo } from "react";
+import { Select, Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import { useFormikContext } from "formik";
+import { useDebounce } from "../../../../utils/useDebounce";
+import { useGetAllTag } from "../../../../api/tags";
+
+const SelectTag: React.FC = () => {
+  const [searchValue, setSearchValue] = useState<string>("");
+
+  const [fieldValue, setFieldValue] = useState<string>("");
+  const formik = useFormikContext<any>();
+  const handleChange = (value: string[]) => {
+    console.log(value);
+
+    formik.setFieldValue("tags", value);
+    setSearchValue("");
+    setFieldValue("");
+  };
+
+  const handleSearch = useDebounce((value: string) => {
+    setSearchValue(value);
+  });
+
+  const handleFieldChange = (value: string) => {
+    setFieldValue(value);
+  };
+
+  const handleBlur = () => {
+    setSearchValue("");
+    setFieldValue("");
+  };
+
+  const { data, isLoading } = useGetAllTag({
+    name: searchValue,
+  });
+
+  const [t] = useTranslation();
+
+  const options = data?.data ?? [];
+  const additionalData =
+    options.length < 1 && searchValue.length > 1 && !isLoading
+      ? [{ id: searchValue, name: searchValue }]
+      : [];
+
+  const value =
+    formik?.values?.tags?.map((item: any) => item?.id ?? item) ?? [];
+
+  const AllOptions = [...options, ...additionalData];
+
+  return (
+    <div className="SelectTag">
+      <label htmlFor="">{t("models.tag")}</label>
+      <Select
+        mode="multiple"
+        allowClear
+        style={{ width: "100%", height: "40px" }}
+        placeholder=""
+        fieldNames={{ label: "name", value: "id" }}
+        onChange={handleChange}
+        options={AllOptions}
+        filterOption={false}
+        loading={isLoading}
+        notFoundContent={isLoading ? <Spin /> : t("practical.not_found")}
+        onSearch={(value) => {
+          handleSearch(value);
+          handleFieldChange(value);
+        }}
+        searchValue={fieldValue}
+        onDropdownVisibleChange={(open) => {
+          if (!open) {
+            handleBlur();
+          }
+        }}
+        value={value}
+      />
+    </div>
+  );
+};
+
+export default SelectTag;
diff --git a/src/Pages/Admin/Tags/synonyms/DynamicTags.tsx b/src/Pages/Admin/Tags/synonyms/DynamicTags.tsx
index a4b9117..aa60834 100644
--- a/src/Pages/Admin/Tags/synonyms/DynamicTags.tsx
+++ b/src/Pages/Admin/Tags/synonyms/DynamicTags.tsx
@@ -1,5 +1,5 @@
 import { useFormikContext } from "formik";
-import React from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { FaCirclePlus } from "react-icons/fa6";
 import Tag from "./Tag";
@@ -8,20 +8,37 @@ const DynamicTags = () => {
   const formik = useFormikContext<any>();
   const [t] = useTranslation();
 
-  console.log(formik?.values?.synonyms);
 
   const handleAddChoice = () => {
     const length = formik?.values?.synonyms.length;
     const lastElement = formik?.values?.synonyms[length - 1];
 
+      
     if (lastElement !== "") {
       formik.setFieldValue("synonyms", [
         ...((formik?.values as any)?.synonyms as any[]),
         "",
       ]);
+
+
+    
+      
     } else {
     }
   };
+  
+  
+  const lastElementIndex = formik?.values?.synonyms?.length - 1;
+  useEffect(() => {
+    
+    const currentElement = document.getElementById(`synonyms_${lastElementIndex}`)
+      
+    if (currentElement) {
+      currentElement.focus(); // Set focus on the element
+    }
+    console.log(currentElement,"currentElement");
+  }, [lastElementIndex])
+  
   // console.log(formik?.values);
   // console.log(currentTag);
 
diff --git a/src/Pages/Admin/Tags/synonyms/Tag.tsx b/src/Pages/Admin/Tags/synonyms/Tag.tsx
index 7622ccc..9ed844e 100644
--- a/src/Pages/Admin/Tags/synonyms/Tag.tsx
+++ b/src/Pages/Admin/Tags/synonyms/Tag.tsx
@@ -4,57 +4,52 @@ import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
 import { FaTrash } from "react-icons/fa";
 
 const Tag = ({ data, index }: { data: any; index: number }) => {
-  const inputRef = useRef<HTMLInputElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const formik = useFormikContext<any>();
   const { setTagsSearch, setCurrentTag } = useObjectToEdit();
 
   useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.style.width = `${(formik?.values?.synonyms[index]?.length + 1) * 8}px`;
+    if (textareaRef.current) {
+      // Adjust the height of the textarea based on content
+      textareaRef.current.style.height = 'auto'; // Reset height
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; // Set to scroll height
     }
   }, [formik?.values?.synonyms[index]]);
-  console.log(formik?.values?.synonyms);
-  console.log(index);
 
-  const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // console.log(e.target.value);
+  const handleEditInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     formik.setFieldValue(`synonyms[${index}]`, e.target.value);
     setTagsSearch(e.target.value);
     setCurrentTag(index);
   };
 
   const handleInputBlur = () => {
-    // setTagsSearch(null)
+    // Optionally reset search state
+    // setTagsSearch(null);
   };
 
   const handleDeleteChoice = () => {
-    console.log(data);
-    // Create a copy of current tags array
     const currentTags = [...formik.values.synonyms];
-    // 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("synonyms", currentTags);
-
-    // Reset search state if needed
     setTagsSearch(null);
   };
 
   return (
     <div className="tag">
-      <input
-        ref={inputRef}
+      <textarea
+        id={`synonyms_${index}`}
+        ref={textareaRef}
         className="tagInput"
-        type="text"
         value={formik?.values?.synonyms[index]}
         onChange={handleEditInputChange}
         onBlur={handleInputBlur}
+        rows={1} 
+        style={{ resize: 'none', overflow: 'hidden' }} 
       />
       <FaTrash onClick={handleDeleteChoice} />
     </div>
   );
 };
 
-export default Tag;
+export default Tag;
\ No newline at end of file
diff --git a/src/Styles/Pages/exercise.scss b/src/Styles/Pages/exercise.scss
index 2ba2a34..6a2078e 100644
--- a/src/Styles/Pages/exercise.scss
+++ b/src/Styles/Pages/exercise.scss
@@ -42,6 +42,9 @@
   .exercise_add_main {
     background: var(--bg);
     padding: 10px 2vw;
+    max-height: 84vh;
+    overflow-y: scroll;
+    @include Scrollbar();
   }
   .exercise_add_buttons {
     display: flex;
@@ -90,19 +93,24 @@
   background: rgba(49, 130, 206, 0.15);
   color: #3182ce;
   min-width: 50px;
-  padding: 3px 10px;
+  padding: 5px 10px;
   border-radius: 5px;
+  display: flex;
+  align-items: center;
+
   svg {
   }
 }
 .tagInput {
   all: unset;
-  min-width: 50px;
+  min-width: 30px;
   padding: 3px 10px;
   text-align: center;
   font-size: 13px;
 }
-
+.DynamicTags{
+  padding: 2px 15px;
+}
 .suggests {
   display: flex;
   gap: 20px;