Implémentation de la table des engagements

src/app/shared/affichage-details-collaboarteur/dialog-assignation-rapide/dialog-assignation-rapide.component.ts

@@ -56,7 +56,7 @@ export class DialogAssignationRapideReferentComponent {
         this.dialogRef.close();
     }
 
-    onDestroy() {
+    ngOnDestroy() {
         if(this.referentEPSubscription != undefined) {
             this.referentEPSubscription.unsubscribe();
         }
@@ -157,7 +157,7 @@ export class DialogAssignationRapideCollaborateursComponent implements OnInit{
         this.dialogRef.close();
     }
 
-    onDestroy() {
+    ngOnDestroy() {
         if(this.referentEPSubscription != undefined) {
             this.referentEPSubscription.unsubscribe();
         }

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

@@ -0,0 +1,95 @@
+<ng-container *ngIf="chargement">
+    <mat-spinner></mat-spinner>
+</ng-container>
+
+<ng-container *ngIf="!chargement">
+    <ng-container *ngIf="!estSaisieEP">
+        <!-- Barre de recherche -->
+        <mat-form-field>
+            <mat-label>Rechercher un collaborateur</mat-label>
+            <input matInput type="text" [(ngModel)]="search" (keyup)="setSearch()">
+            <mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="resetSearch()">
+            <mat-icon>close</mat-icon>
+            </mat-button>
+        </mat-form-field>
+
+        <!--Checkboxes des BU-->
+        <ng-container>
+            <mat-checkbox *ngFor="let bu of bus" (change)="updateCheckbox($event.checked,bu)" [checked]="true"> {{bu.nom}}</mat-checkbox>
+        </ng-container>
+
+        <!--Checkboxes des Etats engagement-->
+        <ng-container>
+            <mat-checkbox *ngFor="let etat of etatsEngagements" (change)="updateEtatsEngagement($event.checked,etat)" [checked]="true"> {{afficherEtat(etat)}}</mat-checkbox>
+        </ng-container>
+    </ng-container>
+
+    <ng-container *ngIf="taille == 0">
+        <p>Aucun engagements à afficher</p>
+    </ng-container>
+
+    <ng-container *ngIf="taille != 0">
+        <mat-table>
+            <ng-container matColumnDef="businessunit">
+                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>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 *matHeaderCellDef mat-sort-header disableClear>Collaborateur</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{row.ep.collaborateur.nom}} {{row.ep.collaborateur.prenom}}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="action">
+                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Action</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{row.action}}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="dispotitif">
+                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Dispositif</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{row.dispotitif}}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="modalite">
+                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Modalité</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{row.modalite}}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="datelimite">
+                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Date limite</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{row.dateLimite}}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="etat">
+                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Etat engagement</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{afficherEtat(row.etatEngagement)}}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="ep">
+                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>EP</mat-header-cell>
+                <mat-cell *matCellDef="let row">Voir EP</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="reponse">
+                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear></mat-header-cell>
+                <mat-cell *matCellDef="let row">Mettre à jour l'engagement</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="supprimer">
+                <mat-header-cell *matHeaderCellDef mat-sort-header disableClear></mat-header-cell>
+                <mat-cell *matCellDef="let row">Supprimer l'engagement</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 *ngIf="!estSaisieEP" #paginator 
+            [length] = "taille"
+            [pageIndex]="numPage-1"
+            [pageSize]="parPage"
+            [pageSizeOptions]="pageOption"
+            (page)="updatePageInfo($event)">
+        </mat-paginator>
+    </ng-container>
+
+</ng-container>

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

