Appunti Screencast Livewire

4 minuti

15/11/2022

Tempo di lettura: 7 min.

Contenuto degli appunti dallo screencast del sito ufficiale di Livewire:

Utilità
Test
Form Notification
Custom Form Input + Trix e Flatpickr
File Upload + Filepond
Data Table

Utilità

I componenti posso essere delle pagine intere: Route::get('...',full/qualified/path/component::class)

Si possono rinominare e spostare i file con livewire:move "nome" "cartella.nuovonome“.

Nei metodi dei componenti si possono fare i return redirect().

Quando bisogna mostrare condizionalmente div fratelli, é meglio racchiuderli in un div esterno.

Se si dichiara $rules si può usare validate() senza argomenti.

Si puó dichiarare public ModelName $modelName; per non importare tutti gli attributi a mano.

ModelName::make() crea un’istanza vuota.

Per salvare le modifiche -> $modelName->save()

Si puó accedere alla proprietá dei componenti Livewire tramite Alpine con $wire.nome.

Nei file Blade si può usare $attributes->wire('nomeAttributo').

x-data="{ open: @entangle($attributes->wire('model')) }"

Per risparmiare request inutili, come quelle per aprire/chiudere modal, si può usare wire:model.defer.

wire:init permette di eseguire una funzione non appena il componente viene renderizzato.

Test

php artisan make:test

Se si agisce sul database, ricordarsi di usare use RefreshDatabase.

Livewire::test('nome.component') ->set(var,val) ->call('method') ->assert(...);

Tra tutti i test si comina con:

x_page_contains_livewire_component(){
   $this->get($url)->assertSeeLivewire('nome');
}

Form Notification

$model->refresh() sincronizza il contenuto della variabile con il database.

updated($field) intercetta l’input di una properità specifica.

$this->dispatchBrowserEvent('nome') è un browser event ascoltabile con addEventListener.

$this->emit('nome') è un evento livewire e si può ascoltare in Alpine con Livewire.on('nome',fn).

Entrambi i tipi di evento hanno event.detail.

Un’altra opzione per gestire gli eventi è : usare $emitSelf in Livewire + @this.on() in Livewire.

Si usa x-on:nomevento.window per ascoltare un evento window level.

Nei componenti Livewire, le notifiche si fanno con session()->flash().

Per evitare che i componenti nascosti flashino durante il caricamento della pagina si puó usare style="display: none".

Custom Form Input

wire:model = $dispatch('input', val)
wire:model.lazy = $dispatch('change', val)

Con x-init si possono configurare le librerire js e si può usare $refs.name per riferirsi agli elementi.

Con Alpine si possono emettere custom event con $dispatch('nome').

Se si usa wire:ignore non funzionano i wire:model negli elementi figli.

Se si usa alpine si può evitare wire:ignore.

A volte nei custom input conviene aggiungere wire:model.debounce

Trix

<div
    x-data = "{
        value: @entangle($attributes->wire('model'))
    }"
    x-init="
        $refs.trix.editor.loadHTML(value); 
        $watch('value', value => document.activeElement !== $refs.trix && $refs.trix.editor.loadHTML(value))
    "
    x-on:trix-change="value = $event.target.value"
    wire:ignore
>
    <input id="x" type="hidden">
    <trix-editor x-ref="trix" input="x"></trix-editor>
</div>

Flatpickr

Coming soon...

File Upload

Per i test si può usare UploadedFile::fake().

La preview del file si può caricare con $var->temporaryUrl().

Label Hack : click su label = click su input hidden ( quest’ultimo con sr-only e @focus ring con Alpine).

Un’alternativa a questo trucco è utilizzare $refs.nome.click()/submit().

Filepond

<div
    wire:ignore
    x-data="{
        name: '{{ $attributes->wire('model')->value() }}',
    }"
    x-init="
        $nextTick(() => {
            FilePond.create($refs.{{ $attributes->get('ref') ?? 'input' }}); 
            FilePond.setOptions({
                allowMultiple: {{ $attributes->has('multiple') ? 'true' : 'false' }},
                server: {
                    process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                        @this.upload(name, file, load, error, progress);
                    },
                    revert: (filename, load) => {
                        @this.removeUpload(name, filename, load)
                    },
                },
                allowImagePreview: {{ $attributes->has('allowImagePreview') ? 'true' : 'false' }},
                imagePreviewMaxHeight: {{ $attributes->has('imagePreviewMaxHeight') ? $attributes->get('imagePreviewMaxHeight') : '256' }},
                allowFileTypeValidation: {{ $attributes->has('allowFileTypeValidation') ? 'true' : 'false' }},
                acceptedFileTypes: {!! $attributes->get('acceptedFileTypes') ?? 'null' !!},
                allowFileSizeValidation: {{ $attributes->has('allowFileSizeValidation') ? 'true' : 'false' }},
                maxFileSize: {!! $attributes->has('maxFileSize') ? "'".$attributes->get('maxFileSize')."'" : 'null' !!}
            });
        })
    "
>
    <input type="file" x-ref="{{ $attributes->get('ref') ?? 'input' }}" />
</div>

Questo componenete blade può interagire con Spatie Media Library:

collect($this->images)->each( fn($image) =>
   $this->product->addMedia($image->getRealPath())
       ->toMediaCollection('gallery') 
);

Data Table

Aggiungere protected $queryString = [ 'par1', 'par2', ... ] al componente Livewire permette di aggiungere gli attributi nella querystring.

Per i filtri si aggiunge la proprietà $filters[] a cui si associano gli input con il parametro lazy.

Per il sorting si usano le proprietà $field e $direction.

I filtri possono essere reimpostati alla stato iniziale con $this->reset($filters).

Nei cicli for e se si fa paginazione bisogna ricordarsi di specificare key="ref-{{ $id }}" agli elementi per non rischiare di rimpiazzarne il contenuto.

Compendio – Laravel Appunti AlpineJS

Titolo