diskominfo/simedkom
diskominfo/simedkom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Introduce custom Livewire pagination component and apply it to news and announcements, enhancing list rendering with wire:key.

Browse Source
This commit is contained in:
Yoga Pangestu 2026-01-06 11:13:26 +07:00
parent 3577c8827a
commit a4f85c53c5
3 changed files with 62 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/views/livewire/home/announcements.blade.php
View File

@ -31,11 +31,11 @@ class="bi bi-megaphone text-white icon-small me-10px"></i>{{ $pageTitle }}</span
<div class="container">
<div class="row">
<div class="col-12">
<ul class="blog-wrapper grid-loading grid grid-1col gutter-extra-large">
<ul class="blog-wrapper grid grid-1col gutter-extra-large">
<li class="grid-sizer"></li>
<!-- start blog item -->
@foreach ($announcements as $announcement)
<li class="grid-item">
<li class="grid-item" wire:key="announcement-{{ $announcement->id }}">
<div
class="card border-0 border-radius-4px overflow-hidden box-shadow-quadruple-large box-shadow-quadruple-large-hover">
<div class="card-body p-0">
@ -63,7 +63,7 @@ class="card-title mb-10px fw-600 fs-19 lh-28 text-dark-gray text-primary-hover">
</ul>
</div>
<div class="col-12 mt-4 d-flex justify-content-center">
{{ $announcements->links() }}
{{ $announcements->links('livewire.home.custom-pagination') }}
</div>
</div>
</div>

57
resources/views/livewire/home/custom-pagination.blade.php Normal file
View File

@ -0,0 +1,57 @@
@if ($paginator->hasPages())
<ul class="pagination pagination-style-01 fs-13 fw-500 mb-0">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<li class="page-item disabled" aria-disabled="true">
<span class="page-link">
<i class="feather icon-feather-arrow-left fs-18 d-xs-none"></i>
</span>
</li>
@else
<li class="page-item">
<a class="page-link" href="javascript:void(0)" wire:click="previousPage" rel="prev">
<i class="feather icon-feather-arrow-left fs-18 d-xs-none"></i>
</a>
</li>
@endif
{{-- Pagination Elements --}}
@foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
@if (is_string($element))
<li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span>
</li>
@endif
{{-- Array Of Links --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li class="page-item active" aria-current="page"><span
class="page-link">{{ sprintf('%02d', $page) }}</span></li>
@else
<li class="page-item">
<a class="page-link" href="javascript:void(0)"
wire:click="gotoPage({{ $page }})">{{ sprintf('%02d', $page) }}</a>
</li>
@endif
@endforeach
@endif
@endforeach
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<li class="page-item">
<a class="page-link" href="javascript:void(0)" wire:click="nextPage" rel="next">
<i class="feather icon-feather-arrow-right fs-18 d-xs-none"></i>
</a>
</li>
@else
<li class="page-item disabled" aria-disabled="true">
<span class="page-link">
<i class="feather icon-feather-arrow-right fs-18 d-xs-none"></i>
</span>
</li>
@endif
</ul>
@endif

4
resources/views/livewire/home/news/index.blade.php
View File

@ -33,7 +33,7 @@ class="bi bi-megaphone text-white icon-small me-10px"></i>{{ $pageTitle }}</span
<div class="col-12 col-lg-8 blog-standard md-mb-50px sm-mb-40px">
@forelse($news as $item)
<!-- start blog item -->
<div class="col-12 mb-40px">
<div class="col-12 mb-40px" wire:key="news-{{ $item->id }}">
<div class="card border-0 no-border-radius box-shadow-extra-large">
@if ($item->thumbnail)
<div class="blog-image">
@ -78,7 +78,7 @@ class="bg-base-color"></span></a>
@endforelse
<div class="col-12 mt-8 d-flex justify-content-center">
{{ $news->links() }}
{{ $news->links('livewire.home.custom-pagination') }}
</div>
</div>
<!-- start sidebar -->