External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-29 16:14:43 +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
Download Patch File Download Diff File Expand all files Collapse all files

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>
)