GovOPlaN/govoplan-mail
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(webui): use central mailbox pagination

Browse Source
This commit is contained in:
Albrecht Degering
2026-07-21 12:36:49 +02:00
parent e1f298f300
commit ff750ed8bd
1 changed files with 5 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
webui/src/features/mail/MailboxPage.tsx
View File

@@ -1,7 +1,8 @@
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Home, Mail, Paperclip, RefreshCw, Search, X } from "lucide-react"; import { ChevronRight, Home, Mail, Paperclip, RefreshCw, Search, X } from "lucide-react";
import { import {
Button, Button,
DataGridPaginationBar,
DismissibleAlert, DismissibleAlert,
ExplorerTree, ExplorerTree,
LoadingIndicator, LoadingIndicator,
@@ -474,10 +475,12 @@ export default function MailboxPage({ settings }: {settings: ApiSettings;}) {
})} })}
</div> </div>
</div> </div>
<MailboxPagination <DataGridPaginationBar
page={messagePage} page={messagePage}
pageSize={messagePageSize} pageSize={messagePageSize}
totalRows={messageTotalCount ?? 0} totalRows={messageTotalCount ?? 0}
className="mailbox-pagination"
ariaLabel="i18n:govoplan-mail.mailbox_message_pagination.965407bf"
disabled={loadingMessages || !foldersReady} disabled={loadingMessages || !foldersReady}
onPageChange={changeMessagePage} onPageChange={changeMessagePage}
onPageSizeChange={changeMessagePageSize} /> onPageSizeChange={changeMessagePageSize} />
@@ -521,31 +524,6 @@ export default function MailboxPage({ settings }: {settings: ApiSettings;}) {
} }
function MailboxPagination({ page, pageSize, totalRows, disabled, onPageChange, onPageSizeChange }: {page: number;pageSize: number;totalRows: number;disabled: boolean;onPageChange: (page: number) => void;onPageSizeChange: (pageSize: number) => void;}) {
const pageCount = Math.max(1, Math.ceil(totalRows / pageSize));
const first = totalRows === 0 ? 0 : (page - 1) * pageSize + 1;
const last = Math.min(totalRows, page * pageSize);
const options = [10, 25, 50, 100];
return (
<div className="data-grid-pagination mailbox-pagination" aria-label="i18n:govoplan-mail.mailbox_message_pagination.965407bf">
<div className="data-grid-pagination-summary">{first}-{last} of {totalRows}</div>
<label className="data-grid-page-size">
<span>i18n:govoplan-mail.rows_per_page.af2f9c1b</span>
<select value={pageSize} disabled={disabled} onChange={(event) => onPageSizeChange(Number(event.target.value))}>
{options.map((value) => <option key={value} value={value}>{value}</option>)}
</select>
</label>
<div className="data-grid-page-controls">
<button type="button" aria-label="i18n:govoplan-mail.first_page.49d74b49" disabled={disabled || page <= 1} onClick={() => onPageChange(1)}><ChevronsLeft size={16} /></button>
<button type="button" aria-label="i18n:govoplan-mail.previous_page.81f54719" disabled={disabled || page <= 1} onClick={() => onPageChange(page - 1)}><ChevronLeft size={16} /></button>
<span>i18n:govoplan-mail.page.fb06270f {page} of {pageCount}</span>
<button type="button" aria-label="i18n:govoplan-mail.next_page.4bfc194b" disabled={disabled || page >= pageCount} onClick={() => onPageChange(page + 1)}><ChevronRight size={16} /></button>
<button type="button" aria-label="i18n:govoplan-mail.last_page.b01f16ae" disabled={disabled || page >= pageCount} onClick={() => onPageChange(pageCount)}><ChevronsRight size={16} /></button>
</div>
</div>);
}
function mailboxMessageKey(folder: string, uid: string): string { function mailboxMessageKey(folder: string, uid: string): string {
return `${folder || "INBOX"}::${uid}`; return `${folder || "INBOX"}::${uid}`;
} }