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 futurs formations"><h3>Liste des futurs formations</h3></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 EP effectués"><h3>Liste des EP effectués</h3></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 EP effectués">
+        </mat-tab>
+        
+        <mat-tab *ngIf="!estReferent" label="Liste des formations">
+        </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

@@ -3,20 +3,19 @@
 </ng-container>
   
 <ng-container *ngIf="!chargement">
-
-
-    <!-- Barre de recherche -->
-      <mat-form-field>
-      <mat-label>Rechercher un collaborateur</mat-label>
-      <input matInput type="text" [(ngModel)]="search" (keyup)="setSearch()">
-      <mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="resetSearch()">
-        <mat-icon>close</mat-icon>
-      </mat-button>
-    </mat-form-field>
-
+  
+  <!-- Barre de recherche -->
+  <mat-form-field>
+    <mat-label>Rechercher un collaborateur</mat-label>
+    <input matInput type="text" [(ngModel)]="search" (keyup)="setSearch()">
+    <mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="resetSearch()">
+      <mat-icon>close</mat-icon>
+    </mat-button>
+  </mat-form-field>
+  
   <!--Checkboxes des BU-->
   <ng-container *ngIf="rechercherParBU">
-        <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)="updateCheckbox($event.checked,bu)" [checked]="true"> {{bu.nom}}</mat-checkbox>
   </ng-container> 
   
   <ng-container *ngIf="rechercherParDate">
@@ -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>
@@ -38,46 +37,49 @@
       <mat-datepicker touchUi #dateFinPicker disabled="false"></mat-datepicker>
     </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 -->
 
-  <!-- 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>
-    </ng-container>
+    <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>
+      </ng-container>
 
-    <ng-container matColumnDef="collaborateur">
-      <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Collabotareur</mat-header-cell>
-      <mat-cell *matCellDef="let row" (click)="emitEvent(row,'collaborateur')">{{row.nom}} {{row.prenom}}</mat-cell>
-    </ng-container>
+      <ng-container matColumnDef="collaborateur">
+        <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Collabotareur</mat-header-cell>
+        <mat-cell *matCellDef="let row" (click)="emitEvent(row,'collaborateur')">{{row.nom}} {{row.prenom}}</mat-cell>
+      </ng-container>
 
-    <ng-container matColumnDef="datearrivee">
-      <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Date embauche</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{row.dateArrivee | date:'dd/MM/yyyy'}}</mat-cell>
-    </ng-container>
+      <ng-container matColumnDef="datearrivee">
+        <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Date embauche</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{row.dateArrivee | date:'dd/MM/yyyy'}}</mat-cell>
+      </ng-container>
 
-    <ng-container matColumnDef="referent">
-      <mat-header-cell *matHeaderCellDef >Référent</mat-header-cell>
-      <mat-cell *matCellDef="let row" >
-        <mat-cell *ngIf="row.referent" (click)="emitEvent(row.referent,'referent')">{{ row.referent.prenom }} {{ row.referent.nom }}</mat-cell>
-        <mat-cell *ngIf="!row.referent">Aucun référent</mat-cell>
-      </mat-cell>
-    </ng-container>
+      <ng-container matColumnDef="referent">
+        <mat-header-cell *matHeaderCellDef >Référent</mat-header-cell>
+        <mat-cell *matCellDef="let row" >
+          <mat-cell *ngIf="row.referent" (click)="emitEvent(row.referent,'referent')">{{ row.referent.prenom }} {{ row.referent.nom }}</mat-cell>
+          <mat-cell *ngIf="!row.referent">Aucun référent</mat-cell>
+        </mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row [ngClass]="setClassCouleurLigne(row)" *matRowDef="let row; columns: displayedColumns;"></mat-row>
-  </mat-table>
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row [ngClass]="setClassCouleurLigne(row)" *matRowDef="let row; columns: displayedColumns;"></mat-row>
+    </mat-table>
 
-    <mat-paginator #paginator
-                [length] = "taille"
-                [pageIndex]="numPage-1"
-                [pageSize]="parPage"
-                [pageSizeOptions]="pageOption"
-                (page)="updatePageInfo($event)"
-                >
+    <mat-paginator #paginator 
+        [length] = "taille"
+        [pageIndex]="numPage-1"
+        [pageSize]="parPage"
+        [pageSizeOptions]="pageOption"
+        (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)
           );