Bulk Selection

{{-- resources/views/livewire/product-list.blade.php --}}
<div>
    {{-- 1. The search names the filter: another one clears every match. --}}
    <x-wirekit::input type="search" wire:model.live.debounce.300ms="search" label="Search products" />

    {{-- 2. `wire:model` binds every match; `total` and `filter` come with each render. --}}
    <x-wirekit::bulk-selection wire:model.live="allMatches" :total="$products->total()" :filter="$search">
        <x-wirekit::table>
            <x-wirekit::table.head>
                <x-wirekit::table.row>
                    {{-- 3. The header checkbox reads and selects this page. --}}
                    <x-wirekit::table.th><x-wirekit::bulk-selection.toggle /></x-wirekit::table.th>
                    <x-wirekit::table.th>Product</x-wirekit::table.th>
                </x-wirekit::table.row>
            </x-wirekit::table.head>
            <x-wirekit::table.body>
                {{-- 4. The rows are bound as before: one array of ids. --}}
                @foreach ($products as $product)
                    <x-wirekit::table.row wire:key="product-{{ $product->id }}">
                        <x-wirekit::table.td>
                            <x-wirekit::checkbox wire:model.live="selected" :value="$product->id" :label="'Select '.$product->name" hide-label />
                        </x-wirekit::table.td>
                        <x-wirekit::table.td>{{ $product->name }}</x-wirekit::table.td>
                    </x-wirekit::table.row>
                @endforeach
            </x-wirekit::table.body>
        </x-wirekit::table>
    </x-wirekit::bulk-selection>

    {{-- 5. Livewire's pager: a turned page is a request, so every match holds across it. --}}
    {{ $products->links() }}
</div>

<?php
// app/Livewire/ProductList.php

namespace App\Livewire;

use App\Models\Product;
use Illuminate\Database\Eloquent\Builder;
use Livewire\Component;
use Livewire\WithPagination;

class ProductList extends Component
{
    // 6. Without it, `links()` renders plain links: each page is a new visit, and every match
    //    starts over as false.
    use WithPagination;

    // 7. The ids of the rows the reader selected, and whether every match is.
    public array $selected = [];

    public bool $allMatches = false;

    public string $search = '';

    // 8. Another search starts on its first page.
    public function updatingSearch(): void
    {
        $this->resetPage();
    }

    // 9. A bulk action reaches every match through the query, not through the ids.
    public function archive(): void
    {
        $products = $this->allMatches
            ? $this->query()
            : Product::query()->whereKey($this->selected);

        $products->update(['status' => 'archived']);

        $this->reset('selected', 'allMatches');
    }

    protected function query(): Builder
    {
        return Product::query()->where('name', 'like', '%'.$this->search.'%');
    }

    public function render()
    {
        return view('livewire.product-list', [
            'products' => $this->query()->orderBy('name')->paginate(50),
        ]);
    }
}