#23

src/Hooks/WithDrawer.tsx

@@ -19,7 +19,7 @@ const WithDrawer: React.FC<WithDrawerProps> = ({ children,title ="Basic Drawer",
   return (
     <>
       <Drawer
-        title={title}
+        // title={title}
         placement={placement}
         closable={false}
         onClose={() => setOpen(false)}

src/Layout/Dashboard/SelectField.tsx

@@ -0,0 +1,52 @@
+import { Select } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const SelectField = ({ selectBy, submiteBy, lebel, option }: any) => {
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [t] = useTranslation();
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    setSearchQuery(searchParams.get('search') || '');
+  }, []);
+
+  const handleSearchChange = (value: any) => {
+    if (value || value !== "") {
+      navigate(`${location.pathname}?${selectBy}=${value}`, { replace: true });
+    } else {
+      const params = new URLSearchParams(location.search);
+      params.delete(selectBy ?? "search");
+      navigate(`${location.pathname}?${params.toString()}`, { replace: true });
+    }
+  };
+
+  const handleSelectChange = (value: any) => {
+    if (value) {
+        console.log(`${location.pathname}?${submiteBy}=${value}`);
+        
+      navigate(`${location.pathname}?${submiteBy}=${value}`, { replace: true });
+    } 
+}
+
+  return (
+    <div className='SelectField'>
+      <Select
+        placeholder={t(`${lebel}`)}
+        options={option}
+        size="large"
+        className={`w-100`}
+        allowClear
+        onChange={handleSelectChange}
+        showSearch
+        optionFilterProp="label"
+        onSearch={handleSearchChange}
+      />
+    </div>
+  );
+};
+
+export default React.memo(SelectField);

src/Layout/app/Header.tsx

@@ -38,7 +38,7 @@ const Header = () => {
     <div className='Header'>
       <div className='Header_Left'> 
           <WithDrawer
-    title="Cart Item"
+    // title="Cart Item"
       button={ 
           <div className="Cart_Icon">
           <GiHamburgerMenu  />

src/Layout/app/WithDrawer.tsx

@@ -5,11 +5,10 @@ import {  Drawer, Space } from 'antd';
 interface WithDrawerProps {
   button: React.ReactNode;
   children: ReactNode;
-  title:string;
   className?:string
 }
 
-const WithDrawer: React.FC<WithDrawerProps> = ({ button, children,title ="Basic Drawer",className }) => {
+const WithDrawer: React.FC<WithDrawerProps> = ({ button, children,className }) => {
   const [open, setOpen] = useState(false);
   const [placement, setPlacement] = useState<DrawerProps['placement']>('left');
 
@@ -24,7 +23,7 @@ const WithDrawer: React.FC<WithDrawerProps> = ({ button, children,title ="Basic
         })}
       </Space>
       <Drawer
-        title={title}
+        // title={title}
         placement={What_the_language === "ar" ?  "right"  : "left"}
         closable={false}
         onClose={() => setOpen(false)}

src/Pages/Products/ProductsPage.tsx

@@ -8,6 +8,8 @@ import { useGetProduct } from '../../api/product'
 import { useNavigate } from 'react-router-dom'
 import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
 import SearchField from '../../Layout/Dashboard/SearchField'
+import SelectField from '../../Layout/Dashboard/SelectField'
+import { useGetCategories } from '../../api/Categories'
 
 function ProductsPage() {
 
@@ -15,16 +17,27 @@ function ProductsPage() {
     const {data  ,status } = useGetProduct()
     const navigate = useNavigate()
     const totalRows = data?.meta?.total;
-  
+    const { data:Categories } = useGetCategories()
+    const language = localStorage.getItem("language") ?? "en"
+
+  const SelectData = Categories?.categories?.map((item:any)=>(
+    {
+      label : item?.name[language],
+      value : item?.id
+    }
+  ))
   
 
   return (
     <DashBody status={status as QueryStatusEnum} >
     <DashHeader showAddButton={false} title={'products'}>
-      <div className='RightSide d-flex gap-2 align-center '>
+      <div className='RightSide  d-flex gap-2 align-center  '>
+
+     <SelectField selectBy="category" submiteBy="category_id" lebel="category" option={SelectData} />
      <SearchField searchBy="name"/>
 
      <AddButton  onClick={()=>navigate('/products/add')}></AddButton>
+
      </div>
     </DashHeader>
       

src/Styles/Layout/Layout.scss

@@ -76,8 +76,9 @@ background: var(--bg);
     border: var(--primary);
 }
 .Page_Header{
-    display: flex; align-items: center ; justify-content: space-between;
+    display: flex;  justify-content: space-between;
     margin-bottom: 20px;
+    // align-items: center ;
 
     h1{
         font-size: 30px;
@@ -501,8 +502,8 @@ padding: 10px 40px;
 
    
    
-   @media screen and (max-width: 500px) {
+   @media screen and (max-width: 600px) {
-   .SearchField{
+   .SearchField,.SelectField{
     display: none;
    }
 }
@@ -559,4 +560,26 @@ padding: 10px 40px;
         width: 100%;
         
     }
+}
+
+
+// .withfillter{
+//     display: flex;
+//     flex-direction: column;
+//     align-items: flex-end;
+//     gap: 10px;
+//     >div{
+//         display: flex;
+//         gap: 30px;
+//     }
+// }
+.SelectField{
+    width: 200px;
+}
+.ant-drawer .ant-drawer-body{
+    padding: 0;
+}
+.RightSide{
+    flex-wrap: wrap;
+    justify-content: flex-end;
 }

src/api/helper/ueGetPagination.tsx

@@ -3,34 +3,38 @@ import useAxios from './useAxios';
 import { useLocation, useNavigate } from 'react-router-dom';
 import useAuthState from '../../lib/state mangment/AuthState';
 
-export default function useGetQueryPagination(KEY: string | string[], Api: string, params: any = {}, options: any = {}) {
+export default function useGetQueryPagination(KEY: string | string[], Api: string, params: any = {}, options: any = {}, dontSearchBy?: string) {
   const axios = useAxios();
   const location = useLocation();
-  const pagination = location?.search || '';
+  let pagination = location?.search || '';
-// console.log(params);
+  
-const {logout} = useAuthState()
-const navigate = useNavigate()
 
+  const { logout } = useAuthState();
+  const navigate = useNavigate();
+
+  if (dontSearchBy && pagination.includes(dontSearchBy)) {
+    const searchParams = new URLSearchParams(pagination);
+    searchParams.delete(dontSearchBy);
+    pagination = searchParams.toString();
+  }
+  if (pagination && !pagination.startsWith('?')) {
+    pagination = '?' + pagination;
+  }
+  
   return useQuery(
     [Array.isArray(KEY) ? KEY.join(',') : KEY, pagination], async () => {
-    const response = await axios.get(Api + pagination , {params});
+      const response = await axios.get(Api + pagination, { params });
-    return response.data; 
+      return response.data;
-  },
-  {
-    onError: (error:any) => {
-      if(error?.response?.status === 401 || error?.response?.status === 403){
-          logout()
-          navigate("/auth")
-
-      }
-      
     },
-    refetchOnWindowFocus: false,
+    {
-    
+      onError: (error: any) => {
-    ...options
+        if (error?.response?.status === 401 || error?.response?.status === 403) {
-
+          logout();
-  }
+          navigate("/auth");
+        }
+      },
+      refetchOnWindowFocus: false,
+      ...options
+    }
   );
 }
-
-// export const useGetDynamic = (Api: string) => useGetQueryPagination(Api);

src/api/helper/useGetWithFillter.ts

@@ -0,0 +1,22 @@
+import { useQuery } from 'react-query';
+import useAxios from './useAxios';
+
+export default function useGetQueryPagination(KEY: string | string[], Api: string, options: any = {}) {
+  const axios = useAxios();
+  const pagination = options;
+  
+  return useQuery(
+    [ KEY], async () => {
+    const response = await axios.get(Api + pagination );
+    return response.data; 
+  },
+  {
+    onError: (error:any) => {
+
+    },
+
+
+  }
+  );
+}
+

src/api/product.ts

@@ -22,7 +22,7 @@ const KEY = "Product"
 // const ONEKEY = "Product"
 
 
-export const useGetProduct = (params?:any) => useGetQueryPagination(KEY, API.GET_ALL,params);
+export const useGetProduct = (params?:any) => useGetQueryPagination(KEY, API.GET_ALL,params,{},"category");
 export const useGetOneProduct = (params?:any) => useGetOneQuery(KEY, API.GET_ALL,params);
 
 export const useAddProduct = () => useAddMutation(KEY, API.ADD);