Affichage de la liste des engagements

src/app/engagements/engagements.component.ts

@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { EngagementDTO } from "@shared/api-swagger";
 
 @Component({
     selector: "app-engagements",
@@ -6,8 +7,10 @@ import { Component } from "@angular/core";
 })
 export class EngagementsComponent {
 
-    
+    displayedColumns :  string[] = ["businessunit", "collaborateur", "action", "dispositif", "modalite", "datelimite", "etat"]; 
     constructor() {}
 
-
+    afficherDetailsEngagements(engagement: EngagementDTO) {
+        console.log(engagement);
+    }
 }

src/app/engagements/engagements.html

@@ -1,3 +1,5 @@
 <app-nav-menu></app-nav-menu>
 
 <h2>Liste des engagements</h2>
+
+<engagements-table [displayedColumns]="displayedColumns" (eventEmitter)="afficherDetailsEngagements($event)"></engagements-table>

src/app/engagements/engagements.module.ts

@@ -7,6 +7,7 @@ import { MaterialModule } from "@shared/angular-material/angular-material.module
 import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
 import { EngagementsComponent } from "./engagements.component";
 import { EngagementsRoutingModule } from "./engagements.routing.module";
+import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
 
 
 
@@ -19,7 +20,8 @@ import { EngagementsRoutingModule } from "./engagements.routing.module";
         CommonModule,
         RouterModule, 
         NavMenuModule,
-        EngagementsRoutingModule
+        EngagementsRoutingModule,
+        MatTablesModule
     ],
 })
 export class EngagementsModule {}

src/app/shared/mat-tables/engagements-table/engagements-table.html

@@ -3,7 +3,7 @@
 </ng-container>
 
 <ng-container *ngIf="!chargement">
-    <ng-container *ngIf="!estSaisieEP">
+    <ng-container *ngIf="!estAffichageEP">
         <!-- Barre de recherche -->
         <mat-form-field>
             <mat-label>Rechercher un collaborateur</mat-label>
@@ -15,12 +15,12 @@
 
         <!--Checkboxes des BU-->
         <ng-container>
-            <mat-checkbox *ngFor="let bu of bus" (change)="updateCheckbox($event.checked,bu)" [checked]="true"> {{bu.nom}}</mat-checkbox>
+            <mat-checkbox *ngFor="let bu of bus" (change)="updateBUs($event.checked,bu)" [checked]="true"> {{bu.nom}}</mat-checkbox>
         </ng-container>
 
         <!--Checkboxes des Etats engagement-->
         <ng-container>
-            <mat-checkbox *ngFor="let etat of etatsEngagements" (change)="updateEtatsEngagement($event.checked,etat)" [checked]="true"> {{afficherEtat(etat)}}</mat-checkbox>
+            <mat-checkbox *ngFor="let etat of etatsEngagementsAffiches" (change)="updateEtatsEngagement($event.checked,etat)" [checked]="true"> {{afficherEtat(etat)}}</mat-checkbox>
         </ng-container>
     </ng-container>
 
@@ -29,61 +29,61 @@
     </ng-container>
 
     <ng-container *ngIf="taille != 0">
-        <mat-table>
+        <mat-table [dataSource]="dataSource">
             <ng-container matColumnDef="businessunit">
-                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Agence</mat-header-cell>
+                <mat-header-cell *matHeaderCellDef>Agence</mat-header-cell>
                 <mat-cell *matCellDef="let row">{{row.ep.collaborateur.businessUnit.nom}}</mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="collaborateur">
-                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Collaborateur</mat-header-cell>
+                <mat-header-cell *matHeaderCellDef>Collaborateur</mat-header-cell>
                 <mat-cell *matCellDef="let row">{{row.ep.collaborateur.nom}} {{row.ep.collaborateur.prenom}}</mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="action">
-                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Action</mat-header-cell>
+                <mat-header-cell *matHeaderCellDef>Action</mat-header-cell>
                 <mat-cell *matCellDef="let row">{{row.action}}</mat-cell>
             </ng-container>
 
-            <ng-container matColumnDef="dispotitif">
+            <ng-container matColumnDef="dispositif">
-                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Dispositif</mat-header-cell>
+                <mat-header-cell *matHeaderCellDef>Dispositif</mat-header-cell>
                 <mat-cell *matCellDef="let row">{{row.dispotitif}}</mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="modalite">
-                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Modalité</mat-header-cell>
+                <mat-header-cell *matHeaderCellDef>Modalité</mat-header-cell>
                 <mat-cell *matCellDef="let row">{{row.modalite}}</mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="datelimite">
-                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Date limite</mat-header-cell>
+                <mat-header-cell *matHeaderCellDef>Date limite</mat-header-cell>
                 <mat-cell *matCellDef="let row">{{row.dateLimite}}</mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="etat">
-                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Etat engagement</mat-header-cell>
+                <mat-header-cell *matHeaderCellDef>Etat engagement</mat-header-cell>
                 <mat-cell *matCellDef="let row">{{afficherEtat(row.etatEngagement)}}</mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="ep">
-                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>EP</mat-header-cell>
+                <mat-header-cell *matHeaderCellDef>EP</mat-header-cell>
                 <mat-cell *matCellDef="let row">Voir EP</mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="reponse">
-                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear></mat-header-cell>
+                <mat-header-cell *matHeaderCellDef></mat-header-cell>
                 <mat-cell *matCellDef="let row">Mettre à jour l'engagement</mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="supprimer">
-                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear></mat-header-cell>
+                <mat-header-cell *matHeaderCellDef></mat-header-cell>
                 <mat-cell *matCellDef="let row">Supprimer l'engagement</mat-cell>
             </ng-container>
 
             <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="emitEvent(row)"></mat-row>
         </mat-table>
-        <mat-paginator *ngIf="!estSaisieEP" #paginator 
+        <mat-paginator *ngIf="!estAffichageEP" #paginator 
             [length] = "taille"
             [pageIndex]="numPage-1"
             [pageSize]="parPage"

src/app/shared/mat-tables/engagements-table/engagements-table.ts

@@ -2,6 +2,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { MatTableDataSource } from "@angular/material/table";
 import { BusinessUnitDTO, CollaborateurDTO, EngagementDTO, EngagementsService, EtatEngagement } from "@shared/api-swagger";
 import { cles, engagementTypeRecherche } from "@shared/utils/cles";
+import { EngagementsRoutingModule } from "app/engagements/engagements.routing.module";
 import { Subscription } from "rxjs";
 
 
@@ -66,12 +67,17 @@ export class EngagementTableComponent implements OnInit {
         EtatEngagement.EnAttente, EtatEngagement.DateLimitePassee,
         EtatEngagement.NonRealisable, EtatEngagement.Respecte
     ];
+    etatsEngagementsAffiches: Array<EtatEngagement> = [
+        EtatEngagement.EnAttente, EtatEngagement.DateLimitePassee,
+        EtatEngagement.NonRealisable, EtatEngagement.Respecte
+    ];
+
 
     /**
         * Liste des colonnes du tableau à afficher.
         */
-    @Input() displayedColumns : string[];
+    @Input() displayedColumns : string[] = [];
-    @Input() estSaisieEP: boolean = false;
+    @Input() estAffichageEP: boolean = false;
     @Input() engagementsSaisis: EngagementDTO[] = [];
 
     @Output() eventEmitter: EventEmitter<any> = new EventEmitter<any>();
@@ -84,7 +90,7 @@ export class EngagementTableComponent implements OnInit {
     constructor(private engagementService: EngagementsService) {}
 
     ngOnInit() {
-        if(this.estSaisieEP) {
+        if(this.estAffichageEP) {
             this.taille = this.engagementsSaisis.length;
             this.dataSource = new MatTableDataSource(this.engagementsSaisis);
         }
@@ -92,14 +98,20 @@ export class EngagementTableComponent implements OnInit {
             this.setBUsId();
     }
 
+    emitEvent(engagement: EngagementsRoutingModule) {
+        if(this.eventEmitter != null)
+            this.eventEmitter.emit(engagement);
+    }
+
 
     updateDataSource() {
-        if(this.busIds.length == 0) {
+        if(this.busIds.length == 0 || this.etatsEngagements.length == 0) {
             this.taille = 0;
             this.dataSource = new MatTableDataSource(undefined);
+            return;
         }
         this.engagementSubscription = this.engagementService.getEngagements(this.etatsEngagements, this.busIds, this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
-            engagements => this.dataSource = new MatTableDataSource(engagements),
+            engagements => { console.log(engagements); this.dataSource = new MatTableDataSource(engagements); },
             err => console.log(err)
         );
 
@@ -165,10 +177,11 @@ export class EngagementTableComponent implements OnInit {
             this.etatsEngagements.push(etat);
         }
         else
-            this.etatsEngagements
+            this.etatsEngagements = this.etatsEngagements.filter( e => etat != e); 
+        this.setSearch();
     }
 
-    updateCheckbox(event, bu) {
+    updateBUs(event, bu) {
         // si la checkbox a été cochée
         if(event) {
           this.busIds.push(bu.id)
@@ -176,10 +189,10 @@ export class EngagementTableComponent implements OnInit {
         else{
           this.busIds = this.busIds.filter( (id) => id != bu.id);
         }
-        this.numPage = 1;
+        this.setSearch();
-        this.updateDataSource();
     }
 
+
     ngOnDestroy() {
         if(this.engagementSubscription != undefined) {
             this.engagementSubscription.unsubscribe();

src/app/shared/mat-tables/mat-tables.module.ts

@@ -15,6 +15,6 @@ import { EngagementTableComponent } from "@shared/mat-tables/engagements-table/e
     CommonModule,
     FormsModule
   ],
-  exports: [CollaborateursTableComponent]
+  exports: [CollaborateursTableComponent, EngagementTableComponent]
 })
 export class MatTablesModule {}