boha_admin/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

fix: pagination component — use correct CSS class names

Browse Source 
Component used admin-pagination-btn/pages/dots but CSS has
admin-pagination-page/controls/ellipsis. Fixed to match existing CSS.
Added record count display.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-03-23 13:59:49 +01:00
parent 0b4b6b24e1
commit 040b41ed90
1 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/admin/components/Pagination.tsx
View File

@@ -12,7 +12,7 @@ interface PaginationProps {
export default function Pagination({ pagination, onPageChange, onPerPageChange }: PaginationProps) { export default function Pagination({ pagination, onPageChange, onPerPageChange }: PaginationProps) {
if (!pagination || pagination.total_pages <= 1) return null if (!pagination || pagination.total_pages <= 1) return null
const { page, total_pages } = pagination const { page, total_pages, total } = pagination
const getPages = () => { const getPages = () => {
const pages: (number | string)[] = [] const pages: (number | string)[] = []
@@ -29,20 +29,35 @@ export default function Pagination({ pagination, onPageChange, onPerPageChange }
return ( return (
<div className="admin-pagination"> <div className="admin-pagination">
<div className="admin-pagination-pages"> <div className="admin-pagination-info">
<button disabled={page <= 1} onClick={() => onPageChange(page - 1)} className="admin-pagination-btn"> {total} záznamů
</div>
<div className="admin-pagination-controls">
<button
disabled={page <= 1}
onClick={() => onPageChange(page - 1)}
className="admin-pagination-page"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6" /></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6" /></svg>
</button> </button>
{getPages().map((p, i) => {getPages().map((p, i) =>
typeof p === 'string' ? ( typeof p === 'string' ? (
<span key={`dots-${i}`} className="admin-pagination-dots">...</span> <span key={`dots-${i}`} className="admin-pagination-ellipsis">...</span>
) : ( ) : (
<button key={p} onClick={() => onPageChange(p)} className={`admin-pagination-btn ${p === page ? 'active' : ''}`}> <button
key={p}
onClick={() => onPageChange(p)}
className={`admin-pagination-page ${p === page ? 'active' : ''}`}
>
{p} {p}
</button> </button>
) )
)} )}
<button disabled={page >= total_pages} onClick={() => onPageChange(page + 1)} className="admin-pagination-btn"> <button
disabled={page >= total_pages}
onClick={() => onPageChange(page + 1)}
className="admin-pagination-page"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6" /></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6" /></svg>
</button> </button>
</div> </div>
@@ -50,7 +65,7 @@ export default function Pagination({ pagination, onPageChange, onPerPageChange }
<select <select
value={pagination.per_page} value={pagination.per_page}
onChange={e => onPerPageChange(Number(e.target.value))} onChange={e => onPerPageChange(Number(e.target.value))}
className="admin-form-select admin-pagination-select" className="admin-pagination-select"
> >
{[10, 25, 50, 100].map(n => ( {[10, 25, 50, 100].map(n => (
<option key={n} value={n}>{n} / stránka</option> <option key={n} value={n}>{n} / stránka</option>