Filtrer une colonne d'une datatable pour afficher le nombre de ligne ayant un status

1 pièce(s) jointe(s)

Bonjour, J'ai un problème pour avoir le nombre correct de lignes ayant pour status "OK" par exemple.
Le problème est que le filtrage s'applique partout, et donc si OK est écrit ailleurs, alors même un résultat "KO" apparaitra.

Besoin : Je souhaite que les cases affichent le nombre correct de ligne ayant le status en particulier qui est sélectionné.
En image voici ce qui s'affiche dès le chargement de la page ( c'est à dire que les carrés avec le nombre de ligne ayant le mot "ex : KO" s'affiche directement avec le nombre )

Dans le screen : il n'y a pas de problème, mais si j'avais ecris "ok" dans le champs "details" alors il me l'aurait compté en OK

Alors que je souhaite seulement qu'il compte vis à vis de la colonne "status".
Dans l'ideal je souhaite qu'il compte de cette manière pour les cases, et que dans le champs de filtre que l'utilisateur peut taper, que ça filtre sur toutes les colonnes.

Merci pour l'aide ! :)

J'ai essayé avec ceci sans succès ou alors placé au mauvais endroit.. :

Code:

1
2
3
4
 
this.dataSource.filterPredicate = (data: Element, filter: string) => {
      return data.name == filter;
     };

Pièce jointe 576703

check-config.component.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
import { Component, OnInit, Injectable, ViewChild, ChangeDetectorRef, Optional, Inject  } from '@angular/core';
import { RestApiService } from '../../shared/rest-api.service';
import { NotificationsService } from '../../shared/notifications.service';
import { FormControl } from '@angular/forms';
import { Observable, of, Subscription } from 'rxjs';
import { tap, startWith, debounceTime, switchMap, map, filter, distinctUntilChanged } from 'rxjs/operators';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material/dialog';
import { CheckConfigDialogComponent } from './check-config-dialog/check-config-dialog.component';
import { Overlay } from '@angular/cdk/overlay';
 
 
@Injectable({
  providedIn: 'root'
})
 
@Component({
  selector: 'app-check-config',
  templateUrl: './check-config.component.html',
  styleUrls: ['./check-config.component.scss']
})
 
export class CheckConfigComponent implements OnInit {
 
  myControl2 = new FormControl();
  namespaces = [];
 
 
  displayedColumns: string[] = ['namespacename', 'servicename', 'typeverification', 'status', 'details', 'reportdate', 'action']; 
  dataSource = new MatTableDataSource<any>();
 
  @ViewChild(MatPaginator, {static: false}) paginator!: MatPaginator;
  @ViewChild(MatSort, { static: false }) sort!: MatSort;
  totalCount?: number;
  KO?: number;
  OK?: number;
  Solved?: number;
 
  constructor(private dataService: RestApiService, private changeDetectorRefs: ChangeDetectorRef, private notification: NotificationsService, public dialog: MatDialog, overlay: Overlay) {     
  }
 
  ngOnInit() {     
    this.getAllComponentsConfig();
 
  }
 
  btnCategoryClick(val: string) {
    this.dataSource.filter = val.trim().toLowerCase();
    return this.dataSource.filteredData.length;
 
}
 
  getAllComponentsConfig(){   
      this.dataService.getFromApiAllComponentsConfig().subscribe( (res) => {       
      this.dataSource = new MatTableDataSource<any>(res);   
// LE FILTER QUE J'AI TENTE ETAIT PLACE ICI    LE FILTER QUE J'AI TENTE ETAIT PLACE ICI    LE FILTER QUE J'AI TENTE ETAIT PLACE ICI    LE FILTER QUE J'AI TENTE ETAIT PLACE ICI   
      this.updateDataTable();             
  });
  }
 
  updateDataTable(){
      this.changeDetectorRefs.detectChanges();      
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      this.dataSource.sort.sort({ id: "dateajout", start: 'desc', disableClear: false }); 
      this.totalCount = this.dataSource.data.length;      
      this.OK = this.btnCategoryClick('OK');
      this.Solved = this.btnCategoryClick('Solved');  
      this.KO = this.btnCategoryClick('KO');
  }
 
