Criando um filtro para vários parâmetros | Angular 2: webapps ainda mais poderosas parte 1

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso Angular 2: webapps ainda mais poderosas parte 1

por Guilherme Rezende

| 46.8k xp | 19 posts

Olá amigos, no nosso curso aprendemos a fazer esse tipo de filtro, filtrando o titulo da foto

import { Pipe, PipeTransform } from '@angular/core';
import { FotoComponent } from './foto.component';

@Pipe({
    name: 'filtroPorTitulo'
})
export class FiltroPorTitulo implements PipeTransform { 

    transform(fotos: FotoComponent[], digitado: string): FotoComponent[] {

        digitado = digitado.toLowerCase();
        return fotos.filter( foto => foto.titulo.toLowerCase().includes(digitado));
    }
}

gostaria de saber como eu faria um filtro que buscasse em mais de um parâmetro com apenas um input. Por exemplo, em um cadastro de usuário, se eu quisesse filtrar um usuário pelo nome ou pela cidade ou pelo estado, teria que criar o filtroPorNome, FiltroPorCidade, FiltroPorEstado, e 3 inputs correspondentes, ao invés disso um único input o que eu digitasse.... buscaria nos 3 campos ao mesmo tempo.. teria como fazer?

2 respostas

por Flavio Henrique de Souza Almeida

| 3119.3k xp | 6969 posts

Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

08/02/2017

Crie um único filtro que use os critérios desejados. Exatamente como fez e usa uma lógica bem básica em javascript para filtrar, aquela que você já deve ter feito um dia quando deu seus primeiros passos com javascript, nada sofisticado. Só usará um input apenas.

Ou use vários inputs , cada um com seu filtro. Fica ao seu critério.

solução!

por Guilherme Rezende

| 46.8k xp | 19 posts

08/02/2017

consegui fazer a pesquisa... vou deixá-la mais complexa depois.. mas por hora satisfaz. Segue o código:

export class OmniFilter implements PipeTransform { 

    transform(data: ClientsComponent[], input: string): ClientsComponent[] {

        input           = input.toLowerCase();


        let result      = [];
        let blank       = input.replace(/\s/g,'');
        let search_for  = input.split(" ",-1).filter(function(field){ return field != " ";});
        let search_in   = ['nome','cpf'];
        let priority    = search_in[0];   

        if(blank.length != 0){
            search_for.forEach(function(word){
                search_in.forEach(function(attr){
                    let filter = data.filter(element => element[attr].toLowerCase().includes(word));
                    filter.forEach(function(obj){
                        if(result.indexOf(obj) == -1){
                             result.push(obj);
                        }
                    });
                });
            });
            return result;  
        } else if(result.length == 0){return data;}

    }
}

Mas ainda gostaria de saber se existe uma forma mais simplificada, com mais desempenho? E como a implementação ecmascript 6 nesse script o tornaria melhor?