Affichage de la liste des collaborateurs d'un référent depuis ses détails

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

@@ -9,12 +9,21 @@
     <p *ngIf="!estReferent && collaborateur.dateDepart!=undefined"><b>Date départ : {{ collaborateur.dateDepart | date: 'dd MMMM yyyy'}}</b></p>
 
     <mat-tab-group mat-align-tabs="start">
-        <mat-tab *ngIf="!estReferent" label="Liste des EP"><h3>Liste des EP</h3></mat-tab>
+        <mat-tab *ngIf="!estReferent" label="Liste des EP effectués">
-        <mat-tab *ngIf="!estReferent" label="Liste des futurs formations"><h3>Liste des futurs formations</h3></mat-tab>
+        </mat-tab>
-        <mat-tab *ngIf="!estReferent" label="Liste des formations effectuées"><h3>Liste des formations effectuées</h3></mat-tab>
+        
-        <mat-tab *ngIf="estReferent" label="Liste des collaborateurs"><h3>Liste des collaborateurs</h3></mat-tab>
+        <mat-tab *ngIf="!estReferent" label="Liste des formations">
-        <mat-tab *ngIf="estReferent" label="Liste des EP effectués"><h3>Liste des EP effectués</h3></mat-tab>
+        </mat-tab>
-        <mat-tab *ngIf="estReferent" label="Liste des EP en cours"><h3>Liste des EP en cours</h3></mat-tab>
+        
+        <mat-tab *ngIf="estReferent" label="Liste des collaborateurs">
+            <collaborateurs-table [rechercherParBU]="rechercherParBU" [displayedColumns]="displayedColumns" [typeRecherche]="typeRecherche" [idReferent]="idCollaborateur" ></collaborateurs-table>
+        </mat-tab>
+        
+        <mat-tab *ngIf="estReferent" label="Liste des EP référent">
+        </mat-tab>
+        
+        <mat-tab *ngIf="estReferent" label="Liste des EP en cours">
+        </mat-tab>
     </mat-tab-group>
 
 </ng-container>

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

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 
 import { MaterialModule } from "../angular-material/angular-material.module";
 import { AffichageDetailsCollaborateurComponent } from "@shared/affichage-details-collaboarteur/affichage-details-collaborateur";
-
+import { MatTablesModule } from '@shared/mat-tables/mat-tables.module';
 
 @NgModule({
   declarations: [ 
@@ -13,7 +13,8 @@ import { AffichageDetailsCollaborateurComponent } from "@shared/affichage-detail
   imports: [
     MaterialModule,
     CommonModule,
-    FormsModule
+    FormsModule,
+    MatTablesModule
   ],
   exports: [AffichageDetailsCollaborateurComponent]
 })

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

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from "@angular/core";
 import { CollaborateurDTO, CollaborateursService } from "@shared/api-swagger";
 import { Subscription } from "rxjs";
+import { collaborateurTypeRecherche } from "@shared/utils/cles";
 
 @Component({
     selector: "affichage-details-collaborateur",
@@ -10,6 +11,14 @@ export class AffichageDetailsCollaborateurComponent implements OnInit{
     @Input() idCollaborateur: string;
     @Input() estReferent: boolean=false;
     
+    
+    typeRecherche : string = collaborateurTypeRecherche.collaborateursEP;
+    
+    displayedColumns : string[] = ["businessunit", "collaborateur", "datearrivee"];
+    
+    rechercherParBU: boolean = true;
+
+
     collaborateur: CollaborateurDTO = undefined;
     private collaborateurSubscription: Subscription;
 

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

@@ -4,7 +4,6 @@
   
 <ng-container *ngIf="!chargement">
   
-
   <!-- Barre de recherche -->
   <mat-form-field>
     <mat-label>Rechercher un collaborateur</mat-label>
@@ -30,7 +29,7 @@
     </mat-form-field>
     
     <!-- Datepicker fin -->
-    <mat-form-field >
+    <mat-form-field>
       <mat-label>Date de fin</mat-label>
       <input [(ngModel)]="dateFin" matInput [matDatepicker]="dateFinPicker" [min]="dateDebut" disabled (dateChange)="updateDataSource()">
       <mat-icon *ngIf="this.dateFin != undefined" matDatepickerToggleIcon (click)="updateDateToUndefined(2)">clear</mat-icon>
@@ -39,11 +38,15 @@
     </mat-form-field>
   </ng-container>
  
+  <ng-container *ngIf="taille == 0">
+    <p>Aucun collaborateur à afficher</p>
+  </ng-container>
+  
+  <ng-container *ngIf="taille != 0">
 
     <!-- Affichage de la liste des collaborateurs -->
 
     <mat-table matSort [dataSource]="dataSource" (matSortChange)="triTableau($event)" matSortActive="{{this.tri}}" matSortDirection="asc" >
-    
       <ng-container matColumnDef="businessunit">
         <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Agence</mat-header-cell>
         <mat-cell *matCellDef="let row">{{ row.businessUnit.nom }}</mat-cell>
@@ -76,8 +79,7 @@
         [pageIndex]="numPage-1"
         [pageSize]="parPage"
         [pageSizeOptions]="pageOption"
-                (page)="updatePageInfo($event)"
+        (page)="updatePageInfo($event)">
-                >
     </mat-paginator>
-
+  </ng-container>
 </ng-container>

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

@@ -70,7 +70,7 @@ export class CollaborateursTableComponent implements OnInit {
     /**
      * Nombre total d'élément du tableau
      */
-    taille: number;
+    taille: number = 0;
 
 
     /**
@@ -93,6 +93,9 @@ export class CollaborateursTableComponent implements OnInit {
      */
     dateFin: Date = undefined;
 
+
+    @Input() idReferent: string;
+
     /**
      * Indiquer si il s'agit d'une recherche collaborateur, d'un recherche référentEP ou d'une recherche collaborateurEP d'un référent
      */
@@ -193,11 +196,11 @@ export class CollaborateursTableComponent implements OnInit {
        * Afficher les informations des collaborateursEP d'un référent 
        */
       updateCollaborateursEP() {
-        this.collaborateursDisponiblesSubscription = this.service.getCollaborateursByReferent(this.collaborateurConnecte.id, this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
+        this.collaborateursDisponiblesSubscription = this.service.getCollaborateursByReferent(this.idReferent, this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
             collaborateurs => { console.log(collaborateurs); this.dataSource = new MatTableDataSource(collaborateurs);},
             err => console.log(err)
           );
-          this.collaborateursDisponiblesCountSubscription = this.service.getCollaborateursByReferentCount(this.collaborateurConnecte.id, this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
+          this.collaborateursDisponiblesCountSubscription = this.service.getCollaborateursByReferentCount(this.idReferent, this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
             count => { console.log(count); this.taille=count;},
             err => console.log(err)
           );