Curso Fullstack Angular e Spring - Algaworks.txt

Curso Fullstack Angular e Spring (Angular, REST e Spring Boot) - Algaworks
--------------------------------------------------------------------------


Aula 03.01. Criando o projeto da API
------------------------------------

. Crie um projeto spring boot com as seguintes configurações:

    Name : Algamoney-api
    Group : com.algaworks.algamoney-api
    Artefact : algamoney-api
    Package : com.example.algamoney-api

. Nas dependências, adicione as seguintes bibliotecas:

    Devtools
    JPA
    Web
    MySQL / h2 / PostGres


Aula 03.02. Conectando ao MySQL
-------------------------------

. Acesse o arquivo application.properties e insira o código abaixo dependendo do banco que for ser utilizado:

    # ===============================
    # = data.sql file will be executed?
    # ===============================
    spring.datasource.initialization-mode=always

    # Far� somente os update das diferen�as entre as classes model com o BD
    spring.jpa.hibernate.ddl-auto=update

    spring.jpa.show-sql=true

    # Conectando com o MySQL
    ########################
    spring.jpa.database=MYSQL
    spring.datasource.url=jdbc:mysql://localhost/algamoneyapi?createDatabaseIfNotExist=true&useSSL=false
    spring.database.username=root
    spring.database.password=root


    # Connection com o POSTGRES
    ###########################
    #spring.datasource.platform=postgres
    #spring.datasource.url=jdbc:postgresql://localhost:5432/desenv
    #spring.datasource.username=supervisor
    #spring.datasource.password=brasil2




    # Conexão com o H2
    ##################
    spring.datasource.driverClassName=org.h2.Driver
    spring.datasource.username=sa
    spring.datasource.password=
    spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

    #Enabled H2 COnsole
    spring.h2.console.enabled=true

    # Custom H2 Console URL
    spring.h2.console.path=/h2
    # temporary data storage
    spring.datasource.url = jdbc:h2:mem:testdb;DB_CLOSE_ON_EXIT=FALSE

. Execute a aplicação para ver se ela levanta.

. Acesse o link http://localhost:8080/h2 com user "sa" sem senha e veja se as tabelas foram criadas com sucesso


Aula 03.03. Criando a estrutura das tabelas
-------------------------------------------

. Dentro da pasta resources crie o arquivo schema.sql com o conteúdo abaixo:

    CREATE TABLE categoria( codigo SERIAL NOT NULL PRIMARY KEY,
                            nome VARCHAR(50) NOT NULL );

. Dentro da pasta resources crie o arquivo data.sql com o conteúdo abaixo:

    INSERT INTO categoria( nome ) VALUES('Lazer');
    INSERT INTO categoria( nome ) VALUES('Alimentação');
    INSERT INTO categoria( nome ) VALUES('Supermercado');
    INSERT INTO categoria( nome ) VALUES('Farmácia');
    INSERT INTO categoria( nome ) VALUES('Cultura');
    INSERT INTO categoria( nome ) VALUES('Outros');

    

Aula 03.04. Consultando primeiro recurso com GET
------------------------------------------------

. Crie a classe model abaixo:

package com.example.algamoneyapi.model;

import java.io.Serializable;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table
public class Categoria implements Serializable {

	private static final long serialVersionUID = 1L;

	@Id
	@GeneratedValue( strategy=GenerationType.IDENTITY)
	private Long codigo;
	
	@Column
	private String nome;

	public Long getCodigo() {
		return codigo;
	}

	public void setCodigo(Long codigo) {
		this.codigo = codigo;
	}

	public String getNome() {
		return nome;
	}

	public void setNome(String nome) {
		this.nome = nome;
	}

	@Override
	public String toString() {
		return "Categoria [codigo=" + codigo + ", nome=" + nome + "]";
	}

	@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result + ((codigo == null) ? 0 : codigo.hashCode());
		return result;
	}

	@Override
	public boolean equals(Object obj) {
		if (this == obj)
			return true;
		if (obj == null)
			return false;
		if (getClass() != obj.getClass())
			return false;
		Categoria other = (Categoria) obj;
		if (codigo == null) {
			if (other.codigo != null)
				return false;
		} else if (!codigo.equals(other.codigo))
			return false;
		return true;
	}

	public Categoria(String nome) {
		super();
		this.nome = nome;
	}

	public Categoria() {
		super();
	}
}


. Crie a interface Repository abaixo:

    package com.example.algamoneyapi.repository;

    import org.springframework.data.jpa.repository.JpaRepository;
    import org.springframework.stereotype.Repository;

    import com.example.algamoneyapi.model.Categoria;

    @Repository("categoriaRepository")
    public interface CategoriaRepository extends JpaRepository<Categoria, Long> {

    }

. Crie a classe Resource abaixo:

    package com.example.algamoneyapi.resource;

    import java.util.List;
    import java.util.Optional;

    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;

    import com.example.algamoneyapi.model.Categoria;
    import com.example.algamoneyapi.repository.CategoriaRepository;

    @RestController
    @RequestMapping("categoria/api")
    public class CategoriaResource {

        @Autowired
        private CategoriaRepository categoriaRepository;
        
        @GetMapping
        public List<Categoria> findAll(){
            
            return categoriaRepository.findAll();
        }
        
        @GetMapping(path= "{codigo}")
        public Optional<Categoria> findById( @PathVariable Long codigo ) {
            
            return categoriaRepository.findById(codigo);
            
            
        }
    }

. Testar os metodos da API:

    . Acesse o Postman;

    . Crie e Teste as URLs abaixo:

        Method : GET
        URL : http://localhost:8080/categoria/api/

        Method : GET
        URL : http://localhost:8080/categoria/api/1

    . Vá em Collection, crie uma coleção de urls e selecione as URLs acima para a Collection criada;
    


Aula 3.6. Cadastrando nova categoria com POST
---------------------------------------------

    . Insira o método abaixo na classe CategoriaResource:

            @PostMapping
            // De forma simples podemos utilizar a annotation abaixo para retornar o código de Status
            // para o Client que retornará 201 Created se tudo der certo. Caso contrário podemos retornar
            // fazer de forma mais detalhada com ResponseEntity, informando detalhes para o Body.Pretty e
            // Headers.Location
            // @ResponseStatus( HttpStatus.CREATED)     
            public ResponseEntity<Categoria> insert(@RequestBody Categoria categoria, 
                                HttpServletResponse response) {
                Categoria categoriaSalva = categoriaRepository.save(categoria);
                
                // Para montar a URL da categoria criada
                //
                // ServletUriComponentsBuilder.fromCurrentRequestUri() -> Retorna a requisição atual
                // .path("/{codigo}").buildAndExpand(categoriaSalva.getCodigo()).toUri() -> Adiciona o código 
                URI uri = ServletUriComponentsBuilder.fromCurrentRequestUri().path("/{codigo}")
                            .buildAndExpand(categoriaSalva.getCodigo()).toUri();


                // Adiciona a URL no header na resposta da requisição
                response.setHeader("Location", uri.toASCIIString());
                
                return ResponseEntity.created(uri).body(categoriaSalva);
            }

    . O @RequestBody, ou corpo da requisição, é onde geralmente enviamos dados que queremos gravar no servidor. 
        Não é muito utilizado em requisições do tipo GET, mas sim nas do tipo POST e PUT. É no corpo da 
        requisição onde você envia dados de um formulário de cadastro em seu site

    . Teste o metodo da API Post:

        . Crie e Teste a URL abaixo:

            Method : POST
            URL : http://localhost:8080/categoria/api/
            Body.raw : { "nome" : "Impostos" }
            Body.JSON

        . Na resposta do method POST, no Postman, verifique o resultado Body.Pretty e Headers.Location


        . adicione o Method POST na Collection de URLs. 



Aula 03.07. Desafio Retornar 404 caso não exista a categoria
------------------------------------------------------------

    . Atualize o metodo findById pelo abaixo:

        @GetMapping(path = "{codigo}")
        public ResponseEntity<?> findById(@PathVariable Long codigo, HttpServletResponse response) {
            try {
                Categoria categoria = categoriaRepository.findById(codigo).orElseThrow( () -> new Exception("Categoria Inexistente")  );

                URI uri = ServletUriComponentsBuilder.fromCurrentRequestUri().path("")
                        .buildAndExpand(categoria.getCodigo()).toUri();

                response.setHeader("Location", uri.toASCIIString());

                return ResponseEntity.ok(categoria);
            } catch (Exception e) {
                return ResponseEntity.badRequest().body(e.getMessage());
            }
        }

    . Atualize o metodo findAll pelo abaixo:

        @GetMapping
        public  ResponseEntity<?> findAll() {

            List<Categoria> categorias = null;

            try {
                categorias = categoriaRepository.findAll();

                return ResponseEntity.ok(categorias);
            } catch (Exception e) {
                return ResponseEntity.badRequest().body(e.getMessage());
            }

        }

    . Observe a tratativa dentro do try...catch. Mudamos o tipo do retorno do metodo para utilizar o retorno com ResponseEntity.
        Aproveitamos para atualizar o header da resposta atraves do objeto response. Na página web, nas infs da header, podemos
        encontrar a URL restful para poder acessar a informação localizada, na "Location".



Aula 03.08. Validando atributos desconhecidos
---------------------------------------------

    . Se quisermos obrigar que toda desserialização dos parâmetros seja obrigatoriamente igual ao que estamos recebendo nos método, 
        utilizaremos a claúsula abaixo no arquivo application.properties. Se isto for usado, sempre que vier um propriedade/parâmetro
        a mais, ou a menos, uma exceção será levantada.

        spring.jackson.deserialization.fail-on-unknown-properties=true

        Exemplo:

            No Client

                { "codigo" : 10,
                    "nome" : "Imposto",
                    "observacao" : "Imposto"
                }

            No Server

                public ResponseEntity<Categoria> insert(@RequestBody Categoria categoria, 
                                                HttpServletResponse response) {
                    ...
                }

                // Uma exceção será levantada por conta da nova informação "observacao"

    . StatusCode

        2xx -> Sucesso
        4xx -> Erro do cliente
        5xx -> Erro no serviço/servidor


Aula 03.09. Tratando erros com ExceptionHandler
-----------------------------------------------

    . Considerando que iremos recusar parâmetros que não se enquadram na estrutura da classe categoria, onde irá levantar exception caso a 
        estrutura do parâmetro não coincida com a estrutura da classe. Trabalharemos com classe de exceção.

    . Crie na pasta src/main/resources o arquivo messages.properties com o conteúdo abaixo:

        mensagem.invalida=Mensagem Invalida


    . Crie a classe abaixo:

        package com.example.algamoneyapi.resource.com.example.algamoneyapi.exceptionhandler;

        import org.springframework.beans.factory.annotation.Autowired;
        import org.springframework.context.MessageSource;
        import org.springframework.context.i18n.LocaleContextHolder;
        import org.springframework.http.HttpHeaders;
        import org.springframework.http.HttpStatus;
        import org.springframework.http.ResponseEntity;
        import org.springframework.http.converter.HttpMessageNotReadableException;
        import org.springframework.web.bind.annotation.ControllerAdvice;
        import org.springframework.web.context.request.WebRequest;
        import org.springframework.web.servlet.NoHandlerFoundException;
        import org.springframework.web.servlet.mvc.method.annotation.ResponseEntityExceptionHandler;

        import java.util.Arrays;
        import java.util.List;
        import java.util.Optional;

        @ControllerAdvice
        public class AlgamoneyExceptionHandler extends ResponseEntityExceptionHandler {

            @Autowired
            private MessageSource messageSource;

            @Override
            protected ResponseEntity<Object> handleHttpMessageNotReadable(HttpMessageNotReadableException ex,
                                                                        HttpHeaders headers, HttpStatus status, WebRequest request) {
                // TODO Auto-generated method stub

                String mensagemUsuario = messageSource.getMessage("mensagem.invalida", null, LocaleContextHolder.getLocale());
                // String mensagemDesenvolvedor = ex.getCause() != null ? ex.getCause().toString() : ex.toString();
                String mensagemDesenvolvedor = Optional.ofNullable(ex.getCause()).orElse(ex).toString();

                List<Erro> erros = Arrays.asList(new Erro(mensagemUsuario, mensagemDesenvolvedor) );

                return handleExceptionInternal(ex, erros, headers, HttpStatus.BAD_REQUEST, request);
            }

            @Override
            protected ResponseEntity<Object> handleNoHandlerFoundException(NoHandlerFoundException ex, HttpHeaders headers,
                                                                        HttpStatus status, WebRequest request) {
                // TODO Auto-generated method stub
                return handleExceptionInternal(ex, "Informação não encontrada!!!", headers, HttpStatus.BAD_REQUEST, request);
            }

            public static class Erro{
                private String mensagemUsuario;
                private String mensagemDesenvolvedor;

                public Erro(String mensagemUsuario, String mensagemDesenvolvedor) {
                    this.mensagemUsuario = mensagemUsuario;
                    this.mensagemDesenvolvedor = mensagemDesenvolvedor;
                }

                public String getMensagemUsuario() {
                    return mensagemUsuario;
                }

                public void setMensagemUsuario(String mensagemUsuario) {
                    this.mensagemUsuario = mensagemUsuario;
                }

                public String getMensagemDesenvolvedor() {
                    return mensagemDesenvolvedor;
                }

                public void setMensagemDesenvolvedor(String mensagemDesenvolvedor) {
                    this.mensagemDesenvolvedor = mensagemDesenvolvedor;
                }
            }

        }


    . Faça o teste no Postman com os parâmetros abaixo:

        Method : POST
        URL : http://localhost:8080/categoria/api/

        // Configure o tipo do parâmetro como JSON
        Body.raw :

            { "codigo" : 10,
                "nome" : "Imposto",
                "observacao" : "Imposto"
            }


Aula 03.10. Validando valores inválidos com Bean Validation
-----------------------------------------------------------

    . Como estamos utilizando o Spring 2.x.x. é necessário colocar no pom.xml a dependência abaixo:

 		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-validation</artifactId>
		</dependency>


    Forma Simples de implementar o Bean Validation:
    -----------------------------------------------

        . Na classe model Categoria adicione as annotation de validação como abaixo:

            @Column
            @NotNull( message="Valor não pode ser nulo")
            @Max(value=50, message="Valor máximo permitido 50 caracteres")
            private String nome;

        . Na classe resource CategoriaResource atualize o metodo POST pelo código abaixo:

            @PostMapping
            public ResponseEntity<?> insert( @Valid @RequestBody Categoria categoria, BindingResult result ) {
                
                if ( result.hasErrors() ) { 
                    Map<String, String> errors = new HashMap<>();
                 
                    for ( FieldError error : result.getFieldErrors()) { 
                        errors.put( error.getField(), error.getDefaultMessage()); 
                    }
                
                    return ResponseEntity.unprocessableEntity().body(errors); 
                }

                try {
                    Categoria categoriaSalva = categoriaRepository.save(categoria);
                } catch (Exception e) {
                    return ResponseEntity.badRequest().body(e.getMessage());
                }
            }

        . Existe uma desvantagem nessa abordagem. Na assinatura do método não temos como utilizar como parâmetro
            o objeto HttpServletResponse response, sem isso não conseguimos montar o cabeçalho de resposta para o 
            cliente.

        . A annotation @Valid força a validação diretamente na assinatura do método.

    Forma mais completa de implementar o Bean Validation com ExceptionHandle:
    -------------------------------------------------------------------------

        . Na classe model Categoria adicione as annotation de validação como abaixo:

            @Column
            @NotNull
            @Size(min=4, max=50, message="Valor deverá ter o tamanho entre 4 e 50 caracteres")
            private String nome;

        . Podemos configurar as mensagens de erro de duas formas. A primeira colocando a mensagem
            como parâmetro da annotation @...(message="mensagem"); a segunda utilizando arquivos de 
            propriedades "properties". Detalhe, elas podem trabalhar em conjunto.

        . Altere o método POST da classe Resource como abaixo:

            @PostMapping
            public ResponseEntity<?> insert( @Valid @RequestBody Categoria categoria, HttpServletResponse response ) {
                try {
                    Categoria categoriaSalva = categoriaRepository.save(categoria);

                    URI uri = ServletUriComponentsBuilder.fromCurrentRequestUri().path("/{codigo}")
                            .buildAndExpand(categoriaSalva.getCodigo()).toUri();

                    response.setHeader("Location", uri.toASCIIString());

                    return ResponseEntity.created(uri).body(categoriaSalva);
                } catch (Exception e) {
                    // TODO Auto-generated catch block
                    return ResponseEntity.badRequest().body(e.getMessage());
                }

            }

        . Só com a implementação acima podemos realizar testes de validação da API. Faça o teste no Postman com os 
            parâmetros abaixo:

            Method : POST
            URL : http://localhost:8080/categoria/api/

            // Configure o tipo do parâmetro como JSON
            Body.raw :

                { 
                    "nome" : null
                }

        . Já dessa forma o StatusCode retorna para a aplicação será 400.

        . Dentro do pacote resources crie o arquivo de propriedades abaixo com o nome message.properties:

            mensagem.invalida=Mensagem inv\u00E1lida

            categoria.nome=Nome        

        . Implemente os métodos e a inner class abaixo na classe ExceptionHandle:

            @ControllerAdvice
            public class AlgamoneyExceptionHandler extends ResponseEntityExceptionHandler {

                // A annotation abaixo injeta a referência do arquivo message.properties
                @Autowired
                private MessageSource messageSource;

                ...
                
                @Override
                protected ResponseEntity<Object> handleMethodArgumentNotValid(MethodArgumentNotValidException ex,
                        HttpHeaders headers, HttpStatus status, WebRequest request) {
                    // TODO Auto-generated method stub
                    List<Erro> erros = criarListaErro(ex.getBindingResult());
                    
                    return handleExceptionInternal(ex, erros, headers, HttpStatus.BAD_REQUEST, request);
                }
                
                
                private List<Erro> criarListaErro( BindingResult bindingResult){
                    
                    List<Erro> erros = new ArrayList<>();
                    
                    for( FieldError fieldError : bindingResult.getFieldErrors() ) {
                        String mensagemUsuario = messageSource.getMessage(fieldError, LocaleContextHolder.getLocale());
                        String mensagemDesenvolvedor =  fieldError.toString();
                        
                        erros.add(new Erro(mensagemUsuario, mensagemDesenvolvedor));
                    }
                    
                    return erros;
                }

                public static class Erro {
                    
                    private String mensagemUsuario;
                    private String mensagemDesenvolvedor;
                    
                    public Erro( String mensagemUsuario, String mensagemDesenvolvedor ) {
                        
                        this.mensagemUsuario = mensagemUsuario;
                        this.mensagemDesenvolvedor = mensagemDesenvolvedor;
                    }

                    public String getMensagemUsuario() {
                        return mensagemUsuario;
                    }

                    public void setMensagemUsuario(String mensagemUsuario) {
                        this.mensagemUsuario = mensagemUsuario;
                    }

                    public String getMensagemDesenvolvedor() {
                        return mensagemDesenvolvedor;
                    }

                    public void setMensagemDesenvolvedor(String mensagemDesenvolvedor) {
                        this.mensagemDesenvolvedor = mensagemDesenvolvedor;
                    }
                    
                }
            }

        . Sempre que houver uma exceção de validação, o método handleMethodArgumentNotValid será executado. 
            Observe no método criarListaErro 

        . Para deixar as mensagens mais amigáveis crie o arquivo ValidationMessages.properties dentro da pasta resource.
            Este arquivo tem que seguir esse padrão de nomenclatura para ser reconhecido automaticamente dentro da classe
            ExceptionHandler.

            javax.validation.constraints.NotNull.message={0} \u00e9 obrigat\u00f3rio(a)
            #javax.validation.constraints.Size.message={0} deve ter o tamanho entre {min} e {max}

        . Para encontrar as chaves desse arquivo basta clicar em cima da annotation de validação (@NotNull, @Size, ...) com
            com Ctrl+Clique do mouse que será apresentado o fonte da annotation e lá dentro apresenta a chave, por exemplo:

            String message() default "{javax.validation.constraints.NotNull.message}";  // Retirado da annotation @NotNull

        . Esse recurso é vantanjoso porque acaba configurando uma mensagem padrão para todas as annotation feita dentro da classe
            Model. 

        . No arquivo ValidationMessages.properties foi configurado a chave e valor 
            "javax.validation.constraints.NotNull.message={0} \u00e9 obrigat\u00f3rio(a)". O conteúdo {0} e o parâmetro que será o 
            nome da propriedade que está levantando a exceção. Por exemplo: se a propriedade nome da categoria levantar exceção a 
            mensagem que aparecerá será "nome é obrigatorio". 

        . Veja que na mensagem produzida a mensagem ficou com nome em letra miniscula. Se quisermos deixar mais amigável ainda coloque o 
            conteúdo abaixo no arquivo messages.properties:

            categoria.nome=Nome

        . Isto fará a mensagem sair "Nome é obrigatorio".

        
Aula 03.12. Usando eventos para adicionar header Location
--------------------------------------------------------

. Criar as classes de evento e de listener abaixo:

    package com.example.algamoneyapi.event;

    import javax.servlet.http.HttpServletResponse;

    import org.springframework.context.ApplicationEvent;

    public class RecursoCriadoEvent<T,K> extends ApplicationEvent {

        /**
        * 
        */
        private static final long serialVersionUID = 1L;

        private HttpServletResponse response;
        private K codigo;
        
        public RecursoCriadoEvent(Object source, HttpServletResponse response, K codigo) {
            super(source);

            this.response = response;
            this.codigo = codigo;
        }

        public HttpServletResponse getResponse() {
            return response;
        }

        public K getCodigo() {
            return codigo;
        }

        
        
    }


    package com.example.algamoneyapi.event.listener;

    import java.net.URI;

    import javax.servlet.http.HttpServletResponse;

    import org.springframework.context.ApplicationListener;
    import org.springframework.stereotype.Component;
    import org.springframework.web.servlet.support.ServletUriComponentsBuilder;

    import com.example.algamoneyapi.event.RecursoCriadoEvent;

    @Component
    public class RecursoCriadoListener implements ApplicationListener<RecursoCriadoEvent>{

        @Override
        public void onApplicationEvent(RecursoCriadoEvent event) {

            HttpServletResponse response = event.getResponse();
            Object codigo = event.getCodigo();
            
            URI uri = ServletUriComponentsBuilder.fromCurrentRequestUri().path("/{codigo}")
                    .buildAndExpand(codigo).toUri();

            response.setHeader("Location", uri.toASCIIString());		
            
        }

    }

. Implemente a propriedade abaixo na classe PessoaResource:

	@Autowired
	private ApplicationEventPublisher publisher;

. Alterar o metodo POST:

    . De

        @PostMapping
        public ResponseEntity<?> insert( @Valid @RequestBody Pessoa pessoa, HttpServletResponse response ) {
            try {
                Pessoa pessoaSalva = pessoaRepository.save(pessoa);

                URI uri = ServletUriComponentsBuilder.fromCurrentRequestUri().path("/{codigo}")
                        .buildAndExpand(pessoaSalva.getCodigo()).toUri();

                response.setHeader("Location", uri.toASCIIString());

                return ResponseEntity.created(uri).body(pessoaSalva);
            } catch (Exception e) {
                // TODO Auto-generated catch block
                return ResponseEntity.badRequest().body(e.getMessage());
            }

        }

    . Para

        @PostMapping
        public ResponseEntity<?> insert( @Valid @RequestBody Pessoa pessoa, HttpServletResponse response ) {
            try {
                Pessoa pessoaSalva = pessoaRepository.save(pessoa);

                publisher.publishEvent( new RecursoCriadoEvent<Pessoa, Long>( this, response, pessoaSalva.getCodigo()));
                
                return ResponseEntity.status(HttpStatus.CREATED).body(pessoaSalva);
            } catch (Exception e) {
                return ResponseEntity.badRequest().body(e.getMessage());
            }
        }


Aula 04.01. Removendo pessoa com DELETE
---------------------------------------

    . Inclua o método abaixo na classe PessoaResource

        @DeleteMapping("{codigo}")
        @ResponseStatus(HttpStatus.NO_CONTENT)
        public void remove( @PathVariable Long codigo) {
            pessoaRepository.deleteById(codigo);
        }

    . Inclua o método abaixo na classe AlgamoneyExceptionHandler:

            @ExceptionHandler(EmptyResultDataAccessException.class)
        //	@ResponseStatus(HttpStatus.NOT_FOUND)
            public ResponseEntity<?> handleEmptyResultDataAccessException(EmptyResultDataAccessException ex, WebRequest request) {
                List<Erro> erros = new ArrayList<>();
                
                String mensagemUsuario = ex.getMessage();
                String mensagemDesenvolvedor =  ex.getMessage().toString();
                
                erros.add(new Erro(mensagemUsuario, mensagemDesenvolvedor));
                
                return handleExceptionInternal(ex, erros, new HttpHeaders(), HttpStatus.NOT_FOUND, request);
            }

    . O método acima não faz parte da implementação padrão da interface ResponseEntityExceptionHandler que a classe AlgamoneyExceptionHandler implementa.
        Sempre que quisermos incluir um método próprio podemos faze-lo através da exceção a ser levantada pela API, neste caso utilizamos a annotation
        @ExceptionHandler informando como parâmetro a classe de exception que deverá ser trabalhada.

    . Se deixarmos o @ResponseStatus( HttpStatus.NOT_FOUND ) não precisaremos colocar mais nenhum código dentro do método. O código dentro do método é 
        somente para enviar uma mensagem ao client.


Aula 4.3. Atualizando pessoa com PUT
------------------------------------

    . Inclua a propriedade abaixo na classe PessoaResource:

        @Autowired
        private CategoriaService categoriaService;

    . Inclua o método abaixo na classe PessoaResource:

        @PutMapping("{codigo}")
        public ResponseEntity<?> update( @PathVariable Long codigo, @Valid @RequestBody Pessoa pessoa  ) {
            Pessoa pessoaSalva = pessoaService.update(codigo, pessoa);
            
            return ResponseEntity.ok(pessoaSalva);
        }

    . Inclua a classe abaixo:

        package com.example.algamoneyapi.service;

        import org.springframework.beans.BeanUtils;
        import org.springframework.beans.factory.annotation.Autowired;
        import org.springframework.dao.EmptyResultDataAccessException;
        import org.springframework.stereotype.Service;

        import com.example.algamoneyapi.model.Pessoa;
        import com.example.algamoneyapi.repository.PessoaRepository;

        @Service
        public class PessoaService {

            @Autowired
            private PessoaRepository pessoaRepository;
            
            public Pessoa update(Long codigo, Pessoa pessoa) {
                
                Pessoa pessoaSalva = findById( codigo );
                
                // Função que copia as infs dos metodos de uma classe para outra. O último parâmetro são os atributos que 
                //  serão desconsiderados para atualização.
                BeanUtils.copyProperties(pessoa, pessoaSalva, "codigo" );
                
                pessoaRepository.save(pessoaSalva);
                
                return pessoaSalva;
                
                
            }
            
            public Pessoa findById( Long codigo ) {
                
                try {
                    Pessoa pessoaSalva = pessoaRepository.findById( codigo ).get();

                    if (pessoaSalva == null) {
                        throw new EmptyResultDataAccessException(1);
                    }
                    
                    return pessoaSalva;
                }catch ( Exception e ) {
                    throw new EmptyResultDataAccessException(1);
                }
            }
            
            
        }

Aula 4.4. Implementando atualização parcial com PUT
---------------------------------------------------

    . Inclua o método abaixo na classe PessoaResource:

        @PutMapping("{codigo}/ativo")
        @ResponseStatus( HttpStatus.NO_CONTENT)
        public void updateAtivo( @PathVariable Long codigo, @RequestBody Boolean ativo ){
            
            pessoaService.updateAtivo(codigo, ativo);
            
        }

        . Foi criado o path "{codigo}/ativo"

    . Inclua o método abaixo na classe PessoaService:

        public void updateAtivo(Long codigo, Boolean ativo) {
            Pessoa pessoaSalva = findById( codigo );
            
            pessoaSalva.setAtivo(ativo);
            
            pessoaRepository.save(pessoaSalva);
        }
        
    . Para executar o teste do método updateAtivo utilize o teste do Postman com o nome de "UPDATE Parcial pessoa"


Aula 5.1. Criando a migração e entidade de lançamento
-----------------------------------------------------

    . Dentro do arquivo schema.sql implemente os comandos abaixo:

        CREATE TABLE pessoa( 	codigo 		SERIAL NOT NULL PRIMARY KEY,
                                nome 		VARCHAR(50) NOT NULL,
                                ativo 		BOOLEAN DEFAULT TRUE,
                                logradouro 	VARCHAR(100) NOT NULL,
                                numero 		VARCHAR(10) NOT NULL,
                                bairro 		VARCHAR(50),
                                complemento VARCHAR(50),
                                cep 		VARCHAR(9) NOT NULL,
                                cidade 		VARCHAR(100) NOT NULL,
                                estado 		VARCHAR(2) NOT NULL );

        CREATE TABLE lancamento (	codigo SERIAL PRIMARY KEY,
                                    descricao VARCHAR(50) NOT NULL,
                                    data_vencimento DATE NOT NULL,
                                    data_pagamento DATE,
                                    valor DECIMAL(10,2) NOT NULL,
                                    observacao VARCHAR(100),
                                    tipo VARCHAR(20) NOT NULL,
                                    codigo_categoria BIGINT(20) NOT NULL,
                                    codigo_pessoa BIGINT(20) NOT NULL,
                                    FOREIGN KEY (codigo_categoria) REFERENCES categoria(codigo),
                                    FOREIGN KEY (codigo_pessoa) REFERENCES pessoa(codigo));
                                    

						
    . Dentro do arquivo data.sql implemente os comandos abaixo:


        INSERT INTO pessoa (nome, logradouro, numero, complemento, bairro, cep, cidade, estado, ativo) 
        values ('João Silva', 'Rua do Abacaxi', '10', null, 'Brasil', '38.400-12', 'Uberlândia', 'MG', true),
                ('Maria Rita', 'Rua do Sabiá', '110', 'Apto 101', 'Colina', '11.400-12', 'Ribeirão Preto', 'S,', true),
                ('Pedro Santos', 'Rua da Bateria', '23', null, 'Morumbi', '54.212-12', 'Goiânia', 'GO', true),
                ('Ricardo Pereira', 'Rua do Motorista', '123', 'Apto 302', 'Aparecida', '38.400-12', 'Salvad,r', 'BA', true),
                ('Josué Mariano', 'Av Rio Branco', '321', null, 'Jardins', '56.400-12', 'Natal', 'RN', true),
                ('Pedro Barbosa', 'Av Brasil', '100', null, 'Tubalina', '77.400-12', 'Porto Alegre', 'RS', true),
                ('Henrique Medeiros', 'Rua do Sapo', '1120', 'Apto 201', 'Centro', '12.400-12', 'Rio de Janeiro', 'R,', true),
                ('Carlos Santana', 'Rua da Manga', '433', null, 'Centro', '31.400-12', 'Belo Horizonte', 'MG', true),
                ('Leonardo Oliveira', 'Rua do Músico', '566', null, 'Segismundo Pereira', '38.400-00', 'Uberlândia', 'MG', true),
                ('Isabela Martins', 'Rua da Terra', '1233', 'Apto 10', 'Vigilato', '99.400-12', 'Manaus', 'AM', true);

        INSERT INTO lancamento (descricao, data_vencimento, data_pagamento, valor, observacao, tipo, codigo_categoria, codigo_pessoa) 
        values ('Salário mensal', '2017-06-10', null, 6500.00, 'Distribuição de lucros', 'RECEITA', 1, 1),
                ('Bahamas', '2017-02-10', '2017-02-10', 100.32, null, 'DESPESA', 2, 2),
                ('Top Club', '2017-06-10', null, 120, null, 'RECEITA', 3, 3),
                ('CEMIG', '2017-02-10', '2017-02-10', 110.44, 'Geração', 'RECEITA', 3, 4),
                ('DMAE', '2017-06-10', null, 200.30, null, 'DESPESA', 3, 5),
                ('Extra', '2017-03-10', '2017-03-10', 1010.32, null, 'RECEITA', 4, 6),
                ('Bahamas', '2017-06-10', null, 500, null, 'RECEITA', 1, 7),
                ('Top Club', '2017-03-10', '2017-03-10', 400.32, null, 'DESPESA', 4, 8),
                ('Despachante', '2017-06-10', null, 123.64, 'Multas', 'DESPESA', 3, 9),
                ('Pneus', '2017-04-10', '2017-04-10', 665.33, null, 'RECEITA', 5, 10),
                ('Café', '2017-06-10', null, 8.32, null, 'DESPESA', 1, 5),
                ('Eletrônicos', '2017-04-10', '2017-04-10', 2100.32, null, 'DESPESA', 5, 4),
                ('Instrumentos', '2017-06-10', null, 1040.32, null, 'DESPESA', 4, 3),
                ('Café', '2017-04-10', '2017-04-10', 4.32, null, 'DESPESA', 4, 2),
                ('Lanche', '2017-06-10', null, 10.20, null, 'DESPESA', 4, 1);

    . Crie a classe Enum abaixo:

        package com.example.algamoneyapi.model;

        public enum TipoLancamento {

            RECEITA,
            DESPESA
            
        }

    . Crie, ou atualize, o arquivo de propriedades messages.properties dentro do pacote src/main/resources

        mensagem.invalida=Mensagem inv\u00E1lida

        categoria.nome=Nome

        recurso.nao-encontrado=Recurso nao encontrado

        recurso.operacao-nao-permitido=Operacao nao permitida    

    . Crie as classes abaixo:    

        package com.example.algamoneyapi.model;

        import java.math.BigDecimal;
        import java.time.LocalDate;

        import javax.persistence.Column;
        import javax.persistence.Entity;
        import javax.persistence.EnumType;
        import javax.persistence.Enumerated;
        import javax.persistence.FetchType;
        import javax.persistence.GeneratedValue;
        import javax.persistence.GenerationType;
        import javax.persistence.Id;
        import javax.persistence.JoinColumn;
        import javax.persistence.ManyToOne;
        import javax.validation.constraints.Future;
        import javax.validation.constraints.Positive;
        import javax.validation.constraints.Size;

        import org.springframework.format.annotation.DateTimeFormat;
        import org.springframework.format.annotation.DateTimeFormat.ISO;

        @Entity
        public class Lancamento {

            @Id
            @GeneratedValue( strategy = GenerationType.IDENTITY)
            private Long codigo;
            
            @Column
            @NotNull
            @Size( min=4, max=50, message="Conteúdo deve ser entre 4 a 50 dígitos")
            private String descricao;
            
            @DateTimeFormat( iso = ISO.DATE)
            @Future(message="Data inválida. Tem que ser uma data futura")
            @NotNull
            @Column( columnDefinition="DATE", nullable=false)
            private LocalDate dataVencimento;
            
            @DateTimeFormat( iso = ISO.DATE)
            @Column( columnDefinition="DATE", nullable=false)
            private LocalDate dataPagamento;
            
            
            @Column( nullable = false, columnDefinition = "DECIMAL(7,2) DEFAULT 0.00")
            @NotNull
            @Positive
            private BigDecimal valor;
            
            
            @Column
            @Size( max=100 )
            private String observacao;
            
            @Column
            @Enumerated( EnumType.STRING )
            private TipoLancamento tipo;
            
            @ManyToOne(fetch=FetchType.EAGER)
            @JoinColumn( name= "codigo_categoria", nullable=false)
            private Categoria categoria;
            
            @ManyToOne(fetch=FetchType.EAGER)
            @JoinColumn( name="codigo_pessoa", nullable=false)
            private Pessoa pessoa;

            public String getDescricao() {
                return descricao;
            }

            public void setDescricao(String descricao) {
                this.descricao = descricao;
            }

            public LocalDate getDataVencimento() {
                return dataVencimento;
            }

            public void setDataVencimento(LocalDate dataVencimento) {
                this.dataVencimento = dataVencimento;
            }

            public LocalDate getDataPagamento() {
                return dataPagamento;
            }

            public void setDataPagamento(LocalDate dataPagamento) {
                this.dataPagamento = dataPagamento;
            }

            public BigDecimal getValor() {
                return valor;
            }

            public void setValor(BigDecimal valor) {
                this.valor = valor;
            }

            public String getObservacao() {
                return observacao;
            }

            public void setObservacao(String observacao) {
                this.observacao = observacao;
            }

            public TipoLancamento getTipo() {
                return tipo;
            }

            public void setTipo(TipoLancamento tipo) {
                this.tipo = tipo;
            }

            public Categoria getCategoria() {
                return categoria;
            }

            public void setCategoria(Categoria categoria) {
                this.categoria = categoria;
            }

            public Pessoa getPessoa() {
                return pessoa;
            }

            public void setPessoa(Pessoa pessoa) {
                this.pessoa = pessoa;
            }

            public Long getCodigo() {
                return codigo;
            }

            public void setCodigo(Long codigo) {
                this.codigo = codigo;
            }

            public Lancamento(@Size(min = 4, max = 50, message = "Conte�do deve ser entre 4 a 50 d�gitos") String descricao,
                    @Future(message = "Data inv�lida") LocalDate dataVencimento, LocalDate dataPagamento,
                    @Positive BigDecimal valor, @Size(max = 100) String observacao, TipoLancamento tipo, Categoria categoria,
                    Pessoa pessoa) {
                super();
                this.descricao = descricao;
                this.dataVencimento = dataVencimento;
                this.dataPagamento = dataPagamento;
                this.valor = valor;
                this.observacao = observacao;
                this.tipo = tipo;
                this.categoria = categoria;
                this.pessoa = pessoa;
            }

            public Lancamento() {
                super();
            }

            @Override
            public int hashCode() {
                final int prime = 31;
                int result = 1;
                result = prime * result + ((codigo == null) ? 0 : codigo.hashCode());
                return result;
            }

            @Override
            public boolean equals(Object obj) {
                if (this == obj)
                    return true;
                if (obj == null)
                    return false;
                if (getClass() != obj.getClass())
                    return false;
                Lancamento other = (Lancamento) obj;
                if (codigo == null) {
                    if (other.codigo != null)
                        return false;
                } else if (!codigo.equals(other.codigo))
                    return false;
                return true;
            }

            @Override
            public String toString() {
                return "Lancamento [codigo=" + codigo + ", descricao=" + descricao + ", dataVencimento=" + dataVencimento
                        + ", dataPagamento=" + dataPagamento + ", valor=" + valor + ", observacao=" + observacao + ", tipo="
                        + tipo + ", categoria=" + categoria + ", pessoa=" + pessoa + "]";
            }
            
            
            
        }





        package com.example.algamoneyapi.repository;

        import org.springframework.data.jpa.repository.JpaRepository;
        import org.springframework.stereotype.Repository;

        import com.example.algamoneyapi.model.Lancamento;

        @Repository
        public interface LancamentoRepository extends JpaRepository<Lancamento, Long>{

        }






    package com.example.algamoneyapi.service;

    import org.springframework.beans.BeanUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.dao.EmptyResultDataAccessException;
    import org.springframework.stereotype.Service;

    import com.example.algamoneyapi.model.Lancamento;
    import com.example.algamoneyapi.repository.LancamentoRepository;

    @Service
    public class LancamentoService {
        @Autowired
        private LancamentoRepository LancamentoRepository;
        
        public Lancamento update(Long codigo, Lancamento Lancamento) {
            
            Lancamento LancamentoSalva = findById( codigo );
            
            BeanUtils.copyProperties(Lancamento, LancamentoSalva, "codigo" );
            
            LancamentoRepository.save(LancamentoSalva);
            
            return LancamentoSalva;
            
            
        }
        
        public Lancamento findById( Long codigo ) {
            
            try {
                Lancamento LancamentoSalva = LancamentoRepository.findById( codigo ).get();

                if (LancamentoSalva == null) {
                    throw new EmptyResultDataAccessException(1);
                }
                
                return LancamentoSalva;
            }catch ( Exception e ) {
                throw new EmptyResultDataAccessException(1);
            }
        }
        
        

    }





    package com.example.algamoneyapi.resource;

    import java.util.List;
    import java.util.Optional;

    import javax.servlet.http.HttpServletResponse;
    import javax.validation.Valid;

    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.context.ApplicationEventPublisher;
    import org.springframework.dao.EmptyResultDataAccessException;
    import org.springframework.http.HttpStatus;
    import org.springframework.http.ResponseEntity;
    import org.springframework.web.bind.annotation.DeleteMapping;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.PutMapping;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseStatus;
    import org.springframework.web.bind.annotation.RestController;

    import com.example.algamoneyapi.event.RecursoCriadoEvent;
    import com.example.algamoneyapi.model.Lancamento;
    import com.example.algamoneyapi.repository.LancamentoRepository;
    import com.example.algamoneyapi.service.LancamentoService;

    @RestController
    @RequestMapping("lancamento/api")
    public class LancamentoResource {

        @Autowired
        LancamentoRepository lancamentoRepository;
        
        @Autowired
        LancamentoService lancamentoService;
        
        @Autowired
        ApplicationEventPublisher publisher;
        
        
        @GetMapping
        public ResponseEntity<?> findAll(HttpServletResponse response){
            
            List<Lancamento> lancamentos = null;
            
            try {
                lancamentos = lancamentoRepository.findAll();
                
                publisher.publishEvent( new RecursoCriadoEvent<Lancamento, Long>( this, response, null));

                return ResponseEntity.ok(lancamentos); 
                
            }catch( Exception e ) {
                return ResponseEntity.badRequest().body(e.getMessage());
            }
            
        }
        

        @GetMapping(path="/{codigo}")
        public ResponseEntity<?> findById( @PathVariable Long codigo, HttpServletResponse response ){
            
            
            Optional<Lancamento> lancamento = lancamentoRepository.findById(codigo);
            
            if (lancamento.isPresent()) {
                throw new EmptyResultDataAccessException(1);
            }
            
            publisher.publishEvent(new RecursoCriadoEvent<Lancamento, Long>(this, response,  null));
            
            return ResponseEntity.ok(lancamento);
        }
        
        
        @PostMapping
        public ResponseEntity<?> insert( @Valid @RequestBody Lancamento lancamento, HttpServletResponse response) {
            
            Lancamento lancamentoSalvo = lancamentoRepository.save(lancamento);

            publisher.publishEvent(new RecursoCriadoEvent<Lancamento, Long>(this, response,  null));
            
            return ResponseEntity.status( HttpStatus.CREATED ).body(lancamentoSalvo);
        }
        
        @PutMapping( path="/{codigo}")
        public ResponseEntity<?> update( @PathVariable Long codigo, @Valid @RequestBody Lancamento lancamento){
            
            Lancamento lancamentoSalvo = lancamentoService.update(codigo, lancamento);
            
            return ResponseEntity.ok(lancamentoSalvo);	
        }
        
        @DeleteMapping( path="/{codigo}")
        @ResponseStatus( HttpStatus.NO_CONTENT)
        public void remove( @PathVariable Long codigo ) {
            lancamentoRepository.deleteById(codigo);
        }
        
    }



Aula 5.4. Validando inconsistências
-----------------------------------

    . Crie no pom.xml a dependencia abaixo:

		<dependency>
			<groupId>org.apache.commons</groupId>
			<artifactId>commons-lang3</artifactId>
			<version>3.11</version>
		</dependency>

    . Acrescente no arquivo messages.properties a linha abaixo:

        recurso.operacao-nao-permitido=Problema de integridade entre as informacoes

    . Crie o método abaixo na classe AlgamoneyExceptionHandler:

        @ExceptionHandler(  {DataIntegrityViolationException.class}  )
        public ResponseEntity<Object> handleDataIntegrityViolationException( DataIntegrityViolationException ex, WebRequest request ){
                String mensagemUsuario = messageSource.getMessage("recurso.operacao-nao-permitido", null, LocaleContextHolder.getLocale());
            // String mensagemDesenvolvedor = ex.getCause() != null ? ex.getCause().toString() : ex.toString();
            // String mensagemDesenvolvedor = Optional.ofNullable(ex.getCause()).orElse(ex).toString();
            String mensagemDesenvolvedor = ExceptionUtils.getRootCauseMessage(ex);

            List<Erro> erros = Arrays.asList(new Erro(mensagemUsuario, mensagemDesenvolvedor) );
            
            
            return handleExceptionInternal(ex, erros, new HttpHeaders(), HttpStatus.BAD_REQUEST, request);
            
        }

    . Observe que a mensagemDesenvolvedor foi alterada, agora ela é construida através da classe ExceptionUtils. Esta classe é encontrada no
        pacote commons-lang3, a responsabilidade deste pacote é detalhar melhor a mensagem de erro da exception.

    . Observe também no trecho de código abaixo. "recurso.operacao-nao-permitido" é substituido pelo conteúdo do arquivo messages.properties

        String mensagemUsuario = messageSource.getMessage("recurso.operacao-nao-permitido", null, LocaleContextHolder.getLocale());


Aula 05.06. Regra para não salvar pessoa inativa
------------------------------------------------

    . Crie a classe service abaixo:

        package com.example.algamoneyapi.service;

        import org.springframework.beans.BeanUtils;
        import org.springframework.beans.factory.annotation.Autowired;
        import org.springframework.dao.EmptyResultDataAccessException;
        import org.springframework.stereotype.Service;

        import com.example.algamoneyapi.model.Lancamento;
        import com.example.algamoneyapi.model.Pessoa;
        import com.example.algamoneyapi.repository.LancamentoRepository;
        import com.example.algamoneyapi.repository.PessoaRepository;
        import com.example.algamoneyapi.service.exception.PessoaInexistenteOuInativaException;

        @Service
        public class LancamentoService {
            @Autowired
            private LancamentoRepository lancamentoRepository;
            
            @Autowired
            private PessoaRepository pessoaRepository; 
            
            
            
            public Lancamento update(Long codigo, Lancamento Lancamento) {
                
                Lancamento LancamentoSalva = findById( codigo );
                
                BeanUtils.copyProperties(Lancamento, LancamentoSalva, "codigo" );
                
                lancamentoRepository.save(LancamentoSalva);
                
                return LancamentoSalva;
                
                
            }
            
            public Lancamento findById( Long codigo ) {
                
                try {
                    Lancamento LancamentoSalva = lancamentoRepository.findById( codigo ).get();

                    if (LancamentoSalva == null) {
                        throw new EmptyResultDataAccessException(1);
                    }
                    
                    return LancamentoSalva;
                }catch ( Exception e ) {
                    throw new EmptyResultDataAccessException(1);
                }
            }
            
            
            public Lancamento save( Lancamento lancamento ) {
                
                Pessoa pessoa = pessoaRepository.findById( lancamento.getPessoa().getCodigo() ).get();
                
                if (pessoa == null || pessoa.isInativo() ) {
                    throw new PessoaInexistenteOuInativaException();
                }
                return lancamentoRepository.save(lancamento);
            }
        }

    . Implemente a Exception abaixo:

        package com.example.algamoneyapi.service.exception;

        public class PessoaInexistenteOuInativaException extends RuntimeException {

            private static final long serialVersionUID = 1L;
        }


    . Implemente o código abaixo na classe Model Pessoa:

        @JsonIgnore
        @Transient
        public Boolean isInativo() {
            return !this.ativo;
        }
        
        . A annotation @JsonIgnore servirá para não criar no resultado JSon a informação do método isInativo
        . A annotation @Transient servirá para não persistir a informação

    . Na classe LancamentoResource inclua a declaração abaixo:

        @Autowired
        LancamentoService lancamentoService;

    . Altere o método abaixo da classe LancamentoResource:

        @PostMapping
        public ResponseEntity<?> insert( @Valid @RequestBody Lancamento lancamento, HttpServletResponse response) {

            // Foi alterado de lancamentoRepository.insert para lancamentoService.save para implementar a regra que restringe a inclusão
            // de lançamento de pessoas inativas
            Lancamento lancamentoSalvo = lancamentoService.save(lancamento);

            publisher.publishEvent(new RecursoCriadoEvent<Lancamento, Long>(this, response,  lancamentoSalvo.getCodigo()));
            
            return ResponseEntity.status( HttpStatus.CREATED ).body(lancamentoSalvo);
        }

    . Implemente o método abaixo na classe LancamentoResource:

        @ExceptionHandler( PessoaInexistenteOuInativaException.class )
        public ResponseEntity<?> handlePessoaInexistenteOuInativaException( PessoaInexistenteOuInativaException ex){
            String mensagemUsuario = messageSource.getMessage("pessoa.inexistente-ou-inativa", null, LocaleContextHolder.getLocale());
            // String mensagemDesenvolvedor = ex.getCause() != null ? ex.getCause().toString() : ex.toString();
            String mensagemDesenvolvedor = Optional.ofNullable(ex.getCause()).orElse(ex).toString();
            
            List<Erro> erros = Arrays.asList(new Erro(mensagemUsuario, mensagemDesenvolvedor) );
            
            
            return ResponseEntity.badRequest().body(erros);
            
        }

        . Este método servirá para pegar a Exception levantada pela classe LancamentoService

    . Implemente a linha abaixo no arquivo messages.properties:

        pessoa.inexistente-ou-inativa=Pessoa inexistente ou inativa

    . Faça a inativação de uma das pessoas:

        http://localhost:8080/pessoa/2/ativo 

        . Coloque o parâmetro como false

    . Faça o teste colocando um lançamento com a pessoa 2 que foi inativado.



Aula 5.7. Implementando pesquisa de lançamento com Metamodel
------------------------------------------------------------

    . Crie o método abaixo na classe LancamentoResource

        @GetMapping(path="/filter")
        public List<Lancamento> findByFilter(LancamentoFilter lancamentoFilter){
            
            List<Lancamento> lancamentos = lancamentoRepository.filtrar( lancamentoFilter );
            
            return lancamentos;
            
        }

    . Crie a classe LancamentoFilter como abaixo:

        package com.example.algamoneyapi.resource.filter;


        import java.time.LocalDate;

        import org.springframework.format.annotation.DateTimeFormat;
        import org.springframework.format.annotation.DateTimeFormat.ISO;

        public class LancamentoFilter {

            private String descricao;
            
            @DateTimeFormat(iso = ISO.DATE)
            private LocalDate dataVencimentoDe;
            
            @DateTimeFormat(iso = ISO.DATE)
            private LocalDate dataVencimentoAte;

            public String getDescricao() {
                return descricao;
            }

            public void setDescricao(String descricao) {
                this.descricao = descricao;
            }

            public LocalDate getDataVencimentoDe() {
                return dataVencimentoDe;
            }

            public void setDataVencimentoDe(LocalDate dataVencimentoDe) {
                this.dataVencimentoDe = dataVencimentoDe;
            }

            public LocalDate getDataVencimentoAte() {
                return dataVencimentoAte;
            }

            public void setDataVencimentoAte(LocalDate dataVencimentoAte) {
                this.dataVencimentoAte = dataVencimentoAte;
            }

        }

    . Crie a interface LancamentoRepositoryQuery como abaixo:

        package com.example.algamoneyapi.repository.lancamento;

        import java.util.List;

        import com.example.algamoneyapi.model.Lancamento;
        import com.example.algamoneyapi.resource.filter.LancamentoFilter;


        public interface LancamentoRepositoryQuery {

            public List<Lancamento> filtrar(LancamentoFilter lancamentoFilter);
            
        }


    . Crie a classe LancamentoRepositoryQueryImpl como abaixo:

        package com.example.algamoneyapi.repository.lancamento;

        import java.util.ArrayList;
        import java.util.List;

        import javax.persistence.EntityManager;
        import javax.persistence.PersistenceContext;
        import javax.persistence.TypedQuery;
        import javax.persistence.criteria.CriteriaBuilder;
        import javax.persistence.criteria.CriteriaQuery;
        import javax.persistence.criteria.Predicate;
        import javax.persistence.criteria.Root;

        import org.springframework.util.StringUtils;

        import com.example.algamoneyapi.model.Lancamento;
        import com.example.algamoneyapi.resource.filter.LancamentoFilter;

        public class LancamentoRepositoryImpl implements LancamentoRepositoryQuery {

            @PersistenceContext
            private EntityManager manager;
            
            @Override
            public List<Lancamento> filtrar(LancamentoFilter lancamentoFilter) {
                CriteriaBuilder builder = manager.getCriteriaBuilder();
                CriteriaQuery<Lancamento> criteria = builder.createQuery(Lancamento.class);
                Root<Lancamento> root = criteria.from(Lancamento.class);
                
                Predicate[] predicates = criarRestricoes(lancamentoFilter, builder, root);
                criteria.where(predicates);
                
                TypedQuery<Lancamento> query = manager.createQuery(criteria);
                return query.getResultList();
            }

            private Predicate[] criarRestricoes(LancamentoFilter lancamentoFilter, CriteriaBuilder builder,
                    Root<Lancamento> root) {
                List<Predicate> predicates = new ArrayList<>();
                
                if (!StringUtils.isEmpty(lancamentoFilter.getDescricao())) {
                    predicates.add(builder.like(
                            builder.lower(root.get("descricao")), "%" + lancamentoFilter.getDescricao().toLowerCase() + "%"));
                }
                
                if (lancamentoFilter.getDataVencimentoDe() != null) {
                    predicates.add(
                            builder.greaterThanOrEqualTo(root.get("dataVencimento"), lancamentoFilter.getDataVencimentoDe()));
                }
                
                if (lancamentoFilter.getDataVencimentoAte() != null) {
                    predicates.add(
                            builder.lessThanOrEqualTo(root.get("dataVencimento"), lancamentoFilter.getDataVencimentoAte()));
                }
                
                return predicates.toArray(new Predicate[predicates.size()]);
            }
        }

    . No postman realize os testes com os links GET abaixo:

        http://localhost:8080/lancamento/api/filter?dataVencimentoDe=2017-06-01    
        http://localhost:8080/lancamento/api/filter?dataVencimentoAte=2017-06-01
        http://localhost:8080/lancamento/api/filter?descricao=mensal 


Aula 05.09. Implementando a paginação de lançamentos
----------------------------------------------------

. Dentro da classe LancamentoResource coloque o método abaixo:

	@GetMapping(path="/filterAndPageable")
	public Page<Lancamento> findByFilterAndPageable(LancamentoFilter lancamentoFilter, Pageable pageable){
		
		Page<Lancamento> lancamentos = lancamentoRepository.filtrar( lancamentoFilter, pageable );
		
		return lancamentos;
		
	}

    . Observe que:
        
        O retorno do método é a classe Page<Lancamento>
        Na assinatura do método foi colocado o parâmetro Pageable pageable. No cliente é colocado os valores 
            "page=[No. da página iniciando com a pág 0]" e "size=[No. de regs por pag]"

. Dentro da interface LancamentoFilterQuery coloque o método abaixo:

	public Page<Lancamento> filtrar(LancamentoFilter lancamentoFilter, Pageable pageable);

. Dentro da classe LancamentoFilterQueryImpl coloque os métodos abaixo:

	@Override
	public Page<Lancamento> filtrar(LancamentoFilter lancamentoFilter, Pageable pageable) {
		CriteriaBuilder builder = manager.getCriteriaBuilder();
		CriteriaQuery<Lancamento> criteria = builder.createQuery(Lancamento.class);
		Root<Lancamento> root = criteria.from(Lancamento.class);
		
		Predicate[] predicates = criarRestricoes(lancamentoFilter, builder, root);
		criteria.where(predicates);
		
		TypedQuery<Lancamento> query = manager.createQuery(criteria);
		
		adicionarRestricaoDePaginacao(query, pageable);
		
		Long totalReg = total(lancamentoFilter);
		
		return new PageImpl<>(query.getResultList(), pageable, total(lancamentoFilter));
	}

	private void adicionarRestricaoDePaginacao(TypedQuery<Lancamento> query, Pageable pageable) {
		int paginaAtual = pageable.getPageNumber();
		int totalRegistroPorPagina = pageable.getPageSize();
		int primeiroRegistroDaPagina = paginaAtual * totalRegistroPorPagina;
		
		query.setFirstResult(primeiroRegistroDaPagina);
		query.setMaxResults(totalRegistroPorPagina);
		
		
	}

	private Long total(LancamentoFilter lancamentoFilter) {
		CriteriaBuilder builder = manager.getCriteriaBuilder();
		
		CriteriaQuery<Long> criteria = builder.createQuery(Long.class);
		
		Root<Lancamento> root = criteria.from(Lancamento.class);
		
		Predicate[] predicates = criarRestricoes(lancamentoFilter, builder, root);
		
		criteria.where(predicates);
		
		criteria.select(builder.count(root));
		
		return manager.createQuery(criteria).getSingleResult();
	}

. Teste a página no Postman com a URL abaixo:

    Method : GET
    URL : http://localhost:8080/lancamento/api/filterAndPageable?page=0&size=5&dataVencimentoAte=2017-06-01



Aula 6.1. Implementando autenticação Basic
------------------------------------------

. Acrescente a dependencia abaixo no pom.xml

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>

. Crie a classe abaixo no projeto:

    package com.example.algamoneyapi.config;

    import org.springframework.context.annotation.Configuration;
    import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
    import org.springframework.security.config.annotation.web.builders.HttpSecurity;
    import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
    import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
    import org.springframework.security.config.http.SessionCreationPolicy;

    @Configuration
    @EnableWebSecurity
    public class SecurityConfig extends WebSecurityConfigurerAdapter {
        @Override
        protected void configure(AuthenticationManagerBuilder auth) throws Exception {
            auth.inMemoryAuthentication()
                .withUser("admin").password("{noop}admin").roles("ROLE");
        }
        
        @Override
        protected void configure(HttpSecurity http) throws Exception {
            http.authorizeRequests()
                    .antMatchers("/categoria/api/**").permitAll()
                    .antMatchers("/h2/**").permitAll()
                    .antMatchers("/h2-console/**").permitAll()
                    .anyRequest().authenticated().and()
                    .headers().frameOptions().sameOrigin().and()
                    .httpBasic().and()
                    .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
                    .csrf().ignoringAntMatchers("/h2-console/**").and()
                    .csrf().disable();
        }
        
    }

. Retorne ao Postman e execute os links novamente para ver se a consulta ainda funciona:

    Method : GET
    URL : http://localhost:8080/lancamento/api/filterAndPageable?page=0&size=5&dataVencimentoAte=2017-06-01

    . O objetivo é não funcionar, pois agora existe o controle de autenticação.

. Execute o link das categorias:

    Method : GET
    URL : http://localhost:8080/categoria/api

    Method : GET
    URL : http://localhost:8080/categoria/api/1

    . Os links da categoria tem que funcionar pois tem a permissão para isso na configuração:

        http.authorizeRequests()
                .antMatchers("/categoria/api/**").permitAll()
                .anyRequest().authenticated()
                .and()
            .httpBasic().and()
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
            .csrf().disable();

. Retorne ao Postman, no link do lancamento. Acesse as configurações Authentication; escolha o type "Basic Auth";
    coloque no Username : admin e Password : admin; e acione o botão "Update Request".

    . Na aba Headers observe que foi colocado um parâmetro com o nome de Authorization com um valor

    . Ao enviar o link ainda não conseguiremos retornar o conteúdo porque a senha está errada.

. Altere o usuário e senha para "admin" "admin" e execute novamente o link. Dessa vez haverá retorno das informações.



https://howtodoinjava.com/spring-boot2/security-rest-basic-auth-example/
http://websystique.com/spring-security/secure-spring-rest-api-using-basic-authentication/



. Outra forma mais complexa de definir os acessos seria como abaixo:

    . Altere a classe SecurityConfig como abaixo:


        package com.example.algamoneyapi.config;

        import org.springframework.beans.factory.annotation.Autowired;
        import org.springframework.context.annotation.Bean;
        import org.springframework.context.annotation.Configuration;
        import org.springframework.http.HttpMethod;
        import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
        import org.springframework.security.config.annotation.web.builders.HttpSecurity;
        import org.springframework.security.config.annotation.web.builders.WebSecurity;
        import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
        import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
        import org.springframework.security.config.http.SessionCreationPolicy;
        import org.springframework.security.web.AuthenticationEntryPoint;

        @Configuration
        @EnableWebSecurity
        public class SecurityConfig extends WebSecurityConfigurerAdapter {

            private static String REALM = "basic_maransi";

            @Autowired
            public void configureGlobalSecurity(AuthenticationManagerBuilder auth) throws Exception {
                auth.inMemoryAuthentication().withUser("bill").password("{noop}abc123").roles("ADMIN");
                auth.inMemoryAuthentication().withUser("tom").password("{noop}abc123").roles("USER");
                auth.inMemoryAuthentication().withUser("admin").password("{noop}admin").roles("ROLE");
            }

            @Override
            protected void configure(HttpSecurity http) throws Exception {
                
                http.csrf().disable()
                    .authorizeRequests()
                    .antMatchers("/categoria/api/**").permitAll()          // Qq um poderá acessar esse contexto 
                    .antMatchers("/lancamento/**").hasRole("ROLE")      // Somente usuários com esta role poderá acessar esse contexto
                    .antMatchers("/h2/**").permitAll()
                    .antMatchers("/h2-console/**").permitAll()
                    .anyRequest().authenticated().and()
                    .headers().frameOptions().sameOrigin().and()
                    .httpBasic().and()
                    .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
                    .csrf().ignoringAntMatchers("/h2-console/**").and()
                    .csrf().disable();
            }

            @Bean
            public CustomBasicAuthenticationEntryPoint getBasicAuthEntryPoint() {
                return new CustomBasicAuthenticationEntryPoint();
            }

            /* To allow Pre-flight [OPTIONS] request from browser */
            @Override
            public void configure(WebSecurity web) throws Exception {
                web.ignoring().antMatchers(HttpMethod.OPTIONS, "/**");
            }
        }


    . Crie a classe CustomBasicAuthenticationEntryPoint que será disparada caso a autenticação falhe
        para completar as informações de resposta ao cliente.

        package com.example.algamoneyapi.config;

        import java.io.IOException;
        import java.io.PrintWriter;

        import javax.servlet.ServletException;
        import javax.servlet.http.HttpServletRequest;
        import javax.servlet.http.HttpServletResponse;

        import org.springframework.security.core.AuthenticationException;
        import org.springframework.security.web.authentication.www.BasicAuthenticationEntryPoint;
        
        public class CustomBasicAuthenticationEntryPoint extends BasicAuthenticationEntryPoint {
        
            @Override
            public void commence(final HttpServletRequest request, 
                    final HttpServletResponse response, 
                    final AuthenticationException authException) throws IOException {
                //Authentication failed, send error response.
                response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
                response.addHeader("WWW-Authenticate", "Basic realm=" + getRealmName() + "");
                
                PrintWriter writer = response.getWriter();
                writer.println("HTTP Status 401 : " + authException.getMessage());
            }
            
            @Override
            public void afterPropertiesSet() {
                setRealmName("basic_maransi");
                super.afterPropertiesSet();
            }
        }    

    . Retorne ao Postman, acesse as configurações Authentication; escolha o type "Basic Auth";
        coloque no Username : tom e Password : abc123; utilize o link abaixo; e acione o botão "Send"

        Method : GET
        URL : http://localhost:8080/lancamento/api/

        . Dará erro, pois esse link só está configurado a liberação para os usuários com a role "ROLE"

    . Execute o mesmo link acima com o usuário admin : admin



Aula 6.3. Implementando segurança com OAuth 2 e Password Flow
-------------------------------------------------------------

. Inclua a dependência abaixo no pom.xml:

		<dependency>
			<groupId>org.springframework.security.oauth</groupId>
			<artifactId>spring-security-oauth2</artifactId>
			<version>2.3.4.RELEASE</version>
		</dependency>

. Apague todas as classes do pacote com.example.algamoneyapi.config .

. Inclua a classe abaixo no projeto:

    package com.example.algamoneyapi.config;

    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
    import org.springframework.security.config.annotation.web.builders.HttpSecurity;
    import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
    import org.springframework.security.config.http.SessionCreationPolicy;
    import org.springframework.security.oauth2.config.annotation.web.configuration.EnableResourceServer;
    import org.springframework.security.oauth2.config.annotation.web.configuration.ResourceServerConfigurerAdapter;
    import org.springframework.security.oauth2.config.annotation.web.configurers.ResourceServerSecurityConfigurer;

    @Configuration
    @EnableWebSecurity
    @EnableResourceServer
    public class ResourceServerConfig extends ResourceServerConfigurerAdapter {

        @Autowired
        public void configure(AuthenticationManagerBuilder auth) throws Exception {
            auth.inMemoryAuthentication()
                .withUser("admin").password("admin").roles("ROLE");
        }
        
        @Override
        public void configure(HttpSecurity http) throws Exception {
            http.authorizeRequests()
                    .antMatchers("/categoria/**").permitAll()
                    .antMatchers("/h2/**").permitAll()
                    .antMatchers("/h2-console/**").permitAll()
                    .anyRequest().authenticated().and()
                    .headers().frameOptions().sameOrigin().and()
                    .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
                    .csrf().ignoringAntMatchers("/h2-console/**").and()
                    .csrf().disable();
        }
        
        @Override
        public void configure(ResourceServerSecurityConfigurer resources) throws Exception {
            resources.stateless(true);
        }
        
    }

    . Para permitir a utilização do localhost:8080/h2 é necessário utilizar os métodos abaixo no método "configure"

        http.authorizeRequests()
            .antMatchers("/h2/**").permitAll()
            .antMatchers("/h2-console/**").permitAll()
            .and().csrf().ignoringAntMatchers("/h2-console/**")
            .and().headers().frameOptions().sameOrigin();

. Inclua a classe abaixo no projeto:

    package com.example.algamoneyapi.config;

    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.security.authentication.AuthenticationManager;
    import org.springframework.security.oauth2.config.annotation.configurers.ClientDetailsServiceConfigurer;
    import org.springframework.security.oauth2.config.annotation.web.configuration.AuthorizationServerConfigurerAdapter;
    import org.springframework.security.oauth2.config.annotation.web.configuration.EnableAuthorizationServer;
    import org.springframework.security.oauth2.config.annotation.web.configurers.AuthorizationServerEndpointsConfigurer;
    import org.springframework.security.oauth2.provider.token.TokenStore;
    import org.springframework.security.oauth2.provider.token.store.InMemoryTokenStore;

    @Configuration
    @EnableAuthorizationServer
    public class AuthorizationServerConfig extends AuthorizationServerConfigurerAdapter {

        @Autowired
        private AuthenticationManager authenticationManager;
        
        @Override
        public void configure(ClientDetailsServiceConfigurer clients) throws Exception {
            clients.inMemory()
                .withClient("angular")
                .secret("@ngul@r0")
                .scopes("read", "write")
                .authorizedGrantTypes("password")
                .accessTokenValiditySeconds(1800);
        }
        
        @Override
        public void configure(AuthorizationServerEndpointsConfigurer endpoints) throws Exception {
            endpoints
                .tokenStore(tokenStore())
                .authenticationManager(authenticationManager);
        }
        
        @Bean
        public TokenStore tokenStore() {
            return new InMemoryTokenStore();
        }
        
    }


. Inclua a classe abaixo no projeto, ela ajudará na Injeção de Dependência da classe AuthenticationManager

    package com.example.algamoneyapi.config;

    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.security.authentication.AuthenticationManager;
    import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
    import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
    import org.springframework.security.crypto.password.NoOpPasswordEncoder;
    import org.springframework.security.crypto.password.PasswordEncoder;

    @Configuration
    @EnableWebSecurity
    public class OAuthSecurityConfig extends WebSecurityConfigurerAdapter {

        @Bean
        @Override
        public AuthenticationManager authenticationManager() throws Exception {
            return super.authenticationManager();
        }

        @Bean
        public PasswordEncoder passwordEncoder() {
            return NoOpPasswordEncoder.getInstance();
        }
    }


. Crie uma chamada no Postman como abaixo:

    Method : POST
    url : localhost:8080/oauth/token

    . Em Authoritation coloque os parâmetros abaixo:

        Type : Basic Auth
        User : angular
        Password : @ngul@r0

        // De Update Request

    . em Body  coloque os parâmetros abaixo:

        x-www-form-urlencoded : true

        key                             value
        ----                            -----
        client                          angular
        username                        admin
        Password                        admin
        grant_type                      password

    . Acione o send e pegue o valor do "access_token"


. Acesse no Postman a URL abaixo:


    Method : GET
    URL : http://localhost:8080/categoria/api/

    Method : GET
    URL : http://localhost:8080/categoria/api/1

    . Deixe em Authoritation no Type como "No Auth". Isso permitirá colocar o parâmetro Authentication
        no Headers como abaixo.

    . Acesse a aba Headers e coloque os parâmetros abaixo:

        key                             value
        ----                            -----
        Authorization                   Bearer + [Access Token]


        . Acione o Send


https://www.devglan.com/spring-security/spring-boot-security-oauth2-example




Aula 6.4. JSON Web Tokens - JWT
-------------------------------

. Consultar o site https://jwt.io



Aula 6.5. Configurando JWT no projeto
-------------------------------------

. Adione a dependência abaixo no pom.xml do projeto:

    <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-jwt</artifactId>
			<version>1.1.1.RELEASE</version>
    </dependency>

. Altere a classe AuthorizationServerConfig como abaixo:

    package com.example.algamoneyapi.config;

    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.security.authentication.AuthenticationManager;
    import org.springframework.security.oauth2.config.annotation.configurers.ClientDetailsServiceConfigurer;
    import org.springframework.security.oauth2.config.annotation.web.configuration.AuthorizationServerConfigurerAdapter;
    import org.springframework.security.oauth2.config.annotation.web.configuration.EnableAuthorizationServer;
    import org.springframework.security.oauth2.config.annotation.web.configurers.AuthorizationServerEndpointsConfigurer;
    import org.springframework.security.oauth2.provider.token.TokenStore;
    import org.springframework.security.oauth2.provider.token.store.JwtAccessTokenConverter;
    import org.springframework.security.oauth2.provider.token.store.JwtTokenStore;

    @Configuration
    @EnableAuthorizationServer
    public class AuthorizationServerConfig extends AuthorizationServerConfigurerAdapter {

        @Autowired
        private AuthenticationManager authenticationManager;
        
        @Override
        public void configure(ClientDetailsServiceConfigurer clients) throws Exception {
            clients.inMemory()
                .withClient("angular")
                .secret("@ngul@r0")
                .scopes("read", "write")
                .authorizedGrantTypes("password")
                .accessTokenValiditySeconds(1800);
        }
        
        @Override
        public void configure(AuthorizationServerEndpointsConfigurer endpoints) throws Exception {
            endpoints
                .tokenStore(tokenStore())
                .accessTokenConverter(accessTokenConverter())       // Linha alterada para adequar JWT
                .authenticationManager(authenticationManager);
        }   
        
        // Método criado para JWT
        @Bean
        public JwtAccessTokenConverter accessTokenConverter() {
            JwtAccessTokenConverter accessTokenConverter = new JwtAccessTokenConverter();
            accessTokenConverter.setSigningKey("algaworks");
            return accessTokenConverter;
        }

        @Bean
        public TokenStore tokenStore() {
            return new JwtTokenStore(accessTokenConverter());   // Linha alterada para adequar ao JWT
        }
        
    }

. Crie uma chamada no Postman como abaixo:

    Method : POST
    url : localhost:8080/oauth/token


    . Em Authoritation coloque os parâmetros abaixo:

        Type : Basic Auth
        User : angular
        Password : @ngul@r0

        // De Update Request

    . em Body  coloque os parâmetros abaixo:

        x-www-form-urlencoded : true

        key                             value
        ----                            -----
        client                          angular
        username                        admin
        Password                        admin
        grant_type                      password

    . Acione o send e pegue o valor do "access_token"

    . Selecione o access_token gerado é submeta ele no site https://jwt.io e valide ele.

    . No Verify Signature altere o valor da chave de "secret" para "algaworks" conforme colocado no método
        accessTokenConverter.

. Acesse no Postman a URL abaixo:


    Method : GET
    URL : http://localhost:8080/categoria/api/

    Method : GET
    URL : http://localhost:8080/categoria/api/1

    . Deixe em Authoritation no Type como "No Auth". Isso permitirá colocar o parâmetro Authentication
        no Headers como abaixo.

    . Acesse a aba Headers e coloque os parâmetros abaixo:

        key                             value
        ----                            -----
        Authoritation                   Bearer + [Access Token]


        . Acione o Send


Aula 6.6. Renovando o access token com o refresh token
------------------------------------------------------

. Altere o parâmetro .accessTokenValiditySeconds para 20 segundos:

    ...
    @Configuration
    @EnableAuthorizationServer
    public class AuthorizationServerConfig extends AuthorizationServerConfigurerAdapter {

        @Autowired
        private AuthenticationManager authenticationManager;
        
        @Override
        public void configure(ClientDetailsServiceConfigurer clients) throws Exception {
            clients.inMemory()
                .withClient("angular")
                .secret("@ngul@r0")
                .scopes("read", "write")
                .authorizedGrantTypes("password")
                .accessTokenValiditySeconds(20);    // Altere para 20 seg
        }
        
        ...
    }

. Com essa alteração o token terá um tempo curto de existência. Acesse o Postman, faça a criação de um
    token como nos exemplos anteriores e execute uma url com ele durante 20 seg, ou mais para verificar
    a expiração do token.
    
    # Para obter o token
    Method : POST
    url : localhost:8080/oauth/token

    # Utilize o token no Authorization da url abaixo
    Method : GET
    URL : http://localhost:8080/categoria/api/

. Faça as alterações abaixo nos parâmetros do token:

        ...
        @Override
        public void configure(ClientDetailsServiceConfigurer clients) throws Exception {
            clients.inMemory()
                .withClient("angular")
                .secret("@ngul@r0")
                .scopes("read", "write")
                .authorizedGrantTypes("password", "refresh_token")          // Inclua o param "refresh_token"
                .accessTokenValiditySeconds(20)                            // Altere para 20 seg
                .refreshTokenValiditySeconds( 3600 * 24 );                   // Tempo para expirar o refreshToken de 1 dia
        }
        
        @Override
        public void configure(AuthorizationServerEndpointsConfigurer endpoints) throws Exception {
            endpoints
                .tokenStore(tokenStore())
                .accessTokenConverter(accessTokenConverter()) 
                .reuseRefreshTokens(false)                                  // Um novo refreshToken será criado a cada solicitação
                .authenticationManager(authenticationManager);
                
        }   
        ...

. Faça a solicitação novamente do token e observe que veio o refresh_token:

    # Para obter o token
    Method : POST
    url : localhost:8080/oauth/token

. Espere a expiração do token e solicite um novo token com o refresh_token. Para isso será necessário 
    chamar a url acima. Porém sem o usuário e senha, somente com o grant_type igual a refresh_token. Crie uma nova requisição de token
    como abaixo:

    # Para obter o token
    Method : POST
    url : localhost:8080/oauth/token

    . Em Authoritation coloque os parâmetros abaixo:

        Type : Basic Auth
        User : angular
        Password : @ngul@r0

    . No "body" em x-wwww-form-urlencoded = true

        key                             value
        ----                            -----
        grant_type                      refresh_token
        refresh_token                   [ access_token adquirido no passo anterior de obtenção do refresh_token que veio no cookie]

    . Dê um send, copie o novo access_token obtido com a requisição acima e utilize para executar a requisição abaixo:

        # Utilize o token no Authorization da url abaixo
        Method : GET
        URL : http://localhost:8080/categoria/api/



https://dassum.medium.com/securing-spring-boot-rest-api-with-json-web-token-and-jdbc-token-store-67558a7d6c29




Aula 6.7. Movendo o refresh token para o cookie
-----------------------------------------------

. Para deixar mais seguro nossos tokens iremos retirar o refresh_token do corpo da resposta da nossa requisição e colocá-lo
    num cookie http e assim deixar mais segura a nossa aplicação.

. Crie a classe abaixo no projeto:

    package com.example.algamoneyapi.token;

    import javax.servlet.http.Cookie;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;

    import org.springframework.core.MethodParameter;
    import org.springframework.http.MediaType;
    import org.springframework.http.converter.HttpMessageConverter;
    import org.springframework.http.server.ServerHttpRequest;
    import org.springframework.http.server.ServerHttpResponse;
    import org.springframework.http.server.ServletServerHttpRequest;
    import org.springframework.http.server.ServletServerHttpResponse;
    import org.springframework.security.oauth2.common.DefaultOAuth2AccessToken;
    import org.springframework.security.oauth2.common.OAuth2AccessToken;
    import org.springframework.web.bind.annotation.ControllerAdvice;
    import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice;

    @ControllerAdvice
    public class RefreshTokenPostProcessor implements ResponseBodyAdvice<OAuth2AccessToken> {

        @Override
        public boolean supports(MethodParameter returnType, Class<? extends HttpMessageConverter<?>> converterType) {
            return returnType.getMethod().getName().equals("postAccessToken");
        }

        @Override
        public OAuth2AccessToken beforeBodyWrite(OAuth2AccessToken body, MethodParameter returnType,
                MediaType selectedContentType, Class<? extends HttpMessageConverter<?>> selectedConverterType,
                ServerHttpRequest request, ServerHttpResponse response) {
            
            HttpServletRequest req = ((ServletServerHttpRequest) request).getServletRequest();
            HttpServletResponse resp = ((ServletServerHttpResponse) response).getServletResponse();
            
            DefaultOAuth2AccessToken token = (DefaultOAuth2AccessToken) body;
            
            String refreshToken = body.getRefreshToken().getValue();
            adicionarRefreshTokenNoCookie(refreshToken, req, resp);
            removerRefreshTokenDoBody(token);
            
            return body;
        }

        private void removerRefreshTokenDoBody(DefaultOAuth2AccessToken token) {
            token.setRefreshToken(null);
        }

        private void adicionarRefreshTokenNoCookie(String refreshToken, HttpServletRequest req, HttpServletResponse resp) {
            Cookie refreshTokenCookie = new Cookie("refreshToken", refreshToken);
            refreshTokenCookie.setHttpOnly(true);
            refreshTokenCookie.setSecure(false); // TODO: Mudar para true em producao
            refreshTokenCookie.setPath(req.getContextPath() + "/oauth/token");
            refreshTokenCookie.setMaxAge(2592000);
            resp.addCookie(refreshTokenCookie);
        }

    }


    . No parâmetro abaixo estamos informando que o refresh_token poderá ser colocado num cookie http. Se fosse true, ele só
        viria num cookie https:

        refreshTokenCookie.setHttpOnly(true);

. Execute o projeto, acesse o postman e solicite o token como abaixo. 

    # Para obter o token
    Method : POST
    url : localhost:8080/oauth/token

    . Verifique que agora o refres_token não veio, ele está 
        disponivel no cookie.

    . Em Authoritation coloque os parâmetros abaixo:

        Type : Basic Auth
        User : angular
        Password : @ngul@r0

    . No "body" em x-wwww-form-urlencoded = true

        key                             value
        ----                            -----
        grant_type                      refresh_token
        refresh_token                   [ access_token adquirido no passo anterior que está no cookie de obtenção do refresh_token ]

    . Dê um send, copie o access_token obtido e utilize  no lugar do token para executar a requisição abaixo:

        # Utilize o token no Authorization da url abaixo
        Method : GET
        URL : http://localhost:8080/categoria/api/




Aula 6.8. Movendo o refresh token do cookie para a requisição
-------------------------------------------------------------

. Inclua a classe abaixo no projeto:

    package com.example.algamoneyapi.token;

    import java.io.IOException;
    import java.util.Map;

    import javax.servlet.Filter;
    import javax.servlet.FilterChain;
    import javax.servlet.FilterConfig;
    import javax.servlet.ServletException;
    import javax.servlet.ServletRequest;
    import javax.servlet.ServletResponse;
    import javax.servlet.http.Cookie;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletRequestWrapper;

    import org.apache.catalina.util.ParameterMap;
    import org.springframework.core.Ordered;
    import org.springframework.core.annotation.Order;
    import org.springframework.stereotype.Component;

    @Component
    @Order(Ordered.HIGHEST_PRECEDENCE)
    public class RefreshTokenCookiePreProcessorFilter implements Filter {

        @Override
        public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
                throws IOException, ServletException {
            
            HttpServletRequest req = (HttpServletRequest) request;
            
            if ("/oauth/token".equalsIgnoreCase(req.getRequestURI()) 
                    && "refresh_token".equals(req.getParameter("grant_type"))
                    && req.getCookies() != null) {
                for (Cookie cookie : req.getCookies()) {
                    if (cookie.getName().equals("refreshToken")) {
                        String refreshToken = cookie.getValue();
                        req = new MyServletRequestWrapper(req, refreshToken);
                    }
                }
            }
            
            chain.doFilter(req, response);
        }
        
        @Override
        public void destroy() {
            
        }

        @Override
        public void init(FilterConfig arg0) throws ServletException {
            
        }
        
        static class MyServletRequestWrapper extends HttpServletRequestWrapper {

            private String refreshToken;
            
            public MyServletRequestWrapper(HttpServletRequest request, String refreshToken) {
                super(request);
                this.refreshToken = refreshToken;
            }
            
            @Override
            public Map<String, String[]> getParameterMap() {
                ParameterMap<String, String[]> map = new ParameterMap<>(getRequest().getParameterMap());
                map.put("refresh_token", new String[] { refreshToken });
                map.setLocked(true);
                return map;
            }
            
        }

    }

. Execute o projeto, acesse o postman e solicite o token como abaixo. 

    # Para obter o token
    Method : POST
    url : localhost:8080/oauth/token

    . Em Authoritation coloque os parâmetros abaixo:

        Type : Basic Auth
        User : angular
        Password : @ngul@r0

    . No "body" em x-wwww-form-urlencoded = true

        key                             value
        ----                            -----
        grant_type                      refresh_token
        refresh_token                   [ access_token adquirido no passo anterior que está no cookie de obtenção do refresh_token ]

    . Desmarque o parâmetro refresh_token, submeta novamente a requisição e verifique se o access_token veio.


        . O objetivo é passar nos parâmetros do Body somente o grant_type, sem ter que passar o refresh_token e expo-lo na requisição. 
        . Como o cookie fica armazenado no client, o server através da classe Filter acima recupera o conteúdo do Cookie e adiciona aos
            parâmetros automaticamente, sem a necessidade de enviá-lo nos parâmetros do Body

    . Dê um send, acesse a aba Cookie, copie o access_token obtido no Cookie e utilize  no lugar do token para executar a requisição abaixo:

        # Utilize o token no Authorization da url abaixo
        Method : GET
        URL : http://localhost:8080/categoria/api/



Aula 06.09. O que é CORS
-----------------------

    CORS (Cross-Origin Resource Sharing) é uma especificação do W3C que, quando implementado pelo navegador, permite que um site acesse 
    recursos de outro site mesmo estando em domínios diferentes.

    Explicando um pouco melhor: os navegadores fazem uso de uma funcionalidade de segurança chamada Same-Origin Policy: um recurso 
    de um site só pode ser chamado por outro site se os 2 sites estiverem sob o mesmo domínio (mesmo endereço, 
    por ex.: meudominio.com.br). Isso limita a chamada de APIs REST por aplicações JS, por exemplo, hospedadas em 
    servidores diferentes (front-end e back-end em camadas distintas). Isso porque o navegador considera recursos do mesmo 
    domínio somente aqueles que usam o mesmo protocolo (http ou https), a mesma porta e o mesmo endereço (mesmo subdomínios, 
    subdominio.meudominio.com.br, por exemplo, não são considerados seguros e não funcionam).

    Antes do CORS, era possível contornar essa restrição criando algum tipo de componente que servisse de proxy para as chamadas externas. 
    O uso do JSONP (JSON with padding) para APIs que dão suporte (pouco comum) também era uma saída. Contudo o JSONP é limitado 
    somente a chamadas do tipo GET o que causa bastante transtorno para APIs baseadas em REST (que faz uso dos outros 
    verbos POST, PUT e DELETE).

    Com a implementação do CORS um domínio permite comunicação com outro de forma livre, independente do método da chamada 
    (GET, POST, PUT ou DELETE) contanto que o domínio de destino tenha especificado esse tipo de comunicação.

    Geralmente essa configuração é feita no lado da API e cada framework tem sua forma de configuração. A parte importante 
    é a inclusão do Access-Control-Allow-Origin no header da reposta da API.

    Então, em um cenário bem simples, sua aplicação JS cliente em dev.meudominio.com.br faz um request para a 
    API (normalmente numa chamada AJAX) para o servidor api.meudominio.com.br. A resposta da API deve incluir no 
    header da resposta o Access-Control-Allow-Origin: http://dev.meudominio.com.br deixando claro para o navegador 
    que ele aceita requests originados somente desse domínio.

    Então em um exemplo de chamada de dev.meudominio.com.br para api.meudominio.com.br/recurso.php, gera esse request header:


        GET /recurso.php HTTP/1.1
        User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/536.30.1 (KHTML, like Gecko) Version/6.0.5 Safari/536.30.1
        Accept: application/json, text/plain, */*
        Referer: http://dev.meudominio.com.br/
        Origin: http://dev.meudominio.com.br/


    E a API deve gerar a resposta com o response header abaixo:

        HTTP/1.1 200 OK
        Content-Type: application/json;charset=UTF-8
        Date: Wed, 20 Nov 2013 19:36:00 GMT
        Server: Apache-Coyote/1.1
        Content-Length: 35
        Connection: keep-alive
        Access-Control-Allow-Origin: http://dev.meudominio.com.br

    Se o conteúdo de Origin for idêntico ao de Access-Control-Allow-Origin a comunicação é permitida pelo navegador.

    Em um cenário mais complexo, existem outros headers que precisam ser configurados na resposta. De novo, isso varia com os 
    frameworks que estão sendo utilizados (cliente e servidor).


https://www.youtube.com/watch?v=GZV-FUdeVwE
https://howtodoinjava.com/spring5/webmvc/spring-mvc-cors-configuration/
https://www.baeldung.com/spring-cors
https://helpdev.com.br/2019/01/03/java-configurando-cors-no-spring-boot-e-security/


Aula 06.10. Criando filtro para CORS
------------------------------------

    . Implemente a classe abaixo no projeto:

        package com.example.algamoneyapi.cors;

        import java.io.IOException;

        import javax.servlet.Filter;
        import javax.servlet.FilterChain;
        import javax.servlet.FilterConfig;
        import javax.servlet.ServletException;
        import javax.servlet.ServletRequest;
        import javax.servlet.ServletResponse;
        import javax.servlet.http.HttpServletRequest;
        import javax.servlet.http.HttpServletResponse;

        import org.springframework.core.Ordered;
        import org.springframework.core.annotation.Order;
        import org.springframework.stereotype.Component;

        @Component
        @Order(Ordered.HIGHEST_PRECEDENCE)
        public class CorsFilter implements Filter {

            private String originPermitida = "http://localhost:8000"; // TODO: Configurar para diferentes ambientes
            
            @Override
            public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain)
                    throws IOException, ServletException {
                
                HttpServletRequest request = (HttpServletRequest) req;
                HttpServletResponse response = (HttpServletResponse) resp;
                
                response.setHeader("Access-Control-Allow-Origin", originPermitida);
                response.setHeader("Access-Control-Allow-Credentials", "true"); // Para permitir trabalhar com os cookies
                
                if ("OPTIONS".equals(request.getMethod()) && originPermitida.equals(request.getHeader("Origin"))) {
                    response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, PUT, OPTIONS");
                    response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type, Accept");
                    response.setHeader("Access-Control-Max-Age", "3600");
                    
                    response.setStatus(HttpServletResponse.SC_OK);  // Serve para parar a chamada do prox filter
                } else {
                    chain.doFilter(req, resp);
                }
                
            }
            
            @Override
            public void destroy() {
            }

            @Override
            public void init(FilterConfig arg0) throws ServletException {
            }

        }


Aula 06.11. Movendo o usuário para o banco de dados
---------------------------------------------------

    . Implemente no arquivo schema.sql as DDLs abaixo:

        CREATE TABLE usuario (
            codigo BIGINT(20) PRIMARY KEY,
            nome VARCHAR(50) NOT NULL,
            email VARCHAR(50) NOT NULL,
            senha VARCHAR(150) NOT NULL
        );

        CREATE TABLE permissao (
            codigo BIGINT(20) PRIMARY KEY,
            descricao VARCHAR(50) NOT NULL
        );

        CREATE TABLE usuario_permissao (
            codigo_usuario BIGINT(20) NOT NULL,
            codigo_permissao BIGINT(20) NOT NULL,
            PRIMARY KEY (codigo_usuario, codigo_permissao),
            FOREIGN KEY (codigo_usuario) REFERENCES usuario(codigo),
            FOREIGN KEY (codigo_permissao) REFERENCES permissao(codigo)
        );

    . Implemente no arquivo data.sql as DMLs abaixo:

        INSERT INTO usuario (codigo, nome, email, senha) values (1, 'Administrador', 'admin@algamoney.com', '$2a$10$X607ZPhQ4EgGNaYKt3n4SONjIv9zc.VMWdEuhCuba7oLAL5IvcL5.');
        INSERT INTO usuario (codigo, nome, email, senha) values (2, 'Maria Silva', 'maria@algamoney.com', '$2a$10$Zc3w6HyuPOPXamaMhh.PQOXvDnEsadztbfi6/RyZWJDzimE8WQjaq');

        INSERT INTO permissao (codigo, descricao) values (1, 'ROLE_CADASTRAR_CATEGORIA');
        INSERT INTO permissao (codigo, descricao) values (2, 'ROLE_PESQUISAR_CATEGORIA');

        INSERT INTO permissao (codigo, descricao) values (3, 'ROLE_CADASTRAR_PESSOA');
        INSERT INTO permissao (codigo, descricao) values (4, 'ROLE_REMOVER_PESSOA');
        INSERT INTO permissao (codigo, descricao) values (5, 'ROLE_PESQUISAR_PESSOA');

        INSERT INTO permissao (codigo, descricao) values (6, 'ROLE_CADASTRAR_LANCAMENTO');
        INSERT INTO permissao (codigo, descricao) values (7, 'ROLE_REMOVER_LANCAMENTO');
        INSERT INTO permissao (codigo, descricao) values (8, 'ROLE_PESQUISAR_LANCAMENTO');

        -- admin
        INSERT INTO usuario_permissao (codigo_usuario, codigo_permissao) values (1, 1);
        INSERT INTO usuario_permissao (codigo_usuario, codigo_permissao) values (1, 2);
        INSERT INTO usuario_permissao (codigo_usuario, codigo_permissao) values (1, 3);
        INSERT INTO usuario_permissao (codigo_usuario, codigo_permissao) values (1, 4);
        INSERT INTO usuario_permissao (codigo_usuario, codigo_permissao) values (1, 5);
        INSERT INTO usuario_permissao (codigo_usuario, codigo_permissao) values (1, 6);
        INSERT INTO usuario_permissao (codigo_usuario, codigo_permissao) values (1, 7);
        INSERT INTO usuario_permissao (codigo_usuario, codigo_permissao) values (1, 8);

        -- maria
        INSERT INTO usuario_permissao (codigo_usuario, codigo_permissao) values (2, 2);
        INSERT INTO usuario_permissao (codigo_usuario, codigo_permissao) values (2, 5);
        INSERT INTO usuario_permissao (codigo_usuario, codigo_permissao) values (2, 8);


    . Crie as classes model abaixo:

        /*
         *  Usuario
         */

        package com.example.algamoneyapi.model;

        import java.util.List;

        import javax.persistence.Entity;
        import javax.persistence.FetchType;
        import javax.persistence.Id;
        import javax.persistence.JoinColumn;
        import javax.persistence.JoinTable;
        import javax.persistence.ManyToMany;
        import javax.persistence.Table;

        @Entity
        @Table(name = "usuario")
        public class Usuario {

            @Id
            private Long codigo;

            private String nome;
            private String email;
            private String senha;

            @ManyToMany(fetch = FetchType.EAGER)
            @JoinTable(name = "usuario_permissao", joinColumns = @JoinColumn(name = "codigo_usuario")
                , inverseJoinColumns = @JoinColumn(name = "codigo_permissao"))
            private List<Permissao> permissoes;

            public Long getCodigo() {
                return codigo;
            }

            public void setCodigo(Long codigo) {
                this.codigo = codigo;
            }

            public String getNome() {
                return nome;
            }

            public void setNome(String nome) {
                this.nome = nome;
            }

            public String getEmail() {
                return email;
            }

            public void setEmail(String email) {
                this.email = email;
            }

            public String getSenha() {
                return senha;
            }

            public void setSenha(String senha) {
                this.senha = senha;
            }

            public List<Permissao> getPermissoes() {
                return permissoes;
            }

            public void setPermissoes(List<Permissao> permissoes) {
                this.permissoes = permissoes;
            }

            @Override
            public int hashCode() {
                final int prime = 31;
                int result = 1;
                result = prime * result + ((codigo == null) ? 0 : codigo.hashCode());
                return result;
            }

            @Override
            public boolean equals(Object obj) {
                if (this == obj)
                    return true;
                if (obj == null)
                    return false;
                if (getClass() != obj.getClass())
                    return false;
                Usuario other = (Usuario) obj;
                if (codigo == null) {
                    if (other.codigo != null)
                        return false;
                } else if (!codigo.equals(other.codigo))
                    return false;
                return true;
            }

        }





        /*
         *  Permissao
         */


        package com.example.algamoney.api.model;

        import javax.persistence.Entity;
        import javax.persistence.Id;
        import javax.persistence.Table;

        @Entity
        @Table(name = "permissao")
        public class Permissao {

            @Id
            private Long codigo;
            private String descricao;

            public Long getCodigo() {
                return codigo;
            }

            public void setCodigo(Long codigo) {
                this.codigo = codigo;
            }

            public String getDescricao() {
                return descricao;
            }

            public void setDescricao(String descricao) {
                this.descricao = descricao;
            }

            @Override
            public int hashCode() {
                final int prime = 31;
                int result = 1;
                result = prime * result + ((codigo == null) ? 0 : codigo.hashCode());
                return result;
            }

            @Override
            public boolean equals(Object obj) {
                if (this == obj)
                    return true;
                if (obj == null)
                    return false;
                if (getClass() != obj.getClass())
                    return false;
                Permissao other = (Permissao) obj;
                if (codigo == null) {
                    if (other.codigo != null)
                        return false;
                } else if (!codigo.equals(other.codigo))
                    return false;
                return true;
            }

        }


    . Crie a classe repository abaixo no projeto:

        package com.example.algamoneyapi.repository;

        import java.util.Optional;

        import org.springframework.data.jpa.repository.JpaRepository;

        import com.example.algamoney.api.model.Usuario;

        public interface UsuarioRepository extends JpaRepository<Usuario, Long> {

            public Optional<Usuario> findByEmail(String email);
            
        }


    . Altere na classe ResourceServerConfig o método configure como abaixo :

        // De

        @Autowired
        public void configure(AuthenticationManagerBuilder auth) throws Exception {
            auth.inMemoryAuthentication()
                    .withUser("admin").password("admin").roles("ROLE");
        }


        // Para

        @Autowired
        private UserDetailsService userDetailsService

        @Autowired
        public void configure(AuthenticationManagerBuilder auth) throws Exception {
            auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());
        }    


    . Ainda no arquivo ResourceServerConfig implemente o método abaixo:

        // @Bean            // O @Bean foi comentado devido a problemas mais a frente com as aulas o @Profile. Devido ao metodo ser declarado em mais de um
        //                      lugar, o projeto não levanta. Até este ponto pode ser usado, mas qdo for criado a classe BasicSecurityConfig vai parar
        public PasswordEncoder passwordEncoder() {
            return new BCryptPasswordEncoder();
        }


    . Crie a classe abaixo no projeto:

        package com.example.algamoneyapi.security;

        import java.util.Collection;
        import java.util.HashSet;
        import java.util.Optional;
        import java.util.Set;

        import org.springframework.beans.factory.annotation.Autowired;
        import org.springframework.security.core.GrantedAuthority;
        import org.springframework.security.core.authority.SimpleGrantedAuthority;
        import org.springframework.security.core.userdetails.User;
        import org.springframework.security.core.userdetails.UserDetails;
        import org.springframework.security.core.userdetails.UserDetailsService;
        import org.springframework.security.core.userdetails.UsernameNotFoundException;
        import org.springframework.stereotype.Service;

        import com.example.algamoney.api.model.Usuario;
        import com.example.algamoney.api.repository.UsuarioRepository;

        @Service
        public class AppUserDetailsService implements UserDetailsService {

            @Autowired
            private UsuarioRepository usuarioRepository;
            
            @Override
            public UserDetails loadUserByUsername(String email) throws UsernameNotFoundException {
                Optional<Usuario> usuarioOptional = usuarioRepository.findByEmail(email);
                Usuario usuario = usuarioOptional.orElseThrow(() -> new UsernameNotFoundException("Usuário e/ou senha incorretos"));
                return new User(email, usuario.getSenha(), getPermissoes(usuario));
            }

            private Collection<? extends GrantedAuthority> getPermissoes(Usuario usuario) {
                Set<SimpleGrantedAuthority> authorities = new HashSet<>();
                usuario.getPermissoes().forEach(p -> authorities.add(new SimpleGrantedAuthority(p.getDescricao().toUpperCase())));
                return authorities;
            }

        }

    . As configurações abaixo estão no Postman -> Body -> x-www-form-urlencoded

    . Subir a aplicação testando, executar localhost:8080/oauth/token com o usuário admin@algamoney.com e password admin para 
        recuperar o access_token

    . execute novamente localhost:808/oauth/token com usuário e senha maria@algamoney.com maria respectivamente para recuperar
        o access_token.


https://www.javadevjournal.com/spring/spring-security-userdetailsservice/
        

    . IMPORTANTE: Para gerar uma nova senha para um usuário é necessário executar o método "passwordEncoder()". 
                    Gere a classe abaixo e execute e execute o método "main", passando como parâmetro a string
                    que se deseja "encodar":

        package com.example.algamoney.api.security.util;

        import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;

        public class GeradorSenha {

            public static void main(String[] args) {
                BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
                System.out.println(encoder.encode("admin"));        // String para encodar
            }
            
        }

        . É só executar o método main acima para consultar o valor encodado e utilizá-lo na senha no momento 
            do Cadastramento no banco de dados.

Aula 06.12. Adicionando permissões de acesso
--------------------------------------------

    . Incluir a anotação  @EnableGlobalMethodSecurity(prePostEnabled=true) na classe ResourceServerConfig. Isto habilita o controle
        de segurança nos métodos das API (classes resource):

        @Configuration
        @EnableWebSecurity
        @EnableResourceServer
        @EnableGlobalMethodSecurity(prePostEnabled=true)
        public class ResourceServerConfig extends ResourceServerConfigurerAdapter {

            ...

        }

    . Inclua o método abaixo na classe ResourceServerConfig:

        ...
        @Bean
        public MethodSecurityExpressionHandler createExpressionHandler(){
            return new OAuth2MethodSecurityExpressionHandler();
        }
        ...

    . Acessar os métodos das classes resources e incluir a anotação @PreAuthorize:

        @GetMapping
        @PreAuthorize("hasAuthority('ROLE_PESQUISAR_CATEGORIA') and #oauth2.hasScope('read')")
        public  ResponseEntity<?> findAll() {

            List<Categoria> categorias = null;

            try {
                categorias = categoriaRepository.findAll();

                return ResponseEntity.ok(categorias);
            } catch (Exception e) {
                return ResponseEntity.badRequest().body(e.getMessage());
            }

        }

        @GetMapping(path = "{codigo}")
        @PreAuthorize("hasAuthority('ROLE_PESQUISAR_CATEGORIA') and #oauth2.hasScope('read')")
        public ResponseEntity<?> findById(@PathVariable Long codigo, HttpServletResponse response) {

            try {
                Categoria categoria = categoriaRepository.findById(codigo).get();
        
                URI uri = ServletUriComponentsBuilder.fromCurrentRequestUri().path("")
                        .buildAndExpand(categoria.getCodigo()).toUri();

                response.setHeader("Location", uri.toASCIIString());

                return ResponseEntity.ok( categoria );
            }catch( Exception e) {
                return ResponseEntity.notFound().build();
            }
            
            
        }

        @PostMapping
        @PreAuthorize("hasAuthority('ROLE_CADASTRAR_CATEGORIA') and #oauth2.hasScope('write')")
        // @ResponseStatus( HttpStatus.CREATED)
        public ResponseEntity<?> insert( @Valid @RequestBody Categoria categoria, HttpServletResponse response ) {
            /*
            * if ( result.hasErrors() ) { Map<String, String> errors = new HashMap<>();
            * 
            * for ( FieldError error : result.getFieldErrors()) { errors.put(
            * error.getField(), error.getDefaultMessage()); }
            * 
            * return ResponseEntity.unprocessableEntity().body(errors); }
            */		
            try {
                Categoria categoriaSalva = categoriaRepository.save(categoria);

                URI uri = ServletUriComponentsBuilder.fromCurrentRequestUri().path("/{codigo}")
                        .buildAndExpand(categoriaSalva.getCodigo()).toUri();

                response.setHeader("Location", uri.toASCIIString());

                return ResponseEntity.created(uri).body(categoriaSalva);
            } catch (Exception e) {
                // TODO Auto-generated catch block
                return ResponseEntity.badRequest().body(e.getMessage());
            }

        }

        . Com a inclusão das permissões através das roles cadastrada nas permissões de cada cliente, não será mais 
            necessário a configuração feita no método ResourceServerConfig.configure( HttpSecurity http ) que realiza
            a autorização de acesso para todos ao contexto ("/categoria/**) neste caso podemos eliminar essa linha.

            http.authorizeRequests()
                    .antMatchers("/categoria/**").permitAll()

        . Deixe esse método como abaixo:

            http.authorizeRequests()
                    .antMatchers("/h2/**").permitAll()
                    .antMatchers("/h2-console/**").permitAll()
                    .anyRequest().authenticated().and()
                    .headers().frameOptions().sameOrigin().and()
                    .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
                    .csrf().ignoringAntMatchers("/h2-console/**").and()
                    .csrf().disable();

        . Levante a aplicação; acesso o Postman; altere as configurações do  localhost:8080/oauth/token no body deixando como abaixo:

            username : maria@algamoney.com
            password : maria

        . Transporte o token obtido para a consulta de categoria e execute a query.

        . Para trabalhar com os escopos "read" e "write" temos que alterar na classe AuthorizationServerConfig no metodo
            configure( ClienteDetailsServiceConfigurer clients) o objeto clients.


            ...

            @Override
            public void configure(ClientDetailsServiceConfigurer clients) throws Exception {
                clients.inMemory()
                        .withClient("angular")
                        .secret("@ngul@r0")
                        .scopes("read", "write")
                        .authorizedGrantTypes("password", "refresh_token")
                        .accessTokenValiditySeconds(1800)
                        .refreshTokenValiditySeconds(3600 * 24)
                    .and()
                        .withClient("mobile")
                        .secret("m0b1l30")
                        .scopes("read")
                        .authorizedGrantTypes("password", "refresh_token")
                        .accessTokenValiditySeconds(1800)
                        .refreshTokenValiditySeconds(3600 * 24);
            }

            ...


            . Observe que foi incluído mais um and() para o cliente mobile e ele só tem o escopo "read" que serão utilizados
                nos métodos das classes resources na anotação @PreAuthorize:

                ...

                @GetMapping
                @PreAuthorize("hasAuthority('ROLE_PESQUISAR_CATEGORIA') and #oauth2.hasScope('read')")
                public  ResponseEntity<?> findAll() {

                    List<Categoria> categorias = null;

                    try {
                        categorias = categoriaRepository.findAll();

                        return ResponseEntity.ok(categorias);
                    } catch (Exception e) {
                        return ResponseEntity.badRequest().body(e.getMessage());
                    }

                }

                @GetMapping(path = "{codigo}")
                @PreAuthorize("hasAuthority('ROLE_PESQUISAR_CATEGORIA') and #oauth2.hasScope('read')")
                public ResponseEntity<?> findById(@PathVariable Long codigo, HttpServletResponse response) {

                    try {
                        Categoria categoria = categoriaRepository.findById(codigo).get();
                
                        URI uri = ServletUriComponentsBuilder.fromCurrentRequestUri().path("")
                                .buildAndExpand(categoria.getCodigo()).toUri();

                        response.setHeader("Location", uri.toASCIIString());

                        return ResponseEntity.ok( categoria );
                    }catch( Exception e) {
                        return ResponseEntity.notFound().build();
                    }
                    
                    
                }

                @PostMapping
                @PreAuthorize("hasAuthority('ROLE_CADASTRAR_CATEGORIA') and #oauth2.hasScope('write')")
                // @ResponseStatus( HttpStatus.CREATED)
                public ResponseEntity<?> insert( @Valid @RequestBody Categoria categoria, HttpServletResponse response ) {
                    /*
                    * if ( result.hasErrors() ) { Map<String, String> errors = new HashMap<>();
                    * 
                    * for ( FieldError error : result.getFieldErrors()) { errors.put(
                    * error.getField(), error.getDefaultMessage()); }
                    * 
                    * return ResponseEntity.unprocessableEntity().body(errors); }
                    */		
                    try {
                        Categoria categoriaSalva = categoriaRepository.save(categoria);

                        URI uri = ServletUriComponentsBuilder.fromCurrentRequestUri().path("/{codigo}")
                                .buildAndExpand(categoriaSalva.getCodigo()).toUri();

                        response.setHeader("Location", uri.toASCIIString());

                        return ResponseEntity.created(uri).body(categoriaSalva);
                    } catch (Exception e) {
                        // TODO Auto-generated catch block
                        return ResponseEntity.badRequest().body(e.getMessage());
                    }

                }

                ...

        . Acesse no Postman a URL localhost:8080/oauth/token:
            
            Authorization; altere o username para mobile e password para m0b1l30

            Body altere o client para mobile, username para admin@algamoney.com e password para admin

        . Execute a URL e transporte o token obtido para a consulta com método POST de categoria e execute a query. Dará erro de 
            insuficiencia de acesso.

        . Retorne ao Postman na URL localhost:8080/oauth/token altere o valor de Authorization para o angular:

            Authorization; altere o username para angular e password para @ngul@r0

        . Execute a URL e transporte o token obtido para a consulta  com método POST de categoria e execute a query. Dessa vez não dará
            mais erro pois agora o client angular possui o escopo write.



Auala 06.14. Implementando o logout
-----------------------------------

    . Insira a classe abaixo no projeto:

        package com.example.algamoneyapi.resource;

        import javax.servlet.http.Cookie;
        import javax.servlet.http.HttpServletRequest;
        import javax.servlet.http.HttpServletResponse;

        import org.springframework.http.HttpStatus;
        import org.springframework.web.bind.annotation.DeleteMapping;
        import org.springframework.web.bind.annotation.RequestMapping;
        import org.springframework.web.bind.annotation.RestController;

        @RestController
        @RequestMapping("/tokens")
        public class TokenResource {

            @DeleteMapping("/revoke")
            public void revoke(HttpServletRequest req, HttpServletResponse resp) {
                Cookie cookie = new Cookie("refreshToken", null);
                cookie.setHttpOnly(true);
                cookie.setSecure(false); // TODO: Em producao sera true
                cookie.setPath(req.getContextPath() + "/oauth/token");
                cookie.setMaxAge(0);
                
                resp.addCookie(cookie);
                resp.setStatus(HttpStatus.NO_CONTENT.value());
            }
            
        }

    . Faça a solicitação de um access token com a url abaixo:

        localhost:8080/oauth/token

        client : angular
        username : admin@algamoney.com
        password : admin
        grant_type : password

    . Observe que veio o Cookie logo ao lado da resposta

    . Crie no Postman uma nova solicitação com método DELETE:

        localhost:8080/tokens/revoke

        . Adicione o access_token obtido do passo anterior na aba Headers com o parâmetro abaixo: 

            Authorization     : Bearer [access_token]

        . Execute a url e observe que não veio o Cookie logo ao lado da resposta




Aula 07.01. Implementando projeção de lançamento        
------------------------------------------------

    . Implemente a classe model abaixo:

        package com.example.algamoney.api.repository.projection;

        import java.math.BigDecimal;
        import java.time.LocalDate;

        import com.example.algamoney.api.model.TipoLancamento;

        public class ResumoLancamento {

            private Long codigo;
            private String descricao;
            private LocalDate dataVencimento;
            private LocalDate dataPagamento;
            private BigDecimal valor;
            private TipoLancamento tipo;
            private String categoria;
            private String pessoa;
            
            public ResumoLancamento(Long codigo, String descricao, LocalDate dataVencimento, LocalDate dataPagamento,
                    BigDecimal valor, TipoLancamento tipo, String categoria, String pessoa) {
                this.codigo = codigo;
                this.descricao = descricao;
                this.dataVencimento = dataVencimento;
                this.dataPagamento = dataPagamento;
                this.valor = valor;
                this.tipo = tipo;
                this.categoria = categoria;
                this.pessoa = pessoa;
            }

            public Long getCodigo() {
                return codigo;
            }

            public void setCodigo(Long codigo) {
                this.codigo = codigo;
            }

            public String getDescricao() {
                return descricao;
            }

            public void setDescricao(String descricao) {
                this.descricao = descricao;
            }

            public LocalDate getDataVencimento() {
                return dataVencimento;
            }

            public void setDataVencimento(LocalDate dataVencimento) {
                this.dataVencimento = dataVencimento;
            }

            public LocalDate getDataPagamento() {
                return dataPagamento;
            }

            public void setDataPagamento(LocalDate dataPagamento) {
                this.dataPagamento = dataPagamento;
            }

            public BigDecimal getValor() {
                return valor;
            }

            public void setValor(BigDecimal valor) {
                this.valor = valor;
            }

            public TipoLancamento getTipo() {
                return tipo;
            }

            public void setTipo(TipoLancamento tipo) {
                this.tipo = tipo;
            }

            public String getCategoria() {
                return categoria;
            }

            public void setCategoria(String categoria) {
                this.categoria = categoria;
            }

            public String getPessoa() {
                return pessoa;
            }

            public void setPessoa(String pessoa) {
                this.pessoa = pessoa;
            }

        }

    . Adicione na interface LancamentoRepositoryQuery o método resumir abaixo:

        ...
        public interface LancamentoRepositoryQuery {

            ...
            public Page<ResumoLancamento> resumir(LancamentoFilter lancamentoFilter, Pageable pageable);

        }    

    . Inserir o método abaixo na classe LancamentoRepositoryImpl

        ...
        @Override
        public Page<ResumoLancamento> resumir(LancamentoFilter lancamentoFilter, Pageable pageable) {
            CriteriaBuilder builder = manager.getCriteriaBuilder();
            CriteriaQuery<ResumoLancamento> criteria = builder.createQuery(ResumoLancamento.class);
            Root<Lancamento> root = criteria.from(Lancamento.class);
            
            criteria.select(builder.construct(ResumoLancamento.class
                    , root.get(Lancamento_.codigo), root.get(Lancamento_.descricao)
                    , root.get(Lancamento_.dataVencimento), root.get(Lancamento_.dataPagamento)
                    , root.get(Lancamento_.valor), root.get(Lancamento_.tipo)
                    , root.get(Lancamento_.categoria).get(Categoria_.nome)
                    , root.get(Lancamento_.pessoa).get(Pessoa_.nome)));
            
            Predicate[] predicates = criarRestricoes(lancamentoFilter, builder, root);
            criteria.where(predicates);
            
            TypedQuery<ResumoLancamento> query = manager.createQuery(criteria);
            adicionarRestricoesDePaginacao(query, pageable);
            
            return new PageImpl<>(query.getResultList(), pageable, total(lancamentoFilter));
        }
        ...

    . Será modificado a assinatura do método adicionarRestricoesDePaginacao 

        de
        --
        private void adicionarRestricoesDePaginacao(TypedQuery<Lancamento> query, Pageable pageable)
                                                    ----------------------
        para
        ----
        private void adicionarRestricoesDePaginacao(TypedQuery<?> query, Pageable pageable) {
                                                    -------------

    . Insira o método abaixo na classe LancamentoResource:

        ...
        @GetMapping(params = "resumo")
        @PreAuthorize("hasAuthority('ROLE_PESQUISAR_LANCAMENTO') and #oauth2.hasScope('read')")
        public Page<ResumoLancamento> resumir(LancamentoFilter lancamentoFilter, Pageable pageable) {
            return lancamentoRepository.resumir(lancamentoFilter, pageable);
        }    
        ...

    . Observe que teremos dois métodos GET. A diferença de qual chamar será o parâmetro "resumo" se houver 
        chamará o método "resumir", caso contrário chamará o método "pesquisar".

    . Levante a aplicação e solicite um access token com a url abaixo:

        localhost:8080/oauth/token

        client : angular
        username : admin@algamoney.com
        password : admin
        grant_type : password    

    . Crie uma nova URL no Postman 

        localhost:8080/lancamentos?resumo

        Header.Authorization : Bearer [Token obtido no item anterior]

    . Altere a URL acima colocando o filtro descrição para ver se continua funcionando:

        localhost:8080/lancamentos?resumo&descricao=Salário


https://www.netsurfingzone.com/jpa/spring-data-jpa-jpql-and-native-query-example/

https://github.com/steppat/modelmapper
http://modelmapper.org/getting-started/#setting-up




Complemento da Aula 07.01. Implementando projeção de lançamento ( com biblioteca ModelMapper )
---------------------------------------------------------------

    . Inclua a dependência abaixo no pom.xml

		<dependency>
			<groupId>org.modelmapper</groupId>
			<artifactId>modelmapper</artifactId>
			<version>2.3.9</version>
		</dependency>

    . Inclua o objeto DTO abaixo no projeto:

        package com.example.algamoneyapi.model;

        import java.math.BigDecimal;
        import java.time.LocalDate;

        public class LancamentoDTO {

            private Long codigo;
            private String descricao;
            private LocalDate dataVencimento;
            private LocalDate dataPagamento;
            private BigDecimal valor;
            private String categoriaNome;
            private String pessoaNome;

            public Long getCodigo() {
                return codigo;
            }

            public void setCodigo(Long codigo) {
                this.codigo = codigo;
            }

            public String getDescricao() {
                return descricao;
            }

            public void setDescricao(String descricao) {
                this.descricao = descricao;
            }

            public LocalDate getDataVencimento() {
                return dataVencimento;
            }

            public void setDataVencimento(LocalDate dataVencimento) {
                this.dataVencimento = dataVencimento;
            }

            public LocalDate getDataPagamento() {
                return dataPagamento;
            }

            public void setDataPagamento(LocalDate dataPagamento) {
                this.dataPagamento = dataPagamento;
            }

            public BigDecimal getValor() {
                return valor;
            }

            public void setValor(BigDecimal valor) {
                this.valor = valor;
            }

            public String getCategoriaNome() {
                return categoriaNome;
            }

            public void setCategoriaNome(String categoriaNome) {
                this.categoriaNome = categoriaNome;
            }

            public String getPessoaNome() {
                return pessoaNome;
            }

            public void setPessoaNome(String pessoaNome) {
                this.pessoaNome = pessoaNome;
            }

            public LancamentoDTO() {
                super();
            }

            public LancamentoDTO(Long codigo, String descricao,
                                LocalDate dataVencimento, LocalDate dataPagamento,
                                BigDecimal valor, String categoriaNome,
                                String pessoaNome) {
                this.codigo = codigo;
                this.descricao = descricao;
                this.dataVencimento = dataVencimento;
                this.dataPagamento = dataPagamento;
                this.valor = valor;
                this.categoriaNome = categoriaNome;
                this.pessoaNome = pessoaNome;
            }

            @Override
            public String toString() {
                return "LancamentoDTO{" +
                        "codigo=" + codigo +
                        ", descricao='" + descricao + '\'' +
                        ", dataVencimento=" + dataVencimento +
                        ", dataPagamento=" + dataPagamento +
                        ", valor=" + valor +
                        ", categoriaNome='" + categoriaNome + '\'' +
                        ", pessoaNome='" + pessoaNome + '\'' +
                        '}';
            }
        }

    . Importante: Existe um padrão na nomenclatura das propriedades que deve ser seguindo.
                    O nome da propriedade categoriaNome e pessoaNome foram colocados dessa
                    forma para atender a padronização pessoa.nome e categoria.nome que é utilizado
                    na classe pai Lancamento, que contêm as propriedade:

                    private Categoria categoria
                    private Pessoa pessoa

                    O ModelMapper utiliza esse padrão para fazer o mapper de uma classe para outra.
                    Mais detalhes acesse o link: http://modelmapper.org/getting-started/#setting-up

    . Crie o método abaixo na classe LancamentoResource:

        @GetMapping(params="resumo")
        public ResponseEntity<?> resumo(){
            List<Lancamento> lancamentos = lancamentoRepository.findAll();

            List<LancamentoDTO> lancamentosDTO = new ArrayList<>();

            ModelMapper modelMapper = new ModelMapper();

            lancamentos.forEach(lancamento -> lancamentosDTO.add( modelMapper.map( lancamento, LancamentoDTO.class) ) );

            return ResponseEntity.ok(lancamentosDTO);
        }


    . Levante a aplicação e solicite um access token com a url abaixo:

        localhost:8080/oauth/token

        client : angular
        username : admin@algamoney.com
        password : admin
        grant_type : password    

    . Crie uma nova URL no Postman 

        localhost:8080/lancamentos?resumo

        Header.Authorization : Bearer [Token obtido no item anterior]



TODO: ver como funcionaria a páginação e o filtro para esse método



Aula 07.02. Profiles do Spring
------------------------------

    . Atenção: Foi verificado que o método da classe "AlgamoneyApiProperty.Seguranca.isEnableHttps" que consta no curso, 
        não funciona. Este método deve ser alterado para "AlgamoneyApiProperty.Seguranca.getEnableHttps", caso contrário
        as configurações nos arquivos *.properties não funcionará. É obrigatório que qq parâmetro incluido no 
        application*.properties deverá ter um correspondente com getter/setter na classe de propriedade, sem isso o conteúdo
        não é atribuido ao objeto injetado.

    . Alterar algumas propriedades das classes que estão "hardcode". A primeira seria na classe TokenResource:


        @RestController
        @RequestMapping("/tokens")
        public class TokenResource {

            @DeleteMapping("/revoke")
            public void revoke(HttpServletRequest req, HttpServletResponse resp){
                Cookie cookie = new Cookie("refreshToke", null);

                cookie.setHttpOnly(true);
                cookie.setSecure(false);                // TODO: Colocar essa propriedade como configurável para produção e no desenv
                cookie.setPath(req.getContextPath());
                cookie.setMaxAge(0);

                resp.addCookie(cookie);
                resp.setStatus(HttpStatus.NO_CONTENT.value());
            }
        }

        . Iremos alterar a propriedade cookie.setSecure(false). Deixaremos ela como configurável para produção e no desenv


    . Inserir a classe abaixo no projeto:

        package com.example.algamoneyapi.config.property;

        import org.springframework.boot.context.properties.ConfigurationProperties;
        import org.springframework.context.annotation.Profile;
        import org.springframework.context.annotation.PropertySource;
        import org.springframework.stereotype.Component;

        @ConfigurationProperties("algamoney")
        public class AlgamoneyApiProperty {

            private String originPermitida; // = "http://localhost:8000";

            private final Seguranca seguranca = new Seguranca();

            public Seguranca getSeguranca() {
                return seguranca;
            }

            public String getOriginPermitida() {
                return originPermitida;
            }

            public void setOriginPermitida(String originPermitida) {
                this.originPermitida = originPermitida;
            }

            public static class Seguranca {

                private boolean enableHttps;        // O default é false, por isso não é colocado nenhum valor

                public boolean getEnableHttps() {
                    return enableHttps;
                }

                public void setEnableHttps(boolean enableHttps) {
                    this.enableHttps = enableHttps;
                }

            }

        }


    . Para utilizar a anotation @ConfigurationProperties é necessário inserir a dependência abaixo no pom.xml:

        <dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-configuration-processor</artifactId>
			<optional>true</optional>
		</dependency>    

    . Inclua a annotation @EnableConfigurationProperties na classe AlgamoneyApiApplication como abaixo:

        @SpringBootApplication
        @EnableConfigurationProperties(AlgamoneyApiProperty.class)
        public class AlgamoneyApiApplication {

            public static void main(String[] args) {
                SpringApplication.run(AlgamoneyApiApplication.class, args);
            }
            
        }

    . A partir daqui é possível utilizar as propriedades da classe AlgamoneyApiProperty e da inner class Seguranca
        dentro do arquivo application.properties. Vá nesse último arquivo e tente colocar a propriedade abaixo para
        verificar:

        algamoney.seguranca.enable-htpps=false

    . Não vamos deixar essa propriedade no arquivo application.properties, ao invés disso iremos criar um novo arquivo
        application-prod.properties e colocar essa propriedade e outras destinadas para a produção:

        algamoney.seguranca.enable-htpps=false

    . Retorne a classe TokenResource e deixe-a como abaixo:

        @RestController
        @RequestMapping("/tokens")
        public class TokenResource {
            
            @Autowired
            private AlgamoneyApiProperty algamoneyApiProperty;

            @DeleteMapping("/revoke")
            public void revoke(HttpServletRequest req, HttpServletResponse resp) {
                Cookie cookie = new Cookie("refreshToken", null);
                cookie.setHttpOnly(true);
                cookie.setSecure(algamoneyApiProperty.getSeguranca().getEnableHttps());
                cookie.setPath(req.getContextPath() + "/oauth/token");
                cookie.setMaxAge(0);
                
                resp.addCookie(cookie);
                resp.setStatus(HttpStatus.NO_CONTENT.value());
            }
            
        }

        . Inclua a propriedade algamoneyApiProperty:

            @Autowired
            private AlgamoneyApiProperty algamoneyApiProperty;

        . Altere a linha do cookie.setSecure como abaixo:

            De

                cookie.setSecure(false);                // TODO: Colocar essa propriedade como configurável para produção e no desenv

            Para

                cookie.setSecure(algamoneyApiProperty.getSeguranca().isEnableHttps());

    . Acesse a classe RefreshTokenPostProcessor e deixe-a como abaixo:
    
        @ControllerAdvice
        public class RefreshTokenPostProcessor implements ResponseBodyAdvice<OAuth2AccessToken> {

            @Autowired
            private AlgamoneyApiProperty algamoneyApiProperty;
            
            @Override
            public boolean supports(MethodParameter returnType, Class<? extends HttpMessageConverter<?>> converterType) {
                return returnType.getMethod().getName().equals("postAccessToken");
            }

            @Override
            public OAuth2AccessToken beforeBodyWrite(OAuth2AccessToken body, MethodParameter returnType,
                    MediaType selectedContentType, Class<? extends HttpMessageConverter<?>> selectedConverterType,
                    ServerHttpRequest request, ServerHttpResponse response) {
                
                HttpServletRequest req = ((ServletServerHttpRequest) request).getServletRequest();
                HttpServletResponse resp = ((ServletServerHttpResponse) response).getServletResponse();
                
                DefaultOAuth2AccessToken token = (DefaultOAuth2AccessToken) body;
                
                String refreshToken = body.getRefreshToken().getValue();
                adicionarRefreshTokenNoCookie(refreshToken, req, resp);
                removerRefreshTokenDoBody(token);
                
                return body;
            }

            private void removerRefreshTokenDoBody(DefaultOAuth2AccessToken token) {
                token.setRefreshToken(null);
            }

            private void adicionarRefreshTokenNoCookie(String refreshToken, HttpServletRequest req, HttpServletResponse resp) {
                Cookie refreshTokenCookie = new Cookie("refreshToken", refreshToken);
                refreshTokenCookie.setHttpOnly(true);
                refreshTokenCookie.setSecure(algamoneyApiProperty.getSeguranca().isEnableHttps());
                refreshTokenCookie.setPath(req.getContextPath() + "/oauth/token");
                refreshTokenCookie.setMaxAge(2592000);
                resp.addCookie(refreshTokenCookie);
            }

        }


        . Inclua a propriedade abaixo na classe acima:

            @Autowired
            private AlgamoneyApiProperty algamoneyApiProperty;

        . Altere a linha abaixo:

            De

                refreshTokenCookie.setSecure(false); // TODO: Mudar para true em producao

            Para

                refreshTokenCookie.setSecure(algamoneyApiProperty.getSeguranca().isEnableHttps());

    . Levante a aplicação e solicite um access token com a url abaixo:

        localhost:8080/oauth/token

        client : angular
        username : admin@algamoney.com
        password : admin
        grant_type : password    

    . Acesse as propriedades da resposta e verifique o conteúdo da propriedade Secure, ela estará como false.

    . Inclua temporariamente a propriedade abaixo no arquivo application.properties, levante novamente a aplicação, 
        solicite um novo access e verifique as propriedades da resposta. Observe que *** NÃO VIRÁ NENHUM COOKIE ***, 
        algo que deverá ocorrer na produção, deixando o cookie invisivel.

        algamoney.seguranca.enable-htpps=true

        ou

        algamoney.seguranca.enableHtpps=true


    . Apague a propriedade acima do arquivo application.properties

    . Altere a propriedade abaixo do arquivo application-prod.properties para:
    
        algamoney.seguranca.enable-htpps=true

    . Levante novamente a aplicação e execute a url abaixo:

        localhost:8080/oauth/token

    . Acesse as propriedades da resposta e verifique o conteúdo da propriedade Secure, ela estará como true.

    . Acesse as propriedades do arquivo application-prod.properties e inclua a propriedade abaixo:

        algamoney.seguranca.enable-https=true

    . Acesse a classe CorsFilter e altere como abaixo:

        @Component
        @Order(Ordered.HIGHEST_PRECEDENCE)
        public class CorsFilter implements Filter {

            @Autowired
            private AlgamoneyApiProperty algamoneyApiProperty;
            
            @Override
            public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain)
                    throws IOException, ServletException {
                
                HttpServletRequest request = (HttpServletRequest) req;
                HttpServletResponse response = (HttpServletResponse) resp;
                
                response.setHeader("Access-Control-Allow-Origin", algamoneyApiProperty.getOriginPermitida());
                response.setHeader("Access-Control-Allow-Credentials", "true");
                
                if ("OPTIONS".equals(request.getMethod()) && algamoneyApiProperty.getOriginPermitida().equals(request.getHeader("Origin"))) {
                    response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, PUT, OPTIONS");
                    response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type, Accept");
                    response.setHeader("Access-Control-Max-Age", "3600");
                    
                    response.setStatus(HttpServletResponse.SC_OK);
                } else {
                    chain.doFilter(req, resp);
                }
                
            }
            
            @Override
            public void destroy() {
            }

            @Override
            public void init(FilterConfig arg0) throws ServletException {
            }

        }


        . Altere a linha abaixo:

            De

                private String originPermitida = "http://localhost:8000"; // TODO: Configurar para diferentes ambientes

            Para 

                @Autowired
                private AlgamoneyApiProperty algamoneyApiProperty;

        . Altere as linhas abaixo:

            De

        		response.setHeader("Access-Control-Allow-Origin", originPermitida);

            Para

                response.setHeader("Access-Control-Allow-Origin", algamoneyApiProperty.getOriginPermitida());            


            De

                if ("OPTIONS".equals(request.getMethod()) && originPermitida.equals(request.getHeader("Origin"))) {...
            
            Para

                if ("OPTIONS".equals(request.getMethod()) && algamoneyApiProperty.getOriginPermitida().equals(request.getHeader("Origin"))) {

    
    . Importante: As alterações feitas na classe CorsFilter só serão possíveis de testar quando o projeto for para num ambiente de produção:
    

Aula 07.05. Nome do usuário no token JWT
----------------------------------------

    . Caso ocorra necessidade de colocar mais informações no Token, podemos usar a técnica dos passos abaixo.

    . Acesse a classe AuthorizationServerConfig e faça as alterações no método config:

        De

            @Override
            public void configure(AuthorizationServerEndpointsConfigurer endpoints) throws Exception {
                endpoints
                        .tokenStore(tokenStore())
                        .accessTokenConverter(accessTokenConverter())       // Linha excluída
                        .reuseRefreshTokens(false)
                        .authenticationManager(authenticationManager);
            }


        Para

            @Override
            public void configure(AuthorizationServerEndpointsConfigurer endpoints) throws Exception {
                TokenEnhancerChain tokenEnhancerChain = new TokenEnhancerChain();                               // Linha incluída
                tokenEnhancerChain.setTokenEnhancers(Arrays.asList(tokenEnhancer(), accessTokenConverter()));   // Linha incluída
                
                endpoints
                    .tokenStore(tokenStore())
                    .tokenEnhancer(tokenEnhancerChain)                  // Linha alterada
                    .reuseRefreshTokens(false)
                    .authenticationManager(authenticationManager);
            }        

        . Foram incluídos as linhas:

            TokenEnhancerChain tokenEnhancerChain = new TokenEnhancerChain();
            tokenEnhancerChain.setTokenEnhancers(Arrays.asList(tokenEnhancer(), accessTokenConverter()));

                endpoints
                    ...
                    .tokenEnhancer(tokenEnhancerChain)                  // Linha alterada
                    ...


    . Acrescente o método abaixo na classe AuthorizationServerConfig:

        @Bean
        public TokenEnhancer tokenEnhancer() {
            return new CustomTokenEnhancer();
        }
	    
    . Crie a classe abaixo no projeto, responsável por incrementar a informação no token:

        package com.example.algamoneyapi.config.token;

        import java.util.HashMap;
        import java.util.Map;

        import org.springframework.security.oauth2.common.DefaultOAuth2AccessToken;
        import org.springframework.security.oauth2.common.OAuth2AccessToken;
        import org.springframework.security.oauth2.provider.OAuth2Authentication;
        import org.springframework.security.oauth2.provider.token.TokenEnhancer;

        import com.example.algamoneyapi.security.UsuarioSistema;

        public class CustomTokenEnhancer implements TokenEnhancer {

            @Override
            public OAuth2AccessToken enhance(OAuth2AccessToken accessToken, OAuth2Authentication authentication) {
                UsuarioSistema usuarioSistema = (UsuarioSistema) authentication.getPrincipal();
                
                Map<String, Object> addInfo = new HashMap<>();
                addInfo.put("nome", usuarioSistema.getUsuario().getNome());
                
                ((DefaultOAuth2AccessToken) accessToken).setAdditionalInformation(addInfo);
                return accessToken;
            }

        }

    . Altere o retorno do métoto AppUserDetailsService.loadUserByUsername como abaixo:

        De

            @Override
            public UserDetails loadUserByUsername(String email) throws UsernameNotFoundException {
                Optional<Usuario> usuarioOptional = usuarioRepository.findByEmail(email);
                Usuario usuario = usuarioOptional.orElseThrow(() -> new UsernameNotFoundException("Usuário e/ou senha incorretos"));
                return new User(email, usuario.getSenha(), getPermissoes(usuario));                                                     // Linha alterada
            }

        Para

            @Override
            public UserDetails loadUserByUsername(String email) throws UsernameNotFoundException {
                Optional<Usuario> usuarioOptional = usuarioRepository.findByEmail(email);
                Usuario usuario = usuarioOptional.orElseThrow(() -> new UsernameNotFoundException("Usuário e/ou senha incorretos"));
                return new UsuarioSistema(usuario, getPermissoes(usuario));                                                             // Linha alterada
            }

    . Inclua a classe abaixo no sistema:

    
        package com.example.algamoneyapi.security;

        import java.util.Collection;

        import org.springframework.security.core.GrantedAuthority;
        import org.springframework.security.core.userdetails.User;

        import com.example.algamoneyapi.model.Usuario;

        public class UsuarioSistema extends User {

            private static final long serialVersionUID = 1L;

            private Usuario usuario;

            public UsuarioSistema(Usuario usuario, Collection<? extends GrantedAuthority> authorities) {
                super(usuario.getEmail(), usuario.getSenha(), authorities);
                this.usuario = usuario;
            }

            public Usuario getUsuario() {
                return usuario;
            }

        }

    . Levante a aplicação e solicite um access token com a url abaixo:

        localhost:8080/oauth/token

        client : angular
        username : admin@algamoney.com
        password : admin
        grant_type : password    

    . Transporte o token gerado, acesse o site https://jwt.io, cole o conteúdo no campo "Encoded" e verifique se 
        o valor "nome" aparece nos itens do Payload do token no campo ao lado do "Encoded".


Aula 07.06. Alternando OAuth 2 e Basic Security com profiles
------------------------------------------------------------

    . Se precisar agilizar a troca do tipo de segurança de OAuth2 para Basic faça as alterações abaixo.

    . Inclua a classe abaixo no projeto:

        package com.example.algamoneyapi.config;

        import org.springframework.beans.factory.annotation.Autowired;
        import org.springframework.context.annotation.Bean;
        import org.springframework.context.annotation.Profile;
        import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
        import org.springframework.security.config.annotation.web.builders.HttpSecurity;
        import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
        import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
        import org.springframework.security.config.http.SessionCreationPolicy;
        import org.springframework.security.core.userdetails.UserDetailsService;
        import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
        import org.springframework.security.crypto.password.PasswordEncoder;

        @Profile("basic-security")
        @EnableWebSecurity
        public class BasicSecurityConfig extends WebSecurityConfigurerAdapter {

            @Autowired
            private UserDetailsService userDetailsService;
            
            @Override
            protected void configure(AuthenticationManagerBuilder auth) throws Exception {
                auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());
            }
            
            @Bean
            public PasswordEncoder passwordEncoder() {
                return new BCryptPasswordEncoder();
            }
            
            @Override
            protected void configure(HttpSecurity http) throws Exception {
                http.authorizeRequests()
                        .antMatchers("/h2/**").permitAll()
                        .antMatchers("/h2-console/**").permitAll()
                        .anyRequest().authenticated().and()
                        .headers().frameOptions().sameOrigin().and()
                        .httpBasic()
                        .and()
                        .sessionManagement()
                        .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                        .and()
                        .csrf().ignoringAntMatchers("/h2-console/**").and()
                        .csrf().ignoringAntMatchers("/h2/**").and()
                        .csrf().disable();
            }
            
        }

    . Através do @Profile é possível fazer essa mudança.

    . Na classe AuthorizationServerConfig coloque a annotation @Profile como abaixo:

        ...
        @Profile("oauth-security")      // Linha incluida
        @Configuration
        @EnableAuthorizationServer
        public class AuthorizationServerConfig extends AuthorizationServerConfigurerAdapter {
        ...

    . Na classe ResourceServerConfig coloque a annotation @Profile como abaixo:

        @Profile("oauth-security")
        @Configuration
        @EnableWebSecurity
        @EnableResourceServer
        @EnableGlobalMethodSecurity( prePostEnabled=true)
        public class ResourceServerConfig extends ResourceServerConfigurerAdapter {
        ...

    . Na classe OAuthSecurityConfig coloque a annotation @Profile como abaixo:
    
        @Profile("oauth-security")      // Linha incluida
        @Configuration
        @EnableWebSecurity
        public class OAuthSecurityConfig extends WebSecurityConfigurerAdapter {
        ...

    . Para configurar qual tipo de token queremos basta configurar no application.properties

        spring.profiles.active=oauth-security

    . Levante a aplicação e solicite um access token com a url abaixo no Postman:

        localhost:8080/oauth/token

        client : angular
        username : admin@algamoney.com
        password : admin
        grant_type : password    

    . Crie uma nova URL no Postman 

        localhost:8080/lancamentos?resumo

        Authoritation.Type : No Auth

        Header.Authorization : Bearer [Token obtido no item anterior]

    . Pare a aplicação.

    . Altere o tipo do token no application.properties como abaixo:

        spring.profiles.active=basic-security

    . Levante a aplicação e no Postman crie uma nova URL como abaixo:

        Method : GET
        URL : http://localhost:8080/categoria
        Authoritation.Type : Basic Auth
        Authorization.Username : admin@algamoney.com
        Authorization.Password : admin

    . Execute a URL e veja se a resposta veio com sucesso:

    
    * Rever a aula e tentar descobrir porque não estou conseguindo acessar pelo Basic Auth como no passo anterior
    * A classe OAuthSecurityConfig não está presente no projeto da Algaworks, para retirar ela do meu projeto
        será preciso copiar o método "authenticationManager" para outra classe
        * Rever a aula para encontrar onde foi colocada e onde foi retirada.
    * No projeto da Algaworks a classe ResourceServerConfig está anotada com @Profile("oauth-security") 
        rever a aula e tentar descobrir se isto foi realmente inserido 
        * O método "passwordEncoder" desta classe está sem a anotação @Bean, comparar com o que está no site 
            da algaworks.



Aula 8.1 a 8.6
--------------

    . nodejs - Ambiente de interpretação do javascript

    . npm - Instalador de bibliotecas javascript

    . Instalação do Nodejs

        . No Linux

            # Caso não tenha o "curl" instalado
            # sudo apt-get install curl python-software-properties
            curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
            sudo apt-get install -y nodejs
            node -v
            npm -v

            ou

            sudo apt-get install nodejs
            sudo apt-get install npm

        . No Windows

            . Acesse o site do Node, baixe e instale a versão 11, não pode ser a versão atual:

                https://nodejs.org/download/release/v11.6.0/            

            . Talvez seja necessário instalar o Python 2.7, mas não instale nesse primeiro momento, somente quando formos instalar o Angular saberemos.


    . Instalação do Plugin de debug no VSCode:

        . Chrome (Verificar se nas versões recentes do VSCode ele já vem instalado automaticamente, tente fazer os procedimentos abaixo
                    sem instalar o plugin para ver se dá certo )

            // https://www.youtube.com/watch?v=Lczqac3paNM    

            . Pré requisito que o navegador Chrome esteja instalado no sistema operacional.

            . Acesse o projeto, vá para a área de Debug, acione a criação do "launch.json" e informe o ambiente "Chrome".

            . Acesse o arquivo launch.json e altere o conteúdo pelo abaixo:

                {
                    // Use o IntelliSense para saber mais sobre os atributos possíveis.
                    // Focalizar para exibir as descrições dos atributos existentes.
                    // Para obter mais informações, acesse: https://go.microsoft.com/fwlink/?linkid=830387
                    "version": "0.2.0",
                    "configurations": [
                        {
                            "name": "Debug Angular",
                            "url": "http://localhost:4200",
                            "webRoot": "${workspaceFolder}"
                        }

                    ]
                }

            . Acesse o terminal para levantar o projeto 
            
                $ ng serve
            
            . No VSCode acesse a página principal.
            
            . Na área de debug de o "play" no debug.

            . No navegador vá até a página onde você que depurar e faça as ações para isso.

        . Angular 2, 4 and upcoming latest TypeScript HTML Snippets

            . Dentro de algum template digite ngFor e tecle tab.

        . tslint - Plugin para apontar ausências no padrão de programação, deixando em vermelhos os pontos que não estão
                    em conformidade. 

            . Ao digitar Ctrl + Shift + P e digitar "tslint", surge vários comandos especificos do plugin

            . Acrescente o trecho abaixo no arquivo launch.json para habilitar o plugin:

                // Dentro do array "configurations"
                "editor.codeActionsOnSave": {
                    "source.fixAll.tslint": true
                }

        . editorconfig for VS Code - Plugin destinado a manter o padrão de codificação

            . As configurações dos padrões estão no arquivo .editorconfig


        TESTAR

        . Angular Snippets (version 12) - Plugin para ajudar na implementação dos componentes do angular através de templates de código.



Aula 8.7. Instalando e Criando um projeto angular CLI
-----------------------------------------------------

    . Acesse a URL https://angular.io/cli para ter acesso a documentação do Angular.

    . Para instalar o Angular na sua máquina execute o comando abaixo:

        # Utilize a linha abaixo para manter compatibilidade com o curso
        sudo npm install -g @angular/cli@1.1.2

        ╔════════════════════════════╦════════════════════════════╗
        ║ Angular-CLI version        ║ Angular version            ║
        ╠════════════════════════════╬════════════════════════════╣
        ║ angular-cli@0.1.0          ║ Angular 2                  ║
        ╠════════════════════════════╬════════════════════════════╣
        ║ @angular/cli@1.1.0         ║ Angular 4.0.0              ║
        ╠════════════════════════════╬════════════════════════════╣
        ║ @angular/cli@1.4.10        ║ Angular 4.2.4              ║
        ╠════════════════════════════╬════════════════════════════╣
        ║ @angular/cli@1.5.0         ║ Angular 4.4                ║
        ╠════════════════════════════╬════════════════════════════╣
        ║ @angular/cli@1.7.4         ║ Angular 5.2.0              ║
        ╠════════════════════════════╬════════════════════════════╣
        ║ @angular/cli@6.2.8         ║ Angular 6.1.0              ║
        ╠════════════════════════════╬════════════════════════════╣
        ║ @angular/cli@7.3.9         ║ Angular 7.2.0              ║
        ╚════════════════════════════╩════════════════════════════╝

        ou
        
        # sudo npm install -g @angular/cli


    . Para desinstalar o Angular

        # sudo npm uninstall -g @angular/cli

        # sudo npm cache clean --force

    . Para atualizar:

        # sudo npm install --save-dev @angular/cli@latest    

    . Crie um projeto com os comandos abaixo:

        ng new helloworld
        cd helloworld/
        ng serve --open
        
    . Acesse o VSCode e instale as extensões abaixo:

        Angular Extension Pack 
        Material Icon

    . Instalação no Windows 10

        . Para a versão do curso do Angular 4 nos testes o que funcionou foi o comando abaixo:

            npm install -g @angular/cli@1.1.2

        . Talvez seja necessário instalar o Python 2.7, caso dê erro na instalação do Angular.


Aula 8.8. Abrindo o projeto no VSCode
-------------------------------------

// Estrutura de pastas
https://imasters.com.br/desenvolvimento/angular-cli-scaffold

https://www.devmedia.com.br/angular-cli-como-criar-e-executar-um-projeto-angular/38246


    . Estrutura de pastas dos projetos Angular:

        +----e2e
        +----node_modules
        +----src
            +----app
                +----app.component.css
                +----app.component.html
                +----app.component.spec.ts
                +----app.component.ts
                +----app.module.ts
            +----assets
            +----environments
            +----index.html
            +----main.ts
        +----.angular-cli.json


        Pasta	            Uso
        -----               ---

        e2e	                Testes end-to-end usando o Protractor.
        node_modules	    Dependências do Node.JS necessárias no projeto.
        src/app             Encontram-se todos os arquivos do projeto, como arquivos referentes aos 
                            componentes, diretivas, filtros e módulos da aplicação
        src/assets	        Recursos externos do projeto, como CSS, imagens, bibliotecas JavaScript, etc.
        src/environments    Configuração dos ambientes da aplicação (desenvolvimento, produção, etc).


    . Arquivos da pasta src/app:

        . app.component.css: Arquivo responsável pelo estilo do nosso módulo. Com o Angular nós trabalhamos 
          com os estilos separados para cada componente, assim conseguimos ter um desacoplamento de estilos. 
          Nesse exemplo nós criamos um projeto com a extensão .css, mas também temos a possibilidade de 
          trabalhar com arquivos Sass. Para que possamos alterar, basta executar o comando ng set 
          defaults.styleExt scss, ele irá configurar para que os próximos componentes sejam criados 
          com a extensão do .scss.

        . app.component.html: Arquivo HTML do nosso componente App, segue o mesmo pensamento que os arquivos de 
          estilo.

        . app.component.spec.ts: Arquivo de teste do nosso componente.

        . app.component.ts: Pensando em uma arquitetura MVC, esse arquivo teria as mesmas responsabilidades das 
          nossas Controllers.

        . app.module.ts: O Angular é um framework modular, ele precisa de um ou mais módulos para que possamos 
          gerenciar os nossos componentes, esse módulo acaba sendo um default, mas podemos criar outros modules e 
          chamar eles dentro dele.

    . Arquivos da pasta src:

        . index.html: Esse seria o nosso arquivo root, dentro dele rodamos a nossa SPA (Single Page Application).

        . main.ts: Esse é o arquivo principal da nossa Solution. Ele vem definido dentro do nosso arquivo angular-cli.json,
          esse seria o bootstrap da nossa aplicação.

        . polyfills.ts: Esse arquivo funciona como um tradutor. Ex.: Nós precisamos utilizar algo novo do ES6, 
          mas os nossos navegadores só conseguem entender o ES5, ele irá interpretar e passar o código corretamente 
          para os nossos navegadores.

        . styles.css: Como todos os nossos componentes tem o seu próprio arquivo .css ou .scss, nós podemos 
          utilizar esse arquivo para criar algo global como variáveis para nossa aplicação.

        . tsconfig.app.json e tsconfig.spec.json: são os nossos arquivos de configuração do TypeScript.

        . typings.d.ts: Nesse arquivo nós podemos definir tipos para o typescript. Ex.: A utilização de um require.

    . Pasta raiz do projeto:

        . .gitignore: Arquivo do git que utilizamos para o gerenciamento dos arquivos que serão ignorados no momento do 
          nosso commit.

        . karma.config.js: O Karma é uma biblioteca utilizada para criação de testes unitários desenvolvida pela própria 
          equipe do Angular.

        . package.json: Esse arquivo é o responsável por gerenciar as dependências do nosso projeto, quando nós 
          executamos o comando npm install [biblioteca] --save, ele verifica os pacotes que estão dentro desse arquivo e 
          baixa para o nosso diretório node_modules conforme foi visto no passo anterior. O parâmetro --save é para deixar
          registrado a dependência da biblioteca no arquivo package.json.

        . protractor.conf.js: Responsável pela execução dos nossos testes unitários que estão dentro do nosso diretório e2e.

        . README.md: Arquivo Markdown para documentação da nossa aplicação.

        . tsconfig.json: Arquivo de configuração do TypeScript.

        . tslint.json: O tslint fica verificando se estamos escrevendo o nosso código corretamente, ele verifica a 
          sintaxe do nosso projeto em tempo de execução e em caso de algum erro ou warning ele lança uma exception no console.    

    . Acesse o arquivo src/app/app.component.ts e insira a propriedade "nome" como abaixo:

        import { Component } from '@angular/core';

        @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.css']
        })
        export class AppComponent {
            title = 'app';
            nome = 'Marco'
        }


    . Acesse o arquivo src/app/app.component.html e deixe o código como abaixo:

        <h1>
            Olá {{nome}}
        </h1>

    . Abra o terminal e execute o comando:

        ng serve --open


Aula 9.1. Bootstrapping e AppModule
-----------------------------------
 
    . Acesse a pasta do projeto e execute o comando abaixo no prompt do sistema operacional:

        ng serve --open

    . Acesse o código fonte da página web que foi aberta:

        <!doctype html>
        <html lang="en">

        <head>
            <meta charset="utf-8">
            <title>Helloworld</title>
            <base href="/">

            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="icon" type="image/x-icon" href="favicon.ico">
        </head>

        <body>
            <app-root></app-root>
            <script type="text/javascript" src="inline.bundle.js"></script>
            <script type="text/javascript" src="polyfills.bundle.js"></script>
            <script type="text/javascript" src="styles.bundle.js"></script>
            <script type="text/javascript" src="vendor.bundle.js"></script>
            <script type="text/javascript" src="main.bundle.js"></script>
        </body>

        </html>

    . Se compararmos o conteúdo apresentado pela página aberta no navegador, com o arquivo index.html 
        da pasta /src observaremos que o framework do angular inseriu automaticamente algumas linhas dentro da tag
        <body> através da tab <app-root></app-root>

        <!doctype html>
        <html lang="en">
            <head>
                <meta charset="utf-8">
                <title>Helloworld</title>
                <base href="/">

                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="icon" type="image/x-icon" href="favicon.ico">
            </head>
            <body>
                <app-root></app-root>
            </body>
        </html>

    . A substituição da tag <app-root> será feito pelo conteúdo do arquivo src/app/app.component.html que tem o conteúdo:

        <h1>
            Olá {{nome}}!!
        </h1>

    . O "Data Binding" {{nome}} será substuido pelo conteúdo que estiver no arquivo src/app/app.component.ts:


        @Component({
            selector: 'app-root',                   // Associação com a tag <app-root>
            templateUrl: './app.component.html',    // Associação com a página html
            styleUrls: ['./app.component.css']
        })
        export class AppComponent {
            title = 'app';
            nome = 'Marco'      // Conteúdo que será utilizado no data binding {{nome}}
        }


    Sequência de execução do Angular:
    ---------------------------------

    . O inicio do projeto ocorrerá pelo componente src/main.ts:

        import { enableProdMode } from '@angular/core';
        import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

        import { AppModule } from './app/app.module';               // Importação do modulo para iniciar a aplicação
        import { environment } from './environments/environment';

        if (environment.production) {
            enableProdMode();
        }

        platformBrowserDynamic().bootstrapModule(AppModule);    // Aponta e inicia o arquivo src/app/app.module.ts

        . Identificará o arquivo src/app/app.module.ts para iniciar a construção da página principal.

    . O arquivo src/app/app.module.ts faz a associação com os componentes principais da página principal:

        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';

        import { AppComponent } from './app.component';     // abrirá o arquivo src/app/app.component.ts

        @NgModule({
            declarations: [
                AppComponent                    
            ],
            imports: [
                BrowserModule
            ],
            providers: [],
            bootstrap: [AppComponent]       // Componente principal que iniciará a aplicação 
        })

        export class AppModule { }

        . Observe que é feito a importação do arquivo "./app.component" que iniciará a construção da página inicial:

        . Propriedades do arquivo app.module.ts

            . declarations: The components, directives, and pipes that belong to this NgModule.

            . exports: The subset of declarations that should be visible and usable in the component 
                        templates of other NgModules.

            . imports: Other modules whose exported classes are needed by component templates declared in this NgModule.

            . providers: Creators of services that this NgModule contributes to the global collection of services;
                         they become accessible in all parts of the application. (You can also specify providers at the component level.)

            . bootstrap: The main application view, called the root component, which hosts all other application views.
                         Only the root NgModule should set the bootstrap property.

    . A partir da definição do componente principal o framework do angular abrirá o arquivo src/app/app.component.ts

    . O app.component.ts irá vincular com o template src/app/app.component.html

    . Onde criará a página index.html fazendo a substituição da tag <app-root>


Aula 09.02. O que são componentes
---------------------------------

    . Podemos subdivir nossos formulários em componentes e aproveitar a reutilização deles em vários outros
        formulários:

        +-----------------------------------------------------------+ ->  1. CadastroPessoaComponent
        |                                                           |
        |   +---------------------------------------------------+ --|--> 2. NavbarComponent
        |   |                                                   |   |
        |   |   +--------+          +---------+     +---------+ |   |
        |   |   | Salvar |          | Alterar |     | Excluir | |   |
        |   |   +--------+          +---------+     +---------+ |   |
        |   +---------------------------------------------------+   |
        |                                                           |
        |   +---------------------------------------------------+ --|--> 3. PessoaFormComponent
        |   |                                                   |   |
        |   |   Nome :      _________________________________   |   |
        |   |   Telefone:   _________________________________   |   |
        |   |                                                   |   |
        |   +---------------------------------------------------+   |
        |                                                           |
        |   +---------------------------------------------------+ --|--> 4.DataTableComponent
        |   |       |   Nome                    |   Telefone    |   |
        |   +---------------------------------------------------+   |
        |   |   X   |   Jose da Silva           |   999999999   |   |
        |   +---------------------------------------------------+   |
        |   |       |   Maria da Silva          |   888888888   |   |
        |   +---------------------------------------------------+   |
        |   |       |   João da Silva           |   777777777   |   |
        |   +---------------------------------------------------+   |
        |                                                           |
        +-----------------------------------------------------------+


Aula 09.03. Criando um componente
---------------------------------

    Criando um componente manualmente
    ---------------------------------

    . Dentro da pasta "app" do projeto crie outra pasta com o nome "hello".

    . Dentro da pasta "hello" crie o arquivo "hello.component.ts" com o código abaixo:

        import { Component } from '@angular/core';

        @Component({
            selector : 'hello',  
            template : `<h1>Hello {{nome}}</h1>`


        })

        export class HelloComponent{
            nome = 'Marco';
        }


        . O nome da classe "HelloComponent" utiliza a convenção no nome de terminar com a palavra "Component".

        . @Component é um decorador que precisa ser inserido no componente para caracterizá-la como um componente.

        . Para que o framework reconheça a annotation @Component é necessário efetuar a importação da biblioteca 
            do Angular:

            import { Component } from '@angular/core';            

        . Detalhes das demais propriedades do componente:
            
            @Component({
                selector : 'hello',     // Nome da tag/elemento que será usado na página <hello></hello>
                
                templateUrl : './app.component.html'    // Nome do arquivo que será usado para substituir no lugar da tag <hello>
                template : `<h1>Hello {{nome}}</h1>`    // ou, trecho de código para isso. Observe a utilização do acento craseado.

            })

            export class HelloComponent{
                nome = 'Marco';                         // Para ser utilizado no meta dado "template" da annotation @Component
            }

        . Acesse o arquivo src/app/app.component.html e implemente as linhas abaixo:

            <hello></hello>

        . Acesse o arquivo src/app/app.module.ts e implemente a declaração do nosso componente na propriedade "delarations":

            ...
            import { HelloComponent } from './hello/hello.component';

            @NgModule({
                declarations : [
                    AppComponent,
                    HelloComponent
                ]
            })
            ...

        . Carregue a tela principal do projeto e verifique se o nosso componente está funcionando.


    Criando um componente com o AngularCli
    --------------------------------------

    . Abra o terminal, acesse a pasta raiz do projeto e digite o comando abaixo:

        $ ng generate component bem-vindo --spec=false

        # ou

        $ ng g c bem-vindo --spec=false

    . Após a execução do comando acima será criado os arquivos dos componentes na pasta "bem-vindo"

    . Acesse o arquivo src/bem-vindo/bem-vindo.component.ts e deixe o código como abaixo:

        import { Component } from '@angular/core'

        @Component({
            selector : 'app-bem-vindo',
            templateUrl : './bem-vindo.component.html',
            styleUrls : ['./bem-vindo.component.css']
        })

        export class BemVindoComponent{

        }
    
        . Acesse o arquivo src/app/app.component.html e implemente as linhas abaixo:

            <app-bem-vindo></app-bem-vindo>

        . Carregue a tela principal do projeto e verifique se o nosso componente está funcionando.
        
        . Todo trabalho repetitivo de registro já foi feito automaticamente no projeto.



    Modularizando os componentes (Conteúdo Extra)
    ---------------------------------------------

        . Fonte : https://www.youtube.com/watch?v=36kd3uR-hG8&list=PLGxZ4Rq3BOBoSRcKWEdQACbUCNWLczg2G&index=6

        . A classe de modulos central é o arquivo src/app/app.modules.ts. Uma classe normal como qualquer outra, porém 
            decorada/anotada com o @NgModule.

        . A estrutura da classe app.modules.ts:

                    import { BrowserModule } from '@angular/platform-browser';
                    import { NgModule } from '@angular/core';

                    import { AppComponent } from './app.component';

                    @NgModule({
                    declarations: [
                        AppComponent
                    ],
                    imports: [
                        BrowserModule
                    ],
                    providers: [],
                    bootstrap: [AppComponent]
                    })

                    export class AppModule { }

            . Seções do AppModule:

                . Os imports são:

                    // Suporte a navegação pelo Browser
                    import { BrowserModule } from '@angular/platform-browser';

                    // Utilizado devido ao decorate @NgModule
                    import { NgModule } from '@angular/core';

                    import { AppComponent } from './app.component';

                . O decorate/annotation @NgModule:

                    @NgModule({
                    declarations: [
                        AppComponent
                    ],
                    imports: [
                        BrowserModule
                    ],
                    providers: [],
                    bootstrap: [AppComponent]
                    })

                    . Dentro do decorate existe os metadados:

                        declarations :[ ... ] - Local para realizar a declaração dos componentes do nosso projeto.
                                                Cada componente incluido neste metadado deverá ser feito o "import",
                                                Exemplo: Observe o componente HelloWorld

                            ...
                            import { AppComponent } from './app.component';
                            import { HelloComponent } from './hello/hello.component';

                            @NgModule({
                                declarations: [
                                    AppComponent,
                                    HelloComponent
                                ],
                                ...
                            })
                            export class AppModule { }

                        imports: [...] - Importação das biblitecas que iremos utilizar no projeto. Cada componente declarado
                                        neste metadado deverá ser feito o "import".
                                        Exemplo: Observe o BrowserModule

                            import { BrowserModule } from '@angular/platform-browser';
                            ...

                            @NgModule({
                                ...
                                imports: [
                                    BrowserModule
                                ],
                                ...
                            })

                        providers : [...] - Local para configurar os serviços que serão utilizados no projeto, como:
                                            Autenticação, rotas, etc.

                        bootstrap : [AppComponent] - O objeto principal do projeto, que fará a inicialização da aplicação.

                . Declaração da classe:

                    export class AppModule { }

        . A medida que a aplicação for crescendo, o AppModule ficará muito grande. Neste
            caso seria interessante criar "features modules", ou modulos de funcionalidades
            para organizar melhor o nosso projeto.

            . Para criar um módulo de funcionalidade: acesse o terminal, acesse a pasta raiz do projeto e 
                digite o comando abaixo:

                ng g m [Nome do Módulo]

                Exemplo:

                ng g m curso

                . Este comando criará uma pasta com o nome do módulo e um arquivo dentro dela com o nome [nome modulo].module.ts:

                    import { NgModule } from '@angular/core';
                    import { CommonModule } from '@angular/common';

                    @NgModule({
                        imports: [
                            CommonModule
                        ],
                        declarations: []
                    })
                    export class CursoModule { }

                    . A diferença entre o módulo de funcionalidade e o de raiz seria que: o de funcionalidade é bem reduzido e somente
                        importa o "CommonModule".

                . Acesse a pasta raiz do projeto e digite o comando abaixo:

                    ng g c curso --module=curso

                . Acesse o src/app/curso/curso.module.ts e faça a declaração do componente curso:

                    import { NgModule } from '@angular/core';
                    import { CommonModule } from '@angular/common';
                    import { CursoComponent } from './curso.component';

                    @NgModule({
                        imports: [
                            CommonModule
                        ],
                        declarations: [CursoComponent]
                    })
                    export class CursoModule { }

                . Acesse a classe src/app/curso/curso.module.ts e inclua o metadado abaixo no decorate @NgModule:

                    exports : [ 
                                CursoComponent
                              ]

                . Acesse a classe src/app/app.module.ts, insira dentro do metadado "imports" o "CursoModule" e faça o import.

                    ...
                    import { CursoModule } from './curso/curso.module';

                    @NgModule({
                        ...
                        imports: [
                            BrowserModule,
                            CursoModule
                        ],
                        ...
                    })
                    export class AppModule { }

                . Acesse o arquivo src/app/app.component.html e inclua a tag abaixo:

                    <app-curso></app-curso>

                . Execute o projeto e verifique se a modularização deu certo:

                    ng serve --open



Aula 09.04. Instalando a biblioteca CSS do Bootstrap
----------------------------------------------------

    . No prompt do terminal, acesse a pasta raiz do projeto e instale o bootstrap com o comando abaixo:

        $ npm install bootstrap@4.5.3 --save

    . Acesse o arquivo angular-cli.json da pasta raiz do projeto, localize o atributo "styles" e inclua a configuração do 
        bootstrap como abaixo:

        ...
        "styles": [
            "styles.css",
            "../node_modules/bootstrap/dist/css/bootstrap.css"
        ],
        ...

    . Acesse o arquivo app.component.html da pasta raiz e substitua pelo código abaixo:

        <div class="container">
            <div class="jumbotron">
                <h1 class="display-4">Hello, world!</h1>
                <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                <hr class="my-4">
                <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
                <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
            </div>
        </div>



Aula 09.05. Introdução a data binding
-------------------------------------

https://www.tutorialspoint.com/angular8/angular8_data_binding.htm

    . Data binding é uma técnica, onde o dado fica sincronizado entre o componente e a visão.

    . Essa técnica é dividida em 5 grupos:

        . String interpolação, representado pelo {{ }}:

            // *.component.ts
            export class TestComponent implements OnInit { 
                appName = "My first app in Angular 4"; 
            }

            // *.component.html 
            <h1>{{appName}}</h1>            

            // app.component.html
            <app-test></app-test>

        . Event binding, eventos do tipo: click(), hover(), doubleClick(), etc:

            // *.component.ts
            export class TestComponent { 
                showData($event: any){ 
                    console.log("button is clicked!"); if($event) { 
                        console.log($event.target); 
                        console.log($event.target.value); 
                    } 
                } 
            }

            // *.component.html
            <h2>Event Binding</h2> 
            <button (click)="showData($event)">Click here</button>

            ou

            <button on-click = "showData($event)">Click here</button>


        . Property binding, utilizado para ligar o dado de uma propriedade de um componente para 
            o elemento DOM:

            // *.component.ts
            export class TestComponent { 
                userName:string = "Peter"; 
            }

            // *.component.html
            // userName property is bind to an attribute of a DOM element <input> tag
            <input type="text" [value]="userName">

        . Attribute binding é usado para ligar o dado de um componente para o atributo HTML:

            // *.component.ts
            // Observe 
            import { Component, OnInit } from '@angular/core';  
            
            @Component({  
                selector: 'app-example',  
                templateUrl: './example.component.html',  
                styleUrls: ['./example.component.css']  
            })  

            export class ExampleComponent ({  
                id:number=1;  
                name:string="Farhan Ahmed";  
                gender:string="Male";  
                designation:string="Software Developer";  
                location:string="Bangalore";  
                salary:number=70000;  
                imageHeight:number=100;  
                imageWidth:number=100;  
                imagePath:string="assets/Images/farhan.png";  
                columnSpan:number=4;  
            });

            // *.component.html
            // Observe o contéudo entre colchetes '<th [attr.colspan]="columnSpan">'
            // O atributo attr.colspan utilizará o que foi configurado na propriedade do componente columnSpan, que será 4.
            <div class="container">  
                <table class="table table-bordered">  
                    <thead class="bg-primary text-white">  
                        <tr>  
                            <th [attr.colspan]="columnSpan">  
                                <h4 class="text-center text-uppercase">Employee Information</h4>  
                            </th>  
                        </tr>  
                    </thead>  
                    <tbody>  
                        <tr>  
                            <td>Employee ID:</td>  
                            <td>{{id}}</td>  
                        </tr>  
                        <tr>  
                            <td>Employee Name:</td>  
                            <td>{{name}}</td>  
                        </tr>  
                    </tbody>  
                </table>  
            </div>  

        . Class binding é usado para ligar o dado do componente para a propriedade class do HTML:

            // *.component.ts
            export class TestComponent { 
                myCSSClass = "red"; 
                applyCSSClass = false; 
            }

            // *.component.html
            <p [class]="myCSSClass">This paragraph class comes from *myClass* property </p> 
            <p [class.blue]="applyCSSClass">This paragraph class does not apply</p>

        . Style binding  é usado para ligar o dado do componente para a propriedade de estilo do HTML:

            // *.component.ts
            export class TestComponent { 
                myColor = 'brown';
            }

            // *.component.html
            <p [style.color]="myColor">Text color is styled using style binding</p>            

        
Aula 09.06. Usando interpolação
-------------------------------

    . Acesse a pasta raiz do projeto no terminal e execute o comando abaixo:

        $ ng g c cliente --spec=false

    . Acesse o componente src/app/cliente/cliente.component.ts e deixe com o código abaixo:

        import { Component, OnInit } from '@angular/core';

        @Component({
            selector: 'app-cliente',
            templateUrl: './cliente.component.html',
            styleUrls: ['./cliente.component.css']
        })
        export class ClienteComponent implements OnInit {

            cpf : String;
            nome : String;
            idade : Number;

            constructor() { }

            ngOnInit() {
                this.cpf = '106.523.608-58';
                this.idade = 55;
                this.nome = 'MARCO ANTONIO SILVA';

            }

            getIdade() : Number{
                return this.idade;
            }

        }

    . Acesse o componente src/app/cliente/cliente.component.html e deixe com o código abaixo:
                    
        <p>
            Nome : {{nome}}
            CPF : {{cpf}}
            Idade Atual : {{idade}}
            Idade daqui a 20 anos : {{ getIdade() + 20 }}
        </p>
                
    . Acesse o componente src/app/app.component.html e acrescente a tag abaixo:

        <app-cliente></app-cliente>    



Aula 09.07. Usando event binding
--------------------------------

    . Acesse o componente src/app/cliente/cliente.component.ts e deixe com o código abaixo:

        import { Component, OnInit } from '@angular/core';

        @Component({
            selector: 'app-cliente',
            templateUrl: './cliente.component.html',
            styleUrls: ['./cliente.component.css']
        })
        export class ClienteComponent implements OnInit {

            cpf : String;
            nome : String;
            idade : Number;

            constructor() { }

            ngOnInit() {
                this.cpf = '106.523.608-58';
                this.idade = 55;
                this.nome = 'MARCO ANTONIO SILVA';

            }

            salvar(){
                console.log(`Cliente ${this.nome} salvo!!!`)
            }

            alterarNome( event : any ){
                console.log(event);

                this.nome = event.target.value;
            }

        }

    . Acesse o componente src/app/cliente/cliente.component.html e deixe com o código abaixo:

        <div class="container">
            <div class="alert alert-success" role="alert">
                Nome do Cliente : <strong> {{nome}} </strong>
            </div>

            <div class="form-group">
                <label for="clienteNome">Nome do Cliente</label>
                <input type="text" class="form-control" id="nomeCliente" value="{{nome}}" (input)="alterarNome($event)" >
                <small id="emailHelp" class="form-text text-muted">Informe o nome do cliente</small>
            </div>     

            <button type="button" class="btn btn-primary" (click)="salvar()">Salvar</button>                   
        </div>

        . Na tag HTML <input> existe a declaração (input)="alterarNome($event). O $event contém informações do evento, o método  
            do componente cliente.component.ts a ser chamado deverá ter também na sua assinatura a recepção do objeto "event" 
            alterarNome( event : any ). Se quiser verificar o contéudo do objeto evento, coloque no método alterarNome o 
            console.log( event ); acesse a console do navegador; localize o item "target.value" para encontrar o valor 
            do campo digitado "nomeCliente".

        . Nessa mesma tag HTML o evento que está (input)="alterarNome($event)", poderia ser (keyup)="alter..."

    . Execute a página, abra o console do navegador, digite um nome e acione o botão salvar



Aula 09.08. Usando variável de referência
-----------------------------------------

    . Template de referência de variável é a forma como passar um objeto DOM dentro do template, ou para uma classe de componente.

    . Um exemplo como utilizar um "template reference variable":

        . Template

            <div class="container">
                <div class="alert alert-success" role="alert">
                    Nome do Cliente : <strong> {{nome}} </strong>
                </div>

                <div class="form-group">
                    <label for="clienteNome">Nome do Cliente</label>
                    <input type="text" class="form-control" id="nomeCliente" #nomeInput >
                    <small id="emailHelp" class="form-text text-muted">Informe o nome do cliente</small>
                </div>     

                <button type="button" class="btn btn-primary" (click)="salvar(nomeInput.value)">Salvar</button>                   
            </div>

            . Se ao passar o valor do campo "nome" passassemos somente "(click)="salvar(nomeInput)" seria passado 
                todo o objeto DOM, com toda sua estrutura. La no componente a declaração seria: salvar( nome : any ), 
                neste caso devemos pegar o valor do nome da seguinte forma: nome.value


        . Componente

            import { Component, OnInit } from '@angular/core';

            @Component({
                selector: 'app-cliente',
                templateUrl: './cliente.component.html',
                styleUrls: ['./cliente.component.css']
            })
            export class ClienteComponent implements OnInit {

                cpf : String;
                nome : String;
                idade : Number;

                constructor() { }

                ngOnInit() {
                    this.cpf = '106.523.608-58';
                    this.idade = 55;
                    this.nome = 'MARCO ANTONIO SILVA';

                }

                salvar( nome : string ){
                    this.nome = nome;

                    console.log(`Cliente ${this.nome} salvo!!!`)
                }
            }

Aula 09.09. Usando property binding
-----------------------------------

    . Na aula 9.05 é falado sobre property binding.  Property binding, utilizado para ligar o dado de uma 
        propriedade de um componente para o elemento DOM, por exemplo:

        . Altere a tag da tag button do template 
            
            De:

                <button type="button" class="btn btn-primary" (click)="salvar(nomeInput.value)">Salvar</button>                   

            Para:

                <button type="button" class="btn btn-primary" (click)="salvar(nomeInput.value) [disabled]="nome.length==0">Salvar</button>                   

        . Faça o teste para ver se o botão fica desabilitado quando o nome estiver vazio.

    . A representação de um "property binding" é [Atributo] = "expressão que deverá retornar um conteúdo de acordo com a propriedade".

    . Outro exemplo:

        . Altere a tag input do template:

            De:

                <input type="text" class="form-control" id="nomeCliente" value="{{nome}} >

            Para:

                <input type="text" class="form-control" id="nomeCliente" #nomeInput [value]="nome" (keyup)="nome = nomeInput.value" >

    . Para testar: tente pegar o exemplo do Template Reference Variable que utiliza "#" e utilize no exemplo abaixo:

        De:

            <button type="button" class="btn btn-primary" (click)="salvar(nomeInput.value)">Salvar</button>                   

        Para:

            <button type="button" class="btn btn-primary" (click)="salvar(nomeInput.value) [disabled]="nomeInput.value.length==0">Salvar</button>                   
            ou
            <button type="button" class="btn btn-primary" (click)="salvar(nomeInput.value) [disabled]="nome.length==0">Salvar</button>                   


https://www.youtube.com/watch?v=mczUdRvLBc8&list=PLGxZ4Rq3BOBoSRcKWEdQACbUCNWLczg2G&index=122
https://www.youtube.com/watch?v=Bg47WHVc020&list=PLGxZ4Rq3BOBoSRcKWEdQACbUCNWLczg2G&index=123
https://www.baeldung.com/spring-boot-angular-web
https://www.javaguides.net/2019/06/spring-boot-angular-7-crud-example-tutorial.html



Aula 09.10. Usando two-way data binding
---------------------------------------

    . [(ngModel)] é a forma mais pratica na troca de informação entre o template e o componente, exemplo:

        Forma convencional:

            <input type="text" 
                class="form-control"
                (input)="alterarNome($event)"
                [value]="nome">

        Forma two-way:

            <input type="text"
                    class="form-control"
                    [(ngModel)]="nome">

            . Dessa forma todas as vezes que houver mudança do valor da propriedade "nome" no 
                componente, tanto por parte do template, quanto por parte do componente o 
                [(ngModel)] fará a troca.

    . Para trabalhar com ngModel é necessário importar o pacote "FormsModule" dentro do componente "app.module.ts":

        ...
        import { FormsModule } from '@angular/forms';
        ...
        imports :[
            ...
            FormsModule
        ]



Aula 09.11. Introdução às diretivas
-----------------------------------

    . Diretivas são instruções que passamos para os templates.

    . Existem 3 tipos de diretivas:

        Componente - que passamos para o template:

            <app-curso></app-curso>

        Estrutural - Podem ser anexadas a elementos DOM (e componentes, pois são elementos DOM) para modificar a estrutura do DOM.

            <h2 *ngIf="logado">Olá {{nome}}</h2>

            <div *ngIf="hero" class="name">{{hero.name}}</div>

        Atributo - Podem ser anexadas a elementos DOM (e componentes, pois são elementos DOM) para modificar a aparência 
                    ou o comportamento de um elemento e não altera a estrutura do DOM.

            <h2 [style.color]="'red'">{{nome}}</h2>




Aula 09.12. Exibindo condicionalmente com as diretivas ngIf e hidden
--------------------------------------------------------------------

    . Acesse a classe src/app/cliente/app.component.ts e deixe como abaixo:

        import { Component, OnInit } from '@angular/core';

        @Component({
            selector: 'app-cliente',
            templateUrl: './cliente.component.html',
            styleUrls: ['./cliente.component.css']
        })

        export class ClienteComponent implements OnInit {

            salvo : Boolean;       // Criado
            cpf : String;
            nome : String;
            idade : Number;

            constructor() { }

            ngOnInit() {
                this.cpf = '106.523.608-58';
                this.idade = 55;
                this.nome = 'MARCO ANTONIO SILVA';
                this.salvo = false;

            }


            salvar( nome : string ){
                this.salvo = true;     // Criado
                this.nome = nome;

                console.log(`Cliente ${this.nome} salvo!!!`);
            }
        }

    . Acesse a classe src/app/cliente/app.component.html e deixe como abaixo:

        <div class="container">
                                                         <!-- Criado -->
            <div class="alert alert-success" role="alert" *ngIf="salvo">
                Nome do Cliente : <strong> {{nome}} </strong>
            </div>

            <div class="form-group">
                <label for="clienteNome">Nome do Cliente</label>
                <input type="text" class="form-control" id="nomeCliente" #nomeInput (keyup)="nome=nomeInput.value" [value]="nome" >
                <small id="emailHelp" class="form-text text-muted">Informe o nome do cliente</small>
            </div>     

            <button type="button" class="btn btn-primary" (click)="salvar(nomeInput.value)" [disabled]="nomeInput.value.length == 0">Salvar</button>                   
        </div>


        . O *ngIf é uma diretiva estrutural, porque altera a estrutura/layout do template.

    . Execute o projeto e veja se a condição para mostrar o nome do cliente somente quando ele foi adiciona está sendo feito com sucesso.

    . Altere o objeto HTML "nomeCliente" como abaixo:

        <input type="text" class="form-control" id="nomeCliente" #nomeInput (keyup)="nome=nomeInput.value" [value]="nome" (focus)="salvo = false" >

    . Execute o projeto e veja se a condição para mostrar o nome do cliente somente quando ele foi adiciona está sendo feito com sucesso.

    . Altere a tag <div> como abaixo:

            <div class="alert alert-success" role="alert" [hidden]="!salvo">
                Nome do Cliente : <strong> {{nome}} </strong>
            </div>

    . Execute o projeto e veja se a condição para mostrar o nome do cliente somente quando ele foi adiciona está sendo feito com sucesso.


Aula 09.13. Iterando com a diretiva ngFor
-----------------------------------------

    . Existe um site de fotos aleatória de pessoas https://www.randomuser.me . Neste lugar serão pego fotos
        das pessoas.

    . Site para geração de nomes de pessoas:
    
        https://pt.fakenamegenerator.com/

    . Site para geração de CPFs:
    
        https://www.geradordecpf.org/

    . Site de geração de cadastro de pessoas: 
    
        https://geradornv.com.br/gerador-pessoas/

    . Site para geração de várias informações (CPF, CNH, Conta Bancária, RG, etc): 
    
        https://www.4devs.com.br/

    . Sites gerador de texto:

        https://mussumipsum.com/
        https://loremipsum.io/
        https://www.lipsum.com/feed/html

    . Sites gerador de GUID:

        https://www.guidgenerator.com/online-guid-generator.aspx
        https://www.uuidgenerator.net/guid#google_vignette

    . Site gerador de massa de dados para testes, excelente quando estiver desenvolvendo novas aplicações:

        https://www.mockaroo.com/

    . Site de emails temporário:

        https://temp-mail.org/pt/

    . Site de bibliotecas JQuery:

        https://www.jqueryscript.net/
        https://plugins.jquery.com/


    . Site de APIs Fake

        https://reqres.in/

        https://www.npmjs.com/package/json-server

        https://www.anselme.com.br/2022/12/14/7-apis-publicas-gratuitas-e-de-qualidade/

        https://dummyjson.com/

        https://fakestoreapi.com/

        https://jsonplaceholder.typicode.com/

        # Tem Auth JWT
        https://fakeapi.platzi.com/

        https://beeceptor.com/crud-api/

        https://fake-coffee-api.vercel.app/docs

    . Acesse o template src/app/cliente/cliente.component.html e insira o código abaixo:


        <div class="container" >
            <div class="alert alert-success" role="alert" [hidden]="!salvo">
                Nome do Cliente : <strong> {{nome}} </strong>
            </div>

            <div class="form-group">
                <label for="clienteNome">Nome do Cliente</label>
                <input type="text" class="form-control" id="nomeCliente" #nomeInput [(ngModel)]="nome" (focus)="salvo=false">
                <small id="emailHelp" class="form-text text-muted">Informe o nome do cliente</small>
            </div>     

            <button type="button" class="btn btn-primary" (click)="salvar(nomeInput.value)" [disabled]="nomeInput.value.length == 0">Salvar</button>                   

            <div class="row" style="margin-top: 20px;" >
                <div class="col-2" *ngFor="let cliente of clientes" >
                    <div class="card">
                        <img src="https://randomuser.me/api/portraits/women/{{cliente.id}}.jpg">
                        <div class="card-body">
                            {{cliente.nome}}
                        </div>
                    </div>  
                </div>
            </div>
        </div>

    . Acesse o componente src/app/cliente/cliente.component.ts e deixe o código como abaixo:

        import { Component, OnInit } from '@angular/core';

        @Component({
            selector: 'app-cliente',
            templateUrl: './cliente.component.html',
            styleUrls: ['./cliente.component.css']
        })
        export class ClienteComponent implements OnInit {

        ultimoId : number = 1;
        salvo : Boolean;
        cpf : String;
        nome : string;
        idade : Number;

        clientes : any[] = [];

        constructor() { }

        ngOnInit() {
            this.salvo = false;
            this.cpf = '106.523.608-58';
            this.idade = 55;
            this.nome = 'Jéssica';

        }


        salvar( nome : string ){
                this.salvo = true;

                this.nome = nome;

                this.clientes.push({  id : ++this.ultimoId,
                                    nome : this.nome});

                console.log(`Cliente ${this.nome} salvo!!!`);
            }
        }

    . Execute o projeto e veja o resultado.

Aula 09.14. Binding de propriedades customizadas com @Input
-----------------------------------------------------------

    . A parte interna do card feito na aula anterior será colocado como um componente a parte.

    . Acesse a raiz do projeto e execute o comando abaixo no prompt do SO:

        $ ng g c cliente-card --spec=false

    . Altere o arquivo src/app/cliente/cliente.component.html como abaixo:

        <div class="container" >
            <div class="alert alert-success" role="alert" *ngIf="salvo">
                Nome do Cliente : <strong> {{nome}} </strong>
            </div>

            <div class="form-group">
                <label for="clienteNome">Nome do Cliente</label>
                <input type="text" class="form-control" id="nomeCliente" #nomeInput [(ngModel)]="nome" (focus)="salvo=false">
                <small id="emailHelp" class="form-text text-muted">Informe o nome do cliente</small>
            </div>     

            <button type="button" class="btn btn-primary" (click)="salvar(nomeInput.value)" [disabled]="nomeInput.value.length == 0">Salvar</button>                   

            <div class="row" style="margin-top: 20px;" >
                <div class="col-2" *ngFor="let c of clientes" >
                    <!-- Foi retirado o codigo daqui de dentro e transferido para o componente cliente-card.component.html -->
                    <app-cliente-card [cliente]="c"></app-cliente-card>
                </div>
            </div>
        </div>

    . Cópie o código HTML abaixo para o arquivo src/app/cliente-card/cliente-card.component.html

        <div class="card">
            <img src="https://randomuser.me/api/portraits/women/{{cliente.id}}.jpg">
            <div class="card-body">
                {{cliente.nome}}
            </div>
        </div>  


    . Crie a propriedade abaixo no componente src/app/card-cliente/card-cliente-component.ts:

        import { Component, Input, OnInit } from '@angular/core';

        @Component({
            selector: 'app-cliente-card',
            templateUrl: './cliente-card.component.html',
            styleUrls: ['./cliente-card.component.css']
        })
        export class ClienteCardComponent implements OnInit {

            @Input()
            cliente : any;

            constructor() { }

            ngOnInit() {
            }

        }

    . Execute o projeto.


Aula 09.15. Binding de eventos customizados com @Output e EventEmitter
----------------------------------------------------------------------

    . Na pasta raiz do projeto execute o comando abaixo no prompt do SO.

        $ ng g c cliente-form

    . Altere o conteúdo do arquivo src/app/cliente-form/cliente-form.component.html como abaixo:

        <div class="alert alert-success" role="alert" *ngIf="salvo">
            Nome do Cliente : <strong> {{nome}} </strong>
        </div>

        <div class="form-group">
            <label for="clienteNome">Nome do Cliente</label>
            <input type="text" class="form-control" id="nomeCliente" #nomeInput [(ngModel)]="nome" (focus)="salvo=false">
            <small id="emailHelp" class="form-text text-muted">Informe o nome do cliente</small>
        </div>     

        <button type="button" class="btn btn-primary" (click)="salvar(nomeInput.value)" [disabled]="nomeInput.value.length == 0">Salvar</button>                   

    . Altere o conteúdo do arquivo src/app/cliente/cliente.component.html como abaixo:

        <div class="container" >
            <app-cliente-form (clienteAdicionado)="aoAdicionar($event)"></app-cliente-form>

            <div class="row" style="margin-top: 20px;" >
                <div class="col-2" *ngFor="let c of clientes">
                <app-cliente-card [cliente]="c"></app-cliente-card>
            </div>
        </div>

    . Altere o codigo do componente src/app/cliente/cliente.component.ts como abaixo:

        import { Component, OnInit } from '@angular/core';

        @Component({
            selector: 'app-cliente',
            templateUrl: './cliente.component.html',
            styleUrls: ['./cliente.component.css']
        })
        export class ClienteComponent implements OnInit {

            clientes : any[] = [];

            ngOnInit() {

                
            }

            aoAdicionar( cliente ){
                this.clientes.push( cliente );
            }

        }

    . Altere o codigo do componente src/app/cliente-form/cliente-form.component.ts como abaixo:

        import { Component, EventEmitter, OnInit, EventEmmiter, Output } from '@angular/core';

        @Component({
            selector: 'app-cliente-form',
            templateUrl: './cliente-form.component.html',
            styleUrls: ['./cliente-form.component.css']
        })
        export class ClienteFormComponent implements OnInit {

            ultimoId : number = 1;
            salvo : Boolean;
            cpf : String;
            nome : string;
            idade : Number;

            @Output()
            clienteAdicionado = new EventEmitter();


            constructor() { 

            }

            ngOnInit() {
                this.salvo = false;
                this.cpf = '106.523.608-58';
                this.idade = 55;
                this.nome = 'Jéssica';

            }

            salvar( nome : string ){
                this.salvo = true;

                this.nome = nome;

                const cliente =  { id : ++this.ultimoId,
                                    nome : this.nome
                                };

                this.clienteAdicionado.emit( cliente );

                console.log(`Cliente ${this.nome} salvo!!!`);
            }
        }

    
    . Altere o codigo do componente src/app/cliente/cliente.component.html como abaixo:

        <div class="container" >
            <app-cliente-form (clienteAdicionado)="aoAdicionar()"></app-cliente-form>

            <div class="row" style="margin-top: 20px;" >
                <div class="col-2" *ngFor="let c of clientes">
                <app-cliente-card [cliente]="c"></app-cliente-card>
                </div>
            </div>
        </div>

    . Sequência de execução:

        1. No componente cliente-form.component.ts é feito a declaração da propriedade do tipo "listener".
            Ou seja, o EventEmitter ficará escutando por um método. Detalhe, o decorate @Output exporta
            o objeto listener para o projeto inteiro, como se deixasse o objeto público.

            @Output()
            clienteAdicionado = new EventEmitter();

        2. No template cliente.component.html é feito a associação entre o método do componente pertinente 
            a ele "cliente.componente.aoAdicionar()" com o listener "clienteAdicionado" através de um 
            property binding ...(clienteAdicionado)="aoAdicionar($event)"

            <app-cliente-form (clienteAdicionado)="aoAdicionar($event)"></app-cliente-form>

            . Importante: o parâmetro do método aoAdicionar, o $event, é necessário para manter o contrato da assinatura.
                            No método cliente-form.component.salvar é feito a chamada ao listener com o objeto cliente, resumindo
                            simplesmente coloque o $event. 

                this.clienteAdicionado.emit( cliente );                            

        3. Quando o botão salvar do template cliente-form.component.html é acionado é chamado o método "salvar"
            do componente associado ao template.

            <button type="button" class="btn btn-primary" (click)="salvar(nomeInput.value)" [disabled]="nomeInput.value.length == 0">Salvar</button>                   

        4. No método salvar do componente client-form.component é feito a chamada do listener:

            salvar( nome : string ){
                ...

                this.clienteAdicionado.emit( cliente );
            }

        5. O listener associado ao método "aoAdicionar", feito no passo 2, executa o metodo "cliente.componente.aoAdicionar( cliente )"



Aula 09.16. Adicionando estilos CSS em componentes
--------------------------------------------------

    . Existem várias maneiras de implementar um estilo css no angular.

        . O primeiro seria no arquivo de estilo que é criado com o componente e o template.

            . No componente src/app/cliente-form/cliente-form.component.ts existe dentro do decorate @Component a declaração do styleUrls, 
                que aponta para o arquivo "cliente-form.component.css

                @Component({
                    ...
                    styleUrls: ['./cliente-form.component.css']
                })
                export class ClienteComponent implements OnInit {

            . Acesse o arquivo src/app/cliente/cliente-form.component.css e inclua o código abaixo:

                label {
                    color : red;
                }

            . Execute o projeto e verifique se o titulo/label do input ficou com a cor vermelha.

        . A segunda forma seria implementar diretamente o style no decorate @Component:

            . No componente src/app/cliente-card/cliente-card.component.ts existe dentro do decorate @Component a declaração do styleUrls, 
                apague essa propriedade e no lugar coloque outra com nome de "style" como abaixo:

                @Component({
                    selector: 'app-cliente-card',
                    templateUrl: './cliente-card.component.html',
                    //  styleUrls: ['./cliente-card.component.css']
                    styles : [ `
                                .card-body { text-transform : uppercase;
                                                color : blue; }
                    
                            `]
                })
                export class ClienteCardComponent implements OnInit {
                ...

            . Execute o projeto e verifique se o rodapé do card ficou maiusculo e azul.

    . Nos dois casos devemos observar que as propriedades são declaradas através de arrays, neste 
        caso podemos ter mais de um item na declaração.



Aula 09.17. Estilos CSS dinâmicos com ngStyle
---------------------------------------------
        
    . O "ngStyle" é uma diretiva que permite alterar dinamicamente o estilo dos elementos DOM.

    . Uma forma de usar o "ngStyle" é atribuir um objeto fixo :

        <div [ngStyle]="{'background-color':'green'}"></<div>            

        . Toda diretiva deve ser colocada entre colchetes

        . Por se tratar de uma diretiva as propriedades e valores dentro do objeto tem ser colocado entre aspas simples

    . Outra forma de usar o "ngStyle" é atribuir um objeto dinamicamente:

        <div [ngStyle]="{'background-color':person.country === 'UK' ? 'green' : 'red' }"></<div>    

    . Desenvolva o exemplo do link abaixo:

https://codecraft.tv/courses/angular/built-in-directives/ngstyle-and-ngclass/



Aula 09.18. Classes CSS dinâmicas com ngClass
---------------------------------------------

    . O "ngClass" é uma diretiva que permite alterar dinamicamente o estilo dos elementos DOM, a diferença do ngStyle
        é que o ngClass utiliza nomes de classes ".card-body" por exemplo:

    . Exemplo: 
        
        <div class="card-body"><span [ngClass]="['badge','badge-primary']">{{cliente.nome}}</span></div>

        ou 

        // Template
        <div class="card-body"><span [ngClass]="getListaClasseCSS()">{{cliente.nome}}</span></div>

        // Component
        ...
        export class ClienteCardComponent{
            ...

            getClassCSS(){
                return ['badge','badge-primary'];
            }

            ...
        }

        ou

        // Template
        <div class="card-body"><span [ngClass]="{'badge-danger' : isAdmin(), 'badge-primary' : !isAdmin()}"> {{cliente.nome}} </span></div>

        // Component
        ...
        export class ClienteCardComponent{
            ...

            isAdmin(){
                return this.cliente.nome.startsWith('T');
            }

            ...
        }


Aula 10.02. Escolhendo uma biblioteca de componentes
----------------------------------------------------

    . Abaixo as principais bibliotecas angular para desenvolvimento:

        https://material.angular.io/
        https://materializecss.com/
        https://ng-bootstrap.github.io/#/home
        https://valor-software.com/ngx-bootstrap/#/
        https://www.primefaces.org/primeng/



Aula 10.03. Criando o projeto do curso e instalando o PrimeNG
-------------------------------------------------------------

    . A versão do angular/cli para o curso é 1.1.2, vide aula 8.7

    . Digite o comando abaixo no prompt do sistema operacional:

        ng new algawork-ui

    . Abra a pasta do projeto no VSCode.

    . No prompt do sistema operacional, na pasta raiz do projeto recém criado digite o comando abaixo:

        sudo npm i primeng@4.3.0 --save
        
        sudo npm i font-awesome@4.3.0 --save

    . Acesse o arquivo .angular-cli.json e insira no item "style" as linhas abaixo:

        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",

    . Acesse o arquivo src/app/app.module.ts e inclua o modulo "TabViewModule":

        ...
        import {TabViewModule} from 'primeng/components/tabview/tabview';

        @NgModule({
            ...
            imports: [
                BrowserModule,
                TabViewModule
            ],
            ...

    . Acesse o arquivo src/app/app.component.html e substitua o código pelo abaixo:

        <p-tabView>
            <p-tabPanel header="Header 1">
                    Mussum Ipsum, cacilds vidis litro abertis. Diuretics paradis num copo é motivis de denguis.
                    Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. Todo mundo vê os porris
                    que eu tomo, mas ninguém vê os tombis que eu levo! Interessantiss
                    quisso pudia ce receita de bolis, mais bolis eu num gostis.
            </p-tabPanel>
            <p-tabPanel header="Header 2">
                Content 2
            </p-tabPanel>
            <p-tabPanel header="Header 3">
                Content 3
            </p-tabPanel>
        </p-tabView>


Aula 10.04. Adicionando o formulário de pesquisa de lançamentos
---------------------------------------------------------------

    Sistema de grid do PrimeNG
    --------------------------

    . A tela é dividida em 12 partes, em que é possível através de classes informar
        quantas posições queremos ocupar no monitor.

    . Podemos informar a quantidade de partes que queremos informar através das classes "grid" e "col":

        .ui-g .ui-g1, .ui-g2, ...

    .  Exemplo:

        <div class="ui-g">
            <div class="ui-g-4">Col1</div>
            <div class="ui-g-4">Col2</div>
            <div class="ui-g-4">Col3</div>
        </div>

    . A classe ui-fluid serve para redimensionar o conteúdo da celula, ou seja, ela fará com que o 
        conteúdo ocupe 100% do espaço da celula. Na prática ela deixa a tag <label> em cima da tag
        <input>

    Protótipo da tela de pesquisa 
    -----------------------------

    . No arquivo style.css do projeto insira o conteúdo abaixo:

        body{
            margin: 0;
            font-family:  Arial, Helvetica, sans-serif;
            color: #404C51;
        }

        label{
            font-weight: bold;
            font-size: small;
        }

        @media (min-width: 1200px){
            .container{
                width: 1170px;
                margin: 0 auto;
            }
        }

        . O @media funciona como uma regra, que é estipulada dentro dos (). Neste caso,
            os valores definidos só servirá para monitores até 1200px, abaixo disso
            considerará o tamanho fisico do monitor.

        . margin : 0 auto - Servirá para centralizar o conteúdo, 0=zero de margin top, bottom, left e right
                                                                 auto=para forçar a centralização.

    . No componente src/app/app.module.ts coloque o código abaixo:

        import { NgModule } from '@angular/core';
        import { BrowserModule } from '@angular/platform-browser';

        import { AppComponent } from './app.component';
        import {InputTextModule} from 'primeng/components/inputtext/inputtext';
        import {ButtonModule} from 'primeng/components/button/button';

        @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
                BrowserModule,
                InputTextModule,
                ButtonModule
            ],
            providers: [],
            bootstrap: [AppComponent]
        })
        export class AppModule { }


    . No componente src/app/app.component.html inclua o código abaixo:

        <div class="container">
            <div class="ui-g">
                <div class="ui-g-12">
                    <h1>Lançamentos</h1>
                </div>
                <div class="ui-g-12 ui-fluid">
                    <label for="descricao">Descrição</label>
                    <input pInputText type="text" id="descricao" class="p-inputtext-sm">
                </div>
                <div class="ui-g-12">
                    <label style="display: block;">Vencimento</label>
                    <input pInputText type="text" class="p-inputtext-sm" style="width:95px;">

                    <label>Até</label>
                    <input pInputText type="text" class="p-inputtext-sm" style="width:95px;">
                </div>

                <div class="ui-g-12">
                    <button pButton type="submit" label="Pesquisar" class="p-button-sm"></button>
                </div>
            </div>
        </div>

        . O estilo "display : block;" da tag label serve como o p-fluid e jogar o conteúdo da label
            em cima dos campos Data Início e Fim.


Aula 10.05. Adicionando uma tabela de dados
-------------------------------------------

    . Acesse o arquivo src/app/app.module.ts e insira o import abaixo

        ...
        import {DataTableModule, SharedModule} from 'primeng/primeng';

        ...
        @NgModule({
            ...
            imports: [
                BrowserModule,
                TabViewModule,
                InputTextModule,
                ButtonModule,
                DataTableModule,
                SharedModule
            ],
            providers: [],
            bootstrap: [AppComponent]
        })

    . Acesse a pasta raiz do projeto e digite o comando abaixo:

        $ ng generate interface domain/lancamento

    . Acesse o arquivo domain/lancamento.ts e insira o código abaixo:

        export interface Lancamento {
            tipo;
            descricao;
            dataVencimento;
            dataPagamento;
            valor;
            pessoa;
        }


    . Acesse o arquivo app.component.ts e insira o código abaixo:

        ...
        import { Lancamento } from 'app/domain/lancamento';

        ...
        export class AppComponent implements OnInit {
            ...
            lancamentos: Lancamento[] = [
                                { tipo: 'DESPESA', descricao: 'Compra de pão', dataVencimento: '30/06/2017',
                                dataPagamento: null, valor: 4.55, pessoa: 'Padaria do José' },
                              { tipo: 'RECEITA', descricao: 'Venda de software', dataVencimento: '10/06/2017',
                                dataPagamento: '09/06/2017', valor: 80000, pessoa: 'Atacado Brasil' },
                              { tipo: 'DESPESA', descricao: 'Impostos', dataVencimento: '20/07/2017',
                                dataPagamento: null, valor: 14312, pessoa: 'Ministério da Fazenda' },
                              { tipo: 'DESPESA', descricao: 'Mensalidade de escola', dataVencimento: '05/06/2017',
                                dataPagamento: '30/05/2017', valor: 800, pessoa: 'Escola Abelha Rainha' },
                              { tipo: 'RECEITA', descricao: 'Venda de carro', dataVencimento: '18/08/2017',
                                dataPagamento: null, valor: 55000, pessoa: 'Sebastião Souza' },
                              { tipo: 'DESPESA', descricao: 'Aluguel', dataVencimento: '10/07/2017',
                                dataPagamento: '09/07/2017', valor: 1750, pessoa: 'Casa Nova Imóveis' },
                              { tipo: 'DESPESA', descricao: 'Mensalidade musculação', dataVencimento: '13/07/2017',
                                dataPagamento: null, valor: 180, pessoa: 'Academia Top' }
                            ];

            ...
        }

    . Adicione as linhas abaixo no arquivo style.css do projeto:

        .col-valor{
            width: 120px;
            text-align: right;
        }

        .col-data{
            width: 120px;
            text-align: center;
        }

    . Acesse o arquivo src/app/app.component.html e insira o código abaixo:

        <div class="container">
            <div class="ui-g-12">
                <p-dataTable [value]="lancamentos">
                    <p-column field="pessoa" header="Pessoa"></p-column>
                    <p-column field="descricao" header="Descrição"></p-column>
                    <p-column field="dataVencimento" header="Vencimento" styleClass="col-data"></p-column>
                    <p-column field="dataPagamento" header="Pagto" styleClass="col-data"></p-column>
                    <p-column field="valor" header="Valor" styleClass="col-valor"></p-column>
                </p-dataTable>
            </div>
        </div>


Aula 10.06. Customizando colunas com ng-template
------------------------------------------------

    . Inclua as linhas abaixo no arquivo style.css do projeto:

        .col-acoes{
            width: 90px;
            text-align:center;
        }

    . Deixe o código do datatable do arquivo app.component.html como abaixo:

        <div class="container">
            <div class="ui-g-12">
                <p-dataTable [value]="lancamentos">
                    <p-column field="pessoa" header="Pessoa"></p-column>
                    <p-column field="descricao" header="Descrição"></p-column>
                    <p-column field="dataVencimento" header="Vencimento" styleClass="col-data"></p-column>
                    <p-column field="dataPagamento" header="Pagto" styleClass="col-data"></p-column>
                    <p-column field="valor" header="Valor" styleClass="col-valor">
                        <ng-template let-lanc="rowData" pTemplate="body">
            <!--              <span [ngStyle]="{ color: lanc.tipo === 'DESPESA' ? 'red' : 'blue' }">{{lanc.valor}}</span> -->
                            <span [style.color]="lanc.tipo === 'DESPESA' ? 'red' : 'blue'">{{lanc.valor}}</span>
                        </ng-template>
                    </p-column>
                    <p-column styleClass="col-acoes">
                        <ng-template pTemplate="body">
                            <a pButton icon="fa-pencil"></a>
                            <a pButton icon="fa-trash"></a>
                        </ng-template>
                    </p-column>
                </p-dataTable>
            </div>
            <div class="ui-g-12">
                <button pButton type="submit" label="Novo Lançamento" class="p-button-sm"></button>
            </div>
        </div>

        . Observe que a coluna valor foi alterada. Dentro desta tag foi colocado a tag "ng-template".
            O <ng-template>é um elemento angular para renderizar HTML. Use para diretivas estruturais como: 
            ngIf, ngFor, ngSwitch, ..

            Exemplo :

                <ng-template [ngIf]="hero">
                    <div class="name">{{hero.name}}</div>
                </ng-template>

        . O ng-template do nosso projeto utilizou o let-lanc="rowData". 
        
            "let-lanc" serve para dar um nome para cada lançamento que será renderezido, onde será utilizado para
            definir a cor da DESPESA ( [style.color]="lanc.tipo === 'DESPESA' ? 'red' : 'blue'" ). A identificação
            "lanc" está relacionado com o "let-lanc".

            "rowData" refere-se a linha que está sendo renderezida e que será atribuida para a ocorrência "lanc"

        . Foi acrescido mais uma coluna com os botões de edição e eliminação

            <p-column styleClass="col-acoes">
                <ng-template pTemplate="body">
                    <a pButton icon="fa-pencil"></a>
                    <a pButton icon="fa-trash"></a>
                </ng-template>
            </p-column>


Aula 10.07. Fazendo paginação de dados
--------------------------------------

    . Acrescente paginator e rows na tag "p-dataTable"

        <p-dataTable [value]="lancamentos" [paginator]=true [rows]=5>


Aula 10.08. Adicionando tooltip
-------------------------------

    . Acrescente o import deste pacote no componente src/app/app.module.ts:

        import {TooltipModule} from 'primeng/components/tooltip/tooltip';
        ...
        imports: [
            ...
            TooltipModule
        ]

    . Acrescente nos botões do dataTable as propriedades abaixo:

        <a pButton icon="fa-pencil" pTooltip="Editar" tooltipPosition="top"></a>
        <a pButton icon="fa-trash"  pTooltip="Eliminar" tooltipPosition="top"></a>


Aula 10.09. Colocando a tabela de dados responsiva
--------------------------------------------------

    . Na tag <dataTable ...> insira o atributo [responsive]="true" como abaixo:

        <p-dataTable [value]="lancamentos" [paginator]=true [rows]=5 [responsive]="true">



Aula 10.10. Criando o componente de pesquisa de lançamentos
-----------------------------------------------------------

    . Acesse a pasta do projeto no prompt do sistema e digite o comando abaixo:

        ng g c lancamentos-pesquisa --spec=false

    . Copie todo o conteúdo do arquivo src/app/app.component.html para o arquivo 
        src/app/lancamentos-pesquisa/lancamentos-pesquisa.component.html. Deixe vazio 
        o app.component.html

    . Copie o conteúdo abaixo no arquivo lancamentos-pesquisa.component.ts :

        import { Component, OnInit } from '@angular/core';
        import { Lancamento } from 'app/domain/lancamento';

        @Component({
            selector: 'app-lancamentos-pesquisa',
            templateUrl: './lancamentos-pesquisa.component.html',
            styleUrls: ['./lancamentos-pesquisa.component.css']
        })
        export class LancamentosPesquisaComponent  {

            lancamentos: Lancamento[] = [
                        { tipo: 'DESPESA', descricao: 'Compra de pão', dataVencimento: '30/06/2017',
                        dataPagamento: null, valor: 4.55, pessoa: 'Padaria do José' },
                    { tipo: 'RECEITA', descricao: 'Venda de software', dataVencimento: '10/06/2017',
                        dataPagamento: '09/06/2017', valor: 80000, pessoa: 'Atacado Brasil' },
                    { tipo: 'DESPESA', descricao: 'Impostos', dataVencimento: '20/07/2017',
                        dataPagamento: null, valor: 14312, pessoa: 'Ministério da Fazenda' },
                    { tipo: 'DESPESA', descricao: 'Mensalidade de escola', dataVencimento: '05/06/2017',
                        dataPagamento: '30/05/2017', valor: 800, pessoa: 'Escola Abelha Rainha' },
                    { tipo: 'RECEITA', descricao: 'Venda de carro', dataVencimento: '18/08/2017',
                        dataPagamento: null, valor: 55000, pessoa: 'Sebastião Souza' },
                    { tipo: 'DESPESA', descricao: 'Aluguel', dataVencimento: '10/07/2017',
                        dataPagamento: '09/07/2017', valor: 1750, pessoa: 'Casa Nova Imóveis' },
                    { tipo: 'DESPESA', descricao: 'Mensalidade musculação', dataVencimento: '13/07/2017',
                        dataPagamento: null, valor: 180, pessoa: 'Academia Top' }
                    ];
        }


    . Apague esse qualquer referência ao lancamento no arquivo app.component.ts:


    . Inclua o conteúdo abaixo no arquivo src/app/app.component.html:

        <app-lancamentos-pesquisa></app-lancamentos-pesquisa>



Aula 10.11. Criando o componente de barra de navegação
------------------------------------------------------

    . Acesse a pasta do projeto no prompt do sistema e digite o comando abaixo:

        ng g c navbar --spec=false

    . No arquivo navbar-component.css inclua as linhas abaixo:

        .navbar{
            padding: 10px 0;
            background-color: #1e94d2;
        }

        .navbar-toggle{
            color: #fff;
        }

    . Inclua as linhas abaixo no arquivo navbar.component.html:

        <nav class="navbar">
            <div class="container">
                <div class="ui-g">
                <div class="ui-g-12">
                    <a href="javascript:;" class="navbar-toggle"><i class="fa fa-bars"></i></a>
                </div>
                </div>
            </div>
        </nav>

    . Inclua a tag abaixo no arquivo src/app/app.component.html

        <app-navbar></app-navbar>

Aula 10.12. Adicionando menu intercambiável
-------------------------------------------

    . Inclua as linhas abaixo no final do arquivo navbar-component.html:

        <ul class="navbar-menu" [hidden]="!exibindoMenu">
            <li class="navbar-usuario">Jose da Silva</li>
            <li class="navbar-menuitem"><a href="#">Lançamentos</a></li>
            <li class="navbar-menuitem"><a href="#">Pessoas</a></li>
            <li class="navbar-menuitem"><a href="#">Logout</a></li>
        </ul>

    . Inclua as linhas abaixo no final do arquivo navbar-component.css:

        .navbar-menu{
            position: fixed;
            padding: 0;
            top: 0;
            bottom: 0;
            right: 0;
            width: 210px;
            margin: 0;
            z-index: 9998;
            background-color: #3a3633;
            list-style: none;
        }

        .navbar-usuario{
            padding: 15px;
            text-transform: uppercase;
            font-weight: bold;
            color: #fff;
            border-bottom: 1px solid #525151;
            margin-bottom: 15px;
        }

        .navbar-menuitem{
            padding: 15px;
        }

        .navbar-menuitem a{
            color: #c0bbb7;
            text-decoration: none;
        }

        .navbar-menuitem a:hover{
            color: #fff;
        }


Aula 10.13. Desafio criando componente de pesquisa de pessoas
-------------------------------------------------------------

    . Acesse a pasta raiz do projeto e execute o comando abaixo:

        $ ng g c pessoa-pesquisa

    . Acesse o componente src/app/pessoa-pesquisa/pessoa-pesquisa.component.html e inclua o código abaixo:

        <div class="container">
            <div class="ui-g">
                <div class="ui-g-12">
                <h1>Pessoas</h1>
                </div>

                <div class="ui-g-12 ui-fluid">
                <label>Nome</label>
                <input type="text"
                        pInputText
                        id="descricao"
                        class="p-inputtext-sm">
                </div>

                <div class="ui-g-12">
                <label style="display: block;">Vencimento</label>
                <input type="text"
                        pInputText
                        class="p-inputtext-sm"
                        style="width: 95px;">
                <label>Até</label>
                <input type="text"
                        pInputText
                        class="p-inputtext-sm"
                        style="width: 95px;" >
                </div>

                <div class="ui-g-12">
                <button pButton
                        type="submit"
                        label="Pesquisar"
                        class="p-button-sm"></button>
                </div>
            </div>

            <div class="ui-g-12">
                <p-dataTable [value]="pessoas"
                            [paginator]=true
                            [rows]="5"
                            [responsive]=true>
                <p-column field="nome" header="Nome" ></p-column>
                <p-column field="cidade" header="Cidade"></p-column>
                <p-column field="estado" header="Estado"></p-column>
                <p-column field="status" header="Status"></p-column>
                <p-column styleClass="col-acoes">
                    <ng-template pTemplate="body">
                    <a pButton icon="fa-pencil" pTooltip="Editar" tooltipPosition="top"></a>
                    <a pButton icon="fa-trash" pTooltip="Eliminar" tooltipPosition="top"></a>
                    </ng-template>
                </p-column>
                </p-dataTable>
            </div>

            <div class="ui-g-12">
                <button pButton
                        class="p-button-sm"
                        type="submit"
                        label="Nova Pessoa"></button>
            </div>
        </div>


    . Acesse o componente src/app/pessoa-pesquisa/pessoa-pesquisa.component.ts e inclua o código abaixo:

        import { Component, OnInit } from '@angular/core';
        import { Pessoa } from 'app/domain/pessoa';

        @Component({
            selector: 'app-pessoas-pesquisa',
            templateUrl: './pessoas-pesquisa.component.html',
            styleUrls: ['./pessoas-pesquisa.component.css']
        })
        export class PessoasPesquisaComponent implements OnInit {

            pessoas: any[] ;

            constructor() { }

            ngOnInit() {
                this.pessoas = [
                    {nome: 'MARCO ANTONIO DA SILVA', cidade: 'SAO PAULO', estado: 'SP', status: 'ATIVO' },
                    {nome: 'CATIA LOUISE F R SILVA', cidade: 'MURITIBA', estado: 'BAHIA', status: 'ATIVO'},
                    {nome: 'GUSTAVO ROCHA DA SILVA', cidade: 'SAO PAULO', estado: 'SP', status: 'ATIVO'},
                    {nome: 'JOSE DA SILVA', cidade: 'RECIFE', estado: 'PB', status: 'INATIVO'},
                    {nome: 'JOAO DA SILVA', cidade: 'PORTO SEGURO', estado: 'BA', status: 'INATIVO'},
                    {nome: 'MARIA DA SILVA', cidade: 'BELO HORIZONTE', estado: 'MG', status: 'ATIVO'},
                    {nome: 'MARIA JOSE GUIMARAES', cidade: 'PORTO ALEGRE', estado: 'RS', status: 'INATIVO'},
                ]



            }
        }

        . Observe que o objeto "pessoas" foi declarado como "pessoas: any[];". Dessa forma não é preciso
            criar uma interface especifica para o objeto.

    . Acesse o componente src/app/app.component.html e deixe o código como abaixo:

        <app-navbar></app-navbar>
        <app-pessoas-pesquisa></app-pessoas-pesquisa>



Aula 11.01. Criando diretivas customizadas
------------------------------------------

    . Revise o conceito diretiva nas aulas 9.11 a 9.14

    . Objetivo desta aula será construir uma diretiva para alterar uma propriedade do input:text, no caso a cor dele.

    . O código abaixo foi retirado da "Aula 09.15. Binding de eventos customizados com @Output e EventEmitter"

        . Na pasta raiz do projeto execute o comando abaixo no prompt do SO.

            $ ng g c cliente-form --spec=false

        . Altere o conteúdo do arquivo src/app/cliente-form/cliente-form.component.html como abaixo:

            <div class="container">
                <div class="ui-g">
                    <div class="ui-g-12">
                    <div class="alert alert-success" role="alert" *ngIf="salvo">
                        Nome do Cliente : <strong> {{nome}} </strong>
                    </div>
                    </div>


                    <div class="ui-g-12 ui-fluid">
                    <label for="clienteNome">Nome do Cliente</label>
                    <input type="text"
                            pInputText
                            id="nomeCliente"
                            #nomeInput
                            [(ngModel)]="nome"
                            (focus)="salvo=false"
                            placeholder="Informe o nome do cliente"
                            appCampoColorido>
                    </div>
                    <div class="ui-g-12">
                        <button   pButton
                                    type="submit"
                                    label="Salvar"
                                    (click)="salvar(nomeInput.value)"
                                    [disabled]="nomeInput.value.length == 0"></button>
                    </div>
                </div>
            </div>

    . Acesse o componente src/app/cliente-form/cliente-form.component.html e deixe conforme o conteúdo abaixo:

        import { Component, EventEmitter, OnInit, Output } from '@angular/core';

        @Component({
            selector: 'app-cliente-form',
            templateUrl: './cliente-form.component.html',
            styleUrls: ['./cliente-form.component.css']
        })
        export class ClienteFormComponent implements OnInit {

            ultimoId: number = 1;
            salvo: Boolean;
            cpf: String;
            nome: string;
            idade: number;

            @Output()
            clienteAdicionado = new EventEmitter();


            constructor() {

            }

            ngOnInit() {
                this.salvo = false;
                this.cpf = '106.523.608-58';
                this.idade = 55;
                this.nome = 'Jéssica';

            }

            salvar( nome : string ){
                this.salvo = true;

                this.nome = nome;

                const cliente =  { id : ++this.ultimoId,
                                    nome : this.nome
                                };

                this.clienteAdicionado.emit( cliente );

                console.log(`Cliente ${this.nome} salvo!!!`);
            }
        }


    . Altere o conteúdo do componente src/app/app.component.html pelo código abaixo:

        <app-cliente-form></app-cliente-form>

    . Na pasta raiz do projeto digite o código abaixo:

        $ ng g d campo-colorido --spec=false

    . Acesse o código do componente src/app/campo-colorido.directive.ts e altere o método
        construtor como abaixo:

        import { Directive, ElementRef, Renderer2 } from '@angular/core';

        @Directive({
            selector: '[appCampoColorido]'
        })
        export class CampoColoridoDirective {

            constructor(  private elementRef: ElementRef,
                            private renderer: Renderer2) {
                                console.log( this.elementRef.nativeElement );

                                this.renderer.setStyle( this.elementRef.nativeElement, 'background-color', 'yellow' );
                            }

        }

        . Atente para colocar o ElementRef e Renderer2 no import

        . O objeto ElementRef permite acessar as informações do objeto input do HTML

        . O objeto Renderer2 permite manipular e alterar o objeto input HTML.

    . Acesse o componente cliente-form.component.html e inclua a diretiva customizada "appCampoColorido" no input:text

          <input type="text" class="form-control" id="nomeCliente" #nomeInput [(ngModel)]="nome" (focus)="salvo=false" appCampoColorido>


Aula 11.02. Respondendo a eventos do hospedeiro com @HostListener
-----------------------------------------------------------------

    . O objetivo desta aula será alterar a cor do campo quando o input receber o foco.

    . Deixe o construtor do componente "campo-colorido.component.ts" sem conteúdo:

        constructor(  private elementRef: ElementRef,
                        private renderer: Renderer2) {
        }

    . No componente "campo-colorido.directive.ts" inclua o método abaixo:

        import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
        ...

        @HostListener('focus')
        onNomeFocus(){
            this.renderer.setStyle( this.elementRef.nativeElement, 'background-color', 'yellow');
        }

        @HostListener('blur')
        onNomeBlur() {
            this.renderer.setStyle( this.elementRef.nativeElement, 'background-color', 'transparent');
        }


        . A annotation @HostListener servirá para relacionar o evento do objeto input com o método do 
            componente campo-colorido.directive.ts. A annotation recebe como parâmetro o nome do evento
            que queremos associar.

        . Essa ação só ocorrera para os elementos HTML que tiver a identificação "appCampoColorido", no nosso caso 
            o input:text abaixo:

            <input type="text"
                    pInputText
                    id="nomeCliente"
                    #nomeInput
                    [(ngModel)]="nome"
                    (focus)="salvo=false"
                    placeholder="Informe o nome do cliente"
                    appCampoColorido>


Aula 11.03. Vinculando propriedades do hospedeiro com @HostBinding
------------------------------------------------------------------

    . Outra forma de alterar dinamicamente a propriedade do elemento HTML, neste caso a cor de fundo.

    . Incluir a propriedade "corDeFundo" no componente campo-colorido.directive.ts e altere os métodos 
        onNomeFocus e onNomeBlur como abaixo:

        ...
        export class CampoColoridoDirective {

            @HostBinding('style.background-color')
            corDeFundo: String;
        ...

            @HostListener('focus')
            onNomeFocus(){
                this.corDeFundo = 'yellow';
            }

            @HostListener('blur')
            onNomeBlur(){
                this.corDeFundo = 'transparent';
            }
        ...

        . O HostBinding informa ao elemento HTML tipificado com "appCampoColorido" para alterar a cor de fundo
            de acordo com o valor da propriedade "corDeFundo"

    . Apague o constructor e os imports relacionado a eles, não haverá mais a necessidade de se utilizar 
        ElementRef e o Renderer2. O componente ficará sem construtor

    
Aula 11.04. Usando property binding em diretivas customizadas
-------------------------------------------------------------

    . O objetivo da aula será como passar um valor de uma propriedade da tag input para a propriedade
        de uma diretiva

    . Inclua a propriedade "cor" e altere a propriedade "corDeFundo" conforme o código abaixo:

        ...
        export class CampoColoridoDirective {
            cor : String = 'gray';

            @HostBinding('style.background-color')
            corDeFundo: String;
        ...

            @HostListener('focus')
            onNomeFocus(){
                this.corDeFundo = this.cor;
            }

            @HostListener('blur')
            onNomeBlur(){
                this.corDeFundo = 'transparent';
            }
        ...

    . Teste até esse ponto o resultado da mudança.

    . Adicione a annotation @Input() na propriedade cor do componente campo-colorido.directive.ts

        @Input()
        cor: String = 'gray';

    . No componente cliente-form.component.html altere a tag do input, colocando a diretiva [cor]

            <input type="text"
                    pInputText
                    id="nomeCliente"
                    #nomeInput
                    [(ngModel)]="nome"
                    (focus)="salvo=false"
                    placeholder="Informe o nome do cliente"
                    appCampoColorido
                    [cor]="'red'">

        . Importante:   na tag HTML acima podemos utilizar ao invés [cor] = "'red'" o conteúdo 
                        cor = "'red'", porém ficará mais claro que estamos utilizando uma diretiva
                        binding quando utilizamos colchetes

                        É obrigatório colocar o resultado entre aspas simples "'red'" dentro das aspas duplas.
                        Caso contrário, o angular pensará que estamos nos referenciando a uma propriedade do 
                        COMPONENTE, no nosso caso "cliente-form.component.ts"
                    

    . Execute o projeto e veja o resultado.

    . Outra forma de obter o mesmo resultado seria, alterar a tag input HTML colocando uma diretiva binding entre
        parenteses [corFundo] apagando a diretiva [cor] e alterar a annotation @Input('corFundo') do
        componente campo-colorido.directive.ts


            <input type="text"
                    pInputText
                    id="nomeCliente"
                    #nomeInput
                    [(ngModel)]="nome"
                    (focus)="salvo=false"
                    placeholder="Informe o nome do cliente"
                    appCampoColorido
                    [corFundo] = "'red'" >


            @Input('corFundo')
            cor: String;


Aula 11.05. Exportando a API da diretiva para o template
--------------------------------------------------------

    . O objetivo desta aula será forçar a mudança de um atributo de uma tag HTML, independente
        de um evento do componente input ocorrer.

    . Crie dois botões no formulário cliente.form.component.html

        <div class="ui-g-12">
            <button   pButton
                        type="submit"
                        label="Salvar"
                        (click)="salvar(nomeInput.value)"
                        [disabled]="nomeInput.value.length == 0"></button>

            <!-- Novos botões -->
            <button pButton label="Colorir"></button>
            <button pButton label="Colorir"></button>
        </div>

    . No componente campo-colorido.directive.ts acrescente o "exportAs" como abaixo:


        import { Directive, HostBinding, HostListener, Input } from '@angular/core';

        @Directive({
            selector: '[appCampoColorido]',
            exportAs: 'campoColorido'
        })
        export class CampoColoridoDirective {
        ...

        . O "exportAs" informa ao angular para exportar a diretiva com este nome.

    . Acesse o componente cliente-form.component.html e acrescente o atributo #campo="campoColorido" na tag input:

        <input type="text"
                pInputText
                id="nomeCliente"
                #nomeInput
                [(ngModel)]="nome"
                (focus)="salvo=false"
                placeholder="Informe o nome do cliente"
                [corFundo] = "'gray'" 
                appCampoColorido
                #campo="campoColorido">

        . Com isso será dado acesso a instância ao componente "campo-colorido.directive.ts"

    . Nos botões criados Colorir e Descolorir adicione os events bidings abaixo:

      <!-- Novos botões -->
      <button pButton label="Colorir" (click)="campo.onNomeFocus()"></button>
      <button pButton label="Descolorir" (click)="campo.onNomeBlur()"></button>


Aula 11.06. Conhecendo e usando pipes
-------------------------------------

    . Maiores detalhes podem ser encontrados em:

        https://v4.angular.io/api?query=pipe    

    . Acesse o componente src/app/app.component.ts e deixe conforme o código abaixo:

        import { Component } from '@angular/core';

        @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.css']
        })
        export class AppComponent {
            nome: String = 'Marco Antonio';
            dataAniversario: Date = new Date(1966, 10, 17);
            preco: Number = 123456.66;
            troco: Number= 500.01;
        }

    . Acesse o componente src/app/app.component.html e substitua com o código abaixo:

        <div class="container">
            <h1>{{ nome }}</h1>
            <h1>{{ dataAniversario }}</h1>
            <h1>{{ preco }}</h1>
            <h1>{{ troco }}</h1>
        </div>

    . Execute o projeto e veja o resultado.

    . Pipe "|" pega um valor de entrada e transforma noutro desejado.

    . No VSCode o Plugin "Angular 2, 4 and..." possui um facilitador de auto-complete na criação dos pipes.
        Basta digitar "ngPipe" + Space Bar para trazer todas as opções de pipes existentes.

    . Altere a saída dos valores abaixo no componente app.component.html como abaixo:

        <h1>{{ nome | uppercase }}</h1>

        . Fará a saída do nome ficar maiúsculo "MARCO ANTONIO"

        <h1>{{ dataAniversario | date }}</h1>
    
        . Saída no padrão data "Nov 17, 1966"  

        <h1>{{preco | number}}  </h1>

        <h1>{{ troco | currency }}</h1>


Aula 11.07. Passando parâmetros para pipes
------------------------------------------

    . Altere a saída do nome como abaixo:

        <h1>{{ dataAniversario | date: "dd/MM/y" }}</h1>

        <h1>{{preco | number:"3.2-2"}}  </h1>

        <h1>{{ troco | currency:"BRL":true:"1.2-2" }}</h1>

    . Execute o projeto e verifique o resultado.


Aula 11.08. Desafio usando pipes
--------------------------------    

    . Acesse o arquivo src/app/app.module.ts e insira as linhas abaixo:

        import { LOCALE_ID } from '@angular/core';
        ...
        @NgModule({
            ...
            providers: [{provide: LOCALE_ID, useValue: 'pt-BR'}],
            ...
        })
        ...

        . Dessa forma será possível a troca do ponto pela virgula no padrão Brasil. 

    . Altere a coleção de dados do arquivo src/app/lancamentos-pesquisa/lancamentos-pesquisa.component.ts
        pelo abaixo:

        lancamentos: Lancamento[] = [
                    { tipo: 'DESPESA', descricao: 'Compra de pão', dataVencimento: new Date(2017, 6, 30),
                    dataPagamento: null, valor: 4.55, pessoa: 'Padaria do José' },
                    { tipo: 'RECEITA', descricao: 'Venda de software', dataVencimento: new Date(2017, 6, 10),
                    dataPagamento: new Date(2017, 6, 9), valor: 80000, pessoa: 'Atacado Brasil' },
                    { tipo: 'DESPESA', descricao: 'Impostos', dataVencimento: new Date(2017, 7, 20),
                    dataPagamento: null, valor: 14312, pessoa: 'Ministério da Fazenda' },
                    { tipo: 'DESPESA', descricao: 'Mensalidade de escola', dataVencimento: new Date(2017, 6, 5),
                    dataPagamento: new Date(2017, 5, 30), valor: 800, pessoa: 'Escola Abelha Rainha' },
                    { tipo: 'RECEITA', descricao: 'Venda de carro', dataVencimento: new Date(2017, 8, 18),
                    dataPagamento: null, valor: 55000, pessoa: 'Sebastião Souza' },
                    { tipo: 'DESPESA', descricao: 'Aluguel', dataVencimento: new Date(2017, 7, 10),
                    dataPagamento: new Date(2017, 7, 9), valor: 1750, pessoa: 'Casa Nova Imóveis' },
                    { tipo: 'DESPESA', descricao: 'Mensalidade musculação', dataVencimento: new Date(2017, 7, 13),
                    dataPagamento: null, valor: 180, pessoa: 'Academia Top' }
                ];

        . Todos os campos string que representam datas foram alterados para "new Date(...)".

    . Altere o formato dos campos datas e valores monetários do componente src/app/lancamentos-pesquisa/lancamentos-pesquisa.component.html
        pelo conteúdo abaixo:

        <p-column field="dataVencimento" header="Vencimento" styleClass="col-data">

          <ng-template let-lanc="rowData" pTemplate="body">
            {{lanc.dataVencimento | date:'dd/MM/y'}}
          </ng-template>

        </p-column>
        <p-column field="dataPagamento" header="Pagto" styleClass="col-data">

          <ng-template let-lanc="rowData" pTemplate="body">
            {{lanc.dataPagamento | date:'dd/MM/y'}}
          </ng-template>

        </p-column>
        <p-column field="valor" header="Valor" styleClass="col-valor">
            <ng-template let-lanc="rowData" pTemplate="body">
<!--              <span [ngStyle]="{ color: lanc.tipo === 'DESPESA' ? 'red' : 'blue' }">{{lanc.valor}}</span> -->
              <span [style.color]="lanc.tipo === 'DESPESA' ? 'red' : 'blue'">{{lanc.valor|currency:"BRL":true:"1.2-2"}}</span>
            </ng-template>
        </p-column>
        
        . Observe que foi colocado o "ng-template", responsável pela renderização dos campos dentro do datatable; e dentro deles os pipes
            para formatar os valores.

    . Altere o conteúdo do arquivo src/app/app.component.html pelo abaixo:

        <app-lancamentos-pesquisa></app-lancamentos-pesquisa>

    . Execute o projeto.


Aula 12.01. Introdução aos formulários
--------------------------------------

    . Num desenvolvimento de um sistema Web padrão, o código desenvolvido seria parecido com o abaixo:

        <form action="/cadastro" method="post">
            <input type="text" name="nome">
            <input type="text" name="email">
            <input type="text" name="profissao">

            <button type="submit">Salva</button>
        </form> 

        . Ao pressionar o botão o sistema envia os valores digitados dos campos para o servidor.

    . No desenvolvimento Angular ficaria como abaixo:

        <form #f="ngForm" (ngSubmit)="salvar(f)">
            <input type="text" name="nome">
            <input type="text" name="email">
            <input type="text" name="profissao">

            <button type="submit">Salva</button>
        </form> 

       . No angular não há um direcionamento dos dados para um servidor.

       . Ao invés disso, o angular cria um objeto com as informações do formulario:

            {
                ...
                value: {
                    nome: "João da Silva",
                    email: "joao.silva@gmail.com",
                    profissao: "Programador"
                }
            }

    . No angular existem duas formas de trabalhar com formulários:

        . Template-Driven Forms (Trabalhando com diretivas da forma como vimos até aqui)
        . Reactive Forms (Model-Driven). (Código typescript diretamente nas classes de componentes do forms)

    
Aula 12.02. Template-driven Forms Criando um formulário
-------------------------------------------------------

    . Suponhamos que o código abaixo estivesse no arquivo app.component.html:

        <div class="container">
            <form>
                <div class="form-group">
                    <label class="form-control-label">Nome</label>
                    <input type="text" class="form-control">
                </div>

                <div class="form-group">
                    <label class="form-control-label">Email</label>
                    <input type="text" class="form-control">
                </div>

                <div class="form-group">
                    <label class="form-control-label">
                        Profissões
                    </label>

                    <select class="form-control">
                        <option value="">Selecione</option>
                        <option>Engenheiro</option>
                        <option>Dentista</option>
                    </select>
                </div>

                <button type="submit" class="btn btn-primary">Salvar</button>
            </form>
        </div>

    . Do jeito que o código acima está, o formulário não está sendo controlado pelo angular. Para que isto ocorra precisamos
        ir no arquivo app.module.ts e adicionar nos "imports:" o "FormsModule".

        ...
        @NgModule({
            ...
            imposts: [
                BrowserModule,
                FormsModule
            ]

        })

    . Para saber se o formulário está, ou não, sendo gerenciado pelo Angular basta verificar se a tela sofre refresh quando 
        pressionamos o botão "Salvar". Após incluirmos o "FormsModule" nos "imports" verificaremos que não ocorrerá mais o refresh,
        agora a aplicação se tornou SPA.

    . A partir desse momento temos condições de utilizar os recursos do angular, por exemplo:

        . Na tag form adicione o databinding "ngSubmit":

            <form (ngSubmit)="salvar()">

        . No componente associado a página coloque método "salvar":

            ...
            export class AppComponent{

                salvar(){
                    console.log('Salvando');
                }
            }

        . Execute o projeto, pressione o botão salvar, vá no console log do navegador e verifique se a mensagem "Salvando" está aparecendo.

    . Altere o formulário como abaixo:

        . Incremente uma variável de referência e inclua ela como parâmetro da chamada salvar na tag form:

            <form #usuarioForm (ngSubmit)="salvar(usuarioForm)">

        . Adicione na assinatura do método salvar o parâmetro form como abaixo:

            ...
            salvar( form: any){
                console.log( form );
            }

        . Ao executar o projeto veremos na console do navegador o retorno do elemento form do HTML.

        . Altere novamente a tag HTML form como abaixo:

            <form #usuarioForm="ngForm" (ngSubmit)="salvar(usuarioForm)">

        . Ao executar novamento o projeto veremos que agora o retorno será o objeto form

        . Se abrirmos as propriedades do formulário (controls e values), não encontraremos os campos porque eles não estão sendo gerenciados pelo angular.
            Para que isso ocorra é necessário identificá-los para o Angular como fizemos com a tag "form".

        . Por fim, podemos alterar a assinatura do método salvar, mudando de "any" para "NgForm".


Aula 12.03. Registrando os controles do formulário
--------------------------------------------------

    . Quando consultamos os detalhes dos campos do formulário na console do navegador não aparece, porque eles não estão
        registrados no controle do angular. Para que isto ocorra é necessário colocar a identificação "ngModel" em cada campo como abaixo:

        ...
        <input type="text" class="form-control" name="nome" ngModel>

        ...
        <input type="text" class="form-control" name="email" ngModel>

        ...
        <select class="form-control" name="profissao" ngModel>
            <option value="">Selecione</option>
            <option>Engenheiro</option>
            <option>Dentista</option>
        </select>

        . Não confundir o ([ngModel]) que é um data binding com a identificação ngModel que é um identificador que permitirá acessar as propriedades do objeto

        . Quando utilizamos o ngModel é obrigatorio identificar cada objeto com a propriedade "name"
         
    . Execute o projeto, vá na console, consulte as informações do "form" e vá nos "values". Se tudo deu certo, no nó "values" aparecerá o conteúdo dos campos.


    . Retorne a classe *.component.ts responsável pelo html e inclua a linha para apresentar um dos conteúdos dos campos:

        ...
        salvar( form: any){
            console.log( form );
            console.log( form.value.nome );
        }

    . Execute o projeto, vá na console, consulte as informações do "form" e vá nos "values". 

        IMPORTANTE: Quando for consultar o resultado dos "values" clique ao lado da propriedade "values" nos "{...}"

Aula 12.04. Adicionando opções dinâmicas no campo de seleção
------------------------------------------------------------

    . Acesse o componente *.component.ts responsável pelo html e inclua a array abaixo:

        ...
        export class AppComponent{

            profissoes = ['Programador','Empresário','Outra'];

            ...
        }

    . Retorne a classe html e altere o bloco da tag "select" como abaixo, observe o uso do "*ngFor":

        <select class="form-control" name="profissao" ngModel>
            <option value="">Selecione</option>
            <option *ngFor="let profissao of profissoes">{{ profissao }}</option>
            
            <!-- Abaixo outra forma de atualizar o valor do option, através de um property binding  -->
            <!-- <option *ngFor="let profissao of profissoes" [value]="profissao"></option> -->
        </select>


Aula 12.05. Definindo o valor padrão em campos com ngModel (One way data binding)
----------------------------------------------------------

    . Altere o ngModel pelo [ngModel] como abaixo

        <select class="form-control" name="profissao" [ngModel]="'Empresário'" >
            <option value="">Selecione</option>
            <option *ngFor="let profissao of profissoes">{{ profissao }}</option>
            
            <!-- Abaixo outra forma de atualizar o valor do option, através de um property binding  -->
            <!-- <option *ngFor="let profissao of profissoes" [value]="profissao"></option> -->
        </select>

        . Quando executar a lista ficará para na opção "Empresário", porque foi definido como uma constante 'Empresário' entre aspas.

        . Porque "One way data binding"? porque é utilizado somente o "[" e não "([".

    . Outra forma para se fazer isto seria criar uma propriedade na classe *.component.ts e apontar no componente *.component.html:

        <select class="form-control" name="profissao" [ngModel]="profissao" >
            <option value="">Selecione</option>
            <option *ngForm="let profissao of profissoes">{{ profissao }}</option>
            
            <!-- Abaixo outra forma de atualizar o valor do option, através de um property binding  -->
            <!-- <option *ngForm="let profissao of profissoes" [value]="profissao"></option> -->
        </select>


        ...
        export class AppComponent{

            profissoes = ['Programador','Empresário','Outra'];
            profissao = 'Outra';

            ...
        }


Aula 12.06. Two-way binding com ngModel
---------------------------------------

    . Retorne ao componente *.component.html e defina um nome para cada input do formulário:

        <div class="form-group">
            <label class="form-control-label">Nome</label>
            <input type="text" class="form-control" name="nome">
        </div>

        <div class="form-group">
            <label class="form-control-label">Email</label>
            <input type="text" class="form-control" name="email">
        </div>

        <div class="form-group">
            <label class="form-control-label">
                Profissões
            </label>

            <select class="form-control" name="profissao">
                <option value="">Selecione</option>
                <option>Engenheiro</option>
                <option>Dentista</option>
            </select>
        </div>



    . Acesse a classe *.component.ts e inclua a classe "Cliente" como abaixo:

        import ...
        ...
        class Cliente {
            nome: string;
            email: string;
            profissao: string;
        }

        @Component({
            ...
        })

        export class AppComponent{
            cliente: Cliente = new Cliente();


            ...
            salvar( form: NgForm ){
                this.cliente.nome = form.value.nome;
                this.cliente.email = form.value.email;
                this.cliente.profissao = form.value.profissao;

                console.log(form);
                console.log(this.cliente);
            }

        }

        . No desenvolvimento de projeto adote como padrão a definição de classes dentro do componente e armazene
            os dados do formulários nessas classes.

    . Execute o projeto e veja o resultado.

    . Adicione a consulta dos dados da classe no formulário como abaixo:

        <div class="container">
            {{ cliente | json }}

            <form>
                ...
            </form>
        <div>

    . Mudando para Two way databinding:

        . Comente a atualização das informações da classe Cliente no método salvar:

            ...
            salvar( form: NgForm ){
                // this.cliente.nome = form.value.nome;
                // this.cliente.email = form.value.email;
                // this.cliente.profissao = form.value.profissao;

                console.log(form);
                console.log(this.cliente);
            }

        . Retorne ao componente *.component.html e defina um nome para cada input do formulário:

            <input type="text" class="form-control" name="nome" [(ngModel)]="cliente.nome">

            <input type="text" class="form-control" name="email" [(ngModel)]="cliente.email">

            <select class="form-control" name="profissao" [(ngModel)]="cliente.profissao">
                <option value="">Selecione</option>
                <option>Engenheiro</option>
                <option>Dentista</option>
            </select>

    . Execute o projeto e veja o resultado.


Aula 12.07. Adicionando validação em formulários
------------------------------------------------

    . Retorne ao componente *.component.html e faça as alterações abaixo:

        . Inclua o data binding {{ usuarioForm.valid }}

            <div class="container">
                {{ cliente | json }}
                {{ usuarioForm.valid }}
                
                <form>
                    ...
                </form>
            <div>

        . Altere a tag input abaixo colocando as propriedades de validação (required minlength):

            <input type="text" 
                    class="form-control" 
                    name="nome" 
                    [(ngModel)]="cliente.nome"
                    required
                    minlength="10">

            <input type="text" 
                    class="form-control" 
                    name="email" 
                    [(ngModel)]="cliente.email"
                    required
                    email>

            <select class="form-control" 
                    name="profissao" 
                    [(ngModel)]="cliente.profissao"
                    required>

        . Execute o projeto e verifique se o formulário ficou valido conforme as validações de obrigatoriedade.

    . Habilite o botão de salvar conforme o formulário fique válido:

        <button type="submit"
                class="btn btn-primary"
                [disabled]="!usuarioForm.valid || cliente.profissao == 'Selecione um Item'">Salvar</button>

        . Execute o projeto e verifique se o formulário ficou valido conforme as validações de obrigatoriedade.
 
    . Existem diversos outros validadores, acesse https://v4.angular.io/api?query=pipe    

        . Acesse no menu no canto esquerdo a opção "API"

        . No campo "Filter" digite "valid" e veja todas as opções.


https://www.toptal.com/angular-js/angular-4-forms-validation
https://www.digitalocean.com/community/tutorials/angular-reactive-forms-custom-validator



Aula 12.08. Exibindo erro de validação do formulário de forma global
--------------------------------------------------------------------

    . Retorne ao *.component.html, elimine as interpolações "{{ }}" existente no formulário e insira a "<div>" 
        da mensagem de erro:

            <div class="container">
                <div *ngIf="usuarioForm.invalid" class="alert alert-danger">
                    Preencha todos os campos corretamente.
                </div>

                <form #usuarioForm="ngForm" (ngSubmit)="salvar(usuarioForm)">
                    ...
                </form>
            <div>

    . Execute o projeto, digite as informações dos campos e veja o resultado.

    . Detalhe, para se eliminar o autocomplete padrão dos campos input basta colocar a propriedade "autocomplete='off'"

        <input type="text" 
                class="form-control" 
                name="nome" 
                [(ngModel)]="cliente.nome"
                required
                minlength="10"
                autocomplete="off">


Aula 12.09. Exibindo erro de validação de controles do formulário de forma individual
-------------------------------------------------------------------------------------

    . Acrescente o ngModel em todos os campos "inputs" do formulário:

            <input type="text" 
                    class="form-control" 
                    name="nome" 
                    [(ngModel)]="cliente.nome"
                    required
                    minlength="10"
                    autocomplete="off"
                    #nome="ngModel">    <!-- ngModel acrescentado -->

            <input type="text" 
                    class="form-control" 
                    name="email" 
                    [(ngModel)]="cliente.email"
                    required
                    email
                    autocomplete="off"
                    #email="ngModel">    <!-- ngModel acrescentado -->

            <select class="form-control" 
                    name="profissao" 
                    [(ngModel)]="cliente.profissao"
                    required
                    #profissao="ngModel">    <!-- ngModel acrescentado -->

    . Acrescente a mensagem de alerta de informação inválida no input nome:

            <input type="text" 
                    class="form-control" 
                    name="nome" 
                    [(ngModel)]="cliente.nome"
                    required
                    minlength="10"
                    autocomplete="off"
                    #nome="ngModel">

            <div *ngIf="nome.invalid">    <!-- Mensagem acrescentada -->
                Informe um nome válido
            </div>

    . Execute o projeto e veja o resultado.

    . Faça o mesmo procedimento para os demais inputs

    . OUtra maneira de apresentar mensagem de informação inválida:

        . Substitua a div de mensagem inválida anterior pela abaixo:

            <div *ngIf="nome.hasError('required')">    <!-- Alterado pelo *.hasError -->
                Informe um nome com conteúdo
            </div>

            <div *ngIf="nome.hasError('minlength')">    <!-- Alterado pelo *.hasError -->
                Informe um nome com ao menos 10 dígitos
            </div>

    . Execute o projeto e veja o resultado.

    . Faça o mesmo procedimento para os demais inputs


Aula 12.10. Rastreando o estado em controles do formulário
----------------------------------------------------------

    . O angular possui propriedades que nos auxilia na verificação se já passamos com o cursor pelos campos:

        . Acrescente as interpolações e acrescente elas na condição do *ngIf como abaixo:

            <input type="text" 
                    class="form-control" 
                    name="nome" 
                    [(ngModel)]="cliente.nome"
                    required
                    minlength="10"
                    autocomplete="off"
                    #nome="ngModel">

            <!-- Interpolações incluidas -->

            <!-- Se o cursor já passou pelo campo -->
            Touched: {{nome.touched}}<br>

            <!-- Algo que está intacto, que não foi mexido -->
            Pristine: {{nome.pristine}}<br>

            <!-- Algo que está sujo, que já foi mexido -->
            Dirty: {{nome.dirty}}

            <div *ngIf="nome.hasError('required') && nome.touched">    <!-- incluido nome.touched -->
                Informe um nome com conteúdo
            </div>

            <div *ngIf="nome.hasError('minlength') && nome.touched">    <!-- incluido nome.touched -->
                Informe um nome com ao menos 10 dígitos
            </div>

            . Pristine e Dirty serão sempre contrários um do outro. Se um for verdadeiro, o outro será falso e vice-versa.

    . Execute o projeto e veja o resultado:

    . Altere o ngIf, substituindo o *.touched pelo *.dirty

        <div *ngIf="nome.hasError('required') && nome.dirty" class="form-control-feedback">    <!-- alterado nome.dirty -->
            Informe um nome com conteúdo
        </div>

        <div *ngIf="nome.hasError('minlength') && nome.dirty" class="form-control-feedback">    <!-- alterado nome.dirty -->
            Informe um nome com ao menos 10 dígitos
        </div>

    . Faça o mesmo procedimento para os demais input.

    . Execute o projeto e veja o resultado:

    . Altere a mensagem principal do formulário apresentado na aula 12.8 como abaixo:

        <div class="container">

            <!-- Observe que foi acrescentado a condição a expressão "usuarioForm.dirty" -->

            <div *ngIf="usuarioForm.invalid && usuarioForm.dirty" class="alert alert-danger">
                Preencha todos os campos corretamente.
            </div>

            <form #usuarioForm="ngForm" (ngSubmit)="salvar(usuarioForm)">
                ...
            </form>
        <div>

    . Execute o projeto e veja o resultado.

    . Utilize o usuarioForm.touched no lugar usuarioForm.dirty


    . Se quiser deixar mais simples a validação, podemos utilizar a expressão do *ngIf com o ".invalid", exemplo:

          <div class="alert alert-danger"
                *ngIf="profissao.invalid">

            <!-- *ngIf="profissao.hasError('required') && profissao.dirty"> -->
            Escolha um item da lista de profissões
          </div>

    . A URL abaixo mostra as diversas forma para se fazer validações nos vários tipos de input type:

        https://www.concretepage.com/angular-2/angular-2-4-required-validation-example#Select-Element


Aula 12.11. Estilizando os campos inválidos com classes CSS do Angular
----------------------------------------------------------------------

    . Sempre que entramos na edição de qualquer campo, o angular coloca automaticamente classes nesses campos. Essas
        classes não são definidas em nenhum lugar, elas são somente inseridas nos campos para que possamos defini-las de 
        acordo com a nossa vontade.

    . Podemos colocar o valor dessas classes no arquivo style.css, ou diretamente no arquivo "*.component.css":

        /* Faz uso do css abaixo para os inputs invalidos e que não foram tocados */

        input.ng-invalid.ng-touched, select.ng-invalid.ng-touched{
            border: 1px solid red;
        }

    . Execute o projeto e veja o resultado.


Aula 12.12. Estilizando os campos inválidos com Bootstrap
---------------------------------------------------------

    . Apague o conteúdo digitado na aula anterior.

        <div class="container">

            {{ cliente | json }} <br>
            {{ usuarioForm.valid }} <br>

            <div *ngIf="usuarioForm.invalid && usuarioForm.dirty" class="alert alert-danger">
                Preencha os dados corretamente
            </div>

            <form #usuarioForm="ngForm"
                    (ngSubmit)="salvar(usuarioForm)">
                <div class="form-group">
                    <label>Nome</label>
                    <input type="text"
                            class="form-control"
                            id="nome"
                            name="nome"
                            [(ngModel)]="cliente.nome"
                            required
                            minlength="10"
                            autocomplete="off"
                            #nome="ngModel"
                            [class.is-invalid]="nome.invalid && nome.touched">                        <!-- Adicionado -->

                    <div *ngIf="nome.hasError('required') && nome.dirty" class="invalid-feedback">    <!-- Alterado pelo *.hasError -->
                        Informe um nome com conteúdo
                    </div>

                    <div *ngIf="nome.hasError('minlength') && nome.dirty"  class="invalid-feedback">    <!-- Alterado pelo *.hasError -->
                        Informe um nome com ao menos 10 dígitos
                    </div>
                </div>

                <div class="form-group">
                    <label>Email</label>
                    <input type="text"
                            class="form-control"
                            name="email"
                            [(ngModel)]="cliente.email"
                            required
                            email
                            autocomplete="off"
                            #email="ngModel"
                            [class.is-invalid]="nome.invalid && nome.touched">                              <!-- Adicionado -->

                    <div class="invalid-feedback"
                            *ngIf="email.hasError('required') && email.dirty">
                        Informe um email com conteúdo
                    </div>

                    <div class="invalid-feedback"
                            *ngIf="email.hasError('email') && email.dirty">
                        Informe um email válido
                    </div>
                </div>

                <div class="form-group">
                    <label>
                        Profissões
                    </label>

                    <select class="form-control"
                            name="profissao"
                            [(ngModel)]="cliente.profissao"
                            required
                            #profissao="ngModel"
                            [class.is-invalid]="profissao.invalid && profissao.touched">
                        <option value="">Selecione um Item</option>

                        <option *ngFor="let profissao of profissoes" [value]="profissao">{{profissao}}</option>
                    </select>

                    <div class="invalid-feedback"
                            *ngIf="profissao.invalid && profissao.touched">

            <!--            *ngIf="profissao.hasError('required') && profissao.dirty"> -->
                        Escolha um item da lista de profissões
                    </div>
                </div>

                <button type="submit"
                        class="btn btn-primary"
                        [disabled]="!usuarioForm.valid || cliente.profissao == 'Selecione um Item'">Salvar</button>
            </form>
        </div>


    . Execute o projeto e veja o resultado.


Aula 12.13. Limpando formulários (reset)
----------------------------------------

    . O objetivo seria apagar o conteúdo dos campos após clicar no botão salvar.

    . Uma forma fácil de fazer isso seria atualizar a classe cliente do componente com um novo objeto no método salvar:

            ...
            export class AppComponent{

                salvar(form: NgForm){
                    console.log(form);

                    this.cliente = new Cliente();
                }
            }

        . Reinicialize o conteúdo do método salvar, retirando a criação do objeto this.cliente colocando no lugar o comando "form.reset()":

            salvar(form: NgForm){
                console.log(form);

                form.reset({ profissao: '' });
            }

            . O método form.reset() é melhor do que a primeira solução, porque ele renova os estados dos campos (touched, pristini e dirty)

            . O método form.reset() além de reiniciar o formulário ele também renova o objeto, sem a necessidade criar um novo objeto.

            . O método form.reset() pode receber como parâmetro os campos com seus valores no padrão JSon.


Aula 13.01. Criando o protótipo do formulário de cadastro de lançamentos
------------------------------------------------------------------------

    . Acesse a pasta raiz do projeto das aulas das aula 10 e digite o comando abaixo:

        ng g c lancamento-cadastro --spec=false

    . Digite acesse o arquivo lancamento-cadastro.component.html e digite o código abaixo:

        <div class="container">
            <form>
                <div class="ui-g">
                    <div class="ui-g-12">
                        <h1>Novo Lançamento</h1>
                    </div>

                    <div class="ui-g-6 ui-md-3 ui-fluid">
                        <label>Vencimento</label>
                        <input type="text" pInputText>
                    </div>

                    <div class="ui-g-6 ui-md-3 ui-fluid">
                        <label>Recebimento</label>
                        <input type="text" pInputText>
                    </div>

                    <div class="ui-g-12 ui-md-9 ui-fluid">
                        <label>Descrição</label>
                        <input type="text" pInputText>
                    </div>

                    <div class="ui-g-12 ui-md-3 ui-fluid">
                        <label>Valor</label>
                        <input type="text" pInputText placeholder="0,00">
                    </div>
                    <div class="ui-g-12 ui-md-6 ui-fluid">
                        <label>Categoria</label>
                        <input type="text" pInputText>
                    </div>
                    <div class="ui-g-12 ui-md-6 ui-fluid">
                        <label>Pessoa</label>
                        <input type="text" pInputText>
                    </div>
                    <div class="ui-g-12 ui-fluid">
                        <label>Observação</label>
                        <textarea  pInputTextArea row="3 "></textarea>
                    </div>
                    <div class="ui-g-12">
                        <button pButton type="submit" label="Salvar"></button>
                        <button pButton type="button" label="Novo" class="ui-button-info"></button>
                        <a href="javascrip:;">Voltar para a pesquisa</a>
                    </div>
                </div>
            </form>
        </div>

    . Acesse o componente app.componet.html e digite o código abaixo:

        <app-navbar></app-navbar>

        <app-lancamento-cadastro></app-lancamento-cadastro>


    . Acesse o app.module.ts, insira no item "imports: [ ..., InputTextareaModule ] e faça o import "import { InputTextareaModule } from 'primeng/components/inputtextarea/inputtextarea'"

    . Execute o projeto e veja o resultado.

Aula 13.02. Adicionando seletor de data (componente Calendar)
-------------------------------------------------------------

    . Acesse o componente app.module.ts e faça o import do "CalendarModule"

        ...
        import { CalendarModule } from 'primeng/coponents/calendar/calendar';
        import { BrowserAnimationsModule } from '@angular/plataform-browser/animations';

        impots: [
            ...
            CalendarModule,
            BrowserAnimationsModule
        ]

    . Substitua o "input text" do nosso protótipo que representam datas pelo código abaixo:

        <div class="ui-g-6 ui-md-3 ui-fluid">
            <label>Vencimento</label>
            <p-calendar dateFormat="dd/mm/yy"></p-calendar>
        </div>

        <div class="ui-g-6 ui-md-3 ui-fluid">
            <label>Pagamento</label>
            <p-calendar dateFormat="dd/mm/yy"></p-calendar>
        </div>

    . Execute o projeto e veja o resultado do campo "Vencimento"

    . Algumas propriedades que podem ser usadas na tag <p-calendar>:

        [readonlyInput]="true"  // O campo deixa de ser editável, permitindo somente a escolha da data pelo calendar
        [inline]="true"         // Deixa de mostrar o campo input da data, aparece somente o calendar para escolher.
        [showIcon]="true"       // Serve para mostrar o icone ao lado do calendário

    . Acesse o arquivo style.css do projeto e deixe a propriedade da tag "a" como abaixo:



Aula 13.03. Adicionando botão de seleção
----------------------------------------

    . Acesse o componente app.module.ts e faça o import do "SelectButtonModule"

        ...
        import { SelectButtonModule } from 'primeng/components/selectbutton/selectbutton'

        impots: [
            ...
            SelectButtonModule
        ]

    . Acrescente o selectbutton em nossa página lancamento-cadastro.component.html:

        <div class="container">
            <form>
                <div class="ui-g">
                    <div class="ui-g-12">
                        <h1>Novo Lançamento</h1>
                    </div>

                    <div class="ui-g-12">
                        <p-selectButton [options]="tipos" #tipo></p-selectButton>
                    </div>

                    ...
                
    . Acesse o componente lancamento-cadastro.component.ts e inclua o array abaixo:

        ...
        export class LancamentoCadastroComponent implements OnInit{

            tipos = [
                        { label: 'Receita', value: 'RECEITA'},
                        { label: 'Despesa', value: 'DESPESA'}
            ]

        }
        ...

    . Altere a label da tag de Recebimento pelo código abaixo:

        ...
        <div class="ui-g-6 ui-md-3 ui-fluid">
            <label>{{tipo.value == 'RECEBIMENTO' ? 'Recebimento' : 'Pagamento' }}</label>
            <input type="text" pInputText>
        </div>
        ...

Aula 13.04. Adicionando caixa de seleção (componente Dropdown)
--------------------------------------------------------------

    . Acesse o componente "lancamento.cadastro.component.ts" e adicione o código abaixo:

        ...
        export class LancamentoCadastroComponent implements OnInit{
            ...

            categorias = [  { label: 'Selecione', value: 0},
                            { label: 'Alimentação', value: 1},
                            { label: 'Transporte', value: 2},
                            { label: 'Água', value: 3},
                            { label: 'Luz', value: 4},
                            { label: 'Telefone', value: 5}
                        ];

            pessoas = [
                            {label: 'João da Silva', value: 1 },
                            {label: 'Sebastião Souza', value: 2 }
                            {label: 'Jose da Silva', value: 3 },
                            {label: 'Maria Jose Souza', value: 4 }
            ]
        }

    . Acesse o componente app.module.ts e faça o import do "DropDownModule"

        ...
        import { DropdownModuleModule } from 'primeng/components/dropdown/dropdown';

        impots: [
            ...
            DropDownModule
        ]

    . Acesse o componente lancamento-cadastro.component.html e substitua o input "Categoria" pelo código abaixo:

        ...
        <p-dropdown [options]="categorias" 
                    [autoWidth]="false" 
                    placeholder="Selecione">
        </p-dropdown>
        ...
    
        . A prorpriedade [autoWidth] informa ao angular para que a tag ocupe 100% do espaço da grid e não o deixe ocupando somente
            o tamanho do maior item da lista.

        . "placeholder" coloca um item de acordo com o que foi definido nesta propriedade "Selecione". Com isso, deixa de existir a necessidade
            de colocarmos mais um item com essa descrição na lista.

    . Execute o projeto e veja o resultado.

    . Apresentando o valor do item escolhido, altere o a tag da categoria conforme abaixo:


        ...
        <label>Categoria {{ categoria.value }}</label>
        <p-dropdown [options]="categorias" 
                    [autoWidth]="false" 
                    placeholder="Selecione"
                    #categoria>
        </p-dropdown>
        ...

    . Execute o projeto e veja o resultado.

    . Altere o conteúdo da tag "Pessoa" pelo código abaixo:

        ...
        <label>Pessoa {{ pessoa.value }}</label>
        <p-dropdown [options]="pessoas" 
                    [autoWidth]="false" 
                    placeholder="Selecione"
                    [filter]="true"
                    #pessoa>
        </p-dropdown>
        ...

        . A propriedade "filter" nos dá acesso a input text dentro do Dropdown para digitarmos um conteúdo e filtrar a lista com o que foi digitado.

        . Passo opcional: Para melhorar a estética do objeto dropdown, acesse o arquivo "style.css" e digite o conteúdo abaixo:

            .ui-dropdown-filter-container{
                width: 100%;
            }

            . Esse style servirá para o input:text que se abre dentro do dropdown ocupe 100% do espaço dentro do dropdown.

        
Aula 13.05. Adicionando máscara de dinheiro com ng2-mask-money
--------------------------------------------------------------

    . Na pasta raiz do projeto execute os comandos abaixo:

        $ npm i ng2-currency-mask@4.4.1 --save

    . Acesse o componente app.module.ts e faça o import do "CurrencyMaskModule"

        ...
        import { CurrencyMaskModule } from 'ng2-currency-mask'

        impots: [
            ...
            CurrencyMaskModule
        ]

    . Acesse a tag "Valor" no arquivo lancamento-cadastro.component.html e substitua pelo código abaixo:

        ...
        <div class="ui-g-12 ui-md-3 ui-fluid">
            <label>Valor</label>
            <input type="text" pInputText placeholder="0,00" currencyMask>
        </div>
        ...

        . Observe que foi inserido o atributo "currencyMask" na tag input

    . Execute o projeto e veja o resultado.

    . Acesse a tag "Valor" no arquivo lancamento-cadastro.component.html e substitua pelo código abaixo:

        ...
        <div class="ui-g-12 ui-md-3 ui-fluid">
            <label>Valor</label>
            <input type="text" 
                    pInputText 
                    placeholder="0,00" 
                    currencyMask
                    [options]="{ prefix: 'R$', thousands: '.', decimal: ',', allowNegative: false}>
        </div>
        ...

        . Observe que foi colocado o databinding [options] para configurar o padrão monetário brasileiro.

    . Execute o projeto e veja o resultado.

    . Acesse o link "https://www.npmjs.com/package/ng2-currency-mask/v/4.4.1" para mais detalhes 


Aula 13.06. Desafio criando o protótipo do formulário de cadastro de pessoa
---------------------------------------------------------------------------

    . Acesse o prompt da pasta raiz do projeto e digite o comando abaixo:

        $ ng g c pessoa-cadastro --spec=false

    . Acesse o componente pessoa-cadastro.component.html e digite o código abaixo:

        <div class="container">
            <form>
                <div class="ui-g">
                <div class="ui-g-12">
                    <h1>Cadastramento de Pessoa</h1>
                </div>

                <div class="ui-g-12 ui-md-12 ui-fluid">
                    <label for="nome">Nome</label>
                    <input type="text" name="nome" id="nome" pInputText autocomplete="off">
                </div>

                <div class="ui-g-10 ui-md-7 ui-fluid">
                    <label for="cidade">Cidade</label>
                    <input type="text" name="cidade" id="cidade" pInputText autocomplete="off">
                </div>


                <div class="ui-g-2 ui-md-2 ui-fluid">
                    <label>Estado {{ estado.value }}</label>
                    <p-dropdown [options]="estados"
                                [autoWidth]="false"
                                [placeholder]="Selecione"
                                [filter]="true"
                                #estado></p-dropdown>
                </div>
                <div class="ui-g-1 ui-md-2 ui-fluid" style="padding: 25px;">
                    <p-checkbox name="status" id="status" value="ATIVO" label="Ativo"></p-checkbox>
                </div>
                </div>
            </form>
        </div>

    . Acesse o componente pessoa-cadastro.component.ts e digite o código abaixo:

        import { Component, OnInit } from '@angular/core';

        @Component({
            selector: 'app-pessoa-cadastro',
            templateUrl: './pessoa-cadastro.component.html',
            styleUrls: ['./pessoa-cadastro.component.css']
        })
        export class PessoaCadastroComponent implements OnInit {

            estados = [
                        {label: 'Selecione', value: ''},
                        {label: 'AC', value: 'Acre'},
                        {label: 'AL', value: 'Alagoas' },
                        {label: 'AP', value: 'Amapá' },
                        {label: 'AM', value: 'Amazonas' },
                        {label: 'BA', value: 'Bahia' },
                        {label: 'CE', value: 'Ceará' },
                        {label: 'DF', value: 'Distrito Federal' },
                        {label: 'ES', value: 'Espírito Santo' },
                        {label: 'GO', value: 'Goiás' },
                        {label: 'MA', value: 'Maranhão' },
                        {label: 'MT', value: 'Mato Grosso' },
                        {label: 'MS', value: 'Mato Grosso do Sul' },
                        {label: 'MG', value: 'Minas Gerais' },
                        {label: 'PA', value: 'Pará' },
                        {label: 'PB', value: 'Paraíba' },
                        {label: 'PR', value: 'Paraná' },
                        {label: 'PE', value: 'Pernambuco' },
                        {label: 'PI', value: 'Piauí' },
                        {label: 'RJ', value: 'Rio de Janeiro' },
                        {label: 'RN', value: 'Rio Grande do Norte' },
                        {label: 'RS', value: 'Rio Grande do Sul' },
                        {label: 'RO', value: 'Rondônia' },
                        {label: 'RR', value: 'Roraima' },
                        {label: 'SC', value: 'Santa Catarina' },
                        {label: 'SP', value: 'São Paulo' },
                        {label: 'SE', value: 'Sergipe' },
                        {label: 'TO', value: 'Tocantins' }
                        ];

                pessoa = { nome: '', cidade: '', estado: '', status: '' };


            constructor() { }

            ngOnInit() {
            }
        }

    . Execute o projeto e veja o resultado.




Aula 13.07. Adicionando campo com máscara (componente InputMask)
----------------------------------------------------------------

    . Acesse o componente app.module.ts e faça o import do "InputMaskModule"

        ...
        import { FormsModule } from '@nagular/forms';

        impots: [
            ...
            InputMaskModule
        ]

    . Acesse a tag "Valor" no arquivo *** pessoa-cadastro.component.html *** e substitua pelo código abaixo:

        ...
        <div class="ui-g-12 ui-md-3 ui-fluid">
            <label>CEP</label>
            <input type="text" pInputText placeholder="0,00" currencyMask>
            <p-inputMask mask="99099-999"></p-InputMask>
        </div>
        ...

    . Execute o projeto e veja o resultado.


Aula 13.08. Validando controles de formulário com PrimeNG
---------------------------------------------------------

    . Acesse a tag descrição do arquivo *** lancamento-cadastro.component.html *** e subsitua pelo código abaixo:

        <div class="ui-g-12 ui-md-9 ui-fluid">
            <label>Descrição</label>
            <input type="text" 
                    pInputText 
                    name="descricao" 
                    ngModel
                    #descricao="ngModel"
                    required
                    minlength="5">
        </div>

    . Para testar a situação de validação insira a interpolação abaixo e execute o projeto:

        <div class="ui-g-12 ui-md-9 ui-fluid">
            <label>Descrição {{ descricao.errors | json }} </label>
            <input type="text" 
                    pInputText 
                    name="descricao" 
                    ngModel
                    #descricao="ngModel"
                    required
                    minlength="5">

            <div class="ui-message ui-message-error" 
                    *ngIf="descricao.hasError('required') && descricao.dirty">
                Informe uma descrição válida
            </div>

            <div class="ui-message ui-message-error" 
                    *ngIf="descricao.hasError('minlength') && descricao.dirty">
                Mínimo de {{ descricao.errors.minlength.requiredLength }} caracteres
            </div>
        </div>

        . Observe que na mensagem de validação foi utilizado a interpolação {{ descricao.errors.minlength.requiredLength }}.
            Com isso não precisamos nos preocupar em colocar a quantidade de digitos, pois dessa forma ela vem automaticamente.

        . Para que a validação funcione precisamos seguir os passos abaixo:

            . Na tag de input devemos colocar:

                name="descricao"
                ngModel = Para que o campo seja gerenciado pelo angular
                #descricao="ngModel" = declarando uma variavel para que esse campo posso ser referenciado em outros lugares.
                requerid
                minlength

            . Inserir as mensagens de validação

                <div class="ui-message ui-messages-error" 
                        *ngIf="descricao.hasError('required') && descricao.dirty">
                    Informe uma descrição válida
                </div>

                <div class="ui-message ui-messages-error" 
                        *ngIf="descricao.hasError('minlength') && descricao.dirty">
                    Mínimo de 5 caracteres
                </div>

    . Execute o projeto e veja o resultado.

    . O campo "Valor" está dando erro na console. Para fazer parar esse erro temos que colocar as propriedades:

        ngModel

        name="valor"


        ...
        <div class="ui-g-12 ui-md-3 ui-fluid">
            <label>Valor</label>
            <input type="text" 
                    pInputText 
                    placeholder="0,00" 
                    currencyMask
                    [options]="{ prefix: 'R$', thousands: '.', decimal: ',', allowNegative: false}
                    ngModel
                    name="valor">
        </div>
        ...


Aula 13.09. Criando componente de mensagem de erro de validação
---------------------------------------------------------------

    . Acesse a pasta raiz do projeto e digite o comando abaixo:

        ng g c message --spec=false --inline-template --inline-style

        . inline-template e inline_style especifica para criar essas componentes dentro do arquivo *.component.ts e deixa de ser criado
            separadamente.

    . Acesse o arquivo criado "message.component.ts" e substitua pelo código abaixo:

        import { Component } from '@angular/core';

        @Component({
            selector: 'app-message',
            template: `<div class="ui-message ui-messages-error" 
                        *ngIf="temErro()">
                    {{ text }}
                </div>`,
            styles: [`
                        .ui-messages-error{
                            margin: 0;
                            margin-top: 4px;
                        } 
                    `       
            ]
        })

        // O style .ui-messages-error é para deixar a mensagem em baixo do campo input mais legível.

        export class MessageComponent{
            @Input() error: string;
            @Input() control: FormControl;
            @Input() text: string;

            tempErro(): boolean{
                return this.control.hasError(this.error) && this.control.dirty;
            }

        }


    . Acesse o componente lancamento-cadastro.component.html e insira a tag "<app-message...>" como abaixo:

        ...
        <div class="ui-g-12 ui-md-9 ui-fluid">
            <label>Descrição {{ descricao.errors | json }} </label>
            <input type="text" 
                    pInputText 
                    name="descricao" 
                    ngModel
                    #descricao="ngModel"
                    required
                    minlength="5">

            <app-message [control]="descricao" 
                            error="required" 
                            text="Informe uma descrição"></app-message>

            <app-message [control]="descricao" 
                            error="minlength" 
                            text="Mínimo de {{ descricao.errors?.minlength?.requiredLength }} caracteres"></app-message>
        </div>

        . O objetivo é retirar as divs de mensagem e colocar as tags de mensagem em seu lugar.

        . Observe as interrogações dentro da interpolação {{ descricao.errors?.minlength?.requiredLength }}. Isso ocorre para evitar
            erros em tempo de execução, pois se a expressão for avaliada quando o input estiver nulo dara erro e quebrará a página.
            Colocando-se "?" diz ao angular se caso estiver nulo o conteúdo até aquele momento é para não continuar a expressão.

        . As tags <app-message> substituiu as duas divs de mensagem:

            <div class="ui-message ui-message-error" 
                    *ngIf="descricao.hasError('required') && descricao.dirty">
                Informe uma descrição válida
            </div>

            <div class="ui-message ui-message-error" 
                    *ngIf="descricao.hasError('minlength') && descricao.dirty">
                Mínimo de {{ descricao.errors?.minlength?.requiredLength }} caracteres
            </div>


Aula 13.10. Desafio controles, validações e mensagens de erro
-------------------------------------------------------------

    . pessoa-cadastro.component.html

        <div class="container">
            <form>
                <div class="ui-g">
                <div class="ui-g-12">
                    <h1>Cadastramento de Pessoa</h1>
                </div>

                <div class="ui-g-12 ui-md-12 ui-fluid">
                    <label for="nome">Nome</label>
                    <input type="text"
                            name="nome"
                            id="nome"
                            pInputText
                            autocomplete="off"
                            ngModel
                            #nome="ngModel"
                            required
                            minlength=5>

                    <app-message [control]="nome"
                                error="required"
                                text="Informe um nome válido"></app-message>

                    <app-message [control]="nome"
                                error="minlength"
                                text="Mínimo de {{ nome.errors?.minlength?.requiredLength }} caracteres"></app-message>
                </div>

                <div class="ui-g-11 ui-md-11 ui-sm-9 ui-fluid">
                    <label for="logradouro">Logradouro</label>
                    <input type="text"
                            name="logradouro"
                            id="logradouro"
                            pInputText
                            autocomplete="off"
                            ngModel
                            #logradouro="ngModel"
                            required
                            minlength=5>
                    <app-message [control]="logradouro"
                                error="required"
                                text="Informe um logradouro válido"></app-message>

                    <app-message [control]="logradouro"
                                error="minlength"
                                text="Mínimo de {{ logradouro.errors?.minlength?.requiredLength }} caracteres"></app-message>
                </div>

                <div class="ui-g-1 ui-md-1 ui-sm-3 ui-fluid">
                    <label for="numero">No.</label>
                    <input type="text"
                            name="numero"
                            id="numero"
                            pInputText
                            autocomplete="off"
                            ngModel
                            #numero="ngModel"
                            required
                            minlength=1>

                    <app-message [control]="numero"
                                error="required"
                                text="Informe um número válido"></app-message>

                    <app-message [control]="numero"
                                error="minlength"
                                text="Mínimo de {{ numero.errors?.minlength?.requiredLength }} caracteres"></app-message>
                </div>

                <div class="ui-g-4 ui-md-4 ui-sm-12 ui-fluid">
                    <label for="complemento">Complemento</label>
                    <input type="text"
                            name="complemento"
                            id="complemento"
                            pInputText
                            autocomplete="off"
                            ngModel
                            #complemento="ngModel">
                </div>

                <div class="ui-g-4  ui-md-4 ui-sm-12 ui-fluid">
                    <label for="bairro">Bairro</label>
                    <input type="text"
                            name="bairro"
                            id="bairro"
                            pInputText
                            autocomplete="off"
                            ngModel
                            #bairro="ngModel"
                            required
                            minlength=5>
                    <app-message [control]="bairro"
                            error="required"
                            text="Informe um bairro válido"></app-message>

                    <app-message [control]="bairro"
                            error="minlength"
                            text="Mínimo de {{ bairro.errors?.minlength?.requiredLength }} caracteres"></app-message>
                </div>

                <div class="ui-g-3 ui-md-3 ui-sm-12 ui-fluid">
                    <label for="cidade">Cidade</label>
                    <input type="text"
                            name="cidade"
                            id="cidade"
                            pInputText
                            autocomplete="off"
                            ngModel
                            #cidade="ngModel"
                            required
                            minlength=5>
                    <app-message [control]="cidade"
                                error="required"
                                text="Informe uma cidade válida"></app-message>

                    <app-message [control]="cidade"
                                error="minlength"
                                text="Mínimo de {{ cidade.errors?.minlength?.requiredLength }} caracteres"></app-message>
                </div>

                <div class="ui-g-1  ui-md-1 ui-sm-6 ui-fluid">
                    <label>CEP</label>
                    <p-inputMask mask="99999-999"
                                id="cep"
                                name="cep"
                                autocomplete="off"
                                ngModel
                                #cep="ngModel"
                                required
                                minlength=5></p-inputMask>
                    <app-message [control]="cep"
                                error="required"
                                text="Informe um CEP válido"></app-message>

                    <app-message [control]="cep"
                                error="minlength"
                                text="Mínimo de {{ cep.errors?.minlength?.requiredLength }} caracteres"></app-message>
                </div>

                <div class="ui-g-2 ui-md-2 ui-sm-6 ui-fluid">
                    <label>Estado {{ estado.value }}</label>
                    <p-dropdown [options]="estados"
                                [autoWidth]="false"
                                [placeholder]="Selecione"
                                [filter]="true"
                                #estado></p-dropdown>
                </div>
                <div class="ui-g-1 ui-md-2 ui-sm-12 ui-fluid" style="padding: 25px;">
                    <p-checkbox name="status" id="status" value="ATIVO" label="Ativo"></p-checkbox>
                </div>
                </div>
            </form>
        </div>


    . lancamento-cadastro.component.html

        <div class="container">
            <form>
                <div class="ui-g">
                    <div class="ui-g-12">
                        <h1>Novo Lançamento</h1>
                    </div>

                    <div class="ui-g-12">
                        <p-selectButton [options]="tipos" #tipo></p-selectButton>
                    </div>

                    <div class="ui-g-6 ui-md-3 ui-fluid">
                        <label>Vencimento</label>
                        <p-calendar dateFormat="dd/mm/yy"
                                    [showIcon]="true"
                                    name="vencimento"
                                    id="vencimento"
                                    ngModel
                                    #vencimento="ngModel"
                                    required></p-calendar>

                        <app-message [control]="vencimento"
                                    error="required"
                                    text="Informe uma data válida"></app-message>
                    </div>

                    <div class="ui-g-6 ui-md-3 ui-fluid">
                        <label>{{ tipo.value == 'RECEITA' ? 'Recebimento' : 'Pagamento' }}</label>
                        <p-calendar dateFormat="dd/mm/yy" [showIcon]="true"></p-calendar>
                    </div>

                    <div class="ui-g-12 ui-md-9 ui-fluid">
                        <label>Descrição </label>
                        <input type="text"
                                name="descricao"
                                ngModel
                                #descricao="ngModel"
                                required
                                minlength="5"
                                autocomplete="off"
                                pInputText>

                            <app-message [control]="descricao"
                                        error="required"
                                        text="Informe uma descrição válida"></app-message>

                            <app-message [control]="descricao"
                                        error="minlength"
                                        text="Mínimo de {{ descricao.errors?.minlength?.requiredLength }} caracteres"></app-message>
            <!--
                        <div class="ui-message ui-messages-error" *ngIf="descricao.hasError('required') && descricao.dirty">
                            Informe uma descrição válida
                        </div>

                        <div class="ui-message ui-messages-error" *ngIf="descricao.hasError('minlength') && descricao.dirty">
                            Tamanho mínimo da descrição deve ser de {{ descricao.errors.minlength.requiredLength }} caracteres
                        </div>
            -->
                    </div>
                    <div class="ui-g-12 ui-md-3 ui-fluid">
                        <label>Valor</label>
                        <input type="text"
                                pInputText
                                placeholder="0,00"
                                currencyMask
                                ngModel
                                name="valor"
                                [options]="{ prefix: 'R$', thousands: '.', decimal: ',', allowNegative: false}">
                    </div>
                    <div class="ui-g-12 ui-md-6 ui-fluid">
                        <label>Categoria {{ categoria.value }}</label>
                        <p-dropdown [options]="categorias"
                                    [autoWidth]="false"
                                    [placeholder]="Selecione"
                                    [filter]="true"
                                    #categoria></p-dropdown>
                    </div>
                    <div class="ui-g-12 ui-md-6 ui-fluid">
                        <label>Pessoa {{pessoa.value}}</label>
                        <p-dropdown  [options]="pessoas"
                                        [autoWidth]="false"
                                        [placeholder]="Selecione"
                                        [filter]="true"
                                        #pessoa></p-dropdown>
                    </div>
                    <div class="ui-g-12 ui-fluid">
                        <label>Observação</label>
                        <textarea rows="5" cols="30" pInputTextarea autoResize="autoResize"></textarea>
                    </div>
                    <div class="ui-g-12">
                        <button pButton type="submit" label="Salvar"></button>
                        <button pButton type="button" label="Novo" class="ui-button-info"></button>
                        <a href="javascrip:;">Voltar para a pesquisa</a>
                    </div>
                </div>
            </form>
        </div>


Aula 13.11. Desafio criando mais componentes
--------------------------------------------

    . Na pasta raiz do projeto execute o comando abaixo:

        $ ng g c lancamentos-grid --spec=false

    . Acesse o componente lancamentos-grid.component.html e implemente o código abaixo:

      <p-dataTable [value]="lancamentos" [paginator]=true [rows]=5 [responsive]="true">
        <p-column field="pessoa" header="Pessoa"></p-column>
        <p-column field="descricao" header="Descrição"></p-column>
        <p-column field="dataVencimento" header="Vencimento" styleClass="col-data">

          <ng-template let-lanc="rowData" pTemplate="body">
            {{lanc.dataVencimento | date:'dd/MM/y'}}
          </ng-template>

        </p-column>
        <p-column field="dataPagamento" header="Pagto" styleClass="col-data">

          <ng-template let-lanc="rowData" pTemplate="body">
            {{lanc.dataPagamento | date:'dd/MM/y'}}
          </ng-template>

        </p-column>
        <p-column field="valor" header="Valor" styleClass="col-valor">
            <ng-template let-lanc="rowData" pTemplate="body">
<!--              <span [ngStyle]="{ color: lanc.tipo === 'DESPESA' ? 'red' : 'blue' }">{{lanc.valor}}</span> -->
              <span [style.color]="lanc.tipo === 'DESPESA' ? 'red' : 'blue'">{{lanc.valor|currency:"BRL":true:"1.2-2"}}</span>
            </ng-template>
        </p-column>
        <p-column styleClass="col-acoes">
          <ng-template pTemplate="body">
            <a pButton icon="fa-pencil" pTooltip="Editar" tooltipPosition="top"></a>
            <a pButton icon="fa-trash"  pTooltip="Eliminar" tooltipPosition="top"></a>
          </ng-template>
        </p-column>
      </p-dataTable>

    . Acesse o componente lancamentos-pesquisa.component.html e altere conforme abaixo:

        <div class="container">
            <div class="ui-g">
                <div class="ui-g-12">
                    <h1>Lançamentos</h1>
                </div>
                <div class="ui-g-12 ui-fluid">
                    <label for="descricao">Descrição</label>
                    <input pInputText type="text" id="descricao" class="p-inputtext-sm">
                </div>
                <div class="ui-g-12">
                    <label style="display: block;">Vencimento</label>
                    <input pInputText type="text" class="p-inputtext-sm" style="width:95px;">

                    <label>Até</label>
                    <input pInputText type="text" class="p-inputtext-sm" style="width:95px;">
                </div>

                <div class="ui-g-12">
                    <button pButton type="submit" label="Pesquisar" class="p-button-sm"></button>
                </div>
            </div>
            </div>

            <div class="container">
            <div class="ui-g-12">
                <!-- Tag incluida no lugar da tag <p-DataTable> -->

                <app-lancamentos-grid [lancamentos]="lancamentos"></app-lancamentos-grid>

                <!-- -->
            </div>
            <div class="ui-g-12">
                <button pButton type="submit" label="Novo Lançamento" class="p-button-sm"></button>
            </div>
        </div>

    . Acesse o componente lancamentos.grid.component.ts e deixe o código como abaixo:

        import { Component, Input, OnInit } from '@angular/core';

        @Component({
            selector: 'app-lancamentos-grid',
            templateUrl: './lancamentos-grid.component.html',
            styleUrls: ['./lancamentos-grid.component.css']
        })
        export class LancamentosGridComponent implements OnInit {

            @Input() lancamentos = [];

            constructor() { }

            ngOnInit() {
            }

        }

    . Acesse o componente app.component.html e o deixe o código como abaixo:

        <app-navbar></app-navbar>

        <app-lancamentos-pesquisa></app-lancamentos-pesquisa>


Aula 14.01. Introdução aos módulos
----------------------------------

    . Vide "Modularizando os componentes (Conteúdo Extra)" na aula 9.3.

    . Modularizar seria agrupar os componentes, diretivas e pipes nos arquivos *.module.ts.

    . Os componentes dentro dos arquivos *.module.ts devem exportar os componentes e o modulo que for utilizar o componente deve
        importar o componente exportado.


Aula 14.02. Criando um módulo e exportando um componente
--------------------------------------------------------


    . A classe de modulos central é o arquivo src/app/app.modules.ts. Uma classe normal como qualquer outra, porém 
        decorada/anotada com o @NgModule.

    . A estrutura da classe app.modules.ts:

                import { BrowserModule } from '@angular/platform-browser';
                import { NgModule } from '@angular/core';

                import { AppComponent } from './app.component';

                @NgModule({
                declarations: [
                    AppComponent
                ],
                imports: [
                    BrowserModule
                ],
                providers: [],
                bootstrap: [AppComponent]
                })

                export class AppModule { }

        . Seções do AppModule:

            . Os imports são:

                // Suporte a navegação pelo Browser
                import { BrowserModule } from '@angular/platform-browser';

                // Utilizado devido ao decorate @NgModule
                import { NgModule } from '@angular/core';

                import { AppComponent } from './app.component';

            . O decorate/annotation @NgModule:

                @NgModule({
                declarations: [
                    AppComponent
                ],
                imports: [
                    BrowserModule
                ],
                providers: [],
                bootstrap: [AppComponent]
                })

                . Dentro do decorate existe os metadados:

                    declarations :[ ... ] - Local para realizar a declaração dos componentes do nosso projeto.
                                            Cada componente incluido neste metadado deverá ser feito o "import",
                                            Exemplo: Observe o componente HelloWorld

                        ...
                        import { AppComponent } from './app.component';
                        import { HelloComponent } from './hello/hello.component';

                        @NgModule({
                            declarations: [
                                AppComponent,
                                HelloComponent
                            ],
                            ...
                        })
                        export class AppModule { }

                    imports: [...] - Importação das biblitecas que iremos utilizar no projeto. Cada componente declarado
                                    neste metadado deverá ser feito o "import".
                                    Exemplo: Observe o BrowserModule

                        import { BrowserModule } from '@angular/platform-browser';
                        ...

                        @NgModule({
                            ...
                            imports: [
                                BrowserModule
                            ],
                            ...
                        })

                    providers : [...] - Local para configurar os serviços que serão utilizados no projeto, como:
                                        Autenticação, rotas, etc.

                    bootstrap : [AppComponent] - O objeto principal do projeto, que fará a inicialização da aplicação.

            . Declaração da classe:

                export class AppModule { }

    . Acesse a pasta raiz do projeto e digito o comando abaixo:

        $ ng g m botoes

        . Criará o componente botoes.module.ts dentro da paras src/app/botoes/

    . Uma diferença entre o arquivo de modulo criado acima com o app.module.ts seria que o botoes.component.ts tem o imports: [ CommonModule ]; já
        o app.module.ts tem imports: [BrowserModule].

    . Acesse a pasta raiz do projeto e digito o comando abaixo:

        $ ng g c botoes/botao-grande --spec=false

    . Será criado dentro da pasta src/app/botoes a pasta botao-grande com o componente botao-grande.component.css .html .ts

    . Ao criar o componente botao-grande dentro da pasta src/app/botoes declarou automaticamente no item "declarations: [BotaoGrandeComponent]" dentro do 
        arquivo botoes.module.ts.

    . Acesse o arquivo botao-grande.component.html e coloque o código abaixo:

        <button type="button" class="btn btn-primary btn-lg"{{ label }}</button>

    . Acesse o arquivo "botao-grande.component.ts" e adicione a propriedade abaixo:

        export class BotaoGrandeComponent implements OnInit{
            @Input() label: string;

            ...
        }

    . Acesse o arquivo "src/app/botoes/botoes.modules.ts" e faça o export do componente botao-grande.component

        @NgModule({
            ...
            exports: [BotaoGrandeComponent]

        })


    . Acesse o arquivo app.module.ts e declare BotoesModule no paragrafo "imports:[]"

        imports:[
            ...
            BotoesModule
        ]


    .  Acesse o arquivo "app.component.html" e insira o código abaixo:

        <div class="container">
            <app-botao-grande label="App"></App-botao-grande>
        </div>

    . Execute o projeto e verifique o resultado.


Aula 14.03. Reexportando um módulo
----------------------------------

    . Digite o comando abaixo na pasta raiz do projeto:

        $ ng g m navegacao

        . O comando acima criará a pasta src/app/navegacao com o arquivo navegacao.module.ts dentro dele.

    . Digite o comando abaixo na pasta raiz do projeto:

        $ ng g c navegacao/menu --spec=false

    . O comando acima criou os arquivos menu.component.css .html .ts dentro da pasta src/app/navegacao/menu

    . Acesso o arquivo app.module.ts e faça a importação do modulo NavegacaoModule

        ...
        @NgModule({
            ...
            imports: [
                        BrowserModule,
                        NavegacaoModule
            ]
        })
        ...

    . Acesse o arquivo navegacao.module.ts e faça o export do component "MenuComponent" e faça o import do BotoesModule no item "imports":

        ...
        @NgModule({
            imports: [
                        CommonModule,
                        BotoesModule
            ]
            declarations: [MenuComponent],
            exports:[ MenuComponent ]

        })
        ...

    . Acesse o arquivo menu.component.html e insira o código abaixo:

        <app-botao-grande label="Item menu 1"></app-botao-grande>

        <app-botao-grande label="Item menu 2"></app-botao-grande>

    . Execute o projeto e veja o resultado.

    . É possivel exportar um module que foi importado, basta declará-lo no item "exports" o mesmo que foi feito o "imports":

        @NgModule({
            imports: [
                CommonModule,
                BotoesModule
            ],
            ...
            exports: [
                MenuComponent,
                BotoesModule            // O mesmo que foi feito o import
            ]


        })

    . Acesse o componente app.component.ts e digite o código abaixo:

        <div class="container">
            <app-menu></app-menu>
            <br>
            <app-botao-grande label="App"></app-botao-grande>
        </div>


    . Execute o projeto e veja o resultado.


Aula 14.06. Criando um Feature Module
-------------------------------------    

    . Iremos modularizar o sistema que estamos desenvolvendo.

    . Na pasta raiz do projeto digite o comando abaixo:

        $ ng g m lancamentos

    . Será criado a pasta src/app/lancamentos. Arraste todos os componentes de lancamento.* para dentro dessa pasta.

    . Acesse o arquivo lancamentos.module.ts e faça a declaração desses componentes dentro do modulo.

        ...
        @NgModule({
            imports: [
                ...
            ],
            declarations:[
                LancamentoCadastroComponent,
                LancamentosPesquisaComponent,
                LancamentosGridComponent
            ],
            exports: [ LancamentosPesquisaComponent,
                        LancamentoCadastroComponent ]
        })
        ...

    . Acesse o arquivo app.module.ts, elimine o exports  de todos os componentes que se refere ao "Lancamentos*" e insira o modulo "LancamentosModule" nos imports.

    . Execute o projeto e veja o resultado.

    . Acesse o arquivo lancamentos.module.ts e insira nos "imports" o "FormsModule".

    . Acesse o arquivo app.module.ts, copie todos os imports referente ao PrimeNG e cole-os no "imports" do lancamento.module.ts.

    . Acesse o arquivo lancamento-cadastro.component.html e comente todas as tags <app-message> <!-- -->

    . Execute o projeto.



Aula 14.07. Desafio criando o feature module de pessoas
-------------------------------------------------------

. Verificar os passos para fazer a reconfiguração dos module






Aula 14.08. O que são Shared Modules
------------------------------------

    . Shared Module seria uma biblioteca de modulos que podem ser compartilhada entre os modulos da aplicação, como por exemplo: A tag de mensagem de validação.


Aula 14.09. Criando um Shared Module
------------------------------------

    . Digite o comando abaixo no prompt do SO:

        $ ng g m shared

    . No navegador de pastas do VSCode arraste a pasta "message" para dentro da pasta "shared".

    . Acesse o componente src/app/shared/shared.module.ts e faça os acertos abaixo:

        ...
        import { MessageComponent } from './message/message.component';

        @NgModule({

            imports: [
                CommonModule
            ],
            declarations: [ MessageComponent ],
            exports: [MessageComponent]

        })
        ...

    . Acesse o component "app.module.ts" e apague as referências do MessageComponent que consta no item "declarations".

    . Acesse os componentes "*.component.html" e descomente todas tags "<app-message>".

    . Acesse os arquivos "*.module.ts" e insira no item "imports" a referência do "SharedModule".


Submetendo um projeto local para o Git

https://medium.com/singapore-rails-learning-group/how-to-push-your-code-to-github-and-publish-your-first-page-8b0e1f4caf2a



Aula 15.01. Introdução aos serviços
-----------------------------------

    . Serviços

        . São unidades centrais para algumas funções comuns em todo o aplicativo.

        . São classes simples com funções e membros.

        . Utilizado quando - Existe duplicação de código, Acessar/armazenar dados.

        . Não existe decorador para Serviços, diferente de @Component e @Directive. @Injectable é usado apenas 
            quando um serviço precisa ser usado por um componente, diretiva ou outro serviço.


Aula 15.02. Implementando um serviço
------------------------------------

    . Acesse o projeto de clientes https://github.com/maransi/helloworld2

    . Para a construção do projeto necessário para esta aula vamos seguir os procedimentos abaixo:

        . Acesse a pasta raiz de projetos das aulas e execute no prompt de comandos as linhas abaixo:

            $ ng new algamoney-funcionario

            $ cd algamoney-funcionario

            $ npm install bootstrap@4.5.3 --save

            $ ng g c funcionario

            $ code .

        . Acesse o arquivo ".angular-cli.json" e insira a linha abaixo:

            ...
            "styles": [
                ...
                "../node_modules/bootstrap/dist/css/bootstrap.css"
            ]
            ...

        . Acesse o componente "funcionario.component.html" e atualize pelo código abaixo:

            <div class="container">
                <div *ngIf="Property" >
                    
                </div>

                <div class="alert alert-success" 
                        role="alert" 
                        *ngIf="salvo">
                    Nome do Funcionário : <strong> {{nome}} </strong>
                </div>

                <div class="form-group">
                    <label for="nome">Nome do Funcionário</label>
                    <input type="text" 
                            class="form-control" 
                            id="nome" 
                            #nomeInput 
                            [(ngModel)]="nome">
                    <small id="emailHelp" class="form-text text-muted">Informe o nome do cliente</small>
                </div>

                <button type="button" 
                        class="btn btn-primary" 
                        (click)="adicionar(nomeInput.value); nomeInput.value=''; nomeInput.focus()"
                        [disabled]="nome.length==0">Salvar</button>
            </div>

        . Acesse o componente "funcionario.component.ts" e atualize pelo código abaixo:

            import { Component, OnInit } from '@angular/core';

            @Component({
                selector: 'app-funcionario',
                templateUrl: './funcionario.component.html',
                styleUrls: ['./funcionario.component.css']
            })
            export class FuncionarioComponent implements OnInit {
                funcionarios: any[] = [];
                nome: string;
                ultimoId: number = 1;
                salvo: boolean;

                constructor() { }

                ngOnInit() {
                    this.nome = '';
                    this.funcionarios.push( { id: 1, nome: 'Catia'});
                    this.salvo = false;
                }

                adicionar(nome: string){
                    this.funcionarios.push( { id: ++this.ultimoId, nome: nome})

                    console.log( `Funcionário ${this.nome} salvo!!!` );

                    this.salvo = true;
                }
            }

        . Acesse o componente "app.module.ts" e insira a linha abaixo:

            ...
            imports: [
                ...
                FormsModule
            ],
            ...

        . Acess o componente "app.component.html" e atualize pelo código abaixo:

            <app-funcionario></app-funcionario>        

        . Execute o projeto e verifique se tudo deu certo:

            $ ng serve --open

    . Clique com o botão direito sobre a pasta "app/src", escolha "Novo Arquivo" e dê o nome de 
        funcionario.service.ts.

    . Na classe funcionario.service.ts implemente o código abaixo:

        export class FuncionarioService{

            ultimoId = 1;
            funcionarios = [{ id: 1, nome: 'Samara'}];

            adicionar( nome ){
                const funcionario = {
                    id: ++this.ultimoId,
                    nome: nome
                };

                this.funcionarios.push( funcionario );

                console.log( JSON.stringify( this.funcionarios) );
            }

            consultar(){
                return this.funcionarios;
            }
        }

    . Altere o código da classe "funcionario.component.ts" pelo código abaixo:

        ...
        export class FuncionarioComponent implements OnInit{

            funcionarios = [];

            funcionarioService: FuncionarioService; 

            constructor(){
                this.funcionarioService = new FuncionarioService();
            }

            ngOnInit(): void {
                this.funcionarios = this.funcionarioService.consultar();
            }

            adicionar( nome: string ){
                this.funcionarioService.adicionar(nome);
            }
        }

    . Altere o app.component.ts com o código abaixo:

        ... 
        export class AppComponent implements OnInit{

            funcionarios: [];
            funcionarioService: FuncionarioService; 

            constructor(){
                this.funcionarioService = new FuncionarioService();
            }

            ngOnInit(){
                this.funcionarios = this.funcionarioService.consultar();
            }

        }

    . Execute o projeto e verificaremos que a adição de um novo funcionário deixou de ocorrer. Porque
        isto deixou de funcionar? 

        , Foi criado duas referências da classe "FuncionarioService":

            . Uma na classe AppComponent e outra no FuncionarioComponent. Cada um com sua própria coleção 
                de funcionários.

        . Testar 

            
Aula 15.3. O que é injeção de dependências?
-------------------------------------------

    . Acesse o componente app.component.ts e adapte a linha abaixo:

        ...
        providers: [
            FuncionarioService
        ],
        ...

    . Acesse o componente funcionario.componente.ts e altere o construtor dele como abaixo:

        ...
        funcionarios = [];

        // funcionarioService: FuncionarioService;  // Apague a linha com a declaração do "funcionarioService"
                                                    // o "constructor( private funcionarioService ... )" faz isto automaticamente

        constructor(private funcionarioService: FuncionarioService){
            this.nome = '';
        }
        ...

    . Acesse o componente app.component.ts e faça a mesma modificação acima:

        ...
        funcionarios = [];
        
        constructor(private funcionarioService: FuncionarioService){

        }
        
        ngOnInit(): void {
            this.funcionarios = this.funcionarioService.consultar();
        }
        ...

    . O "private" dentro da assinatura do contrutor tem o papel de uma propriedade.

    . Execute o projeto.


Aula 15.4. Configurando o injetor com provider por classe
---------------------------------------------------------

    . Acesse a classe funcionario.service.ts e implemente o código abaixo no final do arquivo:

        ...
        public class FuncionarioAbreviadoService extends FuncionarioService{
            adicionar( nome: string ){
                super.adicionar( nome.substr(0,3) + '...');
            }
        }
        ...

    . Acesse o componente app.component.ts e adapte a linha abaixo:

        ...
        providers: [
            { provide: FuncionarioService, useClass: FuncionarioAbreviadoService }
        ],
        ...


Aula 15.5. Configurando o injetor com provider por fábrica
----------------------------------------------------------

    . Acesse a classe funcionario.service.ts e implemente na classe "FuncionarioAbreviadoService" o construtor:

        export class funcionarioAbreviadoService extends FuncionarioService{

            constructor( private numeroCaracteres: number){
                super();
            }

            ...
        }

    . Acesse o componente "app.module.ts" e implemente a função abaixo, logo abaixo dos "imports":

        import ...
        ...

        const criarFuncionarioService = () => {
            return new FuncionarioAbreviadoService(2);
        }

        ...

    . Altere o numero de caracteres a ser apresentado, colocando o valor da propriedade "numeroCaracter"
        ...
        adicionar( nome: string ){
            super.adicionar( nome.substr(0,this.numeroCaracter) + '...');   // Alterado
        }
        ...

    . Altere o "provider" conforme abaixo, mudando o parâmetro "useFactory: criarFuncionarioService":

        @NgModule({
            ...
            providers: [
                { provide: FuncionarioService, useFactory: criarFuncionarioService }
            ],
            ...
        })

    . Execute o projeto e veja se os nomes dos funcionarios estão saindo abreviados.


Aula 15.6. Configurando o injetor com provider por valor e o decorator @Inject
------------------------------------------------------------------------------

    . Acesse a classe "funcionario.service.ts" e apague a classe "FuncionarioAbreviadoService"

    . Acesse o componente "app.component.ts" e altere o provider para o FuncionarioService como abaixo:

        @NgModule({
            ...
            providers: [
                FuncionarioService
            ],
            ...
        })

    . Dentro da pasta "app" inclua um novo arquivo com o nome "log.service.ts" e acrescente o código abaixo:

        export class LogService{

            constructor( @Inject('LogPrefixo') private prefixo: string){}

            log( msg: string){
                console.log( `${this.prefixo}: ${msg}`);
            }
        }

        . O @Inject('LogPrefixo') será configurado logo abaixo no "app.module.ts" para trazer um valor 
            a ser injetado.

    . Acesse a classe "funcionario.component.ts" e insira o logService no construtor como abaixo:


        ..
        constructor(private funcionarioService: FuncionarioService,
                    private logService: LogService){
            this.nome = '';
        }
        ...

    . Acesse a classe "funcionario.component.ts" e insira a linha do logService no método "adicionar" como abaixo:

        adicionar( nome: string){
            this.funcionarioService.adicionar(nome);            
            this.logService.log(`Adicionando ${nome}`);     // Linha inserida
        }

    . Acesse o "app.module.ts" e acrescente a classe "LogService" nos "providers":

        @NgModule({
            ...
            providers: [
                FuncionarioService,
                LogService,
                { provide: 'LogPrefixo', useValue: 'LOG' }
            ],
            ...
        })

    . Execute o projeto e veja o resultado.


Aula 15.7. Injetando serviços dentro de serviços e o decorador @Injectable
--------------------------------------------------------------------------

    . Acesse o componente "funcionario.service.ts", Acrescente o decorate @Injectable, o construtor e a saída do log no método "adicionar":

        ...
        @Injectable()
        export class FuncionarioService{
            ...

            constructor( private logService: LogService){}

            adicionar( nome: string){
                this.logService.log(`Adicionando nome ${nome}...`);
                ...
            }

        }

        . Fazer teste retirado o @Injectable para ver se o projeto funciona.

        . O decorate @Injectable até a versão 5 do angular era uma mera convenção, colocando, ou não, não tinha
            nenhuma mudança. Já da versão 6 em diante podemos utilizá-lo com mais efetividade, pois ao usá-lo
            deixa de haver a necessidade de declará-lo nos "providers" do "app,module.ts".


Aula 15.8. Como funciona o Injetor Hierárquico
----------------------------------------------

    . O objeto injetado retornará sempre um "singleton", ou seja, uma mesma instância do objeto.

    . Podemos registrar a injeção no "providers" de outros *.module.ts", nos nosso exemplos só trabalhamos 
        com o "app.module.ts". Quando fazemos o registro em outro modulo, o angular deixa disponível para todos 
        os outros módulos normalmente.

    . Sequência para implementar DI num projeto Angular:

        . Criar uma classe:

            export class LibService{

                showMessage( msg: string ){
                    console.log( msg );
                }
            }

        . Declarar ela no componente app.module.ts no paragrafo "providers":
            
            ...
            providers: [ 
                FuncionarioService,
                LogService,
                { provide: 'LogPrefixo', useValue: 'LOG'},
                LibService
            ],
            ...

        . Declarar a classe no construtor da classe onde é necessário utilizá-la.

            . Utilizando o decorate @Inject, não havendo a definição o tipo da classe:

                ...
                export class FuncionarioComponent implements OnInit{
                    nome: string;
                    funcionarios = [];

                    constructor(@Inject(FuncionarioService) private funcionarioService,       // : FuncionarioService,
                                @Inject(LogService) private logService,              // : LogService,
                                @Inject(LibService) private libService){
                        this.nome = '';
                    }
                    ...

            . Sem usar o @Inject, porém informando o tipo da classe na assinatura do construtor;

                ...
                export class FuncionarioComponent implements OnInit{
                    nome: string;
                    funcionarios = [];

                    constructor(private funcionarioService: FuncionarioService,   
                                private logService: LogService, 
                                private libService: LibService) {
                        this.nome = '';
                    }
                    ...

Aula 16.2. Instalando e testando o json-server
----------------------------------------------

    Excelente exemplo de Crud:

        https://medium.com/@fernandoevangelista_28291/consumindo-api-rest-com-httpclient-no-angular-8-62c5d733ffb6

    Exemplos de como funciona HttpClient, Observable

        https://www.telerik.com/blogs/angular-basics-how-to-use-httpclient    

    . Acesse o prompt do SO e execute o comando abaixo:

        sudo npm install -g json-server@0.12.0

    . Crie uma pasta e dentro dela crie o arquivo db-exemplo.json com o conteúdo abaixo:

        {
            "produtos": [
                {
                    "id": 1,
                    "nome": "Hambúrguer",
                    "descricao": "Pão, bife de hambúrguer 90g, salada e batata.",
                    "preco": 8.5,
                    "categoria_id": 1
                },
                {
                    "id": 2,
                    "nome": "X-Búrguer",
                    "descricao": "Pão, bife de hambúrguer 90g, 1 fatia de queijo, salada e batata.",
                    "preco": 10.5,
                    "categoria_id": 1
                },
                {
                    "id": 3,
                    "nome": "X-Bacon",
                    "descricao": "Pão, bife de hambúrguer 90g, 1 fatia de queijo, 2 fatia de bacon, salada e batata.",
                    "preco": 12.5,
                    "categoria_id": 1
                },
                {
                    "id": 4,
                    "nome": "X-Tudo",
                    "descricao": "Pão, 2 bifes de hambúrguer 90g, 2 fatias de queijo, 4 fatias de bacon, salada e batata.",
                    "preco": 14.5,
                    "categoria_id": 1
                },
                {
                    "id": 5,
                    "nome": "Coca cola 350ml",
                    "descricao": "",
                    "preco": 5.5,
                    "categoria_id": 2
                },
                {
                    "id": 6,
                    "nome": "Coca cola 600ml",
                    "descricao": "",
                    "preco": 7.5,
                    "categoria_id": 2
                }
            ],
            "categorias": [
                {
                    "id": 1,
                    "nome": "Hambúrgueres"
                },
                {
                    "id": 2,
                    "nome": "Refrigerantes"
                }
            ]
        }

    . Dentro da pasta criada execute o comando abaixo:

        json-server --watch db-exemplo.json    

    . Acesse o postman e execute a URL abaixo:

        GET http://localhost:3000/produtos/    

        GET http://localhost:3000/produtos/1

        POST http://localhost:3000/produtos/

            Content-Type: application/json
            {
                "nome": "Hambúrguer de frango",
                "descricao": "Pão, bife de hambúrguer 90g de frango, salada e batata.",
                "preco": 9.5,
                "categoria_id": 1
            }


        PUT http://localhost:3000/produtos/1

            Content-Type: application/json
            {
                "nome": "Hambúrguer de frango",
                "descricao": "Pão, bife de hambúrguer 90g de frango, salada e batata.",
                "preco": 10.5,
                "categoria_id": 1
            }

        PATCH http://localhost:3000/produtos/1

            Content-Type: application/json
            {
                "nome": "Hambúrguer de frango artezanal"
            }

        DELETE http://localhost:3000/produtos/1
        Content-Type: application/json

        GET http://localhost:3000/produtos?nome=X-Búrguer

        GET http://localhost:3000/produtos/?_page=1&_limit=2

    . Para parar o servidor json-server basta dar Ctrl+C

    . Crie na pasta json-server outro arquivo json com o nome db.json e com o conteúdo abaixo:

        {
            "cidades": [
                {
                    "nome": "Uberlândia",
                    "id": 1
                },
                {
                    "nome": "São Paulo",
                    "id": 2
                },
                {
                    "nome": "Fortaleza",
                    "id": 3
                }
            ]
        }

Aula 16.3. Fazendo requisição com GET e recebendo o retorno
-----------------------------------------------------------

    . Digite o comando abaixo para criar um projeto angular:

        $ ng new algamoney-modulo16

    . No prompt do terminal, acesse a pasta raiz do projeto e instale o bootstrap com o comando abaixo:

        $ npm install bootstrap@4.5.3 --save

    . Dentro do arquivo .angular-cli.json, encontre o paragrafo style e insira a referência ao 
        bootstrap:

        ...
        "styles": [
            ...
            "../node_modules/bootstrap/dist/css/bootstrap.css"
        ],     
        ...   

    . Na raiz do projeto crie a pasta "data"

    . Dentro da pasta "data" crie o arquivo db.json com o conteúdo abaixo:

        {
            "cidades": [
                {
                    "nome": "Uberlândia",
                    "id": 1
                },
                {
                    "nome": "São Paulo",
                    "id": 2
                },
                {
                    "nome": "Fortaleza",
                    "id": 3
                }
            ]
        }

    . Dentro da pasta data execute o comando abaixo:

        $ json-server --watch db.json    

    . Execute o comando abaixo na pasta raiz do projeto:

        $ ng c s cidade --spec=false    

    . Acesse o arquivo "src/app/app.module.ts" e insira o código abaixo:

        imports: [
            ...
            FormsModule,
            HttpModule
        ],
        providers: [
            CidadeService
        ]

    . Acesse o arquivo "src/app/cidade.service.ts" e insira o código abaixo:

        import { Http } from '@angular/http';
        import { Injectable } from '@angular/core';
        import 'rxjs/add/operator/toPromise';

        @Injectable()
        export class CidadeService {

            constructor(private http: Http) { }     // a. Injeção de dependência
                                                    // b. Obrigatório o import do HttModule no app.module.ts

            consultar() {
                this.http.get('http://localhost:3000/cidades')   // c. Métodos do componente "http" (get, post, etc)
                .toPromise()
                .then(response => {
                    console.log(response);
                }
            }
        }    

        a. Primeira coisa que devemos fazer é a injeção de dependência do objeto que faz
            a comunicação com o servidor Rest para acessar os dados.

        b. Para ter acesso desse componente no projeto é obrigatório antes fazer o import da 
            biblioteca "HttpModule" no arquivo "app.module.ts"

        c. O método ".get( url )" retorna um objeto "Observable" da biblioteca "rsjs". Esse objeto observable é convertido
            para um "promisse", através do método ".toPromisse()". Para esse método ser válido é preciso fazer o
            "import 'rxjs/add/operator/toPromise';". 

    . Acesse o arquivo "src/app/app.component.ts" e insira o código abaixo:

        import { CidadeService } from './cidade.service';
        import { Component, OnInit } from '@angular/core';

        @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.css']
        })
        export class AppComponent {

            cidades = [];

            adicionar(nome: string) {
                alert(nome);
            }

            excluir(id: number) {
                alert(id);
            }

            atualizar(cidade: any) {
                alert(JSON.stringify(cidade));
            }
        }

    . Adicione um construtor e um método OnInit na classe "app.component.ts":

        ...
        export class AppComponent implements OnInit {
        ...
        constructor(private cidadeService: CidadeService) {}
        
        ngOnInit() {
            this.cidadeService.consultar();
        }
        ...



    . Acesse o arquivo "src/app/app.component.html" e insira o código abaixo:

        <div class="container">
            <div class="form-group">
                <label>Nome</label>
                <input type="text" class="form-control" #nome>
            </div>

            <button type="button" class="btn btn-primary"
                (click)="adicionar(nome.value); nome.value = ''">Adicionar</button>

            <table class="table" style="margin-top: 20px">
                <thead>
                <tr>
                    <th>Código</th>
                    <th>Nome</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let cidade of cidades">
                    <td>{{ cidade.id }}</td>
                    <td>
                    <div class="input-group">
                        <input type="text" class="form-control" [(ngModel)]="cidade.nome">
                        <span class="input-group-btn">
                        <button class="btn btn-primary"
                            (click)="atualizar(cidade)">Atualizar</button>
                        </span>
                    </div>
                    </td>
                    <td>
                    <button class="btn btn-danger"
                        (click)="excluir(cidade.id)">Excluir</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

    . Execute o projeto, acesse o navegador e na área do DevTools (F12) na console acompanhe os resultados

    . Altere o conteúdo do método "consultar" da componente "CidadeService" como abaixo:

        ...
        consultar(): Promise<any> {
            return this.http.get('http://localhost:3000/cidades')
            .toPromise()
            .then(response => response.json())
        }
        ...

    . No componente "app.component.ts" altere o método "ngOnInit()" pelo conteúdo abaixo:
        ...
        ngOnInit() {
            this.cidadeService.consultar()
                .then( dados => {
                                    this.cidades = dados;
                    });
        }
        ...

    . Execute o projeto e verifique se o formulário está exibindo corretamente as informações.


Aula 16.4. Fazendo requisição com POST
--------------------------------------

    . Acesse o componente "cidade.service.ts" e implemente o código abaixo no método "adicionar":

        ...
        adicionar( cidades: any): Promise<any>{

            return this.http.post('http://localhost:3000/cidades', cidade )      // O segund parâmetro representa o body da request
                        .toPromise()
                        .then(response => response.json() );

        }
        ...

    . Acesse o componente "app.component.ts" e implemente o código abaixo no método adicionar.

        ...
        consultar(){
            this.cidadeService.consultar()
                .then( dados => {
                                    this.cidades = dados;
                    });
        }

        adicionar( nome: string){
            this.cidadeService.adicionar( { nome } )
                .then( dado => {
                        alert( `Cidade "${dado.nome}" adicionada com código ${dado.id}` );
         
                       this.consultar();
                    });

        }
        ...

        . Atenção: a chamada do método consultar foi realizada dentro do "then" para que seja 
                    executada após o retorno do método "cidadeService.adicionar". Caso colocarmos
                    em outro lugar, a execução do "consultar" será feito em paralelo e não
                    conseguiremos pegar o retorno da inclusão da cidade.

                    No método "this.cidadeSevice.adicionar( { nome } )" tem que ser envidado com "{ }",
                    pois é um objeto que está sendo enviado.

    . No componente "app.component.ts" altere o método ngOnInit() conforme abaixo:

        ...
        ngOnInit(){
            this.consultar();
        }
        ...
    
    . Execute o projeto, informe um nome de cidade e acione o botão "Adicionar".


Aula 16.5. Fazendo requisição com DELETE
----------------------------------------

    . Acesse o componente "cidade.service.ts" e implemente o código abaixo no método "excluir":

        ...
        excluir( id: number): Promise<void>{
            return this.http.delete(`http://localhost:3000/cidades/${id}`)
                            .toPromisse()
                            .then( () => null);
        }
        ...

    . No componente "app.component.ts" altere o método excluir() conforme abaixo:

        ...
        excluir( id: number){
            this.cidadeService.excluir(id)
                .then( () => {
                    alert('Cidade excluída com sucesso!');

                    this.consultar();
                }
        }
        ...

    . Execute o projeto e tente fazer uma exclusão.

Aula 16.6. Fazendo requisição com PUT
-------------------------------------

    . Acesse o componente "cidade.service.ts" e implemente o código abaixo no método "atualizar":

        ...
        atualizar( cidade: any ): Promise<any>{
            return this.http.put(`http://localhost:3000/cidades/${cidade.id}`, cidade)
            .toPromise()
            .then( () => null );
        }
        ...

    . No componente "app.component.ts" altere o método ataulizar() conforme abaixo:

        ...
        atualizar( cidade: any ){
            this.cidadeService.atualizar( cidade )
                .then( () => {
                    alert('Cidade alterada com sucesso!');

//                    this.consultar();
                }
        }
        ...

    . Execute o projeto, tente fazer alguma alteração e veja o resultado.

Aula 16.7. Tratando erros de requisições HTTP
---------------------------------------------

    . Acesse o componente "cidade.service.ts" e implemente o código abaixo no método "atualizar":

        ...
        atualizar(cidade: any): Promise<any> {
            return this.http.put(`http://localhost:3000/cidades/${cidade.id}`, cidade)
                .toPromise()
                .then(response => response.json())
                .catch(erro => {                                // Acrescentado o método catch
                    return Promise.reject(`Erro ao alterar cidade ${cidade.id}.`);
                });
        }
        ...


    . Acesse o componente "app.component.ts" e implemente o código abaixo no método "atualizar":

        ...
        atualizar(cidade: any) {
            this.cidadeService.atualizar(cidade)
                .then(() => {
                    alert('Cidade alterada com sucesso!');
                })
                .catch(erro => {            // Acrescentado o método "catch"
                    alert(erro);
                });
        }
        ...

    . Execute o projeto, tente fazer alguma alteração e veja o resultado.

        . No método "atualizar" do componente "cidade.service.ts" altere a URL para forçar o erro.
            Coloque uma porta inválida, ou o path "/cidade", ao invés de "/cidades".

    . Faça o mesmo tratamento para as demais operações.



Aula 17.01. Revisando e iniciando o back-end do projeto do curso
----------------------------------------------------------------

    . Instale a versão 5.7 do MySQL e deixe a senha do "root" com "root", ou instale um container docker. 

        . Para mais detalhes de como configurar um container docker MySQL, acesse o arquivo "Setup Linux.txt", 
            acesse o item "32. Instalação do Docker" e siga os passos.

    . Acesse a URL https://github.com/algaworks/curso-angular-rest-spring-boot-api e faça o download do projeto

    . Acesse o arquivo zipada baixado, localize e descompacte o projeto da aula 7.9 

    . Abra o projeto pelo IntelliJ.

    . Caso foi utilizado um container Docker, reconfigure a propriedade "spring.datasource.url" do arquivo 
        "application.properties", por exemplo:

        spring.datasource.url=jdbc:mysql://172.17.0.2/algamoneyapi?createDatabaseIfNotExist=true&useSSL=false

    . Acesse o pom.xml e inclua a dependência abaixo:

		<dependency>
			<groupId>jakarta.xml.bind</groupId>
			<artifactId>jakarta.xml.bind-api</artifactId>
			<version>2.3.2</version>
		</dependency>
		<dependency>
			<groupId>com.sun.xml.bind</groupId>
			<artifactId>jaxb-core</artifactId>
			<version>2.3.0.1</version>
		</dependency>
		<dependency>
			<groupId>com.sun.xml.bind</groupId>
			<artifactId>jaxb-impl</artifactId>
			<version>2.3.1</version>
		</dependency>

        . Essas dependências são necessárias devido a versão do java que estamos trabalhando "java 11".

    . No canto superior direito acesse as opções do Maven.

    . Na toolbar da tela que abrir acesse o botão com o simbolo do Mavem "m".

    . Execute o comando abaixo para gerar o arquivo jar do projeto:

        mvn package

    . No prompt do terminal acesse a subpasta do projeto "target" e execute o comando abaixo:

        java -jar Algamoneu-api-[versao].jar -spring.datasource.username=root --spring.datasource.password=root --algamoney.origin-permitida=http://localhost:4200

        // versão -> criado pelo maven "0.0.1"
        // --algamoney.origin-permitida=http://localhost:4200 -> Mais a frente este parâmetro permitirá que o navegador faça chamadas para o localhost:8080, ou seja outro endereço

    . Acesse o postman e execute a API com os parâmetros abaixo:

        GET     http://localhost:8080/lancamentos

        Faça um dos procedimentos abaixo:

            Authorization:

                type: Basic Auth
                Username: admin@algamoney.com
                Password: admin

            ou

            Headers:

                Authorization: Basic YWRtaW5AYWxnYW1vbmV5LmNvbTphZG1pbg==

                . Para conseguir a chave do Authorization, acesse o site https://www.base64encode.org/

                . No campo "Encode to Base64 format" digite "admin@algamoney.com:admin" e mande codificar. O valor
                    que surgir é o que comporá a expressão do "Authorization".

    . Execute outras URLs no mesmo padrão do item anterior:

        GET     http://localhost:8080/lancamentos?resumo

        GET     http://localhost:8080/pessoas

        GET     http://localhost:8080/categorias


Aula 17.2. Criando o serviço de consulta de lançamentos
-------------------------------------------------------

    Exemplos de como funciona HttpClient, Observable

        https://www.telerik.com/blogs/angular-basics-how-to-use-httpclient    

    . Montagem do projeto angular:

        git clone https://www.github.com/maransi/algamoney-ui8
        cd algamoney-ui8
        git remote set-url origin https://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@github.com/maransi/algamoney-ui8    

        ng serve --open

    . Acesse o projeto angular no VSCode, abra o componente "lancamentos-pesquisa.component.ts", elimine o valor do 
        array abaixo e implemente os demais métodos:

        ...
        export class LancamentosPesquisaComponent implements OnInit{
            
            lancamentos = [];       // Linha Incluida

            constructor( @Inject(LancamentoService) private lancamentoService){}

            ngOnInit(){
                this.pesquisar();
            }

            pesquisar(){
                this.lancamentoService.pesquisar()
                    .then( () => null );
            }

        }

    . Acesse a pasta raiz do projeto angular e crie o serviço lancamento como abaixo:

        . Atenção: Gerar esta class dentro do modulo "Lancamentos"

        ng g s lancamentos/lancamento --spec=false --module=lancamentos

    . Implemente o código abaixo no componente "lancamentos/lancamento.service.ts":

        import { Http, Headers } from '@angular/http';
        import { Injectable } from @angular/core';

        import 'rxjs/add/operator/toPromise';

        @Injectable()
        export class LancamentoService{

            lancamentosUrl = 'http://localhost:8080/lancamentos';

            constructor( private http: Http){ }

            pesquisar(): Promise<any>{
                const headers: Headers = new Headers();

                headers.append("Authorization", "Basic YWRtaW5AYWxnYW1vbmV5LmNvbTphZG1pbg==");

                return this.http.get(`${this.lancamentos}?resumo`, { headers: headers })        // Pode ser passado somente { headers }
                            .toPromise()
                            .then( response => {
                                console.log( response.json() );
                            });
            }
        }

    . Acesse o componente "lancamentos/lancamentos.module.ts" e importe o "HttpModule":

        ... 
        imports:[
            ...
            HttpModule
        ]

    . Acesse o componente "lancamentos.module.ts" e coloque no "providers" o 
        "LancamentoService":

        ...
        providers:[
            LancamentoService
        ],
        ...
    
    . Acesse o projeto angular, acesse o componente app.component.html e implemente o código abaixo:

        <app-navbar></app-navbar>

        <app-lancamentos-pesquisa></app-lancamentos-pesquisa>

    . Certifique-se que o projeto restful está ativo com os parâmetros abaixo, especial atenção para o 
        "--algamoney.origin-permitida=http://localhost:4200" senão dará problema de CORS:

        java -jar Algamoneu-api-[versao].jar -spring.datasource.username=root --spring.datasource.password=root --algamoney.origin-permitida=http://localhost:4200

    . Acesse a pasta raiz do projeto angular e execute o comando abaixo:

        ng serve --open

    . Acesse o navegador e execute a URL http://localhost:4200

    . Acesse a console do navegador e verifique o valor do "content" do "Object"

    . Acesse o componente "lancamentos/lancamento.service.ts" e altere o retorno do método "pesquisar":

            pesquisar(): Promise{any}{
                const headers: Headers();

                headers.append("Authorization", "Basic YWRtaW5AYWxnYW1vbmV5LmNvbTphZG1pbg==");

                return this.http.get(`${this.lancamentos}?resumo`, { headers: headers })        
                            .toPromise()
                            .then( response => response.json().content );   // Linha alterada
            }

    . Acesse o componente "lancamentos.pesquisa.component.ts" e altere o conteúdo do método "pesquisar":

        export class LancamentosPesquisaComponent implements OnInit{

            ...

            pesquisar(){
                this.lancamentoService.pesquisar()
                    .then( lancamentos => this.lancamentos = lancamentos );     // Linha alterada
            }

        }


    . Acesse o navegador, execute a URL http://localhost:4200 e verifique se o formulário veio com as infs da grid.


Aula 17.3. Adicionando filtro por descrição na pesquisa de lançamentos
----------------------------------------------------------------------    

    . Altere o método pesquisa do componente "lancamento.service.ts" e inclua a interface como abaixo:

        import { URLSearchParams } from '@angular/http';    // Import incluido
        ...

        export interface LancamentoFiltro{                  // Interface incluida
            descricao: string;
        }


        @Injectable()
        export class LancamentoService {
            ...
            pesquisar( filtro: LancamentoFiltro ): Promise<any>{             // Alterado a assinatura do método

                const headers: Headers = new Headers();

                const parms = new URLSearchParams();                    // Adicionado constante

                headers.append("Authorization","Basic YWRtaW5AYWxnYW1vbmV5LmNvbTphZG1pbg==");

                if (filtro.descricao){
                    params.set("descricao", filtro.descricao ); 
                }

                return this.http.get(`${this.lancamentoUrl}?resumo`, { headers: headers, search: params })        // Inclusão do search
                        .toPromise()
                        .then( response => response.json().content );

            }
            ...
        }

    . Acesse o componente "lancamentos-pesquisa.component.ts" e efetue as alterações abaixo:

        ...
        export class LancamentosPesquisaComponent implements OnInit{
            descricao: string;                                              // Inclusão da propriedade
            ...
            pesquisar(){
                this.lancamentoService
                    .pesquisar( { descricao: this.descricao })              // Alteração na assinatura do método call
                    .then( lancamentos => this.lancamentos = lancamentos );

            }
        }

    . Acesse o componente "lancamento-pesquisa.component.html" e realize as alterações abaixo:

        <div class="container">
            <div class="ui-g">
                <form autocomplete="off" (ngSubmit)="pesquisar()">      <!-- Linha Incluida -->
                    <div class="ui-g-12">
                        <h1>Lançamentos</h1>
                    </div>
                    <div class="ui-g-12 ui-fluid">
                        <label for="descricao">Descrição</label>
                        <input pInputText 
                                type="text" 
                                id="descricao" 
                                class="p-inputtext-sm"
                                name="descricao"                <!-- Incluido -->
                                [(descricao)]="descricao">      <!-- Incluido -->
                    </div>
                    <div class="ui-g-12">
                        <label style="display: block;">Vencimento</label>
                        <input pInputText type="text" class="p-inputtext-sm" style="width:95px;">

                        <label>Até</label>
                        <input pInputText type="text" class="p-inputtext-sm" style="width:95px;">
                    </div>

                    <div class="ui-g-12">
                        <button pButton type="submit" label="Pesquisar" class="p-button-sm"></button>
                    </div>
                </form>
            </div>
        </div>

        <div class="container">
            <div class="ui-g-12">
                <app-lancamentos-grid [lancamentos]="lancamentos"></app-lancamentos-grid>
            </div>
            <div class="ui-g-12">
                <button pButton type="submit" label="Novo Lançamento" class="p-button-sm"></button>
            </div>
        </div>

    . Levante:
    
        . O container docker com o banco de dados:

            docker start algamoney3

        . O projeto Restful:

            java -jar algamoney-api-1.0.0-SNAPSHOT.jar --algamoney.origin-permitida=http://localhost:4200

        . O projeto angular:

            ng serve --open

    . Execute o projeto no navegador e verifique se está funcionando a pesquisa por descricao.


Aula 17.4. Adicionando filtro por datas na pesquisa de lançamentos
------------------------------------------------------------------

    . Acesse a pasta raiz do projeto e instale a biblioteca "moment.js", ela servirá para colocar a data
        no padrão das nossas APIs "yyyy-mm-dd".

        npm i moment@2.19.4 --save

        . Essa é a versão de 2018 

    . Acesse o componente "lancamentos-pesquisa.component.ts" e efetue as alterações abaixo:

        ...
        export class LancamentosPesquisaComponent implements OnInit{
            descricao: string;                                              
            dataVencimentoInicio: Date;             // Inclusão da propriedade
            dataVencimentoFim: Date;            // Inclusão da propriedade

            pesquisar(){
                const filtro: LancamentoFiltro = {                  // Objeto incluido
                    descricao: this.descricao,
                    dataVencimentoInicio: this.dataVencimentoInicio,
                    dataVencimentoFim: this.dataVencimentoFim
                };
                this.lancamentoService
                    .pesquisar( filtro )              // Alteração na assinatura do método call
                    .then( lancamentos => this.lancamentos = lancamentos );

            }


    . Altere interface "LancamentoFiltro" do componente "lancamento.service.ts"  como abaixo:


        import * as moment from 'moment';  
        ...

        export interface LancamentoFiltro{                  
            descricao: string;
            dataVencimentoInicio: Date;             // Inclusão da propriedade
            dataVencimentoFim: Date;            // Inclusão da propriedade
        }


        @Injectable()
        export class LancamentoService {
            ...
            pesquisar( filtro: LancamentoFiltro ): Promise<any>{             

                ...
                if (filtro.descricao){
                    params.set("descricao", filtro.descricao ); 
                }

                if (filtro.dataVencimentoInicio){
                    params.set("descricao", filtro.descricao ); 
                    params.set("dataVencimentoDe", moment(filtro.dataVencimentoInicio).format("YYYY-MM-DD") );   // Inclusão do parâmetro
                }

                if (filtro.dataVencimentoFim){
                    params.set("descricao", filtro.descricao ); 
                    params.set("dataVencimentoAte", moment(filtro.dataVencimentoFim).format("YYYY-MM-DD") );     // Inclusão do parâmetro
                }
                ...

    . Acesse o componente "lancamento-pesquisa.component.html" e realize as alterações abaixo:

        <div class="ui-g-12">
            <label style="display: block;">Vencimento</label>
            <!-- <input pInputText type="text" class="p-inputtext-sm" style="width:95px;">          Apagar essa linha -->
            
            <!-- Incluido -->
            <p-calendar dateForma="dd/mm/yy"                                            
                        [inputStyle]="{width: '95px'}"
                        name="vencimentoInicio"
                        [(ngModel)]="dataVencimentoInicio"></p-calendar>

            <label>Até</label>
            <!-- <input pInputText type="text" class="p-inputtext-sm" style="width:95px">          Apagar essa linha -->
            
            <!-- Incluido -->
            <p-calendar dateFormat="dd/mm/yy"
                        [inputStyle] = "{width: '95px'}"
                        name="vencimentoFim"
                        [(ngModel)]="dataVencimentoFim"></p-calendar>
        </div>

    . Execute o projeto e verifique se a página está funcionando com todos os parâmetros de pesquisa, 
        principalmente com os campos datas.


Aula 17.5. Implementando a paginação no serviço de lançamentos
--------------------------------------------------------------

    . Acesse o componente "lancamento.service.ts" e altere a interface "LancamentoFiltro":

        export class LancamentoFiltro{          // Alteração de interface para classe
            descricao: string;
            dataVencimentoInicio: Date;
            dataVencimentoFim: Date;

            pagina = 0;                         // Inclusão
            itensPorPagina = 5;                 // Inclusão
        }

    . Acesse o componente "lancamento.service.ts" e altere o método "pesquisar":

        pesquisar( filtro: LancamentoFiltro): Promise<any>{
            ...

            params.set("page", filtro.pagina.toString() );          // Inclusão
            params.set("size", filtro.itensPorPagina.toString() );  // Inclusão

            if ( filtro.descricao ){ ... }

            ...
        }

    . Acesse o componente "lancamento.pesquisa.component.ts" e faça a mudança das propriedades de 
        pesquisa pela classe criada no primeiro passo:

        export class LancamentoPesquisaComponent implements OnInit{

            /*  Apagar
            descricao: string;
            dataVencimentoInicio: Date;
            dataVencimentoFim: Date;
            */

            filtro = new LancamentoFiltro();

            ...
            pesquisar(){
                /* Apagar
                const filtro: LancamentoFiltro = {
                    descricao: this.descricao,
                    dataVencimentoInicio: this.dataVencimentoInicio,
                    dataVencimentoFim: this.dataVencimentoFim
                };
                */

                this.lancamentoService
                    .pesquisar( this.filtro )           // Alterado
                    .then( resultado => {
                            this.lancamentos = resultado.lancamentos;
                    });

            }

        }

    . Acesse o componente "lancamentos.pesquisa.component.html" e faça as alterações abaixo:

        <div class="ui-g-12 ui-fluid">
            <label for="descricao">Descrição</label>
            <input pInputText 
                    type="text" 
                    id="descricao" 
                    class="p-inputtext-sm"
                    name="descricao"
                    [(ngModel)] = "filtro.descricao">   <!-- Alterado -->
        </div>
        <div class="ui-g-12">
            <label style="display: block;">Vencimento</label>
            <p-calendar dateFormat="dd/mm/yy"
                        [inputStyle]="{width: '95px'}"
                        name="vencimentoInicio"
                        [(ngModel)]="filtro.dataVencimentoInicio"></p-calendar> <!- Alterado -->
            <label>Até</label>
            <p-calendar dateFormat="dd/mm/yy"
                        [inputStyle]="{width: '95px'}"
                        name="vencimentoFim"
                        [(ngModel)]="filtro.dataVencimentoFim"></p-calendar> <!-- Alterado -->
        </div>

    . Execute o projeto no navegador e perceba que está vindo somente a primeira página.

    . Acesse o componente "lancamento.service.ts" e altere o método "pesquisar" como abaixo:

        pesquisar( filtro: LancamentoFiltro ): Promise<any>{

            ...
            /*
            return this.http.get(`${this.lancamentoUrl}?resumo`, { headers: headers, search: params  })        // Pode ser passado somente { headers }
                    .toPromise()
                    .then( response => response.json().content );
            */

            return this.http.get(`${this.lancamentoUrl}?resumo`, { headers: headers, search: params  })        // Pode ser passado somente { headers }
                    .toPromise()
                    .then( response => {
                            const responseJson = response.json();
                            const lancamentos = responseJson.content;

                            const resultado = {
                                lancamentos,
                                total: responseJson.totalElements
                            };

                            return resultado;
                    });
        }

Aula 17.6. Configurando a paginação lazy do PrimeNG
---------------------------------------------------

    . Acesse o componente "lancamentos-pesquisa.component.ts" e acrescente o código abaixo:

        import{ LazyLoadEvent } from 'primeng/components/commom/api'     // Linha incluida
        ...
        export class LancamentosPesquisaComponent implements OnInit {

            totalRegistros = 0;                 // Linha incluida
            filtro = new LancamentoFiltro();

            ...

            ngOnInit(){
                // this.pesquisar();      // Eliminar linha
            }

            pesquisar( pagina = 0 ){            // Linha alterada
                this.filtro.pagina = pagina     // Linha incluida

                this.lancamentoService
                    .pesquisar( this.filtro )
                    .then( resultado => {
                        this.totalRegistros = resultado.total;      // Linha incluida
                        this.lancamentos = resultado.lancamentos;
                    });
            }

            // Método incluido
            aoMudaPagina( event: LazyLoadEvent ): void{
                const pagina = event.first / event.rows;

                this.pesquisar( pagina );
            }
        }

    . Acesse o componente "lancamentos-pesquisa.component.html" e implemente o código abaixo:


        <div class="container">
            <div class="ui-g-12">

            <!--    ATENÇÃO: Pegue o código do componente lancamentos-grid.component.ts e substitua no lugar da tag abaixo
                <app-lancamentos-grid [lancamentos]="lancamentos"></app-lancamentos-grid>
            -->    

                <p-dataTable [value]="lancamentos" 
                                [paginator]=true 
                                [rows]="filtro.itensPorPagina"                  // Linha Alterada
                                [responsive]="true"
                                emptyMessage = "Nenhum registro encontrado"     // Linha Incluida
                                [lazy] = "true"                                 // Linha Incluida
                                [totalRecords] = "totalRegistros"               // Linha Incluida
                                (onLazyLoad) = "aoMudaPagina( $event )">        // Linha Incluida
                            ...
                </p-dataTable>
            </div>
        </div>

        . A mudança do codigo da grid html para a pesquisa seria para facilitar na comunicações de todas
            propriedades do componente lancamentos-pesquisa.component.ts com lancamento-pesquisa.component.html 
            (filtro, totais, etc)

    . Execute o projeto no navegador e examine se a paginação está funcionando.


17.7. Desafio: criando a consulta e listagem de pessoas
-------------------------------------------------------    

    . Acesse o componente "pessoa-pequisa.component.ts" e elimine o conteúdo da coleção "pessoas":

          pessoas: any[] ;

    . Acesse o método OnInit do componente "pessoa-pesquisa.component.ts" e deixe sem conteúdo:

        ...
        ngOnInit() {

        }
        ...

    . Acesse a pasta raiz do projeto e crie o componente "pessoa-service.ts" como abaixo:

        ng g s pessoas/pessoa --spec=false --module=pessoas

    . Acesse o componente "pessoa-service.ts" e copie  o código abaixo:

        import { Injectable } from '@angular/core';
        import { Http, Headers } from '@angular/http';
        import { HttpClient, HttpHeaders } from '@angular/common/http';
        import { Observable } from 'rxjs/Observable';
        import { Lancamento } from 'app/domain/lancamento';
        import { URLSearchParams} from '@angular/http';
        import * as moment from 'moment';

        export class PessoaFiltro{
            nome: string;

            pagina = 0;
            itensPorPagina = 3;
        }


        @Injectable()
        export class PessoaService {

            pessoaUrl = 'http://localhost:8080/pessoas';

            constructor( private http: Http) { }

            pesquisar( filtro: PessoaFiltro ): Promise<any>{

                const headers: Headers = new Headers();

                const params = new URLSearchParams();

                headers.append("Authorization","Basic YWRtaW5AYWxnYW1vbmV5LmNvbTphZG1pbg==");

                params.set("page", filtro.pagina.toString() );
                params.set("size", filtro.itensPorPagina.toString());

                if ( filtro.nome ){
                params.set("nome", filtro.nome );
                }

                return this.http.get(`${this.pessoaUrl}?resumo`, { headers: headers, search: params  })        // Pode ser passado somente { headers }
                        .toPromise()
                        .then( response => {
                                        const responseJson = response.json();
                                        const pessoas = responseJson.content;

                                        const resultado = {
                                            pessoas,
                                            total: responseJson.totalElements
                                        };

                                        return resultado;
                                });
            }

        }

    . Acesse o component "pessoa-pesquisa.component.ts" e transfira o código abaixo:

        import { Component, Inject, OnInit } from '@angular/core';
        import { Pessoa } from 'app/domain/pessoa';
        import { PessoaFiltro, PessoaService } from '../pessoa.service';
        import { LazyLoadEvent } from 'primeng/components/common/api';

        @Component({
            selector: 'app-pessoas-pesquisa',
            templateUrl: './pessoas-pesquisa.component.html',
            styleUrls: ['./pessoas-pesquisa.component.css']
        })
        export class PessoasPesquisaComponent implements OnInit {

            pessoas: Pessoa[] ;

            totalRegistros = 0;

            filtro = new PessoaFiltro();

            constructor(@Inject( PessoaService ) private pessoaService) { }

            ngOnInit() {
            }

            pesquisar( pagina = 0 ){
                this.filtro.pagina = pagina;

                this.pessoaService
                    .pesquisar( this.filtro )
                    .then( resultado => {
                        this.totalRegistros = resultado.total;
                        this.pessoas = resultado.pessoas;
                    });
            }

            aoMudarPagina( event: LazyLoadEvent ){
                const pagina = event.first / event.rows;

                this.pesquisar( pagina );
            }
        }

    . Acesse o componente "pessoa.pesquisa.component.html" e transfira o código abaixo:

        <div class="container">
            <form autocomplete="off"
                    (ngSubmit) = "pesquisar()">
                <div class="ui-g">
                <div class="ui-g-12">
                    <h1>Pessoas</h1>
                </div>

                <div class="ui-g-12 ui-fluid">
                    <label>Nome</label>
                    <input type="text"
                            pInputText
                            id="nome"
                            class="p-inputtext-sm"
                            name="nome"
                            [(ngModel)]="filtro.nome">
                </div>

                <div class="ui-g-12">
                    <button pButton
                            type="submit"
                            label="Pesquisar"
                            class="p-button-sm"></button>
                </div>
                </div>
            </form>
        </div>

        <div class="container">
            <div class="ui-g-12">
                <p-dataTable [value]="pessoas"
                            [paginator]=true
                            [rows]="filtro.itensPorPagina"
                            [responsive]=true
                            emptyMessage = "Nenhum registro encontrado"
                            [lazy]=true
                            [totalRecords]="totalRegistros"
                            (onLazyLoad) = "aoMudarPagina( $event )">
                <p-column field="nome" header="Nome" ></p-column>
                <p-column field="cidade" header="Cidade"></p-column>
                <p-column field="estado" header="Estado"></p-column>
                <p-column field="ativo" header="Status">
                    <ng-template let-pes="rowData" pTemplate="body">
                        <a href="javascript:;" [pTooltip]="pes.ativo ? 'Desativar' : 'Ativar'"
                            tooltipPosition="top">
                        {{ pes.ativo ? 'Ativo' : 'Inativo' }}
                        </a>
                    </ng-template>
                </p-column>
                <p-column styleClass="col-acoes">
                    <ng-template pTemplate="body">
                    <a pButton icon="fa-pencil" pTooltip="Editar" tooltipPosition="top"></a>
                    <a pButton icon="fa-trash" pTooltip="Eliminar" tooltipPosition="top"></a>
                    </ng-template>
                </p-column>
                </p-dataTable>
            </div>

            <div class="ui-g-12">
                <button pButton
                        class="p-button-sm"
                        type="submit"
                        label="Nova Pessoa"></button>
            </div>
        </div>


Aula 17.8. Excluindo lançamentos e o decorador @ViewChild
---------------------------------------------------------

    . Acesse o componente "app.component.html" e atualize com o código abaixo:

        <app-navbar></app-navbar>

        <app-lancamentos-pesquisa></app-lancamentos-pesquisa> 

    . Acesse o componente "lancamento.service.ts" e inclua o método abaixo:

        ...
        excluir( codigo: number ): Promise<void>{
            const headers = new Headers();

            headers.append("Authorization","Basic YWRtaW5AYWxnYW1vbmV5LmNvbTphZG1pbg==");

            return this.http.delete(`${this.lancamentoUrl}/${codigo}`, { headers: headers })        // Pode ser passado somente { headers }
                        .toPromise()
                        .then( () => null );
        }
        ...

    . Acesse o componente "lancamento-pesquisa.component.ts" e inclua o método abaixo:

        export class LancamentosPesquisaComponent implements OnInit{
            @ViewChid('tabela') grid;           // Incluido
            ...
            excluir( lancamento: any ){         // Inlcuido
                this.lancamentoService.excluir( lancamento.codigo )
                    .then( () => {
                        if ( this.grid.first === 0 ){
                            this.pesquisar();
                        } else {
                            this.grid.first = 0;
                        }
                    })
            }
            ...
        }

    . Acesse o componente "lancamento-pesquisa.component.html" e realize a alteração abaixo:

    <p-dataTable [value]="lancamentos" 
                  [paginator]=true 
                  [rows]="filtro.itensPorPagina"
                  [responsive]="true"
                  emptyMessage = "Nenhum registro encontrado"
                  [lazy] = true
                  [totalRecords] = "totalRegistros"
                  (onLazyLoad) = "aoMudarPagina( $event )"
                  #tabela>      <!-- Incluido -->
        ...
        <p-column styleClass="col-acoes">
            <ng-template 
                let-lanc="rowData"      <!-- Incluido ->
                pTemplate="body">
                <a pButton icon="fa-pencil" pTooltip="Editar" tooltipPosition="top"></a>
                <a pButton icon="fa-trash"  
                    pTooltip="Eliminar" 
                    tooltipPosition="top"
                    (click)="excluir(lanc)"></a>    <!-- Incluido -->
            </ng-template>
        </p-column>
        ...

    . Teste a aplicação no navegador.

Aula 17.9. Adicionando mensagem de sucesso com Angular Toasty
-------------------------------------------------------------

    . Acesse a pasta raiz do projeto e execute o comando abaixo:

        npm install ng2-toasty --save

        . Verifique se a versão atual será compativel com o projeto

    . Acesse o componente "app.module.ts" e faça o import do "toasty":

        import { ToastyModule } from 'ng2-toasty';
        ...
        import: [
            ...
            ToastyModule.forRoot(),
        ]

    . Acesse o arquivo "app.component.ts" e implemente o construtor:

        import { ToastyConfig } from 'ng2-toasty';
        ...
        export class AppComponent{

            constructor( private toastyConfig: ToastyConfig ){
                this.toastyConfig.theme = "bootstrap";
            }
        }

    . Acesse o arquivo .angular-cli.json e registre o style do "toasty":

        ...
        style: [
            ...
            "../node_modules/ng2-toasty/style-bootstrap.css"
        ]

    . Acesse o arquivo "app.component.html" e acrescente a tag abaixo:

        ...
        <ng2-toasty></ng2-toasty>

    . Acesse o componente "lancamentos-pesquisa.component.ts" e faça a injeção do "toasty":

        ...
        constructor( private lancamentoService: LancamentoService,
                    private toasty: ToastyService ){}
        ...
        excluir( lancamento: any ){         // Inlcuido
            this.lancamentoService.excluir( lancamento.codigo )
                .then( () => {
                    if ( this.grid.first === 0 ){
                        this.pesquisar();
                    } else {
                        this.grid.first = 0;
                    }

                    this.toasty.success("Lançamento excluído com sucesso")
                });
        }
        ...

    . Teste a aplicação no navegador.

17.10. Adicionando diálogo de confirmação antes da exclusão
-----------------------------------------------------------

    . Acesse o componente "app.module.ts" e faça o import do "ConfirmDialog" e o provider:

        import { ConfirmDialogModule } from 'primeng/components/confirmdialog/confirmdialog';
        import { ConfirmationSErvice} from 'primeng/components/common/api';
        ...
        import: [
            ...
            ConfirmDialogModule,
        ],
        providers:[
            ...
            ConfirmationService
        ]

    . Acesse o componente "lancamentos-pesquisa.component.ts" e faça a injeção do "confirmationService":

        ...
        constructor( private lancamentoService: LancamentoService,
                    private toasty: ToastyService,
                    private confirmationService: ConfirmationService ){}    // Incluido
        ...
        confirmarExclusao( lancamento: any){
            this.confirmationService.confirm( {
                message: "Tem certeza que deseja excluir?",
                accept: () => {
                    this.excluir( lancamento );
                }
            });
        }
        ...

    . Acesse o componente "lancamento-pesquisa.component.html" e realize a alteração abaixo:

        <p-dataTable [value]="lancamentos" 
                    [paginator]=true 
                    [rows]="filtro.itensPorPagina"
                    [responsive]="true"
                    emptyMessage = "Nenhum registro encontrado"
                    [lazy] = true
                    [totalRecords] = "totalRegistros"
                    (onLazyLoad) = "aoMudarPagina( $event )"
                    #tabela>      
            ...
            <p-column styleClass="col-acoes">
                <ng-template 
                    let-lanc="rowData"      
                    pTemplate="body">
                    <a pButton icon="fa-pencil" pTooltip="Editar" tooltipPosition="top"></a>
                    <a pButton icon="fa-trash"  
                        pTooltip="Eliminar" 
                        tooltipPosition="top"
                        (click)="confirmarExclusao(lanc)"></a>           <!-- Alterado -->
                </ng-template>
            </p-column>
            ...

    . Acesse o arquivo "app.component.html" e acrescente a tag abaixo:

        ...
        <p-confirmDialog header="Confirmação">
                        icon="fa fa-question-circle"
                        #confirmacao>
            <p-footer>
                <button type="button" 
                        pButton 
                        icon="fa-check" 
                        label="Sim"
                        (click)="confirmacao.accept()"></button>
                <button type="button" 
                        pButton 
                        icon="fa-times" 
                        label="Não"
                        (click)="confirmacao.reject()"></button>
            </p-footer>                
        </p-confirmDialog>

    . Execute o projeto e verifique se o Dialog de confirmação no botão de exclusão está funcionando.

17.12. Criando um serviço de tratamento de erros
------------------------------------------------

    . Na pasta raiz do projeto execute o comando abaixo:

        ng g s core/error-handler --spec=false --module=core

    . Acesse o arquivo "core/core.module.ts" e implemente o código abaixo:

        import { ToastyModule } from 'ng2-toasty';
        ...
        exports:[
            ...,
            ToastyModule,
            ConfirmDialogModule
        ]
        imports:[
            ...
            LancamentoService,
            PessoaService,
            ConfirmationService,
            ToastyModule,
            ConfirmDialogModule
        ]
        providers: [
            ErrorHandlerService,
            {provide: LOCALE_ID, useValue: 'pt-BR'}            
        ]
        ...

    . Acesse o componente "app.module.ts" e elimine a importação abaixo:

        imports:[
            ...
//            ToastyModule.forRoot(),
//            ConfirmDialogModule,
            ...
        ],
        providers: [
//            {provide: LOCALE_ID, useValue: 'pt-BR'},
//            ConfirmationService            
        ]

    . Execute o projeto e verifique se tudo continua funcionando.

    . Implemente o código abaixo no arquivo "error-handler.service.ts":

        import { Inject, Injectable } from '@angular/core';
        import { ToastyService } from 'ng2-toasty';

        @Injectable()
        export class ErrorHandlerService {

            constructor( @Inject( ToastyService ) private toasty) { }

            handle( errorResponse: any ){
                let msg: string;

                if ( typeof errorResponse === "string"){
                msg = errorResponse;
                }else{
                msg = "Erro ao processar serviço remoto. Tente novamente!!!";

                console.log("Ocorreu um erro ", errorResponse );
                }

                this.toasty.error(msg);    
            }
        }

    . Acesse o componente "lancamentos-pesquisa.component.ts" e implemente o código abaixo:

        ...
        @Component({
            selector: 'app-lancamentos-pesquisa',
            templateUrl: './lancamentos-pesquisa.component.html',
            styleUrls: ['./lancamentos-pesquisa.component.css']
        })
        export class LancamentosPesquisaComponent implements OnInit {
            ...

            constructor( @Inject(LancamentoService) private lancamentoService,
                            @Inject(ToastyService) private toasty,
                            @Inject(ConfirmationService) private confirmationService
                            @Inject( ErrorHandlerService) private errorHandler ){}      // Inlcuido

            pesquisar( pagina = 0 ){

                this.filtro.pagina = pagina;

                this.lancamentoService
                        .pesquisar( this.filtro )
                        .then( resultado => {
                        this.totalRegistros = resultado.total;
                        this.lancamentos = resultado.lancamentos;
                        })
                        .catch( erro => this.errorHandler.handle(erro) );   // Inlcluido
            }

            ...
            excluir( lancamento: any ){
                this.lancamentoService.excluir( lancamento.codigo )
                .then( () => {
                    if ( this.grid.first === 0 ){
                        this.pesquisar();
                    }else{
                        this.grid.first = 0;
                    }

                    this.toasty.success("Lançamento excluido com sucesso!!");
                })
                .catch( erro => this.errorHandler( erro ) );            // Incluido
            }


        }

    . Acesse o componente "lancamento.service.ts" e altere o valor da propriedade "lancamentosUrl":

        ...
        @Injectable()
        export class LancamentoService {
            ...

            excluir( codigo: number): Promise<void>{
                const headers = new Headers();

                headers.append("Authorization","Basic YWRtaW5AYWxnYW1vbmV5LmNvbTphZG1pbg==");
/*
                return this.http.delete(`${this.lancamentoUrl}/${codigo}`, { headers: headers })
                        .toPromise()
                        .then( () => null );
*/                        
                // Altere a URL de chamada
                return this.http.delete(`${this.lancamentoUrl}/${codigo}/12345`, { headers: headers })
                        .toPromise()
                        .then( () => null );
            }

        }

    . Teste no navegador a exclusão e verifique se está apresentando erro, tanto na tela quanto na console.

    . Acesse o componente "lancamento.service.ts", retorne a linha correta comentada e apaghe a errada.


17.14. Desafio: mensagem de erro de usuário na exclusão de pessoa
-----------------------------------------------------------------

    . Acesse o componente "hanler.service.ts" e copie o código abaixo:

        import { Injectable } from '@angular/core';
        import { Response } from '@angular/http';

        import { ToastyService } from 'ng2-toasty';

        @Injectable()
        export class ErrorHandlerService {

            constructor(private toasty: ToastyService) { }

            handle(errorResponse: any) {
                let msg: string;

                if (typeof errorResponse === 'string') {
                   msg = errorResponse;
                } else if (errorResponse instanceof Response
                    && errorResponse.status >= 400 && errorResponse.status <= 499) {
                    let errors;
                    msg = 'Ocorreu um erro ao processar a sua solicitação';

                    try {
                        errors = errorResponse.json();

                        msg = errors[0].mensagemUsuario;
                    } catch (e) { }

                    console.error('Ocorreu um erro', errorResponse);

                } else {
                    msg = 'Erro ao processar serviço remoto. Tente novamente.';
                    console.error('Ocorreu um erro', errorResponse);
                }

                this.toasty.error(msg);
            }
        }



17.17. Listando as categorias cadastradas no dropdown
-----------------------------------------------------

    . Criar o componente categoria-service. Pegar o projeto dessa aula.

        ng g s lancamentos/categoria/categoria --spec=false --module=lancamentos

    . Acesse o arquivo "lancamentos/lancamentos.module.ts" e inclua no provider o componente "CategoriaService":

        ...
        providers: [CategoriaService]
        ...

    . Acesse o componente "categoria-service.ts" e inclua o conteúdo abaixo:

        import { Injectable } from '@angular/core';
        import { Http, Headers } from '@angular/http';

        import 'rxjs/add/operator/toPromise';

        @Injectable()
        export class CategoriaService {

            categoriasUrl = 'http://localhost:8080/categorias';

            constructor(private http: Http) { }

            listarTodas(): Promise<any> {
                const headers = new Headers();
                headers.append('Authorization', 'Basic YWRtaW5AYWxnYW1vbmV5LmNvbTphZG1pbg==');

                return this.http.get(this.categoriasUrl, { headers })
                .toPromise()
                .then(response => response.json());
            }
        }    

    . Acesse o componente "lancamento-cadastro.component.ts" e retire todo o conteúdo da coleção categorias:

        ...
        @Component({
            selector: 'app-lancamento-cadastro',
            templateUrl: './lancamento-cadastro.component.html',
            styleUrls: ['./lancamento-cadastro.component.css']
        })
        export class LancamentoCadastroComponent implements OnInit {

            tipos = [{label: 'Receita', value: 'RECEITA' },
                        {label: 'Despesa', value: 'DESPESA'}];

            categorias = [ ];   // Linha alterada

            ...

            constructor( @Inject( CategoriaService ) private categoriaService,      // constructor alterado
                         @Inject( ErrorHandlerService ) private errorHandler){}

            OnInit(){
                this.carregarCategorias();
            }
            ...

            carregarCategorias(){                               // Metodo incluido
                return this.categoriaService.listarTodas()
                                    .then(categorias => {
                                                            this.categorias = categorias.map(c => ({ label: c.nome, value: c.codigo }));
                                    })
                                    .catch(erro => this.errorHandler.handle(erro));
            }                       
        }


    . Acesse o componente "lancamento-cadastro.component.ts" e atualize a tag de categoria:

          <div class="ui-g-12 ui-md-6 ui-fluid">
              <label>Categoria {{ categoria.value }}</label>
              <p-dropdown [options]="categorias"
                          [autoWidth]="false"
                          placeholder="Selecione"   <!-- Alterado -->
                          [filter]="true"
                          ngModel               <!-- Incluido -->
                          name="categoria"      <!-- Incluido -->
                          required              <!-- Incluido -->
                          #categoria></p-dropdown>
          </div>


    . Carregue o projeto e verifique se a lista de categorias está funcionando.


17.18. Desafio: listando as pessoas cadastradas no dropdown
-----------------------------------------------------------

    . Acessar o componente "lancamento-cadastro.component.ts" e deixar sem conteúdo o array "pessoas":

        ...
        pessoas = [ /* { label: 'Selecione', value: 0},
                    { label: 'Marco Antonio', value: 1},
                    { label: 'Catia Louse', value: 2 },
                    { label: 'Gustavo Rocha', value: 3},
                    { label: 'Jose Silva', value: 4},
                    { label: 'João Silva', value: 5 },
                    { label: 'Maria Jose', value: 6 },
                    { label: 'Lucia Marins', value: 7 },
                    { label: 'Mariana Fontes', value: 8 },
                    { label: 'Carlos Eduardo', value: 9 }
                    */
                ];    
        ...


    . Acesse o componente "pessoa.service.ts" e implemente o código abaixo:

        ...
        listarTodas(): Promise<any>{
            const headers = new Headers();

            headers.append("Authorization", "Basic YWRtaW5AYWxnYW1vbmV5LmNvbTphZG1pbg==")


            return this.http.get(this.pessoaUrl, { headers })
                    .toPromise()
                    .then( response => {
                                            const responseJson = response.json()
                                            const pessoas = responseJson.content;

                                            return pessoas;
                    });
        }
        ...

    . Acesse o componente "lancamento-cadastro.component.ts" e implemente o código abaixo:

        ...
        carregarPessoas(){
            this.pessoaService.listarTodas()
                .then( 
                pessoas => {
                    this.pessoas = pessoas.map( p => ({ label: p.nome, value: p.codigo}));
                }
                )
                .catch( erro => this.errorHandler.handle(erro));
        }
        ...

    . Acesse o componente "lancamento-cadastro.component.html" e altere a tag abaixo:

        ...
        <div class="ui-g-12 ui-md-6 ui-fluid">
            <label>Pessoa {{pessoa.value}}</label>
            <p-dropdown  [options]="pessoas"
                        [autoWidth]="false"
                        placeholder="Selecione"
                        [filter]="true"
                        #pessoa
                        ngModel
                        name="pessoa"
                        required></p-dropdown>
        </div>
        ...
    
    . Execute o projeto e verifique se o combo pessoa está trazendo as pessoas com sucesso.


Aula 17.19. Criando classes de modelo e usando no cadastro de lançamentos
-------------------------------------------------------------------------

    . Clique com o botão direito sobre a pasta "core" e crie um novo arquivo "model.ts" com o conteúdo abaixo:

        export class Pessoa{
            codigo: number;
        }

        export class Categoria{
            codigo: number;
        }

        export class Lancamento{
            codigo: number;
            tipo = 'RECEITA';
            descricao: string;
            dataVencimento: Date;
            dataPagamento: Date;
            valor: number;
            observacao: string;
            pessoa = new Pessoa();
            categoria = new Categoria();

        }

    . Acesse o componente "lancamento-cadastro.component.ts" e implemente o método abaixo:

        export class LancamentoCadastroComponente implements OnInit{
            ...
            lancamento = new Lancamento();

            ...
            salvar(form: FormControl){
                console.log( this.lancamento );
            }
            ...
        }

    . Faça os bidings dos campos da tela com a propriedade "lancamento" do componente "LancamentoCadastroComponent.html":

        <div class="container">
            <form #f="ngForm"
                autocomplete="off"
                (ngSubmit)="salvar(f)">

                <div class="ui-g">
                    <div class="ui-g-12">
                        <h1>Novo Lançamento</h1>
                    </div>

                    <div class="ui-g-12">
                        <p-selectButton [options]="tipos" 
                                        #tipo
                                        name="tipo"
                                        [(ngModel)]="lancamento.tipo"></p-selectButton>
                    </div>

                    <div class="ui-g-6 ui-md-3 ui-fluid">
                        <label>Vencimento</label>
                        <p-calendar dateFormat="dd/mm/yy"
                                    [showIcon]="true"
                                    name="vencimento"
                                    id="vencimento"
                                    [(ngModel)]="lancamento.dataVencimento"
                                    #vencimento="ngModel"
                                    required></p-calendar>
                        <app-message [control]="vencimento"
                                    error="required"
                                    text="Informe uma data válida"></app-message>
                    </div>

                    <div class="ui-g-6 ui-md-3 ui-fluid">
                        <label>{{ tipo.value == 'RECEITA' ? 'Recebimento' : 'Pagamento' }}</label>
                        <p-calendar dateFormat="dd/mm/yy" 
                                    [showIcon]="true"
                                    name="pagamento"
                                    id="pagamento"
                                    [(ngModel)]="lancamento.dataPagamento"
                                    #pagamento="ngModel"></p-calendar>
                    </div>

                    <div class="ui-g-12 ui-md-9 ui-fluid">
                        <label>Descrição </label>
                        <input type="text"
                                name="descricao"
                                [(ngModel)]="lancamento.descricao"
                                #descricao="ngModel"
                                required
                            minlength="5"
                            autocomplete="off"
                            pInputText>
                        <app-message [control]="descricao"
                                    error="required"
                                    text="Informe uma descrição válida"></app-message>

                        <app-message [control]="descricao"
                                    error="minlength"
                                    text="Mínimo de {{ descricao.errors?.minlength?.requiredLength }} caracteres"></app-message>
        <!--
                    <div class="ui-message ui-messages-error" *ngIf="descricao.hasError('required') && descricao.dirty">
                        Informe uma descrição válida
                    </div>

                    <div class="ui-message ui-messages-error" *ngIf="descricao.hasError('minlength') && descricao.dirty">
                        Tamanho mínimo da descrição deve ser de {{ descricao.errors.minlength.requiredLength }} caracteres
                    </div>
        -->
                    </div>
                    <div class="ui-g-12 ui-md-3 ui-fluid">
                        <label>Valor</label>
                        <input type="text"
                            pInputText
                            placeholder="0,00"
                            currencyMask
                            [(ngModel)]="lancamento.valor"
                            name="valor"
                            [options]="{ prefix: 'R$', thousands: '.', decimal: ',', allowNegative: false}">
                    </div>
                    <div class="ui-g-12 ui-md-6 ui-fluid">
                        <label>Categoria {{ categoria.value }}</label>
                        <p-dropdown [options]="categorias"
                                    [autoWidth]="false"
                                    placeholder="Selecione"
                                    [filter]="true"
                                    [(ngModel)]="lancamento.categoria.codigo"
                                    name="categoria"
                                    required
                                    #categoria></p-dropdown>
                    </div>
                    <div class="ui-g-12 ui-md-6 ui-fluid">
                        <label>Pessoa {{pessoa.value}}</label>
                        <p-dropdown  [options]="pessoas"
                                    [autoWidth]="false"
                                    placeholder="Selecione"
                                    [filter]="true"
                                    #pessoa
                                    [(ngModel)]="lancamento.pessoa.codigo"
                                    name="pessoa"
                                    required></p-dropdown>
                    </div>

                    <div class="ui-g-12 ui-fluid">
                        <label>Observação</label>
                        <textarea pInputTextarea 
                                rows="3" 
                                cols="30"
                                name="observacao"
                                autoResize="autoResize"
                                [(ngModel)]="lancamento.observacao"></textarea>              
                    </div>
                    <div class="ui-g-12">
                        <button pButton type="submit" label="Salvar"></button>
                        <button pButton type="button" label="Novo" class="ui-button-info"></button>
                        <a href="javascrip:;">Voltar para a pesquisa</a>
                    </div>
                </div>
            </form>
        </div>


    . Altere a tag do componente "app.component.html" como abaixo:


        <app-navbar></app-navbar>

        <!-- <app-lancamentos-pesquisa></app-lancamentos-pesquisa> -->
        <app-lancamento-cadastro></app-lancamento-cadastro> 

        <!-- <app-pessoas-pesquisa></app-pessoas-pesquisa> -->
        <!-- <app-pessoa-cadastro></app-pessoa-cadastro> -->
        <!-- <app-cliente-form></app-cliente-form> -->

        <ng2-toasty></ng2-toasty>

        <p-confirmDialog header="Confirmação" icon="fa fa-question-circle" #confirmacao>
            <p-footer>
                <button type="button" pButton icon="fa-check" label="Sim"
                (click)="confirmacao.accept()"></button>
                <button type="button" pButton icon="fa-times" label="Não"
                (click)="confirmacao.reject()"></button>
            </p-footer>
        </p-confirmDialog>



    . Execute o projeto e verifique o conteúdo da estrutura "lancamento" no console do navegador.



Aula 17.20. Implementando o serviço de cadastro de lançamentos
--------------------------------------------------------------

    . Acesse o componente "lancamento.service.ts" e inclua o método abaixo:

        ...
    adicionar( lancamento: Lancamento): Promise<Lancamento>{
            const headers = new Headers();

            headers.append("Authorization", "Basic YWRtaW5AYWxnYW1vbmV5LmNvbTphZG1pbg==");
            headers.append("Content-Type", "application/json");

            return this.http.post( this.lancamentoUrl, 
                                    JSON.stringify( lancamento), 
                                    { headers } )
                                .toPromise()
                                .then( response => response.json() );
        }

 
    . Acesse o componente "lancamento-cadastro.component.ts" e inclua o método abaixo:

        import { ToastyService } from 'ng2-toasty';
        import { LancamentoService } from './../lancamento.service';
        ...
        export class LancamentoCadastroComponent implements OnInit {
            ...

            constructor( @Inject( CategoriaService) private categoriaService,
                            @Inject(PessoaService) private pessoaService,
                            @Inject(LancamentoService) private lancamentoService,
                            @Inject(ToastyService) private toasty,
                            @Inject( ErrorHandlerService) private errorHandler) { }

            ...
            salvar( form: FormControl ){
                this.lancamentoService.adicionar( this.lancamento )
                    .then( () => {
                        this.toasty.success( "Lançamento adicionado com sucesso!!!");
                    })
                    .catch( erro => this.errorHandler.handle( erro ));

                form.reset();
                this.lancamento = new Lancamento();
            }

    . Levante a aplicação e tente fazer uma inclusão de lançamento.

    . Acesse o postman e tente recuperar o lançamento incluido.

        http://localhost:8080/lancamentos?descricao=[Descrição inserida]


Aula 17.21. Desafio: implementando o cadastro de pessoas
--------------------------------------------------------

    . Acesse o componente "model.ts" e altere a classe "pessoa" como abaixo:

        ...
        export class Pessoa{
            codigo: number;
            nome: string;
            logradouro: string;
            numero: number;
            complemento: string;
            bairro: string;
            cep: string;
            cidade: string;
            estado: string;
            ativo: number;
        }  
        ...

    . Acesse o componente "pessoa-cadastro.component.ts" e implemente o código abaixo:

        @Component({
        selector: 'app-pessoa-cadastro',
        templateUrl: './pessoa-cadastro.component.html',
        styleUrls: ['./pessoa-cadastro.component.css']
        })
        export class PessoaCadastroComponent implements OnInit {
        //    pessoa = { nome: '', cidade: '', estado: '', status: '' };
            pessoa = new Pessoa();
            ...
        }

    . Acesse o componente "pessoa-cadastro.componente.html" e faça o binding dos campos da tela:

        <div class="container">
            <form #p="ngForm"
                    autocomplete="off"
                    (ngSubmit)="salvar(p)">
                <div class="ui-g">
                    <div class="ui-g-12">
                        <h1>Cadastramento de Pessoa</h1>
                    </div>

                    <div class="ui-g-12 ui-md-12 ui-fluid">
                        <label for="nome">Nome</label>
                        <input type="text"
                                name="nome"
                                id="nome"
                                pInputText
                                autocomplete="off"
                                [(ngModel)]="pessoa.nome"
                                #nome="ngModel"
                                required
                                minlength=5>

                        <app-message [control]="nome"
                                    error="required"
                                    text="Informe um nome válido"></app-message>

                        <app-message [control]="nome"
                                    error="minlength"
                                    text="Mínimo de {{ nome.errors?.minlength?.requiredLength }} caracteres"></app-message>
                    </div>
                    <div class="ui-g-11 ui-md-11 ui-sm-9 ui-fluid">
                        <label for="logradouro">Logradouro</label>
                        <input type="text"
                                name="logradouro"
                                id="logradouro"
                                pInputText
                                autocomplete="off"
                                [(ngModel)]="pessoa.logradouro"
                                #logradouro="ngModel"
                                required
                                minlength=5>
                        <app-message [control]="logradouro"
                                    error="required"
                                    text="Informe um logradouro válido"></app-message>
                        
                        <app-message [control]="logradouro"
                                        error="minlength"
                                        text="Mínimo de {{ logradouro.errors?.minlength?.requiredLength }} caracteres"></app-message>
                    </div>
                    
                    <div class="ui-g-1 ui-md-1 ui-sm-3 ui-fluid">
                        <label for="numero">No.</label>
                        <input type="text"
                                name="numero"
                                id="numero"
                                pInputText
                                autocomplete="off"
                                [(ngModel)]="pessoa.numero"
                                #numero="ngModel"
                                required
                                minlength=1>
                        
                        <app-message [control]="numero"
                                    error="required"
                                    text="Informe um número válido"></app-message>
                        
                        <app-message [control]="numero"
                                    error="minlength"
                                    text="Mínimo de {{ numero.errors?.minlength?.requiredLength }} caracteres"></app-message>
                    </div>
                    
                    <div class="ui-g-4 ui-md-4 ui-sm-12 ui-fluid">
                        <label for="complemento">Complemento</label>
                        <input type="text"
                                name="complemento"
                                id="complemento"
                                pInputText
                                autocomplete="off"
                                [(ngModel)]="pessoa.complemento"
                                #complemento="ngModel">
                    </div>
                    
                    <div class="ui-g-4  ui-md-4 ui-sm-12 ui-fluid">
                        <label for="bairro">Bairro</label>
                        <input type="text"
                                name="bairro"
                                id="bairro"
                                pInputText
                                autocomplete="off"
                                [(ngModel)]="pessoa.bairro"
                                #bairro="ngModel"
                                required
                                minlength=5>
                        <app-message [control]="bairro"
                                    error="required"
                                    text="Informe um bairro válido"></app-message>
                        
                        <app-message [control]="bairro"
                                    error="minlength"
                                    text="Mínimo de {{ bairro.errors?.minlength?.requiredLength }} caracteres"></app-message>
                    </div>
                    
                    <div class="ui-g-3 ui-md-3 ui-sm-12 ui-fluid">
                        <label for="cidade">Cidade</label>
                        <input type="text"
                                name="cidade"
                                id="cidade"
                                pInputText
                                autocomplete="off"
                                [(ngModel)]="pessoa.cidade"
                                #cidade="ngModel"
                                required
                                minlength=5>
                        <app-message [control]="cidade"
                                    error="required"
                                    text="Informe uma cidade válida"></app-message>
                        
                        <app-message [control]="cidade"
                                    error="minlength"
                                    text="Mínimo de {{ cidade.errors?.minlength?.requiredLength }} caracteres"></app-message>
                    </div>
                    
                    <div class="ui-g-1  ui-md-1 ui-sm-6 ui-fluid">
                        <label>CEP</label>
                        <p-inputMask mask="99999-999"
                                    id="cep"
                                    name="cep"
                                    autocomplete="off"
                                    [(ngModel)]="pessoa.cep"
                                    #cep="ngModel"
                                    required
                                    minlength=5></p-inputMask>
                        <app-message [control]="cep"
                                    error="required"
                                    text="Informe um CEP válido"></app-message>
                        
                        <app-message [control]="cep"
                                    error="minlength"
                                    text="Mínimo de {{ cep.errors?.minlength?.requiredLength }} caracteres"></app-message>
                    </div>
                    
                    <div class="ui-g-2 ui-md-2 ui-sm-6 ui-fluid">
                        <label>Estado {{ estado.value }}</label>
                        <p-dropdown [options]="estados"
                                    [autoWidth]="false"
                                    placeholder="Selecione"
                                    [filter]="true"
                                    name="estado"
                                    id="estado"
                                    [(ngModel)]="pessoa.estado"
                                    required
                                    #estado="ngModel"></p-dropdown>
                    </div>
                    <!--
                    <div class="ui-g-1 ui-md-2 ui-sm-12 ui-fluid" style="padding: 25px;">
                        <p-checkbox name="status" id="status" value="ATIVO" label="Ativo"></p-checkbox>
                    </div>
                    -->    
                    <div class="ui-g-12">
                        <button pButton type="submit" label="Salvar"></button>
                        <button pButton type="button" label="Novo" class="ui-button-info"></button>
                        <a href="javascrip:;">Voltar para a pesquisa</a>
                    </div>
                </div>
            </form>
        </div>

    . Altere a tag do componente "app.component.html" como abaixo:


        <app-navbar></app-navbar>

        <!-- <app-lancamentos-pesquisa></app-lancamentos-pesquisa> -->
        <!-- <app-lancamento-cadastro></app-lancamento-cadastro> -->

        <!-- <app-pessoas-pesquisa></app-pessoas-pesquisa> -->
        <app-pessoa-cadastro></app-pessoa-cadastro> 
        <!-- <app-cliente-form></app-cliente-form> -->

        <ng2-toasty></ng2-toasty>

        <p-confirmDialog header="Confirmação" icon="fa fa-question-circle" #confirmacao>
            <p-footer>
                <button type="button" pButton icon="fa-check" label="Sim"
                (click)="confirmacao.accept()"></button>
                <button type="button" pButton icon="fa-times" label="Não"
                (click)="confirmacao.reject()"></button>
            </p-footer>
        </p-confirmDialog>

    . Acesse o componente "pessoa.service.ts" e inclua o código abaixo:

        ...
        adicionar( pessoa: Pessoa ): Promise<Pessoa>{
            const headers = new Headers();

            headers.append("Authorization", "Basic YWRtaW5AYWxnYW1vbmV5LmNvbTphZG1pbg==");
            headers.append("Content-Type","application/json");

            return this.http.post(this.pessoaUrl, JSON.stringify( pessoa ), { headers })
                    .toPromise()
                    .then( response => response.json() );

        }
        ...
    
    . Acesse o componente "pessoa-cadastro.component.ts" e inclua o método abaixo:

        import { ToastyService } from 'ng2-toasty';
        import { PessoaService } from './../pessoa.service';
        ...
        export class PessoaCadastroComponent implements OnInit {
            ...

            constructor(@Inject( PessoaService ) private pessoaService,
                        @Inject( ToastyService) private toasty,
                        @Inject( ErrorHandler ) private errorHandler) { }

            ngOnInit() {
                this.pessoa.endereco = new Endereco();
            }

            salvar(form: FormControl){
                console.log( this.pessoa );
                this.pessoaService.adicionar( this.pessoa )
                    .then( () => {
                    this.toasty.success("Pessoa adicionada com sucesso!!!");
                    })
                    .catch( erro => this.errorHandler.handleError( erro ));

                form.reset();

                this.pessoa = new Pessoa();
                this.pessoa.endereco = new Endereco();
            }
        }

    . Levante a aplicação e tente fazer uma inclusão de uma pessoa.


18.1. Introdução a rotas
------------------------

    . Para mudar dinamicamente o conteúdo da nossa página principal do projeto "app.component.html" será 
        associado com o pathname da chamada da URL, por exemplo:

        localhost:4200/lancamentos :    lancamento-pesquisa.component.html
        localhost:4200/lancamentos/novo :    lancamento-cadastro.component.html
        
    . Para fazer essa associação utilizaremos a tag abaixo no "app.component.html"

        <router-outlet>

18.2. Configurando rotas na aplicação
-------------------------------------

    . Acesse o componente app.module.ts e insira o código abaixo:

        ...
        import { Routes, RouterModule } from '@angular/router';
        import {}

        const routes: Routes = [
            { path: "lancamentos", component: LancamentosPesquisaComponent },
            { path: "lancamentos/novo", component: LancamentoCadastroComponent },
            { path: "pessoas", component: PessoaPesquisaComponent}
        ]

        @NgModule({
            ...
            imports: [
                ...
                RouterMOdule.forRoot( routes )
            ]
        });
        ...

        . O atributo "path" contém a parte final do pathname escolhido, exemplo:

            http://localhost:4200/lancamentos -> lancamentos
            http://localhost:4200/lancamentos/novo -> lancamentos/novo

    
    . Acesse o componente "app.component.html", comente todas as tags que se referem aos componentes e 
        insira a tag <router-outlet> como abaixo:

        <router-outlet></router-outlet>

    . Levante o projeto e teste no navegador as URLs abaixo:

        http://localhost:4200/lancamentos -> lancamentos
        http://localhost:4200/lancamentos/novo -> lancamentos/novo



Aula 18.3. Navegando com Router Link
------------------------------------

    . Se acessar o componente "navbar.component.html" responsável pelo menu lateral, podemos definir as chamadas
        das URLs tranquilamente:

        <ul class="navbar-menu" [hidden]="!exibindoMenu">
            <li class="navbar-usuario">Jose da Silva</li>
            <li class="navbar-menuitem"><a href="/lancamentos">Lançamentos</a></li> <!-- URL alterada -->
            <li class="navbar-menuitem"><a href="/pessoas">Pessoas</a></li>         <!-- URL alterada -->
            <li class="navbar-menuitem"><a href="#">Logout</a></li>
        </ul>

    . Se formos testar agora o sistema chamando as páginas pelo menu eles funcionarão, porém não de uma maneira ideal.
        Todas as vezes que chamamos dessa forma a aplicação é reiniciada e com isso um maior tempo de resposta.

    . Ao invés de somente alterar as URLs da página "navbar.component.html", vamos alterar a tag <a href..> para <a routerLink...>:

        <ul class="navbar-menu" [hidden]="!exibindoMenu">
            <li class="navbar-usuario">Jose da Silva</li>
            <li class="navbar-menuitem"><a routerLink="/lancamentos">Lançamentos</a></li> <!-- URL alterada -->
            <li class="navbar-menuitem"><a routerLink="/pessoas">Pessoas</a></li>         <!-- URL alterada -->
            <li class="navbar-menuitem"><a href="#">Logout</a></li>
        </ul>

    . Importe o RouterModule no componente "core.module.ts", pois o componente acima pertence a ele:

        ...
        @NgModule({
            imports: [
                ...
                RouterModule,
                ...
            ],
            ...
        })

    . Faça o teste no navegador e acompanhe as chamadas na console dele na parte de "Network". Veja que agora virá
        somente os dados necessário para apresentar na tela e não mais o formulário inteiro.

    . Acesse o componente "lancamento-cadastro.component.html" e altere a chamada do link do botão "Voltar":
        ...
        <div class="ui-g-12">
            <button pButton type="submit" label="Salvar" [disabled]="f.invalid"></button>            <!-- Tag alterada -->
            <button pButton type="button" label="Novo" class="ui-button-info"></button>
            <a routerLink="/lancamentos">Voltar para a pesquisa</a>                                  <!-- Tag alterada -->
        </div>
        ...

    . Acesse o componente "lancamentos-pesquisa.component.ts" e proceda com a mesma mudança no botão "Novo Lançamento":

        <div class="ui-g-12">
            <a pButton label="Novo Lançamento" routerLink="/lancamentos/novo"></a>     <!-- Tag alterada -->
        </div>    

    . Importe o RouterModule no componente "lancamentos.module.ts", pois o componente acima pertence a ele:

        ...
        @NgModule({
            imports: [
                ...
                RouterModule,
                ...
            ],
            ...
        })

    . Faça o teste das páginas alteradas no navegador.


Aula 18.4. Estilizando links da rota ativa
------------------------------------------

    . Acesse o componente "navbar.component.css" e inclua a classe abaixo:

        .navbar-menuitem.ativo{
            background-color: #494541;
        }

    . Acesse o componente "navbar.component.html" e inclua "routerLinkActive" como abaixo:

        <ul class="navbar-menu" [hidden]="!exibindoMenu">
            <li class="navbar-usuario">Jose da Silva</li>
            <li class="navbar-menuitem" routerLinkActive="ativo"><a routerLink="/lancamentos">Lançamentos</a></li> <!-- URL alterada -->
            <li class="navbar-menuitem" routerLinkActive="ativo"><a routerLink="/pessoas">Pessoas</a></li>         <!-- URL alterada -->
            <li class="navbar-menuitem"><a href="#">Logout</a></li>
        </ul>

    . Faça os testes no navegador, verifique se o link do menu ficou acionado após a escolha.


Aula 18.5. Recebendo parâmetros da rota
---------------------------------------

    . Para configurar uma URL com código para acessar um item especifico precisamos configurar nas rotas com um 
        parâmetros coringa, exemplo:

        url: http://localhost:8080/lancamentos/12
        rota: lancamentos/:codigo

    . Acesse o componente "app.module.ts" e configure a rota acima:

        ...
        const routes: Routes = [
            { path: "lancamentos", component: LancamentoPesquisaComponent },
            { path: "lancamentos/novo", component: LancamentoCadastroComponent },
            { path: "pessoas", component: PessoaPesquisaComponent},
            { path: "lancamentos/:codigo", component: LancamentoCadastroComponent }
        ]
        ...

    . Acesse o navegador e teste a rota abaixo:

        http://localhost:8080/lancamentos/123

        . Ela não dará, porém chamará sempre o equivalente "http://localhost:8080/lancamentos/novo", que seria
            o configurado para a rota "lancamentos/novo"

    . Acesse o componente "lancamentos-cadastro.component.ts" e implemente o código abaixo:

        import { ActivatedRoute } from "@angular/router";           // Incluido
        ...
        export class LancamentoCadastroComponent implements OnInit {
            ...

            constructor( @Inject( CategoriaService) private categoriaService,
                            @Inject(PessoaService) private pessoaService,
                            @Inject(LancamentoService) private lancamentoService,
                            @Inject(ToastyService) private toasty,
                            @Inject( ErrorHandlerService) private errorHandler,
                            @Inject( ActivatedRoute ) private route ) { }       // Incluido
            ...
            ngOnInit() {
                console.log( this.route.snapshot.parms );          // Incluido

                this.carregarCategorias();
                this.carregarPessoas();
            }
            ...
        }

    . Execute o projeto e verifique o resultado na console log do navegador.

    . Altere o valor do console.log para o abaixo, faça o teste e veja o resultado:

        console.log( this.route.snapshot.parms["codigo"] );          // Incluido

    . Acesse o componente "lancamentos-pesquisa.component.html" e proceda o código no botão de edição:

        <p-column styleClass="col-acoes">
            <ng-template pTemplate="body"
                        let-lanc="rowData">
            <a pButton icon="fa-pencil" 
                        pTooltip="Editar" 
                        tooltipPosition="top"
                        [routerLink]="['/lacamentos', lanc.codigo ]"></a>   <!-- Incluido -->
            <a pButton icon="fa-trash"  
                        pTooltip="Eliminar" 
                        tooltipPosition="top"
                        (click)="confirmarExclusao(lanc)"></a>
            </ng-template>
        </p-column>

    . Execute o projeto, clique no botão de edição e verifique o resultado na console log do navegador.


Aula 18.6. Desafio: implementando os serviços de atualização e busca por código
-------------------------------------------------------------------------------

    . Acesse o componente "lancamento.service.ts" e implemente o código abaixo:

        atualizar(lancamento: Lancamento): Promise<Lancamento> {
            const headers = new Headers();
            headers.append('Authorization', 'Basic YWRtaW5AYWxnYW1vbmV5LmNvbTphZG1pbg==');
            headers.append('Content-Type', 'application/json');

            return this.http.put(`${this.lancamentosUrl}/${lancamento.codigo}`,
                JSON.stringify(lancamento), { headers })
            .toPromise()
            .then(response => {
                const lancamentoAlterado = response.json() as Lancamento;

                this.converterStringsParaDatas([lancamentoAlterado]);

                return lancamentoAlterado;
            });
        }

        buscarPorCodigo(codigo: number): Promise<Lancamento> {
            const headers = new Headers();
            headers.append('Authorization', 'Basic YWRtaW5AYWxnYW1vbmV5LmNvbTphZG1pbg==');

            return this.http.get(`${this.lancamentosUrl}/${codigo}`, { headers })
            .toPromise()
            .then(response => {
                const lancamento = response.json() as Lancamento;

                this.converterStringsParaDatas([lancamento]);

                return lancamento;
            });
        }

        private converterStringsParaDatas(lancamentos: Lancamento[]) {
            for (const lancamento of lancamentos) {
            lancamento.dataVencimento = moment(lancamento.dataVencimento,
                'YYYY-MM-DD').toDate();

            if (lancamento.dataPagamento) {
                lancamento.dataPagamento = moment(lancamento.dataPagamento,
                'YYYY-MM-DD').toDate();
            }
            }
        }




Aula 18.7. Preenchendo os campos na edição de lançamentos
---------------------------------------------------------

    . Acesse o compoente "lancamento-cadastro.component.ts" e implemente o código abaixo:

        ...
        ngOnInit() {
            // console.log( this.route.snapshot.params['codigo'] );     // linha eliminada

            const codigoLancamento = this.route.snapshot.params['codigo']   // Linha incluida

            if ( codigoLancamento ){                                    // if incluido
                this.carregarLancamento( codigoLancamento );
            }

            this.carregarCategorias();
            this.carregarPessoas();
        }

        carregarLancamento( codigo: number ){                           // Método incluido
            this.lancamentoService.buscarPorCodigo( codigo )
                                    .then( lancamento => this.lancamento = lancamento )
                                    .catch( erro => this.errorHandler.handle( erro ) );
        }

    . Acesse o componente "lancamento-cadastro.component.html" e altere conforme código abaixo:
        ...
        <div class="ui-g">
            <div class="ui-g-12">
                <!-- <h1>Novo Lançamento</h1>           Alterado --> 
                <h1>{{ editando ? 'Edição de ': 'Novo' }} Lançamento </h1>
             </div>
        ...

    . Acesse o componente "lancamento-cadastro.component.ts" e insira o código abaixo:

        ...
        get editando(){
            return Boolean( this.lancamento.codigo );
        }
        ...

    . Levante o projeto faça a edição e a inclusão verificando se as informações são preenchidas, ou não,
        conforme a ação solicitada.


Aula 18.8. Salvando lançamentos editados
----------------------------------------

    . Acesse o componente "lancamento-cadastro.component.ts" e altere o nome do método "salvar" por "adicionarLancamento".

    . No componente "lancamento-cadastro.component.ts" acrescente os métodos abaixo:

        ...
        salvar( form: FormControl ){
            if ( this.editando ){
                this.atualizarLancamento( form );
            }else {
                this.adicionarLancamento( form );
            }
        }

        atualizarLancamento( form: FormControl ){
            this.lancamentoService.atualizar( this.lancamento )
                                .then( lancamento => {
                                    this.lancamento = lancamento;

                                    this.toasty.success( "Lancamento alterado com sucesso!!!" );
                                })
                                .catch( erro => this.errorHandler.handle( erro ) );
        }
        ...

    . Levante o projeto e faça as operações de inclusão e alteração.

Aula 18.9. Implementando navegação imperativa
---------------------------------------------

    . Acesse o componente "lcnamento-cadastro.component.ts" e implemente o código abaixo:

        import { ActivatedRoute, Router }                          // Linha alterada
        ...
        constructor( @Inject( CategoriaService) private categoriaService,
            @Inject(PessoaService) private pessoaService,
            @Inject( ErrorHandlerService) private errorHandler,
            @Inject( ToastyService ) private toasty,
            @Inject( LancamentoService ) private lancamentoService,
            @Inject( ActivatedRoute ) private route
            @Inject(  Router ) private router ) { }     // Linha incluida

        ...
        adicionarLancamento( form: FormControl){
            this.lancamentoService.adicionar( this.lancamento )
                                .then( () => { 
                                                this.toasty.success( "Lançamento adicionado com sucesso!!!"); 

                                                // form.reset();                        // Linha excluida

                                                /// this.lancamento = new Lancamento(); // Linha excluida

                                                this.router.navigate(["/lancamentos"]); // Linha incluida
                                            })
                                .catch( erro => this.errorHandler.handle( erro ));
        }
    
    . Levante o projeto, faça uma operação de inclusão de lançamentos e verifique se ao final se o fluxo do 
        sistema foi direcionado para a tela de pesquisa.

    . Na tela de pesquisa consulte o lançamento incluído se aparece na pesquisa

    . Altere o código do método "adicionarLancamento" como abaixo:

            this.lancamentoService.adicionar( this.lancamento )
                                .then( lancamentoAdicionado => {                                  // Linha alterada
                                                this.toasty.success( "Lançamento adicionado com sucesso!!!"); 

                                                // form.reset();                        

                                                /// this.lancamento = new Lancamento(); 

                                                this.router.navigate(["/lancamentos", lancamentoAdicionado.codigo]); // Linha alterada
                                            })
                                .catch( erro => this.errorHandler.handle( erro ));

    . Faça uma operação de inclusão de lançamentos e verifique se ao final se o fluxo do 
        sistema foi direcionado para a tela de alteração de lançamento.

    . Na tela de pesquisa consulte o lançamento incluído se aparece na pesquisa

    . Acesse o componente "lancamento-cadastro.component.html" e faça as alterações abaixo:


        <!-- <button pButton type="button" label="Novo" class="ui-button-info"></button> -->
        <button pButton 
                type="button" 
                label="Novo" 
                class="ui-button-info"
                (click)="novo(f)></button>

    . Retorne ao componente "lancamento-cadastro.component.ts" e implemente o código abaixo:

        ...
        novo( form: FormControl ){
            form.reset();                        

            setTimeout( function(){
                this.lancamento = new Lancamento(); 
            }.bind(this),1);

            this.route.navigate(["/lancamentos"]);
        }
        ...

        . A função "setTimeout" está sendo utilizada para forçar a geração do "new Lancamento()" com as propriedades padrões
            preenchidas. Devido a algum problema no Angular 4, o tipo do lançamento não está ficando com o seu valor padrão
            "RECEITA" quando é criado um novo objeto "Lancamento", por isso será necessário dar um intervalo de tempo de 
            1 milisegundo.

        . O .bind(this) informa a função para utilizar/referenciar o mesmo "this" do componente "lancamento-cadastro.component.ts".

        . Faça um teste, ao invés de usar a função "setTimeout", force a atribuição do valor na propriedade "tipo" manualmente.

            this.lancamento.tipo = "RECEITA";

    . Faça uma operação de inclusão de lançamentos, através do botão "NOvo" da tela "lancamento-cadastro.component.html", ou seja,
        inicie uma edição, ou inclusão, e no meio da operação acione o botão "Novo" para ver se o fluxo será desviado para a 
        inclusão.


Aula 18.10. Fazendo redirecionamento
------------------------------------

    . Para resolver o redirecionamento para uma página especifica quando acessamos o endereço "http://localhost:4200" sem um path 
        especifico.

    . Acesse o componente "app.module.ts" e insira a linha abaixo na coleção de rotas:

        ...
        const routes: Routes = [
            { path: "", redirectTo: "lancamentos", pathMatch: "full"},              // Linha inserida
            { path: "lancamentos", component: LancamentosPesquisaComponent },
            { path: "lancamentos/novo", component: LancamentoCadastroComponent },
            { path: "pessoas", component: PessoaPesquisaComponent}
        ]
        ...

    . Levante o projeto, acesse o endereço abaixo e verifique se o fluxo foi desviado para a tela de pesquisa de lançamentos.


Aula 18.11. Tratando rota não encontrada
----------------------------------------

    . Acesse a raiz do projeto no prompt do sistema operacional e execute o comando abaixo:

        ng g c core/pagina-nao-encontrada --inline-style --inline-template --flat --spec=false

    . Acesse o componente "app.module.ts" e implemente as linhas abaixo:

        ...
        import { PaginaNaoEncontrada } from './core/pagina-nao-encontrada.component';
        ...
        const routes: Routes = [
            { path: "", redirectTo: "lancamentos", pathMatch: "full"},              
            { path: "lancamentos", component: LancamentosPesquisaComponent },
            { path: "lancamentos/novo", component: LancamentoCadastroComponent },
            { path: "pessoas", component: PessoaPesquisaComponent},
            { path: "pagina-nao-encontrada", component: PaginaNaoEncontradaComponent }  // Linha inserida
            { path: "**", redirectTo: "pagina-nao-encontrada" }                         // Linha inserida
        ]
        ...

        . Qualquer página não encontrada, devido a algum path errado na URL, cairá no item "path: '**'".


    . Acesse o componente "core/pagina-nao-encontrada.component.ts" e insira o código abaixo:

        ...
        @Component({
            ...
            template: `
                        <div class="container">
                            <h1 class="text-center">Página não encontrada</h1>
                        </div>
                      `,
            ...
        })

    . No navegador acesse páginas válidas e inválidas para verificar o resultado.

    . Acesse os componentes "lancamentos.module.ts" e "pessoas.module.ts" e retire os exports existente.
        Como agora estamos trabalhando com rotas não existe a necessidade de exportar os componentes mais.
        Ao substituir as tags especificas "<app-pessoa-pesquisa>", ou "<app-lancamento-pesquisa>" pela tag "<router-outlet></router-outlet>"
        deixou de ser necessário o export.
        Porém continua sendo necessário a declaração "declaration" destes componentes.

    . No navegador acesse páginas válidas e inválidas para verificar o resultado.


Aula 18.12. Definindo o título da página dinamicamente
------------------------------------------------------

    . Acesse o componente "lancamento-pesquisa.component.ts" e insira o código abaixo:

        ...
        import { Title } from '@angular/pataform-browser';      // Linha inserida
        ...
        constructor( ...
            @Inject( Title ) private title      // Linha inserida
        ){}
        ...

        ngOnINit(){
            this.title.setTitle("Pesquisa de lançamentos");         // Linha inserida
        }

    . Acesse o componente "core.module.ts" e insira o código abaixo:

        ...
        import { Title } from '@angular/pataform-browser';      // Linha inserida
        ...
        @ngModule({
            ...
            providers: [
                ...
                Title,                  // Linha inserida
                ...
            ]
        })
        ...

    . Faça o mesmo procedimento para as demais telas de cadastro e pesquisa.

    . Levante o projeto e verifique no formulário de pesquisa se o titulo ficou "Pesquisa de lançamentos".

    . Acesse o componente "lancamentos-cadastro.component.ts" e implemente o código abaixo:

        ...
        atualizarTituloEdicao(){                                                        // Método inserido
            this.title.setTitle( `Edição de lançamento: ${this.lancamento.descricao}`);
        }
        ...
        carregarLancamento( codigo: number ){                                       // Método alterado
            this.lancamentoService.buscarPorCodigo( codigo )
                                    .then( lancamento => {
                                            this.lancamento = lancamento;
                                            this.atualizarTituloEdicao();

                                    })
                                    .catch( erro => this.errorHandler( erro ) );
        }
        ...
        atualizarLancamento( form: FormControl ){
            this.lancamentoService.atualizar( this.lancamento )
                                .then( lancamento => {
                                    this.lancamento = lancamento;

                                    this.toasty.success( "Lancamento alterado com sucesso!!!" );

                                    this.atualizarTituloEdicao();                           // Linha inserida
                                })
                                .catch( erro => this.errorHandler.handle( erro ) );
        }

    . Levante o projeto e faça os testes para validar o titulo dos formulários.


Aula 18.13. Refatorando as rotas para usar Routing Module
---------------------------------------------------------

    . Clique com o botão direito sobre o nó do projeto "app" e escolha a inclusão de novo arquivo.

    . Dê o nome do arquivo novo de "app-routing.module.ts".

    . No arquivo de módulo das rotas coloque o conteúdo abaixo nele:

        import { NgModule } from '@angular/core';
        import { Routes, RouterModule } from '@angular/router';

        import { PaginaNaoEncontradaComponent } from './core/pagina-nao-encontrada.component';
        import { PessoasPesquisaComponent } from './pessoas/pessoas-pesquisa/pessoas-pesquisa.component';
        import { LancamentoCadastroComponent } from './lancamentos/lancamento-cadastro/lancamento-cadastro.component';
        import { LancamentosPesquisaComponent } from './lancamentos/lancamentos-pesquisa/lancamentos-pesquisa.component';

        const routes: Routes = [
            { path: '', redirectTo: 'lancamentos', pathMatch: 'full' },
            { path: 'lancamentos', component: LancamentosPesquisaComponent },
            { path: 'lancamentos/novo', component: LancamentoCadastroComponent },
            { path: 'lancamentos/:codigo', component: LancamentoCadastroComponent },
            { path: 'pessoas', component: PessoasPesquisaComponent },
            { path: 'pagina-nao-encontrada', component: PaginaNaoEncontradaComponent },
            { path: '**', redirectTo: 'pagina-nao-encontrada' }
        ];

        @NgModule({
            imports: [
                RouterModule.forRoot(routes)
            ],
            exports: [RouterModule]
        })
        export class AppRoutingModule { }

    . Deixe o "app.module.ts" como abaixo:

        import { HttpModule } from '@angular/http';
        import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';

        import { AppComponent } from './app.component';
        import { CoreModule } from './core/core.module';
        import { PessoasModule } from './pessoas/pessoas.module';
        import { LancamentosModule } from './lancamentos/lancamentos.module';
        import { AppRoutingModule } from './app-routing.module';


/*                                                                  // Bloco de código eliminado
        const routes: Routes = [
            { path: '', redirectTo: 'lancamentos', pathMatch: 'full' },
            { path: 'lancamentos', component: LancamentosPesquisaComponent },
            { path: 'lancamentos/novo', component: LancamentoCadastroComponent },
            { path: 'lancamentos/:codigo', component: LancamentoCadastroComponent },
            { path: 'pessoas', component: PessoasPesquisaComponent },
            { path: 'pagina-nao-encontrada', component: PaginaNaoEncontradaComponent },
            { path: '**', redirectTo: 'pagina-nao-encontrada' }
        ];
*/

        @NgModule({
            declarations: [
                AppComponent
            ],
            imports: [
                BrowserModule,
                BrowserAnimationsModule,
                HttpModule,
                // RouterModule.forRoot(routes),        // Linha excluida
                CoreModule,
                LancamentosModule,
                PessoasModule,
                AppRoutingModule                        // Linha inserida
            ],
            providers: [],
            bootstrap: [AppComponent]
        })
        export class AppModule { }

    . Levante o projeto e verifique se a navegação continua funcionando.


Aula 18.14. Criando um Routing Module para o módulo de funcionalidade
---------------------------------------------------------------------

    . Clique com o botão direito sobre o nó do projeto "app/lancamentos" e escolha a inclusão de novo arquivo.

    . Dê o nome do arquivo novo de "lancamentos-routing.module.ts".

    . No arquivo de módulo das rotas coloque o conteúdo abaixo nele:

        import { Routes, RouterModule } from '@angular/router';
        import { NgModule } from '@angular/core';

        import { LancamentoCadastroComponent } from './lancamento-cadastro/lancamento-cadastro.component';
        import { LancamentosPesquisaComponent } from './lancamentos-pesquisa/lancamentos-pesquisa.component';

        const routes: Routes = [
            { path: 'lancamentos', component: LancamentosPesquisaComponent },
            { path: 'lancamentos/novo', component: LancamentoCadastroComponent },
            { path: 'lancamentos/:codigo', component: LancamentoCadastroComponent }
        ];

        @NgModule({
            imports: [
                RouterModule.forChild(routes)
            ],
            exports: [RouterModule]
        })
        export class LancamentosRoutingModule { }

        . Nos imports é chamado "RouterModule.forChild(routes)" ao invés "RouterModule.forRoot(routes)".
            Sempre que formos criar módulos de rotas dentro de um sub-módulo será chamado o método ".forChild";
            quando for do módulo principal "app" é chamado o método ".forRoot".

    . Acesse o componente "lancamentos.module.ts" e deixe como abaixo:

        import { RouterModule } from '@angular/router';
        import { FormsModule } from '@angular/forms';
        import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';

        import { CurrencyMaskModule } from 'ng2-currency-mask';
        import { DropdownModule } from 'primeng/components/dropdown/dropdown';
        import { SelectButtonModule } from 'primeng/components/selectbutton/selectbutton';
        import { CalendarModule } from 'primeng/components/calendar/calendar';
        import { InputTextareaModule } from 'primeng/components/inputtextarea/inputtextarea';
        import { TooltipModule } from 'primeng/components/tooltip/tooltip';
        import { DataTableModule } from 'primeng/components/datatable/datatable';
        import { ButtonModule } from 'primeng/components/button/button';
        import { InputTextModule } from 'primeng/components/inputtext/inputtext';

        import { LancamentosRoutingModule } from './lancamentos-routing.module';                                // Linha inserida
        import { SharedModule } from './../shared/shared.module';
        import { LancamentosPesquisaComponent } from './lancamentos-pesquisa/lancamentos-pesquisa.component';
        import { LancamentoCadastroComponent } from './lancamento-cadastro/lancamento-cadastro.component';

        @NgModule({
            imports: [
                CommonModule,
                FormsModule,
                // RouterModule,                // Linha eliminada
                InputTextModule,
                ButtonModule,
                DataTableModule,
                TooltipModule,
                InputTextareaModule,
                CalendarModule,
                SelectButtonModule,
                DropdownModule,
                CurrencyMaskModule,

                SharedModule,
                LancamentosRoutingModule        // Linha inserida
            ],
            declarations: [
                LancamentoCadastroComponent,
                LancamentosPesquisaComponent
            ],
            exports: []
        })
        export class LancamentosModule { }

    . Acesse o componente "app-roting.module.ts" e elimine as rotas referentes a lançamentos:

        import { NgModule } from '@angular/core';
        import { Routes, RouterModule } from '@angular/router';

        import { PaginaNaoEncontradaComponent } from './core/pagina-nao-encontrada.component';
        import { PessoasPesquisaComponent } from './pessoas/pessoas-pesquisa/pessoas-pesquisa.component';
        import { LancamentoCadastroComponent } from './lancamentos/lancamento-cadastro/lancamento-cadastro.component';
        import { LancamentosPesquisaComponent } from './lancamentos/lancamentos-pesquisa/lancamentos-pesquisa.component';

        const routes: Routes = [
            { path: '', redirectTo: 'lancamentos', pathMatch: 'full' },
/*                                                                                  // Trecho eliminado            
            { path: 'lancamentos', component: LancamentosPesquisaComponent },
            { path: 'lancamentos/novo', component: LancamentoCadastroComponent },
            { path: 'lancamentos/:codigo', component: LancamentoCadastroComponent },
*/            
            { path: 'pessoas', component: PessoasPesquisaComponent },
            { path: 'pagina-nao-encontrada', component: PaginaNaoEncontradaComponent },
            { path: '**', redirectTo: 'pagina-nao-encontrada' }
        ];

        @NgModule({
            imports: [
                RouterModule.forRoot(routes)
            ],
            exports: [RouterModule]
        })
        export class AppRoutingModule { }

    . Levante o projeto e verifique se a navegação continua funcionando.

Aula 18.15. Desafio: roteamento e edição de pessoas
---------------------------------------------------




Aula 19.2. Revisando a segurança da API com OAuth 2 e JWT
---------------------------------------------------------

    . Para levantar o projeto com autenticação "oauth" execute o comando abaixo no prompt do sistema operacional:

        java -jar algamoney-api-1.0.0-SNAPSHOT.jar --algamoney.origin-permitida=http://localhost:4200  --spring.profiles.active=oauth-security

    . Acesse o Postman, configure e execute a pesquisa do token como abaixo:

        method: "POST",
        url: "http://localhost:8080/oauth/token",
        Headers: {
            Content-Type: "application/x-www-form-urlencoded"
            Authorization: "Basic YW5ndWxhcjpAbmd1bEByMA=="
        },
        Body: {
            client: "angular",
            username: "admin@algamoney.com",
            password, "admin",
            grant_typ: "password"
        }

        . Para configurar a senha do "Authorization" do "Header" siga os passos abaixo:

            Authorization: "Basic  YW5ndWxhcjpAbmd1bEByMA=="

            . Para conseguir a chave do Authorization, acesse o site https://www.base64encode.org/

            . No campo "Encode to Base64 format" digite "angular:@ngul@r0" e mande codificar. O valor
                que surgir é o que comporá a expressão do "Authorization".

        . Caso não queira usar o "Authorization" do "Header" acima e optar pelo "Authorization" use os parâmetros abaixo,
            assim podemos suprimir o "Authorization" do "Header" deixando como abaixo:

            Authorization: { 
                username: "angular",
                passqword: "@ngul@r0"
            }

        . Importante: Ao acessar a área de "Cookies" encontraremos o "refreshToken".

    . Execute a pesquisa de pessoas como abaixo:

        method: "GET",
        url: "http://localhost:8080/pessoas"
        Headers: {
            Authorization: "Bearer " + [Token]
        }


Aula 19.3. Desafio: módulo de segurança e protótipo da tela de login
--------------------------------------------------------------------

    . Acesse a raiz do projeto e execute os comandos abaixo:

        ng g m seguranca

        ng g c seguranca/login-form --module=seguranca --spec=false

    . Acesse o componente "login-form.component.html" e implemente o código abaixo:

        <div class="container">
            <div class="ui-g" style="padding: 200px;">
                <div class="ui-g-4">
                </div>
                <div class="ui-g-4">
                    <p-panel>
                        <p-header>
                            <div class="ui-helper-clearfix">
                                <span class="ui-panel-title" style="font-size:16px;display:inline-block;margin-top:2px">Login</span>
                            </div>
                        </p-header>
                        <div class="ui-g">
                            <div class="ui-g-12 ui-fluid">
                                <label for="username">Usuário</label>
                                <input type="text" 
                                        pInputText 
                                        id="usuario" 
                                        name="usuario" 
                                        autocomplete="off"
                                        #usuario/>

                                <label for="password">Usuário</label>
                                <input type="password" 
                                        pPassword
                                        id="senha"
                                        name="senha"
                                        promptLabel="Entre com a sua senha"
                                        feedback=false
                                        #senha/>
                            </div>
                        </div>
                        <p-footer>
                            <button pButton type="button" label="Login" class="ui-button-info" (click)="login(usuario.value, senha.value) "></button>
                            <button pButton type="button" icon="fa-plus" label="Registrar" class="ui-button-info"></button>
                        </p-footer>
                    </p-panel>	
                </div>
            </div>
        </div>

    . Acesse o componente "login-form.component.ts" e implemente o código abaixo:

        import { Component, OnInit } from '@angular/core';

        @Component({
            selector: 'app-login-form',
            templateUrl: './login-form.component.html',
            styleUrls: ['./login-form.component.css']
        })
        export class LoginFormComponent implements OnInit {

            constructor() { }

            ngOnInit() {
            }

            login( usuario: string, senha: string){
                console.log(usuario);
                console.log(senha);
            }
        }

    . Acesse o componente "seguranca.module.ts" e implemente o código abaixo:

        import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { LoginFormComponent } from './login-form/login-form.component';
        import { ButtonModule, InputTextModule, PanelModule, PasswordModule } from 'primeng/primeng';

        @NgModule({
            imports: [
                CommonModule,
                PanelModule,
                InputTextModule,
                PasswordModule,
                ButtonModule
            ],
            declarations: [LoginFormComponent],
            exports: [LoginFormComponent]
        })
        export class SegurancaModule { }

    . Acesse o componente "app.module.ts" e inclua o module "SegurancaModule" nos imports:

        imports...

        @NgModule({
            ...
            imports: [
                ...
                SegurancaModule
            ],
            ...
        })
        export class AppModule { }

    . Acesse o arquivo "app-routing.module.ts" e acrescente a rota do login como abaixo:

        const routes: Routes = [
            ...
            { path: '', redirectTo: 'login', pathMatch: 'full' },
            { path: 'login', component: LoginFormComponent },
        ];

    . Levante o projeto e verifique se o formulário de login está apresentando o usuário e a senha no 
        console.log.


Aula 19.4. Implementando o serviço de autenticação com OAuth 2
--------------------------------------------------------------

    . Acesse a pasta raiz do projeto e execute o comando abaixo:

        ng g s seguranca/auth --spec=false

    . Acesse o componente "core/core.module.ts" e declare o componente "AuthService" nos "providers":

        ...
        providers: [
            ...
            AuthService
        ]

    . Acesse o componente "AuthService" e implemente o código abaixo:

        import { Http, Headers } from '@angular/http';
        import { Injectable } from '@angular/core';

        import 'rxjs/add/operator/toPromise';

        @Injectable()
        export class AuthService {

            oauthTokenUrl = 'http://localhost:8080/oauth/token';

            constructor(private http: Http) { }

            login(usuario: string, senha: string): Promise<void> {
                const headers = new Headers();
                headers.append('Content-Type', 'application/x-www-form-urlencoded');
                headers.append('Authorization', 'Basic YW5ndWxhcjpAbmd1bEByMA==');

                const body = `username=${usuario}&password=${senha}&grant_type=password`;

                return this.http.post(this.oauthTokenUrl, body, { headers })
                    .toPromise()
                    .then(response => {
                        console.log(response);
                    })
                    .catch(response => {
                        console.log(response);
                    });
            }

        }    

    . Acesse a classe "login-form.component.ts", altere o construtor e o método login:

        ...
        constructor( @Inject( AuthService ) private auth){}

        login( usuario: string, senha: string){
            this.auth.login( usuario, senha );
        }
        ...

    . Levante o projeto, faça o login com os dados abaixo e verifique a console do navegador.

        usuario:    "admin@algamoney.com"
        password:   "admin"

        . Verifique se o token está vindo com sucesso.

        . Faça outro teste colocando a senha incorreta e verifique o resultado.


Aula 19.5. Decodificando o JWT e armazenando no Local Storage
-------------------------------------------------------------


    . Utilizaremos a biblioteca "angular2-jwt", para mais detalhes sobre essa biblioteca acesse a URL abaixo:

        https://github.com/auth0/angular2-jwt#using-jwthelper-in-components

    . Acesse a raiz do projeto e execute o comando abaixo:

        npm install angular2-jwt --save

    . Acesse o componente "core.module.ts" e declare o componente "JwtHelper" no provider:

        ...
        providers: [
            ...
            JwtHelper
        ]

    . Acesse o componente "auth.service.ts", injete o componente "JwtHelper", crie o "jwtPayload":

        jwtPayload: any;                                            // Linha inserida

        constructor( @Inject(Http) private http,
                        @Inject(JwtHelper) private jwtHelper){     // Linha incluida

                        this.carregarToken();                        // Linha inserida

                        }
        ...

        login(usuario: string, senha: string): Promise<void> {
            const headers = new Headers();
            headers.append('Content-Type', 'application/x-www-form-urlencoded');
            headers.append('Authorization', 'Basic YW5ndWxhcjpAbmd1bEByMA==');

            const body = `username=${usuario}&password=${senha}&grant_type=password`;

            return this.http.post(this.oauthTokenUrl, body, { headers })
                .toPromise()
                .then(response => {
                    console.log(response);
                    this.armazenarToken( response.json().access_token );    // Linha inserida
                })
                .catch(response => {
                    console.log(response);
                });
        }
        ...

        private armazenarToken( token: string ){                            // Método inserido
            this.jwtPayload = this.jwtHelper.decodeToken( token );
            localStorage.setItem('token', token );
        }

        private carregarToken(){                                             // Método inserido
            const token = localStorage.getItem('token');

            if (token){
                this.armazenarToken( token );
            }
        }

        . O "localStorage" funciona semelhantemente a uma "session". No caso de um refresh da tela pelo usuário, os dados
            não serão perdidos.

    . Acesse o componente "login-form.component.html" e insira o código abaixo:

        <div class="container"
                style="max-width: 400px; margin= auto;">
            
            {{ auth.jwtPayload | json }}                        <!-- Linha inserida -->

            <form ...>
                ...
            </form>
        </div>
    
    . Levante o projeto, faça o login corretamente e verifique se o "Payload" apareceu corretamente na tela.

    . Faça refresh da tela e verifique se o Payload aparece com sucesso, independente da nossa autenticação.


Aula 19.6. Tratando casos de erros e sucesso de autenticação
------------------------------------------------------------

    . Acesse o componente "auth.service.ts" e implemente as alterações abaixo:

        ...

        login(usuario: string, senha: string): Promise<void> {
            const headers = new Headers();
            headers.append('Content-Type', 'application/x-www-form-urlencoded');
            headers.append('Authorization', 'Basic YW5ndWxhcjpAbmd1bEByMA==');

            const body = `username=${usuario}&password=${senha}&grant_type=password`;

            return this.http.post(this.oauthTokenUrl, body, { headers })
                .toPromise()
                .then(response => {
//                    console.log(response);                                    // Linha eliminada
                    this.armazenarToken( response.json().access_token );    
                })
                .catch(response => {
//                    console.log(response);                                    // Linha eliminada

                    if (response.status === 400 ){                              // IF incluido
                        const responseJson = response.json();  

                        if (responseJson.error === "invalid_grant"){
                            return Promise.reject("Usuário ou senha inválida!!!");
                        }

                        return Promise.reject( response );
                    }
                });
        }
        ...

    . Acesse o componente "login-form.component.ts" e implemente as linhas de código abaixo:

        ...
        export class LoginFormComponent implements OnInit {

            constructor( @Inject( AuthService ) private auth,
                            @Inject( ErrorHandlerService ) private errorHandler,
                            @Inject( Router ) private router ){}


            ngOnInit() {
            }

            login( usuario: string, senha: string){
                this.auth.login( usuario, senha )
                    .then( () => {
                        this.router.navigate(["/lancamentos"]);
                    })
                    .catch( erro => {
                        this.errorHandler.handle(error);
                    });
            }
        }

    . Acesse o componente "login-form.component.html" e proceda a alteração abaixo:

        ...
        <div class="ui-g-12">
            <button pButton
                    type="submit"
                    label="Login"
                    [disable]="!f.valid"
                    (click)="login( usuario.value, senha.value); senha.value='';"></button>     <!-- Linha alterada -->
        </div>    
        ...

    . Levante o projeto, faça login digitando uma senha válida e outra inválida.


Aula 19.7. Adicionando o Access Token nas chamadas HTTP
-------------------------------------------------------

    . Acesse o componente "seguranca.module.ts" e implemente o provider:

        import { AuthHttp, AuthConfig } from 'angular2-jwt';
        import { Http, RequestOptions } from '@angular/http';
        ...
        export function authHttpServiceFactory( http: Http, options: RequestOptions ){
            return new AuthHttp( new AuthConfig(), http, options );
        }

        @NgModule({
            ...
            providers: [
                {
                    provide: AuthHttp,
                    useFactory: authHttpServiceFactory,
                    deps: [Http, RequestOptions]
                }
            ]
        })

    . Acesse a classe "lancamento.service.ts", altere a assinatura do construtor, onde era injetado "Http", agora
        será "AuthHttp"

        impot { AuthHttp } from 'angular2-jwt';                 // Linha inserida
        import { Headers } from '@angular/http';                // Linha alterada (eliminado o Http )

        ...
        constructor( // private http: Http,                     // Linha eliminada
                        private http: AuthHttp,                 // Linha inserida
                        private httpClient: HttpClient) { }

        ...
        pesquisar( filtro: LancamentoFiltro ): Promise<any>{

//            const headers: Headers = new Headers();                                           // Linha eliminada

            const params = new URLSearchParams();

//            headers.append("Authorization","Basic YWRtaW5AYWxnYW1vbmV5LmNvbTphZG1pbg==");     // Linha eliminada

            params.set("page", filtro.pagina.toString() );
            params.set("size", filtro.itensPorPagina.toString());

            if ( filtro.descricao ){
                params.set("descricao", filtro.descricao );
            }

            if ( filtro.dataVencimentoInicio ){
                params.set("dataVencimentoDe", moment(filtro.dataVencimentoInicio).format("YYYY-MM-DD") );
            }

            if ( filtro.dataVencimentoFim ){
                params.set("dataVencimentoAte", moment(filtro.dataVencimentoFim).format("YYYY-MM-DD") );
            }


            return this.http.get(`${this.lancamentoUrl}?resumo`, { search: params  })        // Linha alterada ( Não será mais passado o Headers )
                    .toPromise()
                    .then( response => {
                                    const responseJson = response.json();
                                    const lancamentos = responseJson.content;

                                    const resultado = {
                                        lancamentos,
                                        total: responseJson.totalElements
                                    };

                                    return resultado;
                            });
        }
        ...

        . A linha do "Authorization" é eliminada porque agora a inserção do "Authorization" será implicita,
            sem a necessidade de incluir manualmente, pois a biblioteca "angular2-jwt" faz isso pra nós agora.

        . O headers também deixará de ser necessário devido ao envio implicito do "Token" no "Authorization"

    . Levante o projeto e verifique se o formulário de lançamentos, na tela de pesquisa está funcionando.

    . Acesse a console do navegador na parte "Network", acesse a chamada a API de "lancamentos?resumo&..." no "Headers" e 
        verifique na "Request Headers" o "Authoritation" com o Token.

    . O Token inserido automaticamente na chamada veio da configuração feita na classe "auth.service.ts", nela fizemos o armazenamento 
        do token no localStore.getItem("token"). Por padrão o "AuthHtpp" lê o "token" guardado na "localStorage" e inseri implicitamente
        nas chamadas http.

        ...
        private armazenarToken( token: string ){                            // Método inserido
            this.jwtPayload = this.hwtHelper.decodeToken( token );
            localStorage.setItem('token', token );
        }
        ...

    . Na mesma classe de "lancamento.service.ts" elimine todas os "Headers" e "Authorization".

    . Acesse a classe "seguranca.module.ts" e implemente o código abaixo:

        import { AuthHttp, AuthConfig } from 'angular2-jwt';
        ...
        export function authHttpServiceFactory( http: Http, options: RequestOptions ){
            const config = new AuthConfig({                                                     // Linha inserida
                globalHeaders: [{ 'Content-Type': 'application/json' }]
            });                                                

//            return new AuthHttp( new AuthConfig(), http, options );                       
            return new AuthHttp( config, http, options );                         // Linha alterada ()
        }

    . Levante o projeto e verifique se a inclusão, alteração e exclusão estão funcionando corretamente.


Aula 19.8. Exibindo o nome do usuário logado
--------------------------------------------

    . Acesse o componente "navbar.component.ts" e faça a injeção abaixo:

        ...
        constructor( @Inject( AuthService ) auth){}
        ...

    . Acesse o componente "navbar.component.html" e acrescente o código abaixo:

        ...
        <ul class="navbar-menu" [hidden]="!exibindoMenu">
            <li class="navbar-usuario">{{ auth.jwtPayload?.nome }}</li>                                             <!-- Linha Alterada -->
            <li class="navbar-menuitem" routerLinkActive="ativo"><a routerLink="/lancamentos">Lançamentos</a></li>
            <li class="navbar-menuitem"  routerLinkActive="ativo"><a routerLink="/pessoas">Pessoas</a></li>
            <li class="navbar-menuitem"><a href="#">Logout</a></li>
        </ul>


    . Levante a aplicação e verifique se o nome do usuário está saindo no topo do menu.

Aula 19.9. Exibindo o menu do sistema conforme permissões do usuário
--------------------------------------------------------------------

    . Acesse o componente "auth.service.ts" e insira o código abaixo:

        ...
        temPermissao( permissao: string )    {
            return this.jwtPayload && this.jwtPayload.authorities.includes( permissao );

        }

    . Acesse o componente "navbar.component.html" e faça alteração abaixo:

        ...
        <ul class="navbar-menu" [hidden]="!exibindoMenu">
            <li class="navbar-usuario">{{ auth.jwtPayload?.nome }}</li>                                             
            <li class="navbar-menuitem" 
                routerLinkActive="ativo"
                *ngIf="auth.temPermissao('ROLE_PESQUISAR_LANCAMENTO')"><a routerLink="/lancamentos">Lançamentos</a></li>    <!-- Linha Alterada -->
            <li class="navbar-menuitem"  
                routerLinkActive="ativo"
                *ngIf="auth.temPermissao('ROLE_PESQUISAR_PESSOA')"><a routerLink="/pessoas">Pessoas</a></li>                <!-- Linha Alterada -->
            <li class="navbar-menuitem"><a href="#">Logout</a></li>
        </ul>

    . Levante a aplicação e verifique se está apresentando somente as opções disponíveis ao usuário.


Aula 19.10. Obtendo um novo access token
----------------------------------------

    . Acesse o projeto java, altere o tempo de expiração do token para 5 segundos.

    . Acesse o componente "auth.service.ts" e implemente o método abaixo:

        login(usuario: string, senha: string): Promise<void> {
            const headers = new Headers();
            headers.append('Content-Type', 'application/x-www-form-urlencoded');
            headers.append('Authorization', 'Basic YW5ndWxhcjpAbmd1bEByMA==');

            const body = `username=${usuario}&password=${senha}&grant_type=password`;

            return this.http.post(this.oauthTokenUrl, body,
                { headers, withCredentials: true })                             // Linha alterada
            .toPromise()
            .then(response => {
                this.armazenarToken(response.json().access_token);
            })
            .catch(response => {
                if (response.status === 400) {
                    const responseJson = response.json();

                    if (responseJson.error === 'invalid_grant') {
                        return Promise.reject('Usuário ou senha inválida!');
                    }
                }

                return Promise.reject(response);
            });
        }
        ...
        obterNovoAccessToken(): Promise<void> {
            const headers = new Headers();
            headers.append('Content-Type', 'application/x-www-form-urlencoded');
            headers.append('Authorization', 'Basic YW5ndWxhcjpAbmd1bEByMA==');

            const body = 'grant_type=refresh_token';

            return this.http.post(this.oauthTokenUrl, body,
                { headers, withCredentials: true })
            .toPromise()
            .then(response => {
                this.armazenarToken(response.json().access_token);

                console.log('Novo access token criado!');

                return Promise.resolve(null);
            })
            .catch(response => {
                console.error('Erro ao renovar token.', response);
                return Promise.resolve(null);
            });
        }
        ...

        . withCredentials: true - Serve para liberar os Cookies do controle CORS cross-site

    . Acesse o componente "navbar.component.ts" e inclua o método abaixo:

        ...
        criarNovoAccessToken() {
            this.auth.obterNovoAccessToken();
        }        
        ...

    . Acesse o componente "navbar.component.html" e inclua o botão abaixo:

        <nav class="navbar">

            <div class="container">
                <div class="ui-g">
                <div class="ui-g-12">
                    <a href="javascript:;" class="navbar-toggle" (click)="exibindoMenu = !exibindoMenu"><i class="fa fa-bars"></i></a>
                    <button type="button" (click)="criarNovoAccessToken()">Novo access token</button>                                       <!-- Linha Incluida -->
                </div>
                </div>
            </div>
            ...
        </nav>

    . Levante o projeto, acesse a tela de Lançamento Pesquisa, quando o token expirar clique no botão "Novo Token" e continue
        a paginação para ver se o erro de "Token Expired" desapareceu.


Aula 19.11. Interceptando chamadas HTTP para tratar a expiração do access token
-------------------------------------------------------------------------------

    . Acesse o componente "navbar.component.html" e retire o botão de novo AccessToken:

    . Acesse o componente "auth.service.ts" e crie o método abaixo:

        ...
        isAccessTokenInvalido() {
            const token = localStorage.getItem('token');

            return !token || this.jwtHelper.isTokenExpired(token);
        }  
        ...

    . Crie o componente "money-http.ts" dentro da pasta segurança  com o conteúdo abaixo:


        import { Injectable } from '@angular/core';
        import { Http, RequestOptions, RequestOptionsArgs, Response } from '@angular/http';

        import { AuthConfig, AuthHttp, JwtHelper } from 'angular2-jwt';
        import { Observable } from 'rxjs/Observable';

        import { AuthService } from './auth.service';

        @Injectable()
        export class MoneyHttp extends AuthHttp {

            constructor( private auth: AuthService,
                            options: AuthConfig,
                            http: Http, defOpts?: RequestOptions ) {
                super(options, http, defOpts);
            }

            public delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
                return this.fazerRequisicao(() => super.delete(url, options));
            }

            public patch(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
                return this.fazerRequisicao(() => super.patch(url, options));
            }

            public head(url: string, options?: RequestOptionsArgs): Observable<Response> {
                return this.fazerRequisicao(() => super.head(url, options));
            }

            public options(url: string, options?: RequestOptionsArgs): Observable<Response> {
                return this.fazerRequisicao(() => super.options(url, options));
            }

            public get(url: string, options?: RequestOptionsArgs): Observable<Response> {
                return this.fazerRequisicao(() => super.get(url, options));
            }

            public post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
                return this.fazerRequisicao(() => super.post(url, body, options));
            }

            public put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
                return this.fazerRequisicao(() => super.put(url, body, options));
            }

            private fazerRequisicao(fn: Function): Observable<Response> {
                if (this.auth.isAccessTokenInvalido()) {
                    console.log('Requisição HTTP com access token inválido. Obtendo novo token...');

                    const chamadaNovoAccessToken = this.auth.obterNovoAccessToken()
                        .then(() => {
                            return fn().toPromise();
                        });

                    return Observable.fromPromise(chamadaNovoAccessToken);
                } else {
                    return fn();
                }
            }

        }

    . Acesse o componente "seguranca.module.ts" e altere o retorno da função "authHttpServiceFactory":

        import { AuthService } from './auth.service';                // Linha inserida
        import { MoneyHttp } from './money-http';                     // Linha inserida
        ...
//        export function authHttpServiceFactory( http: Http, options: RequestOptions ){
        export function authHttpServiceFactory( auth: AuthService, http: Http, options: RequestOptions ){        // Linha inserida
            const config = new AuthConfig({                                                    
                globalHeaders: [{ 'Content-Type': 'application/json' }]
            });                                                

            // return new AuthHttp( config, http, options );                         
            return new MoneyHttp( auth, config, http, options );                               // Linha inserida
        }
        ...
        @NgModule({
            ...
            providers: [
                {
                    provide: AuthHttp,
                    useFactory: authHttpServiceFactory,
                    deps: [AuthService, Http, RequestOptions]       // Linha alterada
                }
            ]
        })

    . Levante o projeto e verifique se o formulário de "lancamento.pesquisa.html" está
        paginando sem expiração do AccessToken.

Aula 19.12. Protegendo componentes
----------------------------------

    . Acesse o componente "error-handler.service.ts" e implemente as linhas abaixo:

        ...
        @Injectable()
        export class ErrorHandlerService {
            constructor(private toasty: ToastyService) { }

            handle(errorResponse: any) {
                let msg: string;

                if (typeof errorResponse === 'string') {
                    msg = errorResponse;

                } else if (errorResponse instanceof Response
                    && errorResponse.status >= 400 && errorResponse.status <= 499) {
                    let errors;
                    msg = 'Ocorreu um erro ao processar a sua solicitação';

                    if ( errorResponse.Status === 403 ){                                // IF Incluido
                        msg = "Você não tem permissão para executar esta ação!!!";
                    }

                    try {
                        errors = errorResponse.json();

                        msg = errors[0].mensagemUsuario;
                    } catch (e) { }

                    console.error('Ocorreu um erro', errorResponse);
                } else {
                    msg = 'Erro ao processar serviço remoto. Tente novamente.';
                    console.error('Ocorreu um erro', errorResponse);
                }

                this.toasty.error(msg);
            }

        }

    . Acesse o componente "lancamento-pesquisa.component.ts" e inclua as alterações abaixo:

        ...
        export class LancamentosPesquisaComponent implements OnInit {

            lancamentos: Lancamento[];
            lancamentosObs: Observable<Lancamento[]>;

            totalRegistros = 0;

            filtro = new LancamentoFiltro();

            @ViewChild('tabela') grid;
            
            constructor( @Inject(LancamentoService) private lancamentoService,
                            @Inject(ToastyService) private toasty,
                            @Inject(ConfirmationService) private confirmationService,
                            @Inject( ErrorHandlerService ) private errorHandler,
                            @Inject( AuthService ) private auth,                    // Linha Inserida
                            @Inject( Title ) private title ){}



    . Acesse o componente "lancaento-pesquisa.component.html" e altere o código abaixo:

        ...
        <p-column styleClass="col-acoes">
            <ng-template pTemplate="body"
                        let-lanc="rowData">
<!-- Bloco alterado - Substituir código pelo abaixo -->                        
                <a pButton 
                    icon="fa-pencil" 
                    pTooltip="Editar"
                    tooltipPosition="top"
                    [routerLink]="['/lancamentos', lanc.codigo]"></a>
                <button pButton 
                        icon="fa-trash"
                        pTooltip="Excluir" 
                        tooltipPosition="top"
                        (click)="confirmarExclusao(lanc)"
                        [disabled]="!auth.temPermissao('ROLE_REMOVER_LANCAMENTO')"></button>            -- Linha de controle de permissão inserida
<!-- Fim de bloco alterado -->                        
            </ng-template>
        </p-column>
        ..

    . Levante o projeto, log com o usuário "Maria" e verifique se o botão de exclusão está desabilitado.

Aula 19.13. Protegendo rotas com guarda de rotas (CanActivate)
--------------------------------------------------------------

    . IMPORTANTE: O objetivo desta aula é criar um mecanismo que não permita o usuário acessar uma funcionalidade que ele 
        não tenha acesso.

    . Acesse a raiz do projeto no prompt do sistema operacional e execute o comando abaixo:

        ng g c core/nao-autorizado --inline-style --inline-template --flat --spec=false

    . Inclua o código abaixo no componente "nao-autorizado.component.ts":

        import { Component, OnInit } from '@angular/core';

        @Component({
            template: `
            <div class="container">
                <h1 class="text-center">Acesso negado!</h1>
            </div>
            `,
        })
        export class NaoAutorizadoComponent implements OnInit {

            constructor() { }

            ngOnInit() {
            }

        }

    . Acesse o componente "app-routing.component.ts" e inclua a rota abaixo:

        ...
        const routes: Routes = [
            { path: '', redirectTo: 'login', pathMatch: 'full' },
            { path: 'nao-autorizado', component: NaoAutorizadoComponent},                   // Página "nao-autorizado" deve ter prioridade sobre a rota "pagina-nao-encontrada"
            { path: 'pessoas', component: PessoasPesquisaComponent },                       //          ou seja, deve ser inserida acima dela
            { path: 'pagina-nao-encontrada', component: PaginaNaoEncontradaComponent },
            { path: 'login', component: LoginFormComponent },
            { path: '**', redirectTo: 'pagina-nao-encontrada' }
        ];
        ...        

    . Acesse a pasta raiz do projeto e digite o comando abaixo:

        ng g g seguranca/auth --spec=false

        . Acesse o componente "auth.service.ts" e implemente o método abaixo:

        ...
        temQualquerPermissao(roles) {
            for (const role of roles) {
                if (this.temPermissao(role)) {
                    return true;
                }
            }
        
            return false;
        }
        ...
    
    . Digite o código abaixo no componente "auth.guard.ts":

        import { Router } from '@angular/router';

        import { Injectable } from '@angular/core';
        import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
        import { Observable } from 'rxjs/Observable';
        
        import { AuthService } from './auth.service';
        
        @Injectable()
        export class AuthGuard implements CanActivate {
            
            constructor(
                private auth: AuthService,
                private router: Router
            ) {}
            
            canActivate(
                next: ActivatedRouteSnapshot,
                state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
            
                if (next.data.roles && !this.auth.temQualquerPermissao(next.data.roles)) {
                    this.router.navigate(['/nao-autorizado']);
                    return false;
                }
            
                return true;
            }
        
        }

    . Acesse o arquivo "seguranca.module.ts" e adicione o "AuthGuard" nos providers:

        ... 
        providers: [
            ...
            AuthGuard
        ]
        ...    
            
    . Acesse o componente "lancamento-routing.module.ts" e altere a rota colocando [AuthGuard]:

        import { AuthGuard } from './../seguranca/auth.guard';                      // Linha inserida
        ...
        const routes: Routes = [
            {
                path: 'lancamentos',
                component: LancamentosPesquisaComponent,
                canActivate: [AuthGuard],                                           // Linha inserida
                data: { roles: ['ROLE_PESQUISAR_LANCAMENTO'] }                      // Linha inserida
            },
            {
                path: 'lancamentos/novo',
                component: LancamentoCadastroComponent,
                canActivate: [AuthGuard],                                           // Linha inserida
                data: { roles: ['ROLE_CADASTRAR_LANCAMENTO'] }                      // Linha inserida
            },
            {
                path: 'lancamentos/:codigo',
                component: LancamentoCadastroComponent,
                canActivate: [AuthGuard],                                           // Linha inserida
                data: { roles: ['ROLE_CADASTRAR_LANCAMENTO'] }                      // Linha inserida
            }
        ];
        ...

    . Levante o projeto com o usuário "maria@algamoney.com" e verifique se a tela de lancamento pesquisa está funcionando.

Aula 19.14. E se o Refresh Token expirar?
-----------------------------------------

    . Altere o projeto para fazer o refresh token expirar em 10 segundos.


    . Acesse o componente "money-http.ts" e inclua o código abaixo:

        import ...
        ...
        export class NotAuthenticatedError {}               // Linha inserida

        @Injectable()
        export class MoneyHttp extends AuthHttp {
            ...
            private fazerRequisicao(fn: Function): Observable<Response> {
                if (this.auth.isAccessTokenInvalido()) {
                  console.log('Requisição HTTP com access token inválido. Obtendo novo token...');
            
                  const chamadaNovoAccessToken = this.auth.obterNovoAccessToken()
                    .then(() => {
                      if (this.auth.isAccessTokenInvalido()) {              // If inserido
                        throw new NotAuthenticatedError();
                      }
            
                      return fn().toPromise();
                    });
            
                  return Observable.fromPromise(chamadaNovoAccessToken);
                } else {
                  return fn();
                }
              }
        }            

    

    . Acesse o componente "error-handler.service.ts" e inclua o "else" abaixo:

        import { NotAuthenticatedError } from './../seguranca/money-http';           Linha inserida
        ...
        constructor(
            private toasty: ToastyService,
            private router: Router                  // Linha inserida
        ) { }
    
        handle(errorResponse: any) {
            let msg: string;
        
            if (typeof errorResponse === 'string') {
                msg = errorResponse;
        
            } else if (errorResponse instanceof NotAuthenticatedError) {                    // Else inserido
                msg = 'Sua sessão expirou!';
                this.router.navigate(['/login']);
            ...
            }
            ...
        }    

    . Faça o teste verificando se o token expira e renova de 5 em 5 segundos; e o refresh token de 10 em 10 segundos.
        Quando o refresh token expira, o sistema desvia o usuário para a tela de login para nova autenticação e consequentemente
        novo refresh token

        . Certifique-se que o token está configurado para expirar de 5 em 5 segundos; e o refresh token de 10 em 10.

// PAREI AQUI
Aula 19.15. Tratando acessos de usuários deslogados na AuthGuard
----------------------------------------------------------------

    . Acesse as configurações do navegador e limpe todos os cookies.

    . Levante a aplicação e tente acessar qualquer URL diferente /login. Sempre que tentar esses acessos o sistema desviará o fluxo
        do sistema para a tela de "Acesso Negado".

    . Acesse o componente "auth.guard.ts" e altere o if abaixo:

        ...
        if (this.auth.isAccessTokenInvalido()) {                                            // If alterado
            console.log('Navegação com access token inválido. Obtendo novo token...');
      
            return this.auth.obterNovoAccessToken()
              .then(() => {
                if (this.auth.isAccessTokenInvalido()) {
                  this.router.navigate(['/login']);
                  return false;
                }
      
                return true;
              });
          } else if (next.data.roles && !this.auth.temQualquerPermissao(next.data.roles)) {     // Else if alterado
            this.router.navigate(['/nao-autorizado']);
            return false;
          }
        }     

        return true;   
        ...

    . Acesse as configurações do navegador e limpe todos os cookies.

    . Levante a aplicação e tente acessar qualquer URL diferente /login. Sempre que tentar esses acessos o sistema desviará o fluxo
        do sistema para a tela de login.

Aula 19.16. Implementando o logout
----------------------------------

    . Acesse o componente "auth.service.ts" e insira o IF abaixo:

        ...
        limparAccessToken() {
            localStorage.removeItem('token');
            this.jwtPayload = null;
        }
        ...
        
    . Acesse a pasta raiz do projeto e execute a linha abaixo:

        ng g s seguranca/logout --spec=false

    . Acesse o componente "logout.service.ts" e insira o código abaixo:

        import { AuthService } from './auth.service';
        import { AuthHttp } from 'angular2-jwt';
        import { Injectable } from '@angular/core';
        
        @Injectable()
        export class LogoutService {
        
            tokensRenokeUrl = 'http://localhost:8080/tokens/revoke';
            
            constructor(
                private http: AuthHttp,
                private auth: AuthService
            ) { }
            
            logout() {
                return this.http.delete(this.tokensRenokeUrl, { withCredentials: true })
                .toPromise()
                .then(() => {
                    this.auth.limparAccessToken();
                });
            }
            
        }

    . Acesse o componente "seguranca.module.ts" e adicione o "LogoutService" nos "providers:

        ...
        providers: [
            ...
            LogoutService
        ]

    . Acesse o componente "navbar.component.ts" e insira o método "logout":

        constructor(
            private auth: AuthService,
            private logoutService: LogoutService,                   // Linha inserida
            private errorHandler: ErrorHandlerService,              // Linha inserida
            private router: Router                                  // Linha inserida
        ) { }
        ...
        logout() {
            this.logoutService.logout()
            .then(() => {
                this.router.navigate(['/login']);
            })
            .catch(erro => this.errorHandler.handle(erro));
        }
        ...

    . Acesse o componente "navbar.component.html" e insira o event binding abaixo:

        <ul class="navbar-menu" [hidden]="!exibindoMenu">
            ...
            <li class="navbar-menuitem"><a href="javascript:;" (click)="logout()">Logout</a></li>   <!-- (click) inserido -->
        </ul>        
    
    . Levante o projeto, faça a autenticação, dê um "logout" e tente acessar qualquer URL de dentro do sistema. Ele deve nesse último
        passo ir para a tela de login.
















https://app.algaworks.com/forum/topicos/69775/versao-do-cli


    . IMPORTANTE: As versões do Angular e PrimeNG utilizadas estão abaixo:

        Angular/cli

            12.2.10    

        PrimeNG

            12.2.1


    . Criação de um novo projeto angular. Acesse a pasta raiz de desenvolvimento dos projetos e digite o 
        comando abaixo:

        $ ng new algamoney-ui

    . Acesse a pasta do projeto algamoney-ui no VSCode.

    
    . Na pasta raiz do projeto execute os comandos abaixo:

            $ npm install primeng --save

            $ npm install primeicons --save

            $ npm install font-awesome --save

            $ npm install @angular/animations --save

            $ npm install primeflex --save

    . Acesse o arquivo angularcli.json, adicione as linhas abaixo dentro do item "style":

        "styles": [
            "node_modules/primeng/resources/themes/saga-blue/theme.css",
            "node_modules/font-awesome/css/font-awesome.min.css",
            "node_modules/primeng/resources/primeng.min.css",
            "node_modules/primeicons/primeicons.css",
            "node_modules/primeflex/primeflex.css",
            "styles.css"
        ],

    . Adicione a importação do componente prime dentro do arquivo src/app/app.module.ts

        import {TabViewModule} from 'primeng/tabview';    
        import {InputTextModule} from 'primeng/inputtext';

        ...

        imports: [
            BrowserModule,
            TabViewModule,
            InputTextModule
        ],

        ...

    . Substitua o conteúdo do arquivo src/app/app.component.html pelo abaixo:

        <p-tabView>
            <p-tabPanel header="Header 1">
                Content 1
            </p-tabPanel>
            <p-tabPanel header="Header 2">
                Content 2
            </p-tabPanel>
            <p-tabPanel header="Header 3">
                Content 3
            </p-tabPanel>
        </p-tabView>



Aula 10.04. Adicionando o formulário de pesquisa de lançamentos
---------------------------------------------------------------

    Sistema de grid do PrimeNG
    --------------------------

    . A tela é dividida em 12 partes, em que é possível através de classes informar
        quantas posições queremos ocupar no monitor.

    . Podemos informar a quantidade de partes que queremos informar através das classes "grid" e "col":

        .grid, .col .col-1, .col-2, ..., .col-12, .col-sm-1,...

    .  Exemplo:

        <div class="grid">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
        </div>

    . A classe p-fluid serve para redimensionar o conteúdo da celula, ou seja, ela fará com que o 
        conteúdo ocupe 100% do espaço da celula. Na prática ela deixa a tag <label> em cima da tag
        <input>

    Protótipo da tela de pesquisa 
    -----------------------------

    . No arquivo style.css do projeto insira o conteúdo abaixo:

        body{
            margin: 0;
            font-family:  Arial, Helvetica, sans-serif;
            color: #404C51;
        }

        label{
            font-weight: bold;
            font-size: small;
        }

        @media (min-width: 1200px){
            .container{
                width: 1170px;
                margin: 0 auto;
            }
        }

        . O @media funciona como uma regra, que é estipulada dentro dos (). Neste caso,
            os valores definidos só servirá para monitores até 1200px, abaixo disso
            considerará o tamanho fisico do monitor.

        . margin : 0 auto - Servirá para centralizar o conteúdo, 0=zero de margin top, bottom, left e right
                                                                 auto=para forçar a centralização.

    . No componente src/app/app.module.ts coloque o código abaixo:

        import { NgModule } from '@angular/core';
        import { BrowserModule } from '@angular/platform-browser';

        import { AppComponent } from './app.component';
        import {InputTextModule} from 'primeng/inputtext';
        import {ButtonModule} from 'primeng/button';

        @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
                BrowserModule,
                InputTextModule,
                ButtonModule
            ],
            providers: [],
            bootstrap: [AppComponent]
        })
        export class AppModule { }


    . No componente src/app/app.component.html inclua o código abaixo:

        <div class="container">
            <div class="grid">
                <div class="col-12">
                    <h1>Lançamentos</h1>
                </div>
                <div class="col-12 p-fluid">
                    <label for="descricao">Descrição</label>
                    <input pInputText type="text" id="descricao" class="p-inputtext-sm">
                </div>
                <div class="col-12">
                    <label style="display: block;">Vencimento</label>
                    <input pInputText type="text" class="p-inputtext-sm" style="width:95px;">

                    <label>Até</label>
                    <input pInputText type="text" class="p-inputtext-sm" style="width:95px;">
                </div>

                <div class="col-12">
                    <button pButton type="submit" label="Pesquisar" class="p-button-sm"></button>
                </div>
            </div>
        </div>

        . O estilo "display : block;" da tag label serve como o p-fluid e jogar o conteúdo da label
            em cima dos campos Data Início e Fim.

https://www.tutorialspoint.com/angular4/angular4_project_setup.htm
https://stackoverflow.com/questions/42831527/create-project-with-angular-4-release-using-angular-cli/42833075







ng generate class domain/lancamento --type=model --spec=false
ng generate interface domain/lancamento


Aula 10.5 - Adicionando uma tabela de dados
-------------------------------------------

    . Acesse a pasta raiz do projeto e digite o comando abaixo:

        $ npm install @angular/cdk --save

        $ ng generate interface domain/lancamento

    . Acesse o arquivo domain/lancamento.ts e insira o código abaixo:

        export interface Lancamento {
            tipo?: string;
            descricao?: string;
            dataVencimento?: string;
            dataPagamento?: string,
            valor?: number,
            pessoa?: string
        }

    . Acesse o arquivo app.component.ts e insira o código abaixo:

        ...
        import { Lancamento } from './domain/lancamento';

        ...
        export class AppComponent implements OnInit {
            ...

            lancamentos: Lancamento[] = [{
                tipo: 'DESPESA',
                descricao: 'Compra de pão',
                dataVencimento: '30/06/2017',
                dataPagamento: '01/07/2017',
                valor: 4.55,
                pessoa: 'Padaria do José'
            },
            {
                tipo: 'DESPESA',
                descricao: 'Compra de pão',
                dataVencimento: '30/06/2017',
                dataPagamento: '01/07/2017',
                valor: 4.55,
                pessoa: 'Padaria do José'
            }];

            ...
        }

    . Acesse o arquivo app.module.ts e insira o código abaixo:

        ...
        import {TableModule} from 'primeng/table';

        ...
        @NgModule({
        ...        
            imports: [
                ...
                TableModule
            ],
        ...

    . Acesse o arquivo app.component.html e insira o código abaixo:

        <div class="container">
            <div class="grid">
                <div class="col-12 p-inputtext-sm">
                <p-table [value]="lancamentos" responsiveLayout="scroll">
                    <ng-template pTemplate="header">
                    <tr>
                        <th>Pessoa</th>
                        <th>Descrição</th>
                        <th>Vencimento</th>
                        <th>Pagamento</th>
                        <th>Valor</th>
                    </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-lancamento>
                    <tr>
                        <td>{{lancamento.pessoa}}</td>
                        <td>{{lancamento.descricao}}</td>
                        <td>{{lancamento.dataVencimento}}</td>
                        <td>{{lancamento.dataPagamento}}</td>
                        <td>{{lancamento.valor}}</td>
                    </tr>
                    </ng-template>
                </p-table>

                </div>
            </div>
        </div>

    . Execute o comando abaixo e verifique se o código funcionou:

        $ ng serve --open    



sudo npm uninstall -g @angular/cli
sudo npm cache clean

sudo npm install -g @angular/cli@1.1.2

sudo npm i primeng@4.3.0 --save
sudo npm i @angular/animations@4.3.0 --save
sudo npm i font-awesome@4.3.0 --save




cd workspace-angular/
cd algamoney-ui8
code .
cd ..
cd workspace-java/
cd algamoney-api
cd target/
docker start algamoney3
java -jar algamoney-api-1.0.0-SNAPSHOT.jar --algamoney.origin-permitida=http://localhost:4200 --spring.profiles.active=oauth-security
cd ~/workspace-angular/algamoney-ui8
ng serve --open

user: admin@algamoney.com
pwd: admin