merge conflicts

src/app/formations/details-formation/formation.component.html

@@ -24,41 +24,7 @@
   <!-- Afficher la liste des participants -->
   <ng-container *ngIf="formation.participations != undefined && formation.participations.length > 0">
     <h3>Liste des participants</h3>
-    <mat-table [dataSource]="dataSource">
+    <participations-formation-table [participations]="formation.participations" [displayedColumns]="displayedColumns"></participations-formation-table>
-
-      <ng-container matColumnDef="collaborateur">
-        <mat-header-cell *matHeaderCellDef>Collaborateur</mat-header-cell>
-        <!-- Lien vers les détails du collaborateur -->
-        <mat-cell *matCellDef="let row" [routerLink]="['/collaborateurs', row.idCollaborateur]">{{row.collaborateur}}</mat-cell>
-      </ng-container>
-
-      <ng-container matColumnDef="dateinscription">
-        <mat-header-cell *matHeaderCellDef>Inscrit le</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{row.dateCreation | date :'dd/MM/yy à HH:mm'}}</mat-cell>
-      </ng-container>
-
-<!--
-      <ng-container matColumnDef="ep">
-        <mat-header-cell *matHeaderCellDef>EP</mat-header-cell>
-        <mat-cell *matCellDef="let row">
-          <p *ngIf="row.statutEP>=5" [routerLink]="['/ep',row.idEP]">Voir EP</p>
-          <p *ngIf="row.statutEP>=2 && row.statutEP<5" [routerLink]="['/ep',row.idEP]">EP en cours</p>
-          <p *ngIf="row.statutEP<=1">Attente prochain EP</p>
-        </mat-cell>
-      </ng-container>
--->
-      <ng-container matColumnDef="evaluation">
-        <mat-header-cell *matHeaderCellDef>Evaluations</mat-header-cell>
-        <mat-cell *matCellDef="let row">
-          <p *ngIf="row.estEvaluee" [routerLink]="['/collaborateurs',row.idCollaborateur,'formations','evaluation',row.id]">Voir évaluation</p>
-          <p *ngIf="!row.estEvaluee">Attente évaluation</p>
-        </mat-cell>
-      </ng-container>
-
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-    </mat-table>
-
   </ng-container>
 </ng-container>
 <mat-spinner *ngIf="formation==undefined"></mat-spinner>

src/app/formations/details-formation/formation.component.ts

@@ -3,12 +3,8 @@ import { Component, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import {ActivatedRoute} from '@angular/router';
 
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {MatSort} from '@angular/material/sort';
-
 import { FormationsService } from '@shared/api-swagger/api/api';
-import { FormationDTO, ParticipationFormationDTO } from "@shared/api-swagger/model/models";
+import { FormationDTO } from "@shared/api-swagger/model/models";
 
 /**
   * Composant qui permet l'affichage des détails d'une formation ainsi que de sa liste de participants.
@@ -26,15 +22,11 @@ export class FormationComponent implements OnInit {
   * Observable pour récuperer la formation à rechercher
   */
   formationSubscription: Subscription;
-  /**
-    * dataSource qui stocke la liste des participations à afficher dans le Mat Table
-    */
-  dataSource : MatTableDataSource<ParticipationFormationDTO>;
 
   /**
   * Les conlonnes à afficher dans le Mat Table
   */
-  displayedColumns: string[]= ["agence", "collaborateur", "dateinscription", "ep"];
+  displayedColumns: string[]= ["collaborateur", "dateCreation", "ep", "evaluation"];
 
   /**
   * id de la formation à récupérer dans l'URL.
@@ -47,20 +39,10 @@ export class FormationComponent implements OnInit {
     // récupérer l'id de la formation dans l'URL
     this.id = this.route.snapshot.paramMap.get('id');
     this.formationSubscription = this.service.getFormationById(this.id).subscribe(
-      formation => this.initFormation(formation)
+      formation => this.formation = formation
     );
   }
 
-  /**
-    * Initialisé la formation et ses participations si il y en a
-    */
-  initFormation(formation:FormationDTO) {
-    this.formation = formation;
-    if(formation.participations != undefined && formation.participations.length != 0 ) {
-      this.dataSource = new MatTableDataSource(formation.participations);
-    }
-  }
-
   /**
     * Une fois la page fermée, il est nécessaire de se désabonner des Oberservable afin d'éviter les fuites mémoires.
     */

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

@@ -7,6 +7,7 @@ import { MaterialModule } from "../angular-material/angular-material.module";
 import { CollaborateursTableComponent } from "@shared/mat-tables/collaborateurs-table/collaborateurs.table";
 import { EngagementTableComponent } from "@shared/mat-tables/engagements-table/engagements-table"
 import { FormationsTableComponent } from "@shared/mat-tables/formations-table/formations.table";
+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";
 
@@ -17,6 +18,7 @@ import { EpTableComponent } from "./ep-table/ep-table";
     EngagementTableComponent,
     FormationsTableComponent ,
     EpTableComponent,
+    ParticipationsFormationTableComponent
   ],
   imports: [
     MaterialModule,
@@ -29,7 +31,8 @@ import { EpTableComponent } from "./ep-table/ep-table";
     CollaborateursTableComponent,
     EngagementTableComponent,
     FormationsTableComponent,
-    EpTableComponent
+    EpTableComponent,
+    ParticipationsFormationTableComponent
   ]
 })
 export class MatTablesModule {}

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

@@ -0,0 +1,59 @@
+
+<ng-container>
+
+
+    <!-- Barre de recherche -->
+      <mat-form-field>
+      <mat-label>Rechercher </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>
+  
+  <!-- Affichage de la liste des participations -->
+  <mat-table [dataSource]="dataSource" matSort>
+    <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" [routerLink]="['/collaborateurs', row.collaborateur.id]">
+       {{row.collaborateur.nom}} {{row.collaborateur.prenom}}
+      </mat-cell>
+    </ng-container>
+    <ng-container matColumnDef="dateCreation">
+      <mat-header-cell mat-header-cell *matHeaderCellDef mat-sort-header>Inscrit le</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{row.dateCreation | date :'dd/MM/yy à HH:mm'}}</mat-cell>
+    </ng-container>
+    <ng-container matColumnDef="ep">
+      <mat-header-cell mat-header-cell *matHeaderCellDef mat-sort-header>EP</mat-header-cell>
+      <ng-container *matCellDef="let row">
+        <!-- Lien vers l'EP -->
+        <mat-cell *ngIf="estEPDisponible(row.ep.statut)" [routerLink]="['/ep',row.ep.id]">
+          <p>Consulter EP</p>
+        </mat-cell>
+        <mat-cell *ngIf="estEnAttente(row.ep.statut)">
+          <p>Attente prochain EP</p>
+        </mat-cell>
+      </ng-container>
+      </ng-container>
+    <ng-container matColumnDef="evaluation">
+      <mat-header-cell mat-header-cell *matHeaderCellDef mat-sort-header>Evaluation</mat-header-cell>
+      <ng-container  *matCellDef="let row">
+        <!-- Lien vers l'évaluation du collaborateur -->
+        <mat-cell *ngIf="row.estEvaluee" [routerLink]="['/collaborateurs',row.collaborateur.id,'formations','evaluation',row.id]">
+          <p>Voir évaluation</p>
+        </mat-cell>
+        <mat-cell *ngIf="!row.estEvaluee">
+          <p>Attente évaluation</p>
+        </mat-cell>
+      </ng-container>   
+    </ng-container>
+
+  
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+  </mat-table>
+  <mat-paginator [pageSizeOptions]="pageOption"></mat-paginator>
+  
+
+</ng-container>

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

@@ -0,0 +1,118 @@
+import { Component, Input, OnInit, ViewChild, AfterViewInit} from "@angular/core";
+
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
+
+import { ParticipationFormationDTO, StatutEp } from '@shared/api-swagger/model/models'
+import { DatePipe } from "@angular/common";
+
+
+@Component({
+    selector: "participations-formation-table",
+    templateUrl: "./participations-formation.table.html",
+    styleUrls: ["./participations-formation.table.css"]
+})
+export class ParticipationsFormationTableComponent implements OnInit, AfterViewInit  {
+
+  
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
+
+    /**
+    * C'est dans cet objet que seront stockés les participations à afficher dans le Mat Table côté template.
+    */
+    dataSource : MatTableDataSource<ParticipationFormationDTO>;
+
+    /**
+     * Liste des participations
+     */
+    @Input() participations : ParticipationFormationDTO[];
+
+    /**
+    * contenu de la recherche pour trouver une formation.
+    */
+    search: string = "";
+
+    /**
+     * Options pour choisir le nombre de page à affiche
+     */
+    pageOption = [ 5, 15, 20, 30, 50];
+
+    /**
+     * DatePipe pour rechercher une date dans la barre de recherche
+     */
+    pipe: DatePipe = new DatePipe('fr');
+
+    /**
+    * Liste des colonnes du tableau à afficher.
+    */
+    @Input() displayedColumns : string[]; 
+
+
+    constructor() {
+     
+    }
+
+    ngOnInit() {
+      this.dataSource = new MatTableDataSource(this.participations);
+      this.dataSource.sortingDataAccessor = (item, property) => {
+        switch(property) {
+          case 'collaborateur': return item.collaborateur.nom + " "+ item.collaborateur.prenom;
+          case 'ep': return item.ep.statut;
+          case 'evaluation': return item.estEvaluee;    
+          default: return item[property];
+        }
+      };
+      this.dataSource.filterPredicate = (data, filter) => {
+        const formatted=this.pipe.transform(data.dateCreation,'dd/MM/yyyy');
+        return formatted.indexOf(filter) >= 0 || 
+          data.collaborateur.nom.toLocaleLowerCase().includes(filter) ||
+          data.collaborateur.prenom.toLocaleLowerCase().includes(filter);
+      };
+    }
+
+    ngAfterViewInit() {
+      this.dataSource.paginator = this.paginator;
+      this.dataSource.sort = this.sort;
+    }
+
+    estEnAttente (statut:StatutEp) {
+      return statut == StatutEp.Cree || statut == StatutEp.Disponible  
+    }
+
+    estEPDisponible (statut:StatutEp) {
+      return statut != StatutEp.Cree && statut != StatutEp.Disponible
+    }
+   
+    setSearch() {
+
+     
+
+      this.dataSource.filter = this.search.trim().toLowerCase();
+
+      
+  
+      if (this.dataSource.paginator) {
+        this.dataSource.paginator.firstPage();
+      }
+    }
+
+       /**
+     * Vider la barre de recherche et remettre le tableau à la première page
+     */
+    resetSearch() {
+      this.search = "";
+      this.setSearch();
+    }
+
+
+    /**
+    * Une fois la page fermée, il est nécessaire de se désabonner des Oberservable afin d'éviter les fuites mémoires.
+    */
+    ngOnDestroy() {
+
+    }
+  }
+