From 084762e51e225d9498d9217a0d8fc6117480410b Mon Sep 17 00:00:00 2001
From: karimaldeen <mhmadkarimaldeen@gmail.com>
Date: Mon, 9 Sep 2024 12:51:56 +0300
Subject: [PATCH] add tag select

---
 src/Components/CustomFields/SelectTag.tsx     | 74 +++++++++++++++++++
 src/Pages/Admin/question/Model/ModelForm.tsx  |  6 +-
 .../Admin/question/Model/Tags/SelectTag.tsx   | 20 ++---
 src/Pages/Auth/LoginForm.tsx                  | 21 +++++-
 src/Styles/Pages/exercise.scss                |  9 +++
 src/api/config.ts                             |  2 +-
 6 files changed, 116 insertions(+), 16 deletions(-)
 create mode 100644 src/Components/CustomFields/SelectTag.tsx

diff --git a/src/Components/CustomFields/SelectTag.tsx b/src/Components/CustomFields/SelectTag.tsx
new file mode 100644
index 0000000..7e2ae54
--- /dev/null
+++ b/src/Components/CustomFields/SelectTag.tsx
@@ -0,0 +1,74 @@
+import React, { useState, useMemo } from 'react';
+import { Select, Spin } from 'antd';
+import { useTranslation } from 'react-i18next';
+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 handleChange = (value: string[]) => {
+    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 ?? []
+  console.log(options,"options");
+  const additionalData = options?.length < 1 && searchValue.length > 1 && !isLoading ? [{id:`new_${searchValue}`,name:searchValue}] :[];
+  console.log(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={[...options,...additionalData]}
+      filterOption={false}
+      loading={isLoading}
+      notFoundContent={isLoading ? <Spin /> : t("practical.not_found")}
+      onSearch={(value) => {
+        handleSearch(value);
+        handleFieldChange(value);
+      }}
+      searchValue={fieldValue}
+      onDropdownVisibleChange={(open) => {
+        if (!open) {
+          handleBlur();
+        }
+      }}
+    />
+    </div>
+  );
+};
+
+export default SelectTag;
diff --git a/src/Pages/Admin/question/Model/ModelForm.tsx b/src/Pages/Admin/question/Model/ModelForm.tsx
index 55908bd..7dd6d8b 100644
--- a/src/Pages/Admin/question/Model/ModelForm.tsx
+++ b/src/Pages/Admin/question/Model/ModelForm.tsx
@@ -57,7 +57,11 @@ const Form = () => {
         </p> 
       )}
       {/* <DynamicTags/>        */}
-      {/* <SelectTag/> */}
+      <div className="exercise_form_width">
+
+
+      <SelectTag/>
+      </div>
     </Row>
   );
 };
diff --git a/src/Pages/Admin/question/Model/Tags/SelectTag.tsx b/src/Pages/Admin/question/Model/Tags/SelectTag.tsx
index 6fae086..4cd0164 100644
--- a/src/Pages/Admin/question/Model/Tags/SelectTag.tsx
+++ b/src/Pages/Admin/question/Model/Tags/SelectTag.tsx
@@ -34,16 +34,11 @@ const SelectTag: React.FC = () => {
 
   const [t] = useTranslation();
 
-  const options = useMemo(() => {
-    const apiOptions = data?.data ?? [];
-
-    if (searchValue && !apiOptions.some((opt: any) => opt.name === searchValue)) {
-      return [...apiOptions, { id: searchValue, name: searchValue }];
-    }
-
-    return apiOptions;
-  }, [data, searchValue]);
-
+  const options = data?.data ?? []
+  console.log(options,"options");
+  const additionalData = options?.length < 1 && searchValue.length > 1 && !isLoading ? [{id:`new_${searchValue}`,name:searchValue}] :[];
+  console.log(additionalData);
+  
   return (
     <div className='SelectTag'>
     
@@ -54,10 +49,11 @@ const SelectTag: React.FC = () => {
       mode="multiple"
       allowClear
       style={{ width: '100%' ,height:"40px"}}
-      placeholder="Please select"
+      placeholder=""
       fieldNames={{ label: 'name', value: 'id' }}
       onChange={handleChange}
-      options={options}
+      options={[...options,...additionalData]}
+      filterOption={false}
       loading={isLoading}
       notFoundContent={isLoading ? <Spin /> : t("practical.not_found")}
       onSearch={(value) => {
diff --git a/src/Pages/Auth/LoginForm.tsx b/src/Pages/Auth/LoginForm.tsx
index 5afdb16..d1636c1 100644
--- a/src/Pages/Auth/LoginForm.tsx
+++ b/src/Pages/Auth/LoginForm.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Formik } from "formik";
 import useAuthState from "../../zustand/AuthState";
 import useNavigateOnSuccess from "../../Hooks/useNavigateOnSuccess";
@@ -8,6 +8,8 @@ import { initialValues } 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";
 
 const LoginForm = () => {
   const { mutate, isLoading, isSuccess, data } = useLoginAdmin();
@@ -21,7 +23,22 @@ const LoginForm = () => {
   const LoginData = {
     ...data,
   } as any;
-  useNavigateOnSuccess(isSuccess, "/", () => login(LoginData?.data as any));
+  
+  const LocalType = getLocalStorage(USER_KEY)?.type ?? false ;
+  useEffect(() => {
+
+    if(isSuccess){
+     login(LoginData?.data as any)
+     
+    }
+   }, [isSuccess])
+ 
+   useEffect(() => {
+     if(LocalType ){
+       window.location.href = ("/")
+     }
+   }, [LocalType])
+
 
   return (
     <div className="LoginForm">
diff --git a/src/Styles/Pages/exercise.scss b/src/Styles/Pages/exercise.scss
index 5753c97..6ff6f75 100644
--- a/src/Styles/Pages/exercise.scss
+++ b/src/Styles/Pages/exercise.scss
@@ -183,4 +183,13 @@
   flex-direction: column;
   gap: 10px;
   margin-block: 10px;
+}
+
+.exercise_form_width{
+
+  max-width: 50vw;
+  >*{
+    width: 100%;
+   
+  }
 }
\ No newline at end of file
diff --git a/src/api/config.ts b/src/api/config.ts
index ede836d..8297a6a 100644
--- a/src/api/config.ts
+++ b/src/api/config.ts
@@ -1,5 +1,5 @@
 
-export const BaseURL = "https://nerd-back.point-dev.net/api/";
+export const BaseURL = "https://exercise-automation.point-dev.net/api/";
 
 export const ImageBaseURL = "https://exercise-automation.point-dev.net/";
 export const HEADER_KEY = "X-Custom-Query-Key";