Creation du composant FormationsTableComponent

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

@@ -0,0 +1,84 @@
+<ng-container *ngIf="chargement">
+    <mat-spinner></mat-spinner>
+</ng-container>
+  
+<ng-container *ngIf="!chargement">
+
+
+    <!-- Barre de recherche -->
+      <mat-form-field>
+      <mat-label>Rechercher une formation</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 statuts de formation-->
+    <select-filter 
+            [dataSource]="statutsFormation" 
+            [checkedAll]="false"
+            label="Statuts"
+            propertyValueName="libelle"
+            (isSelectedAllEvent)="updateAllCheckbox($event)"
+            (isSelectedEvent)="updateCheckbox($event.isSelected, $event.selectedElement)">
+    </select-filter>
+  
+  <!-- Affichage de la liste des formations -->
+  
+  <mat-table matSort [dataSource]="dataSource" (matSortChange)="triTableau($event)" matSortActive="{{this.tri}}" matSortDirection="asc" >
+    <ng-container matColumnDef="intitule">
+      <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Intitulé</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.intitule }}</mat-cell>
+    </ng-container>
+  
+    <ng-container matColumnDef=participants>
+      <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Nb participants</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.nbParticipations }}</mat-cell>
+    </ng-container>
+  
+    <ng-container matColumnDef="date">
+      <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Date prévisionnelle</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.dateDebut | date:'dd/MM/yyyy à hh:mm' }}</mat-cell>
+    </ng-container>
+  
+    <ng-container matColumnDef="origine">
+      <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Origine</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{row.origine.libelle}}</mat-cell>
+    </ng-container>
+  
+    <ng-container matColumnDef="statut">
+      <!--Checkboxes des statuts de formation-->
+      <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Statut 
+        <checkbox-filter 
+            [dataSource]="statutsFormation" 
+            [checkedAll]="false"
+            propertyValueName="libelle"
+            (isSelectedAllEvent)="updateAllCheckbox($event)"
+            (isSelectedEvent)="updateCheckbox($event.isSelected, $event.selectedElement)">
+        </checkbox-filter>
+      </mat-header-cell> 
+      <mat-cell *matCellDef="let row">{{row.statut.libelle}}</mat-cell>
+    </ng-container>
+  
+    <ng-container matColumnDef="certification">
+      <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Certifiée</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{estCertifiee(row.estCertifiee)}}</mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <!-- Lien vers le détail d'une formation-->
+    <mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/formations',row.id]"></mat-row>
+  </mat-table>
+  <!--[length]="taille"-->
+  <mat-paginator #paginator
+          [length] = "taille"
+          [pageIndex]="numPage-1"
+          [pageSize]="parPage"
+          [pageSizeOptions]="pageOption"
+          (page)="updatePageInfo($event)"
+          >
+</mat-paginator>
+  
+
+</ng-container>

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

@@ -0,0 +1,260 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+import { Subscription } from 'rxjs';
+
+import {MatTableDataSource} from '@angular/material/table';
+
+import { CollaborateurDTO, FormationDetailsDTO, StatutFormationDTO } from '@shared/api-swagger/model/models'
+import { FormationsService } from "@shared/api-swagger/api/api";
+import { cles } from "@shared/utils/cles";
+
+
+@Component({
+    selector: "formations-table",
+    templateUrl: "./formations.table.html",
+    styleUrls: ["./formations.table.css"]
+})
+export class FormationsTableComponent 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 formation.
+    */
+    private formationsDisponiblesSubscription : Subscription;
+
+    /**
+     * Observable pour faire des requêtes sur le service formation.
+     */
+    private formationsDisponiblesCountSubscription : Subscription;
+
+    /**
+    * C'est dans cet objet que seront stockés les formations à afficher dans le Mat Table côté template.
+    */
+    dataSource : MatTableDataSource<FormationDetailsDTO>;
+
+    /**
+    * contenu de la recherche pour trouver une formation.
+    */
+    search: string = "";
+    /**
+    * Permet de savoir sur quelle attribut d'un FormationDetailsDTO doit être trié le tableau.
+    */
+    tri: string = "intitule";
+
+    /**
+     * Id agence collaborateur connecté
+     */
+    idAgence: number;
+
+    /**
+     * Liste des statuts de formation
+     */
+    statutsFormation: Array<StatutFormationDTO> = [];
+
+    /**
+     * Liste des id statuts à afficher
+     */
+    private idStatuts: Array<number> = [];
+
+    /**
+    * Spécifie si les checkbox des statuts de formation sont toutes cochées ou non.
+    */
+    isStatutsSelectedAll: boolean = false;
+
+    /**
+     * Nombre total d'élément du tableau
+     */
+    taille: number = 0;
+
+    /**
+     * Options pour choisir le nombre de page à affiche
+     */
+    pageOption = [ 5, 15, 20, 30, 50];
+
+    /**
+    * Spécifie si la liste des formations est en cours de chargement dans le tableau.
+    */
+    chargement: boolean = true;
+
+    /**
+     * Indique si la recherche par statut de formation est activée ou non
+     */
+    @Input() rechercherParStatutFormation: boolean = false;
+
+    /**
+    * Liste des colonnes du tableau à afficher.
+    */
+    @Input() displayedColumns : string[]; 
+
+    private collaborateurConnecte : CollaborateurDTO;
+
+    constructor(private formationsService: FormationsService) {}
+
+    ngOnInit() {
+      this.getStatutsFormation();
+      this.setCollaborateurConnecte();
+    }
+  
+    /**
+      * 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() {
+        this.updateFormations();
+    }
+
+    /**
+     * Récupère les statuts de formation
+     */
+    getStatutsFormation()
+    {
+      this.formationsService.getStatutsFormation().subscribe(
+        statuts => {
+          this.statutsFormation = statuts;
+         // statuts.map(statut => this.idStatuts.push(statut.id));
+          
+        },
+        err => console.log(err)
+      );
+    }
+
+    /**
+      * 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.
+      */
+    updateFormations() {
+      this.formationsDisponiblesSubscription = this.formationsService.getFormations(this.idAgence,this.idStatuts,this.asc, this.numPage, this.parPage,  this.search, this.tri).subscribe(
+        formations => this.dataSource = new MatTableDataSource(formations),
+        err => console.log(err)
+      )
+
+      this.formationsDisponiblesCountSubscription = this.formationsService.getFormationsCount(this.idAgence,this.idStatuts,this.asc, this.numPage, this.parPage,  this.search, this.tri).subscribe(
+        count => { console.log(count); this.taille=count;},
+        err => console.log(err)
+      );
+    }
+
+    estCertifiee(certifiee: boolean) {
+      if(certifiee)
+        return "Oui";
+      return "Non";
+    }
+
+    setCollaborateurConnecte()
+    {
+      if(sessionStorage.getItem(cles.sessionKeyConnectee) == undefined){
+        setTimeout( () => this.setCollaborateurConnecte(), 1000);
+      }
+      else {
+          this.collaborateurConnecte = JSON.parse(sessionStorage.getItem(cles.sessionKeyConnectee));
+          this.idAgence = this.collaborateurConnecte.businessUnit.agence.id;
+          this.updateDataSource();
+          this.chargement = false;
+      }
+    }
+
+    /**
+     * 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();
+    }
+
+    /**
+     * Mettre à jour toutes les checkox
+     * @param event case cochée ou décochée
+     */
+    updateAllCheckbox(event) {
+      this.idStatuts = [];
+      // si la checkbox a été cochée
+      if(event)
+        this.statutsFormation.map(statut => this.idStatuts.push(statut.id));
+      else
+        this.idStatuts = [];
+
+      this.numPage = 1;
+      this.updateDataSource();
+    }
+
+
+    /**
+     * Mettre à jour la liste des checkox
+     * @param event case cochée ou décochée
+     * @param statut statut concerné par la checkbox cochée ou décochée
+     */
+    updateCheckbox(event, statut) {
+      // si la checkbox a été cochée
+      if(event) {
+        this.idStatuts.push(statut.id)
+      }
+      else{
+        this.idStatuts = this.idStatuts.filter(id => id != statut.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.formationsDisponiblesSubscription != undefined) {
+        this.formationsDisponiblesSubscription.unsubscribe();
+      }
+      if(this.formationsDisponiblesCountSubscription != undefined) {
+        this.formationsDisponiblesCountSubscription.unsubscribe();
+      }
+    }
+  }
+  

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

@@ -1,20 +1,29 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
 
 import { MaterialModule } from "../angular-material/angular-material.module";
 import { CollaborateursTableComponent } from "@shared/mat-tables/collaborateurs-table/collaborateurs.table";
+import { FormationsTableComponent } from "@shared/mat-tables/formations-table/formations.table";
+import { FilterModule } from "@shared/filter/filter.module";
 
 
 @NgModule({
   declarations: [ 
-    CollaborateursTableComponent 
+    CollaborateursTableComponent,
+    FormationsTableComponent 
   ],
   imports: [
     MaterialModule,
+    FilterModule,
     CommonModule,
-    FormsModule
+    FormsModule,
+    RouterModule
   ],
-  exports: [CollaborateursTableComponent]
+  exports: [
+    CollaborateursTableComponent,
+    FormationsTableComponent
+  ]
 })
 export class MatTablesModule {}