pagination upgrade
This commit is contained in:
Jérémy Munsch
parent
771978412a
commit
a0ddeda5a9
3 changed files with 124 additions and 103 deletions
|
|
@ -26,3 +26,9 @@
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-custom .dropdown-menu {
|
||||
overflow: auto;
|
||||
min-width: 5rem;
|
||||
max-height: 178px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,98 +1,115 @@
|
|||
<nav class="d-flex justify-content-between align-items-center my-3">
|
||||
{{-- SELECT ITEMS PER PAGE --}}
|
||||
<div class="dropup-center dropup d-flex justify-content-center align-items-center input-group w-fit">
|
||||
<span class="btn-md input-group-text" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="{{ __('crud.pagination.paginate_list') }}">
|
||||
<i class="fa-solid fa-list-ul"></i>
|
||||
</span>
|
||||
<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-expanded="false">
|
||||
{{ Cache::get('pagination.' .Str::slug(request()->route()->getName())) }}
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
@foreach (\App\Enums\Pagination\ItemsPerPaginationEnum::toArray() as $itemsPerPaginationEnum)
|
||||
<li>
|
||||
<a class="dropdown-item text-center"
|
||||
href="{{ request()->fullUrlWithQuery(['pagination' => $itemsPerPaginationEnum->value]) }}">
|
||||
{{ $itemsPerPaginationEnum->value }}
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@if ($paginator->hasPages())
|
||||
{{-- PAGINATION --}}
|
||||
<div class="d-flex justify-content-end align-items-center">
|
||||
<ul class="pagination m-0">
|
||||
{{-- PREVIOUS PAGE --}}
|
||||
<li class="page-item @if ($paginator->onFirstPage()) disabled @endif">
|
||||
<a class="page-link d-flex align-items-center h-100" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="{{ __('crud.pagination.previous') }}" aria-label="@lang('crud.pagination.previous')"
|
||||
@if (!$paginator->onFirstPage()) href="{{ $paginator->previousPageUrl() }}" @endif rel="prev"
|
||||
@if ($paginator->onFirstPage()) aria-hidden="true" @endif>
|
||||
<i class="fa-solid fa-chevron-left fa-2xs mt-1"></i>
|
||||
</a>
|
||||
</li>
|
||||
{{-- FIRST PAGE --}}
|
||||
@if ($paginator->currentPage() > 3)
|
||||
<li class="page-item" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="{{ __('crud.pagination.specific_page', ['id' => 1]) }}">
|
||||
<a class="page-link" href="{{ $paginator->url(1) }}">1</a>
|
||||
{{-- GET ACTUAL PAGINATION --}}
|
||||
@php
|
||||
$pagination = intval(
|
||||
Cache::get(
|
||||
'pagination.' .
|
||||
\Illuminate\Support\Str::slug(
|
||||
request()
|
||||
->route()
|
||||
->getName(),
|
||||
),
|
||||
),
|
||||
);
|
||||
@endphp
|
||||
@if ($paginator->items())
|
||||
<nav class="pagination-custom d-flex justify-content-between align-items-center">
|
||||
{{-- SELECT ITEMS PER PAGE --}}
|
||||
<div class="dropup-center d-flex justify-content-center align-items-center input-group w-fit">
|
||||
<span class="btn-md input-group-text" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="{{ __('crud.pagination.paginate_list') }}">
|
||||
<i class="fa-solid fa-list-ul"></i>
|
||||
</span>
|
||||
<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-expanded="false">
|
||||
{{ $pagination }}
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
@foreach (\App\Enums\Pagination\ItemsPerPaginationEnum::toArray() as $itemsPerPaginationEnum)
|
||||
<li>
|
||||
<a class="dropdown-item user-select-none @if ($pagination === $itemsPerPaginationEnum->value) active @endif text-center"
|
||||
href="{{ request()->fullUrlWithQuery(['page' => 1, 'pagination' => $itemsPerPaginationEnum->value]) }}"
|
||||
role="button">
|
||||
{{ $itemsPerPaginationEnum->value }}
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
{{-- HIDE PAGES TOO FAR --}}
|
||||
@if ($paginator->currentPage() > 4)
|
||||
<li class="page-item disabled"><span class="page-link">...</span></li>
|
||||
@endif
|
||||
{{-- SHOW ACTUAL PAGES + N-2/N+2 --}}
|
||||
@foreach (range(1, $paginator->lastPage()) as $i)
|
||||
@if ($i >= $paginator->currentPage() - 2 && $i <= $paginator->currentPage() + 2)
|
||||
@if ($i == $paginator->currentPage())
|
||||
<li class="page-item">
|
||||
<div class="dropup-center dropup">
|
||||
<button class="btn btn-primary dropdown-toggle rounded-0" data-bs-toggle="dropdown" type="button"
|
||||
aria-expanded="false">
|
||||
{{ $i }}
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
@for ($i = 1; $i <= $paginator->lastPage(); $i++)
|
||||
<li>
|
||||
<a class="dropdown-item text-center"
|
||||
href="{{ request()->fullUrlWithQuery(['page' => $i]) }}">
|
||||
{{ $i }}
|
||||
</a>
|
||||
</li>
|
||||
@endfor
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="{{ __('crud.pagination.specific_page', ['id' => $i]) }}">
|
||||
<a class="page-link" href="{{ $paginator->url($i) }}">{{ $i }}</a>
|
||||
</li>
|
||||
@endif
|
||||
@endif
|
||||
@endforeach
|
||||
{{-- HIDE PAGES TOO FAR --}}
|
||||
@if ($paginator->currentPage() < $paginator->lastPage() - 3)
|
||||
<li class="page-item disabled"><span class="page-link">...</span></li>
|
||||
@endif
|
||||
{{-- LAST PAGE --}}
|
||||
@if ($paginator->currentPage() < $paginator->lastPage() - 2)
|
||||
<li class="page-item" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="{{ __('crud.pagination.specific_page', ['id' => $paginator->lastPage()]) }}">
|
||||
<a class="page-link" href="{{ $paginator->url($paginator->lastPage()) }}">{{ $paginator->lastPage() }}</a>
|
||||
</li>
|
||||
@endif
|
||||
{{-- NEXT PAGE --}}
|
||||
<li class="page-item @if (!$paginator->hasMorePages()) disabled @endif">
|
||||
<a class="page-link d-flex align-items-center h-100" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="{{ __('crud.pagination.next') }}" aria-label="@lang('crud.pagination.next')"
|
||||
@if ($paginator->hasMorePages()) href="{{ $paginator->nextPageUrl() }}" @endif rel="next"
|
||||
@if (!$paginator->hasMorePages()) aria-hidden="true" @endif>
|
||||
<i class="fa-solid fa-chevron-right fa-2xs mt-1"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
</nav>
|
||||
@if ($paginator->hasPages())
|
||||
{{-- PAGINATION --}}
|
||||
<div class="d-flex justify-content-end align-items-center">
|
||||
<ul class="pagination m-0">
|
||||
{{-- PREVIOUS PAGE --}}
|
||||
<li class="page-item @if ($paginator->onFirstPage()) disabled @endif">
|
||||
<a class="page-link d-flex align-items-center h-100" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="{{ __('crud.pagination.previous') }}" aria-label="@lang('crud.pagination.previous')"
|
||||
@if (!$paginator->onFirstPage()) href="{{ request()->fullUrlWithQuery(['page' => $paginator->currentPage() - 1]) }}" @endif
|
||||
rel="prev" @if ($paginator->onFirstPage()) aria-hidden="true" disabled @endif>
|
||||
<i class="fa-solid fa-chevron-left fa-2xs mt-1"></i>
|
||||
</a>
|
||||
</li>
|
||||
{{-- FIRST PAGE --}}
|
||||
@if ($paginator->currentPage() > 3)
|
||||
<li class="page-item d-none d-sm-block" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="{{ __('crud.pagination.specific_page', ['id' => 1]) }}">
|
||||
<a class="page-link" href="{{ request()->fullUrlWithQuery(['page' => 1]) }}">1</a>
|
||||
</li>
|
||||
@endif
|
||||
{{-- HIDE PAGES TOO FAR --}}
|
||||
@if ($paginator->currentPage() > 4)
|
||||
<li class="page-item d-none d-sm-block disabled"><span class="page-link">...</span></li>
|
||||
@endif
|
||||
{{-- SHOW ACTUAL PAGES + N-2/N+2 --}}
|
||||
@foreach (range(1, $paginator->lastPage()) as $i)
|
||||
@if ($i >= $paginator->currentPage() - 2 && $i <= $paginator->currentPage() + 2)
|
||||
@if ($i == $paginator->currentPage())
|
||||
<li class="page-item">
|
||||
<div class="dropup-center">
|
||||
<button class="btn btn-primary dropdown-toggle rounded-0" data-bs-toggle="dropdown" type="button"
|
||||
aria-expanded="false">
|
||||
{{ $i }}
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
@for ($i = 1; $i <= $paginator->lastPage(); $i++)
|
||||
<li>
|
||||
<a class="dropdown-item user-select-none @if ($paginator->currentPage() === $i) active @endif text-center"
|
||||
href="{{ request()->fullUrlWithQuery(['page' => $i]) }}" role="button">
|
||||
{{ $i }}
|
||||
</a>
|
||||
</li>
|
||||
@endfor
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item d-none d-md-block" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="{{ __('crud.pagination.specific_page', ['id' => $i]) }}">
|
||||
<a class="page-link" href="{{ request()->fullUrlWithQuery(['page' => $i]) }}">{{ $i }}</a>
|
||||
</li>
|
||||
@endif
|
||||
@endif
|
||||
@endforeach
|
||||
{{-- HIDE PAGES TOO FAR --}}
|
||||
@if ($paginator->currentPage() < $paginator->lastPage() - 3)
|
||||
<li class="page-item d-none d-sm-block disabled"><span class="page-link">...</span></li>
|
||||
@endif
|
||||
{{-- LAST PAGE --}}
|
||||
@if ($paginator->currentPage() < $paginator->lastPage() - 2)
|
||||
<li class="page-item d-none d-sm-block" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="{{ __('crud.pagination.specific_page', ['id' => $paginator->lastPage()]) }}">
|
||||
<a class="page-link"
|
||||
href="{{ request()->fullUrlWithQuery(['page' => $paginator->lastPage()]) }}">{{ $paginator->lastPage() }}</a>
|
||||
</li>
|
||||
@endif
|
||||
{{-- NEXT PAGE --}}
|
||||
<li class="page-item @if (!$paginator->hasMorePages()) disabled @endif">
|
||||
<a class="page-link d-flex align-items-center h-100" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="{{ __('crud.pagination.next') }}" aria-label="{{ __('crud.pagination.next') }}"
|
||||
@if ($paginator->hasMorePages()) href="{{ request()->fullUrlWithQuery(['page' => $paginator->currentPage() + 1]) }}" @endif
|
||||
rel="next" @if (!$paginator->hasMorePages()) aria-hidden="true" disabled @endif>
|
||||
<i class="fa-solid fa-chevron-right fa-2xs mt-1"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
</nav>
|
||||
@endif
|
||||
|
|
|
|||
|
|
@ -9,16 +9,15 @@
|
|||
<div class="card-header">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="text-center text-md-start h2">
|
||||
<span class="fw-bold">{{ trans_choice('models.classes.products_monitoring', 2) }}</span> <span class="text-muted">{{ Str::ucfirst(__('liste')) }}</span>
|
||||
<h1 class="text-md-start h2 text-center">
|
||||
<span class="fw-bold">{{ trans_choice('models.classes.products_monitoring', 2) }}</span> <span
|
||||
class="text-muted">{{ Str::ucfirst(__('liste')) }}</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="input-group justify-content-end">
|
||||
<a href="{{ route('products.create') }}"
|
||||
class="btn btn-success"
|
||||
title="{{ __('Ajouter une :model', ['model' => trans_choice('models.classes.products_monitoring', 1)]) }}"
|
||||
data-bs="tooltip">
|
||||
<a class="btn btn-success" data-bs="tooltip" href="{{ route('products.create') }}"
|
||||
title="{{ __('Ajouter une :model', ['model' => trans_choice('models.classes.products_monitoring', 1)]) }}">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -28,7 +27,7 @@
|
|||
<div class="card-body">
|
||||
@include('pages.products.product-filters')
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<div class="col-12 col-md-6 p-3">
|
||||
{{ $products->withQueryString()->onEachSide(1)->links() }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,11 +37,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<div class="col-12 col-md-6 p-3">
|
||||
{{ $products->withQueryString()->onEachSide(1)->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue