hosseintaromi
/
admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(products-list): add pagination to products list and update filter handling

This commit is contained in:
hossein taromi 2025-08-11 13:55:41 +03:30
parent e601a2cc5a
commit 9bf5d63d1b
1 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/products/products-list/ProductsListPage.tsx
View File

@ -8,6 +8,7 @@ import { Button } from "@/components/ui/Button";
import { Trash2, Edit3, Plus, Package, Eye, Image } from "lucide-react";
import { Modal } from "@/components/ui/Modal";
import { persianToEnglish } from '../../../utils/numberUtils';
import { Pagination } from "@/components/ui/Pagination";
const ProductsTableSkeleton = () => (
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
@ -71,14 +72,16 @@ const ProductsListPage = () => {
category_id: '',
status: '',
min_price: '',
max_price: ''
max_price: '',
page: 1,
limit: 100,
});
const { data: productsData, isLoading, error } = useProducts({
...filters,
category_id: filters.category_id ? Number(filters.category_id) : undefined,
min_price: filters.min_price ? Number(filters.min_price) : undefined,
max_price: filters.max_price ? Number(filters.max_price) : undefined
max_price: filters.max_price ? Number(filters.max_price) : undefined,
});
const { data: categories } = useCategories();
const { mutate: deleteProduct, isPending: isDeleting } = useDeleteProduct();
@ -108,15 +111,15 @@ const ProductsListPage = () => {
};
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFilters(prev => ({ ...prev, search: e.target.value }));
setFilters(prev => ({ ...prev, search: e.target.value, page: 1 }));
};
const handleCategoryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
setFilters(prev => ({ ...prev, category_id: e.target.value }));
setFilters(prev => ({ ...prev, category_id: e.target.value, page: 1 }));
};
const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
setFilters(prev => ({ ...prev, status: e.target.value }));
setFilters(prev => ({ ...prev, status: e.target.value, page: 1 }));
};
const formatPrice = (price: number) => {
@ -142,6 +145,11 @@ const ProductsListPage = () => {
}
};
const total = productsData?.total || 0;
const currentPage = productsData?.page || filters.page;
const perPage = productsData?.per_page || filters.limit;
const totalPages = Math.max(1, Math.ceil((total || 0) / (perPage || 20)));
if (error) {
return (
<div className="p-6">
@ -233,7 +241,7 @@ const ProductsListPage = () => {
value={filters.min_price}
onChange={(e) => {
const converted = persianToEnglish(e.target.value);
setFilters(prev => ({ ...prev, min_price: converted }));
setFilters(prev => ({ ...prev, min_price: converted, page: 1 }));
}}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-gray-700 dark:text-gray-100"
/>
@ -244,7 +252,7 @@ const ProductsListPage = () => {
value={filters.max_price}
onChange={(e) => {
const converted = persianToEnglish(e.target.value);
setFilters(prev => ({ ...prev, max_price: converted }));
setFilters(prev => ({ ...prev, max_price: converted, page: 1 }));
}}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-gray-700 dark:text-gray-100"
/>
@ -435,6 +443,15 @@ const ProductsListPage = () => {
</div>
)}
{/* Pagination */}
<Pagination
currentPage={currentPage}
totalPages={totalPages}
itemsPerPage={perPage}
totalItems={total}
onPageChange={(page) => setFilters(prev => ({ ...prev, page }))}
/>
{/* Delete Confirmation Modal */}
<Modal
isOpen={!!deleteProductId}