Mise à jour du module formation (liste, ajout, modification) avec un problème de binding dans la modification

src/app/app-routing.module.ts

@@ -41,11 +41,11 @@ const routes: Routes = [
   {
     path: paths_saisie_ep.path,
     loadChildren: () => import('./ep-saisie/ep-saisie.module').then(m=> m.EpSaisieModule)
-  }/*,
+  },
   {
     path: paths_formation.path,
     loadChildren: () => import('./formations/formations.module').then(m=> m.FormationsModule)
-  }*/,
+  },
   {
     path: paths_referents.path,
     loadChildren: () => import('./referents/referents.module').then(m=> m.ReferentsModule)

src/app/app.module.ts

@@ -19,7 +19,7 @@ import { HomeModule } from './home';
 import { CollaborateursModule } from './collaborateurs';
 
 import { ReferentsModule } from './referents';
-//import { FormationsModule } from './formations';
+import { FormationsModule } from './formations';
 import { DemandesFormationModule } from './demandes-formation';
 import { DemandesDelegationModule } from './demandes-delegation';
 import { EpSaisieModule } from "./ep-saisie";
@@ -43,7 +43,7 @@ let keycloakService: KeycloakService = new KeycloakService();
     KeycloakAngularModule, AppRoutingModule,
     HttpClientModule, ApiModule,
     HomeModule, CollaborateursModule,
-    //ReferentsModule, FormationsModule,
+    ReferentsModule, FormationsModule,
     DemandesFormationModule, DemandesDelegationModule,
     EpSaisieModule, EpModule
   ],

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

@@ -4,13 +4,14 @@
   <h2> {{formation.intitule}} </h2>
   <ng-container>
     <h3>Informations générales</h3>
-    <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>
+    <!--<button mat-raised-button *ngIf="formation.statut!=statutEnum.Realise" [routerLink]="['edit']">Modifier</button>-->
+    <button mat-raised-button [routerLink]="['edit']">Modifier</button>
+    <p>Etat : {{formation.statut.libelle}}</p>
+    <p>Date formation : {{formation.dateDebut | date:'dd/MM/yyyy à hh:mm'}}</p>
+    <p>Origine : {{formation.origine.libelle}}</p>
     <p>Organisme : {{ formation.organisme}}</p>
-    <p>Mode formation : {{ formation.mode}}</p>
-    <p>Type formation : {{ formation.type}}</p>
+    <p>Mode formation : {{ formation.mode.libelle}}</p>
+    <p>Type formation : {{ formation.type.libelle}}</p>
   </ng-container>
 
   <ng-container *ngIf="formation.participantsFormation == undefined || formation.participantsFormation.length==0">
@@ -21,10 +22,10 @@
     <h3>Liste des participants</h3>
     <mat-table [dataSource]="dataSource">
 
-      <ng-container matColumnDef="agence">
+      <!--<ng-container matColumnDef="agence">
         <mat-header-cell *matHeaderCellDef>Agence</mat-header-cell>
         <mat-cell *matCellDef="let row">{{row.agence}}</mat-cell>
-      </ng-container>
+      </ng-container>-->
 
       <ng-container matColumnDef="collaborateur">
         <mat-header-cell *matHeaderCellDef>Collaborateur</mat-header-cell>
@@ -36,6 +37,7 @@
         <mat-cell *matCellDef="let row">{{row.dateCreation | date :'dd/MM/yy à HH:mm'}}</mat-cell>
       </ng-container>
 
+<!--
       <ng-container matColumnDef="ep">
         <mat-header-cell *matHeaderCellDef>EP</mat-header-cell>
         <mat-cell *matCellDef="let row">
@@ -44,7 +46,7 @@
           <p *ngIf="row.statutEP<=1">Attente prochain EP</p>
         </mat-cell>
       </ng-container>
-
+-->
       <ng-container matColumnDef="evaluation">
         <mat-header-cell *matHeaderCellDef>Evaluations</mat-header-cell>
         <mat-cell *matCellDef="let row">

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

@@ -8,8 +8,7 @@ import {MatPaginator} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
 
 import { FormationsService } from '@shared/api-swagger/api/api';
-import { FormationModel } from "@shared/api-swagger/model/models";
-import { DisplayParticipation } from "@shared/displayInfo/displays";
+import { FormationDTO, ParticipationFormationDTO } from "@shared/api-swagger/model/models";
 
 /**
     */
@@ -18,17 +17,15 @@ import { DisplayParticipation } from "@shared/displayInfo/displays";
   templateUrl: './formation.component.html'
 })
 export class FormationComponent implements OnInit {
-  statutEnum = FormationModel.StatutEnum;
-  formation:FormationModel;
-  dateTexte:string = "Prévue le";
+  //statutEnum = FormationModel.StatutEnum;
+  formation:FormationDTO;
   formationSubscription: Subscription;
 
-  participationsDisplay: DisplayParticipation[];
-
-  dataSource : MatTableDataSource<DisplayParticipation>;
+  dataSource : MatTableDataSource<ParticipationFormationDTO>;
   displayedColumns: string[]= ["agence", "collaborateur", "dateinscription", "ep"];
 
   id:any
+  
   constructor(private service:FormationsService,private route:ActivatedRoute) {}
 
   ngOnInit() {
@@ -38,39 +35,11 @@ export class FormationComponent implements OnInit {
     );
   }
 
-  initFormation(formation:FormationModel) {
+  initFormation(formation:FormationDTO) {
     this.formation = formation;
-    if(this.formation.statut == FormationModel.StatutEnum.Realise) {
-      this.dateTexte = "Effecutée le";
-      this.displayedColumns.push("evaluation");
-    }
-    if(this.formation.statut == FormationModel.StatutEnum.Annule) {
-      this.dateTexte = "Initialement prévue le";
-    }
     if(formation.participantsFormation != undefined && formation.participantsFormation.length != 0 ) {
-      this.initParticpationFormation();
-    }
-  }
-
-
-  initParticpationFormation() {
-    let participationDisplay : DisplayParticipation;
-    this.participationsDisplay = [];
-    for(let participation of this.formation.participantsFormation ) {
-      participationDisplay = new DisplayParticipation();
-      participationDisplay.id =participation.id;
-      participationDisplay.dateCreation = participation.dateCreation;
-
-      participationDisplay.estEvaluee = participation.estEvaluee;
-      participationDisplay.idEP = participation.demandeformation.ep.id;
-      participationDisplay.statutEP = participation.demandeformation.ep.etat;
-      participationDisplay.idCollaborateur = participation.demandeformation.ep.collaborateur.id;
-      participationDisplay.collaborateur = participation.demandeformation.ep.collaborateur.prenom + " " + participation.demandeformation.ep.collaborateur.nom;
-      participationDisplay.agence = participation.demandeformation.ep.collaborateur.businessUnit.nom;
-
-      this.participationsDisplay.push(participationDisplay);
+      this.dataSource = new MatTableDataSource(formation.participantsFormation);
     }
-    this.dataSource = new MatTableDataSource(this.participationsDisplay);
   }
 
   ngOnDestroy() {

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

@@ -12,16 +12,17 @@
   </div>
 
   <div>
-    <mat-form-field class="input">
-      <input matInput placeholder="Origine" formControlName="origine">
+    <mat-form-field class="input2">
+      <mat-label>Statut formation</mat-label>
+      <mat-select formControlName="statut">
+        <mat-option *ngFor="let s of statuts" [value]="s">{{s.libelle}}</mat-option>
+      </mat-select>
     </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-form-field class="moveright input2">
+      <mat-label>Origine formation</mat-label>
+      <mat-select formControlName="origine">
+        <mat-option *ngFor="let o of origines" [value]="o">{{o.libelle}}</mat-option>
       </mat-select>
     </mat-form-field>
   </div>
@@ -61,15 +62,15 @@
   <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 formControlName="type">
+        <mat-option *ngFor="let t of types" [value]="t">{{t.libelle}}</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-option *ngFor="let m of modes" [value]="m">{{m.libelle}}</mat-option>
       </mat-select>
     </mat-form-field>
   </div>

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

@@ -10,7 +10,7 @@ import {MatPaginator} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
 
 
-import { FormationModel } from '@shared/api-swagger/model/models';
+import { FormationDTO, ModeFormationDTO, TypeFormationDTO, StatutFormationDTO, OrigineFormationDTO } from '@shared/api-swagger/model/models';
 import { FormationsService } from '@shared/api-swagger/api/api';
 
 /**
@@ -21,53 +21,94 @@ import { FormationsService } from '@shared/api-swagger/api/api';
   styleUrls: ["edit-formation.component.css"]
 })
 export class EditFormationComponent implements OnInit {
-  formation:FormationModel;
+
   formationSubscription: Subscription;
+  origineSubscription: Subscription;
+  typeSubscription: Subscription;
+  modeSubscription: Subscription;
+  statutSubscription: Subscription;
+
+  modes: ModeFormationDTO[];
+  types: TypeFormationDTO[];
+  origines: OrigineFormationDTO[];
+  statuts: StatutFormationDTO[];
+
+  //formation: FormationDTO;
   formationForm: FormGroup;
   id :any;
-  statuts = FormationModel.StatutEnum;
-  modes = FormationModel.ModeEnum;
-  types = FormationModel.TypeEnum;
-  keysStatuts: any[];
-  keysModes: any[];
-  keysTypes: any[];
 
   constructor(private service: FormationsService, private fb: FormBuilder,
-    private activatedRoute:ActivatedRoute, private router: Router) {}
+    private activatedRoute:ActivatedRoute, private router: Router) {
+      this.formationForm= this.fb.group(
+        {
+          id: [""],
+          intitule: [""],
+          origine: [""],
+          statut : [""],
+          dateDebut: [""],
+          dateFin: [""],
+          heure: [""],
+          jour: [""],
+          organisme: [""],
+          mode: [""],
+          type: [""],
+          estCertifie: [""]
+        }
+      );
+    }
 
   ngOnInit() {
+
+    this.modeSubscription = this.service.getModesFormation().subscribe(
+      modes => this.modes = modes,
+      err => console.log(err)
+    );
+
+    this.origineSubscription = this.service.getOriginesFormation().subscribe(
+      origines => this.origines = origines,
+      err => console.log(err)
+    );
+
+    this.statutSubscription = this.service.getStatutsFormation().subscribe(
+      statuts => this.statuts = statuts,
+      err => console.log(err)
+    );
+
+    this.typeSubscription = this.service.getTypesFormation().subscribe(
+      types => this.types = types,
+      err => console.log(err)
+    );
     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;
+  initFormation(formation:FormationDTO) {
+
+    //this.formation = formation;
     this.formationForm= this.fb.group(
       {
+        id: [formation.id],
+        intitule: [formation.intitule],
+        origine: [formation.origine],
+        statut : [formation.statut],
+        dateDebut: [new Date(formation.dateDebut)],
+        dateFin: [new Date(formation.dateFin)],
+        heure: [formation.heure],
+        jour: [formation.jour],
+        organisme: [formation.organisme],
+        mode: [formation.mode],
+        type: [formation.type],
+        estCertifie: [formation.estCertifie]
+      }
+    );
 
-        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(
+    //this.formation = this.formationForm.value;
+    this.formationSubscription = this.service.updateFormation(this.formationForm.value, this.formationForm.value.id).subscribe(
       response => {
         this.router.navigate(['/formations',this.id]);
       }
@@ -75,7 +116,7 @@ export class EditFormationComponent implements OnInit {
   }
 
   supprimerFormation() {
-    this.formationSubscription = this.service.deleteFormation(this.formation.id).subscribe(
+    this.formationSubscription = this.service.deleteFormation(this.id).subscribe(
       response => this.router.navigate([""])
     );
   }
@@ -86,3 +127,39 @@ export class EditFormationComponent implements OnInit {
     }
   }
 }
+/*
+this.formationForm= this.fb.group(
+  {
+    id: [formation.id],
+    intitule: [formation.intitule],
+    origine: [formation.origine],
+    statut : [formation.statut],
+    dateDebut: [new Date(formation.dateDebut)],
+    dateFin: [new Date(formation.dateFin)],
+    heure: [formation.heure],
+    jour: [formation.jour],
+    organisme: [formation.organisme],
+    mode: [formation.mode],
+    type: [formation.type],
+    estCertifie: [formation.estCertifie]
+  }
+);
+*/
+/*
+this.formationForm.setValue(
+  {
+    id: formation.id,
+    intitule: formation.intitule,
+    origine: formation.origine,
+    statut : formation.statut,
+    dateDebut: new Date(formation.dateDebut),
+    dateFin: new Date(formation.dateFin),
+    heure: formation.heure,
+    jour: formation.jour,
+    organisme: formation.organisme,
+    mode: formation.mode,
+    type: formation.type,
+    estCertifie: formation.estCertifie
+  }
+);
+*/

src/app/formations/formations.component.html

@@ -14,17 +14,17 @@
 
   <ng-container matColumnDef="date">
     <mat-header-cell *matHeaderCellDef>Date prévisionnelle</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.datePrevu | date:'dd/MM/yy à hh:mm' }}</mat-cell>
+    <mat-cell *matCellDef="let row">{{ row.dateDebut | date:'dd/MM/yy à hh:mm' }}</mat-cell>
   </ng-container>
 
   <ng-container matColumnDef="origine">
     <mat-header-cell *matHeaderCellDef>Origine</mat-header-cell>
-    <mat-cell *matCellDef="let row"> {{ row.origine}}</mat-cell>
+    <mat-cell *matCellDef="let row"> {{ row.origine.libelle}}</mat-cell>
   </ng-container>
 
   <ng-container matColumnDef="statut">
     <mat-header-cell *matHeaderCellDef>Statut</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{row.statut}}</mat-cell>
