Implement pagination for task history in Proxmox statistics view
This commit is contained in:
@@ -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 -->
|
||||
|
||||
Reference in New Issue
Block a user