Filtrer une datasource afin d'exclure de multiples résultats à partir d'une colonne

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous !
Question un peu technique je pense cette fois-ci ;)

J'ai actuellement un tableau généré de type "angular material datatable" qui permet de filtrer sur chaque colonne.
J'y ai ajouté récemment des filtres permettant par exemple d'exclure """"UN""" résultat par colonne.

Mon besoin est d'en exclure """PLUSIEURS""" par colonne.

Actuellement :
Je saisis dans le filtre d'exclusion des projets "monprojet", le datasource enlève tout ce qui contient "monprojet"

Mon besoin :
Je saisis "monprojet,superprojet,projetcool", le datasource doit enlever ces 3 résultats :)

Je pensais que le problème allait pouvoir être résolu simplement en bouclant sur l'input.. mais visiblement j'ai mal réflechis :(

Voila le code source :
Le code est simplifiée, pour avoir une vision globale des choses

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
...
actionByFilter = new FormControl();
excludeNamespaceFilter = new FormControl();
excludeComponentFilter = new FormControl();
excludeDetailsFilter = new FormControl();
...
  filteredValues = {
    actionBy: '',
    excludeNamespace: this.undefinedVariable,
    excludeComponent: this.undefinedVariable,
    excludeDetails: this.undefinedVariable,
  };
...
...
 
this.actionByFilter.valueChanges.subscribe((actionByFilterValue) => {
      this.filteredValues.actionBy = actionByFilterValue;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
      this.filteredValues.topFilter = false;
    });
 
 
 
this.excludeDetailsFilter.valueChanges.subscribe((excludeDetailsFilterValue) => {
      this.filteredValues.excludeDetails = (excludeDetailsFilterValue == '') ? this.undefinedVariable : excludeDetailsFilterValue;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
      this.filteredValues.topFilter = false;
    });
 
...
...
  customFilterPredicate(): any{
    const myFilterPredicate = function(data: any, filter: string): boolean {
      if(!data.actionBy){
        data.actionBy = "";
      }
 
      const searchString = JSON.parse(filter);
      const actionByFound = data.actionBy.toString().trim().toLowerCase().indexOf(searchString.actionBy.toLowerCase().trim()) !== -1;
      const excludeNamespaceFound = data.namespace.toString().trim().toLowerCase().indexOf(searchString.excludeNamespace.toLowerCase().trim()) == -1;
      const excludeComponentFound = data.service.toString().trim().toLowerCase().indexOf(searchString.excludeComponent.toLowerCase().trim()) == -1;
      const excludeDetailsFound = data.details.toString().trim().toLowerCase().indexOf(searchString.excludeDetails.toLowerCase().trim()) == -1;
 
      if (searchString.topFilter){
        return actionByFound || excludeNamespaceFound || excludeComponentFound || excludeDetailsFound;
      }else{
        return actionByFound && excludeNamespaceFound && excludeComponentFound && excludeDetailsFound;
      }
    };
    return myFilterPredicate;
  }

J'ai tenté ceci, sans succès :

Code:

1
2
3
4
5
6
7
8
9
 
this.excludeComponentFilter.valueChanges.subscribe((excludeComponentFilterValue) => {
      console.log(excludeComponentFilterValue);
      excludeComponentFilterValue.forEach(element => {
        this.filteredValues.excludeComponent = (element == '') ? this.undefinedVariable : excludeComponentFilterValue;
        this.dataSource.filter = JSON.stringify(this.filteredValues);
        this.filteredValues.topFilter = false;
      });
    });

En image ce que ça donne actuellement :)
Pièce jointe 586866

Merci pour l'aide

Code:

1
2
3
4
5
6
7
8
9
10
11
this.excludeComponentFilter.valueChanges.subscribe((excludeComponentFilterValue) => {
      console.log(excludeComponentFilterValue);
      excludeComponentFilterValue.forEach(element => {
        this.filteredValues.excludeComponent = (element == '') ? this.undefinedVariable : excludeComponentFilterValue;
        this.dataSource.filter = JSON.stringify(this.filteredValues);
        this.filteredValues.topFilter = false;

console.log((this.filteredValues); //               et donc la liste est bien filtré ?????????????
      });
    });

Non du tout, ce n'est pas du tout fonctionnel, mais sa ne m'étonne pas, le passage d'un mot clé à un genre d'array ne doit pas être trés simple à faire :
Il n'arrive pas à rentrer dans la boucle for, le seul consolelog qui à fonctionné est celui-ci excludeComponentFilterValue mais après plantage du foreach

Citation:

[WDS] Live Reloading enabled.
check-config.component.ts:154 t // valeur saisie
core.js:5967 ERROR TypeError: excludeComponentFilterValue.forEach is not a function
at check-config.component.ts:155
at SafeSubscriber.schedulerFn [as _next] (core.js:25631)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)
at EventEmitter_.next (Subject.js:39)
at EventEmitter_.emit (core.js:25600)
at FormControl.updateValueAndValidity (forms.js:3175)
at FormControl.setValue (forms.js:3566)

En faisant de manière plus classique :
Code:

