Merge branch 'mat-table' into develop

develop
jboinembalome 4 years ago
commit 1fc5aa7752
  1. 1
      src/app/demandes-formation/demandes-formation.component.html
  2. 13
      src/app/demandes-formation/demandes-formation.component.ts
  3. 13
      src/app/demandes-formation/demandes-formation.module.ts
  4. 31
      src/app/demandes-formation/mat-dialog/dialog-demande-formation.component.html
  5. 79
      src/app/demandes-formation/mat-dialog/dialog-demande-formation.component.ts
  6. 16
      src/app/demandes-formation/new-demande-formation/new-demande-formation.component.css
  7. 33
      src/app/demandes-formation/new-demande-formation/new-demande-formation.component.html
  8. 72
      src/app/demandes-formation/new-demande-formation/new-demande-formation.component.ts
  9. 45
      src/app/shared/api-swagger/api/demandesformation.service.ts
  10. 4
      src/app/shared/api-swagger/model/demandeFormationDTO.ts
  11. 13
      src/app/shared/api-swagger/model/etatDemande.ts
  12. 4
      src/app/shared/api-swagger/model/statutEp.ts
  13. 0
      src/app/shared/mat-tables/demandes-formation-table/demandes-formation.table.css
  14. 133
      src/app/shared/mat-tables/demandes-formation-table/demandes-formation.table.html
  15. 372
      src/app/shared/mat-tables/demandes-formation-table/demandes-formation.table.ts
  16. 7
      src/app/shared/mat-tables/mat-tables.module.ts

@ -1,2 +1,3 @@
<app-nav-menu></app-nav-menu>
<h1>Liste des demandes de formation </h1>
<demandes-formation-table [displayedColumns]="displayedColumns" (eventEmitter)="afficherDetailDemandeFormation($event)"></demandes-formation-table>