  applyFilteringDataTable(filterValue: string){
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
 
  openDialog(mydata : any) {
 
    const dialogConfig = new MatDialogConfig();
 
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.disableClose=false; // Permet la fermeture si clique à coté
    // dialogConfig.height= "100%";
    dialogConfig.width = "60%";
    dialogConfig.maxWidth = "70%";
    dialogConfig.position = { top: '3%' };
    dialogConfig.data = {
        id: mydata.id,
        namespacename: mydata.namespacename,
        servicename: mydata.servicename,
        typeverification: mydata.typeverification,
        status: mydata.status,
        details: mydata.details,
        reportdate: mydata.reportdate        
    };
 
    const dialogRef = this.dialog.open(CheckConfigDialogComponent, dialogConfig);
    dialogRef.afterClosed().subscribe(      
      data => {
        // console.log("Dialog output:", data)        
        if (data != undefined && mydata.id === data.id) {
          mydata.namespacename = data.namespacename;
          mydata.servicename = data.servicename;
          mydata.typeverification = data.typeverification;
          mydata.status = data.status;
          mydata.details = data.details;
          mydata.reportdate = data.reportdate;
          this.putComponentsConfig(data);
        }
      }
    ); 
 
  }
 
  putComponentsConfig(checkconfig: any){
    this.updateDataTable();
    this.dataService.putToApiComponentsConfig(checkconfig).subscribe((res)=>{
      if(res.status == 200){
        this.notification.LittleNotification("La modification du CheckConfig a bien été prise en compte", 3000, "success", false, "top-end");
 
      }else{
        this.notification.LittleNotification("La modification du CheckConfig est un echec", 3000, "error", false, "top-end");
      }
 
      // this.datanamespaces = res;
      // this.TraitementChartNX();            
  });
  }
}

check-config.component.html

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 
<mat-card> 
<div fxLayout="row wrap">
  <!-- column -->
  <div fxFlex.gt-sm="25" fxFlex.gt-xs="100" fxFlex="100">
    <mat-card>
      <div class="box p-20 bg-info text-center" (click)= "btnCategoryClick('')">
        <h1 class="font-light text-white m-0">{{totalCount}}</h1>
        <h6 class="text-white m-0">Total Configs</h6>
      </div>
    </mat-card>
  </div>
  <!-- column -->
  <!-- column -->
  <div fxFlex.gt-sm="25" fxFlex.gt-xs="100" fxFlex="100">
    <mat-card>
      <div class="box p-20 bg-success text-center" (click)= "btnCategoryClick('OK')">
        <h1 class="font-light text-white m-0">{{OK}}</h1>
        <h6 class="text-white m-0">Status : OK</h6>
      </div>
    </mat-card>
  </div>
  <!-- column -->
  <!-- column -->
  <div fxFlex.gt-sm="25" fxFlex.gt-xs="100" fxFlex="100">
    <mat-card>
      <div class="box p-20 bg-danger text-center" (click)= "btnCategoryClick('KO')">
        <h1 class="font-light text-white m-0">{{KO}}</h1>
        <h6 class="text-white m-0">Status : KO</h6>
      </div>
    </mat-card>
  </div>
  <!-- column -->
  <!-- column -->
  <div fxFlex.gt-sm="25" fxFlex.gt-xs="100" fxFlex="100">
    <mat-card>
      <div class="box p-20 bg-warning text-center" (click)= "btnCategoryClick('Solved')">
        <h1 class="font-light text-white m-0">{{Solved}}</h1>
        <h6 class="text-white m-0">Status : Solved</h6>
      </div>
    </mat-card>
  </div>
  <!-- column -->
</div>
 
    <mat-card-content *ngIf='dataSource.data.length > 0'>
    <mat-card-title>Voici l'ensemble des problèmes de configuration identifiés</mat-card-title>
 
	    <mat-form-field class="filter">
    	    <input type="text" placeholder="Filtrez l'information de votre choix" (keyup)="applyFilteringDataTable($event.target.value)" matInput autocomplete="off">
        </mat-form-field>
 
        <mat-table matTableExporter [dataSource]="dataSource" matSort class="mat-elevation-z8" #exporter="matTableExporter" >  
 
            <ng-container matColumnDef="namespacename">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Namespace</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.namespacename}} </mat-cell>
            </ng-container>
 
            <ng-container matColumnDef="servicename">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Composant</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.servicename}} </mat-cell>
            </ng-container>    
 
            <ng-container matColumnDef="typeverification">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Type de Vérification</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.typeverification}} </mat-cell>
            </ng-container>
 
            <ng-container matColumnDef="status">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.status}} </mat-cell>
            </ng-container>  
 
 
           <!-- <ng-container matColumnDef="status">
			<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
			<mat-cell *matCellDef="let element">
				<mat-form-field floatLabel="never">
					<mat-select [(value)]="element.status" placeholder="Status">
						<mat-option value="Solved">Solved</mat-option>
						<mat-option value="KO">KO</mat-option>
					</mat-select>
				</mat-form-field>
			</mat-cell>
		</ng-container> -->
 
            <ng-container matColumnDef="details">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Détails</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.details}} </mat-cell>
            </ng-container>
 
            <ng-container matColumnDef="reportdate">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Date du signalement</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.reportdate}} </mat-cell>
            </ng-container>
 
            <ng-container matColumnDef="action">
                <mat-header-cell *matHeaderCellDef mat-sort-header>Action</mat-header-cell>
                    <mat-cell *matCellDef="let element">                     
                        <button *ngIf="element.status == 'KO'" mat-icon-button color="warn" (click)="openDialog(element)">
                            <mat-icon>build</mat-icon>
                        </button>
                        <button *ngIf="element.status == 'OK'" mat-icon-button color="primary" (click)="this.notification.LittleNotification('Aucune modification n\'est nécessaire sur cet element.', 3000, 'info', false, 'top-end');">
                            <mat-icon>verified</mat-icon>
                        </button>
                        <button *ngIf="element.status == 'Solved'" mat-icon-button color="accent" (click)="this.notification.LittleNotification('Le problème a été résolu par l\'équipe. En attente de vérification par le système.', 5000, 'info', false, 'top-end');">
                            <mat-icon>verified</mat-icon>
                        </button>
                    </mat-cell>
            </ng-container>
 
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
 
        </mat-table>
 
        <div fxLayout="row">
	        <div fxFlex.gt-sm="100%" >
                <mat-card>
                    <mat-card-content>
                        <mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 15, 100]" showFirstLastButtons></mat-paginator>     
                        <div class="button-row align-center">
                            <button mat-raised-button color="accent" matTooltip="Excel, format propriétaire !" matTooltipPosition="above" (click)="exporter.exportTable('xlsx', {fileName:'Liste de l\'ensemble des namespaces', sheet: 'Services', Props: {Author: 'DevOps Team'}})">Excel</button>
                            <button mat-raised-button color="accent" matTooltip="CSV, le format libre des tableurs !" matTooltipPosition="above" (click)="exporter.exportTable('csv', {fileName:'Liste de l\'ensemble des namespaces'})">Csv</button>
                            <button mat-raised-button color="accent" matTooltip="Json, le format structuré de données !" matTooltipPosition="above" (click)="exporter.exportTable('json', {fileName:'Liste de l\'ensemble des namespaces'})">Json</button>
                            <button mat-raised-button color="accent" matTooltip="Txt, un export basique adapté à Teams !" matTooltipPosition="above" (click)="exporter.exportTable('txt', {fileName:'Liste de l\'ensemble des namespaces'})">Txt</button>
                        </div>
                    </mat-card-content>
                </mat-card>
            </div>
        </div>
    </mat-card-content>
