Début l'implémentation de l'interface des détails d'une formation

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

@@ -1,2 +1,27 @@
 <app-nav-menu></app-nav-menu>
-<h1> Formation </h1>
+
+<ng-container *ngIf="formation!=undefined">
+  <h2> {{formation.intitule}} </h2>
+  <ng-container>
+    <h3>Informations générales</h3>
+    <button mat-raised-button *ngIf="formation.statut!=2">Modifier</button>
+    <p>Etat : {{getStatut(formation.statut)}}</p>
+    <p>{{dateTexte}} {{formation.dateDebut | date:"dd/MM/yyyy"}}</p>
+    <p>Origine : {{formation.origine}}</p>
+    <p>Organisme : {{ formation.organisme}}</p>
+    <p>Mode formation : {{ formation.modeFormation}}</p>
+    <p>Type formation : {{ formation.typeFormation}}</p>
+  </ng-container>
+  <ng-container>
+    <h3>Liste des participants</h3>
+    <mat-table [dataSource]=dataSource>
+    </mat-table>
+
+  </ng-container>
+</ng-container>
+POSER DES QUESTIONS A HELEN
+Heures/Jours
+Mode de formation, type de formation
+
+CREER LES PARTICIPATIONS
+<mat-spinner *ngIf="formation==undefined"></mat-spinner>

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

@@ -1,5 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
+import { Subscription } from 'rxjs';
+import {ActivatedRoute} from '@angular/router';
+
+import { FormationsService } from '@shared/api-swagger/api/api';
+import { FormationModel } from "@shared/api-swagger/model/models";
 /**
     */
 @Component({
@@ -7,9 +12,53 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './formation.component.html'
 })
 export class FormationComponent implements OnInit {
+  formation:FormationModel;
+  dateTexte:string = "Prévue le";
+  formationSubscription: Subscription;
+  dataSource : MatTableDataSource<DisplayParticipation>;
 
-  constructor() {}
+  constructor(private service:FormationsService,private route:ActivatedRoute) {}
 
   ngOnInit() {
+    let id = this.route.snapshot.paramMap.get('id');
+    this.formationSubscription = this.service.getFormationById(id).subscribe(
+      formation => this.initFormation(formation)
+    );
+  }
+
+  initFormation(formation:FormationModel) {
+    this.formation = formation;
+    if(this.formation.statut == 2) {
+      this.dateTexte = "Effecutée le";
+    }
+    if(this.formation.statut == 3) {
+      this.dateTexte = "Initialement prévue le";
+    }
+    if(formation.participantsFormation != undefined )
+  }
+
+  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/shared/angular-material/angular-material.module.ts

@@ -10,7 +10,7 @@ import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatTableModule} from '@angular/material/table';
 import {MatSortModule} from '@angular/material/sort';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-
+import {MatTabsModule} from '@angular/material/tabs';
 
 /**
   * Module qui va faire l'import et l'export de tous les componsants material design qui seront utilisés dans l'application.
@@ -20,13 +20,15 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
     MatButtonModule, MatMenuModule,
     MatIconModule, MatPaginatorModule,
     MatSortModule, MatTableModule,
-    MatInputModule, MatProgressSpinnerModule
+    MatInputModule, MatProgressSpinnerModule,
+    MatTabsModule
   ],
   exports : [MatCardModule,
     MatButtonModule, MatMenuModule,
     MatIconModule, MatPaginatorModule,
     MatSortModule, MatTableModule,
-    MatInputModule, MatProgressSpinnerModule
+    MatInputModule, MatProgressSpinnerModule,
+    MatTabsModule
   ]
 })
 export class MaterialModule {}

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

@@ -22,7 +22,6 @@ export interface FormationModel {
     jours?: number;
     origine: string;
     organisme: string;
-    nomFormateur: string;
     participantsFormation?: Array<ParticipationFormationModel>;
     modeFormation?: string;
     typeFormation?: string;

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

@@ -14,7 +14,7 @@ import { EvaluationFormationModel } from './evaluationFormationModel';
 import { FormationModel } from './formationModel';
 
 export interface ParticipationFormationModel {
-    idParticipation: number;
+    id: number;
     formation: FormationModel;
     collaborateur: CollaborateurModel;
     evaluation?: Array<EvaluationFormationModel>;

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

@@ -12,7 +12,7 @@
 import { ChampModel } from './champModel';
 
 export interface SaisieModel {
-    idSaisie?: string;
+    id?: string;
     type?: string;
     champ?: ChampModel;
 }

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

@@ -11,6 +11,6 @@
  */
 
 export interface ThemeModel {
-    idTheme: number;
+    id: number;
     nom: string;
 }

src/app/shared/displayInfo/displayFormation.ts

@@ -0,0 +1,10 @@
+import { FormationModel } from "@shared/api-swagger/model/models";
+
+export class DisplayFormation {
+  id: number;
+  intitule: string;
+  nbParticipants : number;
+  datePrevu: Date;
+  origine : string;
+  statut: FormationModel.StatusEnum;
+}

src/app/shared/displayInfo/displayParticipation.ts

@@ -0,0 +1,8 @@
+
+
+export class displayParticipation {
+  id: number;
+  intitule: string;
+  collaborateur: string;
+  referent: string;
+}

src/app/shared/displayInfo/displays.ts

@@ -0,0 +1,3 @@
+export * from "./displayEP";
+export * from "./displayCollaborateur";
+export * from "./displayFormation";