@@ -0,0 +1,191 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { MatTableDataSource } from "@angular/material/table";
+import { BusinessUnitDTO, CollaborateurDTO, EngagementDTO, EngagementsService, EtatEngagement } from "@shared/api-swagger";
+import { cles, engagementTypeRecherche } from "@shared/utils/cles";
+import { Subscription } from "rxjs";
+
+
+@Component({
+    selector: "engagements-table",
+    templateUrl: "./engagements-table.html"
+})
+export class EngagementTableComponent 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 engagements
+     */
+    etatsEngagements: Array<EtatEngagement> = [
+        EtatEngagement.EnAttente, EtatEngagement.DateLimitePassee,
+        EtatEngagement.NonRealisable, EtatEngagement.Respecte
+    ];
+
+    /**
+        * Liste des colonnes du tableau à afficher.
+        */
+    @Input() displayedColumns : string[];
+    @Input() estSaisieEP: boolean = false;
+    @Input() engagementsSaisis: EngagementDTO[] = [];
+
+    @Output() eventEmitter: EventEmitter<any> = new EventEmitter<any>();
+
+    dataSource: MatTableDataSource<EngagementDTO>;
+    engagementSubscription: Subscription;
+    engagementCountSubscripton: Subscription;
+    etatsEngagementsSubscription: Subscription;
+
+    constructor(private engagementService: EngagementsService) {}
+
+    ngOnInit() {
+        if(this.estSaisieEP) {
+            this.taille = this.engagementsSaisis.length;
+            this.dataSource = new MatTableDataSource(this.engagementsSaisis);
+        }
+        else
+            this.setBUsId();
+    }
+
+
+    updateDataSource() {
+        if(this.busIds.length == 0) {
+            this.taille = 0;
+            this.dataSource = new MatTableDataSource(undefined);
+        }
+        this.engagementSubscription = this.engagementService.getEngagements(this.etatsEngagements, this.busIds, this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
+            engagements => this.dataSource = new MatTableDataSource(engagements),
+            err => console.log(err)
+        );
+
+        this.engagementCountSubscripton = this.engagementService.getEngagementsCount(this.etatsEngagements, this.busIds, this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
+            count => this.taille = count,
+            err => console.log(err)
+        );
+    }
+
+    afficherEtat(etat: EtatEngagement) {
+        switch(etat) {
+            case EtatEngagement.Respecte:
+                return "Respecté";
+            case EtatEngagement.NonRealisable:
+                return "Non réalisable";
+            case EtatEngagement.EnAttente:
+                return "En attente";
+            case EtatEngagement.DateLimitePassee:
+                return "Date limite passée";
+        }
+    }
+
+    /**
+       * 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();
+    }
+
+    /**
+       * 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();
+    }
+
+    updateEtatsEngagement(event:boolean, etat:EtatEngagement) {
+        if(event) {
+            this.etatsEngagements.push(etat);
+        }
+        else
+            this.etatsEngagements
+    }
+
+    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();
+      }
+
+    ngOnDestroy() {
+        if(this.engagementSubscription != undefined) {
+            this.engagementSubscription.unsubscribe();
+        }
+        if(this.engagementCountSubscripton != undefined) {
+            this.engagementCountSubscripton.unsubscribe();
+        }
+    }
+}

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

@@ -4,11 +4,11 @@ import { FormsModule } from '@angular/forms';
 
 import { MaterialModule } from "../angular-material/angular-material.module";
 import { CollaborateursTableComponent } from "@shared/mat-tables/collaborateurs-table/collaborateurs.table";
-
+import { EngagementTableComponent } from "@shared/mat-tables/engagements-table/engagements-table"
 
 @NgModule({
   declarations: [ 
-    CollaborateursTableComponent 
+    CollaborateursTableComponent, EngagementTableComponent
   ],
   imports: [
     MaterialModule,

src/app/shared/utils/cles.ts

@@ -2,9 +2,14 @@ export const cles = {
     sessionKeyConnectee : "collaborateurConnecte",
 }
 
-
 export const collaborateurTypeRecherche = {
     collaborateurs: "collaborateurs",
     referents: "referents",
     collaborateursEP: "collaborateursEP"
+}
+
+export const engagementTypeRecherche = {
+    saisieEP: "saisieEP",
+    consultationEP: "consultationEP",
+    engagementsRH: "engagementRH"
 }