Yanaël GRETTE
4 years ago
commit
283663f9cb
@ -1,39 +1,3 @@ |
||||
<app-nav-menu></app-nav-menu> |
||||
|
||||
<affichage-details-collaborateur [idCollaborateur]="idCollaborateur"></affichage-details-collaborateur> |
||||
<!-- |
||||
<ng-container *ngIf= "eploaded && nbEP==0"> |
||||
<h3> Aucun EP effectué encore </h3> |
||||
</ng-container> |
||||
|
||||
<ng-container *ngIf= "eploaded && nbEP>0"> |
||||
Affichage de la liste des EP effectués |
||||
<h3>Liste des précédents EP</h3> |
||||
<mat-table [dataSource]="this.dataSource" matSort> |
||||
<ng-container matColumnDef="dateentretien"> |
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Date entretient</mat-header-cell> |
||||
<mat-cell *matCellDef="let row">{{ row.datePrevisionnelle }}</mat-cell> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="referent"> |
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Référent</mat-header-cell> |
||||
<mat-cell *matCellDef="let row"> {{ getReferent(row.referent) }}</mat-cell> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="type"> |
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell> |
||||
<mat-cell *matCellDef="let row">{{ row.type }}</mat-cell> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="details"> |
||||
<mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell> |
||||
|
||||
<mat-cell *matCellDef="let row" [routerLink]="['/ep',row.id]"> Voir détails EP </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> |
||||
|
||||
--> |
||||
@ -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,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(); |
||||
} |
||||
|
||||
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(); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,13 @@ |
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "./out-tsc/app", |
||||
"types": [] |
||||
}, |
||||
"exclude": [ |
||||
"src/test.ts", |
||||
"src/**/*.spec.ts", |
||||
"src/app/file-to-exclude.ts" |
||||
] |
||||
|
||||
} |
||||
Loading…
Reference in new issue