filter category id

src/components/Filters.tsx

@@ -174,6 +174,7 @@ const Filters: FC<FiltersProps> = ({
 
             case 'select':
                 return (
+                    <div className='mt-1'>
                         <Select
                             key={field.name}
                             placeholder={field.placeholder}
@@ -182,6 +183,7 @@ const Filters: FC<FiltersProps> = ({
                             items={field.options}
                             className='min-w-[170px]'
                         />
+                    </div>
                 );
 
             case 'multiselect':

src/pages/food/List.tsx

@@ -19,9 +19,11 @@ const FoodsList: FC = () => {
         handlePageChange,
     } = useFoodFilters()
 
-    const { data: foodsData, isLoading } = useGetFoods(apiParams)
+    const { data: foodsData, isLoading } = useGetFoods(apiParams, filters)
     const { mutate: deleteFood, isPending: isDeleting } = useDeleteFood()
 
+
+
     const foods = foodsData?.data || []
     const columns = getFoodTableColumns({
         onDelete: (id: string) => deleteFood(id),

src/pages/food/components/FoodFiltersFields.tsx

@@ -1,13 +1,27 @@
 import { useMemo } from 'react'
 import type { FieldType } from '@/components/Filters'
+import { useGetCategories } from '../hooks/useFoodData'
 
 export const useFoodFiltersFields = (): FieldType[] => {
+
+    const { data } = useGetCategories()
+
     return useMemo(() => [
         {
             type: 'input',
             name: 'search',
             placeholder: 'جستجو',
         },
-    ], [])
+        {
+            type: 'select',
+            name: 'categoryId',
+            placeholder: 'انتخاب',
+            options: data?.data?.map((item) => {
+                return {
+                    label: item.title,
+                    value: item.id
+                }
+            }) || []
+        },
+    ], [data?.data])
 }
-

src/pages/food/hooks/useFoodData.ts

@@ -5,6 +5,7 @@ import type {
   CreateFoodType,
   GetFoodsParams,
 } from "../types/Types";
+import type { FilterValues } from "@/components/Filters";
 
 export const useCreateFood = () => {
   return useMutation({
@@ -12,10 +13,13 @@ export const useCreateFood = () => {
   });
 };
 
-export const useGetFoods = (params?: GetFoodsParams) => {
+export const useGetFoods = (
+  params?: GetFoodsParams,
+  filters?: FilterValues,
+) => {
   return useQuery({
-    queryKey: ["foods", params],
+    queryKey: ["foods", params, filters],
-    queryFn: () => api.getFoods(params),
+    queryFn: () => api.getFoods(params, filters),
   });
 };
 

src/pages/food/service/FoodService.ts

@@ -8,6 +8,7 @@ import type {
   GetFoodsResponseType,
   GetIconsResponseType,
 } from "../types/Types";
+import type { FilterValues } from "@/components/Filters";
 
 export const createFood = async (params: CreateFoodType) => {
   const { data } = await axios.post(`/admin/foods`, params);
@@ -15,19 +16,23 @@ export const createFood = async (params: CreateFoodType) => {
 };
 
 export const getFoods = async (
-  params?: GetFoodsParams
+  params?: GetFoodsParams,
+  filters?: FilterValues,
 ): Promise<GetFoodsResponseType> => {
   const { data } = await axios.get<GetFoodsResponseType>(`/admin/foods`, {
-    params,
+    params: {
+      ...params,
+      ...filters,
+    },
   });
   return data;
 };
 
 export const getFoodDetails = async (
-  id: string
+  id: string,
 ): Promise<GetFoodDetailsResponseType> => {
   const { data } = await axios.get<GetFoodDetailsResponseType>(
-    `/admin/foods/${id}`
+    `/admin/foods/${id}`,
   );
   return data;
 };
@@ -39,7 +44,7 @@ export const updateFood = async (id: string, params: CreateFoodType) => {
 
 export const getCategories = async (): Promise<GetCategoriesResponseType> => {
   const { data } = await axios.get<GetCategoriesResponseType>(
-    `/admin/categories`
+    `/admin/categories`,
   );
   return data;
 };
@@ -61,7 +66,7 @@ export const deleteCategory = async (id: string) => {
 
 export const updateCategory = async (
   id: string,
-  params: CreateCategoryType
+  params: CreateCategoryType,
 ) => {
   const { data } = await axios.patch(`/admin/categories/${id}`, params);
   return data;