Criando um CRUD com THF (2/7) - Listando nossos clientes
Olá mundo!
Objetivo
Criar uma tela com a lista dos clientes cadastrados em nosso backend.
Lista de posts da série “Criando um CRUD com THF”
- 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 ✅
Essa lista pode sofrer alterações até o final da série. 😅
Pré-requisitos
Ler o post anterior e seguir o passo a passo seria ótimo, mas se não tiver a fim, basta clonar o projeto de onde paramos no post anterior e continuar a partir do que já foi implementado.
git clone --branch post-1 https://github.com/jhosefmarks/sample-thf-crud-customers.git <sua-pasta-de-trabalho>Passo 1 — Criando e configurando o módulo customers
Vamos criar um módulo para nossas telas, execute o comando:
ng g m customers --routingSerá criada a pasta src/app/customers com esses 2 arquivos:
- customers.module.ts
- customers-routing.module.ts
Agora, vamos criar o componente da nossa página de listagem.
ng g c customers/customer-listUma nova pasta será criada, a src/app/customers/customer-list, e dentro dela os seguintes arquivos também devem ter sido criados após o comando:
- customer-list.component.css
- customer-list.component.html
- customer-list.component.spec.ts
- customer-list.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:
Finalizando a configuração do módulo customers
Abra o arquivo customers.module.ts e inclua o módulo SharedModule. Com isso, nós teremos acesso aos componentes do THF, já que o SharedModule já faz a importação para todo o projeto.
Configurando as rotas
Vamos incluir uma rota no módulo principal usando lazy loading; faça isso no arquivo app-routing.module.ts.
Agora, vamos configurar a rota padrão do módulo customers, abra o arquivo customers-routing.module.ts e inclua a rota padrão:
Até agora, só configuramos a rota, mas com isso já é possível acessar o link http://localhost:4200/customers e ver o resultado.
Incluindo um item no menu da aplicação
Pois é, faltou ainda incluir um item no menu para facilitar o acesso e iniciar a configuração da nossa página. Vamos iniciar pelo item do menu; para isso, vá até o arquivo app.component.ts e inclua o item de menu para a nossa página que irá listar os clientes:
Passo 2 — Iniciando nossa página de listagem
Bom, agora que já temos o módulo pronto e as rotas configuradas, está na hora de focar na nossa página.
Antes de iniciar, é importante saber que o THF tem alguns componentes que facilitam a criação de páginas, desde o mais básico até o mais complexo e dinâmico. O componente que vamos usar nesse exemplo é o thf-page-list; outros componentes desse tipo serão abordados conforme nosso exemplo for evoluindo e em futuros posts dessa série.
Abra o arquivo customer-list.component.html e adicione o componente thf-page-list. Já vamos aproveitar o momento e configurar o título da nossa página para "Listagem de clientes".
Com isso, já teremos o seguinte resultado:
Passo 3 — Exibindo os dados dos clientes
Para essa série, já deixei um serviço com os dados que usaremos em nosso exemplo: https://sample-customers-api.herokuapp.com/api/thf-samples/v1/people
Primeiro, vamos criar a lógica que faz a requisição para o servidor que pega a lista de clientes que vamos exibir em nossa página. Para isso, abra o arquivo customer-list.component.ts.
Entendendo a lógica, no ngOnInit, nós apenas fazemos a requisição e armazenamos na propriedade customers a lista de clientes.
O servidor devolve um objeto com a lista de clientes (items) e uma propriedade que informa se existem mais dados (hasNext).
Agora, no arquivo customer-list.component.html, vamos incluir uma tabela (thf-table) e exibir os dados do nosso servidor:
Com isso, já teremos nossa lista de clientes sendo exibida na nossa página:
É possível perceber que o thf-table já cuidou da renderização dos dados de forma automática, se os dados que você quer exibir já vierem formatados e com o nome das propriedades configuradas não é necessário fazer mais nada.
E com isso, você já tem uma tela de listagem básica com o THF.
Passo 4 — Melhorando a apresentação dos dados
Mas é lógico que vamos melhorar o visual da nossa tabela. Para isso, nós vamos configurar a aparência de cada coluna que queremos exibir.
Vamos criar uma propriedade chamada columns, que é do tipo Array<ThfTableColumn>, ou seja uma lista de definições para as colunas que queremos exibir. Abra o arquivo customer-list.component.ts:
E no arquivo customer-list.component.html vamos passar essa propriedade para a nossa tabela.
Configurando as colunas
O nosso backend está devolvendo as seguintes propriedades:
- id: é o identificador do nosso registro e não temos interesse de exibir essa informação para o usuário, então podemos deixar de fora da configuração;
- name e nickname: não tem muito segredo; são apenas textos simples. Basta adicionar na lista de colunas;
- email: para a coluna de e-mail, nós iremos configurá-lo como um link e vamos passar uma função de envio de e-mail;
- birthdate: data de nascimento do nosso cliente. Vamos configurar o tipo da coluna, o formato que queremos exibir e um tamanho fixo, já que data sempre terá o mesmo tamanho;
- genre: para o gênero, só iremos usar o tipo de coluna subtitle;
- city: assim como o name e o nickname, é apenas texto simples;
- status: para essa coluna, vamos usar o tipo label, que dá um aspecto bem mais bacana para a coluna.
Continuando as configuração das colunas, faltou apenas definir o label das colunas.
Com isso, nossas colunas ficaram com esse aspecto:
Adicionando ordenação as colunas
Para adicionar ordenação a tabela, basta apenas incluir a propriedade t-sort.
Passo 5 — Adicionando paginação e loading
Para que o usuário tenha uma experiência melhor durante a carga dos dados é possível usar a propriedade t-loading. Vamos mudar a tabela para iniciar com o status de carregando ativado e vamos desativar esse status apenas quando os dados forem carregados.
Crie a propriedade loading, inicializando com true e, ao final da carga dos dados, atribua false.
Não podemos esquecer de adicionar a propriedade t-loading no thf-table.
Lembra do hasNext que o nosso servidor retorna? Vamos usá-lo para trabalhar com a funcionalidade de paginação.
Primeiro, vamos criar uma propriedade chamada hasNext, do tipo boolean e a função loadData para carregar os dados. O conteúdo dela é semelhante ao que está dentro da função ngOnInit e fazer com que o ngOnInit passe a usar essa função, dessa forma, vamos reaproveitar código.
E no thf-table, passe a chamar a função loadData no evento t-show-more e associe a propriedade t-show-more-disabled com a propriedade hasNext.
Com isso, nós habilitamos a função de carregar mais resultados da tabela.
Se você apertar o botão que aparece abaixo da tabela, você não vai ver nenhum resultado surpreendente. Isso porque nós continuamos fazendo a mesma requisição para o servidor.
Nós precisamos incluir na url qual a página que queremos carregar.
Para isso, vamos atualizar no método que faz a carga dos dados.
Com a função loadData ajustada, agora temos a funcionalidade de paginação funcionando do jeito que deveria.
E agora José?
Já vimos como fazer a listagem dos nossos clientes. No próximo post, vamos incluir a função de pesquisa e aprender a usar mais alguns componentes do THF.
Como a ideia é ser o mais didático possível aqui, o código que faz a requisição foi mantido junto com o componente. Ao invés de ser separado em um serviço, vamos passar por um refactory no futuro que vai alterar isso.
Você pode pegar os fontes atualizados no repositório do github - fiz o possível para commitar passo a passo, para que seja possível acompanhar a evolução do que fizemos até aqui.
