Yanaël GRETTE
4 years ago
commit
35abb47e9b
@ -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> |
||||
@ -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() { |
||||
|
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue