Résolution des conflits

src/app/app-routing.module.ts

@@ -8,7 +8,7 @@ import { HomeComponent } from './home/';
 import { AuthGuard } from '@shared/auth/auth.guard';
 
 import { paths_collaborateurs, paths_demandes_delegation, paths_demandes_formation,
-  paths_ep, paths_saisie_ep, paths_formation, paths_home, paths_referents } from '@shared/utils/paths';
+  paths_ep, paths_saisie_ep, paths_formation, paths_home, paths_referents, paths_engagements } from '@shared/utils/paths';
 
 import { Role  } from '@shared/utils/roles';
 
@@ -64,6 +64,11 @@ const routes: Routes = [
   {
     path: paths_referents.path,
     loadChildren: () => import('./referents/referents.module').then(m=> m.ReferentsModule)
+  },
+  //chargement des chemin du module engagement à partir du routing de ce module
+  {
+    path: paths_engagements.path,
+    loadChildren: () => import('./engagements/engagements.module').then(m => m.EngagementsModule)
   }
 ];
 

src/app/app.module.ts

@@ -25,6 +25,7 @@ import { EpModule } from "./ep"
 import { AuthModule } from '@shared/auth/auth.module';
 
 import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
+import { EngagementsModule } from './engagements';
 import { FilterModule } from "@shared/filter/filter.module";
 
 @NgModule({
@@ -39,8 +40,7 @@ import { FilterModule } from "@shared/filter/filter.module";
     ReferentsModule, FormationsModule,
     DemandesFormationModule, DemandesDelegationModule,
     EpSaisieModule, EpModule, MatTablesModule, FilterModule,
-    AffichageDetailsCollaborateurModule
+    AffichageDetailsCollaborateurModule, EngagementsModule
-    
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/engagements/dialog-engagements.html

@@ -0,0 +1,30 @@
+<h3>Détails de l'engagement</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>Action : {{ data.action}}</p>
+<p>Modalité: {{ data.modalite }}</p>
+<p>Date limite: {{ data.dateLimite | date: 'dd/MM/yyyy' }} </p>
+<p>Etat : {{ afficherEtat(data.etatEngagement) }}</p>
+<p *ngIf="data.etatEngagement == etatEngagement.NonRealisable"> Raison non réalisable : {{data.raisonNonRealisable}}</p>
+<ng-container *ngIf="data.etatEngagement == etatEngagement.EnAttente">
+    <button mat-raised-button (click)="repondre()">Répondre à l'engagement</button>
+    <ng-container *ngIf="donnerReponse">
+        <mat-slide-toggle [(ngModel)]="engagementRespecte">
+            Engagement respecté
+        </mat-slide-toggle>
+        
+        <div>
+            <mat-form-field *ngIf="!engagementRespecte" appearance="fill">
+                <mat-label>Raison du refus</mat-label>
+                <textarea matInput [(ngModel)]="raisonRefus"></textarea>
+            </mat-form-field>
+        
+        </div>
+        <button mat-raised-button (click)="mettreAJourEngagement()">Valider le choix</button>
+    </ng-container>
+    
+</ng-container>
+<button mat-raised-button (click)="fermer()">Fermer</button>
+
+

src/app/engagements/engagements.component.ts

@@ -0,0 +1,86 @@
+import { Component, Inject } from "@angular/core";
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { MatSnackBar } from "@angular/material/snack-bar";
+import { CollaborateurDTO, EngagementDTO, EngagementsService, EpInformationDTO, EtatEngagement, afficherEtatEngagement } from "@shared/api-swagger";
+import { Subscription } from "rxjs";
+
+
+@Component({
+    selector: "app-engagements",
+    templateUrl: "./engagements.html"
+})
+export class EngagementsComponent {
+
+    displayedColumns :  string[] = ["businessunit", "collaborateur", "action", "dispositif", "modalite", "datelimite", "etat"]; 
+    constructor(private dialog: MatDialog) {}
+
+    afficherDetailsEngagements(engagement: EngagementDTO) {
+        const datas = { data: engagement, width: "80%", height: '80%'};
+        this.dialog.open(DialogEngagementsComponent, datas);
+    }
+}
+
+@Component( {
+    selector: "dialog-engagements",
+    templateUrl: "dialog-engagements.html"
+})
+export class DialogEngagementsComponent {
+    ep: EpInformationDTO;
+    collaborateur: CollaborateurDTO;
+    referent: CollaborateurDTO;
+    etatEngagement: any = EtatEngagement;
+    engagementsSubscription: Subscription;
+    
+    donnerReponse: boolean = false;
+    raisonRefus : string = "";
+    engagementRespecte: boolean = true;
+
+
+    constructor(private dialogRef : MatDialogRef<DialogEngagementsComponent>, @Inject(MAT_DIALOG_DATA) public data : EngagementDTO, private engagementsService: EngagementsService,
+                    private snackBar: MatSnackBar){
+        this.ep = data.ep;
+        this.collaborateur = data.ep.collaborateur;
+        this.referent = data.ep.referent;
+    }
+
+    mettreAJourEngagement() {
+        let engagement : EngagementDTO = this.data;
+        if(this.engagementRespecte) {
+            engagement.etatEngagement = EtatEngagement.Respecte;
+        }
+        else {
+            if(this.raisonRefus.length == 0) {
+                this.snackBar.open("Vous devez justifier le refus de respecter l'engagement.", "Attention", {
+                    duration: 5000,
+                    horizontalPosition: "center",
+                    verticalPosition: "top",
+                });
+                return;
+            }
+            engagement.raisonNonRealisable = this.raisonRefus;
+            engagement.etatEngagement = EtatEngagement.NonRealisable; 
+        }
+        this.engagementsSubscription = this.engagementsService.updateEngagement(engagement, engagement.id).subscribe(
+            () => location.reload(),
+            err => console.log(err)
+        );
+    }
+
+    afficherEtat(etat: EtatEngagement) {
+        return afficherEtatEngagement(etat);
+    }
+
+    fermer() {
+        this.dialogRef.close();
+    }
+
+    repondre() {
+        this.donnerReponse = true;
+    }
+
+    ngOnDestroy() {
+        if(this.engagementsSubscription != null) {
+            this.engagementsSubscription.unsubscribe();
+        }
+    }
+}

src/app/engagements/engagements.html

@@ -0,0 +1,5 @@
+<app-nav-menu></app-nav-menu>
+
+<h2>Liste des engagements</h2>
+
+<engagements-table [displayedColumns]="displayedColumns" (eventEmitter)="afficherDetailsEngagements($event)"></engagements-table>

src/app/engagements/engagements.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { RouterModule } from '@angular/router';
+
+import { MaterialModule } from "@shared/angular-material/angular-material.module";
+
+import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
+import { DialogEngagementsComponent, EngagementsComponent } from "./engagements.component";
+import { EngagementsRoutingModule } from "./engagements.routing.module";
+import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
+import { FormsModule } from "@angular/forms";
+
+
+
+@NgModule({
+    declarations: [
+        EngagementsComponent, DialogEngagementsComponent
+    ],
+    exports: [],
+    imports: [
+        CommonModule,
+        RouterModule, 
+        NavMenuModule,
+        EngagementsRoutingModule,
+        MatTablesModule,
+        MaterialModule, 
+        FormsModule
+    ],
+})
+export class EngagementsModule {}

src/app/engagements/engagements.routing.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+
+import { EngagementsComponent } from "./engagements.component";
+
+import { AuthGuard } from '@shared/auth/auth.guard';
+
+
+
+const routes: Routes = [
+    { path: '', component: EngagementsComponent, pathMatch: 'full', canActivate: [AuthGuard]}
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+  })
+  export class EngagementsRoutingModule {}

src/app/engagements/index.ts

@@ -0,0 +1,2 @@
+export * from './engagements.component';
+export * from './engagements.module';

src/app/referents/assignation-referent/assignation-referent.component.ts

@@ -54,6 +54,7 @@ export class AssignationReferentComponent {
     }
 
     choixReferent(event: any) {
+        console.log(event);
         this.referentChoisi = event.collaborateur;
         this.setCollaborateurEP();
     }
@@ -86,10 +87,6 @@ export class AssignationReferentComponent {
         this.collaborateursSelectionnes.push(event.collaborateur);
     }
 
-    peutAjouterCollaborateur(event) : boolean {
-        return event.type == "collaborateur" && !this.collaborateursSelectionnes.some(event.collaborateur) && !this.collaborateursEP.includes(event.collaborateur);
-    }
-
     contientCollaborateur(listes: CollaborateurDTO[], collaborateur: CollaborateurDTO ) : boolean {
         return listes.some(c => c.id == collaborateur.id);
     }

src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.html

@@ -2,32 +2,29 @@
     <h2> {{ collaborateur.nom }} {{ collaborateur.prenom }} </h2>
     <p><b>Agence : {{ collaborateur.businessUnit.nom}} ({{ collaborateur.businessUnit.agence.nom}}) </b></p>
     <ng-container *ngIf="!estReferent">
-        <p *ngIf="collaborateur.referent != null"><b>Aucun référent</b></p>
+        <p *ngIf="collaborateur.referent == null"><b>Aucun référent</b></p>
-        <p *ngIf="collaborateur.referent == null"><b>Référent : {{ collaborateur.referent.nom }} {{ collaborateur.referent.prenom }} </b></p>
+        <p *ngIf="collaborateur.referent != null"><b>Référent : {{ collaborateur.referent.nom }} {{ collaborateur.referent.prenom }} </b></p>
     </ng-container>
     <p *ngIf="!estReferent"><b>Date embauche :  {{ collaborateur.dateArrivee | date: 'dd MMMM yyyy'}}</b></p>
     <p *ngIf="!estReferent && collaborateur.dateDepart!=undefined"><b>Date départ : {{ collaborateur.dateDepart | date: 'dd MMMM yyyy'}}</b></p>
 
+    <button mat-raised-button color="primary" (click)="openDialog()"> {{ estReferent ? "Ajouter des collaborateurs EP" : "Mettre à jour le référent EP"}}</button>
+
     <mat-tab-group mat-align-tabs="start">
-        <mat-tab *ngIf="!estReferent" label="Liste des EP">
+        <mat-tab *ngIf="!estReferent" label="Liste des EP effectués">
-            <h3>Liste des EP</h3>
         </mat-tab>
         
         <mat-tab *ngIf="!estReferent" label="Liste des formations">
-            <h3>Liste des formations</h3>
         </mat-tab>
         
         <mat-tab *ngIf="estReferent" label="Liste des collaborateurs">
-            <h3>Liste des collaborateurs</h3>
+            <collaborateurs-table [rechercherParBU]="rechercherParBU" [rechercherParDate]="rechercherParDate" [displayedColumns]="displayedColumns" [typeRecherche]="typeRecherche" [idReferent]="idCollaborateur" (eventEmitter)="ouvrirDetailsCollaborateur($event)" ></collaborateurs-table>
-            <collaborateurs-table [rechercherParBU]="rechercherParBU" [displayedColumns]="displayedColumns" [typeRecherche]="typeRecherche" [idReferent]="idCollaborateur" ></collaborateurs-table>
         </mat-tab>
         
-        <mat-tab *ngIf="estReferent" label="Liste des EP effectués">
+        <mat-tab *ngIf="estReferent" label="Liste des EP référent">
-            <h3>Liste des EP effectués</h3>
         </mat-tab>
         
         <mat-tab *ngIf="estReferent" label="Liste des EP en cours">
-            <h3>Liste des EP en cours</h3>
         </mat-tab>
     </mat-tab-group>
 

src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.module.ts

@@ -5,10 +5,13 @@ import { FormsModule } from '@angular/forms';
 import { MaterialModule } from "../angular-material/angular-material.module";
 import { AffichageDetailsCollaborateurComponent } from "@shared/affichage-details-collaboarteur/affichage-details-collaborateur";
 import { MatTablesModule } from '@shared/mat-tables/mat-tables.module';
+import { DialogAssignationRapideReferentComponent, DialogAssignationRapideCollaborateursComponent } from "./dialog-assignation-rapide/dialog-assignation-rapide.component";
+
 
 @NgModule({
   declarations: [ 
-    AffichageDetailsCollaborateurComponent
+    AffichageDetailsCollaborateurComponent, DialogAssignationRapideReferentComponent,
+    DialogAssignationRapideCollaborateursComponent
   ],
   imports: [
     MaterialModule,

src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.ts

@@ -2,6 +2,10 @@ import { Component, Input, OnInit } from "@angular/core";
 import { CollaborateurDTO, CollaborateursService } from "@shared/api-swagger";
 import { Subscription } from "rxjs";
 import { collaborateurTypeRecherche } from "@shared/utils/cles";
+import { MatDialog } from "@angular/material/dialog";
+import { DialogAssignationRapideReferentComponent, DialogAssignationRapideCollaborateursComponent } from "./dialog-assignation-rapide/dialog-assignation-rapide.component";
+import { Router } from "@angular/router";
+
 
 @Component({
     selector: "affichage-details-collaborateur",
@@ -16,13 +20,13 @@ export class AffichageDetailsCollaborateurComponent implements OnInit{
     
     displayedColumns : string[] = ["businessunit", "collaborateur", "datearrivee"];
     
-    rechercherParBU: boolean = true;
+    rechercherParBU: boolean = false;
-
+    rechercherParDate: boolean= false;
 
     collaborateur: CollaborateurDTO = undefined;
     private collaborateurSubscription: Subscription;
 
-    constructor(private collaborateurService: CollaborateursService) {}
+    constructor(private collaborateurService: CollaborateursService, private dialog: MatDialog, private router: Router) {}
 
     ngOnInit() {
         this.collaborateurSubscription = this.collaborateurService.getCollaborateurById(this.idCollaborateur).subscribe(
@@ -36,4 +40,21 @@ export class AffichageDetailsCollaborateurComponent implements OnInit{
             this.collaborateurSubscription.unsubscribe();
         }
     }
+
+
+    ouvrirDetailsCollaborateur(event) {
+        this.router.navigate(["/collaborateurs",event.collaborateur.id]);
+    }
+
+    openDialog() {
+        const datas = { data: this.collaborateur, width: "80%", height: '80%'};
+        let dialog; 
+        if(this.estReferent) {
+            dialog = DialogAssignationRapideCollaborateursComponent;
+        }
+        else {
+            dialog = DialogAssignationRapideReferentComponent;
+        }
+        this.dialog.open(dialog, datas);
+    }
 }

src/app/shared/affichage-details-collaboarteur/dialog-assignation-rapide/dialog-assignation-rapide-collaborateurs.html

@@ -0,0 +1,17 @@
+<!--ASSIGNATION D'UN OU PLUSIEURS COLLABORATEURS A UN REFERENT-->
+<ng-container *ngIf="collaborateursSelectionnes.length != 0">
+    <p> Collaborateurs sélectionnés :</p>
+    <mat-chip-list >
+        <mat-chip
+            *ngFor="let collaborateur of collaborateursSelectionnes"
+            [removable]="true"
+            (removed)="enleverCollaborateur(collaborateur)">
+            {{collaborateur.nom}} {{collaborateur.prenom}}
+            <mat-icon matChipRemove>cancel</mat-icon>
+        </mat-chip>
+    </mat-chip-list>
+    <button mat-raised-button color="primary" (click)="mettreAJourReferentEP()">Mettre à jour le référent des collaborateurs</button>
+</ng-container>
+<p *ngIf="collaborateursSelectionnes.length == 0">Veuillez sélectionner au moins un collaborateur</p>
+<button mat-raised-button color="primary" (click)="annuler()">Annuler</button>
+<collaborateurs-table [rechercherParBU]="rechercherParBU" [rechercherParDate]="rechercherParDate" [roles]="roles" [displayedColumns]="displayedColumns" [typeRecherche]="typeRecherche" (eventEmitter)="ajoutCollaborateur($event)" [collaborateursEP]="collaborateursEP" [collaborateursAjouts]="collaborateursSelectionnes"  ></collaborateurs-table>

src/app/shared/affichage-details-collaboarteur/dialog-assignation-rapide/dialog-assignation-rapide-referent.html

@@ -0,0 +1,8 @@
+<!--ASSIGNATION D'UN REFERENT A UN COLLABORATEUR-->
+<ng-container *ngIf="referentChoisi != undefined">
+    <p> {{referentChoisi.nom}} {{referentChoisi.prenom}} {{ estReferentActuel() ? "(Référent actuel)" : "" }} </p>
+    <button mat-raised-button color="primary" *ngIf="!estReferentActuel()" (click)="mettreAJourReferent()">Valider le changement du référent</button>
+</ng-container>
+<p *ngIf="referentChoisi == undefined"> Veuillez choisir un référent </p>
+<button mat-raised-button color="primary" (click)="annuler()">Annuler</button>
+<collaborateurs-table [rechercherParBU]="rechercherParBU" [rechercherParDate]="rechercherParDate" [roles]="roles" [displayedColumns]="displayedColumns" [typeRecherche]="typeRecherche" (eventEmitter)="selectionnerReferent($event)"></collaborateurs-table>

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

@@ -0,0 +1,168 @@
+import {Component, Inject, OnInit } from "@angular/core";
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import { MatSnackBar } from "@angular/material/snack-bar";
+import { CollaborateurDTO, CollaborateursService, ReferentEPDTO, ReferentsEPService } from "@shared/api-swagger";
+import { collaborateurTypeRecherche,  } from "@shared/utils/cles";
+import { Subscription } from "rxjs";
+
+@Component({
+    selector: "dialog-assignation-rapide-referent",
+    templateUrl: "dialog-assignation-rapide-referent.html"
+})
+export class DialogAssignationRapideReferentComponent {
+
+    rechercherParDate: boolean = false;
+
+    rechercherParBU: boolean = true;
+
+    referentChoisi : CollaborateurDTO = undefined;
+    
+    roles : string[] = ["Manager", "RA", "CP", "TL"];
+
+    
+    typeRecherche: string = collaborateurTypeRecherche.referents;
+
+    displayedColumns : string[] = ["businessunit", "collaborateur"];
+
+    private referentEPSubscription: Subscription;
+
+    constructor(private dialogRef: MatDialogRef<DialogAssignationRapideReferentComponent>, private referentsEPService: ReferentsEPService,
+        @Inject(MAT_DIALOG_DATA) private data: CollaborateurDTO) {
+         this.referentChoisi = data.referent;
+    }
+
+    selectionnerReferent(event) {
+        this.referentChoisi = event.collaborateur;
+    }
+
+    mettreAJourReferent() {
+        const referentEPDTO: ReferentEPDTO = {
+            idReferent : this.referentChoisi.id,
+            idsCollaborateur : [this.data.id],
+        };
+
+        this.referentEPSubscription = this.referentsEPService.updateReferentCollaborateur(referentEPDTO, this.data.id).subscribe(
+            () => location.reload(),
+            err => console.log(err)
+        );
+
+    }
+
+    estReferentActuel() {
+        return this.referentChoisi != undefined && this.data.referent != undefined &&this.referentChoisi.id == this.data.referent.id;
+    }
+
+    annuler() {
+        this.dialogRef.close();
+    }
+
+    ngOnDestroy() {
+        if(this.referentEPSubscription != undefined) {
+            this.referentEPSubscription.unsubscribe();
+        }
+    }
+
+
+}
+
+@Component({
+    selector: "dialog-assignation-rapide-collaborateurs",
+    templateUrl: "dialog-assignation-rapide-collaborateurs.html"
+})
+export class DialogAssignationRapideCollaborateursComponent implements OnInit{
+    rechercherParDate: boolean = false;
+
+    rechercherParBU: boolean = true;
+    
+    roles : string[] = ["Collaborateur"];
+
+    
+    typeRecherche: string = collaborateurTypeRecherche.collaborateurs;
+
+    displayedColumns : string[] = ["businessunit", "collaborateur", "datearrivee", "referent"];
+
+    collaborateursEP: CollaborateurDTO[] = [];
+    collaborateursSelectionnes: CollaborateurDTO[] = [];
+
+    
+    private collaborateurSubscription: Subscription;
+    private referentEPSubscription: Subscription;
+
+    constructor(private dialogRef: MatDialogRef<DialogAssignationRapideCollaborateursComponent>, private referentsEPService: ReferentsEPService,
+        private collaborateurService: CollaborateursService, @Inject(MAT_DIALOG_DATA) private data: CollaborateurDTO,
+        private snackBar: MatSnackBar) {
+    }
+
+    ngOnInit() {
+        this.collaborateurSubscription = this.collaborateurService.getCollaborateursByReferent(this.data.id).subscribe(
+            collaborateurs => this.collaborateursEP = collaborateurs,
+            err => console.log(err)   
+        );
+    }
+
+
+    ajoutCollaborateur(event:any) {
+        if(event.type != "collaborateur")
+            return;
+        if(event.collaborateur.id == this.data.id) {
+            this.openSnackBar("Un collaborateur ne peut pas être son propre référent");
+            return;
+        }
+        if(this.contientCollaborateur(this.collaborateursSelectionnes, event.collaborateur)){
+            this.enleverCollaborateur(event.collaborateur);
+            return;
+        }
+        if(this.contientCollaborateur(this.collaborateursEP, event.collaborateur)){
+            this.openSnackBar("Le référent choisi est déjà le référent EP du collaborateur sélectionné")
+            return;
+        }
+        this.collaborateursSelectionnes.push(event.collaborateur);
+    }
+
+    contientCollaborateur(listes: CollaborateurDTO[], collaborateur: CollaborateurDTO ) : boolean {
+        return listes.some(c => c.id == collaborateur.id);
+    }
+
+    enleverCollaborateur(collaborateur: CollaborateurDTO) {
+        this.collaborateursSelectionnes = this.collaborateursSelectionnes.filter(c => c.id != collaborateur.id);
+    }
+
+    ajouterCollaborateur(event) {
+        if(event.type == "collaborateur") {
+
+        }
+    }
+
+    mettreAJourReferentEP() {
+        const referentEP : ReferentEPDTO = {
+            idReferent: this.data.id,
+            idsCollaborateur: this.collaborateursSelectionnes.map( c => c.id)
+        };
+
+        this.referentEPSubscription = this.referentsEPService.updateCollaborateursReferent(referentEP, this.data.id).subscribe(
+            () => location.reload(),
+            err => console.log(err)
+        );
+    }
+
+    openSnackBar(message: string) {
+        this.snackBar.open(message,"", {
+            duration: 5000,
+            horizontalPosition: "center",
+            verticalPosition: "top",
+          });
+    }
+
+    annuler() {
+        this.dialogRef.close();
+    }
+
+    ngOnDestroy() {
+        if(this.referentEPSubscription != undefined) {
+            this.referentEPSubscription.unsubscribe();
+        }
+        if(this.collaborateurSubscription != undefined) {
+            this.collaborateurSubscription.unsubscribe();
+        }
+    }
+}

src/app/shared/angular-material/angular-material.module.ts

@@ -20,6 +20,8 @@ import {MatSelectModule} from '@angular/material/select';
 import {MatStepperModule} from '@angular/material/stepper';
 import {MatChipsModule} from '@angular/material/chips';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+
 
 import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
 
@@ -37,7 +39,7 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
     NgxMatDatetimePickerModule, MatDatepickerModule,
     NgxMatNativeDateModule, MatNativeDateModule, MatListModule,
     MatCheckboxModule, MatSelectModule, MatStepperModule,
-    MatChipsModule, MatSnackBarModule
+    MatChipsModule, MatSnackBarModule, MatSlideToggleModule
   ],
   exports : [MatCardModule,
     MatButtonModule, MatMenuModule,
@@ -48,7 +50,7 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
     NgxMatDatetimePickerModule, MatDatepickerModule,
     NgxMatNativeDateModule, MatNativeDateModule, MatListModule,
     MatCheckboxModule, MatSelectModule, MatStepperModule,
-    MatChipsModule, MatSnackBarModule
+    MatChipsModule, MatSnackBarModule, MatSlideToggleModule
   ]
 })
 export class MaterialModule {}

src/app/shared/api-swagger/model/etatEngagement.ts

@@ -20,4 +20,17 @@ export const EtatEngagement = {
     Respecte: 'Respecte' as EtatEngagement,
     NonRealisable: 'NonRealisable' as EtatEngagement,
     DateLimitePassee: 'DateLimitePassee' as EtatEngagement
-};
+};
+
+export function afficherEtatEngagement(etatEngagement: EtatEngagement) {
+    switch(etatEngagement) {
+        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";
+    }
+}

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

@@ -3,20 +3,19 @@
 </ng-container>
   
 <ng-container *ngIf="!chargement">
-
+  
-
+  <!-- Barre de recherche -->
-    <!-- Barre de recherche -->
+  <mat-form-field>
-      <mat-form-field>
+    <mat-label>Rechercher un collaborateur</mat-label>
-      <mat-label>Rechercher un collaborateur</mat-label>
+    <input matInput type="text" [(ngModel)]="search" (keyup)="setSearch()">
-      <input matInput type="text" [(ngModel)]="search" (keyup)="setSearch()">
+    <mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="resetSearch()">
-      <mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="resetSearch()">
+      <mat-icon>close</mat-icon>
-        <mat-icon>close</mat-icon>
+    </mat-button>
-      </mat-button>
+  </mat-form-field>
-    </mat-form-field>
+  
-
   <!--Checkboxes des BU-->
   <ng-container *ngIf="rechercherParBU">
-        <mat-checkbox *ngFor="let bu of bus" (change)="updateCheckbox($event.checked,bu)" [checked]="true"> {{bu.nom}}</mat-checkbox>
+    <mat-checkbox *ngFor="let bu of bus" (change)="updateCheckbox($event.checked,bu)" [checked]="true"> {{bu.nom}}</mat-checkbox>
   </ng-container> 
   
   <ng-container *ngIf="rechercherParDate">
@@ -30,7 +29,7 @@
     </mat-form-field>
     
     <!-- Datepicker fin -->
-    <mat-form-field >
+    <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>
@@ -38,46 +37,49 @@
       <mat-datepicker touchUi #dateFinPicker disabled="false"></mat-datepicker>
     </mat-form-field>
   </ng-container>
+ 
+  <ng-container *ngIf="taille == 0">
+    <p>Aucun collaborateur à afficher</p>
+  </ng-container>
+  
+  <ng-container *ngIf="taille != 0">
 
+    <!-- Affichage de la liste des collaborateurs -->
 
-  <!-- Affichage de la liste des collaborateurs -->
+    <mat-table matSort [dataSource]="dataSource" (matSortChange)="triTableau($event)" matSortActive="{{this.tri}}" matSortDirection="asc" >
-  
+      <ng-container matColumnDef="businessunit">
-  <mat-table matSort [dataSource]="dataSource" (matSortChange)="triTableau($event)" matSortActive="{{this.tri}}" matSortDirection="asc" >
+        <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Agence</mat-header-cell>
-    
+        <mat-cell *matCellDef="let row">{{ row.businessUnit.nom }}</mat-cell>
-    <ng-container matColumnDef="businessunit">
+      </ng-container>
-      <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Agence</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.businessUnit.nom }}</mat-cell>
-    </ng-container>
 
-    <ng-container matColumnDef="collaborateur">
+      <ng-container matColumnDef="collaborateur">
-      <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Collabotareur</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Collabotareur</mat-header-cell>
-      <mat-cell *matCellDef="let row" (click)="emitEvent(row,'collaborateur')">{{row.nom}} {{row.prenom}}</mat-cell>
+        <mat-cell *matCellDef="let row" (click)="emitEvent(row,'collaborateur')">{{row.nom}} {{row.prenom}}</mat-cell>
-    </ng-container>
+      </ng-container>
 
-    <ng-container matColumnDef="datearrivee">
+      <ng-container matColumnDef="datearrivee">
-      <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Date embauche</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Date embauche</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{row.dateArrivee | date:'dd/MM/yyyy'}}</mat-cell>
+        <mat-cell *matCellDef="let row">{{row.dateArrivee | date:'dd/MM/yyyy'}}</mat-cell>
-    </ng-container>
+      </ng-container>
 
