Blok 5 · rozdział 12

Livewire — szukanie bez frameworka JS

Lista z bazy już działa. Livewire doda szukanie i filtr pasma. JavaScriptu nie piszesz, Reacta ani Vue nie instalujesz. Kod zostaje w klasie PHP, a HTML w widoku Blade.

Po tym rozdziale powinieneś umieć

powiedzieć, czym komponent Livewire różni się od zwykłego widoku i od komponentu <x-karta-szczytu>;
utworzyć komponent klasowy i wstawić go na listę;
podpiąć pole pod wire:model.live;
zawęzić zapytanie Eloquent frazą i identyfikatorem pasma.

1. Po co Livewire

Zwykły filtr to formularz GET: wpisujesz frazę, wysyłasz, cała strona ładuje się od nowa. Da się tak zrobić samym Laravelu i taki filtr też jest w porządku. Livewire zostawia rysowanie po stronie serwera, a do przeglądarki dokłada mały skrypt mostka. Przy kolejnej literze mostek pyta serwer i podmienia fragment HTML.

Livewire Pakiet do interakcji w PHP. Uczeń pisze klasę i Blade. To nie jest framework, w którym opisujesz ekran w JavaScript. Oficjalnego startera Livewire z biblioteką Flux na kursie nie używamy — za dużo gotowca, za mało widać tras i modeli.

	Komponent Blade `<x-…>`	Komponent Livewire
Kiedy żyje	W trakcie składania jednej odpowiedzi HTML	Przy kolejnych akcjach na tej samej stronie
Gdzie jest logika	W kontrolerze, zanim widok ruszy	W klasie komponentu
Przykład na kursie	Karta jednego szczytu	Szukanie na liście

2. Instalacja i komponent

composer require livewire/livewire
php artisan make:livewire SzukajSzczytow

Oczekiwane pliki: app/Livewire/SzukajSzczytow.php oraz resources/views/livewire/szukaj-szczytow.blade.php. Gdy Artisan zapyta o typ, wybierz komponent klasowy (osobny PHP i Blade). Gdy dostaniesz jeden plik, treść jest ta sama: właściwości i metoda na górze, HTML niżej.

W układzie layouts/korona.blade.php dopisz w <head> dyrektywę @livewireStyles, a przed </body> dyrektywę @livewireScripts.

Na liście, zamiast własnej pętli, zostaw komponent. Formularz planu z sesji możesz usunąć — liczą się zdobycia.

@section('content')
    <h1>Szczyty Korony</h1>
    <livewire:szukaj-szczytow />
@endsection

Kontroler index może oddać widok bez kolekcji. Szukanie samo czyta modele.

3. Fraza na żywo

namespace App\Livewire;

use App\Models\Szczyt;
use Livewire\Component;

class SzukajSzczytow extends Component
{
    public string $fraza = '';

    public function render()
    {
        $szczyty = Szczyt::query()
            ->with('pasmo')
            ->when($this->fraza !== '', function ($zapytanie) {
                $zapytanie->where('nazwa', 'like', '%'.$this->fraza.'%');
            })
            ->orderByDesc('wysokosc_m')
            ->get();

        return view('livewire.szukaj-szczytow', [
            'szczyty' => $szczyty,
        ]);
    }
}

<div>
    <label>
        Szukaj
        <input type="search" wire:model.live="fraza" placeholder="np. Śnieżka">
    </label>

    <div class="siatka">
        @forelse ($szczyty as $szczyt)
            <x-karta-szczytu :szczyt="$szczyt" />
        @empty
            <p>Nic nie pasuje do filtra.</p>
        @endforelse
    </div>
</div>

Jeden korzeń Widok Livewire ma mieć jeden zewnętrzny znacznik, u nas <div>. Dwa równorzędne elementy na wierzchu kończą się błędem komponentu.

wire:model.live Wiąże pole formularza z właściwością publiczną klasy. Przy zmianie tekstu serwer liczy listę od nowa. Bez .live właściwość czeka na wysłanie formularza, a przycisku „Szukaj” tu nie ma.

Wpisz sowa. Zostaje Wielka Sowa. Wyczyść pole — wraca 28 szczytów. W narzędziu Sieć widać żądania do serwera. Przeglądarka nie filtruje tablicy w JavaScript napisanym przez Ciebie.

4. Filtr pasma

Dopisz właściwość public string $pasmoId = ''; i drugi when:

->when($this->pasmoId !== '', function ($zapytanie) {
    $zapytanie->where('pasmo_id', $this->pasmoId);
})

Do widoku przekaż 'pasma' => Pasmo::query()->orderBy('nazwa')->get(). Obok pola szukania:

<select wire:model.live="pasmoId">
    <option value="">Wszystkie pasma</option>
    @foreach ($pasma as $pasmo)
        <option value="{{ $pasmo->id }}">{{ $pasmo->nazwa }}</option>
    @endforeach
</select>

Fraza i pasmo działają razem: puste pasmo nie dokłada warunku, pusta fraza też nie.

Czego nie wkładasz do właściwości publicznej $fraza może przyjść z przeglądarki — to jest cel. Identyfikatora zalogowanego użytkownika ani cudzego user_id nie trzymaj w publicznej właściwości Livewire, bo da się ją podmienić w żądaniu. Zapis zdobycia zostaje w kontrolerze z rozdziału 11.

Commit

Gdy fraza i pasmo zawężają listę, a puste pola ją przywracają:

git add .
git status
git commit -m "Szukanie Livewire"

Przed commitem git status nie pokazuje .env.