External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-17 15:36:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Pagination & working sites layout

Browse Source
This commit is contained in:
headlesdev 2025-05-18 12:32:50 +02:00
parent 8fc7d28b01
commit 1bb07bd90c
2 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/api/sites/get_all/route.ts
View File

@ -3,25 +3,24 @@ import prisma from "@/app/prisma";
interface QueryParams {
currentPage: number;
pageSize: number;
itemPerPage: number;
}
export async function GET(request: NextRequest) {
const { searchParams } = request.nextUrl;
const currentPage = Number(searchParams.get("currentPage")) || 1;
const pageSize = Number(searchParams.get("pageSize")) || 10;
const itemPerPage = Number(searchParams.get("itemPerPage")) || 10;
const itemPerPage = Number(searchParams.get("itemPerPage")) || 1;
const skip = (currentPage - 1) * pageSize;
const skip = (currentPage - 1) * itemPerPage;
const take = itemPerPage;
try {
const sites = await prisma.site.findMany({
skip,
take,
});
const total = await prisma.site.count();
return NextResponse.json({ sites, total, currentPage, pageSize, itemPerPage }, { status: 200 });
return NextResponse.json({ sites, total, currentPage, itemPerPage }, { status: 200 });
} catch (error: any) {
return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
}

33
app/dashboard/sites/SitesPage.tsx
View File

@ -14,11 +14,24 @@ interface SitesPageProps {
export default function SitesPage({ username, name }: SitesPageProps) {
const [sites, setSites] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [itemPerPage, setItemPerPage] = useState(5);
const [total, setTotal] = useState(0);
const handlePageChange = (page: number) => {
setCurrentPage(page);
};
useEffect(() => {
axios.get('/api/sites/get_all').then((response) => {
axios.get('/api/sites/get_all', {
params: {
currentPage,
itemPerPage,
},
}).then((response) => {
setSites(response.data.sites);
setTotal(response.data.total);
});
}, []);
}, [currentPage, itemPerPage]);
return (
<Sidebar
@ -41,18 +54,26 @@ export default function SitesPage({ username, name }: SitesPageProps) {
<div className="flex gap-2 items-center pt-4">
<input type="text" placeholder="Search..." className="input input-bordered w-full" />
<select defaultValue="Pick a font" className="select w-24">
<select defaultValue="Pick a font" className="select w-24" onChange={(e) => setItemPerPage(Number(e.target.value))}>
<option disabled={true}>Layout</option>
<option>List</option>
<option>Grid</option>
<option value={5}>List</option>
<option value={10}>Grid</option>
</select>
</div>
<div className="flex flex-col gap-4 pt-4">
<div className={itemPerPage === 5 ? "flex flex-col gap-4 pt-4" : "grid grid-cols-1 md:grid-cols-2 gap-4 pt-4"}>
{sites.map((site: any) => (
<Sites key={site.id} id={site.id} name={site.name} description={site.description} networks={site.networks} />
))}
</div>
<div className="flex justify-center pt-4">
<div className="join">
<button className="join-item btn" onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>«</button>
<button className="join-item btn">Page {currentPage}</button>
<button className="join-item btn" onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === Math.ceil(total / itemPerPage)}>»</button>
</div>
</div>
</main>
</Sidebar>
)