pagination with limit
This commit is contained in:
hamid zarghami
+101
-74
@@ -1,64 +1,90 @@
|
||||
import React from "react";
|
||||
|
||||
interface PaginationProps {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
onPageChange: (page: number) => void;
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
onPageChange: (page: number) => void;
|
||||
limit?: number;
|
||||
onLimitChange?: (limit: number) => void;
|
||||
limitOptions?: number[];
|
||||
}
|
||||
|
||||
const Pagination: React.FC<PaginationProps> = ({
|
||||
currentPage,
|
||||
totalPages,
|
||||
onPageChange,
|
||||
}) => {
|
||||
const getPageNumbers = () => {
|
||||
const pageNumbers: (number | string)[] = [];
|
||||
const maxVisiblePages = 5;
|
||||
const Pagination: React.FC<PaginationProps> = ({ currentPage, totalPages, onPageChange, limit = 10, onLimitChange, limitOptions = [10, 20, 50] }) => {
|
||||
const handleLimitChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
onLimitChange?.(Number(event.target.value));
|
||||
onPageChange(1);
|
||||
};
|
||||
|
||||
if (totalPages <= maxVisiblePages) {
|
||||
// اگر تعداد صفحات کم است، همه را نشان بده
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
} else {
|
||||
// همیشه صفحه اول را نشان بده
|
||||
pageNumbers.push(1);
|
||||
const getPageNumbers = () => {
|
||||
const pageNumbers: (number | string)[] = [];
|
||||
const maxVisiblePages = 5;
|
||||
|
||||
if (currentPage <= 3) {
|
||||
// در صفحات اولیه (1, 2, 3)
|
||||
for (let i = 2; i <= Math.min(4, totalPages - 1); i++) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
if (totalPages > 5) {
|
||||
pageNumbers.push("...");
|
||||
}
|
||||
pageNumbers.push(totalPages);
|
||||
} else if (currentPage >= totalPages - 2) {
|
||||
// در صفحات آخر
|
||||
pageNumbers.push("...");
|
||||
for (let i = totalPages - 3; i <= totalPages; i++) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
} else {
|
||||
// در صفحات وسط
|
||||
pageNumbers.push("...");
|
||||
for (let i = currentPage - 1; i <= currentPage + 1; i++) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
pageNumbers.push("...");
|
||||
pageNumbers.push(totalPages);
|
||||
}
|
||||
if (totalPages <= maxVisiblePages) {
|
||||
// اگر تعداد صفحات کم است، همه را نشان بده
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
} else {
|
||||
// همیشه صفحه اول را نشان بده
|
||||
pageNumbers.push(1);
|
||||
|
||||
if (currentPage <= 3) {
|
||||
// در صفحات اولیه (1, 2, 3)
|
||||
for (let i = 2; i <= Math.min(4, totalPages - 1); i++) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
if (totalPages > 5) {
|
||||
pageNumbers.push("...");
|
||||
}
|
||||
pageNumbers.push(totalPages);
|
||||
} else if (currentPage >= totalPages - 2) {
|
||||
// در صفحات آخر
|
||||
pageNumbers.push("...");
|
||||
for (let i = totalPages - 3; i <= totalPages; i++) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
} else {
|
||||
// در صفحات وسط
|
||||
pageNumbers.push("...");
|
||||
for (let i = currentPage - 1; i <= currentPage + 1; i++) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
pageNumbers.push("...");
|
||||
pageNumbers.push(totalPages);
|
||||
}
|
||||
}
|
||||
|
||||
return pageNumbers;
|
||||
};
|
||||
return pageNumbers;
|
||||
};
|
||||
|
||||
const pageNumbers = getPageNumbers();
|
||||
const pageNumbers = getPageNumbers();
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 text-xs justify-center items-center mt-4">
|
||||
{/* دکمه قبلی */}
|
||||
{/* <button
|
||||
return (
|
||||
<div className="flex flex-wrap gap-4 text-xs justify-center items-center mt-4">
|
||||
{onLimitChange && (
|
||||
<label className="flex items-center gap-2 text-gray-600">
|
||||
<span>تعداد در صفحه</span>
|
||||
<select
|
||||
aria-label="تعداد آیتم در صفحه"
|
||||
className="h-8 rounded-md border border-[#EAECF5] bg-white px-2 outline-none focus:border-primary"
|
||||
value={limit}
|
||||
onChange={handleLimitChange}
|
||||
>
|
||||
{limitOptions.map((option) => (
|
||||
<option
|
||||
key={option}
|
||||
value={option}
|
||||
>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 items-center">
|
||||
{/* دکمه قبلی */}
|
||||
{/* <button
|
||||
className={`px-3 py-1 rounded-md ${currentPage === 1
|
||||
? "text-gray-400 cursor-not-allowed"
|
||||
: "text-blue-600 hover:bg-gray-100"
|
||||
@@ -69,28 +95,28 @@ const Pagination: React.FC<PaginationProps> = ({
|
||||
قبلی
|
||||
</button> */}
|
||||
|
||||
{/* شماره صفحات */}
|
||||
{pageNumbers.map((page, index) =>
|
||||
typeof page === "number" ? (
|
||||
<button
|
||||
key={`page-${page}`}
|
||||
className={`size-8 rounded-md ${currentPage === page
|
||||
? "bg-primary text-white"
|
||||
: "text-primary bg-[#EAECF5] hover:bg-gray-100"
|
||||
}`}
|
||||
onClick={() => onPageChange(page)}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
) : (
|
||||
<span key={`ellipsis-${index}`} className="px-3 py-1 text-gray-500">
|
||||
{page}
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
{/* شماره صفحات */}
|
||||
{pageNumbers.map((page, index) =>
|
||||
typeof page === "number" ? (
|
||||
<button
|
||||
key={`page-${page}`}
|
||||
className={`size-8 rounded-md ${currentPage === page ? "bg-primary text-white" : "text-primary bg-[#EAECF5] hover:bg-gray-100"}`}
|
||||
onClick={() => onPageChange(page)}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
) : (
|
||||
<span
|
||||
key={`ellipsis-${index}`}
|
||||
className="px-3 py-1 text-gray-500"
|
||||
>
|
||||
{page}
|
||||
</span>
|
||||
),
|
||||
)}
|
||||
|
||||
{/* دکمه بعدی */}
|
||||
{/* <button
|
||||
{/* دکمه بعدی */}
|
||||
{/* <button
|
||||
className={`px-3 py-1 rounded-md ${currentPage === totalPages
|
||||
? "text-gray-400 cursor-not-allowed"
|
||||
: "text-blue-600 hover:bg-gray-100"
|
||||
@@ -100,8 +126,9 @@ const Pagination: React.FC<PaginationProps> = ({
|
||||
>
|
||||
بعدی
|
||||
</button> */}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pagination;
|
||||
export default Pagination;
|
||||
|
||||
+127
-127
@@ -1,134 +1,134 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import { Add, Eye } from 'iconsax-react'
|
||||
import Select from '../../components/Select'
|
||||
import Input from '../../components/Input'
|
||||
import Td from '../../components/Td'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import { useGetCustomers } from './hooks/useCustomerData'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import { CustomerItemType } from './types/CustomerTypes'
|
||||
import Pagination from '../../components/Pagination'
|
||||
import { Add, Eye } from "iconsax-react";
|
||||
import { FC, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import Button from "../../components/Button";
|
||||
import Input from "../../components/Input";
|
||||
import PageLoading from "../../components/PageLoading";
|
||||
import Pagination from "../../components/Pagination";
|
||||
import Select from "../../components/Select";
|
||||
import Td from "../../components/Td";
|
||||
import { Pages } from "../../config/Pages";
|
||||
import { useGetCustomers } from "./hooks/useCustomerData";
|
||||
import { CustomerItemType } from "./types/CustomerTypes";
|
||||
|
||||
const CustomerList: FC = () => {
|
||||
const { t } = useTranslation("global");
|
||||
const [page, setPage] = useState(1);
|
||||
const [limit, setLimit] = useState(10);
|
||||
const getCustomers = useGetCustomers(page, limit);
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [page, setPage] = useState(1)
|
||||
const getCustomers = useGetCustomers(page)
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex w-full justify-between items-center'>
|
||||
<div>
|
||||
{t('customer.customer_list')}
|
||||
</div>
|
||||
<Link to={Pages.customer.create}>
|
||||
<Button
|
||||
className='px-5'
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<Add
|
||||
className='size-5'
|
||||
color='#fff'
|
||||
/>
|
||||
<div>{t('customer.add_cutomer')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<div className="flex w-full justify-between items-center">
|
||||
<div>{t("customer.customer_list")}</div>
|
||||
<Link to={Pages.customer.create}>
|
||||
<Button className="px-5">
|
||||
<div className="flex gap-2">
|
||||
<Add
|
||||
className="size-5"
|
||||
color="#fff"
|
||||
/>
|
||||
<div>{t("customer.add_cutomer")}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='flex justify-between items-center mt-12'>
|
||||
<div className='flex gap-4'>
|
||||
<Select
|
||||
className='w-36'
|
||||
items={[
|
||||
{ label: 'All', value: 'all' },
|
||||
{ label: 'Active', value: 'active' },
|
||||
{ label: 'Inactive', value: 'inactive' },
|
||||
]}
|
||||
placeholder={t('service.category')}
|
||||
/>
|
||||
<Select
|
||||
className='w-36'
|
||||
items={[
|
||||
{ label: 'All', value: 'all' },
|
||||
{ label: 'Active', value: 'active' },
|
||||
{ label: 'Inactive', value: 'inactive' },
|
||||
]}
|
||||
placeholder={t('service.status')}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('service.search')}
|
||||
className='bg-white border border-border'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
getCustomers.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('customer.name')} />
|
||||
<Td text={t('customer.company')} />
|
||||
<Td text={t('customer.email')} />
|
||||
<Td text={t('customer.active_services')} />
|
||||
<Td text={t('customer.factor')} />
|
||||
<Td text={t('customer.tickets')} />
|
||||
<Td text={t('customer.detail')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
|
||||
return (
|
||||
<tr key={item.id} className='tr'>
|
||||
<Td text={item.firstName + ' ' + item.lastName} />
|
||||
<Td text={item?.legalUser?.registrationName} />
|
||||
<Td text={item.email ? item.email : ''} />
|
||||
<Td text={item.subscriptionsCount} />
|
||||
<Td text={''}>
|
||||
<Link to={Pages.receipts.index + `?user=${item.id}`}>
|
||||
<div className='text-[#0047FF]'>{item.invoicesCount} صورت حساب</div>
|
||||
</Link>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.list + `?user=${item.id}`}>
|
||||
<div className='text-[#0047FF]'>{item.ticketsCount} تیکت</div>
|
||||
</Link>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<Link to={Pages.customer.update + item.id}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<Pagination
|
||||
totalPages={getCustomers.data?.data?.pager?.totalPages}
|
||||
currentPage={page}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<div className="flex justify-between items-center mt-12">
|
||||
<div className="flex gap-4">
|
||||
<Select
|
||||
className="w-36"
|
||||
items={[
|
||||
{ label: "All", value: "all" },
|
||||
{ label: "Active", value: "active" },
|
||||
{ label: "Inactive", value: "inactive" },
|
||||
]}
|
||||
placeholder={t("service.category")}
|
||||
/>
|
||||
<Select
|
||||
className="w-36"
|
||||
items={[
|
||||
{ label: "All", value: "all" },
|
||||
{ label: "Active", value: "active" },
|
||||
{ label: "Inactive", value: "inactive" },
|
||||
]}
|
||||
placeholder={t("service.status")}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div>
|
||||
<Input
|
||||
variant="search"
|
||||
placeholder={t("service.search")}
|
||||
className="bg-white border border-border"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
export default CustomerList
|
||||
{getCustomers.isPending ? (
|
||||
<PageLoading />
|
||||
) : (
|
||||
<div className="relative overflow-x-auto rounded-3xl mt-9 w-full">
|
||||
<table className="w-full text-sm ">
|
||||
<thead className="thead">
|
||||
<tr>
|
||||
<Td text={t("customer.name")} />
|
||||
<Td text={t("customer.company")} />
|
||||
<Td text={t("customer.email")} />
|
||||
<Td text={t("customer.active_services")} />
|
||||
<Td text={t("customer.factor")} />
|
||||
<Td text={t("customer.tickets")} />
|
||||
<Td text={t("customer.detail")} />
|
||||
<Td text={""} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
|
||||
return (
|
||||
<tr
|
||||
key={item.id}
|
||||
className="tr"
|
||||
>
|
||||
<Td text={item.firstName + " " + item.lastName} />
|
||||
<Td text={item?.legalUser?.registrationName} />
|
||||
<Td text={item.email ? item.email : ""} />
|
||||
<Td text={item.subscriptionsCount} />
|
||||
<Td text={""}>
|
||||
<Link to={Pages.receipts.index + `?user=${item.id}`}>
|
||||
<div className="text-[#0047FF]">{item.invoicesCount} صورت حساب</div>
|
||||
</Link>
|
||||
</Td>
|
||||
<Td text={""}>
|
||||
<Link to={Pages.ticket.list + `?user=${item.id}`}>
|
||||
<div className="text-[#0047FF]">{item.ticketsCount} تیکت</div>
|
||||
</Link>
|
||||
</Td>
|
||||
<Td text={""}>
|
||||
<Link to={Pages.customer.update + item.id}>
|
||||
<Eye
|
||||
size={20}
|
||||
color="#8C90A3"
|
||||
/>
|
||||
</Link>
|
||||
</Td>
|
||||
<Td text={""} />
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<Pagination
|
||||
totalPages={getCustomers.data?.data?.pager?.totalPages}
|
||||
currentPage={page}
|
||||
onPageChange={setPage}
|
||||
limit={limit}
|
||||
onLimitChange={setLimit}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomerList;
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import * as api from "../service/CustomerService";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import * as api from "../service/CustomerService";
|
||||
import { CreateCustomerType } from "../types/CustomerTypes";
|
||||
|
||||
export const useGetCustomers = (page: number, withoutPaginate?: boolean) => {
|
||||
export const useGetCustomers = (page: number, limit: number, withoutPaginate?: boolean) => {
|
||||
return useQuery({
|
||||
queryKey: ["customers", page],
|
||||
queryFn: () => api.getCustomers(page, withoutPaginate),
|
||||
queryKey: ["customers", page, limit],
|
||||
queryFn: () => api.getCustomers(page, limit, withoutPaginate),
|
||||
});
|
||||
};
|
||||
|
||||
@@ -27,8 +27,7 @@ export const useGetCities = (provincesId: string) => {
|
||||
export const useCreateCustomer = () => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (variables: CreateCustomerType) =>
|
||||
api.createCustomer(variables),
|
||||
mutationFn: (variables: CreateCustomerType) => api.createCustomer(variables),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["customers"],
|
||||
@@ -48,8 +47,7 @@ export const useGetCustomerDetail = (id?: string) => {
|
||||
export const useUpdateCustomer = (id: string) => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (variables: CreateCustomerType) =>
|
||||
api.updateCustomer(id, variables),
|
||||
mutationFn: (variables: CreateCustomerType) => api.updateCustomer(id, variables),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["customers"],
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import axios from "../../../config/axios";
|
||||
import { CreateCustomerType } from "../types/CustomerTypes";
|
||||
|
||||
export const getCustomers = async (page: number, withoutPaginate?: boolean) => {
|
||||
const { data } = await axios.get(
|
||||
`/users/customers?page=${page}&paginate=${withoutPaginate ? "0" : "1"}`
|
||||
);
|
||||
export const getCustomers = async (page: number, limit: number, withoutPaginate?: boolean) => {
|
||||
const { data } = await axios.get(`/users/customers?page=${page}&limit=${limit}&paginate=${withoutPaginate ? "0" : "1"}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -28,10 +26,7 @@ export const getDetailCustomer = async (id: string) => {
|
||||
return data;
|
||||
};
|
||||
|
||||
export const updateCustomer = async (
|
||||
id: string,
|
||||
params: CreateCustomerType
|
||||
) => {
|
||||
export const updateCustomer = async (id: string, params: CreateCustomerType) => {
|
||||
const { data } = await axios.patch(`/users/customers/${id}`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user