+    <mat-cell *matCellDef="let row">{{row.statut.libelle}}</mat-cell>
   </ng-container>
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

src/app/formations/formations.component.ts

@@ -6,8 +6,7 @@ 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 { DisplayFormation } from "@shared/displayInfo/displays";
+import { FormationDetailsDTO } from "@shared/api-swagger/model/models";
 import { FormationsService } from "@shared/api-swagger/api/api";
 
 /**
@@ -17,8 +16,12 @@ import { FormationsService } from "@shared/api-swagger/api/api";
   templateUrl: './formations.component.html'
 })
 export class FormationsComponent implements OnInit {
-  formationsDisponibles : DisplayFormation[];
-  formationsFiltres : DisplayFormation[];
+
+
+  asc = true;
+  numPage = 1;
+  parPage = 5;
+
   private formationsDisponiblesSubscription : Subscription;
 
   //displayedColumns: string[] = ["intitule", "participants", "date", "origine", "statut"]
@@ -27,13 +30,13 @@ export class FormationsComponent implements OnInit {
   /**
     * source pour l'affichage des formations dans le tableau qui est affichée.
     */
-  dataSource : MatTableDataSource<DisplayFormation>;
+  dataSource : MatTableDataSource<FormationDetailsDTO>;
 
   /**
     * contenu de la recherche.
     */
   search = "";
