Criando um CRUD com THF (7/7) - Apagando um ou mais clientes
Olá mundo!
Objetivo
Incluir em nossas páginas de listagem e visualização a opção de apagar o cadastro do cliente de nossa base. Vamos trabalhar com exclusão única e em lote.
Lista de posts da série THF CRUD:
- Iniciando o projeto ✅
- Listando nossos clientes ✅
- Pesquisando pelos nossos clientes ✅
- Criando um novo cliente ✅
- Visualizando dados de um cliente ✅
- Atualizando um cliente ✅
- Apagando um ou mais clientes ✅
Pré-requisitos
Esse é o último post (oficial) da série, então, se você não leu nenhum dos posts anteriores e não está familiarizado com o projeto e não tiver familiaridade com o THF, pode sentir alguma dificuldade. Estou tentando ser o mais didático possível para diminuir isso, mas o ideal é que você leia os posts anteriores para ter uma compreensão maior do projeto.
Mas se quiser continuar direto do último post, basta clonar o projeto com o que já foi implementado.
git clone --branch post-6 https://github.com/jhosefmarks/sample-thf-crud-customers.git <sua-pasta-de-trabalho>Passo 1 — Apagando um cliente
Na lata? De cara já? Sem rodeios? Sim, a gente só precisa adicionar uma ação na nossa lista de ações da tabela e criar a função que chama o endpoint que apaga o cadastro de cliente.
Abra o arquivo customer-list.component.ts e faça as alterações conforme o exemplo a seguir.
Legal! Nossa ação da tabela ficou em vermelho, mostrando para o usuário que é uma ação perigosa; mas será que apagamos mesmo o cadastro? O registro ainda está em nossa tabela e se mandarmos remover novamente o cadastro, teremos uma resposta bem diferente da anterior.
O cadastro foi apagado no backend, mas ainda está sendo exibido na tabela. Precisamos resolver isso! Podemos refazer a requisição e popular a tabela novamente, o que custaria mais uma requisição e dar um refresh na página toda. Ou podemos simplesmente remover o cliente da nossa tabela também. Não sei vocês, mas eu acho essa última opção muito mais atraente e é o que vamos implementar.
Agora sim, fizemos a requisição para apagar o cadastro e na confirmação da requisição também removemos o registro da nossa tabela.
Passo 2 — Apagando cadastros em lote
Bom, antes de iniciar a lógica dessa nova funcionalidade, nós, primeiro, vamos adicionar os checkboxs de seleção em nossa tabela e uma variável de referência. Assim, poderemos pegar os clientes selecionados pelo usuário.
Vamos abrir o arquivo customer-list.component.html e atualizar a nossa tabela.
Só com isso já teremos a seguinte alteração em nossa tabela, possibilitando a seleção de um ou mais clientes, bem como a seleção de todos os clientes com um único clique:
Bom, agora é só pegar os itens selecionados e enviar para o nosso backend.
Para isso, vamos adicionar uma nova ação em nossa página: pegar a referência da tabela da nossa página e criar uma função para enviar os ids dos clientes selecionados em nossa tabela.
Vamos voltar para o arquivo customer-list.component.ts.
Olha, nossa função para apagar cadastros em lote funcionando maravilhosamente!
Passo 3 — Apagando o cadastro na tela de visualização
Para finalizar, vamos incluir nossa função para apagar o cadastro de um cliente na nossa página de visualização também.
Vamos acessar o arquivo customer-view.component.ts e fazer a alterações necessárias.
Só de incluir a função remove na página, o componente thf-page-detail já sabe que precisa adicionar um novo botão na tela.
Conclusão
Com isso fechamos nosso CRUD. Nós implementamos todas as quatro operações em nosso projeto e chegamos ao fim na nossa primeira série.
Se você teve paciência e chegou até aqui, PARABÉNS!!! ❤️
Mas calma aí… Tem muita coisa que poderia ter sido diferente.
Sim, existem muitas coisas que poderiam ter sido diferentes, outros caminhos poderiam ser tomados e por aí em diante… Mas a ideia foi ser o mais didático possível e demonstrar algumas funcionalidades do THF de forma simples - principalmente sobre os componentes de página e de tabela.
Espero que tenham gostado e muito obrigado para os que acompanharam até aqui!
E para você que acompanhou o projeto até aqui, tem surpresa a caminho!
- BÔNUS: Refatorando o projeto e atualizando a versão do THF 😍
- BÔNUS: Publicando nosso projeto (Heroku) 😻
E agora, José?
Essa foi só a nossa primeira série sobre o THF. Em breve, teremos outras séries que vão mostrar que podemos reduzir ainda mais nosso código e aproveitar ainda mais a produtividade e a qualidade que o THF pode proporcionar para você.
Não deixe de continuar os estudos, acompanhe os release notes para ficar por dentro das novidades do THF.
Melhore nosso projeto e envie um Pull Request para ajudar outras pessoas que também estão acompanhando a série. Caso tenhamos algumas PRs, podemos ter um artigo só analisando as PRs propostas.
Você pode encontrar os fontes do projeto no meu github.
