Fala pessoal, como vocês estão? Espero que bem!
Hoje vamos tentar criar um CRUD simples com Livewire. Há quem diga que, “se você sabe fazer um CRUD de alguma determinada linguagem, já já é meio caminho andado”, então bora lá!
Criando o componente
Crie um novo componente Livewire chamado “Products” com o comando:
php artisan livewire:make ProductsConfigurando o Componente
Abra o arquivo app/Http/Livewire/Products.php e substitua o conteúdo pelo seguinte código:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Product;
class Products extends Component
{
public $products, $name, $price, $product_id;
public $isOpen = 0;
public function render()
{
$this->products = Product::all();
return view('livewire.products');
}
public function create()
{
$this->resetInputFields();
$this->openModal();
}
public function openModal()
{
$this->isOpen = true;
}
public function closeModal()
{
$this->isOpen = false;
}
public function store()
{
$this->validate([
'name' => 'required',
'price' => 'required|numeric',
]);
Product::updateOrCreate(['id' => $this->product_id], [
'name' => $this->name,
'price' => $this->price
]);
session()->flash('message',
$this->product_id ? 'Produto atualizado com sucesso!' : 'Produto criado com sucesso!');
$this->closeModal();
$this->resetInputFields();
}
public function edit($id)
{
$product = Product::findOrFail($id);
$this->product_id = $id;
$this->name = $product->name;
$this->price = $product->price;
$this->openModal();
}
public function delete($id)
{
Product::find($id)->delete();
session()->flash('message', 'Produto deletado com sucesso!');
}
private function resetInputFields()
{
$this->name = '';
$this->price = '';
$this->product_id = '';
}
}Como podem ver acima, já temos o backend de todas as operações (criar, ver, editar e deletar) no componente.
Criando as views
Crie as views para o componente em resources/views/livewire/products.blade.php:
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Produtos') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-4">
@if (session()->has('message'))
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
<strong class="font-bold">{{ session('message') }}</strong>
</div>
@endif
<button wire:click="create()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-3">Novo Produto</button>
@if($isOpen)
@include('livewire.create')
@endif
<table class="table-fixed w-full">
<thead>
<tr class="bg-gray-100">
<th class="px-4 py-2">Nome</th>
<th class="px-4 py-2">Preço</th>
<th class="px-4 py-2">Ação</th>
</tr>
</thead>
<tbody>
@foreach($products as $product)
<tr>
<td class="border px-4 py-2">{{ $product->name }}</td>
<td class="border px-4 py-2">{{ $product->price }}</td>
<td class="border px-4 py-2">
<button wire:click="edit({{ $product->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Editar</button>
<button wire:click="delete({{ $product->id }})" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Deletar</button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>Criando uma modal para adição/editação de produtos
Crie o arquivo resources/views/livewire/create.blade.php:
<x-jet-dialog-modal wire:model="isOpen">
<x-slot name="title">
{{ $product_id ? 'Editar Produto' : 'Novo Produto' }}
</x-slot>
<x-slot name="content">
<div class="mt-4">
<x-jet-label for="name" value="Nome" />
<x-jet-input id="name" class="block mt-1 w-full" type="text" wire:model="name" />
@error('name') <span class="error">{{ $message }}</span> @enderror
</div>
<div class="mt-4">
<x-jet-label for="price" value="Preço" />
<x-jet-input id="price" class="block mt-1 w-full" type="number" wire:model="price" step="0.01" />
@error('price') <span class="error">{{ $message }}</span> @enderror
</div>
</x-slot>
<x-slot name="footer">
<x-jet-secondary-button wire:click="closeModal">
{{ __('Fechar') }}
</x-jet-secondary-button>
<x-jet-button class="ml-2" wire:click="store">
{{ $product_id ? __('Atualizar') : __('Criar') }}
</x-jet-button>
</x-slot>
</x-jet-dialog-modal>Rotas
Adicione a rota para o componente no arquivo routes/web.php:
Route::livewire('/products', 'products');E é só usar!
Acesse a URL /products no seu navegador para interagir com o CRUD de produtos que você criou. Parabéns! Nos encontramos no próximo artigo!