-
+  tri = "";
   /**
     * Pagination du tableau.
     */
@@ -52,31 +55,36 @@ export class FormationsComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.formationsDisponiblesSubscription = this.service.getFormations(undefined, 1).subscribe(
-      formations => this.initFormations(formations)
-    );
+    this.updateDataSource(0);
   }
 
-  initFormations(formations:FormationModel[]) {
-    this.formationsDisponibles = [];
-    let formationDisplay : DisplayFormation;
-    for(let formation of formations) {
-      formationDisplay = new DisplayFormation();
-      formationDisplay.id = formation.id;
-      formationDisplay.intitule = formation.intitule;
-      formationDisplay.nbParticipants = 0;
-      if(formation.participantsFormation != undefined) {
-        formationDisplay.nbParticipants = formation.participantsFormation.length;
-      }
-      formationDisplay.datePrevu = formation.dateDebut;
-      formationDisplay.origine = formation.origine;
-      formationDisplay.statut = formation.statut;
-      this.formationsDisponibles.push(formationDisplay);
+  updateDataSource(val:number) {
+    switch ((val)) {
+      case 0:
+        this.formationsDisponiblesSubscription = this.service.getFormations(this.asc,this.numPage, this.parPage, 1, undefined, this.search, this.tri).subscribe(
+          formations => this.dataSource = new MatTableDataSource(formations),
+          err => console.log(err)
+        );
+        break;
+
+      case 1:
+        this.formationsDisponiblesSubscription = this.service.getFormationRealisee(this.asc,this.numPage, this.parPage, 1, this.search, this.tri).subscribe(
+          formations => this.dataSource = new MatTableDataSource(formations),
+          err => console.log(err)
+        );
+        break;
+      case 2:
+        this.formationsDisponiblesSubscription = this.service.getFormationAnnulees(this.asc,this.numPage, this.parPage, 1, this.search, this.tri).subscribe(
+          formations => this.dataSource = new MatTableDataSource(formations),
+          err => console.log(err)
+        );
+        break;
+      default:
+        break;
     }
-    this.formationsFiltres = this.formationsDisponibles;
-    this.dataSource = new MatTableDataSource(this.formationsFiltres);
-    this.dataSource.paginator = this.paginator;
-    this.dataSource.sort = this.sort;
+
+    //this.dataSource.paginator = this.paginator;
+    //this.dataSource.sort = this.sort;
   }
 
   ngOnDestroy() {

src/app/formations/formations.module.ts

@@ -16,8 +16,8 @@ import { EditFormationComponent } from './edit-formation/edit-formation.componen
 import { FormationsRoutingModule } from './formations.routing.module';
 
 @NgModule({
-  declarations: [ FormationsComponent, NewFormationComponent,
-    FormationComponent, EditFormationComponent
+  declarations: [ FormationsComponent, FormationComponent,
+     NewFormationComponent, EditFormationComponent
   ],
   exports: [
       FormationsComponent

src/app/formations/formations.routing.module.ts

@@ -4,8 +4,8 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { FormationsComponent } from "./formations.component";
 import { FormationComponent } from "./details-formation/formation.component";
-import { EditFormationComponent } from "./edit-formation/edit-formation.component";
 import { NewFormationComponent } from "./new-formation/new-formation.component";
+import { EditFormationComponent } from "./edit-formation/edit-formation.component";
 
 import { KeycloakGuard } from '@shared/guards/keycloakguard';
 

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

@@ -7,9 +7,20 @@
     </mat-form-field>
   </div>
 
+
   <div>
-    <mat-form-field class="input">
-      <input matInput placeholder="Origine" formControlName="origine">
+    <mat-form-field class="input2">
+      <mat-label>Statut formationn</mat-label>
+      <mat-select formControlName="statut">
+        <mat-option *ngFor="let s of statuts" [value]="s">{{s.libelle}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field class="moveright input2">
+      <mat-label>Origine formation</mat-label>
+      <mat-select formControlName="origine">
+        <mat-option *ngFor="let o of origines" [value]="o">{{o.libelle}}</mat-option>
+      </mat-select>
     </mat-form-field>
   </div>
 
@@ -48,15 +59,15 @@
   <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 formControlName="type">
+        <mat-option *ngFor="let t of types" [value]="t">{{t.libelle}}</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-option *ngFor="let m of modes" [value]="m">{{m.libelle}}</mat-option>
       </mat-select>
     </mat-form-field>
   </div>

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

@@ -3,7 +3,7 @@ import { Observable, Subscription } from 'rxjs';
 import { Router } from '@angular/router';
 import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
 
-import { FormationModel } from "@shared/api-swagger/model/models";
+import { FormationDTO, ModeFormationDTO, TypeFormationDTO, StatutFormationDTO, OrigineFormationDTO } from "@shared/api-swagger/model/models";
 
 import { FormationsService } from "@shared/api-swagger/api/api";
 
@@ -16,12 +16,21 @@ import { FormationsService } from "@shared/api-swagger/api/api";
 })
 export class NewFormationComponent implements OnInit {
   formationSubscription: Subscription;
-  nouvelleformation: FormationModel;
+  origineSubscription: Subscription;
+  typeSubscription: Subscription;
+  modeSubscription: Subscription;
+  statutSubscription: Subscription;
+
+  modes: ModeFormationDTO[];
+  types: TypeFormationDTO[];
+  origines: OrigineFormationDTO[];
+  statuts: StatutFormationDTO[];
+  //nouvelleformation: FormationDTO;
   formationForm = this.fb.group(
     {
       intitule: [""],
       origine: [""],
-      statut : [FormationModel.StatutEnum.Planifie],
+      statut : [""],
       dateDebut: [""],
       dateFin: [""],
       heure: [""],
@@ -32,21 +41,35 @@ 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);
+    this.modeSubscription = this.service.getModesFormation().subscribe(
+      modes => this.modes = modes,
+      err => console.log(err)
+    );
+
+    this.origineSubscription = this.service.getOriginesFormation().subscribe(
+      origines => this.origines = origines,
+      err => console.log(err)
+    );
+
+    this.statutSubscription = this.service.getStatutsFormation().subscribe(
+      statuts => this.statuts = statuts,
+      err => console.log(err)
+    );
+
+    this.typeSubscription = this.service.getTypesFormation().subscribe(
+      types => this.types = types,
+      err => console.log(err)
+    );
+
   }
 
   ajouterFormation() {
-    this.nouvelleformation = this.formationForm.value;
-    this.formationSubscription = this.service.ajouterFormation(this.nouvelleformation).subscribe(
+    //this.nouvelleformation = this.formationForm.value;
+    this.formationSubscription = this.service.ajouterFormation(this.formationForm.value).subscribe(
       response => {
         this.router.navigate(['/formations',response["id"]]);
       }

src/app/home/home-rh/home-rh.component.html

@@ -15,12 +15,12 @@
     <mat-header-cell *matHeaderCellDef>Date prévisionnelle</mat-header-cell>
     <mat-cell *matCellDef="let row">{{ row.dateDebut | date:'dd/MM/yyyy à hh:mm' }}</mat-cell>
   </ng-container>
-<!--
+
   <ng-container matColumnDef="origine">
     <mat-header-cell *matHeaderCellDef>Origine</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{row.origine}}</mat-cell>
+    <mat-cell *matCellDef="let row">{{row.origine.libelle}}</mat-cell>
   </ng-container>
--->
+
   <ng-container matColumnDef="statut">
     <mat-header-cell *matHeaderCellDef>Statut</mat-header-cell>
     <mat-cell *matCellDef="let row">{{row.statut.libelle}}</mat-cell>

src/app/home/home-rh/home-rh.component.ts

@@ -31,8 +31,8 @@ export class HomeRHComponent implements OnInit {
   private formationsDisponiblesSubscription : Subscription;
 
   //displayedColumns: string[] = ["intitule", "participants", "date", "origine", "statut"]
-  //displayedColumns: string[] = ["intitule", "origine", "participants", "date", "statut","certification"];
-  displayedColumns: string[] = ["intitule", "participants", "date", "statut","certification"];
+  displayedColumns: string[] = ["intitule", "origine", "participants", "date", "statut","certification"];
+//  displayedColumns: string[] = ["intitule", "participants", "date", "statut","certification"];
 
   /**
     * source pour l'affichage des formations dans le tableau qui est affichée.

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

@@ -9,7 +9,7 @@
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
-import { FormationDTOParticipantsFormation } from './formationDTOParticipantsFormation';
+import { ParticipationFormationDTO } from './participationFormationDTO';
 import { ModeFormationDTO } from './modeFormationDTO';
 import { OrigineFormationDTO } from './origineFormationDTO';
 import { StatutFormationDTO } from './statutFormationDTO';
@@ -32,5 +32,5 @@ export interface FormationDTO {
     mode: ModeFormationDTO;
     type: TypeFormationDTO;
     estCertifie: boolean;
-    participantsFormation?: Array<FormationDTOParticipantsFormation>;
+    participantsFormation?: Array<ParticipationFormationDTO>;
 }

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

@@ -1,22 +0,0 @@
-/**
- * API du serveur de l'application de digitalisation des EP
- * API qui sra utilisée afin de faire communiquer le client et le serveur ainsi que le serveur et la boîte noire.
- *
- * OpenAPI spec version: 1.3.5
- * 
- *
- * NOTE: This class is auto generated by the swagger code generator program.
- * https://github.com/swagger-api/swagger-codegen.git
- * Do not edit the class manually.
- */
-
-export interface FormationDTOParticipantsFormation { 
-    id: number;
-    dateCreation: Date;
-    formation: string;
-    date?: Date;
-    statut?: string;
-    idCollaborateur?: string;
-    collaborateur?: string;
-    estEvaluee: boolean;
-}

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

@@ -18,7 +18,6 @@ export * from './epSaisieDTO';
 export * from './erreurDTO';
 export * from './evaluationDTO';
 export * from './formationDTO';
-export * from './formationDTOParticipantsFormation';
 export * from './formationDetailsDTO';
 export * from './modeFormationDTO';
 export * from './objectifDTO';