Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Criando um filtro para vários parâmetros

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

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

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?