Merge branch 'mat-table' into develop

src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.html

@@ -15,6 +15,7 @@
         </mat-tab>
         
         <mat-tab *ngIf="!estReferent" label="Liste des formations">
+            <participations-formation-table [participations]="participationsFormation" [displayedColumns]="this.displayedColumnsParticipationFormaton"></participations-formation-table>
         </mat-tab>
         
         <mat-tab *ngIf="estReferent" label="Liste des collaborateurs">

src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from "@angular/core";
-import { CollaborateurDTO, CollaborateursService } from "@shared/api-swagger";
+import { CollaborateurDTO, CollaborateursService, ParticipationFormationDTO, ParticipationsFormationsService } from "@shared/api-swagger";
 import { Subscription } from "rxjs";
 import { collaborateurTypeRecherche } from "@shared/utils/cles";
 import { MatDialog } from "@angular/material/dialog";
@@ -19,26 +19,37 @@ export class AffichageDetailsCollaborateurComponent implements OnInit{
     typeRecherche : string = collaborateurTypeRecherche.collaborateursEP;
     
     displayedColumns : string[] = ["businessunit", "collaborateur", "datearrivee"];
-    
+    displayedColumnsParticipationFormaton: string[]= ["intitule", "statut", "dateCreation", "ep", "evaluation"];
     rechercherParBU: boolean = false;
     rechercherParDate: boolean= false;
 
     collaborateur: CollaborateurDTO = undefined;
+    participationsFormation: Array<ParticipationFormationDTO> = [];
     private collaborateurSubscription: Subscription;
+    private participationFormationSubscription: Subscription;
 
-    constructor(private collaborateurService: CollaborateursService, private dialog: MatDialog, private router: Router) {}
+    constructor(private collaborateurService: CollaborateursService, private participationFormationService: ParticipationsFormationsService, private dialog: MatDialog, private router: Router) {}
 
     ngOnInit() {
         this.collaborateurSubscription = this.collaborateurService.getCollaborateurById(this.idCollaborateur).subscribe(
             collab => this.collaborateur = collab,
             err => console.log(err)
         );
+
+        this.participationFormationSubscription = this.participationFormationService.getParticipationByCollaborateur(this.idCollaborateur).subscribe(
+            participationsFormation => this.participationsFormation = participationsFormation,
+            err => console.log(err)
+        );
     }
 
     ngOnDestroy() {
         if(this.collaborateurSubscription != undefined) {
             this.collaborateurSubscription.unsubscribe();
         }
+        
+        if(this.participationFormationSubscription != undefined) {
+            this.participationFormationSubscription.unsubscribe();
+        }
     }
 
 

src/app/shared/mat-tables/participations-formation-table/participations-formation.table.html

@@ -20,6 +20,18 @@
        {{row.collaborateur.nom}} {{row.collaborateur.prenom}}
       </mat-cell>
     </ng-container>
+    <ng-container matColumnDef="intitule">
+      <mat-header-cell mat-header-cell *matHeaderCellDef mat-sort-header>Intitulé</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+       {{row.intitule}}
+      </mat-cell>
+    </ng-container>
+    <ng-container matColumnDef="statut">
+      <mat-header-cell mat-header-cell *matHeaderCellDef mat-sort-header>Statut</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+       {{row.statut.libelle}}
+      </mat-cell>
+    </ng-container>
     <ng-container matColumnDef="dateCreation">
       <mat-header-cell mat-header-cell *matHeaderCellDef mat-sort-header>Inscrit le</mat-header-cell>
       <mat-cell *matCellDef="let row">{{row.dateCreation | date :'dd/MM/yy à HH:mm'}}</mat-cell>

src/app/shared/mat-tables/participations-formation-table/participations-formation.table.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, ViewChild, AfterViewInit} from "@angular/core";
+import { Component, Input, OnInit, OnChanges, ViewChild, AfterViewInit} from "@angular/core";
 
 import {MatPaginator} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
@@ -13,7 +13,7 @@ import { DatePipe } from "@angular/common";
     templateUrl: "./participations-formation.table.html",
     styleUrls: ["./participations-formation.table.css"]
 })
-export class ParticipationsFormationTableComponent implements OnInit, AfterViewInit  {
+export class ParticipationsFormationTableComponent implements OnInit, OnChanges, AfterViewInit  {
 
   
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -56,21 +56,31 @@ export class ParticipationsFormationTableComponent implements OnInit, AfterViewI
     }
 
     ngOnInit() {
-      this.dataSource = new MatTableDataSource(this.participations);
-      this.dataSource.sortingDataAccessor = (item, property) => {
-        switch(property) {
-          case 'collaborateur': return item.collaborateur.nom + " "+ item.collaborateur.prenom;
-          case 'ep': return item.ep.statut;
-          case 'evaluation': return item.estEvaluee;    
-          default: return item[property];
-        }
-      };
-      this.dataSource.filterPredicate = (data, filter) => {
-        const formatted=this.pipe.transform(data.dateCreation,'dd/MM/yyyy');
-        return formatted.indexOf(filter) >= 0 || 
-          data.collaborateur.nom.toLocaleLowerCase().includes(filter) ||
-          data.collaborateur.prenom.toLocaleLowerCase().includes(filter);
-      };
+     
+    }
+
+    ngOnChanges() {
+      if(this.participations.length > 0) {
+        this.dataSource = new MatTableDataSource(this.participations);
+        this.dataSource.sortingDataAccessor = (item, property) => {
+          switch(property) {
+            case 'collaborateur': return item.collaborateur.nom + " "+ item.collaborateur.prenom;
+            case 'ep': return item.ep.statut;
+            case 'evaluation': return item.estEvaluee; 
+            case 'statut': return item.statut.libelle;      
+            default: return item[property];
+          }
+        };
+        this.dataSource.filterPredicate = (data, filter) => {
+          const formatted=this.pipe.transform(data.dateCreation,'dd/MM/yyyy');
+          return formatted.indexOf(filter) >= 0 || 
+            data.collaborateur.nom.toLocaleLowerCase().includes(filter) ||
+            data.collaborateur.prenom.toLocaleLowerCase().includes(filter) ||
+            data.intitule.toLocaleLowerCase().includes(filter) ||
+            data.statut.libelle.toLocaleLowerCase().includes(filter);
+        };
+      }
+     
     }
 
     ngAfterViewInit() {