Criando um CRUD com THF (5/7) - Visualizando dados de um cliente
Olá mundo!
Objetivo
Criar uma página para visualização das informações dos clientes já cadastrados; com isso, vamos conhecer o componente thf-page-detail e alguns componentes para exibição de dados.
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 cliente 📝
Pré-requisitos
Não deixe de ler os posts anteriores para ter uma compreensão mais completa do projeto e acompanhar a evolução passo-a-passo.
Para continuar do ponto anterior, basta clonar o projeto com o que já foi implementado.
git clone --branch post-4 https://github.com/jhosefmarks/sample-thf-crud-customers.git <sua-pasta-de-trabalho>Passo 1 — Iniciando nossa página de visualização
Vamos iniciar criando o componente da nossa nova página.
ng g c customers/customer-viewUma nova pasta será criada: a src/app/customers/customer-view. Dentro dela, os seguintes arquivos também devem ter sido criados após o comando:
- customer-view.component.css
- customer-view.component.html
- customer-view.component.spec.ts
- customer-view.component.ts
Além da nova pasta e dos novos arquivos, o arquivo src/app/customers/customers.module.ts também foi atualizado, adicionando o novo componente dentro do módulo:
Configurando uma nova rota
Abra o arquivo customers-routing.module.ts e inclua a rota para visualização dos dados do nosso cliente:
Observe que nessa nova rota, estamos usando um parâmetro chamado "id". Já que vamos visualizar os dados de um cliente já cadastrado precisamos dessa informação para buscar no backend os dados necessários para nossa página.
Já fizemos algo parecido no segundo e terceiro post, então, você já dev saber que isso ainda não é suficiente para gente ver algum resultado visual. Portanto, abra o arquivo customer-view.component.html e insira o componente thf-page-detail:
Com isso, já podemos acessar nossa nova página através da url http://localhost:4200/customers/view/0148093543698.
Esse id 0148093543698 está em nossa base de teste, mas pode ser outro id de acordo com seu exemplo.
Passo 2— Abrindo a página de detalhes a partir da página de listagem
Vai ficar muito complicado se a gente ficar testando nossa página sem ter um id real em nossa base de teste, isso pode limitar nossos testes, então, vamos voltar na nossa página de listagem e, a partir de lá, vamos abrir nossa página de visualização. Assim, não vamos precisar nos preocupar em informar um id válido na url - inclusive, vamos poder visualizar um cliente cadastrado em nossos testes durante o desenvolvimento.
Vamos acessar o arquivo customer-list.component.ts, incluir uma lista de ações para nossa tabela e criar uma função para navegar para nossa página de detalhes, passando o id do cliente em nossa url.
Agora, vamos associar a propriedade tableActions na nossa tabela:
Com isso, teremos o seguinte resultado:
Passo 3 — Buscando os dados do backend para serem exibidos
Com a navegação pronta e a garantia de que o id passado vai nos retornar dados "reais" para exibição, vamos pegar o id da url (rota) e vamos fazer a chamada para o backend buscando os dados que deverão ser exibidos.
Vamos voltar para o nosso arquivo customer-view.component.ts e fazer as alterações necessárias.
O arquivo todo foi reescrito nessa etapa. #ficadica
Aqui, nós apenas configuramos a chamada da API baseado no id passado na url. Notem que não fazemos nenhuma verificação se existe ou não o id, já que o mesmo é obrigatório em nossa rota para chegar na página de visualização.
Já na função loadData disparamos a requisição get do httpClient e apenas fazemos log dos dados que serão exibidos em nosso console. Com isso, já da pra verificar se os dados realmente estão sendo recebidos.
Caso seja passado um id inválido direto para a url, você não precisa se preocupar; o THF vai exibir uma notificação para o usuário informando o problema, ou seja, o THF trabalha por você e para você. 😄
Para que isso funcione corretamente, seu backend precisa devolver um 404 com as mensagens de erros no corpo da requisição.
Passo 4 — Finalmente exibindo os dados
Até que enfim chegamos a parte que realmente importa: vamos mostrar os dados para o usuário.
Vamos criar uma propriedade para salvar os dados do cliente e atribuir o resultado da requisição nessa propriedade.
Vamos incluir alguns componentes do tipo thf-info em nossa página.
Recarregando nossa página, teremos o seguinte resultado:
Bom, já temos algumas informações sendo exibidas, o thf-info exibe os dados verticalmente por padrão, mas podemos usar o Grid System do THF para melhorar a organização dos nossos componentes.
E para a informação referente ao status do cliente, nós podemos usar o thf-tag para dar um pouco mais de destaque.
Com isso, nossa página já começa a ficar mais organizada e bacana; simples, mas bacana 😜
Vamos, agora, incluir as demais informações na tela e deixar nossa página com todas as informações do cliente.
Agora, podemos ver todas as informações na tela:
Mesmo usando o Grid System, as informações parecem estar bagunçadas; apenas jogadas na página. Mas nós podemos melhorar isso usando o thf-divider. Assim como fizemos com a nossa página de cadastro de clientes, podemos usar o componente para criar agrupamentos que melhoram a leitura e visualização das informações.
Passo 5 — Formatando melhor as informações
Se você notou, nós temos algumas informações que não estão sendo bem apresentadas, ou não estão da melhor forma possível. Uma delas é a data de nascimento.
O thf-info permite o uso de pipes para exibição das informações. Vamos usar o DatePipe padrão do Angular para formatar a data no formato brasileiro: dia, mês e ano.
Outros dados como status e gender têm valores padronizados e estão em inglês. Nós poderíamos usar tradução nesta página usando i18n do THF, mas não é o foco de hoje. Vamos ter outros artigos só sobre isso. Agora, vamos fazer apenas um map nos dados retornados pelo nosso backend, transformando os valores para serem exibidos de forma mais elegante.
Com isso, teremos os dados exibidos de forma mais significativa para o usuário.
Podemos melhorar um pouco mais nossa página configurando melhor o thf-tag, que possui alguns tipos pré-definidos que podem ajudar na visualização da informação, dando mais destaque para a mesma.
Passo 6 — Incluindo ações na página de visualização
Como no componente thf-page-edit, o thf-page-detail tem algumas ações padrões, por enquanto, vamos adicionar apenas a função de voltar em nossa página. Para isso, basta criar uma função chamada back e nela vamos fazer a navegação para nossa tela de listagem.
Com isso, temos nosso fluxo de navegação completo entre as páginas de listagem e visualização dos dados do cliente:
Com isso, concluímos nossa página de visualização (por enquanto, pois voltaremos nela em outro post).
E agora, José?
Com mais essa etapa completa, já temos quase nosso CRUD pronto. Mas ainda dá pra fazer muita coisa. Agora, você já pode fazer páginas para exibir as informações cadastradas nos seus formulários e explorar outros componentes para criar layouts mais complexos.
Falta pouco agora para finalizar nosso CRUD. 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 THF:
Documentação oficial do Angular:
learnrxjs.io:
