Ajout dun module ep-table

src/app/shared/mat-tables/ep-table/ep-table.html

@@ -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>

src/app/shared/mat-tables/ep-table/ep-table.ts

@@ -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();
+        }
+    }
+}

src/app/shared/mat-tables/mat-tables.module.ts

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

src/app/shared/utils/cles.ts

@@ -12,4 +12,9 @@ export const engagementTypeRecherche = {
     saisieEP: "saisieEP",
     consultationEP: "consultationEP",
     engagementsRH: "engagementRH"
+}
+
+export const epTypeRecherche = {
+    EPEnCours: "EPEnCours",
+    EPSignes: "EPSignes"
 }