Angular 2 - Cadastro de Clientes - XVIII


 Neste artigo vou mostrar como criar um cadastro de clientes e fazer o CRUD usando o Angular 2 e o Visual Studio Code.

Neste artigo vamos implementar a alteração dos dados de um cliente em nossa aplicação. (link do artigo anterior)

A alteração de um cliente é feita quando o usuário clica em um cliente da lista para exibir os detalhes do cliente. A seguir basta ele digitar os dados que deseja alterar e clicar no botão Salvar.

Para alterar um cliente vamos criar um novo método chamado update() no arquivo cliente.service.ts no VS Code.

Abra o arquivo cliente.service.ts e inclua o código destacado em azul:

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Cliente } from './cliente.model';
import { CLIENTES } from './clientes-mock';
@Injectable()
export class ClienteService{
   // app é a pasta de onde fizermos a chamada
   // clientes é o nome da variável na classe InMemoryDataService
   private clientesUrl : string = 'app/clientes';
   private headers: Headers = new Headers ({'Content-Type' : 'application/json'})
    constructor(
       private http: Http
    ) {}
    getClientes() : Promise<Cliente[]> {
       return this.http.get(this.clientesUrl) 
         .toPromise()
         .then(response => response.json().data as Cliente[])
         .catch(this.trataErro);
      }
    private trataErro(err : any) : Promise<any> {
        return Promise.reject(err.message || err );
      }
    getCliente(id:number): Promise<Cliente> {
           return this.getClientes()
           .then((clientes: Cliente[]) => clientes.find(cliente => cliente.id === id)); 
          }
    create(cliente: Cliente): Promise<Cliente> {
        return this.http.post(this.clientesUrl, JSON.stringify(cliente), {headers:this.headers})
        .toPromise()
        .then((response : Response) => {
            console.log(response.json().data);
            return response.json().data as Cliente;  
        })
        .catch(this.trataErro);
    }
      update(cliente: Cliente): Promise<Cliente> {
        const url = `${this.clientesUrl}/${cliente.id}`; //app/cliente/:id
        return this.http
        .put(url, JSON.stringify(cliente), {headers:this.headers})
        .toPromise()
        .then(() => cliente as Cliente)  
        .catch(this.trataErro);
    }
}

Vamos entender o código criado:

O método update é muito parecido com o método create apenas usa o método PUT ao invés de POST:

update(cliente: Cliente): Promise<Cliente> {
        const url = `${this.clientesUrl}/${
cliente.id}`; //app/cliente/:id
        return this.http
        .
put(url, JSON.stringify(cliente), {headers:this.headers})
        .toPromise()
        .then(() => cliente as Cliente) 
        .catch(this.trataErro);
    }

Neste método temos :

- O método update recebe um cliente como parâmetro e retorna uma Promise de Cliente (Promise<Cliente>)
- definimos a constante url onde definimos a url para alterar o cliente contendo o id do cliente selecionado para alteração:
- definimos o método put para alterar um cliente : (return this.http.put())
- definimos a url para onde vamos enviar o post : clientesUrl ;
- definimos os dados do cliente que vamos adicionar :  JSON.stringfy(cliente);
- definimos o cabeçalho da requisição: { headers : this.headers } ;
- Convertemos para um Promise pois o post returna um Observable : .toPromise
- Recebemos a resposta definindo .then onde usamos a classe response para retornar os dados :
cliente as Cliente;
- Usamos o nosso tratamento de erro definido na aula anterior para capturar erros: .catch(this.trataErro)

Agora vamos abrir o arquivo cliente.detalhe.component.ts, que contém o método onSubmit() que será chamado quando o usuário clicar no botão Salvar do formulário, e, vamos definir o código (destacado em azul) conforme mostrado a seguir:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params} from '@angular/router';
import { Location } from '@angular/common';
import { Cliente } from './cliente.model';
import { ClienteService } from './cliente.service';
@Component({
    moduleId: module.id,
    selector : 'cliente-detalhe',
    templateUrl : 'cliente-detalhe.component.html'   
})
export class ClienteDetalheComponent implements OnInit  {
      cliente : Cliente;
      private isNovo : boolean= true;
      constructor(
         private clienteService : ClienteService,
         private route : ActivatedRoute,
         private location : Location
      ) {}
       ngOnInit(): void {
           this.cliente = new Cliente(0,'','','',);
           this.route.params.forEach((params: Params)=>{
               let id: number = +params['id'];
          if(id){
           this.isNovo = false;
           this.clienteService.getCliente(id)
               .then((cliente: Cliente)=> {
                    console.log(cliente);
                    this.cliente = cliente;
               });
          }
        });
    }
    getFormGroupClass(isValid : boolean, isPristine: boolean) : {} {
        return {
            'form-group' : true,
            'has-danger': !isValid && !isPristine,
            'has-success': isValid && !isPristine
        };
    }
    getFormControlClass(isValid : boolean, isPristine: boolean) : {} {
        return {
            'form-control' : true,
            'has-danger': !isValid && !isPristine,
            'has-success': isValid && !isPristine
        };
    }
    onSubmit() : void {
        let promise;
        if (this.isNovo) {
            console.log('cadastrar');
            promise = this.clienteService.create(this.cliente);
        } else {
            console.log('alterar');
            promise = this.clienteService.update(this.cliente);
        }
        promise.then(cliente=> this.location.back());
    }
}

No método onSubmit() fizemos o seguinte:

- Se for não for um novo cliente então incluimos a chamada do método update que acabamos de criar:

    promise = this.clienteService.update(this.cliente);

- Tanto para cadastrar como para alterar será retornado um cliente mas o que vamos fazer é usar o location.back para retornar no histórico de navegação, o que vai fazer com que voltemos para a lista de clientes. (Location é um serviço que a aplicação usa para interagir com o navegador. No exemplo usamos o método back para voltar no histório de navegação)

 promise.then(cliente=> this.location.back());

Pronto ! Vamos testar:

1- Clique em um cliente para selecioná-lo para alteração e faça uma alteração :

2- Clique no botão Salvar para submeter os dados enviado uma requisição PUT e chamando o método update:

Seremos direcionados para a lista de clientes onde vemos os dados do cliente alterados e no console vemos a mensagem conforme esperado.

Nota: Você pode descomentar a linha para exibir os dados no console.

Lembre-se que estamos usando um API simulada e se você dar um refresh na página os dados serão perdidos pois estão apenas na memória.

Na próxima parte do artigo vamos deletar os dados de um cliente.

(Disse Jesus) "Se vós estiverdes em mim, e as minhas palavras estiverem em vós, pedireis tudo o que quiserdes, e vos será feito. "
João 15:7

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:


José Carlos Macoratti