Merge branch 'rh' into develop

develop
jboinembalome 4 years ago
commit 79cb30e775
  1. 36
      src/app/formations/details-formation/formation.component.html
  2. 40
      src/app/formations/details-formation/formation.component.ts
  3. 7
      src/app/shared/mat-tables/mat-tables.module.ts
  4. 0
      src/app/shared/mat-tables/participations-formation-table/participations-formation.table.css
  5. 59
      src/app/shared/mat-tables/participations-formation-table/participations-formation.table.html
  6. 118
      src/app/shared/mat-tables/participations-formation-table/participations-formation.table.ts

@ -24,41 +24,7 @@
<!-- Afficher la liste des participants --> <!-- Afficher la liste des participants -->
<ng-container *ngIf="formation.participations != undefined && formation.participations.length > 0"> <ng-container *ngIf="formation.participations != undefined && formation.participations.length > 0">
<h3>Liste des participants</h3> <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>
</ng-container> </ng-container>
<mat-spinner *ngIf="formation==undefined"></mat-spinner> <mat-spinner *ngIf="formation==undefined"></mat-spinner>

@ -3,12 +3,8 @@ import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import {ActivatedRoute} from '@angular/router'; 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 { 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. * 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 { export class FormationComponent implements OnInit {
/** /**
* Formation à rechercher * Formation à rechercher
*/ */
formation:FormationDTO; formation:FormationDTO;
/** /**
* Observable pour récuperer la formation à rechercher * Observable pour récuperer la formation à rechercher
*/ */
formationSubscription: Subscription; formationSubscription: Subscription;
/**
* dataSource qui stocke la liste des participations à afficher dans le Mat Table
*/
dataSource : MatTableDataSource<ParticipationFormationDTO>;
/** /**
* Les conlonnes à afficher dans le Mat Table * 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. * id de la formation à récupérer dans l'URL.
*/ */
id:any id:any
constructor(private service:FormationsService,private route:ActivatedRoute) {} 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 // récupérer l'id de la formation dans l'URL
this.id = this.route.snapshot.paramMap.get('id'); this.id = this.route.snapshot.paramMap.get('id');
this.formationSubscription = this.service.getFormationById(this.id).subscribe( 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. * Une fois la page fermée, il est nécessaire de se désabonner des Oberservable afin d'éviter les fuites mémoires.
*/ */

@ -7,6 +7,7 @@ import { MaterialModule } from "../angular-material/angular-material.module";
import { CollaborateursTableComponent } from "@shared/mat-tables/collaborateurs-table/collaborateurs.table"; import { CollaborateursTableComponent } from "@shared/mat-tables/collaborateurs-table/collaborateurs.table";
import { EngagementTableComponent } from "@shared/mat-tables/engagements-table/engagements-table" import { EngagementTableComponent } from "@shared/mat-tables/engagements-table/engagements-table"
import { FormationsTableComponent } from "@shared/mat-tables/formations-table/formations.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 { FilterModule } from "@shared/filter/filter.module";
@ -14,7 +15,8 @@ import { FilterModule } from "@shared/filter/filter.module";
declarations: [ declarations: [
CollaborateursTableComponent, CollaborateursTableComponent,
EngagementTableComponent, EngagementTableComponent,
FormationsTableComponent FormationsTableComponent,
ParticipationsFormationTableComponent
], ],
imports: [ imports: [
MaterialModule, MaterialModule,
@ -26,7 +28,8 @@ import { FilterModule } from "@shared/filter/filter.module";
exports: [ exports: [
CollaborateursTableComponent, CollaborateursTableComponent,
EngagementTableComponent, EngagementTableComponent,
FormationsTableComponent FormationsTableComponent,
ParticipationsFormationTableComponent
] ]
}) })
export class MatTablesModule {} export class MatTablesModule {}

@ -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…
Cancel
Save