add tag select

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;

src/Pages/Admin/question/Model/ModelForm.tsx

@@ -57,7 +57,11 @@ const Form = () => {
         </p> 
       )}
       {/* <DynamicTags/>        */}
-      {/* <SelectTag/> */}
+      <div className="exercise_form_width">
+
+
+      <SelectTag/>
+      </div>
     </Row>
   );
 };

src/Pages/Admin/question/Model/Tags/SelectTag.tsx

@@ -34,15 +34,10 @@ const SelectTag: React.FC = () => {
 
   const [t] = useTranslation();
 
-  const options = useMemo(() => {
+  const options = data?.data ?? []
-    const apiOptions = data?.data ?? [];
+  console.log(options,"options");
-
+  const additionalData = options?.length < 1 && searchValue.length > 1 && !isLoading ? [{id:`new_${searchValue}`,name:searchValue}] :[];
-    if (searchValue && !apiOptions.some((opt: any) => opt.name === searchValue)) {
+  console.log(additionalData);
-      return [...apiOptions, { id: searchValue, name: searchValue }];
-    }
-
-    return apiOptions;
-  }, [data, searchValue]);
   
   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) => {

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">

src/Styles/Pages/exercise.scss

@@ -184,3 +184,12 @@
   gap: 10px;
   margin-block: 10px;
 }
+
+.exercise_form_width{
+
+  max-width: 50vw;
+  >*{
+    width: 100%;
+   
+  }
+}

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";