Hello Everyone,
i tried upgrading my Livewire version from 2 to 3 but when i do, the pagination breaks in a weird way and is not properly functioning anymore.
When clicking the controls of the paginator, for example "next" only the first item gets changed and the others stay as before. If i change the URL Parameter by hand, everything works fine.
I tried upgrading the project completely by hand following the official upgrade guide and i also tried using the upgrade command Livewire provides. Both did not work out and the paginators were still broken.
I am super confused and i already asked a question on stackoverflow, but no one seems to have an answer for me.
For now i cant upgrade because of that, but i would really like to use the new features of version 3.
Thanks in advance.
My Livewire component:
<?php
namespace App\Http\Livewire\Admin;
use App\Models\RevisaInvoice;
use Livewire\Component;
use Livewire\WithPagination;
class RevisaInvoicesList extends Component
{
use WithPagination;
public string $filenameSearch = '';
public string $companySearch = '';
public string $dateSearch = '';
public bool $showProcessed = false;
public function render()
{
return view('livewire.admin.revisa-invoices-list', [
'revisaInvoices' => RevisaInvoice::final()
->where('filename', 'LIKE', '%'.$this->filenameSearch.'%')
->whereHas('client', function ($q) {
$q->where('name', 'LIKE', '%'.$this->companySearch.'%');
})
->where('created_at', 'LIKE', '%'.$this->dateSearch.'%')
->where('is_processed', $this->showProcessed)
->orderBy('is_processed')
->orderByDesc('created_at')
->paginate(8, pageName: 'revisa-invoices')
]);
}
public function updated(): void
{
$this->resetPage();
}
public function toggleProcessed(RevisaInvoice $revisaInvoice): void
{
$revisaInvoice->toggleProcessed();
}
}
<div wire:poll.60s>
<div class="grid sm:grid-cols-3 gap-1 sm:gap-3">
<x-forms.input wire:model.live="filenameSearch" type="text" placeholder="{{ __('Filter Filename') }}" />
<x-forms.input wire:model.live="companySearch" type="text" placeholder="{{ __('Filter Company') }}" />
<x-forms.input wire:model.live="dateSearch" type="text" placeholder="{{ __('Filter Created at') }}" />
</div>
<div class="mt-2">
<label>
<input wire:model.live="showProcessed" type="checkbox" class="rounded border-gray-400 placeholder-gray-200 mr-1 -mt-[2px]">
<span>{{ __('Show processed invoices') }}</span>
</label>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
@forelse($revisaInvoices as $revisaInvoice)
<div class="relative mt-5" wire:key="revisaInvoice--{{ $revisaInvoice->id }}">
<div onclick="return confirm('Are you sure?') || event.stopImmediatePropagation()"
wire:click="toggleProcessed({{ $revisaInvoice }})"
class="absolute cursor-pointer -bottom-[12px] -right-[12px] px-[5px] py-[3px] bg-white rounded-full border group shadow z-10 {{ $revisaInvoice->is_processed ? 'hover:border-danger-700' : 'hover:border-success-700' }}"
tabindex="0"
title="{{ $revisaInvoice->is_processed ? __('Mark as unprocessed') : __('Mark as processed') }}">
@if($revisaInvoice->is_processed)
<i class="fa-solid fa-times fa-fw group-hover:text-danger-700"></i>
@else
<i class="fa-solid fa-check fa-fw group-hover:text-success-700"></i>
@endif
</div>
<div class="border rounded shadow relative {{ $revisaInvoice->is_processed ? 'border-success-400' : '' }}">
<a class="flex items-center text-primary-800 hover:text-secondary-400 p-3 rounded-t border-b {{ $revisaInvoice->is_processed ? 'bg-success-100' : '' }}"
href="{{ route('admin.invoices.download', ['revisa', $revisaInvoice->id]) }}"
title="{{ __('Download') . ': ' . $revisaInvoice->filename }}">
<i class="fa-solid fa-file-pdf text-2xl"></i>
<span class="ml-2 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ $revisaInvoice->filename }}</span>
</a>
<div class="{{ $revisaInvoice->is_processed ? 'bg-success-100' : 'bg-gray-50' }} px-3 py-2">
<small class="text-gray-300 block">{{ __('From') }}</small>
<span>{{ $revisaInvoice->client->name }}</span>
</div>
<div class="{{ $revisaInvoice->is_processed ? 'bg-success-100' : 'bg-gray-50' }} px-3 py-2 rounded-b">
<small class="text-gray-300 block">{{ __('Created at') }}</small>
<span>{{ date('d-m-Y', strtotime($revisaInvoice->created_at)) }}</span>
</div>
</div>
</div>
@empty
<div class="mt-3 col-span-4">
<x-alert type="warning">{{ __('No invoices') }}</x-alert>
</div>
@endforelse
</div>
<div class="mt-5">
{{ $revisaInvoices->links() }}
</div>
</div>