Merge branch 'f_ajout_theme_sombre' into develop

.gitignore

@@ -30,6 +30,7 @@ speed-measure-plugin*.json
 !.vscode/launch.json
 !.vscode/extensions.json
 .history/*
+.vs/*
 
 # misc
 /.sass-cache

angular.json

@@ -24,8 +24,7 @@
               "src/assets"
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -40,7 +39,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
@@ -90,7 +88,7 @@
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           }
@@ -123,5 +121,10 @@
       }
     }
   },
+  "schematics": {
+    "@schematics/angular:component": {
+      "styleext": "scss"
+    }
+  },
   "defaultProject": "EPAClient"
 }

e2e/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es5",
+    "target": "es2018",
     "types": [
       "jasmine",
       "jasminewd2",

package.json

@@ -8,46 +8,45 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "compodoc": "./node_modules/.bin/compodoc -p tsconfig.json"
+    "compodoc": "npx compodoc -p tsconfig.compodoc.json src"
   },
   "private": true,
   "dependencies": {
-    "@angular-material-components/datetime-picker": "^2.0.4",
-    "@angular/animations": "~9.1.9",
-    "@angular/cdk": "^9.2.4",
-    "@angular/common": "~9.1.9",
-    "@angular/compiler": "~9.1.9",
-    "@angular/core": "~9.1.9",
-    "@angular/forms": "~9.1.9",
-    "@angular/material": "^9.2.4",
-    "@angular/platform-browser": "~9.1.9",
-    "@angular/platform-browser-dynamic": "~9.1.9",
-    "@angular/router": "~9.1.9",
-    "keycloak-angular": "^7.3.1",
-    "keycloak-js": "^10.0.2",
-    "rxjs": "~6.5.4",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "@angular-material-components/datetime-picker": "^5.0.3",
+    "@angular/animations": "~11.1.2",
+    "@angular/cdk": "^11.1.2",
+    "@angular/common": "~11.1.2",
+    "@angular/compiler": "~11.1.2",
+    "@angular/core": "~11.1.2",
+    "@angular/forms": "~11.1.2",
+    "@angular/material": "^11.1.2",
+    "@angular/platform-browser": "~11.1.2",
+    "@angular/platform-browser-dynamic": "~11.1.2",
+    "@angular/router": "~11.1.2",
+    "angular-oauth2-oidc": "^10.0.3",
+    "rxjs": "~6.6.3",
+    "tslib": "^2.1.0",
+    "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.7",
-    "@angular/cli": "~9.1.7",
-    "@angular/compiler-cli": "~9.1.9",
+    "@angular-devkit/build-angular": "~0.1101.4",
+    "@angular/cli": "~11.1.4",
+    "@angular/compiler-cli": "~11.1.2",
     "@compodoc/compodoc": "^1.1.11",
-    "@types/jasmine": "~3.5.0",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~5.0.0",
+    "@types/jasmine": "~3.6.3",
+    "@types/jasminewd2": "~2.0.8",
+    "@types/node": "^14.14.25",
+    "codelyzer": "^6.0.1",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~6.0.0",
+    "karma": "~6.1.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~3.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-jasmine": "~4.0.1",
+    "karma-jasmine-html-reporter": "^1.5.4",
     "protractor": "~7.0.0",
-    "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "typescript": "~3.8.3"
+    "ts-node": "~9.1.1",
+    "tslint": "^6.1.3",
+    "typescript": "~4.1.3"
   }
 }

src/app/app-routing.module.ts

@@ -5,56 +5,80 @@ import { Routes } from '@angular/router';
 
 import { HomeComponent } from './home/';
 
-import { KeycloakGuard } from '@shared/guards/keycloakguard';
+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, paths_notes } from './shared/utils/paths';
 
+import { Role  } from './shared/utils/roles';
+
+/**
+  * L'ensemble des routes du client Angular
+  */
 const routes: Routes = [
-  {
-    path: '',
-    redirectTo: paths_home.path,
-    pathMatch: 'full'
-  },
-  {
-    path: paths_home.path,
-    component: HomeComponent,
-    canActivate: [KeycloakGuard],
-    pathMatch: 'full'
-  },
+  //chargement des chemins du module collaborateur à partir du routing de ce module
   {
     path: paths_collaborateurs.path,
     loadChildren: () => import('./collaborateurs/collaborateurs.module').then(m=> m.CollaborateursModule)
   },
+  //chargement des chemins du module demandes délégation à partir du routing de ce module
   {
     path: paths_demandes_delegation.path,
     loadChildren: () => import('./demandes-delegation/demandes-delegation.module').then(m=> m.DemandesDelegationModule)
   },
+  //chargement des chemins du module demandes de formation à partir du routing de ce module
   {
     path: paths_demandes_formation.path,
     loadChildren: () => import('./demandes-formation/demandes-formation.module').then(m=> m.DemandesFormationModule)
   },
+  //chargement des chemins du module ep à partir du routing de ce module
   {
     path: paths_ep.path,
     loadChildren: () => import('./ep/ep.module').then(m=> m.EpModule)
   },
+  //chargement des chemins du module saisie ep à partir du routing de ce module
   {
     path: paths_saisie_ep.path,
     loadChildren: () => import('./ep-saisie/ep-saisie.module').then(m=> m.EpSaisieModule)
   },
+  //chargement des chemins du module formation à partir du routing de ce module
   {
     path: paths_formation.path,
     loadChildren: () => import('./formations/formations.module').then(m=> m.FormationsModule)
   },
+  //chargement des chemins du module référent à partir du routing de ce module
   {
     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)
+  },
+  {
+    path: paths_notes.path,
+    loadChildren: () => import('./notes/notes.module').then( m => m.NotesModule)
+  },
+  //Chemin du home
+  {
+    path: paths_home.path,
+    component: HomeComponent,
+    canActivate: [AuthGuard],
+    data: { roles: [Role.assistante, Role.commercial, Role.rh, Role.collaborateur] },
+    pathMatch: 'full'
+  },
+  //Redirection vers le home pour "/"
+  {
+    path: '',
+    redirectTo: paths_home.path,
+    pathMatch: 'full'
   }
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
   exports: [RouterModule],
-  providers: [KeycloakGuard]
+  providers: [AuthGuard]
 })
 export class AppRoutingModule {}

src/app/app.component.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
 /*

src/app/app.component.ts

@@ -1,14 +1,37 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { CollaborateursService } from '@shared/api-swagger/api/api'
+import { AuthService } from '@shared/auth/auth.service';
+import { Subscription } from 'rxjs';
+
+import { cles } from "@shared/utils/cles"
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+
+export class AppComponent implements OnInit {
   title = 'EPAClient';
 
-  constructor() {
+  subscriber: Subscription;
+
+
+  constructor(private collaborateursService: CollaborateursService,
+    private authService: AuthService ) {
     
   }
+
+  ngOnInit(): void {
+    if(sessionStorage.getItem(cles.sessionKeyConnectee) == undefined) {
+      this.subscriber = this.collaborateursService.getCollaborateurByMail(this.authService.mail).subscribe(
+        collaborateur => sessionStorage.setItem(cles.sessionKeyConnectee, JSON.stringify(collaborateur))
+      );
+    }
+  }
+
+  ngOnDestroy(): void {
+    if(this.subscriber != undefined)
+      this.subscriber.unsubscribe();
+  }
 }

src/app/app.module.ts

@@ -2,8 +2,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule, DoBootstrap } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
-import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
-import { RouterModule } from '@angular/router';
 
 import { registerLocaleData } from '@angular/common';
 import localeFr from '@angular/common/locales/fr';
@@ -22,16 +20,14 @@ import { FormationsModule } from './formations';
 import { DemandesFormationModule } from './demandes-formation';
 import { DemandesDelegationModule } from './demandes-delegation';
 import { EpSaisieModule } from "./ep-saisie";
+import { AffichageDetailsCollaborateurModule } from "@shared/affichage-details-collaboarteur/affichage-details-collaborateur.module";
 import { EpModule } from "./ep"
+import { AuthModule } from '@shared/auth/auth.module';
 
-import { environment } from '@env';
-
-
-
-/**
-  * constante Keycloak qui pourra être utilisé dans tout le projet.
-  */
-let keycloakService: KeycloakService = new KeycloakService();
+import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
+import { EngagementsModule } from './engagements';
+import { NotesModule } from './notes';
+import { FilterModule } from "@shared/filter/filter.module";
 
 @NgModule({
   declarations: [
@@ -39,32 +35,18 @@ let keycloakService: KeycloakService = new KeycloakService();
   ],
   imports: [
     BrowserModule, BrowserAnimationsModule,
-    KeycloakAngularModule, AppRoutingModule,
+    AuthModule.forRoot(), AppRoutingModule,
     HttpClientModule, ApiModule,
     HomeModule, CollaborateursModule,
     ReferentsModule, FormationsModule,
     DemandesFormationModule, DemandesDelegationModule,
-    EpSaisieModule
+    EpSaisieModule, NotesModule, EpModule, 
+    MatTablesModule, FilterModule,
+    AffichageDetailsCollaborateurModule, EngagementsModule
   ],
-  providers: [
-    {
-      provide: KeycloakService,
-      useValue: keycloakService
-    }
-  ],
-  entryComponents: [AppComponent]
+  providers: [],
+  bootstrap: [AppComponent]
 })
 
-export class AppModule implements DoBootstrap {
-  async ngDoBootstrap(app) {
-    const { keycloakConfig } = environment;
-
-    try {
-      await keycloakService.init({ config: keycloakConfig });
-      app.bootstrap(AppComponent);
-
-    } catch (error) {
-      console.error('Keycloak init failed', error);
-    }
-  }
+export class AppModule {
 }

src/app/app.theme.scss

@@ -0,0 +1,125 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Custom color maps
+// -----------------------------------------------------------------------------------------------------
+$navy-app-theme: (
+    50: #ECECEE,
+    100: #C5C6CB,
+    200: #9EA1A9,
+    300: #7D818C,
+    400: #5C616F,
+    500: #E89759,
+    600: #353A48,
+    700: #2D323E,
+    800: #262933,
+    900: #1E2129,
+    A100: #C5C6CB,
+    A200: #9EA1A9,
+    A400: #5C616F,
+    A700: #2D323E,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $light-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text,
+    )
+);
+
+$apside-primary-app-theme: (
+    50: #ECECEE,
+    100: #C5C6CB,
+    200: #9EA1A9,
+    300: #7D818C,
+    400: #5C616F,
+    500: #E89759,
+    600: #353A48,
+    700: #2D323E,
+    800: #262933,
+    900: #1E2129,
+    A100: #C5C6CB,
+    A200: #9EA1A9,
+    A400: #5C616F,
+    A700: #2D323E,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $light-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text,
+    )
+);
+ 
+// -----------------------------------------------------------------------------------------------------
+// @ Define the default theme
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$default-primary-palette: mat-palette($navy-app-theme);
+$default-accent-palette: mat-palette($mat-light-blue, 600, 400, 700);
+$default-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
+
+// Add ".theme-default" class to the body to activate this theme.
+// Class name must start with "theme-" !!!
+.theme-default {
+
+    // Create an Angular Material theme from the $theme map
+    @include angular-material-theme($theme);
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Define a blue-gray dark theme
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$blue-gray-dark-theme-primary-palette: mat-palette($navy-app-theme);
+$blue-gray-dark-theme-accent-palette: mat-palette($mat-blue-gray);
+$blue-gray-dark-theme-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette);
+
+// Add ".theme-blue-gray-dark" class to the body to activate this theme.
+// Class name must start with "theme-" !!!
+.theme-blue-gray-dark {
+
+    // Generate the Angular Material theme
+    @include angular-material-theme($blue-gray-dark-theme);
+}
+
+
+// -----------------------------------------------------------------------------------------------------
+// @ Typography
+// -----------------------------------------------------------------------------------------------------
+
+// Angular Material typography
+$typography: mat-typography-config(
+    $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
+    $title: mat-typography-level(20px, 32px, 600),
+    $body-2: mat-typography-level(14px, 24px, 600),
+    $button: mat-typography-level(14px, 14px, 600),
+    $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
+);
+
+// Setup the typography
+@include angular-material-typography($typography);

src/app/collaborateurs/collaborateurs.component.html

@@ -1,27 +1,5 @@
 <app-nav-menu></app-nav-menu>
 <h1> Liste des collaborateurs </h1>
 
-<mat-table matSort [dataSource]="dataSource">
-  <ng-container matColumnDef="agence">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Agence</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.agence}}</mat-cell>
-  </ng-container>
 
-  <ng-container matColumnDef="collaborateur">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Collabotareur</mat-header-cell>
-    <mat-cell *matCellDef="let row" [routerLink]="['/collaborateurs', row.id]">{{row.prenom}} {{row.nom}}</mat-cell>
-  </ng-container>
-
-  <ng-container matColumnDef="dateembauche">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Date embauche</mat-header-cell>
-    <mat-cell *matCellDef="let row">TODO AUSSI</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">TODO</mat-cell>
-  </ng-container>
-
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-</mat-table>
+<collaborateurs-table [typeRecherche]="typeRecherche" [rechercherParBU]="rechercherParBU" [roles]="roles" [displayedColumns]="displayedColumns" (eventEmitter)="event($event)" ></collaborateurs-table>

src/app/collaborateurs/collaborateurs.component.ts

@@ -1,95 +1,54 @@
-import { Component, OnInit, OnDestroy, ViewChild, ViewChildren } from '@angular/core';
+import { Component } from '@angular/core';
 
-import { Observable, Subscription } from 'rxjs';
 
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {MatSort} from '@angular/material/sort';
-
-import { CollaborateursService } from "@shared/api-swagger/api/api";
-
-import { CollaborateurModel } from "@shared/api-swagger/model/models";
-import { DisplayCollaborateur } from "@shared/displayInfo/displays";
+import { collaborateurTypeRecherche } from "@shared/utils/cles";
+import { Router } from '@angular/router';
 
 /**
     * Composant qui sert à l'affichage de la liste des collaborateurs en fonction de l'agence de son utilitateur.
-    * Seuls les commerciaux, RH et assistantes pourront accéder à la liste des collaborateurs.
-    * Les données affichées : Agence-Nom Prénom-Date Embauche-Responsable Commercial-Date Prochain EP
     */
 @Component({
   selector: 'app-collaborateurs',
   templateUrl: './collaborateurs.component.html'
 })
-export class CollaborateursComponent implements OnInit {
-
-  collaborateursDisponibles : DisplayCollaborateur[];
-  collaborateursFiltre : DisplayCollaborateur[];
-  private collaborateursDisponiblesSubscription : Subscription;
-
-  displayedColumns : string[] = ["agence", "collaborateur", "dateembauche", "referent"];
-
-  dataSource : MatTableDataSource<DisplayCollaborateur>;
+export class CollaborateursComponent {
 
   /**
-    * contenu de la recherche.
-    */
-  search = "";
+   * Type de la recherche à indiquer au composant fils qui affiche la liste des collaborateurs
+   */
+  typeRecherche: string = collaborateurTypeRecherche.collaborateurs;
 
   /**
-    * Pagination du tableau.
+    * Rôle des collaborateurs à récupérer via le service collaborateur, ici nous ne voulons que les collaborateurs (pour le moment...).
     */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-
+  roles: string[] = ["Collaborateur"];
+  
   /**
-    * Tri par les éléments du tableau selon la colonne choisie.
+    * Liste des colonnes du tableau à afficher.
     */
-  @ViewChild(MatSort) sort: MatSort;
+  displayedColumns: string[] = ["businessunit", "collaborateur", "datearrivee", "referent"];
 
   /**
-    * Spécifie si la liste des EP est en cours de chargement et d'écriture dans le tableau.
-    */
-  chargement = true;
-  constructor(private service: CollaborateursService) {}
+   * Indique si la recherche pas BU est activée ou non
+   */
+  rechercherParBU: boolean = true;
+  
+  constructor(private router: Router) {}
 
-  ngOnInit() {
-    this. collaborateursDisponiblesSubscription = this.service.getCollaborateurs(undefined,undefined,undefined,1).subscribe(
-      collaborateurs => {
-        this.initCollaborateur(collaborateurs)
-      }
-    );
-  }
-
-  initCollaborateur(collaborateurs:CollaborateurModel[]) {
-    this.collaborateursDisponibles = [];
-    let collaborateurDisplay : DisplayCollaborateur;
-    let today = new Date();
-    console.log(collaborateurs);
-    for(let c of collaborateurs) {
-      collaborateurDisplay = new DisplayCollaborateur();
-      collaborateurDisplay.id = c.id;
-      collaborateurDisplay.prenom = c.prenom;
-      collaborateurDisplay.nom = c.nom;
-      collaborateurDisplay.agence = c.businessUnit.nom;
-      collaborateurDisplay.embauche = c.dateArrivee;
-      collaborateurDisplay.anciennete = this.setAnciennete(new Date(c.dateArrivee), today);
-      collaborateurDisplay.annee = Math.floor(collaborateurDisplay.anciennete / 31536000000);
-      collaborateurDisplay.mois = Math.floor(collaborateurDisplay.anciennete / 2629800000 % 12);
-      this.collaborateursDisponibles.push(collaborateurDisplay);
-    }
-    this.collaborateursFiltre = this.collaborateursDisponibles;
-    this.dataSource = new MatTableDataSource(this.collaborateursFiltre);
-    this.dataSource.paginator = this.paginator;
-    this.dataSource.sort = this.sort;
-  }
-
-
-  setAnciennete(firstDate, secondDate) {
-    return Math.abs(firstDate-secondDate);
-  }
-
-  ngOnDestroy() {
-    if(this.collaborateursDisponiblesSubscription != undefined) {
-      this.collaborateursDisponiblesSubscription.unsubscribe();
+  /**
+   * Fonction permettant d'ouvrir les détails d'un référent ou d'un collaborateur en fonction de la case cliquée
+   * 
+   * @param event Evènement reçu par le composant enfant, contient le type du collaborateur reçu (référent, collaborateur) et les données collaborateur
+   */
+  event(event : any) {
+    switch(event.type) {
+      case "collaborateur":
+        this.router.navigate(["/collaborateurs", event.collaborateur.id]);
+        break;
+      case "referent":
+        this.router.navigate(["/referents", event.collaborateur.id]);
+        break;
     }
   }
+  
 }

src/app/collaborateurs/collaborateurs.module.ts

@@ -1,25 +1,28 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
 import { MaterialModule } from "@shared/angular-material/angular-material.module";
-
 import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
 
 import { CollaborateursComponent } from "./collaborateurs.component";
 import { DetailsCollaborateurComponent } from "./details-collaborateur/details-collaborateur.component";
+
 import { EvaluationComponent } from "./formations-collaborateur/details-evaluation/evaluation.component";
 import { EditEvaluationComponent } from "./formations-collaborateur/edit-evaluation/edit-evaluation.component";
 import { FormationsCollaboateurComponent } from "./formations-collaborateur/formations-collaborateur.component";
 
+import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
 import { CollaborateursRoutingModule } from "./collaborateurs.routing.module";
+import { AffichageDetailsCollaborateurModule } from "@shared/affichage-details-collaboarteur/affichage-details-collaborateur.module";
 
 
 @NgModule({
   declarations: [
+    CollaborateursComponent, DetailsCollaborateurComponent,
     DetailsCollaborateurComponent, EvaluationComponent, EditEvaluationComponent,
-    CollaborateursComponent, FormationsCollaboateurComponent
+    FormationsCollaboateurComponent
   ],
   exports: [
     CollaborateursComponent
@@ -27,8 +30,12 @@ import { CollaborateursRoutingModule } from "./collaborateurs.routing.module";
   imports: [
     //FormsModule,
     CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
     MaterialModule,
     NavMenuModule,
+    MatTablesModule,
+    AffichageDetailsCollaborateurModule,
     CollaborateursRoutingModule,
     RouterModule
   ],

src/app/collaborateurs/collaborateurs.routing.module.ts

@@ -1,24 +1,30 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-
 import { CollaborateursComponent } from "./collaborateurs.component";
 import { DetailsCollaborateurComponent } from "./details-collaborateur/details-collaborateur.component";
 import { FormationsCollaboateurComponent } from "./formations-collaborateur/formations-collaborateur.component";
 import { EvaluationComponent } from './formations-collaborateur/details-evaluation/evaluation.component';
 import { EditEvaluationComponent } from './formations-collaborateur/edit-evaluation/edit-evaluation.component';
 
-import { paths_collaborateurs } from '@shared/utils/paths';
+import { paths_collaborateurs } from '../shared/utils/paths';
 
-import { KeycloakGuard } from '@shared/guards/keycloakguard';
+import { AuthGuard } from '../shared/auth/auth.guard';
+import { Role  } from '../shared/utils/roles';
 
 
 const routes: Routes = [
-  { path:'', component: CollaborateursComponent, pathMatch: 'full', canActivate: [KeycloakGuard] },
-  { path:paths_collaborateurs.formations, component: FormationsCollaboateurComponent, canActivate: [KeycloakGuard] },
-  { path:paths_collaborateurs.evaluation, component: EvaluationComponent, canActivate: [KeycloakGuard] },
-  { path:paths_collaborateurs.edit, component: EditEvaluationComponent, canActivate: [KeycloakGuard] },
-  { path:paths_collaborateurs.get, component: DetailsCollaborateurComponent, canActivate: [KeycloakGuard] }
+  { path:paths_collaborateurs.formations, component: FormationsCollaboateurComponent, canActivate: [AuthGuard] },
+  { path:paths_collaborateurs.evaluation, component: EvaluationComponent, canActivate: [AuthGuard] },
+  { path:paths_collaborateurs.edit, component: EditEvaluationComponent, canActivate: [AuthGuard] },
+  { path:paths_collaborateurs.get, component: DetailsCollaborateurComponent, canActivate: [AuthGuard] },
+  { 
+    path:'',
+    component: CollaborateursComponent,
+    canActivate: [AuthGuard],
+    data: { roles: [Role.assistante, Role.commercial, Role.rh] },
+    pathMatch: 'full'
+  }
 ];
 
 

src/app/collaborateurs/details-collaborateur/details-collaborateur.component.html

@@ -1,42 +1,3 @@
 <app-nav-menu></app-nav-menu>
-<ng-container *ngIf="collaborateur!=undefined">
-  <h2>{{ collaborateur.prenom }} {{ collaborateur.nom }} </h2>
 
-  <h3>Agence : {{ collaborateur.businessUnit.nom}}</h3>
-  <h3>Date embauche : {{ collaborateur.dateArrivee}}</h3>
-</ng-container>
-<ng-container *ngIf="collaborateur==undefined || !eploaded">
-  <mat-spinner></mat-spinner>
-</ng-container>
-
-<ng-container *ngIf= "eploaded && epEffectues.length==0">
-  <h3> Aucun EP effectué encore </h3>
-</ng-container>
-
-<ng-container *ngIf= "eploaded && epEffectues.length!=0">
-  <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.dateentretien}}</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"> {{ row.referent.prenom }} {{ row.referent.nom }}</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>
+<affichage-details-collaborateur [idCollaborateur]="idCollaborateur"></affichage-details-collaborateur>

src/app/collaborateurs/details-collaborateur/details-collaborateur.component.ts

@@ -1,86 +1,20 @@
-import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
+import { Component } from '@angular/core';
 
-import { Observable, Subscription } from 'rxjs';
 import {ActivatedRoute} from '@angular/router';
 
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {MatSort} from '@angular/material/sort';
-
-import { CollaborateursService, EpService } from "@shared/api-swagger/api/api";
-
-import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel";
-import { EpModel } from "@shared/api-swagger/model/epModel";
-import { DisplayEP } from "@shared/displayInfo/displays";
 
 /**
-    */
+  * Composant pour gérer l'affichage des détails d'un collaborateur  avec ses formations et ses EP
+  */
 @Component({
   selector: 'app-details-collaborateur',
   templateUrl: './details-collaborateur.component.html'
 })
-export class DetailsCollaborateurComponent implements OnInit {
-//epCollaborateurIdCollaborateurGet
-  collaborateur: CollaborateurModel;
-  private collaborateurSubscription : Subscription;
-  private epSubscription : Subscription;
-  epEffectues : DisplayEP[];
-  displayedColumns: string[] = ["dateentretien", "referent", "type", "details"];
-  dataSource : MatTableDataSource<DisplayEP>;
-  eploaded = false;
-  idCollaborateur: any;
-
-  /**
-    * Pagination du tableau.
-    */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+export class DetailsCollaborateurComponent {
 
-  /**
-    * Tri par les éléments du tableau selon la colonne choisie.
-    */
-  @ViewChild(MatSort) sort: MatSort;
+  idCollaborateur: string;
 
-  constructor(private collaborateusrService:CollaborateursService, private epService:EpService, private route: ActivatedRoute) {}
-
-  ngOnInit() {
+  constructor(private route: ActivatedRoute) {
     this.idCollaborateur = this.route.snapshot.paramMap.get('id');
-    this.collaborateurSubscription = this.collaborateusrService.getCollaborateurById(this.idCollaborateur).subscribe(
-      collaborateur => this.initCollaborateur(collaborateur[0]),
-      err => console.log(err)
-    );
-  }
-
-  initCollaborateur(collaborateur:CollaborateurModel) {
-    this.collaborateur = collaborateur;
-    this.epSubscription = this.epService.getEPByCollaborateur(this.idCollaborateur).subscribe(
-      ep => this.initEP(ep)
-    )
-  }
-
-  initEP(ep:EpModel[]) {
-    this.epEffectues = [];
-    let epDisplay : DisplayEP;
-    for(let un_ep of ep) {
-      epDisplay = new DisplayEP();
-      epDisplay.id = un_ep.id;
-      epDisplay.referent = un_ep.referent;
-      epDisplay.etat = un_ep.etat;
-      epDisplay.type = un_ep.type;
-      epDisplay.dateentretien = un_ep.dateEntretien;
-      this.epEffectues.push(epDisplay);
-    }
-    this.dataSource = new MatTableDataSource(this.epEffectues);
-    this.dataSource.paginator = this.paginator;
-    this.dataSource.sort = this.sort;
-    this.eploaded = true;
-  }
-
-  ngOnDestroy() {
-    if(this.epSubscription!= undefined) {
-      this.epSubscription.unsubscribe();
-    }
-    if(this.collaborateurSubscription!= undefined) {
-      this.collaborateurSubscription.unsubscribe();
-    }
   }
 }

src/app/collaborateurs/formations-collaborateur/details-evaluation/evaluation.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
 /**
-    */
+  * Composant pour faire affhcier l'évaluation d'une formation d'un collaborateur.
+  */
 @Component({
   selector: 'app-evaluation ',
   templateUrl: './evaluation.component.html'

src/app/collaborateurs/formations-collaborateur/edit-evaluation/edit-evaluation.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
 /**
-    */
+  * Composant pour permettre à un collaborateur de faire l'évaluation d'une formation
+  */
 @Component({
   selector: 'app-edit-evaluation',
   templateUrl: './edit-evaluation.component.html'

src/app/collaborateurs/formations-collaborateur/formations-collaborateur.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
 /**
-    */
+  * Composant pour afficher la liste des formations auxquelles à participer le collaborateur.
+  */
 @Component({
   selector: 'app-formations-collaborateur',
   templateUrl: './formations-collaborateur.component.html'

src/app/demandes-delegation/demandes-delegation.component.html

@@ -1,2 +1,11 @@
 <app-nav-menu></app-nav-menu>
-<h1>Liste des demandes de délégations</h1>
+<h2>Liste de vos demandes de délégations en attente</h2>
+<ng-container *ngIf="chargement">
+    <mat-spinner></mat-spinner>
+</ng-container>
+<ng-container *ngIf="!chargement">
+    <p *ngIf="demandesDelegation.length==0">
+        Aucune demande de délégation en cours.
+    </p>
+    <app-demande-delegation *ngFor="let demandeDelegation of demandesDelegation" [demandeDelegation]="demandeDelegation" (eventEmitter)="donnerReponse($event)"></app-demande-delegation>
+</ng-container>

src/app/demandes-delegation/demandes-delegation.component.ts

@@ -1,15 +1,91 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { CollaborateurDTO, DemandeDelegationDTO, DemandesDelegationService, EtatDemande } from '@shared/api-swagger';
+import { cles } from '@shared/utils/cles';
+import { Subscription } from 'rxjs';
 
 /**
-    */
+ *  Composant pour faire afficher la liste des demandes de délégation reçues
+  */
 @Component({
   selector: 'app-demandes-delegation',
   templateUrl: './demandes-delegation.component.html'
 })
 export class DemandesDelegationComponent implements OnInit {
 
-  constructor() {}
+
+  idCollaborateurConnecte: string = "";
+
+  chargement: boolean = true;
+  
+  demandesDelegation: DemandeDelegationDTO[] = [];
+  
+  demandeDelegationSubscription: Subscription;
+  demandeDelegationReponseSubscription: Subscription;
+  constructor(private demandeDelegationService: DemandesDelegationService, private matDialog: MatDialog) {}
+
 
   ngOnInit() {
+    this.setIdCollaborateurConnecte();
+  }
+
+  setIdCollaborateurConnecte() {
+    if(sessionStorage.getItem(cles.sessionKeyConnectee) == undefined) {
+      setTimeout( () => this.setIdCollaborateurConnecte(), 1000);
+    }
+    else {
+      const collaborateurConnecte: CollaborateurDTO = JSON.parse(sessionStorage.getItem(cles.sessionKeyConnectee)); 
+      this.idCollaborateurConnecte = collaborateurConnecte.id;
+      this.updateListeDemandesDelegation();
+    }
+  }
+
+  /**
+   * Cette fonction permet de mettre à jour l'affichage de la liste des demande de délégation
+   */
+  updateListeDemandesDelegation() {
+    this.chargement = false;
+    this.demandeDelegationSubscription = this.demandeDelegationService.getDemandesDelegationReferent(this.idCollaborateurConnecte).subscribe(
+      demandeDelegations => this.demandesDelegation = demandeDelegations,
+      err => console.log(err)
+    );
+  }
+
+  donnerReponse(event: DemandeDelegationDTO) {
+    console.log(event);
+    const id: number = event.id;
+    this.demandeDelegationReponseSubscription = this.demandeDelegationService.updateDemandeDelegation(event, event.id).subscribe(
+      () => {
+        let data: any = {
+          acceptee: false
+        };
+        if(event.etatDemande == EtatDemande.Validee) {
+          data.acceptee = true,
+          data.ep = event.ep
+        }
+        this.demandesDelegation = this.demandesDelegation.filter(d => d.id != id);
+        this.matDialog.open(DialogValidationReponse, {data:data});
+      },
+      err => console.log(err)
+    );
+  }
+
+  ngOnDestroy() {
+    if(this.demandeDelegationSubscription != undefined) {
+      this.demandeDelegationSubscription.unsubscribe();
+    }
+    if(this.demandeDelegationReponseSubscription != undefined) {
+      this.demandeDelegationReponseSubscription.unsubscribe();
+    }
   }
 }
+
+
+@Component({
+  selector: "dialog-validation-reponse",
+  templateUrl: "./dialog-validation-reponse.html"
+})
+export class DialogValidationReponse {
+  constructor(@Inject(MAT_DIALOG_DATA)public data: any, private matDialog: MatDialogRef<DialogValidationReponse>) {}
+  fermer() {this.matDialog.close();}
+}

src/app/demandes-delegation/demandes-delegation.module.ts

@@ -8,13 +8,15 @@ import { MaterialModule } from "@shared/angular-material/angular-material.module
 import {NavMenuModule} from '@shared/nav-menu/nav-menu.module';
 
 
-import { DemandesDelegationComponent } from './demandes-delegation.component';
-import { DemandeDelegationComponent } from './details-demande-delegation/demande-delegation.component';
+import { DemandesDelegationComponent, DialogValidationReponse } from './demandes-delegation.component';
+import { DemandeDelegationComponent, DialogReponseDemandeDelegation } from './details-demande-delegation/demande-delegation.component';
 import { DemandesDelegationRoutingModule } from './demandes-delegation.routing.module';
 
 
 @NgModule({
-  declarations: [ DemandesDelegationComponent, DemandeDelegationComponent
+  declarations: [ 
+    DemandesDelegationComponent, DemandeDelegationComponent,
+    DialogReponseDemandeDelegation, DialogValidationReponse
   ],
   exports: [ DemandesDelegationComponent
   ],
@@ -22,8 +24,9 @@ import { DemandesDelegationRoutingModule } from './demandes-delegation.routing.m
     MaterialModule,
     NavMenuModule,
     DemandesDelegationRoutingModule,
-    RouterModule
-
+    RouterModule,
+    FormsModule,
+    CommonModule
   ],
 })
 export class DemandesDelegationModule {}

src/app/demandes-delegation/demandes-delegation.routing.module.ts

@@ -3,23 +3,19 @@ import { Routes, RouterModule } from '@angular/router';
 
 
 import { DemandesDelegationComponent } from "./demandes-delegation.component";
-import { DemandeDelegationComponent } from "./details-demande-delegation/demande-delegation.component";
 
-import { KeycloakGuard } from '@shared/guards/keycloakguard';
+import { AuthGuard } from '@shared/auth/auth.guard';
 
-import { paths_demandes_delegation } from "@shared/utils/paths";
 
+/**
+  * Routes du module demandes delegation
+  */
 const routes: Routes = [
   {
     path:'',
     component: DemandesDelegationComponent,
     pathMatch: 'full',
-    canActivate: [KeycloakGuard]
-  },
-  {
-    path: paths_demandes_delegation.get,
-    component: DemandeDelegationComponent,
-    canActivate: [KeycloakGuard]
+    canActivate: [AuthGuard]
   }
 ];
 

src/app/demandes-delegation/details-demande-delegation/demande-delegation.component.html

@@ -1,2 +1,15 @@
-<app-nav-menu></app-nav-menu>
-<h1> Demande delegation </h1>
+<mat-card>
+    <mat-card-header>
+        <mat-card-title>{{demandeDelegation.ep.collaborateur.nom}} {{demandeDelegation.ep.collaborateur.prenom}}</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+        <p>Demande effectuée le {{ demandeDelegation.dateDemande | date: 'dd/MM/yyyy'}} par {{demandeDelegation.ep.referent.nom}} {{demandeDelegation.ep.referent.prenom}} </p>
+        <p *ngIf="demandeDelegation.ep.datePrevisionnelle == undefined"> {{demandeDelegation.ep.type}} en attente d'une date</p>
+        <p *ngIf="demandeDelegation.ep.datePrevisionnelle != undefined"> {{demandeDelegation.ep.type}} prévu le {{demandeDelegation.ep.datePrevisionnelle | date : 'dd/MM/yyyy'}}  </p>
+
+    </mat-card-content>
+    <mat-card-footer>
+        <button mat-raised-button (click)="repondreALaDemande(etatDemande.Validee)" color="primary">Accepter la demande</button>
+        <button mat-raised-button (click)="repondreALaDemande(etatDemande.Rejetee)" color="warn">Refuser la demande</button>
+    </mat-card-footer>
+</mat-card>

src/app/demandes-delegation/details-demande-delegation/demande-delegation.component.ts

@@ -1,15 +1,117 @@
-import { Component, OnInit } from '@angular/core';
+import { i18nMetaToJSDoc } from '@angular/compiler/src/render3/view/i18n/meta';
+import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { DemandeDelegationDTO, DemandeEPIDTO, EtatDemande } from '@shared/api-swagger';
+import { BrowserStack } from 'protractor/built/driverProviders';
+import { Subscription } from 'rxjs';
+
 
 /**
-    */
+ * Composant pour faire afficher les détails d'une demande de délégation
+ */
 @Component({
   selector: 'app-demande-delegation',
   templateUrl: './demande-delegation.component.html'
 })
 export class DemandeDelegationComponent implements OnInit {
+  @Input() demandeDelegation: DemandeDelegationDTO;
+  @Output() eventEmitter: EventEmitter<any> = new EventEmitter<any>();
+  etatDemande: any = EtatDemande;
+
+  dialogSubscription: Subscription;
+
+
 
-  constructor() {}
+
+
+  constructor(private matDialog: MatDialog) {}
 
   ngOnInit() {
   }
+
+  accepter() {
+    this.repondreALaDemande(EtatDemande.Validee);
+  }
+
+
+  repondreALaDemande(etatDemande: EtatDemande) {
+    const data : any = {
+      etatDemande : etatDemande,
+      demandeDelegation : this.demandeDelegation
+    };
+    const dialogRef: MatDialogRef<DialogReponseDemandeDelegation> = this.matDialog.open(DialogReponseDemandeDelegation, {data: data})
+
+    this.dialogSubscription = dialogRef.afterClosed().subscribe(
+      reponse => {
+        if(reponse.engistree) {
+          this.eventEmitter.emit(reponse.demandeDelegation);
+        }
+      }
+    );
+  }
+
+  ngOnDestroy() {
+    if(this.dialogSubscription != undefined) {
+      this.dialogSubscription.unsubscribe();
+    }
+  }
 }
+
+@Component({
+  selector: "dialog-reponse-demande-delegation",
+  templateUrl: "./dialog-reponse-demande-delegation.html"
+})
+export class DialogReponseDemandeDelegation {
+
+  /**
+   * Texte à afficher lors de la réponse à une demande de délégation. Le texte dépend de si la demande va être acceptée ou bien refusée.
+   */
+  texte: string ="";
+
+  /**
+   * Indique si la réponse est un refus.
+   */
+  estRefus: boolean = false;
+
+  raisonRefus: string;
+
+  /**
+   * Contient l'information indiquant si la réponse a été validé et doit être enregistré ou non et la demande de délégation cible.
+   */
+  reponse: any = {
+    engistree: false
+  }
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data, private dialogRef: MatDialogRef<DialogReponseDemandeDelegation>) { 
+    switch(data.etatDemande) {
+      case EtatDemande.Validee:
+        this.texte = "Souhaitez-vous vraiment accepter la demande de délégation et devenir le nouveau référent de l'EP ?";
+        break;
+      case EtatDemande.Rejetee:
+        this.texte = "Souhaitez-vous vraiment refuser la demande de délégation ?";
+        this.estRefus = true;
+        break;
+    }
+  }
+
+  enregistrer() {
+    if(this.estRefus && this.raisonRefus == "")
+      return;
+    let demandeDelegation: DemandeDelegationDTO = this.data.demandeDelegation;
+    demandeDelegation.etatDemande = this.data.etatDemande;
+    demandeDelegation.raisonRefus = this.raisonRefus;
+    this.reponse = {
+      engistree: true,
+      demandeDelegation: demandeDelegation
+    }
+    this.fermer();
+  }
+
+   
+
+  fermer() {
+    this.dialogRef.close(this.reponse);
+  }
+
+
+}

src/app/demandes-delegation/details-demande-delegation/dialog-reponse-demande-delegation.html

@@ -0,0 +1,9 @@
+<p>{{texte}}</p>
+<div>
+    <mat-form-field *ngIf="estRefus" appearance="fill">
+        <mat-label>Raison du refus</mat-label>
+        <textarea matInput [(ngModel)]="raisonRefus"></textarea>
+    </mat-form-field>
+</div>
+<button mat-raised-button (click)="enregistrer()" color="primary">Enregister la réponse</button>
+<button mat-raised-button (click)="fermer()" color="warn">Annuler</button>

src/app/demandes-delegation/dialog-validation-reponse.html

@@ -0,0 +1,4 @@
+<p>Votre réponse à la demande de délégation a bien été enregistrée</p>
+
+<button *ngIf="data.acceptee" (click)="fermer()" [routerLink]="['/ep', data.ep.id]" mat-raised-button>Accéder à l'EP</button>
+<button mat-raised-button (click)="fermer()">Fermer</button>

src/app/demandes-formation/demandes-formation.component.html

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

src/app/demandes-formation/demandes-formation.component.ts

@@ -1,15 +1,28 @@
 import { Component, OnInit } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { DemandeFormationDTO } from '@shared/api-swagger';
+import { DialogDemandeFormationComponent } from './mat-dialog/dialog-demande-formation.component';
 
 /**
-    */
+  * Composant pour faire afficher la liste des demandes de formations
+  * Les RH pourront valider ou refuser les demandes
+  */
 @Component({
   selector: 'app-demandes-formation',
   templateUrl: './demandes-formation.component.html'
 })
 export class DemandesFormationComponent implements OnInit {
 
-  constructor() {}
+  displayedColumns :  string[] = ["businessunit", "collaborateur", "datedemande", "demanderh", "ep", "etat", "datereponse"]; 
+
+  constructor(private dialog: MatDialog) {}
+
 
   ngOnInit() {
   }
+
+  afficherDetailDemandeFormation(demandeFormation: DemandeFormationDTO) {
+    const datas = { data: demandeFormation, width: "80%", height: '80%'};
+    this.dialog.open(DialogDemandeFormationComponent, datas);
+  }
 }

src/app/demandes-formation/demandes-formation.module.ts

@@ -1,32 +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 {}

src/app/demandes-formation/demandes-formation.routing.module.ts

@@ -6,15 +6,18 @@ import { DemandesFormationComponent } from "./demandes-formation.component";
 import { DemandeFormationComponent } from "./details-demande-formation/demande-formation.component";
 import { NewDemandeFormationComponent } from "./new-demande-formation/new-demande-formation.component";
 
-import { KeycloakGuard } from '@shared/guards/keycloakguard';
+import { AuthGuard } from '../shared/auth/auth.guard';
 
-import { paths_demandes_formation } from "@shared/utils/paths";
+import { paths_demandes_formation } from "../shared/utils/paths";
 
+/**
+  * Routes du module demandes formation
+  */
 const routes: Routes = [
-  { path:'', component: DemandesFormationComponent, pathMatch: 'full', canActivate: [KeycloakGuard] },
-  { path:paths_demandes_formation.new, component: NewDemandeFormationComponent, canActivate: [KeycloakGuard] },
-  { path:paths_demandes_formation.get, component: DemandeFormationComponent, canActivate: [KeycloakGuard] }
-
+  { path:paths_demandes_formation.new, component: NewDemandeFormationComponent, canActivate: [AuthGuard] },
+  { path:paths_demandes_formation.get, component: DemandeFormationComponent, canActivate: [AuthGuard] },
+  { path:'', component: DemandesFormationComponent, pathMatch: 'full', canActivate: [AuthGuard] }
+  
 ];
 
 @NgModule({

src/app/demandes-formation/details-demande-formation/demande-formation.component.ts

@@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 
 /**
-    */
+  * Composant pour afficher les détails d'une demandes de formation
+  * (peut ne pas être utile)
+  */
 @Component({
   selector: 'app-demande-formation',
   templateUrl: './demande-formation.component.html'

src/app/demandes-formation/mat-dialog/dialog-demande-formation.component.html

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

src/app/demandes-formation/mat-dialog/dialog-demande-formation.component.ts

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

src/app/demandes-formation/new-demande-formation/new-demande-formation.component.html

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

src/app/demandes-formation/new-demande-formation/new-demande-formation.component.ts

@@ -1,15 +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.scss']
 })
 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();
+      }
 
-  ngOnInit() {
-  }
+      if(this.origineDemandeSubscription != undefined) {
+        this.origineDemandeSubscription.unsubscribe();
+      }
+    }
 }

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,94 @@
+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";
+
+/**
+ * Composant pour afficher la liste des engagements EP
+ */
+@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);
+    }
+}
+
+/**
+ * Dialog pour afficher les détails d'un engagement et y donner une réponse si possible
+ */
+@Component( {
+    selector: "dialog-engagements",
+    templateUrl: "dialog-engagements.html"
+})
+export class DialogEngagementsComponent {
+    ep: EpInformationDTO;
+    collaborateur: CollaborateurDTO;
+    referent: CollaborateurDTO;
+    etatEngagement: any = EtatEngagement;
+    engagementsSubscription: Subscription;
+    
+    /**
+     * Indique si l'on souhaite donner une réponse à l'engagement encore en cours ou non
+     */
+    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/ep-saisie/ep-saisie.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
 /**
-    */
+  * Composant permettant la saisie d'un EP
+  */
 @Component({
   selector: 'app-ep-saisie',
   templateUrl: './ep-saisie.component.html'

src/app/ep-saisie/ep-saisie.module.ts

@@ -14,6 +14,9 @@ import { EpaSixAnsSaisieComponent } from './epa-six-ans-saisie/epa-six-ans-saisi
 
 import { EpSaisieRoutingModule } from './ep-saisie.routing.module';
 
+/**
+  * Module de la saisie de l'EP
+  */
 @NgModule({
   declarations: [EpSaisieComponent, EpsSaisieComponent, EpaSaisieComponent,
     EpaSixAnsSaisieComponent

src/app/ep-saisie/ep-saisie.routing.module.ts

@@ -7,28 +7,25 @@ import { EpsSaisieComponent } from "./eps-saisie/eps-saisie.component";
 import { EpaSaisieComponent } from "./epa-saisie/epa-saisie.component";
 import { EpaSixAnsSaisieComponent } from "./epa-six-ans-saisie/epa-six-ans-saisie.component";
 
-import { KeycloakGuard } from '@shared/guards/keycloakguard';
+import { AuthGuard } from '../shared/auth/auth.guard';
 
-import { paths_saisie_ep } from "@shared/utils/paths";
+import { paths_saisie_ep } from "../shared/utils/paths";
 
+/**
+  * Routes du module saisie ep
+  */
 const routes: Routes = [
   { path:'',
     component: EpSaisieComponent,
-    canActivate: [KeycloakGuard],
+    canActivate: [AuthGuard],
     children: [
-      { path:paths_saisie_ep.epa, component: EpaSaisieComponent, canActivate: [KeycloakGuard] },
-      { path:paths_saisie_ep.eps, component: EpsSaisieComponent, canActivate: [KeycloakGuard] },
-      { path:paths_saisie_ep.epa6ans, component: EpaSixAnsSaisieComponent, canActivate: [KeycloakGuard] }
+      { path:paths_saisie_ep.epa, component: EpaSaisieComponent, canActivate: [AuthGuard] },
+      { path:paths_saisie_ep.eps, component: EpsSaisieComponent, canActivate: [AuthGuard] },
+      { path:paths_saisie_ep.epa6ans, component: EpaSixAnsSaisieComponent, canActivate: [AuthGuard] }
     ]
   }
 ];
 
-/*
-/saisie-ep
-/saisie-ep/eps
-/saisie-ep/epa
-/saisie-ep/epasixans
-*/
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/ep-saisie/epa-saisie/epa-saisie.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
 /**
-    */
+  * Composant pour saisir le document EPA
+  */
 @Component({
   selector: 'app-epa-saisie',
   templateUrl: './epa-saisie.component.html'

src/app/ep-saisie/epa-six-ans-saisie/epa-six-ans-saisie.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
 /**
-    */
+  * Composant pour saisir le document EPA des six ans
+  */
 @Component({
   selector: 'app-epa-six-ans-saisie',
   templateUrl: './epa-six-ans-saisie.component.html'

src/app/ep-saisie/eps-saisie/eps-saisie.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
 /**
-    */
+  * Composant permettant la saisie du document EPS
+  */
 @Component({
   selector: 'app-eps-saisie',
   templateUrl: './eps-saisie.component.html'

src/app/ep/details-ep/details-ep.component.html

@@ -0,0 +1,97 @@
+<app-nav-menu></app-nav-menu>
+<div *ngIf="ep!=undefined" class="detailsep">
+    <p> Collaborateur : {{ep.collaborateur.nom}} {{ep.collaborateur.prenom}} ({{ep.collaborateur.businessUnit.nom}}) <button mat-stroked-button [routerLink]="['/collaborateurs',ep.collaborateur.id]">Accéder au détails collaborateur</button></p> 
+    <p> Référent : {{ep.referent.nom}} {{ep.referent.prenom}} </p>
+    <p> Entretien le : {{ep.datePrevisionnelle | date: 'dd/MM/yyyy'}}</p>
+    <p> Statut : {{afficherTypeEP(ep.statut)}}</p>
+
+    <button mat-raised-button color="primary" title="Valider le déroulement de l'entretien">Valider entretien</button>
+
+    <button mat-raised-button color="primary" title="Signer l'EP">Signer</button>
+
+    <mat-tab-group mat-align-tabs="start">
+        <mat-tab label="Les objectifs">
+            <ep-objectifs [ep]="ep"></ep-objectifs>
+        </mat-tab>
+       
+        <mat-tab label="La saisie">
+            
+            <mat-vertical-stepper class="saisie" linear  #stepper>
+                <mat-step label="Mission/Projet" completed="true">
+
+                </mat-step>
+
+                <mat-step label="Compétences générales" completed="true">
+
+                </mat-step>
+
+                <mat-step label="Compétences techniques" completed="true">
+
+                </mat-step>
+
+                <mat-step label="Apside" completed="true">
+
+                </mat-step>
+
+
+                <mat-step label="Demande d'augmentation salaire" completed="true">
+
+                </mat-step>
+
+                <mat-step label="Formation effectuée" completed="true">
+
+                </mat-step>
+
+                <mat-step label="Evolution du collaborateur" completed="true">
+                    
+                </mat-step>
+
+            </mat-vertical-stepper>
+        </mat-tab>
+
+        <mat-tab label="Les engagements" *ngIf="afficherDemandesFormationEtEngagements()">
+            <ep-engagements [engagements]="ep.engagements"></ep-engagements>
+        </mat-tab>
+        <mat-tab label="Les demandes de formation" *ngIf="afficherDemandesFormationEtEngagements()">
+            <ep-demandes-formation [demandesFormation]="ep.demandesFormation"></ep-demandes-formation>
+        </mat-tab>
+
+        <mat-tab label="Commentaire assistant">
+            <ep-commentaires-assistant [ep]="ep" [collaborateurConnecte]="collaborateurConnecte"></ep-commentaires-assistant>
+        </mat-tab>
+
+        <mat-tab label="Choix de dates" *ngIf="afficherChoixDates()" > 
+            <ep-choix-date [rdvsEntretien]="ep.propositionsEntretien"></ep-choix-date>
+        </mat-tab>
+
+        <mat-tab label="Proposition de date" *ngIf="epNonEffectue()">
+            <ep-propositions-dates [choixTypeEntretien]="ep.choixTypeEntretien"></ep-propositions-dates>
+        </mat-tab>
+        
+        <mat-tab label="Demande délégation" *ngIf="epNonEffectue()">
+            <ep-demande-delegation [demande]="ep.demandesDelegation"></ep-demande-delegation>
+        </mat-tab>
+        <mat-tab label="Les participants">
+            <ep-participants [ep]="ep"></ep-participants>
+        </mat-tab>
+
+      </mat-tab-group>
+</div>
+<ng-container *ngIf="ep==undefined">
+    <mat-spinner></mat-spinner>
+</ng-container>
+<!--
+
+    <ng-container *ngIf="ep == undefined" >
+        <mat-spinner></mat-spinner>
+    </ng-container>
+    
+    <ng-container *ngIf="ep != undefined">
+        <p> Collaborateur : {{ep.collaborateur.nom + " " + ep.collaborateur.prenom}}</p>
+        <p *ngIf="ep.referent != undefined"> Référent : {{ep.referent.nom + " " + ep.referent.prenom}}</p>
+        <p *ngIf="ep.referent == undefined"> Aucun référent pour </p>
+        <p> Entretien le : {{ep.datePrevisionnelle }}</p>
+        
+        
+    </ng-container>
+-->

src/app/ep/details-ep/details-ep.component.scss

@@ -0,0 +1,4 @@
+/*.saisie {
+    overflow-y: scroll;
+    height: 100%;
+}*/

src/app/ep/details-ep/details-ep.component.ts

@@ -0,0 +1,72 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { affichageStatut, EpDTO, EpService, StatutEp, estEPEnCours, estEPSigne, estEPEnAttenteSignatureCollaborateur, estEPEffectue, CollaborateurDTO } from "@shared/api-swagger";
+import { AuthService } from "@shared/auth/auth.service";
+import { cles } from "@shared/utils/cles";
+import { Role } from "@shared/utils/roles";
+import { Subscription } from "rxjs";
+
+/**
+ * Composant pour afficher les détails d'un EP
+ */
+@Component({
+    selector : "details-ep",
+    templateUrl: "./details-ep.component.html",
+    styleUrls: ["./details-ep.component.scss"]
+})
+export class DetailsEPComponent implements OnInit {
+
+    epSubscription : Subscription;
+
+    idEp: any;
+
+    role : Role;
+    roleUtilisateur: string;
+
+    collaborateurConnecte : CollaborateurDTO;
+
+    ep : EpDTO;
+    constructor(private epService : EpService, private route : ActivatedRoute, private authService: AuthService) {
+        this.roleUtilisateur = authService.firstRole;
+    }
+
+    ngOnInit() {
+        this.idEp = this.route.snapshot.paramMap.get("id");
+        this.epSubscription = this.epService.getEPById(this.idEp).subscribe(
+            ep => {
+                this.ep = ep;
+                console.log(this.ep);
+            },
+            err => console.log(err) 
+        );
+        this.setCollaborateurConnecte();
+    }
+
+    setCollaborateurConnecte() {
+        if(sessionStorage.getItem(cles.sessionKeyConnectee) == undefined) {
+          setTimeout( () => this.setCollaborateurConnecte(), 1000);
+        }
+        else {
+          this.collaborateurConnecte = JSON.parse(sessionStorage.getItem(cles.sessionKeyConnectee));
+
+        }
+      }
+
+    afficherDemandesFormationEtEngagements() {
+        return estEPSigne(this.ep.statut) || estEPEnAttenteSignatureCollaborateur(this.ep.statut);
+    }
+
+    afficherTypeEP(statutEP: StatutEp) {
+        return affichageStatut(statutEP);
+    }
+
+
+    afficherChoixDates() {
+        return this.ep.statut == StatutEp.DatesProposees;
+    }
+
+    epNonEffectue() {
+        return estEPEnCours(this.ep.statut) && !estEPEnAttenteSignatureCollaborateur(this.ep.statut) && !estEPEffectue(this.ep.statut);
+    }
+    
+}

src/app/ep/details-ep/ep-augmentation-salaire/ep-augmentation-salaire.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
 /**
-    */
+  * Composant permettant de faire la demande d'augmentation de salaire
+  */
 @Component({
   selector: 'app-ep-augmentation-salaire',
   templateUrl: './ep-augmentation-salaire.component.html'

src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.html

@@ -0,0 +1,8 @@
+<h3>Choisir une date</h3>
+
+<mat-radio-group class="radio-rdv"  [(ngModel)]="choixRdv">
+    <mat-radio-button  *ngFor="let rdv of rdvsEntretien" [value]="rdv">
+        {{rdv.typeEntretien.libelle}} le {{rdv.dateEntretien | date : 'dd/MM/yyyy à hh:mm'}}
+      </mat-radio-button>
+</mat-radio-group>
+<button mat-raised-button color="primary">Valider le choix</button>

src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.scss

@@ -0,0 +1,5 @@
+.radio-rdv {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+}

src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { RDVEntretienDTO } from '@shared/api-swagger';
+
+/**
+  * Composant qui permet au collaborateur de faire un choix parmi les date proposées
+  */
+@Component({
+  selector: 'ep-choix-date',
+  templateUrl: './ep-choix-date.component.html',
+  styleUrls: ["ep-choix-date.component.scss"]
+})
+export class EpChoixDateComponent  {
+  @Input() rdvsEntretien : Array<RDVEntretienDTO>;
+  choixRdv : RDVEntretienDTO;
+  constructor() {}
+}

src/app/ep/details-ep/ep-commentaire-referent/ep-commentaire-referent.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
 /**
-    */
+  * Composant pour permettre au référent d'ajouter son commentaire et à tous les participants de le consulter 
+  */
 @Component({
   selector: 'app-ep-commentaire-referent',
   templateUrl: './ep-commentaire-referent.component.html'

src/app/ep/details-ep/ep-commentaires-assistant/dialog-ep-ajouter-commentaire-assistant.html

@@ -0,0 +1,12 @@
+<h3 *ngIf="nouveauCommentaire">Ajouter un commentaire</h3>
+<h3 *ngIf="!nouveauCommentaire">Modifier un commentaire</h3>
+
+<div>
+    <mat-form-field appearance="fill">
+        <mat-label>Commentaire</mat-label>
+        <textarea matInput [(ngModel)]="commentaire"></textarea>
+    </mat-form-field>
+</div>
+
+<button mat-raised-button color="primary" (click)="enregistrer()">Enregister les modifications</button>
+<button mat-raised-button color="warn" (click)="annuler()">Annuler</button>

src/app/ep/details-ep/ep-commentaires-assistant/dialog-ep-supprimer-commentaire-assistant.html

@@ -0,0 +1,3 @@
+<p> Êtes-vous certain de vouloir supprimer votre commentaire ?</p>
+<button mat-raised-button color="warn" (click)="valider(true)">Supprimer</button>
+<button mat-raised-button color="primary" (click)="valider(false)">Annuler</button>

src/app/ep/details-ep/ep-commentaires-assistant/ep-commentaires-assistant.component.html

@@ -0,0 +1,31 @@
+<ng-container *ngIf="ep.commentairesAssistant == undefined || ep.commentairesAssistant.length == 0">
+    Aucun commentaire assistant
+</ng-container>
+
+<button mat-raised-button *ngIf="!aDejaCommente()" (click)="nouveauCommentaire()">Ajouter un commentaire</button>
+
+<ng-container *ngIf="ep.commentairesAssistant != undefined && ep.commentairesAssistant.length != 0">
+    Liste des commentaires assistants :
+    <mat-card *ngFor="let commentaire of ep.commentairesAssistant">
+        <p>
+            {{commentaire.assistant}}
+            <ng-container *ngIf="commentaire.idAssistant == collaborateurConnecte.id">
+                <mat-icon (click)="modifierCommentaire(commentaire)">edit</mat-icon>
+                <mat-icon (click)="supprimerCommentaire(commentaire.id)">delete</mat-icon>
+            </ng-container>
+        </p>
+        <p>{{commentaire.commentaire}}</p>
+        
+    </mat-card>
+    <!--
+        <ul>
+            <li *ngFor="let commentaire of ep.commentairesAssistant">
+                <p>Assistant : {{commentaire.assistant}}</p>
+                <p>{{commentaire.commentaire}}</p>
+            </li>
+        </ul>
+    -->
+</ng-container>
+<mat-card>
+
+</mat-card>

src/app/ep/details-ep/ep-commentaires-assistant/ep-commentaires-assistant.component.ts

@@ -0,0 +1,131 @@
+import { analyzeAndValidateNgModules } from '@angular/compiler';
+import { Component, Inject, Input } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { CollaborateurDTO, CommentaireAssistantDTO, EpDTO } from '@shared/api-swagger';
+import { AuthService } from '@shared/auth/auth.service';
+import { Subscription } from 'rxjs';
+
+/**
+  * Composant pour permettre au référent d'ajouter son commentaire et à tous les participants de le consulter
+  */
+@Component({
+  selector: 'ep-commentaires-assistant',
+  templateUrl: './ep-commentaires-assistant.component.html'
+})
+export class EpCommentairesAssistantComponent {
+
+  @Input() ep : EpDTO;
+
+  @Input() collaborateurConnecte : CollaborateurDTO;
+
+  dialogAjoutModificationSubscription : Subscription;
+  dialogSuppressionSubscription : Subscription;
+
+  constructor(private matDialog: MatDialog) {}
+
+
+  aDejaCommente() {
+    return this.ep.commentairesAssistant != undefined && this.ep.commentairesAssistant.some( c => c.idAssistant == this.collaborateurConnecte.id);
+  }
+
+  nouveauCommentaire() {
+    this.ouvrirSaisiCommentaire(undefined);
+  }
+    
+  modifierCommentaire(commentaire : CommentaireAssistantDTO) {
+     this.ouvrirSaisiCommentaire(commentaire);
+  }
+
+  supprimerCommentaire(id : number) {
+    const dialogRef: MatDialogRef<DialogEPSupprimerCommentaireAssistant> = this.matDialog.open(DialogEPSupprimerCommentaireAssistant);
+    this.dialogSuppressionSubscription = dialogRef.afterClosed().subscribe(
+      reponse => {
+        if(reponse)
+          this.ep.commentairesAssistant = this.ep.commentairesAssistant.filter( c => c.id != id);
+      }
+    );
+  }
+
+  ouvrirSaisiCommentaire(data?: any) {
+    const dialogRef: MatDialogRef<DialogEPAjouterCommentaireAssistant> = this.matDialog.open(DialogEPAjouterCommentaireAssistant, { data: data});
+    this.dialogAjoutModificationSubscription = dialogRef.afterClosed().subscribe(
+      reponse => {
+        if(reponse != undefined && reponse.nouveauCommentaire)
+          this.ajouterCommentaire(reponse.commentaire);
+      }
+    );
+  }
+
+  ajouterCommentaire(commentaire : CommentaireAssistantDTO) {
+    commentaire.idAssistant = this.collaborateurConnecte.id;
+    commentaire.assistant = this.collaborateurConnecte.nom + " " + this.collaborateurConnecte.prenom;
+    if(this.ep.commentairesAssistant == undefined) {
+      this.ep.commentairesAssistant = [];
+    }
+    this.ep.commentairesAssistant.push(commentaire);
+  }
+
+
+  ngOnDestroy() {
+    this.dialogAjoutModificationSubscription?.unsubscribe();
+    this.dialogSuppressionSubscription?.unsubscribe();
+  }
+}
+
+/**
+ * Composant pour faire afficher un pop up pour l'ajout d'un commentaire assistant
+ */
+@Component( {
+  selector: "dialog-ep-ajouter-commentaire",
+  templateUrl: "./dialog-ep-ajouter-commentaire-assistant.html"
+})
+export class DialogEPAjouterCommentaireAssistant {
+  commentaire : string = "";
+  nouveauCommentaire : boolean = true;
+  commentaireDTO : CommentaireAssistantDTO;
+
+  constructor(private dialogRef : MatDialogRef<DialogEPAjouterCommentaireAssistant>, @Inject(MAT_DIALOG_DATA) public data: CommentaireAssistantDTO) {
+    if(data != undefined) {
+      this.commentaireDTO = data;
+      this.commentaire = this.commentaireDTO.commentaire;
+      this.nouveauCommentaire = false;
+    }
+  }
+
+  enregistrer() {
+    if(this.nouveauCommentaire) {
+      this.commentaireDTO = {
+        idAssistant : "",
+        commentaire : this.commentaire
+      }
+    }
+    else {
+      this.commentaireDTO.commentaire = this.commentaire;
+    }
+    const reponse : any =  {
+      nouveauCommentaire: this.nouveauCommentaire,
+      commentaire : this.commentaireDTO
+    }
+    this.dialogRef.close(reponse);
+  }   
+
+  annuler() {
+    this.dialogRef.close(undefined);
+  }
+}
+
+/**
+ * Composant pour afficher un pop permettant la validation ou non de la suppression d'un commentaire
+ */
+@Component( {
+  selector: "dialog-ep-supprimer-commentaire-assistant",
+  templateUrl: "./dialog-ep-supprimer-commentaire-assistant.html"
+})
+export class DialogEPSupprimerCommentaireAssistant {
+  constructor( private dialogRef: MatDialogRef<DialogEPSupprimerCommentaireAssistant>) {}
+
+  valider(reponse : boolean) {
+    this.dialogRef.close(reponse);
+  }
+}
+

src/app/ep/details-ep/ep-consultation/ep-consultation.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
 /**
-    */
+  * Ce composant sert peut-ête à rien...
+  */
 @Component({
   selector: 'app-ep-consultation',
   templateUrl: './ep-consultation.component.html'

src/app/ep/details-ep/ep-demande-delegation/ep-demande-delegation.component.html

@@ -0,0 +1,15 @@
+<ng-container *ngIf="demande == undefined">
+    <h3>Aucune demande de délégation en cours</h3>
+</ng-container>
+
+<ng-container *ngIf="demande != undefined">
+    <h3>Demande de délégation en cours :</h3>
+    <p> Receveur : {{demande.referent.nom}} {{demande.referent.prenom}}</p>
+    <p> Date de la demande : {{demande.dateDemande | date: 'dd/MM/yyyy'}}</p>
+    <p> Raison de la demande : {{demande.raisonDemande }}</p>
+    <p> {{afficherEtatDemande(demande.etatDemande)}}</p>
+    <ng-container *ngIf="demande.etatDemande == etatDemande.Rejetee" >
+        <p> Date réponse : {{demande.dateReponse | date: 'dd/MM/yyyy'}}</p>
+        <p> Raison refus : {{demande.raisonRefus}} </p>
+    </ng-container>
+</ng-container>

src/app/ep/details-ep/ep-demande-delegation/ep-demande-delegation.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input} from '@angular/core';
+import { AfficherEtatDemandeDelegation, DemandeDelegationDTO, EpDTO, EtatDemande } from '@shared/api-swagger';
+
+/**
+  * Composant pour faire une demande de délégation et voir la dernière en cours
+  */
+@Component({
+  selector: 'ep-demande-delegation',
+  templateUrl: './ep-demande-delegation.component.html'
+})
+export class EpDemandeDelegationComponent{
+
+  etatDemande : any = EtatDemande;
+
+  @Input() demande: DemandeDelegationDTO;
+  constructor() {}
+
+  afficherEtatDemande(etat: EtatDemande) {
+    return AfficherEtatDemandeDelegation(etat);
+  }
+
+}

src/app/ep/details-ep/ep-demandes-formation/ep-demandes-formation.component.html

@@ -0,0 +1,2 @@
+<h3 *ngIf="demandesFormation == undefined || demandesFormation == []">Aucune demande de formation</h3>
+<demandes-formation-table *ngIf="demandesFormation != undefined && demandesFormation.length != 0" [displayedColumns]="displayedColumns" [estAffichageEP]="estAffichageEP" [demandesFormation]="demandesFormation"  ></demandes-formation-table>

src/app/ep/details-ep/ep-demandes-formation/ep-demandes-formation.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { DemandeFormationDTO } from '@shared/api-swagger';
+
+/**
+  * Composant pour ajouter et voir les demandes de formation
+  */
+@Component({
+  selector: 'ep-demandes-formation',
+  templateUrl: './ep-demandes-formation.component.html'
+})
+export class EpDemandesFormationComponent {
+  @Input() demandesFormation : Array<DemandeFormationDTO>;
+  estAffichageEP : boolean = true;
+  displayedColumns : Array<string> = ["libelle", "description", "etat", "demanderh"];
+
+  constructor() {}
+
+  
+}

src/app/ep/details-ep/ep-engagements/ep-engagements.component.html

@@ -0,0 +1,8 @@
+<ng-container *ngIf="engagements == undefined || engagements.length == 0">
+    <h3>Aucun engagements pris</h3>
+</ng-container>
+
+<ng-container *ngIf="engagements != undefined && engagements.length != 0">
+    <engagements-table [displayedColumns]="displayedColumns" [estAffichageEP]="estAffichageEP" [engagementsSaisis]="engagements"></engagements-table>
+</ng-container>
+

src/app/ep/details-ep/ep-engagements/ep-engagements.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from "@angular/core";
+import { EngagementDTO } from "@shared/api-swagger";
+
+@Component({
+    selector: "ep-engagements",
+    templateUrl: "./ep-engagements.component.html"
+})
+export class EpEngagementsCompenent {
+    @Input()engagements : EngagementDTO[];
+
+    displayedColumns : string[] = ["action", "dispositif", "modalite", "datelimite", "etat"];
+    estAffichageEP : boolean = true;
+
+    constructor(){}
+}

src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.html

@@ -0,0 +1,21 @@
+<ng-container  *ngIf="ep.objectifs != undefined && ep.objectifs != []">
+    <h3>Nouveaux objectifs</h3>
+    <ul>
+        <li *ngFor= "let objectif of ep.objectifs; let index = index" >
+            Objectif {{index +1}} : {{objectif.libelle}} 
+            
+        </li>
+    </ul>
+</ng-container>
+
+<ng-container *ngIf="ep.objectifsPrecedent != undefined && ep.objectifsPrecedent != []">
+    <h3>Objectifs précédents</h3>
+    <ul>
+        <li *ngFor= "let objectif of ep.objectifsPrecedent; let index = index">
+            <p [ngClass]="objectif.statutObjectif"> Objectif {{index +1}} : {{objectif.libelle}} ({{afficherStatutObjectif(objectif.statutObjectif)}})</p>
+            <p *ngIf="objectif.commentaire != undefined && objectif.commentaire != ''"> Commentaire : {{objectif.commentaire}}</p>
+        </li>
+    </ul>
+</ng-container>
+
+

src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.scss

@@ -0,0 +1,14 @@
+li {
+    margin-bottom: 1%;
+}
+.Atteint {
+    color: green
+}
+
+.NonAtteint{
+    color: red
+}
+
+.Partiel {
+    color: orange
+}

src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.ts

@@ -0,0 +1,19 @@
+import {  Component, Input } from "@angular/core";
+import { afficherStatutObjectif, EpDTO, StatutObjectif } from "@shared/api-swagger";
+
+
+@Component({
+    selector : "ep-objectifs",
+    templateUrl: "ep-objectifs.component.html",
+    styleUrls: ["ep-objectifs.component.scss"]
+})
+export class EpObjectifsComponent {
+    
+    @Input() ep : EpDTO;
+
+    constructor(){}
+
+    afficherStatutObjectif(statut: StatutObjectif) {
+        return afficherStatutObjectif(statut);
+    }
+}

src/app/ep/details-ep/ep-participants/ep-participants.component.html

@@ -0,0 +1,11 @@
+<ng-container *ngIf="ep.participants == undefined || ep.participants == []">
+    <h3> Aucun participant</h3>
+</ng-container>
+
+<ng-container *ngIf="ep.participants != undefined && ep.participants != []">
+    <ul>
+        <li *ngFor=" let participant of ep.participants">
+            {{participant.participant}}
+        </li>
+    </ul>
+</ng-container>

src/app/ep/details-ep/ep-participants/ep-participants.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { EpDTO } from '@shared/api-swagger';
+
+/**
+  * Composant pour afficher la liste des participants de l'EP
+  */
+@Component({
+  selector: 'ep-participants',
+  templateUrl: './ep-participants.component.html'
+})
+export class EpParticipantsComponent {
+
+  @Input() ep : EpDTO;
+
+  constructor() {}
+}

src/app/ep/details-ep/ep-propositions-dates/ep-propositions-dates.component.html

@@ -0,0 +1,39 @@
+<h3>Proposer au moins une date</h3>
+
+<mat-chip-list>
+    Préférences du collaborateur :
+    <mat-chip *ngFor="let choix of choixTypeEntretien; let index = index">
+        N°{{index+1}} {{choix.libelle}}
+    </mat-chip>
+</mat-chip-list>
+
+<ng-container *ngIf="propositionsRdvEntretien.length != nbPropositionMax ">
+    <div>
+        <mat-form-field>
+            <input matInput [(ngModel)]="dateProposee" [ngxMatDatetimePicker]="dateProposeePicker" placeholder="Proposer une date" [min]="dateMin">
+            <mat-datepicker-toggle matSuffix [for]="dateProposeePicker"> </mat-datepicker-toggle>
+            <ngx-mat-datetime-picker #dateProposeePicker></ngx-mat-datetime-picker>
+        </mat-form-field>
+
+        <mat-form-field appearance="fill">
+            <mat-label>Choisir le type d'entretien</mat-label>
+            <mat-select [(value)]="choixEntretien">
+              <mat-option></mat-option>
+              <mat-option *ngFor="let choix of choixTypeEntretien; let index = index" [value]="choix">N°{{index+1}} {{choix.libelle}}</mat-option>
+            </mat-select>
+        </mat-form-field>
+        <p *ngIf="choixEntretien != undefined">Choix : {{choixEntretien.libelle}}</p>
+    </div>
+    <div>
+        <button mat-raised-button (click)="enregistrerChoix()">Ajouter proposition</button>
+    </div>
+</ng-container>
+
+<ul>
+    <li *ngFor="let proposition of propositionsRdvEntretien; let index = index">
+        Proposition {{index+1}} : {{proposition.typeEntretien.libelle.toLowerCase()}} le {{proposition.dateEntretien | date : "dd/MM/yyyy à hh:mm"}}
+        <mat-icon (click)="annulerProposition(proposition)">delete</mat-icon>
+    </li>
+</ul>
+
+<button mat-raised-button color="primary">Valider les dates proposés</button>

src/app/ep/details-ep/ep-propositions-dates/ep-propositions-dates.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input } from '@angular/core';
+import { RDVEntretienDTO, TypeEntretienDTO } from '@shared/api-swagger';
+
+/**
+  * Composant permettant au référent de proposer ses dates d'EP à partir des préférences de lieu d'entretien du collaborateur
+  */
+@Component({
+  selector: 'ep-propositions-dates',
+  templateUrl: './ep-propositions-dates.component.html'
+})
+export class EpPropositionsDatesComponent {
+  nbPropositionMax = 3;
+  dateMin: Date;
+  dateProposee: Date;
+  choixEntretien : TypeEntretienDTO;
+
+  @Input() choixTypeEntretien : Array<TypeEntretienDTO>;
+
+  propositionsRdvEntretien : Array<RDVEntretienDTO> = [];
+  constructor() {
+    this.dateMin = new Date();
+    this.dateMin.setDate( this.dateMin.getDate() +1);
+  }
+
+  enregistrerChoix() {
+    if(this.dateProposee != undefined && this.choixEntretien != undefined) {
+      let rdv : RDVEntretienDTO = {
+        dateEntretien : this.dateProposee,
+        typeEntretien : this.choixEntretien
+      };
+      this.propositionsRdvEntretien.push(rdv);
+      this.dateProposee = undefined;
+      this.choixEntretien = undefined;
+    }
+  }
+
+  annulerProposition(proposition:RDVEntretienDTO) {
+    this.propositionsRdvEntretien = this.propositionsRdvEntretien.filter( p => p!= proposition);
+  }
+
+
+}

src/app/ep/details-ep/ep-signature/ep-signature.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
 /**
-    */
+  * Composant pour vérifier que la signature des deux parties
+  */
 @Component({
   selector: 'app-ep-signature',
   templateUrl: './ep-signature.component.html'

src/app/ep/details-ep/epa-six-ans/epa-six-ans.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
 /**
-    */
+  * Composant pour faire afficher le document EPA des six ans
+  */
 @Component({
   selector: 'app-epa-six-ans',
   templateUrl: './epa-six-ans.component.html'

src/app/ep/details-ep/epa/epa.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
 /**
-    */
+  * Composant pour faire afficher le document EPA
+  */
 @Component({
   selector: 'app-epa',
   templateUrl: './epa.component.html'

src/app/ep/details-ep/eps/eps.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
 /**
-    */
+  * Composant pour faire afficher le document EPS
+  */
 @Component({
   selector: 'app-eps',
   templateUrl: './eps.component.html'

src/app/ep/ep-choix-date/ep-choix-date.component.html

@@ -1 +0,0 @@
-<h1>Consultation choix date</h1>

src/app/ep/ep-choix-date/ep-choix-date.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-/**
-    */
-@Component({
-  selector: 'app-ep-choix-date',
-  templateUrl: './ep-choix-date.component.html'
-})
-export class EpChoixDateComponent implements OnInit {
-
-  constructor() {}
-
-  ngOnInit() {
-  }
-}

src/app/ep/ep-commentaire-assistant/ep-commentaire-assistant.component.html

@@ -1 +0,0 @@
-<h1>Consultation commentaire assistant</h1>

src/app/ep/ep-commentaire-assistant/ep-commentaire-assistant.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-/**
-    */
-@Component({
-  selector: 'app-ep-commentaire-assistant',
-  templateUrl: './ep-commentaire-assistant.component.html'
-})
-export class EpCommentaireAssistantComponent implements OnInit {
-
-  constructor() {}
-
-  ngOnInit() {
-  }
-}

src/app/ep/ep-demande-delegation/ep-demande-delegation.component.html

@@ -1 +0,0 @@
-<h1>Consultation demande delegation</h1>

src/app/ep/ep-demande-delegation/ep-demande-delegation.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-/**
-    */
-@Component({
-  selector: 'app-ep-demande-delegation',
-  templateUrl: './ep-demande-delegation.component.html'
-})
-export class EpDemandeDelegationComponent implements OnInit {
-
-  constructor() {}
-
-  ngOnInit() {
-  }
-}

src/app/ep/ep-demandes-formation/ep-demandes-formation.component.html

@@ -1 +0,0 @@
-<h1>Consultation demandes formation</h1>

src/app/ep/ep-demandes-formation/ep-demandes-formation.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-/**
-    */
-@Component({
-  selector: 'app-ep-demandes-formation',
-  templateUrl: './ep-demandes-formation.component.html'
-})
-export class EpDemandesFormationComponent implements OnInit {
-
-  constructor() {}
-
-  ngOnInit() {
-  }
-}

src/app/ep/ep-participants/ep-participants.component.html

@@ -1 +0,0 @@
-<h1>Consultation participants </h1>

src/app/ep/ep-participants/ep-participants.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-/**
-    */
-@Component({
-  selector: 'app-ep-participants',
-  templateUrl: './ep-participants.component.html'
-})
-export class EpParticipantsComponent implements OnInit {
-
-  constructor() {}
-
-  ngOnInit() {
-  }
-}

src/app/ep/ep-participants/new-participant/new-participant.component.html

@@ -1,2 +0,0 @@
-<app-nav-menu></app-nav-menu>
-<h1>New participant </h1>

src/app/ep/ep-participants/new-participant/new-participant.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-/**
-    */
-@Component({
-  selector: 'app-new-participant',
-  templateUrl: './new-participant.component.html'
-})
-export class NewParticipantComponent implements OnInit {
-
-  constructor() {}
-
-  ngOnInit() {
-  }
-}