Implement pagination for task history in Proxmox statistics view

This commit is contained in:
2025-12-08 19:39:28 -05:00
parent 1cdae8b693
commit 5191bb53fe
2 changed files with 90 additions and 58 deletions

View File

@@ -1062,7 +1062,7 @@
</tr>
</thead>
<tbody class="divide-y divide-neutral/40">
@forelse($this->taskHistory as $task)
@forelse($this->paginatedTaskHistory as $task)
@php
$startTime = isset($task['starttime']) ? \Carbon\Carbon::createFromTimestamp($task['starttime']) : null;
$endTime = isset($task['endtime']) && $task['endtime'] > 0 ? \Carbon\Carbon::createFromTimestamp($task['endtime']) : null;
@@ -1321,6 +1321,88 @@
<template id="task-history-export" type="application/json">
@json($taskHistoryExportRows)
</template>
<!-- Task History Pagination -->
<div class="p-4 border-t border-neutral">
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<!-- Per Page Selector -->
<div class="flex items-center gap-2 text-sm">
<span class="text-base/70">Show</span>
<select wire:model.live="taskHistoryPerPage"
class="bg-background border border-neutral rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span class="text-base/70">entries</span>
<span class="text-base/50 ml-2">({{ count($this->taskHistory) }} total)</span>
</div>
<!-- Pagination Navigation -->
@if($this->taskHistoryTotalPages > 1)
<div class="flex items-center gap-1">
<!-- Previous Button -->
<button wire:click="previousTaskHistoryPage"
@if($taskHistoryCurrentPage <= 1) disabled @endif
class="px-3 py-1.5 text-sm border border-neutral rounded-md hover:bg-background/80 disabled:opacity-50 disabled:cursor-not-allowed">
<x-ri-arrow-left-s-line class="size-4" />
</button>
<!-- Page Numbers -->
@php
$totalPages = $this->taskHistoryTotalPages;
$currentPage = $taskHistoryCurrentPage;
$pages = [];
// Always show first page
$pages[] = 1;
// Calculate range around current page
$start = max(2, $currentPage - 1);
$end = min($totalPages - 1, $currentPage + 1);
// Add ellipsis after first page if needed
if ($start > 2) {
$pages[] = '...';
}
// Add pages around current
for ($i = $start; $i <= $end; $i++) {
$pages[] = $i;
}
// Add ellipsis before last page if needed
if ($end < $totalPages - 1) {
$pages[] = '...';
}
// Always show last page if more than 1 page
if ($totalPages > 1) {
$pages[] = $totalPages;
}
@endphp
@foreach($pages as $page)
@if($page === '...')
<span class="px-2 py-1.5 text-sm text-base/50">...</span>
@else
<button wire:click="goToTaskHistoryPage({{ $page }})"
class="px-3 py-1.5 text-sm border rounded-md {{ $currentPage == $page ? 'bg-primary text-white border-primary' : 'border-neutral hover:bg-background/80' }}">
{{ $page }}
</button>
@endif
@endforeach
<!-- Next Button -->
<button wire:click="nextTaskHistoryPage"
@if($taskHistoryCurrentPage >= $this->taskHistoryTotalPages) disabled @endif
class="px-3 py-1.5 text-sm border border-neutral rounded-md hover:bg-background/80 disabled:opacity-50 disabled:cursor-not-allowed">
<x-ri-arrow-right-s-line class="size-4" />
</button>
</div>
@endif
</div>
</div>
</div>
<!-- Recent Lifecycle Events Section -->