commit
1fc5aa7752
@ -1,2 +1,3 @@ |
|||||||
<app-nav-menu></app-nav-menu> |
<app-nav-menu></app-nav-menu> |
||||||
<h1>Liste des demandes de formation </h1> |
<h1>Liste des demandes de formation </h1> |
||||||
|
<demandes-formation-table [displayedColumns]="displayedColumns" (eventEmitter)="afficherDetailDemandeFormation($event)"></demandes-formation-table> |
||||||
|
|||||||
@ -1,35 +1,40 @@ |
|||||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; |
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; |
||||||
import { FormsModule } from '@angular/forms'; |
|
||||||
import { RouterModule } from '@angular/router'; |
import { RouterModule } from '@angular/router'; |
||||||
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; |
||||||
|
|
||||||
|
|
||||||
import { NgModule } from "@angular/core"; |
import { NgModule } from "@angular/core"; |
||||||
import { CommonModule } from "@angular/common"; |
import { CommonModule } from "@angular/common"; |
||||||
|
|
||||||
import { MaterialModule } from "@shared/angular-material/angular-material.module"; |
import { MaterialModule } from "@shared/angular-material/angular-material.module"; |
||||||
|
|
||||||
import {NavMenuModule} from '@shared/nav-menu/nav-menu.module'; |
import {NavMenuModule} from '@shared/nav-menu/nav-menu.module'; |
||||||
|
|
||||||
import { DemandesFormationComponent } from './demandes-formation.component'; |
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 { DemandeFormationComponent } from './details-demande-formation/demande-formation.component' |
||||||
import { NewDemandeFormationComponent } from './new-demande-formation/new-demande-formation.component' |
import { NewDemandeFormationComponent } from './new-demande-formation/new-demande-formation.component' |
||||||
import { DemandesFormationsRoutingModule } from './demandes-formation.routing.module'; |
import { DemandesFormationsRoutingModule } from './demandes-formation.routing.module'; |
||||||
|
import { MatTablesModule } from "@shared/mat-tables/mat-tables.module"; |
||||||
|
|
||||||
/** |
/** |
||||||
* Module demandes formation |
* Module demandes formation |
||||||
*/ |
*/ |
||||||
@NgModule({ |
@NgModule({ |
||||||
declarations: [ DemandesFormationComponent, DemandeFormationComponent, |
declarations: [ DemandesFormationComponent, DialogDemandeFormationComponent, DemandeFormationComponent, |
||||||
NewDemandeFormationComponent |
NewDemandeFormationComponent |
||||||
], |
], |
||||||
exports: [ |
exports: [ |
||||||
DemandesFormationComponent |
DemandesFormationComponent |
||||||
], |
], |
||||||
imports: [ |
imports: [ |
||||||
|
CommonModule, |
||||||
MaterialModule, |
MaterialModule, |
||||||
NavMenuModule, |
NavMenuModule, |
||||||
DemandesFormationsRoutingModule, |
DemandesFormationsRoutingModule, |
||||||
RouterModule |
MatTablesModule, |
||||||
|
RouterModule, |
||||||
|
FormsModule, |
||||||
|
ReactiveFormsModule |
||||||
], |
], |
||||||
}) |
}) |
||||||
export class DemandesFormationModule {} |
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> |
<app-nav-menu></app-nav-menu> |
||||||
<h1> Nouvelle demande de formation </h1> |
<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 { 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. |
* Composant qui sert à créer une demande de formation pour un collaborateur. |
||||||
*/ |
*/ |
||||||
@Component({ |
@Component({ |
||||||
selector: 'app-new-demande-formation', |
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 { |
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(); |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
@ -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(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue