Implémentation de la liste des engagements, des propositions de date et du choix des dates

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>

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;
+}

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>

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() {
-  }
 }

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

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

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

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

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

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

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();