Feature: perPage als URL-Parameter + kompaktes Pagination-Fenster
- perPage (#[Url as:'limit']) bleibt nach Reload erhalten (25/50/100) - Pagination zeigt max 5 Seiten (±2 um aktuelle) + 1/letzte mit ... - Per-Seite-Select in Quarantäne und Queue eingefügt Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>main v1.1.146
parent
ff53344a67
commit
35fe7c2c6f
|
|
@ -22,6 +22,7 @@ class QuarantineList extends Component
|
|||
#[Url(as: 'q', keep: true)]
|
||||
public string $search = '';
|
||||
|
||||
#[Url(as: 'limit', keep: true)]
|
||||
public int $perPage = 25;
|
||||
public int $rows = 500;
|
||||
|
||||
|
|
@ -30,6 +31,7 @@ class QuarantineList extends Component
|
|||
|
||||
public function updatedFilter(): void { $this->resetPage(); }
|
||||
public function updatedSearch(): void { $this->resetPage(); }
|
||||
public function updatedPerPage(): void { $this->resetPage(); }
|
||||
|
||||
public function openMessage(string $msgId): void
|
||||
{
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ class QueueList extends Component
|
|||
#[Url(as: 'q', keep: true)]
|
||||
public string $search = '';
|
||||
|
||||
#[Url(as: 'limit', keep: true)]
|
||||
public int $perPage = 25;
|
||||
public array $selected = [];
|
||||
public bool $selectAll = false;
|
||||
|
|
@ -31,6 +32,7 @@ class QueueList extends Component
|
|||
|
||||
public function updatedFilter(): void { $this->resetPage(); $this->selected = []; $this->selectAll = false; }
|
||||
public function updatedSearch(): void { $this->resetPage(); }
|
||||
public function updatedPerPage(): void { $this->resetPage(); $this->selected = []; $this->selectAll = false; }
|
||||
|
||||
public function updatedSelectAll(bool $val): void
|
||||
{
|
||||
|
|
|
|||
|
|
@ -15,6 +15,11 @@
|
|||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="5" cy="5" r="3.8" stroke="currentColor" stroke-width="1.2"/><path d="M8 8l2.5 2.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<input type="text" wire:model.live.debounce.300ms="search" class="mq-search-input" placeholder="Von, An, Betreff …">
|
||||
</div>
|
||||
<select wire:model.live="perPage" class="mq-select">
|
||||
<option value="25">25 / Seite</option>
|
||||
<option value="50">50 / Seite</option>
|
||||
<option value="100">100 / Seite</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,11 @@
|
|||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="5" cy="5" r="3.8" stroke="currentColor" stroke-width="1.2"/><path d="M8 8l2.5 2.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<input type="text" wire:model.live.debounce.300ms="search" class="mq-search-input" placeholder="ID, Sender, Empfänger …">
|
||||
</div>
|
||||
<select wire:model.live="perPage" class="mq-select">
|
||||
<option value="25">25 / Seite</option>
|
||||
<option value="50">50 / Seite</option>
|
||||
<option value="100">100 / Seite</option>
|
||||
</select>
|
||||
<button wire:click="flush" class="mq-btn-mute" title="Alle Nachrichten erneut zustellen">
|
||||
<svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M2 7a5 5 0 1 1 1 3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><path d="M2 11V7H6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
Flush
|
||||
|
|
|
|||
|
|
@ -1,10 +1,18 @@
|
|||
@if ($paginator->hasPages())
|
||||
@php
|
||||
$current = $paginator->currentPage();
|
||||
$last = $paginator->lastPage();
|
||||
$window = 2; // Seiten links/rechts von aktueller
|
||||
$start = max(1, $current - $window);
|
||||
$end = min($last, $current + $window);
|
||||
@endphp
|
||||
<div class="mq-pagination">
|
||||
<span class="mq-pag-info">
|
||||
{{ $paginator->firstItem() }}–{{ $paginator->lastItem() }} von {{ $paginator->total() }}
|
||||
</span>
|
||||
<div class="mq-pag-btns">
|
||||
|
||||
{{-- Zurück --}}
|
||||
@if ($paginator->onFirstPage())
|
||||
<button class="mq-pag-btn" disabled>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M7.5 2L3.5 6l4 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
|
@ -15,23 +23,32 @@
|
|||
</button>
|
||||
@endif
|
||||
|
||||
@foreach ($elements as $element)
|
||||
@if (is_string($element))
|
||||
{{-- Erste Seite + … --}}
|
||||
@if ($start > 1)
|
||||
<button type="button" wire:click="gotoPage(1, '{{ $paginator->getPageName() }}')" class="mq-pag-btn">1</button>
|
||||
@if ($start > 2)
|
||||
<button class="mq-pag-btn" disabled>…</button>
|
||||
@endif
|
||||
@if (is_array($element))
|
||||
@foreach ($element as $page => $url)
|
||||
<span wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}">
|
||||
@if ($page == $paginator->currentPage())
|
||||
<button class="mq-pag-btn active">{{ $page }}</button>
|
||||
@else
|
||||
<button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" class="mq-pag-btn">{{ $page }}</button>
|
||||
@endif
|
||||
</span>
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
{{-- Seitenfenster --}}
|
||||
@for ($p = $start; $p <= $end; $p++)
|
||||
@if ($p == $current)
|
||||
<button class="mq-pag-btn active">{{ $p }}</button>
|
||||
@else
|
||||
<button type="button" wire:click="gotoPage({{ $p }}, '{{ $paginator->getPageName() }}')" class="mq-pag-btn">{{ $p }}</button>
|
||||
@endif
|
||||
@endfor
|
||||
|
||||
{{-- … + Letzte Seite --}}
|
||||
@if ($end < $last)
|
||||
@if ($end < $last - 1)
|
||||
<button class="mq-pag-btn" disabled>…</button>
|
||||
@endif
|
||||
<button type="button" wire:click="gotoPage({{ $last }}, '{{ $paginator->getPageName() }}')" class="mq-pag-btn">{{ $last }}</button>
|
||||
@endif
|
||||
|
||||
{{-- Vor --}}
|
||||
@if ($paginator->hasMorePages())
|
||||
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" wire:loading.attr="disabled" class="mq-pag-btn">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M4.5 2L8.5 6l-4 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
|
|
|||
Loading…
Reference in New Issue