From ca19622837eb0351f92c388e93b018aa385e7572 Mon Sep 17 00:00:00 2001 From: jboinembalome Date: Tue, 23 Feb 2021 14:18:38 +0100 Subject: [PATCH 1/2] Ajout du composant ParticipationsFormationTableComponent --- .../shared/mat-tables/mat-tables.module.ts | 7 +- .../participations-formation.table.css | 0 .../participations-formation.table.html | 59 +++++++++ .../participations-formation.table.ts | 118 ++++++++++++++++++ 4 files changed, 182 insertions(+), 2 deletions(-) create mode 100644 src/app/shared/mat-tables/participations-formation-table/participations-formation.table.css create mode 100644 src/app/shared/mat-tables/participations-formation-table/participations-formation.table.html create mode 100644 src/app/shared/mat-tables/participations-formation-table/participations-formation.table.ts 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 From 58c98d78a1e995067da76c119e78709585de21ef Mon Sep 17 00:00:00 2001 From: jboinembalome Date: Tue, 23 Feb 2021 14:30:33 +0100 Subject: [PATCH 2/2] Ajout du composant ParticipationsFormationTableComponent dans details-formation --- .../formation.component.html | 36 +---------------- .../details-formation/formation.component.ts | 40 +++++-------------- 2 files changed, 12 insertions(+), 64 deletions(-) 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 @@

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. */