CRUD básico com Vue.js e json-server #6
Para finalizar o básico do CRUD, já temos a leitura com paginação, e a inclusão e edição de dados. Falta remover as cervejarias.
Quando clicamos no link para remover a cervejaria, que fica ao lado do ícone de edição, é necessário perguntar ao usuário se ele realmente deseja fazer isso. Ao invés de usarmos a função confirm nativa do Javascript, vamos inovar um pouco e aprender a instalar um plugin externo. Vamos usar o sweet alert, um dos melhores para este fim.
Primeiro, execute o comando:
npm install sweetalert -S
Depois do sweetalert estar instalado, precisamos adicionar as suas bibliotecas no arquivo index.html, veja:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>crud-vuejs</title>
<link rel="stylesheet" href="node_modules/bulma/css/bulma.css">
<!-- sweetalert inicio -->
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<script src="node_modules/sweetalert/dist/sweetalert.min.js"></script>
<!-- sweetalert fim -->
<link rel="stylesheet" type="text/css" href="node_modules/sweetalert/dist/sweetalert.css">
</head>
<body>
<app></app>
<script src="dist/build.js"></script>
</body>
</html>
Com o SweetAlert pronto, podemos usá-lo de acordo com a sua documentação. No link para remover a cervejaria, chamamos o método removeBrewery:
...
<a href="#" @click.prevent="removeBrewery(brewery)">
<i class="fa fa-trash"></i>
</a>
...
O método então usa o Sweet Alert, da seguinte forma:
methods:{
...
removeBrewery(brewery){
let self = this;
swal({ title: "Você tem certeza?",
text: `Deseja apagar "${brewery.name}"`,
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
cancelButtonText: "Cancelar",
confirmButtonText: "Sim, pode apagar!",
showLoaderOnConfirm: true,
closeOnConfirm: false }, function(){
//swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
},
...
}
O código acima produz o seguinte resultado, quando o usuário clica no link:
Agora precisamos implementar a funcionalidade para apagar a cervejaria. Para isso usamos o método self.$http.delete do Vue Resource, lembrando que a variável self é necessária para mantermos o escopo do vue em relação ao escopo do sweet alert. O código final é apresentado a seguir:
removeBrewery(brewery){
let self = this;
swal({ title: "Você tem certeza?",
text: `Deseja apagar "${brewery.name}"`,
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
cancelButtonText: "Cancelar",
confirmButtonText: "Sim, pode apagar!",
showLoaderOnConfirm: true,
closeOnConfirm: false }, function(){
self.$http.delete(`/breweries/${brewery.id}`).then(
result=>{
swal("Cervejaria removida!")
self.loadBreweries()
})
});
},
Um detalhe interessante é que o parâmetro showLoaderOnConfirm irá exibir um pequeno loader no botão vermelho, logo após o usuário clicá-lo. Esse loader irá aguardar o retorno do callback no qual apresentamos uma nova mensagem.
Se você desejar ver o que mudou exatamente no projet, acesse este link para ver o diff.
Com este artigo nós terminamos o “CRUD Básico” exibindo todos os passos para criar, alterar, exibir e remover dados utilizando o Vue e o Json Server. Ainda existem outros pontos a serem abordados, como o botão GPS para exibir um google maps, o botão + para exibir as cervejas de uma cervejaria, que é uma típica tela 1xN. Vamos sim continuar esse processo, aguardem!