1 2 3 4 5 6 7 8 9 10 11 this.excludeComponentFilter.valueChanges.subscribe((excludeComponentFilterValue) => { console.log("excludeComponentFilterValue" + excludeComponentFilterValue); for(let test of excludeComponentFilterValue){ this.filteredValues.excludeComponent = (test == '') ? this.undefinedVariable : test; this.dataSource.filter = JSON.stringify(this.filteredValues); this.filteredValues.topFilter = false; } console.log("this.filteredValues" + this.filteredValues); // et donc la liste est bien filtré ????????????? -> non });
Le résultat est qu'avec un mot c'est ok, mais pas avoir plusieurs. Mais ça ne me choque pas, je sais qu'il y a une incohérence dans ce que je fais, mais je trouve pas quoi..
Je pense qu'il y a aussi une modification à faire à cet endroit :

Code:

const excludeComponentFound = data.service.toString().trim().toLowerCase().indexOf(searchString.excludeComponent.toLowerCase().trim()) == -1;

par exemple si tu fais ça :

Code:

1
2
3
 
"breaking bad est la meilleure série de tous les temps".indexOf("bad série");       // ko     -1
"breaking bad est la meilleure série de tous les temps".indexOf("bad est la");      // ok

il ne trouvera pas "bad série" dans la phrase et retournera -1

17/12/2020, 19h49
Whisper40

Je ne vois pas ou tu veux en venir :mouarf:

Mon code pour le filtrage avec un mot fonctionne, mais pas avoir plusieurs, mon besoin :)

Ce que j'ai pu analyser avec ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 this.excludeComponentFilter.valueChanges.subscribe((excludeComponentFilterValue) => { var excludeComponentFilterValue2: string[] = ["admin", "log"]; console.log("excludeComponentFilterValue2" + excludeComponentFilterValue2); for(let test of excludeComponentFilterValue2){ this.filteredValues.excludeComponent = (test == '') ? this.undefinedVariable : test; this.dataSource.filter = JSON.stringify(this.filteredValues); this.filteredValues.topFilter = false; } console.log("this.filteredValues" + this.filteredValues); // et donc la liste est bien filtré ????????????? });
Le filtrage est réalisé mais toujours avec le dernier élement de l'array

Ce que je comprends :
Le filtre s'applique sur le premier element de l'array.
Un deuxième element doit être filtré, alors il REPREND LA DATA ORIGINALE et applique le deuxième filtre !
Et c'est là ou je pense qu'est le problème. Il devrait reprendre la data précédemment filtré avec le premier element de l'array et filtrer encore avec le deuxième element.

Je n'ai toujours pas trouvé de solution, mais j'espère que l'un de vous proposera une solution plus ou moins efficiente pour eviter de boucler X fois sur la data :)

18/12/2020, 14h41
dukoid

si tu peux mettre ça sur stackblitz
18/12/2020, 15h16
Whisper40

Et voilà :) Au moins on sera ISO à ce que j'ai de mon côté : https://angular-hbakxo-e5rtnt.stackblitz.io
Je me suis basé sur un ancien stack pour apporter mes modifs

Tu peux voir que le filtre pour exclure un "name" fonctionne.

Je n'ai pas inclu la boucle "for" de mes tests volontairement.
18/12/2020, 20h09
krakatoa

to lien ne fonctionne pas.

faut le lien avec l'editeur de code qu'on puisse faire des tests et non le liens du resultat
18/12/2020, 20h31
Whisper40

Ok je ne suis pas habitué à partager de lien :) : https://stackblitz.com/edit/angular-...ing-example.ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
  customFilterPredicate() {
    const myFilterPredicate = function(
      data: PeriodicElement,
      filter: string
    ): boolean {
      let searchString = JSON.parse(filter);
 
      let nameFound =
        data.name
          .toString()
          .trim()
          .toLowerCase()
          .indexOf(searchString.name.toLowerCase()) !== -1;
      let positionFound =
        data.position
          .toString()
          .trim()
          .indexOf(searchString.position) !== -1;
 
      const words = searchString.excludeName
        .toLowerCase()
        .trim()
        .split(" ");
      let nameExcludeFound = true;
      for (const k in words) {
        const res =
          data.name
            .toString()
            .trim()
            .toLowerCase()
            .indexOf(words[k]) == -1;
        if (!res) {
          nameExcludeFound = false;
          break;
        }
      }
 
      if (searchString.topFilter) {
        return nameFound || positionFound || nameExcludeFound;
      } else {
        return nameFound && positionFound && nameExcludeFound;
      }
    };
    return myFilterPredicate;
  }
}

18/12/2020, 22h18
Whisper40

Je sais pas comment t'as fais pour trouver aussi rapidement alors que je mouline. Merci à toi je vais analyser pour comprendre..
Je viens de tester c'est ok avec " test ESPACE 99 "

As tu une explication sur ce que j'aurais du voir ? ou ce que j'ai fais que je n'aurais pas du ?
18/12/2020, 22h37
krakatoa

indeOf fonctionne pour rechercher un seul mot ou une série de mots cote à cote

donc, si tu cherches 2 mots dans une phrase comme ceci:

Code:

"breaking bad est la meilleure série de tous les temps".indexOf("bad série"); // ko -1

ça ne fonctionne pas !

il faut donc utiliser une autre technique
il faut d'abord chercher indexOf("bad"), puis indexOf("serie")

j'ai automatisé ça avec un split et une boucle for