108 lines
5.4 KiB
PHP
108 lines
5.4 KiB
PHP
<div>
|
|
@if ($paginator->hasPages() && $paginator->total() > $paginator->perPage())
|
|
<nav aria-label="Pagination Navigation" class="flex justify-end" role="navigation">
|
|
{{-- Previous Page Link --}}
|
|
@if ($paginator->onFirstPage())
|
|
<span class="invisible ml-1 sm:ml-2 md:ml-3">
|
|
<x-jetstream.light-button disabled>
|
|
<span class="inline md:hidden"><</span>
|
|
<span class="hidden md:inline">{{ __('Previous') }}</span>
|
|
</x-jetstream.light-button>
|
|
</span>
|
|
@else
|
|
<x-jetstream.light-button class="ml-1 sm:ml-2 md:ml-3" x-on:click="$wire.previousPage('{{ $paginator->getPageName() }}'); $dispatch('scroll-to-top');">
|
|
<span class="inline md:hidden"><</span>
|
|
<span class="hidden md:inline">{{ __('Previous') }}</span>
|
|
</x-jetstream.light-button>
|
|
@endif
|
|
|
|
{{-- XS/SM: Only show current and last page --}}
|
|
<div class="flex md:hidden items-center">
|
|
{{-- Current Page --}}
|
|
<span class="relative ml-1 sm:ml-2 inline-flex cursor-default items-center rounded-md border border-theme-brand bg-white px-3 sm:px-4 py-2 text-sm font-medium leading-5 text-theme-brand shadow-sm">
|
|
{{ $paginator->currentPage() }}
|
|
</span>
|
|
{{-- Last Page --}}
|
|
@if ($paginator->currentPage() != $paginator->lastPage())
|
|
<x-jetstream.light-button class="ml-1 sm:ml-2" x-on:click="$wire.gotoPage({{ $paginator->lastPage() }}, '{{ $paginator->getPageName() }}'); $dispatch('scroll-to-top');">
|
|
{{ $paginator->lastPage() }}
|
|
</x-jetstream.light-button>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- SM+: Full paginator --}}
|
|
<div class="hidden md:flex items-center">
|
|
@php
|
|
$currentPage = $paginator->currentPage();
|
|
$lastPage = $paginator->lastPage();
|
|
|
|
if ($paginator->total() === 0) {
|
|
$start = 0;
|
|
$end = 0;
|
|
} else {
|
|
$start = max($currentPage - 1, 1);
|
|
$end = min($currentPage + 1, $lastPage);
|
|
}
|
|
@endphp
|
|
|
|
@if ($start > 0 && $end > 0)
|
|
{{-- First Page Link --}}
|
|
@if ($start > 1)
|
|
<x-jetstream.light-button class="ml-3" x-on:click="$wire.gotoPage(1, 'page'); $dispatch('scroll-to-top');">
|
|
1
|
|
</x-jetstream.light-button>
|
|
@if ($start > 2)
|
|
<span class="ml-3">
|
|
<x-jetstream.light-button disabled>
|
|
...
|
|
</x-jetstream.light-button>
|
|
</span>
|
|
@endif
|
|
@endif
|
|
|
|
{{-- Page Links --}}
|
|
@for ($page = $start; $page <= $end; $page++)
|
|
@if ($page == $paginator->currentPage())
|
|
<span class="relative ml-3 inline-flex cursor-default items-center rounded-md border border-theme-brand bg-white px-4 py-2 text-sm font-medium leading-5 text-theme-brand shadow-sm">
|
|
{{ $page }}
|
|
</span>
|
|
@else
|
|
<x-jetstream.light-button class="ml-3" x-on:click="$wire.gotoPage({{ $page }}, '{{ $paginator->getPageName() }}'); $dispatch('scroll-to-top');">
|
|
{{ $page }}
|
|
</x-jetstream.light-button>
|
|
@endif
|
|
@endfor
|
|
|
|
{{-- Last Page Link --}}
|
|
@if ($end < $lastPage)
|
|
@if ($end < $lastPage - 1)
|
|
<span class="ml-3">
|
|
<x-jetstream.light-button disabled>
|
|
...
|
|
</x-jetstream.light-button>
|
|
</span>
|
|
@endif
|
|
<x-jetstream.light-button class="ml-3" x-on:click="$wire.gotoPage({{ $lastPage }}, '{{ $paginator->getPageName() }}'); $dispatch('scroll-to-top');">
|
|
{{ $lastPage }}
|
|
</x-jetstream.light-button>
|
|
@endif
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Next Page Link --}}
|
|
@if ($paginator->hasMorePages())
|
|
<x-jetstream.light-button class="ml-1 sm:ml-2 md:ml-3" x-on:click="$wire.nextPage('{{ $paginator->getPageName() }}'); $dispatch('scroll-to-top');">
|
|
<span class="inline md:hidden">></span>
|
|
<span class="hidden md:inline">{{ __('Next') }}</span>
|
|
</x-jetstream.light-button>
|
|
@else
|
|
<span class="invisible ml-1 sm:ml-2 md:ml-3">
|
|
<x-jetstream.light-button disabled>
|
|
<span class="inline md:hidden">></span>
|
|
<span class="hidden md:inline">{{ __('Next') }}</span>
|
|
</x-jetstream.light-button>
|
|
</span>
|
|
@endif
|
|
</nav>
|
|
@endif
|
|
</div> |