From d77e83c08d710ee132a69510b17aebe6567191d8 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Sun, 23 Nov 2025 16:03:26 +0330 Subject: [PATCH] list of shipment methods --- src/pages/shipmentMethod/List.tsx | 49 ++++++++++- .../ShipmentMethodFiltersFields.tsx | 13 +++ .../components/ShipmentMethodTableColumns.tsx | 81 +++++++++++++++++++ .../hooks/useShipmentMethodData.ts | 29 ++++++- .../hooks/useShipmentMethodFilters.ts | 44 ++++++++++ .../service/ShipmentMethodService.ts | 18 ++++- src/pages/shipmentMethod/types/Types.ts | 6 ++ 7 files changed, 229 insertions(+), 11 deletions(-) create mode 100644 src/pages/shipmentMethod/components/ShipmentMethodFiltersFields.tsx create mode 100644 src/pages/shipmentMethod/components/ShipmentMethodTableColumns.tsx create mode 100644 src/pages/shipmentMethod/hooks/useShipmentMethodFilters.ts diff --git a/src/pages/shipmentMethod/List.tsx b/src/pages/shipmentMethod/List.tsx index e425cbc..2545338 100644 --- a/src/pages/shipmentMethod/List.tsx +++ b/src/pages/shipmentMethod/List.tsx @@ -1,13 +1,36 @@ import { type FC } from 'react' -import { useGetRestaurantShipmentMethods } from './hooks/useShipmentMethodData' +import Table from '@/components/Table' +import Filters from '@/components/Filters' +import { useGetRestaurantShipmentMethods, useDeleteRestaurantShipmentMethod } from './hooks/useShipmentMethodData' +import { useShipmentMethodFilters } from './hooks/useShipmentMethodFilters' +import { getShipmentMethodTableColumns } from './components/ShipmentMethodTableColumns' +import { useShipmentMethodFiltersFields } from './components/ShipmentMethodFiltersFields' +import { Add } from 'iconsax-react' import { Link } from 'react-router-dom' import { Pages } from '@/config/Pages' import Button from '@/components/Button' -import { Add } from 'iconsax-react' const ShipmentMethodList: FC = () => { + const { + filters, + currentPage, + apiParams, + handleFiltersChange, + handlePageChange, + limit, + } = useShipmentMethodFilters() - const { data: shipmentMethodsData, isLoading } = useGetRestaurantShipmentMethods() + const { data: shipmentMethodsData, isLoading } = useGetRestaurantShipmentMethods(apiParams) + const { mutate: deleteShipmentMethod, isPending: isDeleting } = useDeleteRestaurantShipmentMethod() + + const shipmentMethods = shipmentMethodsData?.data || [] + const columns = getShipmentMethodTableColumns({ + onDelete: (id: string) => deleteShipmentMethod(id), + isDeleting + }) + const filterFields = useShipmentMethodFiltersFields() + + const totalPages = Math.ceil(shipmentMethods.length / limit) || 1 return (
@@ -22,6 +45,26 @@ const ShipmentMethodList: FC = () => {
+ +
+ +
+ + ) } diff --git a/src/pages/shipmentMethod/components/ShipmentMethodFiltersFields.tsx b/src/pages/shipmentMethod/components/ShipmentMethodFiltersFields.tsx new file mode 100644 index 0000000..e07091e --- /dev/null +++ b/src/pages/shipmentMethod/components/ShipmentMethodFiltersFields.tsx @@ -0,0 +1,13 @@ +import { useMemo } from 'react' +import type { FieldType } from '@/components/Filters' + +export const useShipmentMethodFiltersFields = (): FieldType[] => { + return useMemo(() => [ + { + type: 'input', + name: 'search', + placeholder: 'جستجو', + }, + ], []) +} + diff --git a/src/pages/shipmentMethod/components/ShipmentMethodTableColumns.tsx b/src/pages/shipmentMethod/components/ShipmentMethodTableColumns.tsx new file mode 100644 index 0000000..07df42f --- /dev/null +++ b/src/pages/shipmentMethod/components/ShipmentMethodTableColumns.tsx @@ -0,0 +1,81 @@ +import type { ColumnType } from '@/components/types/TableTypes' +import type { RestaurantShipmentMethod } from '../types/Types' +import TrashWithConfrim from '@/components/TrashWithConfrim' +import { Eye } from 'iconsax-react' +import { Link } from 'react-router-dom' +import { Pages } from '@/config/Pages' +import Status from '@/components/Status' + +interface GetShipmentMethodTableColumnsParams { + onDelete?: (id: string) => void + isDeleting?: boolean +} + +export const getShipmentMethodTableColumns = ({ onDelete, isDeleting }: GetShipmentMethodTableColumnsParams = {}): ColumnType[] => { + return [ + { + key: 'title', + title: 'عنوان', + render: (item: RestaurantShipmentMethod) => { + return item.shipmentMethod?.title || '-' + } + }, + { + key: 'description', + title: 'توضیحات', + render: (item: RestaurantShipmentMethod) => { + return item.shipmentMethod?.description || '-' + } + }, + { + key: 'price', + title: 'قیمت', + render: (item: RestaurantShipmentMethod) => { + return item.price ? `${item.price.toLocaleString()} تومان` : '-' + } + }, + { + key: 'minOrderPrice', + title: 'حداقل قیمت سفارش', + render: (item: RestaurantShipmentMethod) => { + return item.minOrderPrice ? `${item.minOrderPrice.toLocaleString()} تومان` : '-' + } + }, + { + key: 'isActive', + title: 'وضعیت', + render: (item: RestaurantShipmentMethod) => { + return ( + + ) + } + }, + { + key: 'actions', + title: '', + render: (item: RestaurantShipmentMethod) => { + return ( +
+ + + + {onDelete && ( + onDelete(item.id)} + isloading={isDeleting} + /> + )} +
+ ) + } + }, + ] +} + diff --git a/src/pages/shipmentMethod/hooks/useShipmentMethodData.ts b/src/pages/shipmentMethod/hooks/useShipmentMethodData.ts index c9a4373..db417b8 100644 --- a/src/pages/shipmentMethod/hooks/useShipmentMethodData.ts +++ b/src/pages/shipmentMethod/hooks/useShipmentMethodData.ts @@ -1,10 +1,13 @@ -import { useMutation, useQuery } from "@tanstack/react-query"; +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import * as api from "../service/ShipmentMethodService"; +import type { GetRestaurantShipmentMethodsParams } from "../types/Types"; -export const useGetRestaurantShipmentMethods = () => { +export const useGetRestaurantShipmentMethods = ( + params?: GetRestaurantShipmentMethodsParams +) => { return useQuery({ - queryKey: ["restaurant-shipment-methods"], - queryFn: api.getRestaurantShipmentMethods, + queryKey: ["restaurant-shipment-methods", params], + queryFn: () => api.getRestaurantShipmentMethods(params), }); }; @@ -16,7 +19,25 @@ export const useGetShipmentMethods = () => { }; export const useCreateRestaurantShipmentMethod = () => { + const queryClient = useQueryClient(); return useMutation({ mutationFn: api.createRestaurantShipmentMethod, + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ["restaurant-shipment-methods"], + }); + }, + }); +}; + +export const useDeleteRestaurantShipmentMethod = () => { + const queryClient = useQueryClient(); + return useMutation({ + mutationFn: api.deleteRestaurantShipmentMethod, + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ["restaurant-shipment-methods"], + }); + }, }); }; diff --git a/src/pages/shipmentMethod/hooks/useShipmentMethodFilters.ts b/src/pages/shipmentMethod/hooks/useShipmentMethodFilters.ts new file mode 100644 index 0000000..2c541ff --- /dev/null +++ b/src/pages/shipmentMethod/hooks/useShipmentMethodFilters.ts @@ -0,0 +1,44 @@ +import { useState, useMemo } from "react"; +import type { FilterValues } from "@/components/Filters"; +import type { GetRestaurantShipmentMethodsParams } from "../types/Types"; + +const DEFAULT_PAGE = 1; +const DEFAULT_LIMIT = 10; + +export const useShipmentMethodFilters = () => { + const [filters, setFilters] = useState({}); + const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE); + const [limit] = useState(DEFAULT_LIMIT); + + const apiParams = useMemo(() => { + const params: GetRestaurantShipmentMethodsParams = { + page: currentPage, + limit: limit, + }; + + if (filters.search) { + params.search = filters.search; + } + + return params; + }, [filters, currentPage, limit]); + + const handleFiltersChange = (newFilters: FilterValues) => { + setFilters(newFilters); + setCurrentPage(DEFAULT_PAGE); + }; + + const handlePageChange = (page: number) => { + setCurrentPage(page); + }; + + return { + filters, + currentPage, + apiParams, + handleFiltersChange, + handlePageChange, + limit, + }; +}; + diff --git a/src/pages/shipmentMethod/service/ShipmentMethodService.ts b/src/pages/shipmentMethod/service/ShipmentMethodService.ts index 9407326..c8f71ae 100644 --- a/src/pages/shipmentMethod/service/ShipmentMethodService.ts +++ b/src/pages/shipmentMethod/service/ShipmentMethodService.ts @@ -3,6 +3,7 @@ import type { CreateShipmentMethodType, GetShipmentMethodsResponseType, GetRestaurantShipmentMethodsResponseType, + GetRestaurantShipmentMethodsParams, } from "../types/Types"; export const getShipmentMethods = async (): Promise< @@ -12,10 +13,12 @@ export const getShipmentMethods = async (): Promise< return data; }; -export const getRestaurantShipmentMethods = async (): Promise< - GetRestaurantShipmentMethodsResponseType -> => { - const { data } = await axios.get("/admin/restaurant-shipment-methods"); +export const getRestaurantShipmentMethods = async ( + params?: GetRestaurantShipmentMethodsParams +): Promise => { + const { data } = await axios.get("/admin/restaurant-shipment-methods", { + params, + }); return data; }; @@ -28,3 +31,10 @@ export const createRestaurantShipmentMethod = async ( ); return data; }; + +export const deleteRestaurantShipmentMethod = async (id: string) => { + const { data } = await axios.delete( + `/admin/restaurant-shipment-methods/${id}` + ); + return data; +}; diff --git a/src/pages/shipmentMethod/types/Types.ts b/src/pages/shipmentMethod/types/Types.ts index c7cc4f8..90e495a 100644 --- a/src/pages/shipmentMethod/types/Types.ts +++ b/src/pages/shipmentMethod/types/Types.ts @@ -34,3 +34,9 @@ export type RestaurantShipmentMethod = { export type GetRestaurantShipmentMethodsResponseType = IResponse< RestaurantShipmentMethod[] >; + +export type GetRestaurantShipmentMethodsParams = { + page?: number; + limit?: number; + search?: string; +};