Début création d'un composant réutilisable qui affichera la liste des collaborateurs

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

@@ -0,0 +1,7 @@
+.collaborateurAjoute {
+    background-color: dodgerblue;
+}
+
+.dejaCollaborateurEP {
+
+}

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

@@ -0,0 +1,81 @@
+<ng-container *ngIf="chargement">
+    <mat-spinner></mat-spinner>
+</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>
+
+  <!--Checkboxes des BU-->
+  <ng-container *ngIf="recherParBU">
+    <ul>
+      <li *ngFor="let bu of bus">
+        <mat-checkbox (change)="updateCheckbox($event.checked,bu)" [checked]="true"> {{bu.nom}}</mat-checkbox>
+        </li>
+      </ul>
+      
+      <!-- Datepicker début -->
+      <mat-form-field >
+        <mat-label>Date de début</mat-label>
+        <input [(ngModel)]="dateDebut" matInput [matDatepicker]="dateDebutPicker" [max]="dateFin" disabled (dateChange)="updateDataSource()">
+        <mat-icon *ngIf="this.dateDebut != undefined" matDatepickerToggleIcon (click)="updateDateToUndefined(1)">clear</mat-icon>
+        <mat-datepicker-toggle matSuffix [for]="dateDebutPicker"></mat-datepicker-toggle>
+        <mat-datepicker touchUi #dateDebutPicker disabled="false"></mat-datepicker>
+      </mat-form-field>
+  </ng-container> 
+
+  <!-- Datepicker fin -->
+  <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>
+    <mat-datepicker-toggle matSuffix [for]="dateFinPicker"></mat-datepicker-toggle>
+    <mat-datepicker touchUi #dateFinPicker disabled="false"></mat-datepicker>
+  </mat-form-field>
+
+
+  <!-- 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>
+
+    <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="referent">
+      <mat-header-cell *matHeaderCellDef >Référent</mat-header-cell>
+      <mat-cell *matCellDef="let row" *ngIf="row.referent" (click)="emitEvent(row,'referent')">{{ row.referent.prenom }} {{ row.referent.nom }}</mat-cell>
+      <mat-cell *matCellDef="let row" *ngIf="!row.referent">Aucun référent</mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-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>    
+</ng-container>

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

@@ -0,0 +1,301 @@
+import { Component, Input, Output, EventEmitter, OnInit } from "@angular/core";
+
+import { Subscription } from 'rxjs';
+
+import {MatTableDataSource} from '@angular/material/table';
+
+import { BusinessUnitDTO, CollaborateurDTO } from '@shared/api-swagger/model/models'
+import { CollaborateursService } from "@shared/api-swagger/api/api";
+import { cles, collaborateurTypeRecheche } from "@shared/utils/cles";
+
+
+@Component({
+    selector: "collaborateurs-table",
+    templateUrl: "./collaborateurs.table.html",
+    styleUrls: ["./collaborateurs.table.css"]
+})
+export class CollaborateursTableComponent implements OnInit {
+
+    /**
+    * Ordre de tri à envoyer au serveur (true : croissant, false : décroissantà).
+    */
+    asc : boolean = true;
+
+    /**
+    * Numéro de la page à afficher dans le tableau.
+    */
+    numPage: number = 1;
+    /**
+    * Nombre d'élément du tableau à affiche en une page.
+    */
+    parPage: number = 15;
+    /**
+    * Observable pour faire des requêtes sur le service collaborateur.
+    */
+    private collaborateursDisponiblesSubscription : Subscription;
+
+    /**
+     * Observable pour faire des requêtes sur le service collaborateur.
+     */
+    private collaborateursDisponiblesCountSubscription : Subscription;
+
+    /**
+    * Liste des colonnes du tableau à afficher.
+    */
+    //displayedColumns : string[] = ["businessunit", "collaborateur", "datearrivee", "referent"];
+
+    /**
+    * C'est dans cet objet que seront stockés les collaborateurs à afficher dans le Mat Table côté template.
+    */
+    dataSource : MatTableDataSource<CollaborateurDTO>;
+
+    /**
+    * contenu de la recherche pour trouver un collaborateur.
+    */
+    search: string = "";
+    /**
+    * Permet de savoir sur quelle attribut d'un CollaborateurDTO doit être trié le tableau.
+    */
+    tri: string = "collaborateur";
+    /**
+     * Liste des business units du collaborateur connecté
+     */
+    bus: Array<BusinessUnitDTO> = [];
+
+    /**
+     * Liste des id des business units des collaborateurs à afficher
+     */
+    private busIds: Array<number> = [];
+
+    /**
+     * Nombre total d'élément du tableau
+     */
+    taille: number;
+
+
+    /**
+     * Options pour choisir le nombre de page à affiche
+     */
+    pageOption = [ 5, 15, 20, 30, 50];
+
+    /**
+    * Spécifie si la liste des collaborateurs est en cours de chargement dans le tableau.
+    */
+    chargement: boolean = true;
+
+    /**
+     * Date à partir de laquelle les collaborateurs doivent être récupérés en fonction de leur date d'arrivée
+     */
+    dateDebut: Date = undefined;
+
+    /**
+     * Date jusqu'à laquelle les collaborateurs doivent être récupérés en fonction de leur date d'arrivée
+     */
+    dateFin: Date = undefined;
+
+    /**
+     * 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
+     */
+    @Input() typeRecherche: string;
+
+    /**
+     * Indique si il s'agit d'une simple recherche pour afficher des informations ou d'une recherche pour ajouter un référent à un ou plusieurs collaborateurs
+     */
+    @Input() changementReferentEP: boolean;
+
+    /**
+     * Indique si la recherche pas BU est activée ou non
+     */
+    @Input() rechercherParBU: boolean;
+
+    /**
+     * Liste des rôles des collaborateurs a affichés
+     */
+    @Input() roles: string[];
+
+    /**
+    * Liste des colonnes du tableau à afficher.
+    */
+    @Input() displayedColumns : string[]; //["businessunit", "collaborateur", "datearrivee", "referent"]
+
+    /**
+     * Liste des collaborateursEP actuels du référent
+     */
+    @Input() collaborateursEP: CollaborateurDTO[];
+
+    /**
+     * Liste des collaborateurs ajoutés dont le référent sera mis à jour
+     */
+    @Input() collaborateursAjouts: CollaborateurDTO[];
+
+    /**
+     * Evenement emis lorsqu'une action doit être effectuée
+     */
+    @Output() eventEmitter: EventEmitter<any> = new EventEmitter<any>();
+
+    private collaborateurConnecte : CollaborateurDTO;
+
+    constructor(private service: CollaborateursService) {}
+
+    emitEvent(referent: CollaborateurDTO, type: string) {
+        const event = {
+            type : type,
+            collaborateur: referent
+        };
+        this.eventEmitter.emit(event);
+    }
+
+    ngOnInit() {
+        this.setBUsId();
+      }
+    
+      /**
+        * Mettre à jour les informations à afficher dans la tableau.
+        * Devra se faire à l'ouverture de la page, au changement de page ou du nombre d'éléments à afficher, au moment d'un tri ou encore lors de l'utilisation de la barre de recherche.
+        */
+      updateDataSource() {
+        switch(this.typeRecherche) {
+            case collaborateurTypeRecheche.collaborateurs:
+            case collaborateurTypeRecheche.referents:
+                this.updateCollaborateursOuReferents();
+                break;
+            case collaborateurTypeRecheche.collaborateursEP:
+                this.updateCollaborateursEP();
+                break;
+        }
+      }
+
+      updateCollaborateursOuReferents() {
+          //ne rien afficher si aucune business unit n'est cochée
+          if(this.busIds.length == 0) {
+            this.taille = 0;
+            this.dataSource = new MatTableDataSource(undefined);
+            return;
+          }
+          this.collaborateursDisponiblesSubscription = this.service.getCollaborateurs(this.roles, this.busIds, this.asc, this.numPage, this.parPage, this.search, this.tri, this.dateDebut, this.dateFin).subscribe(
+            collaborateurs => { console.log(collaborateurs); this.dataSource = new MatTableDataSource(collaborateurs);},
+            err => console.log(err)
+          );
+          this.collaborateursDisponiblesCountSubscription = this.service.getCollaborateursCount(this.roles, this.busIds,this.asc, this.numPage, this.parPage, this.search, this.tri, this.dateDebut, this.dateFin).subscribe(
+            count => { console.log(count); this.taille=count;},
+            err => console.log(err)
+          );
+      }
+
+
+
+      updateCollaborateursEP() {
+        this.collaborateursDisponiblesSubscription = this.service.getCollaborateursByReferent(this.collaborateurConnecte.id, 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(
+            count => { console.log(count); this.taille=count;},
+            err => console.log(err)
+          );
+      }
+    
+      /**
+       * Mettre à undefined la date de début ou la date de fin 
+       * @param val Valeur pour inidiquer quel variable doit être mis à undefined
+       */
+      updateDateToUndefined(val : number) {
+        if(val == 1)
+          this.dateDebut = undefined;
+        if(val == 2)
+          this.dateFin = undefined;
+        this.updateDataSource();
+      }
+    
+      /**
+       * Mettre à jour le nomre d'élément à afficher par page et le numéro de la page
+       * @param event évènement de la pagination
+       */
+      updatePageInfo(event){
+        this.parPage = event.pageSize;
+        this.numPage = event.pageIndex+1;
+        this.updateDataSource();
+      }
+    
+      /**
+       * Remettre au début la liste lors d'une recherche via la barre de recherche
+       */
+      setSearch() {
+        this.numPage = 1;
+        this.updateDataSource();
+      }
+    
+    
+      /**
+       * Vider la barre de recherche et remettre le tableau à la première page
+       */
+      resetSearch() {
+        this.search = "";
+        this.setSearch();
+      }
+    
+    
+      /**
+       * Trier le tableau en fonction de l'évènement de la colonne
+       * @param e évènement du tri
+       */
+      triTableau(e) {
+        this.tri = e.active;
+        switch(e.direction) {
+          case "asc":
+            this.asc = true;
+            break;
+          case "desc":
+            this.asc = false;
+            break;
+        }
+        this.updateDataSource();
+      }
+    
+      /**
+       * création de la liste des business unit du collaborateur connecté pour afficher les checkboxes
+       */
+      setBUsId() {
+        if(sessionStorage.getItem(cles.sessionKeyConnectee) == undefined){
+            setTimeout( () => this.setBUsId(), 1000);
+        }
+        else {
+            this.collaborateurConnecte = JSON.parse(sessionStorage.getItem(cles.sessionKeyConnectee));
+            this.bus = this.collaborateurConnecte.businessUnit.agence.bu;
+            for(let bu of this.bus) {
+                this.busIds.push(bu.id);
+            }
+            this.updateDataSource();
+            this.chargement = false;
+        }
+     }
+    
+      /**
+       * Mettre à jour la liste des 
+       * @param event case cochée ou décochée
+       * @param bu business unit concerné par la checkbox cochée ou décochée
+       */
+      updateCheckbox(event, bu) {
+        // si la checkbox a été cochée
+        if(event) {
+          this.busIds.push(bu.id)
+        }
+        else{
+          this.busIds = this.busIds.filter( (id) => id != bu.id);
+        }
+        this.numPage = 1;
+        this.updateDataSource();
+      }
+    
+      /**
+        * Une fois la page fermée, il est nécessaire de se désabonner des Oberservable afin d'éviter les fuites mémoires.
+        */
+      ngOnDestroy() {
+        if(this.collaborateursDisponiblesSubscription != undefined) {
+          this.collaborateursDisponiblesSubscription.unsubscribe();
+        }
+        if(this.collaborateursDisponiblesCountSubscription != undefined) {
+          this.collaborateursDisponiblesCountSubscription.unsubscribe();
+        }
+      }
+}

src/app/shared/utils/cles.ts

@@ -1,3 +1,10 @@
 export const cles = {
     sessionKeyConnectee : "collaborateurConnecte",
+}
+
+
+export const collaborateurTypeRecheche = {
+    collaborateurs: "collaborateurs",
+    referents: "referents",
+    collaborateursEP: "collaborateursEP"
 }