wikorl's avatar
Level 13

Filter + Pagination table not working

I have a livewire component with a filament datepicker and a dropdown list on the top. With these two fields I am able to filter the table below. But whenever I want to go to the next page on the paginator I get an error message

The GET method is not supported for this route. Supported methods: POST.

Livewire Component

class Overview extends Component implements HasForms
{
    use InteractsWithForms;
    use WithPagination;

    public $filterUser;
    public $filterDate;

    protected $listeners = ['ReservationDeleted' => 'getReservations'];

    protected function getFormSchema(): array
    {
        return [
            Datepicker::make('filterDate')
                    ->disableLabel()
                    ->minDate(now()->startOfDay())
                    ->displayFormat('d.m.Y')
                    ->required(),
        ];
    }

    public function setDate()
    {
        $this->filterDate = Carbon::parse($this->form->getState()['filterDate'])->startOfDay();
    }

    public function getReservations()
    {
        $reservations = Reservation::with('user')
                            ->when(!$this->filterDate, function($query) {
                                return $query->where('start_date', '>=', Carbon::today());
                            })
                            ->when($this->filterDate, function($query, $filterDate) {
                                return $query->where('start_date', $filterDate);
                            })            
                            ->when($this->filterUser, function($query, $filterUser) {
                                return $query->where('user_id', $filterUser);
                            })
                            ->orderBy('start_date')
                            ->paginate(10);

        return $reservations;
    }

    public function render()
    {
        $reservations = $this->getReservations();

        return view('livewire.reservations.overview', [
                'reservations' => $reservations,
                'users' => User::orderBy('surename')->get()
            ])
            ->layoutData(['header' => 'Übersicht Reservierungen']);
    }
}

Blade file

<div>
    <div class="md:flex md:justify-between md:items-center">
        <form wire:submit.prevent="setDate" class="flex items-center">
            {{ $this->form }}
         
            <button type="submit"
            class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150 ml-3 self-end">
                Zeige Datum
            </button>
        </form>
        <div>
            <label for="user" class="mr-1 dark:text-white">User</label>
            <select wire:model='filterUser' id="user"
                class="text-gray-900 transition duration-75 rounded-lg shadow-sm focus:border-primary-600 focus:ring-1 focus:ring-inset focus:ring-primary-600 disabled:opacity-70 border-gray-300">
                <option value="">Alle</option>
                @foreach ($users as $user)
                <option value="{{$user->id}}">{{ $user->full_name }}</option>
                @endforeach
            </select>
        </div>
    </div>
    
    <table class="min-w-full bg-white dark:bg-slate-700 rounded-md table-auto mt-4 mb-10">
        @foreach ($reservations as $reservation)
            <tr class="border-b" wire:key='{{$loop->index}}'>
                <td class="text-sm text-gray-900 dark:text-white font-light px-2 md:px-6 py-4 whitespace-nowrap">
                    {{ \Carbon\Carbon::parse($reservation->start_date)->translatedFormat('D d.m.Y') }}
                </td>
                <td class="text-sm text-gray-900 dark:text-white font-light px-2 md:px-6 py-4 whitespace-nowrap">
                    {{ $reservation->user->full_name}}
                </td>
                <td class="text-sm hidden md:block text-gray-900 dark:text-white font-light px-2 md:px-6 pt-5 whitespace-nowrap">
                    {{ $reservation->desk->name }} ({{ $reservation->desk->location }})
                </td>
                <td class="text-sm text-gray-900 font-light px-2 md:px-6 py-4 whitespace-nowrap">
                    <a href="{{ route('reservation.edit', $reservation->id) }}">
                        <button class="py-2 text-orange-500">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                            </svg>
                        </button>
                    </a>
                    <button wire:click='$emit("openModal", "modal.reservation-delete", {{ json_encode(["reservation" => $reservation->id]) }})' class="text-red-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </td>
            </tr>
        @endforeach
    </table>

    <div class="mt-2 mb-4">
        {{ $reservations->links('vendor.pagination.tailwind') }}
    </div>
</div>
0 likes
2 replies
aurawindsurfing's avatar

When you look at your routes web.php file what do you have for your reservation.edit route?

It should be Route::get and not Route::post or you are missing that route so do php artisan route:list to check.

wikorl's avatar
wikorl
OP
Best Answer
Level 13

I found the solution. The troublemaker is the custom pagination view. I changed it temporarily to the standard view and everything is working as expected.

Please or to participate in this conversation.