Discussion :

[Whisper40]

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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


Merci pour l'aide

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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é ?????????????
      });
    });

[Whisper40]

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

[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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[krakatoa]

par exemple si tu fais ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Whisper40]

Je ne vois pas ou tu veux en venir

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

[Whisper40]

Ce que j'ai pu analyser avec ce code :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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