Samandar/simple-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added pagination params page

Browse Source
This commit is contained in:
Samandar Turgunboyev
2025-11-17 13:09:24 +05:00
parent 41fe8725c7
commit 0f650ad15a
13 changed files with 544 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/pages/site-banner/ui/Banner.tsx
View File

@@ -56,6 +56,7 @@ import {
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useSearchParams } from "react-router-dom";
import { toast } from "sonner";
import { z } from "zod";
@@ -92,15 +93,24 @@ const positions = [
];
const SiteBannerAdmin = () => {
const [currentPage, setCurrentPage] = useState(1);
const [searchParams, setSearchParams] = useSearchParams();
const initialPage = Number(searchParams.get("page")) || 1;
const [page, setPage] = useState(initialPage);
const updatePage = (newPage: number) => {
setPage(newPage);
setSearchParams({ page: newPage.toString() });
};
const {
data: banner,
isLoading,
isError,
refetch,
} = useQuery({
queryKey: ["all_banner", currentPage],
queryFn: () => getBanner({ page: currentPage, page_size: 10 }),
queryKey: ["all_banner", page],
queryFn: () => getBanner({ page, page_size: 20 }),
select(data) {
return data.data.data;
},
@@ -385,37 +395,38 @@ const SiteBannerAdmin = () => {
</Table>
</div>
<div className="flex justify-end gap-2 mt-5">
<div className="flex justify-end mt-10 gap-3">
<button
disabled={currentPage === 1}
onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
disabled={page === 1}
onClick={() => updatePage(Math.max(page - 1, 1))}
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
>
<ChevronLeft className="w-5 h-5" />
</button>
{[...Array(banner?.total_pages)].map((_, i) => (
<button
key={i}
onClick={() => setCurrentPage(i + 1)}
className={`px-4 py-2 rounded-lg border transition-all font-medium ${
currentPage === i + 1
? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
: "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
}`}
>
{i + 1}
</button>
))}
{[...Array(banner?.total_pages)].map((_, i) => {
const pageNum = i + 1;
return (
<button
key={i}
onClick={() => updatePage(pageNum)}
className={`px-4 py-2 rounded-lg border font-medium transition-all ${
page === pageNum
? "bg-gradient-to-r from-blue-600 to-cyan-600 text-white border-blue-500"
: "border-slate-600 text-slate-300 hover:bg-slate-700/50"
}`}
>
{pageNum}
</button>
);
})}
<button
disabled={currentPage === banner?.total_pages}
disabled={page === banner?.total_pages}
onClick={() =>
setCurrentPage((p) =>
Math.min(p + 1, banner ? banner?.total_pages : 0),
)
updatePage(Math.min(page + 1, banner?.total_pages ?? 1))
}
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
>
<ChevronRight className="w-5 h-5" />
</button>