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