O SweetAlert é uma biblioteca usada para estilizar e adicionar funcionalidade a caixas de diálogo (os famosos prompts e alerts) em aplicativos da web. Oferece um conjunto de funcionalidades que tornam a comunicação entre suas páginas e os usuários mais funcional e elegante. Conheça mais sobre a ferramenta: https://sweetalert2.github.io
E sim, dá pra usar com Livewire! Neste artigo ainda estou usando a versão 2.0 do Livewire, mas nada que não possa ser adapatada para a versão mais atual.
Primeiro, vamos criar um componente Livewire no nosso projeto do Laravel:
php artisan livewire:make ListItemsAgora vamos rodar o seguinte comando para instalar o SweetAlert:
npm install sweetalert2Em seguida vamos criar uma view. Dentro da pasta resources/views crie o arquivo principal.blade.php e então vamos carregar o componente criamos dentro desta blade, e também carregar as bibliotecas necessárias do SweetAlert. Confira se o caminho corresponde ao do que foi instalado em seu projeto:
@extends('layouts.app')
@section('title')
Livewire
@endsection
@section('css')
<link rel="stylesheet" type="text/css" href="{{URL::asset('/build/libs/sweetalert2/sweetalert2.min.css')}}" />
@endsection
@section('content')
<div class="container">
@livewire('list-items')
</div>
<script src="{{ URL::asset('/build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
@endsectionBora configurar uma rota para acessar essa view. Em routes/web.php acrescente a seguinte linha:
Route::get('livewire', function () { return view('principal'); }); Agora, vamos supor que você já possua uma tabela em sua base de dados de Itens, contendo id e descrição. Não vou entrar nos detalhes, mas você pode acessar o artigo de como criar uma API em Laravel e ver como criar, caso ainda tenha dificuldades com esta parte.
Eu ainda prefiro trabalhar com o padrão SOLID, puxando diretamente os Services que preciso dentro do componente do blade, mas para facilitarmos este artigo, vamos puxar os dados diretamente da Model Items.
Acesse o arquivo do Componente Livewire em app/Http/Livewire/ListItems.php. Dentro do arquivo vamos chamar a Model, e listar os itens no componente:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Items;
class ListItems extends Component
{
public $items = [];
/** Listener para recarregar a lista de items e deletar o Item */
protected $listeners = [
'reloadData' => 'reloadData',
'deleteItem' => 'deleteItem',
];
public function mount()
{
$this->getData();
}
public function render()
{
return view('livewire.list-items');
}
/** Recupera todos os Itens */
private function getData()
{
$this->items = Items::all()->toArray()
}
/** recarregar a lsita de Itens */
public function reloadData()
{
$this->getData();
}
/** Deleta o Item e Recarrega a Lista de Itens */
public function deleteItem(int $id)
{
$item = Items::find($id);
$item->delete();
$this->reloadData();
}
}Agora, vamos criar a lista de itens na blade do componente. Acesse o arquivo resources/views/livewire/list-items.blade.php:
<div>
<table class="table table-sm table-bordered text-nowrap text-center">
<thead>
<tr>
<th>ID</th>
<th>DESCRIÇÃO</th>
<th>DELETAR<th>
</tr>
</thead>
<tbody>
@if ($items)
@foreach ($items as $key => $item)
<tr>
<td>{{$item['id']}}</td>
<td>{{$item['descricao']}}</td>
<td>
<span class="badge badge-soft-danger" role="button" onclick="excluirItem({{$item['id']}})">DELETAR</span>
</td>
</tr>
@endforeach
@endif
</tbody>
</table>
</div>Agora vamos voltar à nossa blade principal.blade.php e adicionar este código Javascript no fim da @section(‘content’):
<script>
window.onload = function() {
window.excluirItem = async function(id)
{
Swal.fire({
text: "Excluir este Item. Confirma?",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#34c38f",
cancelButtonColor: "#f46a6a",
confirmButtonText: "Sim, Excluir!",
cancelButtonText: "Cancelar"
}).then(async function (result) {
if (result.value) {
Livewire.emit('deleteItem', id);
}
return false;
});
}
window.reloadData = function() {
Livewire.emit('reloadData');
}
}
</script>Prontinho! basta rodar o php artisan serve, acessar a url /livewire e ver a mágica acontecer!
Se gostou desse artigo, me dá uma forcinha seguindo lá no X. Volta e meio posto algum conteúdo relacionado a desenvolvimento por aqui! Um grande abraço!
