Hacker-Software
/
opencrm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Monitoring: Pagination mit Seitenzahlen + Anfang/Ende-Buttons 

Vorher: nur "Zurück / Weiter". Jetzt:
[«] [‹] [1] [2] [3] [4] [5*] [6] [7] [8] [9] [10] [›] [»]

10 Seitenzahlen-Buttons, current centered (clamped an Anfang/Ende).
Zusätzlich Doppelpfeile für erste/letzte Seite. Kompakt + verständlich
auch bei 50+ Seiten.

Helper paginationWindow() rechnet das Fenster aus, sodass bei
totalPages <= 10 alle gezeigt werden, sonst current ungefähr mittig
mit Clamp an die Ränder.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
duffyduck 2026-05-01 09:36:40 +02:00
parent e2fdb069ac
commit 49905aa97e
1 changed files with 66 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/pages/settings/Monitoring.tsx
View File

@ -8,7 +8,22 @@ import Button from '../../components/ui/Button';
import Input from '../../components/ui/Input';
import Select from '../../components/ui/Select';
import Modal from '../../components/ui/Modal';
import { ArrowLeft, Send, RefreshCw, Mail, ShieldAlert, ChevronLeft, ChevronRight, Trash2 } from 'lucide-react';
import { ArrowLeft, Send, RefreshCw, Mail, ShieldAlert, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Trash2 } from 'lucide-react';
/**
* Liefert die anzuzeigenden Seitenzahlen für die Pagination.
* Bis zu 10 Seitenzahlen, current möglichst mittig.
*/
function paginationWindow(current: number, total: number, size = 10): number[] {
if (total <= size) return Array.from({ length: total }, (_, i) => i + 1);
let start = Math.max(1, current - Math.floor(size / 2));
let end = start + size - 1;
if (end > total) {
end = total;
start = end - size + 1;
}
return Array.from({ length: end - start + 1 }, (_, i) => start + i);
}
const TYPE_OPTIONS: { value: SecurityEventType | ''; label: string }[] = [
{ value: '', label: 'Alle Typen' },
@ -305,15 +320,56 @@ export default function Monitoring() {
</div>
)}
{pagination && pagination.totalPages > 1 && (
<div className="flex justify-between items-center mt-4 text-sm">
<span>Seite {pagination.page} von {pagination.totalPages} ({pagination.total} Einträge)</span>
<div className="flex gap-2">
<Button variant="secondary" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>
<ChevronLeft className="w-4 h-4" /> Zurück
</Button>
<Button variant="secondary" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= pagination.totalPages}>
Weiter <ChevronRight className="w-4 h-4" />
</Button>
<div className="flex flex-wrap items-center justify-between gap-3 mt-4 text-sm">
<span className="text-gray-600">
Seite {pagination.page} von {pagination.totalPages} ({pagination.total} Einträge)
</span>
<div className="flex items-center gap-1">
<button
onClick={() => setPage(1)}
disabled={page <= 1}
title="Erste Seite"
className="px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100"
>
<ChevronsLeft className="w-4 h-4" />
</button>
<button
onClick={() => setPage((p) => Math.max(1, p - 1))}
disabled={page <= 1}
title="Vorherige Seite"
className="px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100"
>
<ChevronLeft className="w-4 h-4" />
</button>
{paginationWindow(page, pagination.totalPages, 10).map((p) => (
<button
key={p}
onClick={() => setPage(p)}
className={`min-w-[32px] px-2 py-1 rounded border text-sm ${
p === page
? 'bg-blue-600 text-white border-blue-600'
: 'border-gray-300 hover:bg-gray-100'
}`}
>
{p}
</button>
))}
<button
onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}
disabled={page >= pagination.totalPages}
title="Nächste Seite"
className="px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100"
>
<ChevronRight className="w-4 h-4" />
</button>
<button
onClick={() => setPage(pagination.totalPages)}
disabled={page >= pagination.totalPages}
title="Letzte Seite"
className="px-2 py-1 rounded border border-gray-300 disabled:opacity-40 hover:bg-gray-100"
>
<ChevronsRight className="w-4 h-4" />
</button>
</div>
</div>
)}