Criando um CRUD com THF (4/7) - Criando um novo cliente
Olá mundo!
Objetivo
Criar um formulário para cadastrar novos clientes em nossa aplicação de exemplo, brincar com mais alguns componentes de entrada de dados e conhecer melhor o thf-page-edit.
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
Não deixe de ler os posts anteriores para ter uma compreensão mais completa do projeto.
Para continuar do ponto anterior, basta clonar o projeto com o que já foi implementado.
git clone --branch post-3 https://github.com/jhosefmarks/sample-thf-crud-customers.git <sua-pasta-de-trabalho>Passo 1 — Iniciando nossa página de cadastro
Vamos iniciar criando o componente da nossa nova página.
Estamos usando o sufixo “-form”, pois podemos usar o mesmo componente para criar e atualizar os dados do cliente.
ng g c customers/customer-formUma nova pasta será criada, a src/app/customers/customer-form, e dentro dela, os seguintes arquivos também devem ter sido criados após o comando:
- customer-form.component.css
- customer-form.component.html
- customer-form.component.spec.ts
- customer-form.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 criação de um novo cliente:
Bom, se você está acompanhando nossa série e lembra que já fizemos algo parecido na segundo post, isso ainda não é suficiente para gente ver algum resultado visual, portanto, abra o arquivo customer-form.component.html e insira o componente thf-page-edit.
Agora sim! Com isso, já podemos acessar nossa nova página através da url http://localhost:4200/customers/new.
Passo 2 — Inserindo o formulário e os primeiros inputs em nossa página
Vamos iniciar apenas com um campo em nosso formulário para entender alguns conceitos e testar algumas propriedades do thf-page-edit antes de nos aprofundarmos na parte visual da nossa página.
Abra o arquivo customer-form.component.ts e adicione a propriedade customer. Ela será responsável por armazenar os dados do nosso futuro cliente.
Nós poderíamos criar uma propriedade para cada campo (name, email, genre, city, etc…), mas é mais prático ter um único objeto para manipular conforme nossa necessidade.
Além disso, também vamos criar um método chamado save.
Só com isso nossa página já começa a ganhar super poderes. Olha o botão de salvar aparecendo em nossa página:
Agora, vamos adicionar nosso primeiro campo de entrada na página. Abra o arquivo customer-form.component.html e insira um thf-input:
Dica: caso queira visualizar se o que está sendo preenchido no campo está realmente dentro da nossa propriedade, você pode incluir no seu html à propriedade usando uma expression com o pipe json.
Com isso, nossa página já tem a ação de salvar e nosso primeiro campo configurados.
Agora, já podemos completar nossa função save para pegar o que foi digitado pelo usuário e enviar para o nosso back end.
Se você apertou o botão de salvar depois de preencher o campo que colocamos em nossa página, vai perceber que nada aconteceu. Isso porque o método post não será disparado se ninguém estiver inscrito nele.
Confira os links de referências para entender melhor sobre o assunto.
Então, para deixar nosso método mais bacana, vamos nos inscrever no método post e quando tivermos a resposta, nós vamos exibir uma mensagem de sucesso e redirecionar nossa aplicação para nossa página de listagem.
Abra o projeto e clique em Salvar:
Não, o servidor não está maluco; se você clicar em "Detalhes" na notificação, você vai ver por que o servidor recusou a requisição.
Como você pode ver, a propriedade name é obrigatória, assim como email e status. Podemos resolver isso adicionando mais dois campos na tela; mas mesmo assim o usuário ainda vai poder clicar em "Salvar", enviando um objeto inválido para o servidor.
Vamos desabilitar o botão de salvar quando o nosso formulário for inválido. Para isso, adicionaremos uma tag form em nossa página e deixaremos nosso thf-input como obrigatório através da propriedade t-required.
Já conseguimos melhorar a usabilidade do nosso formulário evitando o envio de requisições desnecessárias com formulário inválido usando a propriedade t-disable-submit do thf-page-edit.
A ação de "Salvar" só fica habilitada agora quando o formulário é válido, mas pelo retorno do nosso servidor ainda faltou dois dados: email e status. Vamos incluir mais dois thf-inputs, um para cada propriedade.
Como resultado, já podemos fazer a inclusão de um novo cliente.
Passo 3 — Melhorando a usabilidade do nosso formulário
Apesar de parecer pronto, nosso formulário ainda pode enviar dados inválidos para nosso servidor e precisamos minimizar isso o máximo possível. Por exemplo se você colocar um valor no campo de e-mail que não é um e-mail válido, o servidor vai retornar um erro.
Em nosso teste, a única validação usada para e-mail é se o valor contém um caracter @, como o foco em nosso exemplo é o THF, não foi tratado outras situações no back end.
Existem várias formas de validar o e-mail antes de enviar para o servidor. Poderíamos avaliar o e-mail no método save, criar um método que fosse chamado conforme atualizamos o thf-input, mas como queremos usar e aproveitar o que o THF tem de melhor, nós vamos usar o componente thf-email no lugar do thf-input.
Testando o novo tipo de campo:
Agora, outra regra que precisamos atender é do campo status, que só aceita dois valores (Active e Inactive). Com isso, para esse campo o contexto é semelhante a ligado/desligado. Nós vamos usar o thf-switch, configurando as propriedades t-label-off e t-label-on.
Mas nós ainda teremos um problema aqui, pois hoje o thf-switch só lida com dois valores, true e false, e precisamos dos valores Active e Inactive. Para acertar isso, vamos refatorar nossa função save para fazer a configuração do valor correto.
Note que nesse exemplo estamos apenas transformando um valor, mas poderíamos aproveitar para fazer qualquer validação em nossa página antes de enviar os dados para o servidor e até mesmo cancelar o envio desses dados se alguma regra fosse quebrada.
Agora nosso cadastro está funcional e com uma boa usabilidade,facilitando a vida do usuário e evitando que o mesmo faça requisições desnecessárias.
Passo 4 — Completando nosso formulários com mais campos
Vamos alterar as classes de Grid System do THF para deixar o formulário melhor e vamos incluir um novo thf-input para a propriedade nickname.
Vamos adicionar um campo para o birthdate usando o thf-datepicker:
Agora, vamos adicionar um campo para a propriedade genre. Como temos uma lista de valores definidos, nós iremos usar o thf-select dessa vez.
Primeiro, vamos adicionar a lista de valores válidos:
E agora, vamos adicionar o componente na página:
Como resultado, temos umas lista com as opções disponíveis:
E para o primeiro grupo de dados no nosso formulário, vamos finalizar com mais um thf-input para a propriedade nationality.
Um componente simples, mas visualmente bacana e que serve para agrupar campos de entrada é o thf-divider e é o que vamos usar agora.
Agora, podemos acrescentar mais alguns grupos de informações em nosso formulário.
Primeiro, o grupo de filiação:
E vamos finalizar com o grupo destinado ao endereço:
Com isso, nós finalizamos o nosso humilde formulário. Sim, poderíamos adotar outras estratégias aqui, colocar um thf-lookup ali… Mas a ideia agora é focar no básico e entender a estrutura de um CRUD.
Teremos outras oportunidades para explorar componentes mais complexos.
Passo 5 — Melhorando a navegação e ligando tudo
Agora, vamos só melhorar a navegação entre o nosso formulário de cadastro e nossa listagem de clientes, assim o usuário não precisa ficar trocando de página pela URL.
Vamos adicionar uma função em nossa página para voltar para a listagem:
O que? Só isso para incluir a ação de voltar para a página de listagem? Sim; viu como THF te ajuda naquilo que é repetitivo.
Fizemos um pequeno refactory no método ngOnDestroy para evitar erros quando o formulário não sofre nenhuma submissão.
Com isso, já podemos ir do formulário para a página de listagem sem usar o menu ou a URL.
E agora, vamos à nossa página de listagem e vamos incluir uma ação para cadastrar um novo cliente. Para isso, vamos editar os arquivos customer-list.component.ts e customer-list.component.html.
Ufa! Chegamos ao fim de mais um tutorial. Vejo vocês novamente em breve.
E agora, José?
Com isso, já da pra fazer muita coisa. Já vimos como montar um formulário. Agora, você já pode explorar outros componentes para criar layouts mais complexos, assim como outros controles de entrada de dados.
Ainda temos mais algumas coisas a serem feitas para finalizar nosso CRUD e é nisso que vamos continuar focando até o final dessa série.
Você pode encontrar os fontes do projeto no github.
Referências e dicas de leitura
Documentação oficial do THF:
Documentação oficial do Angular:
- Método post do HttpClient
Outras referências:
