Ajout du mat-tables pour les demandes de formation + Ajout du mat-dialog pour l'affiche du détail + Début de l'interface pour l'ajout d'une demande

src/app/demandes-formation/demandes-formation.component.html

@@ -1,2 +1,3 @@
 <app-nav-menu></app-nav-menu>
 <h1>Liste des demandes de formation </h1>
+<demandes-formation-table [displayedColumns]="displayedColumns"  (eventEmitter)="afficherDetailDemandeFormation($event)"></demandes-formation-table>

src/app/demandes-formation/demandes-formation.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { DemandeFormationDTO } from '@shared/api-swagger';
+import { DialogDemandeFormationComponent } from './mat-dialog/dialog-demande-formation.component';
 
 /**
   * Composant pour faire afficher la liste des demandes de formations
@@ -10,8 +13,16 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DemandesFormationComponent implements OnInit {
 
-  constructor() {}
+  displayedColumns :  string[] = ["businessunit", "collaborateur", "datedemande", "demanderh", "ep", "etat", "datereponse"]; 
+
+  constructor(private dialog: MatDialog) {}
+
 
   ngOnInit() {
   }
+
+  afficherDetailDemandeFormation(demandeFormation: DemandeFormationDTO) {
+    const datas = { data: demandeFormation, width: "80%", height: '80%'};
+    this.dialog.open(DialogDemandeFormationComponent, datas);
+  }
 }

src/app/demandes-formation/demandes-formation.module.ts

@@ -1,35 +1,40 @@
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
-
 import { MaterialModule } from "@shared/angular-material/angular-material.module";
 
 import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
 
 import { DemandesFormationComponent } from './demandes-formation.component';
+import { DialogDemandeFormationComponent } from './mat-dialog/dialog-demande-formation.component';
 import { DemandeFormationComponent } from './details-demande-formation/demande-formation.component'
 import { NewDemandeFormationComponent } from './new-demande-formation/new-demande-formation.component'
 import { DemandesFormationsRoutingModule } from './demandes-formation.routing.module';
+import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
 
 /**
   * Module demandes formation
   */
 @NgModule({
-  declarations: [ DemandesFormationComponent, DemandeFormationComponent,
+  declarations: [ DemandesFormationComponent, DialogDemandeFormationComponent, DemandeFormationComponent,
     NewDemandeFormationComponent
   ],
   exports: [
       DemandesFormationComponent
   ],
   imports: [
+    CommonModule,
     MaterialModule,
     NavMenuModule,
     DemandesFormationsRoutingModule,
-    RouterModule
+    MatTablesModule,
+    RouterModule,
+    FormsModule,
+    ReactiveFormsModule
   ],
 })
 export class DemandesFormationModule {}

src/app/demandes-formation/mat-dialog/dialog-demande-formation.component.html

@@ -0,0 +1,31 @@
+<h3>Détails de la demande</h3>
+<p><button mat-stroked-button (click)="fermer()" [routerLink]="['/collaborateurs', collaborateur.id]"> Collaborateur: {{collaborateur.nom}} {{collaborateur.prenom}}</button></p>
+<p> <button mat-stroked-button (click)="fermer()" [routerLink]="['/referents', referent.id]">Référent: {{referent.nom}} {{referent.prenom}}</button></p>
+<p><button mat-stroked-button (click)="fermer()" [routerLink]="['/ep',ep.id]">Voir EP effectué le {{ ep.datePrevisionnelle | date: 'dd/MM/yyyy' }} </button></p>
+<p>Libellé : {{ data.libelle}}</p>
+<p>Description: {{ data.description }}</p>
+<p>Demande RH: {{ afficherDemandeRH(data.demandeRH) }}</p>
+<p>Date demande: {{ data.dateDemande | date: 'dd/MM/yyyy' }} </p>
+<p>Etat : {{ afficherEtat(data.etatDemande) }}</p>
+<p *ngIf="data.etatDemande == etatDemande.Rejetee"> Raison du refus : {{data.commentaireRefus}}</p>
+<ng-container *ngIf="data.etatDemande == etatDemande.EnAttente">
+    <button mat-raised-button (click)="repondre()">Répondre à la demande de formation</button>
+    <ng-container *ngIf="donnerReponse">
+        <mat-slide-toggle [(ngModel)]="demandeValidee">
+            Demande validée
+        </mat-slide-toggle>
+        
+        <div>
+            <mat-form-field *ngIf="!demandeValidee" appearance="fill">
+                <mat-label>Raison du refus</mat-label>
+                <textarea matInput [(ngModel)]="commentaireRefus"></textarea>
+            </mat-form-field>
+        
+        </div>
+        <button mat-raised-button (click)="updateDemandeFormation()">Valider le choix</button>
+    </ng-container>
+    
+</ng-container>
+<button mat-raised-button (click)="fermer()">Fermer</button>
+
+

src/app/demandes-formation/mat-dialog/dialog-demande-formation.component.ts

@@ -0,0 +1,79 @@
+import { Component, Inject } from "@angular/core";
+import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { MatSnackBar } from "@angular/material/snack-bar";
+import { CollaborateurDTO, EpInformationDTO, DemandesFormationService, DemandeFormationDTO, EtatDemande, afficherEtatDemande } from "@shared/api-swagger";
+import { Subscription } from "rxjs";
+
+
+@Component( {
+    selector: "dialog-demande-formation",
+    templateUrl: "dialog-demande-formation.component.html"
+})
+export class DialogDemandeFormationComponent {
+    ep: EpInformationDTO;
+    collaborateur: CollaborateurDTO;
+    referent: CollaborateurDTO;
+    etatDemande: any = EtatDemande;
+    engagementsSubscription: Subscription;
+    
+    donnerReponse: boolean = false;
+    commentaireRefus : string = "";
+    demandeValidee: boolean = true;
+
+
+    constructor(private dialogRef : MatDialogRef<DialogDemandeFormationComponent>, @Inject(MAT_DIALOG_DATA) public data : DemandeFormationDTO, private demandesFormationService: DemandesFormationService,
+                    private snackBar: MatSnackBar){
+        this.ep = data.ep;
+        this.collaborateur = data.ep.collaborateur;
+        this.referent = data.ep.referent;
+    }
+
+    updateDemandeFormation() {
+        let demandeFormation : DemandeFormationDTO = this.data;
+        if(this.demandeValidee) {
+            demandeFormation.etatDemande = EtatDemande.Validee;
+        }
+        else {
+            if(this.commentaireRefus.length == 0) {
+                this.snackBar.open("Vous devez justifier le refus de la demande de formation.", "Attention", {
+                    duration: 5000,
+                    horizontalPosition: "center",
+                    verticalPosition: "top",
+                });
+                return;
+            }
+
+            demandeFormation.commentaireRefus = this.commentaireRefus;
+            demandeFormation.etatDemande = EtatDemande.Rejetee; 
+        }
+        this.engagementsSubscription = this.demandesFormationService.updateDemandeFormation(demandeFormation, demandeFormation.id).subscribe(
+            () => location.reload(),
+            err => console.log(err)
+        );
+    }
+
+    afficherDemandeRH(demandeRH: boolean) {
+        if (demandeRH)
+            return 'Oui';
+        else 
+            return 'Non'
+    }
+
+    afficherEtat(etat: EtatDemande) {
+        return afficherEtatDemande(etat);
+    }
+
+    fermer() {
+        this.dialogRef.close();
+    }
+
+    repondre() {
+        this.donnerReponse = true;
+    }
+
+    ngOnDestroy() {
+        if(this.engagementsSubscription != null) {
+            this.engagementsSubscription.unsubscribe();
+        }
+    }
+}

src/app/demandes-formation/new-demande-formation/new-demande-formation.component.css

@@ -0,0 +1,16 @@
+div {
+  margin-left: 5%;
+  margin-bottom: 1%;
+}
+
+.input{
+  width: 30%;
+}
+
+.input2 {
+  width: 14%;
+}
+
+.moveright {
+  margin-left: 2%;
+}

src/app/demandes-formation/new-demande-formation/new-demande-formation.component.html

@@ -1,2 +1,35 @@
 <app-nav-menu></app-nav-menu>
 <h1>  Nouvelle demande de formation </h1>
+
+
+<!-- Le formulaire -->
+<form [formGroup]="demandeFormationForm" (ngSubmit)="ajouterDemandeFormation()">
+    <div>
+      <!-- Attribut : libelle -->
+      <mat-form-field class="input">
+        <input matInput placeholder="Libellé" formControlName="libelle">
+      </mat-form-field>
+    </div>
+
+    <div>
+        <!-- Attribut : description -->
+        <mat-form-field class="input">
+            <input matInput placeholder="Description" formControlName="description">
+        </mat-form-field>
+    </div>
+
+    <div>
+      <!-- Attribut : origine -->
+      <mat-form-field class="input">
+        <mat-label>Origine de la demande</mat-label>
+        <mat-select formControlName="origine">
+          <mat-option *ngFor="let o of originesDemandeFormation" [value]="o">{{o.libelle}}</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+  
+
+    <div>
+      <button mat-raised-button>Ajouter une demande de formation</button>
+    </div>
+  </form>

src/app/demandes-formation/new-demande-formation/new-demande-formation.component.ts

@@ -1,16 +1,80 @@
 import { Component, OnInit } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { Router } from '@angular/router';
+import { FormBuilder, FormGroup, FormControl, } from '@angular/forms';
+
+import {  OrigineDemandeFormationDTO, EtatDemande } from "@shared/api-swagger/model/models";
+
+import { DemandesFormationService } from "@shared/api-swagger/api/api";
 
 /**
   * Composant qui sert à créer une demande de formation pour un collaborateur.
   */
 @Component({
   selector: 'app-new-demande-formation',
-  templateUrl: './new-demande-formation.component.html'
+  templateUrl: './new-demande-formation.component.html',
+  styleUrls: ['./new-demande-formation.component.css']
 })
 export class NewDemandeFormationComponent implements OnInit {
 
-  constructor() {}
+   /**
+    * Observable pour enregistrer la nouvelle formation
+    */
+    demandeFormationSubscription: Subscription;
+    /**
+      * Observable pour récupérer la liste des origines formation
+      */
+    origineDemandeSubscription: Subscription;
+  
+  
+    /**
+      * Liste des origines de demande de formation à faire afficher dans une liste déroulante.
+      */
+    originesDemandeFormation: OrigineDemandeFormationDTO[];
+  
+    /**
+      * FormBuilder qui sera lié au formulaire du template avec les attributs d'une formation
+      * C'est dans cet objet qu'est stockée la nouvelle formation
+      */
+    demandeFormationForm = this.fb.group(
+      {
+        id:[0],
+        libelle: [""],
+        description: [],
+        demandeRH: [true],
+        dateDemande: [new Date()],
+        etatDemande: [EtatDemande.EnAttente],
+        origine: [""],
+        collaborateur: [""], 
+      }
+    );
+  
+    constructor(private fb: FormBuilder, private demandesFormationService: DemandesFormationService, private router: Router) { }
   
     ngOnInit() {
+  
+      this.origineDemandeSubscription = this.demandesFormationService.getOriginesDemandeFormation().subscribe(
+        originesDemandeFormation => this.originesDemandeFormation = originesDemandeFormation,
+        err => console.log(err)
+      );  
+    }
+  
+    ajouterDemandeFormation() {
+      this.demandeFormationSubscription = this.demandesFormationService.addDemandeFormation(this.demandeFormationForm.getRawValue()).subscribe(
+        response => {
+          console.log(response);
+          this.router.navigate(['/demandesformation',response["id"]]);
+        }
+      );
+    }
+  
+    ngOnDestroy() {
+      if(this.demandeFormationSubscription != undefined) {
+        this.demandeFormationSubscription.unsubscribe();
+      }
+
+      if(this.origineDemandeSubscription != undefined) {
+        this.origineDemandeSubscription.unsubscribe();
+      }
     }
 }

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

@@ -0,0 +1,133 @@
+<ng-container *ngIf="chargement">
+    <mat-spinner></mat-spinner>
+</ng-container>
+
+<ng-container *ngIf="!chargement">
+    <ng-container *ngIf="!estAffichageEP">
+        <!-- Barre de recherche -->
+        <mat-form-field>
+            <mat-label>Rechercher un collaborateur</mat-label>
+            <input matInput type="text" [(ngModel)]="search" (keyup)="setSearch()">
+            <button mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="resetSearch()">
+            <mat-icon>close</mat-icon>
+            </button>
+        </mat-form-field>
+
+        <!--Checkboxes des BU-->
+        <ng-container>
+            <select-filter 
+                [dataSource]="bus" 
+                [checkedAll]="true"
+                label="Business Unit"
+                propertyValueName="nom"
+                (isSelectedAllEvent)="updateAllBUs($event)"
+                (isSelectedEvent)="updateBUs($event.isSelected, $event.selectedElement)">
+            </select-filter>
+        </ng-container>
+
+        <!--Checkboxes des Etats engagement-->
+        <ng-container>
+            <select-filter 
+                [dataSource]="etatsDemandesAffiches" 
+                [checkedAll]="true"
+                label="Etats engagement"
+                (isSelectedAllEvent)="updateAllEtatsDemande($event)"
+                (isSelectedEvent)="updateEtatsDemande($event.isSelected, $event.selectedElement)">
+            </select-filter>
+        </ng-container>
+        <!--Checkboxes des Statuts d'EP-->
+        <ng-container>
+            <select-filter 
+                [dataSource]="statutsEpAffiches" 
+                [checkedAll]="true"
+                label="Statuts EP"
+                (isSelectedAllEvent)="updateAllStatutsEp($event)"
+                (isSelectedEvent)="updateStatutsEp($event.isSelected, $event.selectedElement)">
+            </select-filter>
+        </ng-container>
+        <ng-container>
+            <!-- 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>
+            
+            <!-- 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>
+          </ng-container>
+    </ng-container>
+
+    <ng-container *ngIf="taille == 0">
+        <p>Aucune demande de formation à afficher</p>
+    </ng-container>
+
+    <ng-container *ngIf="taille != 0">
+        <mat-table  matSort [dataSource]="dataSource" (matSortChange)="triTableau($event)" matSortActive="{{this.tri}}" matSortDirection="asc" >
+            <ng-container matColumnDef="businessunit">
+                <mat-header-cell *matHeaderCellDef mat-sort-header >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 mat-header-cell *matHeaderCellDef mat-sort-header>Collabotareur</mat-header-cell>
+                <!-- Lien vers le détail du collaborateur -->
+                <mat-cell *matCellDef="let row">
+                 {{row.collaborateur.nom}} {{row.collaborateur.prenom}}
+                </mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="datedemande">
+                <mat-header-cell *matHeaderCellDef mat-sort-header>Date demande</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{row.dateDemande | date :'dd/MM/yyyy'}}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="demanderh">
+                <mat-header-cell *matHeaderCellDef mat-sort-header>Demande RH</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{afficherDemandeRH(row.demandeRH)}}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="ep">
+                <mat-header-cell *matHeaderCellDef mat-sort-header>EP</mat-header-cell>
+                <ng-container *matCellDef="let row">
+                  <!-- Lien vers l'EP -->
+                  <mat-cell *ngIf="row.ep" [routerLink]="['/ep',row.ep.id]">
+                    <p>Consulter EP</p>
+                  </mat-cell>
+                </ng-container>
+            </ng-container>
+
+            <ng-container matColumnDef="etat">
+                <mat-header-cell *matHeaderCellDef mat-sort-header>Réponse</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{afficherEtat(row.etatDemande)}}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="datereponse">
+                <mat-header-cell *matHeaderCellDef mat-sort-header>Date réponse</mat-header-cell>
+                <ng-container *matCellDef="let row">
+                    <mat-cell *ngIf="row.dateDerniereReponse">{{row.dateDerniereReponse | date :'dd/MM/yyyy'}}</mat-cell>
+                    <mat-cell *ngIf="!row.dateDerniereReponse">{{row.dateDerniereReponse}}</mat-cell>
+                  </ng-container>           
+            </ng-container>
+
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="emitEvent(row)"></mat-row>
+        </mat-table>
+        <mat-paginator *ngIf="!estAffichageEP" #paginator 
+            [length] = "taille"
+            [pageIndex]="numPage-1"
+            [pageSize]="parPage"
+            [pageSizeOptions]="pageOption"
+            (page)="updatePageInfo($event)">
+        </mat-paginator>
+    </ng-container>
+
+</ng-container>

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

@@ -0,0 +1,372 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { MatTableDataSource } from "@angular/material/table";
+import { BusinessUnitDTO, CollaborateurDTO, DemandesFormationService, EtatDemande, afficherEtatDemande, DemandeFormationDTO, StatutEp, estEPEnCours } from "@shared/api-swagger";
+import { cles } from "@shared/utils/cles";
+import { DemandesFormationsRoutingModule } from "app/demandes-formation/demandes-formation.routing.module";
+
+import { Subscription } from "rxjs";
+
+
+@Component({
+    selector: "demandes-formation-table",
+    templateUrl: "./demandes-formation.table.html"
+})
+export class DemandesFormationTableComponent implements OnInit {
+    
+
+    chargement : boolean = true;
+    
+    /**
+     * * 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;
+    
+    /**
+         * Nombre total d'élément du tableau
+         */
+    taille: number = 0;
+
+    /**
+     * Liste des business units du collaborateur connecté
+     */
+    bus: Array<BusinessUnitDTO> = [];
+
+    /**
+    * contenu de la recherche pour trouver un collaborateur.
+    */
+    search: string = "";
+    
+    /**
+     * Options pour choisir le nombre de page à affiche
+     */
+    pageOption = [ 5, 15, 20, 30, 50];
+
+    /**
+     * Permet de savoir sur quelle attribut d'un CollaborateurDTO doit être trié le tableau.
+     */
+    tri: string = "collaborateur";
+
+    /**
+     * Liste des id des business units des collaborateurs à afficher
+     */
+    private busIds: Array<number> = [];
+
+    /**
+     * Liste des tous les états demandes
+     */
+    etatsDemandes: Array<EtatDemande> = [
+        EtatDemande.EnAttente, EtatDemande.Validee,
+        EtatDemande.Rejetee
+    ];
+    etatsDemandesAffiches: Array<EtatDemande> = [
+        EtatDemande.EnAttente, EtatDemande.Validee,
+        EtatDemande.Rejetee
+    ];
+
+    /**
+     * Liste des tous les statuts d'EP
+     */
+     allStatutsEp: Array<StatutEp> = [
+        StatutEp.Cree, StatutEp.Disponible,
+        StatutEp.Saisi, StatutEp.DatesProposees,
+        StatutEp.AttenteEntretien, StatutEp.Effectue,
+        StatutEp.SignatureReferent, StatutEp.Signe,
+        StatutEp.Rejete, StatutEp.Annule
+    ];
+
+    statutsEp: Array<StatutEp> = [
+        StatutEp.Cree, StatutEp.Disponible,
+        StatutEp.Saisi, StatutEp.DatesProposees,
+        StatutEp.AttenteEntretien, StatutEp.Effectue,
+        StatutEp.SignatureReferent, StatutEp.Signe,
+        StatutEp.Rejete, StatutEp.Annule
+    ];
+
+    statutsEpAffiches: Array<string> = [
+        'Annulé','En cours', 'Rejeté', 'Signé'
+    ];
+
+    /**
+     * Date à partir de laquelle les demandes de formation doivent être récupérées en fonction de leur date de demande
+     */
+    dateDebut: Date = undefined;
+
+     /**
+      * Date jusqu'à laquelle les demandes de formation doivent être récupérées en fonction de leur date de demande
+      */
+    dateFin: Date = undefined;
+
+
+    /**
+        * Liste des colonnes du tableau à afficher.
+        */
+    @Input() displayedColumns : string[] = [];
+    @Input() estAffichageEP: boolean = false;
+    @Input() demandesFormation: DemandeFormationDTO[] = [];
+
+    @Output() eventEmitter: EventEmitter<any> = new EventEmitter<any>();
+
+    dataSource: MatTableDataSource<DemandeFormationDTO>;
+    demandesFormationSubscription: Subscription;
+    demandesFormationCountSubscription: Subscription;
+    etatsDemandesSubscription: Subscription;
+
+    constructor(private demandeFormationService: DemandesFormationService) {}
+
+    ngOnInit() {
+        if(this.estAffichageEP) {
+            this.taille = this.demandesFormation.length;
+            this.dataSource = new MatTableDataSource(this.demandesFormation);
+        }
+        else
+            this.setBUsId();
+    }
+
+    emitEvent(demande: DemandesFormationsRoutingModule) {
+        if(this.eventEmitter != null)
+            this.eventEmitter.emit(demande);
+    }
+
+    updateDataSource() {
+        if(this.busIds.length == 0 || this.etatsDemandes.length == 0 || this.statutsEp.length == 0) {
+            this.taille = 0;
+            this.dataSource = new MatTableDataSource(undefined);
+            return;
+        }
+        this.demandesFormationSubscription = this.demandeFormationService.getDemandesFormation(this.etatsDemandes, this.busIds, this.statutsEp, this.asc, this.numPage, this.parPage, this.search, this.tri, this.dateDebut, this.dateFin).subscribe(
+            demandesFormation => this.dataSource = new MatTableDataSource(demandesFormation),
+            err => console.log(err)
+        );
+
+        this.demandesFormationCountSubscription = this.demandeFormationService.getDemandesFormationCount(this.etatsDemandes, this.busIds, this.statutsEp, this.asc, this.numPage, this.parPage, this.search, this.tri, this.dateDebut, this.dateFin).subscribe(
+            count => this.taille = count,
+            err => console.log(err)
+        );
+    }
+
+    afficherDemandeRH(demandeRH: boolean) {
+        if (demandeRH)
+            return 'Oui';
+        else 
+            return 'Non'
+    }
+
+    afficherEtat(etat: EtatDemande) {
+        return afficherEtatDemande(etat);
+    }
+
+    /**
+       * 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 {
+            const collaborateurConnecte : CollaborateurDTO = JSON.parse(sessionStorage.getItem(cles.sessionKeyConnectee));
+            this.bus = collaborateurConnecte.businessUnit.agence.bu;
+            for(let bu of this.bus) {
+                this.busIds.push(bu.id);
+            }
+            this.updateDataSource();
+            this.chargement = false;
+        }
+    }
+
+    setSearch() {
+        this.numPage = 1;
+        this.updateDataSource();
+    }
+
+    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();
+    }
+
+    /**
+       * Mettre à jour le nombre 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();
+    }
+
+     /**
+     * Mettre à jour toutes les checkbox des états d'engagement
+     * @param event case cochée ou décochée
+     */
+      updateAllEtatsDemande(event) {
+        this.etatsDemandes = [];
+        // si la checkbox a été cochée
+        if(event)
+        this.etatsDemandes = this.etatsDemandesAffiches.map(e => e);
+        else
+          this.etatsDemandes = [];
+  
+          this.setSearch();
+      }
+
+    /**
+     * Mettre à jour la liste des etats de demande
+     * @param event 
+     * @param etat 
+     */
+    updateEtatsDemande(event:boolean, etat:EtatDemande) {
+        if(event) {
+            this.etatsDemandes.push(etat);
+        }
+        else
+            this.etatsDemandes = this.etatsDemandes.filter( e => etat != e); 
+        this.setSearch();
+    }
+
+    getStatutsEpEnCours() {
+        return  [ StatutEp.AttenteEntretien, StatutEp.DatesProposees, 
+                StatutEp.Disponible, StatutEp.Effectue, 
+                StatutEp.Saisi, StatutEp.SignatureReferent ];
+    }
+
+     /**
+     * Mettre à jour toutes les checkbox des statuts d'EP
+     * @param event case cochée ou décochée
+     */
+    updateAllStatutsEp(event) {
+        this.statutsEp = [];
+        // si la checkbox a été cochée
+        if(event)
+        this.statutsEp = this.allStatutsEp;
+        else
+          this.statutsEp = [];
+  
+          this.setSearch();
+    }
+
+    /**
+     * Mettre à jour la liste des statuts d'EP
+     * @param event 
+     * @param statutEpAffiche 
+     */
+     updateEt
+    updateStatutsEp(event:boolean, statutEpAffiche:string) {
+        if(event) {
+            this.addStatutsEp(statutEpAffiche);
+        }
+        else {
+            this.removeStatutsEp(statutEpAffiche);
+        }
+        this.setSearch();
+    }
+
+    addStatutsEp(statutEpAffiche:string) {
+        switch(statutEpAffiche) {
+            case "Annulé":
+                this.statutsEp.push(StatutEp.Annule);
+                break;
+            case "En cours":
+                const statutsEpEnCoursOuCree = this.allStatutsEp.filter(s => estEPEnCours(s) || s == StatutEp.Cree);
+                this.statutsEp = this.statutsEp.concat(statutsEpEnCoursOuCree);
+                break;
+            case "Rejeté":
+                this.statutsEp.push(StatutEp.Rejete);
+                break;
+            case "Signé":
+                this.statutsEp.push(StatutEp.Signe);
+                break; 
+        }
+    }
+
+    removeStatutsEp(statutEpAffiche:string) {
+        switch(statutEpAffiche) {
+            case "Annulé":
+                this.statutsEp = this.statutsEp.filter(s => s != StatutEp.Annule)
+                break;
+            case "En cours":
+                this.statutsEp = this.statutsEp.filter(s => !estEPEnCours(s) && s != StatutEp.Cree)
+                break;
+            case "Rejeté":
+                this.statutsEp = this.statutsEp.filter(s => s != StatutEp.Rejete)
+                break;
+            case "Signé":
+                this.statutsEp = this.statutsEp.filter(s => s != StatutEp.Signe)
+                break; 
+        }
+    }
+
+
+    /**
+     * Mettre à jour toutes les checkbox des BU
+     * @param event case cochée ou décochée
+     */
+    updateAllBUs(event) {
+        this.busIds = [];
+        // si la checkbox a été cochée
+        if(event)
+            this.bus.map(bu => this.busIds.push(bu.id));
+        else
+          this.busIds = [];
+  
+          this.setSearch();
+    }
+
+    updateBUs(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.setSearch();
+    }
+
+     /**
+       * Mettre à undefined la date de début ou la date de fin 
+       * @param val Valeur pour indiquer quel variable doit être mis à undefined
+       */
+    updateDateToUndefined(val : number) {
+        if(val == 1)
+            this.dateDebut = undefined;
+        if(val == 2)
+            this.dateFin = undefined;
+        this.updateDataSource();
+    }
+
+
+    ngOnDestroy() {
+        if(this.demandesFormationSubscription != undefined) {
+            this.demandesFormationSubscription.unsubscribe();
+        }
+        if(this.demandesFormationCountSubscription != undefined) {
+            this.demandesFormationCountSubscription.unsubscribe();
+        }
+    }
+}

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

@@ -10,6 +10,7 @@ import { FormationsTableComponent } from "@shared/mat-tables/formations-table/fo
 import { ParticipationsFormationTableComponent } from "@shared/mat-tables/participations-formation-table/participations-formation.table";
 import { FilterModule } from "@shared/filter/filter.module";
 import { EpTableComponent } from "./ep-table/ep-table";
+import { DemandesFormationTableComponent } from "@shared/mat-tables/demandes-formation-table/demandes-formation.table";
 
 
 @NgModule({
@@ -18,7 +19,8 @@ import { EpTableComponent } from "./ep-table/ep-table";
     EngagementTableComponent,
     FormationsTableComponent ,
     EpTableComponent,
-    ParticipationsFormationTableComponent
+    ParticipationsFormationTableComponent,
+    DemandesFormationTableComponent
   ],
   imports: [
     MaterialModule,
@@ -32,7 +34,8 @@ import { EpTableComponent } from "./ep-table/ep-table";
     EngagementTableComponent,
     FormationsTableComponent,
     EpTableComponent,
-    ParticipationsFormationTableComponent
+    ParticipationsFormationTableComponent,
+    DemandesFormationTableComponent
   ]
 })
 export class MatTablesModule {}