Grid Layout ItemsPerPage

This commit is contained in:
headlessdev 2025-04-12 15:49:07 +02:00
parent 9de929cb1a
commit 624bc4c4ca
2 changed files with 9 additions and 4 deletions

View File

@ -3,15 +3,16 @@ import { PrismaClient } from '@/lib/generated/prisma'
interface GetRequest { interface GetRequest {
page: number; page: number;
ITEMS_PER_PAGE: number;
} }
const prisma = new PrismaClient(); const prisma = new PrismaClient();
const ITEMS_PER_PAGE = 5;
export async function POST(request: NextRequest) { export async function POST(request: NextRequest) {
try { try {
const body: GetRequest = await request.json(); const body: GetRequest = await request.json();
const page = Math.max(1, body.page || 1); const page = Math.max(1, body.page || 1);
const ITEMS_PER_PAGE = body.ITEMS_PER_PAGE;
const applications = await prisma.application.findMany({ const applications = await prisma.application.findMany({
skip: (page - 1) * ITEMS_PER_PAGE, skip: (page - 1) * ITEMS_PER_PAGE,

View File

@ -68,13 +68,16 @@ export default function Dashboard() {
const [serverId, setServerId] = useState<number | null>(null); const [serverId, setServerId] = useState<number | null>(null);
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [maxPage, setMaxPage] = useState(1); const [maxPage, setMaxPage] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(5);
const [applications, setApplications] = useState([]); const [applications, setApplications] = useState([]);
const [servers, setServers] = useState([]); const [servers, setServers] = useState([]);
const [isGridLayout, setIsGridLayout] = useState(false); const [isGridLayout, setIsGridLayout] = useState(false);
useEffect(() => { useEffect(() => {
const savedLayout = Cookies.get('layoutPreference'); const savedLayout = Cookies.get('layoutPreference');
setIsGridLayout(savedLayout === 'grid'); const layout_bool = savedLayout === 'grid'
setIsGridLayout(layout_bool);
setItemsPerPage(layout_bool ? 15 : 5)
}, []); }, []);
const toggleLayout = () => { const toggleLayout = () => {
@ -85,6 +88,7 @@ export default function Dashboard() {
path: '/', path: '/',
sameSite: 'strict' sameSite: 'strict'
}); });
setItemsPerPage(newLayout ? 15 : 5);
}; };
const add = async () => { const add = async () => {
@ -105,7 +109,7 @@ export default function Dashboard() {
const getApplications = async () => { const getApplications = async () => {
try { try {
const response = await axios.post('/api/applications/get', { page: currentPage }); const response = await axios.post('/api/applications/get', { page: currentPage, ITEMS_PER_PAGE: itemsPerPage });
setApplications(response.data.applications); setApplications(response.data.applications);
setServers(response.data.servers); setServers(response.data.servers);
setMaxPage(response.data.maxPage); setMaxPage(response.data.maxPage);
@ -116,7 +120,7 @@ export default function Dashboard() {
useEffect(() => { useEffect(() => {
getApplications(); getApplications();
}, [currentPage]); }, [currentPage, itemsPerPage]);
const handlePrevious = () => setCurrentPage(prev => Math.max(1, prev - 1)); const handlePrevious = () => setCurrentPage(prev => Math.max(1, prev - 1));
const handleNext = () => setCurrentPage(prev => Math.min(maxPage, prev + 1)); const handleNext = () => setCurrentPage(prev => Math.min(maxPage, prev + 1));