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