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,14 +22,16 @@ class QuarantineList extends Component
|
||||||
#[Url(as: 'q', keep: true)]
|
#[Url(as: 'q', keep: true)]
|
||||||
public string $search = '';
|
public string $search = '';
|
||||||
|
|
||||||
|
#[Url(as: 'limit', keep: true)]
|
||||||
public int $perPage = 25;
|
public int $perPage = 25;
|
||||||
public int $rows = 500;
|
public int $rows = 500;
|
||||||
|
|
||||||
#[On('quarantine:updated')]
|
#[On('quarantine:updated')]
|
||||||
public function refresh(): void {}
|
public function refresh(): void {}
|
||||||
|
|
||||||
public function updatedFilter(): void { $this->resetPage(); }
|
public function updatedFilter(): void { $this->resetPage(); }
|
||||||
public function updatedSearch(): void { $this->resetPage(); }
|
public function updatedSearch(): void { $this->resetPage(); }
|
||||||
|
public function updatedPerPage(): void { $this->resetPage(); }
|
||||||
|
|
||||||
public function openMessage(string $msgId): void
|
public function openMessage(string $msgId): void
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@ class QueueList extends Component
|
||||||
#[Url(as: 'q', keep: true)]
|
#[Url(as: 'q', keep: true)]
|
||||||
public string $search = '';
|
public string $search = '';
|
||||||
|
|
||||||
|
#[Url(as: 'limit', keep: true)]
|
||||||
public int $perPage = 25;
|
public int $perPage = 25;
|
||||||
public array $selected = [];
|
public array $selected = [];
|
||||||
public bool $selectAll = false;
|
public bool $selectAll = false;
|
||||||
|
|
@ -29,8 +30,9 @@ class QueueList extends Component
|
||||||
#[On('queue:updated')]
|
#[On('queue:updated')]
|
||||||
public function refresh(): void {}
|
public function refresh(): void {}
|
||||||
|
|
||||||
public function updatedFilter(): void { $this->resetPage(); $this->selected = []; $this->selectAll = false; }
|
public function updatedFilter(): void { $this->resetPage(); $this->selected = []; $this->selectAll = false; }
|
||||||
public function updatedSearch(): void { $this->resetPage(); }
|
public function updatedSearch(): void { $this->resetPage(); }
|
||||||
|
public function updatedPerPage(): void { $this->resetPage(); $this->selected = []; $this->selectAll = false; }
|
||||||
|
|
||||||
public function updatedSelectAll(bool $val): void
|
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>
|
<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 …">
|
<input type="text" wire:model.live.debounce.300ms="search" class="mq-search-input" placeholder="Von, An, Betreff …">
|
||||||
</div>
|
</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>
|
||||||
</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>
|
<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 …">
|
<input type="text" wire:model.live.debounce.300ms="search" class="mq-search-input" placeholder="ID, Sender, Empfänger …">
|
||||||
</div>
|
</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">
|
<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>
|
<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
|
Flush
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,18 @@
|
||||||
@if ($paginator->hasPages())
|
@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">
|
<div class="mq-pagination">
|
||||||
<span class="mq-pag-info">
|
<span class="mq-pag-info">
|
||||||
{{ $paginator->firstItem() }}–{{ $paginator->lastItem() }} von {{ $paginator->total() }}
|
{{ $paginator->firstItem() }}–{{ $paginator->lastItem() }} von {{ $paginator->total() }}
|
||||||
</span>
|
</span>
|
||||||
<div class="mq-pag-btns">
|
<div class="mq-pag-btns">
|
||||||
|
|
||||||
|
{{-- Zurück --}}
|
||||||
@if ($paginator->onFirstPage())
|
@if ($paginator->onFirstPage())
|
||||||
<button class="mq-pag-btn" disabled>
|
<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>
|
<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>
|
</button>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
@foreach ($elements as $element)
|
{{-- Erste Seite + … --}}
|
||||||
@if (is_string($element))
|
@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>
|
<button class="mq-pag-btn" disabled>…</button>
|
||||||
@endif
|
@endif
|
||||||
@if (is_array($element))
|
@endif
|
||||||
@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())
|
@if ($paginator->hasMorePages())
|
||||||
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" wire:loading.attr="disabled" class="mq-pag-btn">
|
<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>
|
<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