From 9f348c1b7f485b4ef45857c3a590b14b9f9f58fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yana=C3=ABl=20GRETTE?= <yanael.grette@outlook.com>
Date: Thu, 18 Mar 2021 16:19:16 +0100
Subject: [PATCH] =?UTF-8?q?Impl=C3=A9mentation=20de=20la=20liste=20des=20e?=
 =?UTF-8?q?ngagements,=20des=20propositions=20de=20date=20et=20du=20choix?=
 =?UTF-8?q?=20des=20dates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ep/details-ep/details-ep.component.html   |  8 ++--
 .../ep-choix-date/ep-choix-date.component.css |  5 +++
 .../ep-choix-date.component.html              |  9 ++++-
 .../ep-choix-date/ep-choix-date.component.ts  | 16 ++++----
 .../ep-demandes-formation.component.ts        |  7 ++--
 .../ep-engagements.component.html             |  8 ++++
 .../ep-engagements.component.ts               | 15 +++++++
 .../ep-propositions-dates.component.html      | 40 ++++++++++++++++++-
 .../ep-propositions-dates.component.ts        | 36 ++++++++++++++---
 src/app/ep/ep.module.ts                       | 10 ++++-
 .../angular-material.module.ts                |  7 +++-
 .../engagements-table/engagements-table.ts    |  5 +++
 12 files changed, 140 insertions(+), 26 deletions(-)
 create mode 100644 src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.css
 create mode 100644 src/app/ep/details-ep/ep-engagements/ep-engagements.component.html
 create mode 100644 src/app/ep/details-ep/ep-engagements/ep-engagements.component.ts

diff --git a/src/app/ep/details-ep/details-ep.component.html b/src/app/ep/details-ep/details-ep.component.html
index ecf6776..ab9bd54 100644
--- a/src/app/ep/details-ep/details-ep.component.html
+++ b/src/app/ep/details-ep/details-ep.component.html
@@ -49,7 +49,9 @@
             </mat-vertical-stepper>
         </mat-tab>
 
-        <mat-tab label="Les engagements"></mat-tab>
+        <mat-tab label="Les engagements">
+            <ep-engagements [engagements]="ep.engagements"></ep-engagements>
+        </mat-tab>
         <mat-tab label="Les demandes de formation"></mat-tab>
 
         <mat-tab label="Commentaire assistant">
@@ -57,11 +59,11 @@
         </mat-tab>
 
         <mat-tab label="Choix de dates"> 
-            Le collaborateur choisi une date parmi la liste des dates proposés (collaborateur)
+            <ep-choix-date [rdvsEntretien]="ep.propositionsEntretien"></ep-choix-date>
         </mat-tab>
 
         <mat-tab label="Proposition de date">
-            Le référent propose trois dates d'entretien (référent)
+            <ep-propositions-dates [choixTypeEntretien]="ep.choixTypeEntretien"></ep-propositions-dates>
         </mat-tab>
         <mat-tab label="Demande délégation">
             <ep-demande-delegation [demande]="ep.demandesDelegation"></ep-demande-delegation>
diff --git a/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.css b/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.css
new file mode 100644
index 0000000..b0e6dc2
--- /dev/null
+++ b/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.css
@@ -0,0 +1,5 @@
+.radio-rdv {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+}
\ No newline at end of file
diff --git a/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.html b/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.html
index 970db45..4020f12 100644
--- a/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.html
+++ b/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.html
@@ -1 +1,8 @@
-<h1>Consultation choix date</h1>
+<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>
\ No newline at end of file
diff --git a/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.ts b/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.ts
index 196baf8..d1cb153 100644
--- a/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.ts
+++ b/src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.ts
@@ -1,16 +1,16 @@
-import { Component, OnInit } from '@angular/core';
+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: 'app-ep-choix-date',
-  templateUrl: './ep-choix-date.component.html'
+  selector: 'ep-choix-date',
+  templateUrl: './ep-choix-date.component.html',
+  styleUrls: ["ep-choix-date.component.css"]
 })
-export class EpChoixDateComponent implements OnInit {
-
+export class EpChoixDateComponent  {
+  @Input() rdvsEntretien : Array<RDVEntretienDTO>;
+  choixRdv : RDVEntretienDTO;
   constructor() {}
-
-  ngOnInit() {
-  }
 }
diff --git a/src/app/ep/details-ep/ep-demandes-formation/ep-demandes-formation.component.ts b/src/app/ep/details-ep/ep-demandes-formation/ep-demandes-formation.component.ts
index bfbdba0..8755c96 100644
--- a/src/app/ep/details-ep/ep-demandes-formation/ep-demandes-formation.component.ts
+++ b/src/app/ep/details-ep/ep-demandes-formation/ep-demandes-formation.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 /**
   * Composant pour ajouter et voir les demandes de formation
@@ -7,10 +7,9 @@ import { Component, OnInit } from '@angular/core';
   selector: 'app-ep-demandes-formation',
   templateUrl: './ep-demandes-formation.component.html'
 })
-export class EpDemandesFormationComponent implements OnInit {
+export class EpDemandesFormationComponent {
 
   constructor() {}
 
-  ngOnInit() {
-  }
+  
 }
diff --git a/src/app/ep/details-ep/ep-engagements/ep-engagements.component.html b/src/app/ep/details-ep/ep-engagements/ep-engagements.component.html
new file mode 100644
index 0000000..9cd3df8
--- /dev/null
+++ b/src/app/ep/details-ep/ep-engagements/ep-engagements.component.html
@@ -0,0 +1,8 @@
+<ng-container *ngIf="engagements == undefined || engagements == []">
+    <h3>Aucun engagements pris</h3>
+</ng-container>
+
+<ng-container *ngIf="engagements != undefined && engagements != []">
+    <engagements-table [displayedColumns]="displayedColumns" [estAffichageEP]="estAffichageEP" [engagementsSaisis]="engagements"></engagements-table>
+</ng-container>
+
diff --git a/src/app/ep/details-ep/ep-engagements/ep-engagements.component.ts b/src/app/ep/details-ep/ep-engagements/ep-engagements.component.ts
new file mode 100644
index 0000000..c631de5
--- /dev/null
+++ b/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(){}
+}
\ No newline at end of file
diff --git a/src/app/ep/details-ep/ep-propositions-dates/ep-propositions-dates.component.html b/src/app/ep/details-ep/ep-propositions-dates/ep-propositions-dates.component.html
index c6bc87a..0d2767a 100644
--- a/src/app/ep/details-ep/ep-propositions-dates/ep-propositions-dates.component.html
+++ b/src/app/ep/details-ep/ep-propositions-dates/ep-propositions-dates.component.html
@@ -1 +1,39 @@
-<h1>Saisie propositions dates</h1>
+<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>
diff --git a/src/app/ep/details-ep/ep-propositions-dates/ep-propositions-dates.component.ts b/src/app/ep/details-ep/ep-propositions-dates/ep-propositions-dates.component.ts
index 4545df9..5efe113 100644
--- a/src/app/ep/details-ep/ep-propositions-dates/ep-propositions-dates.component.ts
+++ b/src/app/ep/details-ep/ep-propositions-dates/ep-propositions-dates.component.ts
@@ -1,16 +1,42 @@
-import { Component, OnInit } from '@angular/core';
+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: 'app-ep-propositions-dates',
+  selector: 'ep-propositions-dates',
   templateUrl: './ep-propositions-dates.component.html'
 })
-export class EpPropositionsDatesComponent implements OnInit {
+export class EpPropositionsDatesComponent {
+  nbPropositionMax = 3;
+  dateMin: Date;
+  dateProposee: Date;
+  choixEntretien : TypeEntretienDTO;
 
-  constructor() {}
+  @Input() choixTypeEntretien : Array<TypeEntretienDTO>;
 
-  ngOnInit() {
+  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);
+  }
+
+
 }
diff --git a/src/app/ep/ep.module.ts b/src/app/ep/ep.module.ts
index 6f5fc2f..7a07b52 100644
--- a/src/app/ep/ep.module.ts
+++ b/src/app/ep/ep.module.ts
@@ -1,6 +1,6 @@
 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";
@@ -17,6 +17,9 @@ import { EpObjectifsComponent } from "./details-ep/ep-objectifs/ep-objectifs.com
 import { EpParticipantsComponent } from "./details-ep/ep-participants/ep-participants.component";
 import { EpDemandeDelegationComponent } from "./details-ep/ep-demande-delegation/ep-demande-delegation.component";
 import { EpCommentairesAssistantComponent } from "./details-ep/ep-commentaires-assistant/ep-commentaires-assistant.component";
+import { EpEngagementsCompenent } from "./details-ep/ep-engagements/ep-engagements.component";
+import { EpPropositionsDatesComponent } from "./details-ep/ep-propositions-dates/ep-propositions-dates.component";
+import { EpChoixDateComponent } from "./details-ep/ep-choix-date/ep-choix-date.component";
 
 /**
   * Module de l'ep
@@ -24,7 +27,8 @@ import { EpCommentairesAssistantComponent } from "./details-ep/ep-commentaires-a
 @NgModule({
   declarations: [
     EpComponent, EpSignesComponent, DetailsEPComponent, EpObjectifsComponent,
-     EpParticipantsComponent, EpDemandeDelegationComponent, EpCommentairesAssistantComponent
+     EpParticipantsComponent, EpDemandeDelegationComponent, EpCommentairesAssistantComponent,
+     EpEngagementsCompenent, EpPropositionsDatesComponent, EpChoixDateComponent
   ],
   exports: [EpComponent, DetailsEPComponent
   ],
@@ -35,6 +39,8 @@ import { EpCommentairesAssistantComponent } from "./details-ep/ep-commentaires-a
     RouterModule,
     MatTablesModule,
     CommonModule,
+    FormsModule,
+    ReactiveFormsModule
   ],
 })
 export class EpModule {}
diff --git a/src/app/shared/angular-material/angular-material.module.ts b/src/app/shared/angular-material/angular-material.module.ts
index 94f722f..69a3c4c 100644
--- a/src/app/shared/angular-material/angular-material.module.ts
+++ b/src/app/shared/angular-material/angular-material.module.ts
@@ -12,6 +12,7 @@ import {MatSortModule} from '@angular/material/sort';
 import {MatListModule} from '@angular/material/list';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatTabsModule} from '@angular/material/tabs';
+import {MatRadioModule} from '@angular/material/radio';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatNativeDateModule} from '@angular/material/core';
@@ -39,7 +40,8 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
     NgxMatDatetimePickerModule, MatDatepickerModule,
     NgxMatNativeDateModule, MatNativeDateModule, MatListModule,
     MatCheckboxModule, MatSelectModule, MatStepperModule,
-    MatChipsModule, MatSnackBarModule, MatSlideToggleModule
+    MatChipsModule, MatSnackBarModule, MatSlideToggleModule,
+    MatRadioModule
   ],
   exports : [MatCardModule,
     MatButtonModule, MatMenuModule,
@@ -50,7 +52,8 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
     NgxMatDatetimePickerModule, MatDatepickerModule,
     NgxMatNativeDateModule, MatNativeDateModule, MatListModule,
     MatCheckboxModule, MatSelectModule, MatStepperModule,
-    MatChipsModule, MatSnackBarModule, MatSlideToggleModule
+    MatChipsModule, MatSnackBarModule, MatSlideToggleModule,
+    MatRadioModule
   ]
 })
 export class MaterialModule {}
diff --git a/src/app/shared/mat-tables/engagements-table/engagements-table.ts b/src/app/shared/mat-tables/engagements-table/engagements-table.ts
index 7450212..764fdae 100644
--- a/src/app/shared/mat-tables/engagements-table/engagements-table.ts
+++ b/src/app/shared/mat-tables/engagements-table/engagements-table.ts
@@ -77,6 +77,9 @@ export class EngagementTableComponent implements OnInit {
         * Liste des colonnes du tableau à afficher.
         */
     @Input() displayedColumns : string[] = [];
+    /**
+     * True si il s'agit d'une liste d'engagement affichés lors de la saisie EP référent ou de l'affichage des détails EP
+     */
     @Input() estAffichageEP: boolean = false;
     @Input() engagementsSaisis: EngagementDTO[] = [];
 
@@ -92,7 +95,9 @@ export class EngagementTableComponent implements OnInit {
     ngOnInit() {
         if(this.estAffichageEP) {
             this.taille = this.engagementsSaisis.length;
+            this.parPage = this.taille;
             this.dataSource = new MatTableDataSource(this.engagementsSaisis);
+            this.chargement = false;
         }
         else
             this.setBUsId();