Livewire: Creare Componenti Riutilizzabili e Modulari

Perché Componenti Riutilizzabili?

Creare componenti modulari riduce la duplicazione del codice e migliora la manutenibilità dell'applicazione.

Componente Base: Alert

Un semplice componente alert riutilizzabile:

<?php
namespace App\Livewire;

use Livewire\Component;

class Alert extends Component
{
    public string $type = 'info'; // info, success, warning, error
    public string $message = '';
    public bool $dismissible = true;
    public bool $show = true;

    public function dismiss()
    {
        $this->show = false;
    }

    public function render()
    {
        return view('livewire.alert');
    }
}
?>

Template del componente:

@if($show)
<div class="alert alert-{{ $type }} {{ $dismissible ? 'dismissible' : '' }}">
    <div class="flex items-center justify-between">
        <div class="flex items-center">
            @if($type === 'success')
                <svg class="w-6 h-6 text-green-500">...</svg>
            @elseif($type === 'error')
                <svg class="w-6 h-6 text-red-500">...</svg>
            @elseif($type === 'warning')
                <svg class="w-6 h-6 text-yellow-500">...</svg>
            @else
                <svg class="w-6 h-6 text-blue-500">...</svg>
            @endif

            <span class="ml-3">{{ $message }}</span>
        </div>

        @if($dismissible)
            <button wire:click="dismiss" class="ml-4">
                <svg class="w-5 h-5">...</svg>
            </button>
        @endif
    </div>
</div>
@endif

Utilizzo:

<livewire:alert
    type="success"
    message="Operazione completata con successo!"
    :dismissible="true"
/>

Componente Avanzato: Data Table

Un componente table con paginazione, ricerca e ordinamento:

<?php
namespace App\Livewire;

use Livewire\Component;
use Livewire\WithPagination;

class DataTable extends Component
{
    use WithPagination;

    public $model;
    public $columns = [];
    public $searchable = [];
    public $sortField = 'id';
    public $sortDirection = 'asc';
    public $search = '';
    public $perPage = 10;

    public function mount($model, $columns, $searchable = [])
    {
        $this->model = $model;
        $this->columns = $columns;
        $this->searchable = $searchable;
    }

    public function sortBy($field)
    {
        if ($this->sortField === $field) {
            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
        } else {
            $this->sortField = $field;
            $this->sortDirection = 'asc';
        }
    }

    public function updatingSearch()
    {
        $this->resetPage();
    }

    public function getRowsProperty()
    {
        $query = $this->model::query();

        // Ricerca
        if ($this->search && count($this->searchable) > 0) {
            $query->where(function ($q) {
                foreach ($this->searchable as $field) {
                    $q->orWhere($field, 'like', '%' . $this->search . '%');
                }
            });
        }

        // Ordinamento
        $query->orderBy($this->sortField, $this->sortDirection);

        return $query->paginate($this->perPage);
    }

    public function render()
    {
        return view('livewire.data-table', [
            'rows' => $this->rows,
        ]);
    }
}
?>

Utilizzo del componente:

<livewire:data-table
    :model="\App\Models\User::class"
    :columns="[
        'id' => 'ID',
        'name' => 'Nome',
        'email' => 'Email',
        'created_at' => 'Creato il'
    ]"
    :searchable="['name', 'email']"
/>

Comunicazione tra Componenti

Usa eventi per far comunicare i componenti:

<?php
// Componente che emette evento
class ProductForm extends Component
{
    public function save()
    {
        // Salva prodotto...

        $this->dispatch('product-created', productId: $product->id);
    }
}

// Componente che ascolta evento
class ProductList extends Component
{
    protected $listeners = ['product-created' => 'refreshList'];

    public function refreshList($productId)
    {
        // Ricarica la lista
        $this->products = Product::all();
    }
}
?>