@ -1,4 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { DemandeFormationDTO } from '@shared/api-swagger';
import { DialogDemandeFormationComponent } from './mat-dialog/dialog-demande-formation.component';
/**
* Composant pour faire afficher la liste des demandes de formations
@ -10,8 +13,16 @@ import { Component, OnInit } from '@angular/core';
})
export class DemandesFormationComponent implements OnInit {
constructor() {}
displayedColumns : string[] = ["businessunit", "collaborateur", "datedemande", "demanderh", "ep", "etat", "datereponse"];
constructor(private dialog: MatDialog) {}
ngOnInit() {
}
afficherDetailDemandeFormation(demandeFormation: DemandeFormationDTO) {
const datas = { data: demandeFormation, width: "80%", height: '80%'};
this.dialog.open(DialogDemandeFormationComponent, datas);
}
}

@ -1,35 +1,40 @@
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { MaterialModule } from "@shared/angular-material/angular-material.module";
import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
import { DemandesFormationComponent } from './demandes-formation.component';
import { DialogDemandeFormationComponent } from './mat-dialog/dialog-demande-formation.component';
import { DemandeFormationComponent } from './details-demande-formation/demande-formation.component'
import { NewDemandeFormationComponent } from './new-demande-formation/new-demande-formation.component'
import { DemandesFormationsRoutingModule } from './demandes-formation.routing.module';
import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
/**
* Module demandes formation
*/
@NgModule({
declarations: [ DemandesFormationComponent, DemandeFormationComponent,
declarations: [ DemandesFormationComponent, DialogDemandeFormationComponent, DemandeFormationComponent,
NewDemandeFormationComponent
],
exports: [
DemandesFormationComponent
],
imports: [
CommonModule,
MaterialModule,
NavMenuModule,
DemandesFormationsRoutingModule,
RouterModule
MatTablesModule,
RouterModule,
FormsModule,
ReactiveFormsModule
],
})
export class DemandesFormationModule {}

@ -0,0 +1,31 @@
<h3>Détails de la demande</h3>
<p><button mat-stroked-button (click)="fermer()" [routerLink]="['/collaborateurs', collaborateur.id]"> Collaborateur: {{collaborateur.nom}} {{collaborateur.prenom}}</button></p>
<p> <button mat-stroked-button (click)="fermer()" [routerLink]="['/referents', referent.id]">Référent: {{referent.nom}} {{referent.prenom}}</button></p>
<p><button mat-stroked-button (click)="fermer()" [routerLink]="['/ep',ep.id]">Voir EP effectué le {{ ep.datePrevisionnelle | date: 'dd/MM/yyyy' }} </button></p>
<p>Libellé : {{ data.libelle}}</p>
<p>Description: {{ data.description }}</p>
<p>Demande RH: {{ afficherDemandeRH(data.demandeRH) }}</p>
<p>Date demande: {{ data.dateDemande | date: 'dd/MM/yyyy' }} </p>
<p>Etat : {{ afficherEtat(data.etatDemande) }}</p>
<p *ngIf="data.etatDemande == etatDemande.Rejetee"> Raison du refus : {{data.commentaireRefus}}</p>
<ng-container *ngIf="data.etatDemande == etatDemande.EnAttente">
<button mat-raised-button (click)="repondre()">Répondre à la demande de formation</button>
<ng-container *ngIf="donnerReponse">
<mat-slide-toggle [(ngModel)]="demandeValidee">
Demande validée
</mat-slide-toggle>
<div>
<mat-form-field *ngIf="!demandeValidee" appearance="fill">
<mat-label>Raison du refus</mat-label>
<textarea matInput [(ngModel)]="commentaireRefus"></textarea>
</mat-form-field>
</div>
<button mat-raised-button (click)="updateDemandeFormation()">Valider le choix</button>
</ng-container>
</ng-container>
<button mat-raised-button (click)="fermer()">Fermer</button>

@ -0,0 +1,79 @@
import { Component, Inject } from "@angular/core";
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
import { MatSnackBar } from "@angular/material/snack-bar";
import { CollaborateurDTO, EpInformationDTO, DemandesFormationService, DemandeFormationDTO, EtatDemande, afficherEtatDemande } from "@shared/api-swagger";
import { Subscription } from "rxjs";
@Component( {
selector: "dialog-demande-formation",
templateUrl: "dialog-demande-formation.component.html"
})
export class DialogDemandeFormationComponent {
ep: EpInformationDTO;
collaborateur: CollaborateurDTO;
referent: CollaborateurDTO;
etatDemande: any = EtatDemande;
engagementsSubscription: Subscription;
donnerReponse: boolean = false;
commentaireRefus : string = "";
demandeValidee: boolean = true;
constructor(private dialogRef : MatDialogRef<DialogDemandeFormationComponent>, @Inject(MAT_DIALOG_DATA) public data : DemandeFormationDTO, private demandesFormationService: DemandesFormationService,
private snackBar: MatSnackBar){
this.ep = data.ep;
this.collaborateur = data.ep.collaborateur;
this.referent = data.ep.referent;
}
updateDemandeFormation() {
let demandeFormation : DemandeFormationDTO = this.data;
if(this.demandeValidee) {
demandeFormation.etatDemande = EtatDemande.Validee;
}
else {
if(this.commentaireRefus.length == 0) {
this.snackBar.open("Vous devez justifier le refus de la demande de formation.", "Attention", {
duration: 5000,
horizontalPosition: "center",
verticalPosition: "top",
});
return;
}
demandeFormation.commentaireRefus = this.commentaireRefus;
demandeFormation.etatDemande = EtatDemande.Rejetee;
}
this.engagementsSubscription = this.demandesFormationService.updateDemandeFormation(demandeFormation, demandeFormation.id).subscribe(
() => location.reload(),
err => console.log(err)
);
}
afficherDemandeRH(demandeRH: boolean) {
if (demandeRH)
return 'Oui';
else
return 'Non'
}
afficherEtat(etat: EtatDemande) {
return afficherEtatDemande(etat);
}
fermer() {
this.dialogRef.close();
}
repondre() {
this.donnerReponse = true;
}
ngOnDestroy() {
if(this.engagementsSubscription != null) {
this.engagementsSubscription.unsubscribe();
}
}
}

@ -0,0 +1,16 @@
div {
margin-left: 5%;
margin-bottom: 1%;
}
.input{
width: 30%;
}
.input2 {
width: 14%;
}
.moveright {
margin-left: 2%;
}

@ -1,2 +1,35 @@
<app-nav-menu></app-nav-menu>
<h1> Nouvelle demande de formation </h1>
<!-- Le formulaire -->
<form [formGroup]="demandeFormationForm" (ngSubmit)="ajouterDemandeFormation()">
<div>
<!-- Attribut : libelle -->
<mat-form-field class="input">
<input matInput placeholder="Libellé" formControlName="libelle">
</mat-form-field>
</div>
<div>
<!-- Attribut : description -->
<mat-form-field class="input">
<input matInput placeholder="Description" formControlName="description">
</mat-form-field>
</div>
<div>
<!-- Attribut : origine -->
<mat-form-field class="input">
<mat-label>Origine de la demande</mat-label>
<mat-select formControlName="origine">
<mat-option *ngFor="let o of originesDemandeFormation" [value]="o">{{o.libelle}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<button mat-raised-button>Ajouter une demande de formation</button>
</div>
</form>

@ -1,16 +1,80 @@
import { Component, OnInit } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, FormControl, } from '@angular/forms';
import { OrigineDemandeFormationDTO, EtatDemande } from "@shared/api-swagger/model/models";
import { DemandesFormationService } from "@shared/api-swagger/api/api";
/**
* Composant qui sert à créer une demande de formation pour un collaborateur.
*/
@Component({
selector: 'app-new-demande-formation',
templateUrl: './new-demande-formation.component.html'
templateUrl: './new-demande-formation.component.html',
styleUrls: ['./new-demande-formation.component.css']
})
export class NewDemandeFormationComponent implements OnInit {
constructor() {}
/**
* Observable pour enregistrer la nouvelle formation
*/
demandeFormationSubscription: Subscription;
/**
* Observable pour récupérer la liste des origines formation
*/
origineDemandeSubscription: Subscription;
/**
* Liste des origines de demande de formation à faire afficher dans une liste déroulante.
*/
originesDemandeFormation: OrigineDemandeFormationDTO[];
/**
* FormBuilder qui sera lié au formulaire du template avec les attributs d'une formation
* C'est dans cet objet qu'est stockée la nouvelle formation
*/
demandeFormationForm = this.fb.group(
{
id:[0],
libelle: [""],
description: [],
demandeRH: [true],
dateDemande: [new Date()],
etatDemande: [EtatDemande.EnAttente],
origine: [""],
collaborateur: [""],
}
);
constructor(private fb: FormBuilder, private demandesFormationService: DemandesFormationService, private router: Router) { }
ngOnInit() {
this.origineDemandeSubscription = this.demandesFormationService.getOriginesDemandeFormation().subscribe(
originesDemandeFormation => this.originesDemandeFormation = originesDemandeFormation,
err => console.log(err)
);
}
ajouterDemandeFormation() {
this.demandeFormationSubscription = this.demandesFormationService.addDemandeFormation(this.demandeFormationForm.getRawValue()).subscribe(
response => {
console.log(response);
this.router.navigate(['/demandesformation',response["id"]]);
}
);
}
ngOnDestroy() {
if(this.demandeFormationSubscription != undefined) {
this.demandeFormationSubscription.unsubscribe();
}
ngOnInit() {
}
if(this.origineDemandeSubscription != undefined) {
this.origineDemandeSubscription.unsubscribe();
}
}
}

@ -24,6 +24,7 @@ import { OrigineDemandeFormationDTO } from '../model/origineDemandeFormationDTO'
import { BASE_PATH, COLLECTION_FORMATS } from '../variables';
import { Configuration } from '../configuration';
import { StatutEp } from '../model/statutEp';
@Injectable()
@ -165,6 +166,7 @@ export class DemandesFormationService {
* Récupérer la liste des demandes de formation.
* @param etatsDemande Liste des états des demandes à afficher
* @param idBUs liste des ids des BU auxquelles les données sont rattachées
* @param statutsEp Liste des statuts d&#x27;EP auxquelles les données sont rattachées
* @param asc Indique si les données sont récupérées dans l&#x27;ordre croissant ou non
* @param numPage Numéro de la page du tableau à afficher
* @param parPage Nombre délément maximum à afficher dans le tableau
@ -175,10 +177,10 @@ export class DemandesFormationService {
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
* @param reportProgress flag to report request and response progress.
*/
public getDemandesFormation(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, asc?: boolean, numPage?: number, parPage?: number, texte?: string, tri?: string, dateDebut?: Date, dateFin?: Date, observe?: 'body', reportProgress?: boolean): Observable<Array<DemandeFormationDTO>>;
public getDemandesFormation(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, asc?: boolean, numPage?: number, parPage?: number, texte?: string, tri?: string, dateDebut?: Date, dateFin?: Date, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<Array<DemandeFormationDTO>>>;
public getDemandesFormation(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, asc?: boolean, numPage?: number, parPage?: number, texte?: string, tri?: string, dateDebut?: Date, dateFin?: Date, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<Array<DemandeFormationDTO>>>;
public getDemandesFormation(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, asc?: boolean, numPage?: number, parPage?: number, texte?: string, tri?: string, dateDebut?: Date, dateFin?: Date, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
public getDemandesFormation(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, statutsEp?: Array<StatutEp>, asc?: boolean, numPage?: number, parPage?: number, texte?: string, tri?: string, dateDebut?: Date, dateFin?: Date, observe?: 'body', reportProgress?: boolean): Observable<Array<DemandeFormationDTO>>;
public getDemandesFormation(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, statutsEp?: Array<StatutEp>, asc?: boolean, numPage?: number, parPage?: number, texte?: string, tri?: string, dateDebut?: Date, dateFin?: Date, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<Array<DemandeFormationDTO>>>;
public getDemandesFormation(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, statutsEp?: Array<StatutEp>, asc?: boolean, numPage?: number, parPage?: number, texte?: string, tri?: string, dateDebut?: Date, dateFin?: Date, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<Array<DemandeFormationDTO>>>;
public getDemandesFormation(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, statutsEp?: Array<StatutEp>, asc?: boolean, numPage?: number, parPage?: number, texte?: string, tri?: string, dateDebut?: Date, dateFin?: Date, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
@ -200,6 +202,11 @@ export class DemandesFormationService {
queryParameters = queryParameters.append('idBUs', <any>element);
})
}
if (statutsEp) {
statutsEp.forEach((element) => {
queryParameters = queryParameters.append('statutsEp', <any>element);
})
}
if (asc !== undefined && asc !== null) {
queryParameters = queryParameters.set('asc', <any>asc);
}
@ -260,16 +267,24 @@ export class DemandesFormationService {
* Récupérer le nombre total de demandes de formation.
* @param etatsDemande Liste des états des demandes à afficher
* @param idBUs liste des ids des BU auxquelles les données sont rattachées
* @param statutsEp Liste des statuts d&#x27;EP auxquelles les données sont rattachées
* @param asc Indique si les données sont récupérées dans l&#x27;ordre croissant ou non
* @param numPage Numéro de la page du tableau à afficher
* @param parPage Nombre délément maximum à afficher dans le tableau
* @param texte Texte permettant de filtrer les données
* @param dateDebut Date à partir de laquelle les données son récupérées
* @param dateFin Date jusqu&#x27;à laquelle les données sont récupérées
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
* @param reportProgress flag to report request and response progress.
*/
public getDemandesFormationCount(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, texte?: string, dateDebut?: Date, dateFin?: Date, observe?: 'body', reportProgress?: boolean): Observable<number>;
public getDemandesFormationCount(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, texte?: string, dateDebut?: Date, dateFin?: Date, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<number>>;
public getDemandesFormationCount(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, texte?: string, dateDebut?: Date, dateFin?: Date, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<number>>;
public getDemandesFormationCount(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, texte?: string, dateDebut?: Date, dateFin?: Date, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
public getDemandesFormationCount(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, statutsEp?: Array<StatutEp>, asc?: boolean, numPage?: number, parPage?: number, texte?: string, tri?: string, dateDebut?: Date, dateFin?: Date, observe?: 'body', reportProgress?: boolean): Observable<number>;
public getDemandesFormationCount(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, statutsEp?: Array<StatutEp>, asc?: boolean, numPage?: number, parPage?: number, texte?: string, tri?: string, dateDebut?: Date, dateFin?: Date, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<number>>;
public getDemandesFormationCount(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, statutsEp?: Array<StatutEp>, asc?: boolean, numPage?: number, parPage?: number, texte?: string, tri?: string, dateDebut?: Date, dateFin?: Date, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<number>>;
public getDemandesFormationCount(etatsDemande?: Array<EtatDemande>, idBUs?: Array<number>, statutsEp?: Array<StatutEp>, asc?: boolean, numPage?: number, parPage?: number, texte?: string, tri?: string, dateDebut?: Date, dateFin?: Date, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
@ -287,6 +302,20 @@ export class DemandesFormationService {
queryParameters = queryParameters.append('idBUs', <any>element);
})
}
if (statutsEp) {
statutsEp.forEach((element) => {
queryParameters = queryParameters.append('statutsEp', <any>element);
})
}
if (asc !== undefined && asc !== null) {
queryParameters = queryParameters.set('asc', <any>asc);
}
if (numPage !== undefined && numPage !== null) {
queryParameters = queryParameters.set('numPage', <any>numPage);
}
if (parPage !== undefined && parPage !== null) {
queryParameters = queryParameters.set('parPAge', <any>parPage);
}
if (texte !== undefined && texte !== null) {
queryParameters = queryParameters.set('texte', <any>texte);
}

@ -12,7 +12,7 @@
import { CollaborateurDTO } from './collaborateurDTO';
import { EpInformationDTO } from './epInformationDTO';
import { EtatDemande } from './etatDemande';
import { FormationDTO } from './formationDTO';
import { FormationDetailsDTO } from './formationDetailsDTO';
import { OrigineDemandeFormationDTO } from './origineDemandeFormationDTO';
/**
@ -51,5 +51,5 @@ export interface DemandeFormationDTO {
origine?: OrigineDemandeFormationDTO;
collaborateur?: CollaborateurDTO;
ep?: EpInformationDTO;
formation?: FormationDTO;
formation?: FormationDetailsDTO;
}

@ -19,4 +19,15 @@ export const EtatDemande = {
EnAttente: 'EnAttente' as EtatDemande,
Validee: 'Validee' as EtatDemande,
Rejetee: 'Rejetee' as EtatDemande
};
};
export function afficherEtatDemande(etatDemande: EtatDemande) {
switch(etatDemande) {
case EtatDemande.Validee:
return "Validée";
case EtatDemande.Rejetee:
return "Rejetée";
case EtatDemande.EnAttente:
return "En attente";
}
}

@ -36,6 +36,10 @@ export function estEPDisponible (statut:StatutEp) {
return statut != StatutEp.Cree && statut != StatutEp.Disponible
}
export function estEPEnCours (statut:StatutEp) {
return statut != StatutEp.Annule && statut != StatutEp.Cree && statut != StatutEp.Rejete && statut != StatutEp.Signe
}
export function affichageStatut(statut: StatutEp) {
switch(statut) {
case StatutEp.Cree:

@ -0,0 +1,133 @@
<ng-container *ngIf="chargement">
<mat-spinner></mat-spinner>
</ng-container>
<ng-container *ngIf="!chargement">
<ng-container *ngIf="!estAffichageEP">
<!-- Barre de recherche -->
<mat-form-field>
<mat-label>Rechercher un collaborateur</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>
<!--Checkboxes des BU-->
<ng-container>
<select-filter
[dataSource]="bus"
[checkedAll]="true"
label="Business Unit"
propertyValueName="nom"
(isSelectedAllEvent)="updateAllBUs($event)"
(isSelectedEvent)="updateBUs($event.isSelected, $event.selectedElement)">
</select-filter>
</ng-container>
<!--Checkboxes des Etats engagement-->
<ng-container>
<select-filter
[dataSource]="etatsDemandesAffiches"
[checkedAll]="true"
label="Etats engagement"
(isSelectedAllEvent)="updateAllEtatsDemande($event)"
(isSelectedEvent)="updateEtatsDemande($event.isSelected, $event.selectedElement)">
</select-filter>
</ng-container>
<!--Checkboxes des Statuts d'EP-->
<ng-container>
<select-filter
[dataSource]="statutsEpAffiches"
[checkedAll]="true"
label="Statuts EP"
(isSelectedAllEvent)="updateAllStatutsEp($event)"
(isSelectedEvent)="updateStatutsEp($event.isSelected, $event.selectedElement)">
</select-filter>
</ng-container>
<ng-container>
<!-- Datepicker début -->
<mat-form-field >
<mat-label>Date de début</mat-label>
<input [(ngModel)]="dateDebut" matInput [matDatepicker]="dateDebutPicker" [max]="dateFin" disabled (dateChange)="updateDataSource()">
<mat-icon *ngIf="this.dateDebut != undefined" matDatepickerToggleIcon (click)="updateDateToUndefined(1)">clear</mat-icon>
<mat-datepicker-toggle matSuffix [for]="dateDebutPicker"></mat-datepicker-toggle>
<mat-datepicker touchUi #dateDebutPicker disabled="false"></mat-datepicker>
</mat-form-field>
<!-- Datepicker fin -->
<mat-form-field>
<mat-label>Date de fin</mat-label>
<input [(ngModel)]="dateFin" matInput [matDatepicker]="dateFinPicker" [min]="dateDebut" disabled (dateChange)="updateDataSource()">
<mat-icon *ngIf="this.dateFin != undefined" matDatepickerToggleIcon (click)="updateDateToUndefined(2)">clear</mat-icon>
<mat-datepicker-toggle matSuffix [for]="dateFinPicker"></mat-datepicker-toggle>
<mat-datepicker touchUi #dateFinPicker disabled="false"></mat-datepicker>
</mat-form-field>
</ng-container>
</ng-container>
<ng-container *ngIf="taille == 0">
<p>Aucune demande de formation à afficher</p>
</ng-container>
<ng-container *ngIf="taille != 0">
<mat-table matSort [dataSource]="dataSource" (matSortChange)="triTableau($event)" matSortActive="{{this.tri}}" matSortDirection="asc" >
<ng-container matColumnDef="businessunit">
<mat-header-cell *matHeaderCellDef mat-sort-header >Agence</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.ep.collaborateur.businessUnit.nom}}</mat-cell>
</ng-container>
<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">
{{row.collaborateur.nom}} {{row.collaborateur.prenom}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="datedemande">
<mat-header-cell *matHeaderCellDef mat-sort-header>Date demande</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.dateDemande | date :'dd/MM/yyyy'}}</mat-cell>
</ng-container>
<ng-container matColumnDef="demanderh">
<mat-header-cell *matHeaderCellDef mat-sort-header>Demande RH</mat-header-cell>
<mat-cell *matCellDef="let row">{{afficherDemandeRH(row.demandeRH)}}</mat-cell>
</ng-container>
<ng-container matColumnDef="ep">
<mat-header-cell *matHeaderCellDef mat-sort-header>EP</mat-header-cell>
<ng-container *matCellDef="let row">
<!-- Lien vers l'EP -->
<mat-cell *ngIf="row.ep" [routerLink]="['/ep',row.ep.id]">
<p>Consulter EP</p>
</mat-cell>
</ng-container>
</ng-container>
<ng-container matColumnDef="etat">
<mat-header-cell *matHeaderCellDef mat-sort-header>Réponse</mat-header-cell>
<mat-cell *matCellDef="let row">{{afficherEtat(row.etatDemande)}}</mat-cell>
</ng-container>
<ng-container matColumnDef="datereponse">
<mat-header-cell *matHeaderCellDef mat-sort-header>Date réponse</mat-header-cell>
<ng-container *matCellDef="let row">
<mat-cell *ngIf="row.dateDerniereReponse">{{row.dateDerniereReponse | date :'dd/MM/yyyy'}}</mat-cell>
<mat-cell *ngIf="!row.dateDerniereReponse">{{row.dateDerniereReponse}}</mat-cell>
</ng-container>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="emitEvent(row)"></mat-row>
</mat-table>
<mat-paginator *ngIf="!estAffichageEP" #paginator
[length] = "taille"
[pageIndex]="numPage-1"
[pageSize]="parPage"
[pageSizeOptions]="pageOption"
(page)="updatePageInfo($event)">
</mat-paginator>
</ng-container>
</ng-container>

@ -0,0 +1,372 @@
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { MatTableDataSource } from "@angular/material/table";
import { BusinessUnitDTO, CollaborateurDTO, DemandesFormationService, EtatDemande, afficherEtatDemande, DemandeFormationDTO, StatutEp, estEPEnCours } from "@shared/api-swagger";
import { cles } from "@shared/utils/cles";
import { DemandesFormationsRoutingModule } from "app/demandes-formation/demandes-formation.routing.module";
import { Subscription } from "rxjs";
@Component({
selector: "demandes-formation-table",
templateUrl: "./demandes-formation.table.html"
})
export class DemandesFormationTableComponent implements OnInit {
chargement : boolean = true;
/**
* * Ordre de tri à envoyer au serveur (true : croissant, false : décroissantà).
*/
asc : boolean = true;
/**
* Numéro de la page à afficher dans le tableau.
*/
numPage: number = 1;
/**
* Nombre d'élément du tableau à affiche en une page.
*/
parPage: number = 15;
/**
* Nombre total d'élément du tableau
*/
taille: number = 0;
/**
* Liste des business units du collaborateur connecté
*/
bus: Array<BusinessUnitDTO> = [];
/**
* contenu de la recherche pour trouver un collaborateur.
*/
search: string = "";
/**
* Options pour choisir le nombre de page à affiche
*/
pageOption = [ 5, 15, 20, 30, 50];
/**
* Permet de savoir sur quelle attribut d'un CollaborateurDTO doit être trié le tableau.
*/
tri: string = "collaborateur";
/**
* Liste des id des business units des collaborateurs à afficher
*/
private busIds: Array<number> = [];
/**
* Liste des tous les états demandes
*/
etatsDemandes: Array<EtatDemande> = [
EtatDemande.EnAttente, EtatDemande.Validee,
EtatDemande.Rejetee
];
etatsDemandesAffiches: Array<EtatDemande> = [
EtatDemande.EnAttente, EtatDemande.Validee,
EtatDemande.Rejetee
];
/**
* Liste des tous les statuts d'EP
*/
allStatutsEp: Array<StatutEp> = [
StatutEp.Cree, StatutEp.Disponible,
StatutEp.Saisi, StatutEp.DatesProposees,
StatutEp.AttenteEntretien, StatutEp.Effectue,
StatutEp.SignatureReferent, StatutEp.Signe,
StatutEp.Rejete, StatutEp.Annule
];
statutsEp: Array<StatutEp> = [
StatutEp.Cree, StatutEp.Disponible,
StatutEp.Saisi, StatutEp.DatesProposees,
StatutEp.AttenteEntretien, StatutEp.Effectue,
StatutEp.SignatureReferent, StatutEp.Signe,
StatutEp.Rejete, StatutEp.Annule
];
statutsEpAffiches: Array<string> = [
'Annulé','En cours', 'Rejeté', 'Signé'
];
/**
* Date à partir de laquelle les demandes de formation doivent être récupérées en fonction de leur date de demande
*/
dateDebut: Date = undefined;
/**
* Date jusqu'à laquelle les demandes de formation doivent être récupérées en fonction de leur date de demande
*/
dateFin: Date = undefined;
/**
* Liste des colonnes du tableau à afficher.
*/
@Input() displayedColumns : string[] = [];
@Input() estAffichageEP: boolean = false;
@Input() demandesFormation: DemandeFormationDTO[] = [];
@Output() eventEmitter: EventEmitter<any> = new EventEmitter<any>();
dataSource: MatTableDataSource<DemandeFormationDTO>;
demandesFormationSubscription: Subscription;
demandesFormationCountSubscription: Subscription;
etatsDemandesSubscription: Subscription;
constructor(private demandeFormationService: DemandesFormationService) {}
ngOnInit() {
if(this.estAffichageEP) {
this.taille = this.demandesFormation.length;
this.dataSource = new MatTableDataSource(this.demandesFormation);
}
else
this.setBUsId();
}
emitEvent(demande: DemandesFormationsRoutingModule) {
if(this.eventEmitter != null)
this.eventEmitter.emit(demande);
}
updateDataSource() {
if(this.busIds.length == 0 || this.etatsDemandes.length == 0 || this.statutsEp.length == 0) {
this.taille = 0;
this.dataSource = new MatTableDataSource(undefined);
return;
}
this.demandesFormationSubscription = this.demandeFormationService.getDemandesFormation(this.etatsDemandes, this.busIds, this.statutsEp, this.asc, this.numPage, this.parPage, this.search, this.tri, this.dateDebut, this.dateFin).subscribe(
demandesFormation => this.dataSource = new MatTableDataSource(demandesFormation),
err => console.log(err)
);
this.demandesFormationCountSubscription = this.demandeFormationService.getDemandesFormationCount(this.etatsDemandes, this.busIds, this.statutsEp, this.asc, this.numPage, this.parPage, this.search, this.tri, this.dateDebut, this.dateFin).subscribe(
count => this.taille = count,
err => console.log(err)
);
}
afficherDemandeRH(demandeRH: boolean) {
if (demandeRH)
return 'Oui';
else
return 'Non'
}
afficherEtat(etat: EtatDemande) {
return afficherEtatDemande(etat);
}
/**
* création de la liste des business unit du collaborateur connecté pour afficher les checkboxes
*/
setBUsId() {
if(sessionStorage.getItem(cles.sessionKeyConnectee) == undefined){
setTimeout( () => this.setBUsId(), 1000);
}
else {
const collaborateurConnecte : CollaborateurDTO = JSON.parse(sessionStorage.getItem(cles.sessionKeyConnectee));
this.bus = collaborateurConnecte.businessUnit.agence.bu;
for(let bu of this.bus) {
this.busIds.push(bu.id);
}
this.updateDataSource();
this.chargement = false;
}
}
setSearch() {
this.numPage = 1;
this.updateDataSource();
}
resetSearch() {
this.search = "";
this.setSearch();
}
/**
* Trier le tableau en fonction de l'évènement de la colonne
* @param e évènement du tri
*/
triTableau(e) {
this.tri = e.active;
switch(e.direction) {
case "asc":
this.asc = true;
break;
case "desc":
this.asc = false;
break;
}
this.updateDataSource();
}
/**
* Mettre à jour le nombre d'élément à afficher par page et le numéro de la page
* @param event évènement de la pagination
*/
updatePageInfo(event){
this.parPage = event.pageSize;
this.numPage = event.pageIndex+1;
this.updateDataSource();
}
/**
* Mettre à jour toutes les checkbox des états d'engagement
* @param event case cochée ou décochée
*/
updateAllEtatsDemande(event) {
this.etatsDemandes = [];
// si la checkbox a été cochée
if(event)
this.etatsDemandes = this.etatsDemandesAffiches.map(e => e);
else
this.etatsDemandes = [];
this.setSearch();
}
/**
* Mettre à jour la liste des etats de demande
* @param event
* @param etat
*/
updateEtatsDemande(event:boolean, etat:EtatDemande) {
if(event) {
this.etatsDemandes.push(etat);
}
else
this.etatsDemandes = this.etatsDemandes.filter( e => etat != e);
this.setSearch();
}
getStatutsEpEnCours() {
return [ StatutEp.AttenteEntretien, StatutEp.DatesProposees,
StatutEp.Disponible, StatutEp.Effectue,
StatutEp.Saisi, StatutEp.SignatureReferent ];
}
/**
* Mettre à jour toutes les checkbox des statuts d'EP
* @param event case cochée ou décochée
*/
updateAllStatutsEp(event) {
this.statutsEp = [];
// si la checkbox a été cochée
if(event)
this.statutsEp = this.allStatutsEp;
else
this.statutsEp = [];
this.setSearch();
}
/**
* Mettre à jour la liste des statuts d'EP
* @param event
* @param statutEpAffiche
*/
updateEt
updateStatutsEp(event:boolean, statutEpAffiche:string) {
if(event) {
this.addStatutsEp(statutEpAffiche);
}
else {
this.removeStatutsEp(statutEpAffiche);
}
this.setSearch();
}
addStatutsEp(statutEpAffiche:string) {
switch(statutEpAffiche) {
case "Annulé":
this.statutsEp.push(StatutEp.Annule);
break;
case "En cours":
const statutsEpEnCoursOuCree = this.allStatutsEp.filter(s => estEPEnCours(s) || s == StatutEp.Cree);
this.statutsEp = this.statutsEp.concat(statutsEpEnCoursOuCree);
break;
case "Rejeté":
this.statutsEp.push(StatutEp.Rejete);
break;
case "Signé":
this.statutsEp.push(StatutEp.Signe);
break;
}
}
removeStatutsEp(statutEpAffiche:string) {
switch(statutEpAffiche) {
case "Annulé":
this.statutsEp = this.statutsEp.filter(s => s != StatutEp.Annule)
break;
case "En cours":
this.statutsEp = this.statutsEp.filter(s => !estEPEnCours(s) && s != StatutEp.Cree)
break;
case "Rejeté":
this.statutsEp = this.statutsEp.filter(s => s != StatutEp.Rejete)
break;
case "Signé":
this.statutsEp = this.statutsEp.filter(s => s != StatutEp.Signe)
break;
}
}
/**
* Mettre à jour toutes les checkbox des BU
* @param event case cochée ou décochée
*/
updateAllBUs(event) {
this.busIds = [];
// si la checkbox a été cochée
if(event)
this.bus.map(bu => this.busIds.push(bu.id));
else
this.busIds = [];
this.setSearch();
}
updateBUs(event, bu) {
// si la checkbox a été cochée
if(event) {
this.busIds.push(bu.id)
}
else{
this.busIds = this.busIds.filter( (id) => id != bu.id);
}
this.setSearch();
}
/**
* Mettre à undefined la date de début ou la date de fin
* @param val Valeur pour indiquer quel variable doit être mis à undefined
*/
updateDateToUndefined(val : number) {
if(val == 1)
this.dateDebut = undefined;
if(val == 2)
this.dateFin = undefined;
this.updateDataSource();
}
ngOnDestroy() {
if(this.demandesFormationSubscription != undefined) {
this.demandesFormationSubscription.unsubscribe();
}
if(this.demandesFormationCountSubscription != undefined) {
this.demandesFormationCountSubscription.unsubscribe();
}
}
}

@ -10,6 +10,7 @@ import { FormationsTableComponent } from "@shared/mat-tables/formations-table/fo
import { ParticipationsFormationTableComponent } from "@shared/mat-tables/participations-formation-table/participations-formation.table";
import { FilterModule } from "@shared/filter/filter.module";
import { EpTableComponent } from "./ep-table/ep-table";
import { DemandesFormationTableComponent } from "@shared/mat-tables/demandes-formation-table/demandes-formation.table";
@NgModule({
@ -18,7 +19,8 @@ import { EpTableComponent } from "./ep-table/ep-table";
EngagementTableComponent,
FormationsTableComponent ,
EpTableComponent,
ParticipationsFormationTableComponent
ParticipationsFormationTableComponent,
DemandesFormationTableComponent
],
imports: [
MaterialModule,
@ -32,7 +34,8 @@ import { EpTableComponent } from "./ep-table/ep-table";
EngagementTableComponent,
FormationsTableComponent,
EpTableComponent,
ParticipationsFormationTableComponent
ParticipationsFormationTableComponent,
DemandesFormationTableComponent
]
})
export class MatTablesModule {}

Loading…
Cancel
Save