diff --git a/src/app/formations/details-formation/formation.component.html b/src/app/formations/details-formation/formation.component.html
index efda79c..73a35c0 100644
--- a/src/app/formations/details-formation/formation.component.html
+++ b/src/app/formations/details-formation/formation.component.html
@@ -24,41 +24,7 @@
0">
Liste des participants
-
-
-
- Collaborateur
-
- {{row.collaborateur}}
-
-
-
- Inscrit le
- {{row.dateCreation | date :'dd/MM/yy à HH:mm'}}
-
-
-
-
- Evaluations
-
- Voir évaluation
- Attente évaluation
-
-
-
-
-
-
-
+
diff --git a/src/app/formations/details-formation/formation.component.ts b/src/app/formations/details-formation/formation.component.ts
index 92c7b97..243a202 100644
--- a/src/app/formations/details-formation/formation.component.ts
+++ b/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.
@@ -19,26 +15,22 @@ import { FormationDTO, ParticipationFormationDTO } from "@shared/api-swagger/mod
})
export class FormationComponent implements OnInit {
/**
- * Formation à rechercher
- */
+ * Formation à rechercher
+ */
formation:FormationDTO;
/**
- * Observable pour récuperer la formation à rechercher
- */
+ * Observable pour récuperer la formation à rechercher
+ */
formationSubscription: Subscription;
- /**
- * dataSource qui stocke la liste des participations à afficher dans le Mat Table
- */
- dataSource : MatTableDataSource;
/**
- * Les conlonnes à afficher dans le Mat Table
- */
- displayedColumns: string[]= ["agence", "collaborateur", "dateinscription", "ep"];
+ * Les conlonnes à afficher dans le Mat Table
+ */
+ displayedColumns: string[]= ["collaborateur", "dateCreation", "ep", "evaluation"];
/**
- * id de la formation à récupérer dans l'URL.
- */
+ * id de la formation à récupérer dans l'URL.
+ */
id:any
constructor(private service:FormationsService,private route:ActivatedRoute) {}
@@ -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.
*/
diff --git a/src/app/shared/mat-tables/mat-tables.module.ts b/src/app/shared/mat-tables/mat-tables.module.ts
index 94e3941..be7946b 100644
--- a/src/app/shared/mat-tables/mat-tables.module.ts
+++ b/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";
@@ -14,7 +15,8 @@ import { FilterModule } from "@shared/filter/filter.module";
declarations: [
CollaborateursTableComponent,
EngagementTableComponent,
- FormationsTableComponent
+ FormationsTableComponent,
+ ParticipationsFormationTableComponent
],
imports: [
MaterialModule,
@@ -26,7 +28,8 @@ import { FilterModule } from "@shared/filter/filter.module";
exports: [
CollaborateursTableComponent,
EngagementTableComponent,
- FormationsTableComponent
+ FormationsTableComponent,
+ ParticipationsFormationTableComponent
]
})
export class MatTablesModule {}
diff --git a/src/app/shared/mat-tables/participations-formation-table/participations-formation.table.css b/src/app/shared/mat-tables/participations-formation-table/participations-formation.table.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/mat-tables/participations-formation-table/participations-formation.table.html b/src/app/shared/mat-tables/participations-formation-table/participations-formation.table.html
new file mode 100644
index 0000000..f80d094
--- /dev/null
+++ b/src/app/shared/mat-tables/participations-formation-table/participations-formation.table.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+ Rechercher
+
+
+
+
+
+
+
+ Collabotareur
+
+
+ {{row.collaborateur.nom}} {{row.collaborateur.prenom}}
+
+
+
+ Inscrit le
+ {{row.dateCreation | date :'dd/MM/yy à HH:mm'}}
+
+
+ EP
+
+
+
+ Consulter EP
+
+
+ Attente prochain EP
+
+
+
+
+ Evaluation
+
+
+
+ Voir évaluation
+
+
+ Attente évaluation
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/shared/mat-tables/participations-formation-table/participations-formation.table.ts b/src/app/shared/mat-tables/participations-formation-table/participations-formation.table.ts
new file mode 100644
index 0000000..a02b1d9
--- /dev/null
+++ b/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;
+
+ /**
+ * 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() {
+
+ }
+ }
+
\ No newline at end of file