Implémentation de la modification (pas vraiment testée avec json-server...) et de la suppression d'une formation (testée)

src/app/app.module.ts

@@ -5,6 +5,11 @@ 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';
+registerLocaleData(localeFr, 'fr');
+
+
 import { AppComponent } from './app.component';
 
 import { AppRoutingModule } from './app-routing.module';

src/app/formations/details-formation/formation.component.html

@@ -4,7 +4,7 @@
   <h2> {{formation.intitule}} </h2>
   <ng-container>
     <h3>Informations générales</h3>
-    <button mat-raised-button *ngIf="formation.statut!=statutEnum.Realise">Modifier</button>
+    <button mat-raised-button *ngIf="formation.statut!=statutEnum.Realise" [routerLink]="['edit']">Modifier</button>
     <p>Etat : {{formation.statut}}</p>
     <p>{{dateTexte}} {{formation.dateDebut | date:'dd/MM/yyyy à hh:mm'}}</p>
     <p>Origine : {{formation.origine}}</p>

src/app/formations/details-formation/formation.component.ts

@@ -28,11 +28,12 @@ export class FormationComponent implements OnInit {
   dataSource : MatTableDataSource<DisplayParticipation>;
   displayedColumns: string[]= ["agence", "collaborateur", "dateinscription", "ep"];
 
+  id:any
   constructor(private service:FormationsService,private route:ActivatedRoute) {}
 
   ngOnInit() {
-    let id = this.route.snapshot.paramMap.get('id');
+    this.id = this.route.snapshot.paramMap.get('id');
-    this.formationSubscription = this.service.getFormationById(id).subscribe(
+    this.formationSubscription = this.service.getFormationById(this.id).subscribe(
       formation => this.initFormation(formation)
     );
   }
@@ -72,26 +73,6 @@ export class FormationComponent implements OnInit {
     this.dataSource = new MatTableDataSource(this.participationsDisplay);
   }
 
-  /*
-  getStatut(statut:number) {
-    let value ="";
-    switch(statut) {
-      case 0:
-        value = "Plannifiée";
-        break;
-      case 1:
-        value = "Replannifiée";
-        break;
-      case 2:
-        value = "Réalisée";
-        break;
-      case 3:
-        value = "Annulée";
-        break;
-    }
-    return value;
-  }
-  */
   ngOnDestroy() {
     if(this.formationSubscription != undefined) {
       this.formationSubscription.unsubscribe();

src/app/formations/edit-formation/edit-formation.component.css

@@ -0,0 +1,16 @@
+div {
+  margin-left: 5%;
+  margin-bottom: 1%;
+}
+
+.input{
+  width: 30%;
+}
+
+.input2 {
+  width: 14%;
+}
+
+.moveright {
+  margin-left: 2%;
+}

src/app/formations/edit-formation/edit-formation.component.html

@@ -1,2 +1,83 @@
 <app-nav-menu></app-nav-menu>
-<h1> Edit formation </h1>
+<h1> Modifier une formation </h1>
+<div>
+  <button mat-raised-button on-click="supprimerFormation()" color="red">Supprimer la formation</button>
+</div>
+
+<form *ngIf="formationForm != undefined" [formGroup]="formationForm" (ngSubmit)="updateFormation()">
+  <div>
+    <mat-form-field class="input">
+      <input matInput placeholder="Intitulé" formControlName="intitule">
+    </mat-form-field>
+  </div>
+
+  <div>
+    <mat-form-field class="input">
+      <input matInput placeholder="Origine" formControlName="origine">
+    </mat-form-field>
+  </div>
+
+  <div>
+    <mat-form-field class="input2">
+      <mat-label>Statut</mat-label>
+      <mat-select formControlName="statut" >
+        <mat-option *ngFor="let key of keysStatuts" value="{{statuts[key]}}">{{statuts[key]}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <div>
+    <mat-form-field class="input">
+      <input matInput placeholder="Organisme" formControlName="organisme">
+    </mat-form-field>
+  </div>
+
+  <div>
+    <mat-form-field >
+      <input matInput [ngxMatDatetimePicker]="datedebut" placeholder="Date prévue" formControlName="dateDebut">
+      <mat-datepicker-toggle matSuffix [for]="datedebut"> </mat-datepicker-toggle>
+      <ngx-mat-datetime-picker #datedebut></ngx-mat-datetime-picker>
+    </mat-form-field>
+
+    <mat-form-field class="moveright">
+      <input matInput [matDatepicker]="datefin" placeholder="Date fin" formControlName="dateFin">
+      <mat-datepicker-toggle matSuffix [for]="datefin"> </mat-datepicker-toggle>
+      <mat-datepicker #datefin></mat-datepicker>
+    </mat-form-field>
+  </div>
+
+  <div>
+    <mat-form-field class="input2">
+      <mat-label>Nombre de jours</mat-label>
+      <input matInput type="number" formControlName="jour" min=1 value="1">
+    </mat-form-field>
+
+    <mat-form-field class="moveright input2">
+      <mat-label>Nombre d'heures</mat-label>
+      <input matInput type="number" formControlName="heure" min="1" value="1">
+    </mat-form-field>
+  </div>
+
+  <div>
+    <mat-form-field class="input2">
+      <mat-label>Type formation</mat-label>
+      <mat-select formControlName="type" >
+        <mat-option *ngFor="let key of keysTypes" value="{{types[key]}}">{{types[key]}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field class="moveright input2">
+      <mat-label>Mode formation</mat-label>
+      <mat-select formControlName="mode">
+        <mat-option *ngFor="let key of keysModes" value="{{modes[key]}}">{{modes[key]}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <div>
+    <mat-checkbox matInput formControlName="estCertifie">Certifiée</mat-checkbox>
+  </div>
+  <div>
+    <button mat-raised-button>Mettre à jour la formation</button>
+  </div>
+</form>

src/app/formations/edit-formation/edit-formation.component.ts

@@ -1,15 +1,88 @@
 import { Component, OnInit } from '@angular/core';
 
+import { Observable, Subscription } from 'rxjs';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
+
+
+import {MatTableDataSource} from '@angular/material/table';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+
+
+import { FormationModel } from '@shared/api-swagger/model/models';
+import { FormationsService } from '@shared/api-swagger/api/api';
+
 /**
     */
 @Component({
   selector: 'app-edit-formation',
-  templateUrl: './edit-formation.component.html'
+  templateUrl: './edit-formation.component.html',
+  styleUrls: ["edit-formation.component.css"]
 })
 export class EditFormationComponent implements OnInit {
+  formation:FormationModel;
+  formationSubscription: Subscription;
+  formationForm: FormGroup;
+  id :any;
+  statuts = FormationModel.StatutEnum;
+  modes = FormationModel.ModeEnum;
+  types = FormationModel.TypeEnum;
+  keysStatuts: any[];
+  keysModes: any[];
+  keysTypes: any[];
 
-  constructor() {}
+  constructor(private service: FormationsService, private fb: FormBuilder,
+    private activatedRoute:ActivatedRoute, private router: Router) {}
 
   ngOnInit() {
+    this.id = this.activatedRoute.snapshot.paramMap.get('id');
+    this.formationSubscription = this.service.getFormationById(this.id).subscribe(
+      formation => this.initFormation(formation)
+    );
+    this.keysStatuts = Object.keys(this.statuts).filter(String);
+    this.keysModes = Object.keys(this.modes).filter(String);
+    this.keysTypes = Object.keys(this.types).filter(String);
+  }
+
+  initFormation(formation:FormationModel) {
+    this.formation = formation;
+    this.formationForm= this.fb.group(
+      {
+
+        intitule: [this.formation.intitule],
+        origine: [this.formation.origine],
+        statut : [this.formation.statut],
+        dateDebut: [new Date(this.formation.dateDebut)],
+        dateFin: [new Date(this.formation.dateFin)],
+        heure: [this.formation.heure],
+        jour: [this.formation.jour],
+        organisme: [this.formation.organisme],
+        mode: [this.formation.mode],
+        type: [this.formation.type],
+        estCertifie: [this.formation.estCertifie]
+      });
+  }
+
+  updateFormation() {
+    this.formation = this.formationForm.value;
+    this.formation.id = this.id;
+    this.formationSubscription = this.service.updateFormation(this.formation).subscribe(
+      response => {
+        this.router.navigate(['/formations',this.id]);
+      }
+    );
+  }
+
+  supprimerFormation() {
+    this.formationSubscription = this.service.deleteFormation(this.formation.id).subscribe(
+      response => this.router.navigate([""])
+    );
+  }
+
+  ngOnDestroy() {
+    if(this.formationSubscription != undefined) {
+      this.formationSubscription.unsubscribe();
+    }
   }
 }

src/app/formations/new-formation/new-formation.component.html

@@ -48,17 +48,15 @@
   <div>
     <mat-form-field class="input2">
       <mat-label>Type formation</mat-label>
-      <mat-select formControlName="type">
+      <mat-select formControlName="type" >
-        <mat-option value="Interne">Interne</mat-option>
+        <mat-option *ngFor="let key of keysTypes" value="{{types[key]}}">{{types[key]}}</mat-option>
-        <mat-option value="Externe">Externe</mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field class="moveright input2">
       <mat-label>Mode formation</mat-label>
       <mat-select formControlName="mode">
-        <mat-option value="Présentiel">Présentiel</mat-option>
+        <mat-option *ngFor="let key of keysModes" value="{{modes[key]}}">{{modes[key]}}</mat-option>
-        <mat-option value="Conférence">Conférence</mat-option>
       </mat-select>
     </mat-form-field>
   </div>
@@ -67,6 +65,6 @@
     <mat-checkbox matInput formControlName="estCertifie">Certifiée</mat-checkbox>
   </div>
   <div>
-    <button mat-raised-button>Ajouter formation</button>
+    <button mat-raised-button>Ajouter une formation</button>
   </div>
 </form>

src/app/formations/new-formation/new-formation.component.ts

@@ -32,10 +32,16 @@ export class NewFormationComponent implements OnInit {
       estCertifie: [""]
     }
   );
+  modes = FormationModel.ModeEnum;
+  types = FormationModel.TypeEnum;
+  keysModes: any[];
+  keysTypes: any[];
 
   constructor(private fb: FormBuilder, private service:FormationsService, private router: Router) { }
 
   ngOnInit() {
+    this.keysModes = Object.keys(this.modes).filter(String);
+    this.keysTypes = Object.keys(this.types).filter(String);
   }
 
   ajouterFormation() {
@@ -46,4 +52,10 @@ export class NewFormationComponent implements OnInit {
       }
     );
   }
+
+  ngOnDestroy() {
+    if(this.formationSubscription != undefined) {
+      this.formationSubscription.unsubscribe();
+    }
+  }
 }

src/app/shared/api-swagger/api/formations.service.ts

@@ -63,10 +63,10 @@ export class FormationsService {
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
      */
-    public deleteFormation(idFormation: string, observe?: 'body', reportProgress?: boolean): Observable<any>;
+   public deleteFormation(idFormation: number, observe?: 'body', reportProgress?: boolean): Observable<any>;
-    public deleteFormation(idFormation: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<any>>;
+   public deleteFormation(idFormation: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<any>>;
-    public deleteFormation(idFormation: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<any>>;
+   public deleteFormation(idFormation: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<any>>;
-    public deleteFormation(idFormation: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+   public deleteFormation(idFormation: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
 
        if (idFormation === null || idFormation === undefined) {
            throw new Error('Required parameter idFormation was null or undefined when calling deleteFormation.');
@@ -165,10 +165,10 @@ export class FormationsService {
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
      */
-    public getFormationById(idFormation: string, observe?: 'body', reportProgress?: boolean): Observable<FormationModel>;
+   public getFormationById(idFormation: number, observe?: 'body', reportProgress?: boolean): Observable<FormationModel>;
-    public getFormationById(idFormation: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<FormationModel>>;
+   public getFormationById(idFormation: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<FormationModel>>;
-    public getFormationById(idFormation: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<FormationModel>>;
+   public getFormationById(idFormation: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<FormationModel>>;
-    public getFormationById(idFormation: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+   public getFormationById(idFormation: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
 
        if (idFormation === null || idFormation === undefined) {
            throw new Error('Required parameter idFormation was null or undefined when calling getFormationById.');

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

@@ -34,6 +34,11 @@ export namespace FormationModel {
         Realise: 'Réalisée' as StatutEnum,
         Annule: 'Annulée' as StatutEnum
     };
+    export type ModeEnum = 'Présentiel' | 'Visioconférence';
+    export const ModeEnum = {
+        Presentiel: 'Présentiel' as ModeEnum,
+        Visioconference: 'Visioconférence' as ModeEnum
+    };
     export type TypeEnum = 'Externe' | 'Interne';
     export const TypeEnum = {
         Externe: 'Externe' as TypeEnum,