Olá mundo!
Objetivo
Reutilizar nossa página de criação para servir como página de atualização dos dados do nosso cliente.
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
Leia os posts anteriores para ter uma compreensão maior do projeto. Agora, nós vamos criar uma nova rota e vamos utilizar a página que já foi criada em um post anterior.
Mas se quiser continuar direto do último post, basta clonar o projeto com o que já foi implementado.
git clone --branch post-5 https://github.com/jhosefmarks/sample-thf-crud-customers.git <sua-pasta-de-trabalho>
Passo 1 — Criando uma nova rota em nosso projeto
Até agora, nós temos criado a cada post uma nova página (um novo componente) e uma nova rota. Mas como o formulário de criação e edição são muito parecidos, nós vamos reaproveitar uma página que já existe para fazer a alteração. O que vai diferenciar uma ação da outra (inclusão x alteração) vai ser a nossa rota.
Para isso, abra o arquivo customers-routing.module.ts e inclua a rota para alteração dos dados do nosso cliente:
Como estamos usando uma página já existente, agora é possível acessar a página de criação através da rota de edição http://localhost:4200/customers/edit/0148093543698.
Observe que nessa nova rota estamos usando um parâmetro chamado “id”; já que vamos alterar os dados de um cliente já cadastrado, precisamos dessa informação para buscar no backend os dados necessários.
Esse id 0148093543698 está em nossa base de teste mas pode ser outro id, de acordo com seu exemplo.
Passo 2 — Chamando a página de edição a partir da página de listagem
Ficar testando nossa página sem ter um id real em nossa base de teste irá gerar complicações, uma vez que isso pode limitar nossos testes. Então, vamos voltar na nossa página de listagem e, a partir dela, vamos abrir nossa página de edição. Assim, não vamos precisar se preocupar em informar um id válido na url – inclusive vamos poder editar um cliente cadastrado em nossos testes durante o desenvolvimento.
Vamos acessar o arquivo customer-list.component.ts, incluir uma nova ação na lista de ações da nossa tabela e criar uma função para navegar até a página de edição, passando o id do cliente em nossa url.
Ao adicionar a nova ação para a tabela, a mesma passa a exibir uma lista de ações, com isso já podemos navegar para a url de edição.
Para fins didáticos, vamos criar uma regra onde registros diferentes de “Active” não podem ser editados, sendo assim, vamos desabilitar a ação para esses registros.
Nós poderíamos aplicar a regra dentro da função onEditCustomer, chamando a função de navegação apenas se fosse um cliente ativo, mas a ideia é mostrar a flexibilidade que o thf-table dá para o desenvolvedor.
Passo 3 — Buscando os dados do cliente para serem editados
No post anterior, nós vimos como buscar os dados de um cliente em nosso backend. Vamos fazer isso em nossa página de edição também, mas a diferença aqui é que como a nossa página serve tanto para edição, como para inclusão, ter ou não o id é que vai no dizer se é uma ação de edição ou inclusão.
Com essas alterações, já é possível carregar o formulário com os dados do cliente:
Passo 4 — Reconfigurando a página de acordo com o tipo de ação
Mesmo abrindo a página em modo de edição, o título da página é sempre o mesmo e todos os campos podem ser alterados, por questões didáticas, vamos desabilitar os campos referentes ao nome, e-mail e status e vamos alterar o título da página.
Para isso, vamos iniciar criando uma propriedade que vai apenas armazenar o tipo de ação e, baseado nela, vamos fazer as alterações necessárias no nosso template.
Alterações feitas no componente de acordo com o tipo de ação
Alterações no template para se adaptar ao tipo de ação
Como resultado, agora nossa página fica diferente quando é chamada em modo de edição:
Existem forma melhores para reaproveitar páginas, essa forma é uma forma simples de se fazer, mas muito eficaz. ?
Passo 5 — Atualizando os dados do cliente
A mesma lógica que usamos para desabilitar os componentes, nós podemos usar para mudar o tipo de requisição, já que, ao invés de usar o post, nós devemos usar o put/patch para fazer alterações.
De forma prática, vamos fazer a atualização de forma bem simples e de quebra dar uma melhorada no código.
Com isso, já podemos editar nossos clientes:
Ainda precisamos resolver uma pequeno problema, pois se tentarmos acessar um cadastro inativo diretamente pela url, a nossa aplicação vai permitir; e ainda pior: vai deixar a gente salvar as alterações, ou seja, enviar uma requisição para o backend.
Podemos resolver isso de várias formas:
- Fazendo a verificação no ngOnInit e redirecionar para uma outra página;
- Deixando o usuário acessar a página mas desabilitar a ação de salvar;
- Configurando uma guarda para a rota e usar o método CanActivated;
- dentre muitas outras formas…
Todas essas opções resolvem o problema do frontend, ou seja, qualquer usuário mal intencionado pode inspecionar o tipo de requisição e refazer a mesma diretamente para o nosso backend, sendo assim a dica é:
Faça sempre a camada de segurança no seu backend e feche o que puder do lado do frontend.
Em nosso exemplo, o backend já está tratando isso, então, você pode acessar pela url um cadastro inativo e tentar fazer a alteração. Você terá uma resposta como essa:
Para fazer o teste, você pode acessar a url http://localhost:4200/customers/edit/0748093840433 ou usar um id de um cadastro inativo que você tenha aí com você durante o desenvolvimento.
Mas calma aí, se o cadastro está ativo, por que está retornando um erro? ?
Na verdade, o cadastro está inativo, mas o componente thf-switch só sabe lidar com valores booleanos (até a versão que estamos usando nesse exemplo, a 3.1.0). Então, vamos ter que tratar esse dado assim como já fizemos em outros lugares:
Com isso, agora o formulário apresenta o valor correto na tela:
Passo 6 — Atualizando a navegação da nossa página de visualização
Show de bola! Nossa edição está pronta! Mas para finalizar, vamos melhorar nosso fluxo de navegação. Para isso, vamos voltar a página de visualização e incluir uma opção para editar o nosso cliente diretamente dessa página.
Abra o arquivo customer-view.component.ts e inclua a função edit:
Para a thf-page-detail, basta apenas informar a função edit que o componente já sabe o que fazer.
Navegação completa com sucesso!!!
E agora, José?
Essa foi a penúltima etapa do nosso CRUD. No próximo post, vamos ver como excluir um cadastro.
Vimos aqui que é possível reutilizar páginas inteiras. Ao deixá-las mais flexíveis, você pode atender melhor as necessidades do seu usuário final e reaproveitar muito código.
Estamos na reta final. Nos vemos no próximo artigo!
Você pode encontrar os fontes do projeto no meu GitHub.
Referências e dicas de leitura
Documentação oficial do Angular:
- Style guide sobre o uso de constantes
- Método put do HttpClient
- Sobre o uso de Guardas nas rotas
Alguns outros links interessantes sobre algumas técnicas aplicadas sutilmente no post ?
E se for um grande estudioso e quer saber da onde veio o conceito do REST:
Artigo original publicado no TOTVS Developers e republicado com autorização do autor, NOME DO Autor: Jhosef Marks – LINK DO ARTIGO ORIGINAL.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?