-    <ng-container matColumnDef="referent">
+      <ng-container matColumnDef="referent">
-      <mat-header-cell *matHeaderCellDef >Référent</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef >Référent</mat-header-cell>
-      <mat-cell *matCellDef="let row" >
+        <mat-cell *matCellDef="let row" >
-        <mat-cell *ngIf="row.referent" (click)="emitEvent(row.referent,'referent')">{{ row.referent.prenom }} {{ row.referent.nom }}</mat-cell>
+          <mat-cell *ngIf="row.referent" (click)="emitEvent(row.referent,'referent')"> {{ row.referent.nom }} {{ row.referent.prenom }} </mat-cell>
-        <mat-cell *ngIf="!row.referent">Aucun référent</mat-cell>
+          <mat-cell *ngIf="!row.referent">Aucun référent</mat-cell>
-      </mat-cell>
+        </mat-cell>
-    </ng-container>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row [ngClass]="setClassCouleurLigne(row)" *matRowDef="let row; columns: displayedColumns;"></mat-row>
+      <mat-row [ngClass]="setClassCouleurLigne(row)" *matRowDef="let row; columns: displayedColumns;"></mat-row>
-  </mat-table>
+    </mat-table>
 
-    <mat-paginator #paginator
+    <mat-paginator #paginator 
-                [length] = "taille"
+        [length] = "taille"
-                [pageIndex]="numPage-1"
+        [pageIndex]="numPage-1"
-                [pageSize]="parPage"
+        [pageSize]="parPage"
-                [pageSizeOptions]="pageOption"
+        [pageSizeOptions]="pageOption"
-                (page)="updatePageInfo($event)"
+        (page)="updatePageInfo($event)">
-                >
     </mat-paginator>
-
+  </ng-container>
 </ng-container>

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

@@ -200,7 +200,7 @@ export class CollaborateursTableComponent implements OnInit {
             collaborateurs => { console.log(collaborateurs); this.dataSource = new MatTableDataSource(collaborateurs);},
             err => console.log(err)
           );
-          this.collaborateursDisponiblesCountSubscription = this.service.getCollaborateursByReferentCount(this.collaborateurConnecte.id, this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
+          this.collaborateursDisponiblesCountSubscription = this.service.getCollaborateursByReferentCount(this.idReferent, this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
             count => { console.log(count); this.taille=count;},
             err => console.log(err)
           );

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="!estAffichageEP">
+        <!-- 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)="updateBUs($event.checked,bu)" [checked]="true"> {{bu.nom}}</mat-checkbox>
+        </ng-container>
+
+        <!--Checkboxes des Etats engagement-->
+        <ng-container>
+            <mat-checkbox *ngFor="let etat of etatsEngagementsAffiches" (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 [dataSource]="dataSource">
+            <ng-container matColumnDef="businessunit">
+                <mat-header-cell *matHeaderCellDef>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>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>Action</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{row.action}}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="dispositif">
+                <mat-header-cell *matHeaderCellDef>Dispositif</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{row.dispositif}}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="modalite">
+                <mat-header-cell *matHeaderCellDef>Modalité</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{row.modalite}}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="datelimite">
+                <mat-header-cell *matHeaderCellDef>Date limite</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{row.dateLimite | date :'dd/MM/yyyy'}}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="etat">
+                <mat-header-cell *matHeaderCellDef>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>EP</mat-header-cell>
+                <mat-cell *matCellDef="let row">Voir EP</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="reponse">
+                <mat-header-cell *matHeaderCellDef></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-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;" (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>

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

