Ajout dun module ep-table

develop
Yanaël GRETTE 4 years ago
parent fa5159a3a9
commit 011bfd8814
  1. 0
      src/app/shared/mat-tables/ep-table/ep-table.css
  2. 123
      src/app/shared/mat-tables/ep-table/ep-table.html
  3. 251
      src/app/shared/mat-tables/ep-table/ep-table.ts
  4. 7
      src/app/shared/mat-tables/mat-tables.module.ts
  5. 5
      src/app/shared/utils/cles.ts

@ -0,0 +1,123 @@
<ng-container *ngIf="chargement">
<mat-spinner></mat-spinner>
</ng-container>
<ng-container *ngIf="!chargement">
<mat-form-field>
<mat-label>Rechercher une 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>
<ng-container *ngIf="rechercherParBU">
<select-filter
[dataSource]="bus"
[checkedAll]="false"
label="BU"
propertyValueName="nom"
(isSelectedAllEvent)="updateAllCheckbox($event)"
(isSelectedEvent)="updateCheckbox($event.isSelected, $event.selectedElement)">
</select-filter>
<checkbox-filter
[dataSource]="bus"
[checkedAll]="false"
propertyValueName="nom"
(isSelectedAllEvent)="updateAllCheckbox($event)"
(isSelectedEvent)="updateCheckbox($event.isSelected, $event.selectedElement)">
</checkbox-filter>
</ng-container>
<ng-container *ngIf="rechercherParDate">
<!-- 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>
<mat-table matSort [dataSource]="dataSource" (matSortChange)="triTableau($event)" matSortDirection="asc">
<ng-container matColumnDef="agence">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear>
Business Unit
<checkbox-filter
[dataSource]="bus"
[checkedAll]="false"
propertyValueName="nom"
(isSelectedAllEvent)="updateAllCheckbox($event)"
(isSelectedEvent)="updateCheckbox($event.isSelected, $event.selectedElement)">
</checkbox-filter>
</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.collaborateur.businessUnit.nom}} </mat-cell>
</ng-container>
<ng-container matColumnDef="collaborateur">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear>Collaborateur</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.collaborateur.nom}} {{row.collaborateur.prenom}} </mat-cell>
</ng-container>
<ng-container matColumnDef="referent">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear>Référent</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.referent.nom}} {{row.referent.prenom}}</mat-cell>
</ng-container>
<ng-container matColumnDef="datearrivee">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear>Date d'embauche</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.collaborateur.datearrivee | date : 'dd/MM/yyyy'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="statutep">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear>Staut de l'EP</mat-header-cell>
<mat-cell *matCellDef="let row"> {{ afficherStatutEP(row.statut)}} </mat-cell>
</ng-container>
<ng-container matColumnDef="typeep">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear>Type EP</mat-header-cell>
<mat-cell *matCellDef="let row"> {{ afficherTypeEP(row.type) }}</mat-cell>
</ng-container>
<ng-container matColumnDef="dateentretien">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear>Date prévisionnelle</mat-header-cell>
<mat-cell *matCellDef="let row"> {{ row.dataPrevisionnelle | date : 'dd/MM/yyyy'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="datedisponibilite">
<mat-header-cell *matHeaderCellDe></mat-header-cell>
<mat-cell *matCellDef="let row"> {{ row.dateDisponibilite | date : 'dd/MM/yyyy'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="consultation">
<mat-header-cell *matHeaderCellDe mat-sort-header disableClear></mat-header-cell>
<mat-cell *matCellDef="let row"> Consulter EP </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator #paginator
[length] = "taille"
[pageIndex]="numPage-1"
[pageSize]="parPage"
[pageSizeOptions]="pageOption"
(page)="updatePageInfo($event)"
>
</mat-paginator>
</ng-container>

@ -0,0 +1,251 @@
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { MatTableDataSource } from "@angular/material/table";
import { BusinessUnitDTO, CollaborateurDTO, EpInformationDTO, EpService, StatutEp, TypeEp } from "@shared/api-swagger";
import { cles, epTypeRecherche } from "@shared/utils/cles";
import { Subscription } from "rxjs";
@Component({
selector: "ep-table",
templateUrl: "./ep-table.html"
})
export class EpTableComponent 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 = "dateprevisionnelle";
/**
* Liste des id des business units des collaborateurs à afficher
*/
private busIds: Array<number> = [];
dateDebut : Date;
dateFin: Date;
dataSource : MatTableDataSource<EpInformationDTO>;
@Input() typeRechercheEP : string;
@Input() displayedColumns: string[];
@Input() rechercherParBU: boolean = true;
@Input() rechercherParDate: boolean = true;
@Output() eventEmitter: EventEmitter<EpInformationDTO>;
epSubscription: Subscription;
epCountSubscription: Subscription;
constructor(private epService: EpService) {}
ngOnInit() {
this.setBUsId();
}
updateDataSource() {
switch(this.typeRechercheEP) {
case epTypeRecherche.EPEnCours:
this.getEPEnCours();
break;
case epTypeRecherche.EPSignes:
this.getEPEnSignes();
break;
}
}
getEPEnCours() {
this.epSubscription = this.epService.getEPEnCours(this.busIds, this.asc, this.numPage, this.parPage, this.search, this.tri, this.dateDebut, this.dateFin).subscribe(
eps => {
this.dataSource = new MatTableDataSource(eps);
this.epCountSubscription = this.epService.getEPEnCoursCount(this.busIds, this.asc, this.numPage, this.parPage, this.search, this.tri, this.dateDebut, this.dateFin).subscribe(
count => this.taille = count,
err => console.log(err)
);
},
err => console.log(err)
);
}
getEPEnSignes() {
this.epSubscription = this.epService.getEPSignes(this.busIds, this.asc, this.numPage, this.parPage, this.search, this.tri, this.dateDebut, this.dateFin).subscribe(
eps => {
this.dataSource = new MatTableDataSource(eps);
this.epCountSubscription = this.epService.getEPSignesCount(this.busIds, this.asc, this.numPage, this.parPage, this.search, this.tri, this.dateDebut, this.dateFin).subscribe(
count => this.taille = count,
err => console.log(err)
);
},
err => console.log(err)
);
}
/**
* 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;
}
}
/**
* Mettre à undefined la date de début ou la date de fin
* @param val Valeur pour inidiquer quel variable doit être mis à undefined
*/
updateDateToUndefined(val : number) {
if(val == 1)
this.dateDebut = undefined;
if(val == 2)
this.dateFin = undefined;
this.updateDataSource();
}
/**
* Mettre à jour le nomre 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();
}
/**
* Remettre au début la liste lors d'une recherche via la barre de recherche
*/
setSearch() {
this.numPage = 1;
this.updateDataSource();
}
/**
* Vider la barre de recherche et remettre le tableau à la première page
*/
resetSearch() {
this.search = "";
this.setSearch();
}
afficherStatutEP(statut: StatutEp) {
return "statut";
}
afficherTypeEP(type: TypeEp) {
return "typeEP"
}
/**
* Mettre à jour toutes les checkox
* @param event case cochée ou décochée
* */
updateAllCheckbox(event) {
this.busIds = [];
// si la checkbox a été cochée
if(event)
this.bus.map(statut => this.busIds.push(statut.id));
else
this.busIds = [];
this.numPage = 1;
this.updateDataSource();
}
/**
* Mettre à jour la liste des
* @param event case cochée ou décochée
* @param bu business unit concerné par la checkbox cochée ou décochée
*/
updateCheckbox(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.numPage = 1;
this.updateDataSource();
}
/**
* 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();
}
ngDestroy() {
if(!this.epSubscription != undefined) {
this.epSubscription.unsubscribe();
}
if(!this.epCountSubscription != undefined) {
this.epCountSubscription.unsubscribe();
}
}
}

@ -8,13 +8,15 @@ import { CollaborateursTableComponent } from "@shared/mat-tables/collaborateurs-
import { EngagementTableComponent } from "@shared/mat-tables/engagements-table/engagements-table" import { EngagementTableComponent } from "@shared/mat-tables/engagements-table/engagements-table"
import { FormationsTableComponent } from "@shared/mat-tables/formations-table/formations.table"; import { FormationsTableComponent } from "@shared/mat-tables/formations-table/formations.table";
import { FilterModule } from "@shared/filter/filter.module"; import { FilterModule } from "@shared/filter/filter.module";
import { EpTableComponent } from "./ep-table/ep-table";
@NgModule({ @NgModule({
declarations: [ declarations: [
CollaborateursTableComponent, CollaborateursTableComponent,
EngagementTableComponent, EngagementTableComponent,
FormationsTableComponent FormationsTableComponent ,
EpTableComponent,
], ],
imports: [ imports: [
MaterialModule, MaterialModule,
@ -26,7 +28,8 @@ import { FilterModule } from "@shared/filter/filter.module";
exports: [ exports: [
CollaborateursTableComponent, CollaborateursTableComponent,
EngagementTableComponent, EngagementTableComponent,
FormationsTableComponent FormationsTableComponent,
EpTableComponent
] ]
}) })
export class MatTablesModule {} export class MatTablesModule {}

@ -13,3 +13,8 @@ export const engagementTypeRecherche = {
consultationEP: "consultationEP", consultationEP: "consultationEP",
engagementsRH: "engagementRH" engagementsRH: "engagementRH"
} }
export const epTypeRecherche = {
EPEnCours: "EPEnCours",
EPSignes: "EPSignes"
}
Loading…
Cancel
Save