Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add pagination for lifecycle events with navigation controls and records per page selector

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-08 19:55:54 -05:00
parent 31bb0d4df2
commit 369cb8a812
2 changed files with 162 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
extensions/Servers/Proxmox/views/statistics.blade.php
View File

@@ -1628,7 +1628,7 @@
</tr>
</thead>
<tbody class="divide-y divide-neutral/40">
@forelse(collect($this->chartEvents)->take(20) as $index => $event)
@forelse($this->paginatedLifecycleEvents as $index => $event)
@php
$startTime = isset($event['starttime']) ? \Carbon\Carbon::createFromTimestamp($event['starttime']) : null;
$endTime = isset($event['endtime']) && $event['endtime'] > 0 ? \Carbon\Carbon::createFromTimestamp($event['endtime']) : null;
@@ -1805,6 +1805,104 @@
<template id="lifecycle-events-export" type="application/json">
@json($lifecycleEventsExportRows)
</template>
<!-- Lifecycle Events Pagination -->
@php
$lifecycleTotalCount = count($this->chartEvents);
@endphp
@if($lifecycleTotalCount > 0)
<div class="p-4 border-t border-neutral flex flex-col sm:flex-row items-center justify-between gap-4">
{{-- Records per page selector --}}
<div class="flex items-center gap-3">
<label class="text-sm text-base/70">Show:</label>
<select wire:model.live="lifecycleEventsPerPage" class="px-3 py-1.5 border border-neutral rounded-lg bg-background text-sm">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span class="text-sm text-base/60">per page</span>
</div>
{{-- Page info and navigation --}}
@php
$lifecycleTotalPages = $this->lifecycleEventsTotalPages;
$lifecycleCurrentPage = $lifecycleEventsCurrentPage;
@endphp
<div class="flex items-center gap-4">
<span class="text-sm text-base/60">
Showing {{ (($lifecycleCurrentPage - 1) * $lifecycleEventsPerPage) + 1 }} - {{ min($lifecycleCurrentPage * $lifecycleEventsPerPage, $lifecycleTotalCount) }} of {{ $lifecycleTotalCount }} events
</span>
@if($lifecycleTotalPages > 1)
<div class="flex items-center gap-1">
{{-- First page --}}
<button type="button"
wire:click="goToLifecycleEventsPage(1)"
@if($lifecycleCurrentPage === 1) disabled @endif
class="px-2 py-1 border border-neutral rounded hover:bg-background-secondary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
title="First page">
<x-ri-arrow-left-double-line class="size-4" />
</button>
{{-- Previous page --}}
<button type="button"
wire:click="previousLifecycleEventsPage"
@if($lifecycleCurrentPage === 1) disabled @endif
class="px-2 py-1 border border-neutral rounded hover:bg-background-secondary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
title="Previous page">
<x-ri-arrow-left-s-line class="size-4" />
</button>
{{-- Page numbers --}}
@php
$lifecycleStartPage = max(1, $lifecycleCurrentPage - 2);
$lifecycleEndPage = min($lifecycleTotalPages, $lifecycleCurrentPage + 2);
@endphp
@if($lifecycleStartPage > 1)
<button type="button" wire:click="goToLifecycleEventsPage(1)" class="px-3 py-1 border border-neutral rounded hover:bg-background-secondary transition-colors text-sm">1</button>
@if($lifecycleStartPage > 2)
<span class="px-2 text-base/60">...</span>
@endif
@endif
@for($i = $lifecycleStartPage; $i <= $lifecycleEndPage; $i++)
<button type="button"
wire:click="goToLifecycleEventsPage({{ $i }})"
class="px-3 py-1 border rounded text-sm transition-colors {{ $lifecycleCurrentPage === $i ? 'bg-primary text-white border-primary' : 'border-neutral hover:bg-background-secondary' }}">
{{ $i }}
</button>
@endfor
@if($lifecycleEndPage < $lifecycleTotalPages)
@if($lifecycleEndPage < $lifecycleTotalPages - 1)
<span class="px-2 text-base/60">...</span>
@endif
<button type="button" wire:click="goToLifecycleEventsPage({{ $lifecycleTotalPages }})" class="px-3 py-1 border border-neutral rounded hover:bg-background-secondary transition-colors text-sm">{{ $lifecycleTotalPages }}</button>
@endif
{{-- Next page --}}
<button type="button"
wire:click="nextLifecycleEventsPage"
@if($lifecycleCurrentPage === $lifecycleTotalPages) disabled @endif
class="px-2 py-1 border border-neutral rounded hover:bg-background-secondary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
title="Next page">
<x-ri-arrow-right-s-line class="size-4" />
</button>
{{-- Last page --}}
<button type="button"
wire:click="goToLifecycleEventsPage({{ $lifecycleTotalPages }})"
@if($lifecycleCurrentPage === $lifecycleTotalPages) disabled @endif
class="px-2 py-1 border border-neutral rounded hover:bg-background-secondary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
title="Last page">
<x-ri-arrow-right-double-line class="size-4" />
</button>
</div>
@endif
</div>
</div>
@endif
</div>
</div>