@@ -0,0 +1,195 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { MatTableDataSource } from "@angular/material/table";
+import { BusinessUnitDTO, CollaborateurDTO, EngagementDTO, EngagementsService, EtatEngagement, afficherEtatEngagement } from "@shared/api-swagger";
+import { cles, engagementTypeRecherche } from "@shared/utils/cles";
+import { EngagementsRoutingModule } from "app/engagements/engagements.routing.module";
+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
+    ];
+    etatsEngagementsAffiches: Array<EtatEngagement> = [
+        EtatEngagement.EnAttente, EtatEngagement.DateLimitePassee,
+        EtatEngagement.NonRealisable, EtatEngagement.Respecte
+    ];
+
+
+    /**
+        * Liste des colonnes du tableau à afficher.
+        */
+    @Input() displayedColumns : string[] = [];
+    @Input() estAffichageEP: 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.estAffichageEP) {
+            this.taille = this.engagementsSaisis.length;
+            this.dataSource = new MatTableDataSource(this.engagementsSaisis);
+        }
+        else
+            this.setBUsId();
+    }
+
+    emitEvent(engagement: EngagementsRoutingModule) {
+        if(this.eventEmitter != null)
+            this.eventEmitter.emit(engagement);
+    }
+
+
+    updateDataSource() {
+        if(this.busIds.length == 0 || this.etatsEngagements.length == 0) {
+            this.taille = 0;
+            this.dataSource = new MatTableDataSource(undefined);
+            return;
+        }
+        this.engagementSubscription = this.engagementService.getEngagements(this.etatsEngagements, this.busIds, this.asc, this.numPage, this.parPage, this.search, this.tri).subscribe(
+            engagements => { console.log(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) {
+        return afficherEtatEngagement(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();
+    }
+
+    /**
+       * 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 = this.etatsEngagements.filter( e => etat != e); 
+        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();
+    }
+
+
+    ngOnDestroy() {
+        if(this.engagementSubscription != undefined) {
+            this.engagementSubscription.unsubscribe();
+        }
+        if(this.engagementCountSubscripton != undefined) {
+            this.engagementCountSubscripton.unsubscribe();
+        }
+    }
+}

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

@@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router';
 
 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"
 import { FormationsTableComponent } from "@shared/mat-tables/formations-table/formations.table";
 import { FilterModule } from "@shared/filter/filter.module";
 
@@ -12,6 +13,7 @@ import { FilterModule } from "@shared/filter/filter.module";
 @NgModule({
   declarations: [ 
     CollaborateursTableComponent,
+    EngagementTableComponent,
     FormationsTableComponent 
   ],
   imports: [
@@ -23,6 +25,7 @@ import { FilterModule } from "@shared/filter/filter.module";
   ],
   exports: [
     CollaborateursTableComponent,
+    EngagementTableComponent,
     FormationsTableComponent
   ]
 })

src/app/shared/nav-menu/nav-menu-rh/nav-menu-rh.component.html

@@ -20,6 +20,6 @@
 </button>
 <mat-menu #menuCollaborateurs="matMenu">
   <button mat-button routerLink="/collaborateurs">Liste des collaborateurs</button>
-  <button mat-button>Liste des engagements</button>
+  <button mat-button routerLink="/engagements">Liste des engagements</button>
 </mat-menu>
 <!--<button mat-button routerLink="/referents">Liste des référents</button>-->

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"
 }

src/app/shared/utils/paths.ts

@@ -93,5 +93,11 @@ const paths_referents = {
   get: ":id"
 };
 
+const paths_engagements = {
+  base: "/engagements",
+  path: "engagements"
+}
+
+
 export { paths_collaborateurs, paths_demandes_delegation, paths_demandes_formation,
-  paths_ep, paths_saisie_ep, paths_formation, paths_home, paths_referents};
+  paths_ep, paths_saisie_ep, paths_formation, paths_home, paths_referents, paths_engagements};