</mat-card>

peut être comme ça ?

Code:

1
2
3
4
 
this.dataSource.filterPredicate = (data: Element, filter: string) => {
      return data['status'].name == filter;
     };

Non plus

Code:

1
2
3
4
5
6
7
 
this.dataSource.filterPredicate = (data: any, filter: string) => {
      return data['status'].name == filter;
};
this.dataSource.filterPredicate = (data: any, filter: string) => {
      return data.status == filter;
     };

on va voir ce que contient data

Code:

1
2
3
4
5
6
 
this.dataSource.filterPredicate = (data: Element, filter: string) => {
      console.log(data);
 
      return data['status'].name == filter;
     };

L'object est bien présent
Code:

1 2 3 {id:1, namespa....., status: "KO", ...} {id:4, namespa....., status: "KO", ...}
console.log(data.status) retoune "KO" 3 fois ( donc ok aussi)

.name etait de trop alors !

Code:

1
2
3
4
5
6
 
this.dataSource.filterPredicate = (data: Element, filter: string) => {
      console.log(data);
 
      return data['status'] == filter;
     };

1 pièce(s) jointe(s)

Non plus déja tenté :) :

Code:

1
2
3
4
5
6
7
8
9
10
 
getAllComponentsConfig(){   
      this.dataService.getFromApiAllComponentsConfig().subscribe( (res) => {       
      this.dataSource = new MatTableDataSource<any>(res);  
      this.dataSource.filterPredicate = (data: any, filter: string) => {
        return data['status'] == filter;
       };    
      this.updateDataTable();             
  });
  }

Résultat : Pièce jointe 576711

Code:

1
2
3
4
5
 
      this.dataSource.filterPredicate = (data: any, filter: string) => {
console.log(filter);
        return data['status'] == filter;
       };

filter vaut 'OK' ou 'KO' en MAJUSCULE, c'est bien ça ?

Vraiment désolé de t'avoir fait perdre du temps pour cette raison :( .. oui c'était bien ça le problème.. Le lowercase..
Par contre maintenant que les boutons fonctionnent nickel, le champs de recherche lui n'arrive plus à trouver EDIT : Il arrive à trouver pour le status : OK/KO fonctionnel , donc ça veut dire qu'il fonctionne avec les mêmes propriétés qu'au dessus.

Il y a moyen de lui dire, que dans son cas on filtre sur toute la table ?

je ne connais pas du tout les datatables
peut être il faut retourner true ou false

Code:

1
2
3
4
5
6
7
8
 
      this.dataSource.filterPredicate = (data: any, filter: string) => {
 
        if (data['status'] == filter) {
          return true;
        }
         return false;
   };

Hum non rien de bon pour cette modif

tuy l'as mis dans ngOnInit ?
Code:

1 2 3 4 5 6 7 ngOnInit() { this.dataSource.filterPredicate = (data: Element, filter: string) => { return data['status'] == filter; }; }
sinon avec: return data['status'] == filter;
cela doit fonctionner aussi

Si j'applique ça dans le OnInit, ça ne peut pas m'aider à analyser sur toutes les colonnes vu que le code filtre sur status.
Vu que les boutons fonctionnent, la le but c'est que la "searchbar" renvoi des resultats si on tape "namespace1" par exemple, idem si on tape "mo"

Bonjour,

Est-ce que c'est trop laid de faire une requête SQL pour chacun des nombres ?