Implémentation du nav-menu, du home et de l'affichage de la liste des formations côté RH

src/app/collaborateurs/collaborateurs.component.ts

@@ -9,7 +9,7 @@ import {MatSort} from '@angular/material/sort';
 import { CollaborateursService } from "@shared/api-swagger/api/api";
 
 import { CollaborateurModel } from "@shared/api-swagger/model/models";
-import { DisplayCollaborateur } from "@shared/displayInfo/displayCollaborateur";
+import { DisplayCollaborateur } from "@shared/displayInfo/displays";
 
 /**
     * Composant qui sert à l'affichage de la liste des collaborateurs en fonction de l'agence de son utilitateur.

src/app/collaborateurs/collaborateurs.routing.module.ts

@@ -15,10 +15,10 @@ import { KeycloakGuard } from '@shared/guards/keycloakguard';
 
 const routes: Routes = [
   { path:'', component: CollaborateursComponent, pathMatch: 'full', canActivate: [KeycloakGuard] },
-  { path:paths_collaborateurs.get, component: DetailsCollaborateurComponent, canActivate: [KeycloakGuard] },
   { path:paths_collaborateurs.formations, component: FormationsCollaboateurComponent, canActivate: [KeycloakGuard] },
   { path:paths_collaborateurs.evaluation, component: EvaluationComponent, canActivate: [KeycloakGuard] },
-  { path:paths_collaborateurs.edit, component: EditEvaluationComponent, canActivate: [KeycloakGuard] }
+  { path:paths_collaborateurs.edit, component: EditEvaluationComponent, canActivate: [KeycloakGuard] },
+  { path:paths_collaborateurs.get, component: DetailsCollaborateurComponent, canActivate: [KeycloakGuard] }
 ];
 
 

src/app/collaborateurs/details-collaborateur/details-collaborateur.component.ts

@@ -11,7 +11,7 @@ import { CollaborateursService, EpService } from "@shared/api-swagger/api/api";
 
 import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel";
 import { EpModel } from "@shared/api-swagger/model/epModel";
-import { DisplayEP } from "@shared/displayInfo/displayEP";
+import { DisplayEP } from "@shared/displayInfo/displays";
 
 /**
     */

src/app/demandes-formation/demandes-formation.routing.module.ts

@@ -12,8 +12,9 @@ import { paths_demandes_formation } from "@shared/utils/paths";
 
 const routes: Routes = [
   { path:'', component: DemandesFormationComponent, pathMatch: 'full', canActivate: [KeycloakGuard] },
-  { path:paths_demandes_formation.get, component: DemandeFormationComponent, canActivate: [KeycloakGuard] },
-  { path:paths_demandes_formation.new, component: NewDemandeFormationComponent, canActivate: [KeycloakGuard] }
+  { path:paths_demandes_formation.new, component: NewDemandeFormationComponent, canActivate: [KeycloakGuard] },
+  { path:paths_demandes_formation.get, component: DemandeFormationComponent, canActivate: [KeycloakGuard] }
+
 ];
 
 @NgModule({

src/app/formations/formations.component.html

@@ -1,2 +1,32 @@
 <app-nav-menu></app-nav-menu>
 <h1>Liste des formations </h1>
+
+<mat-table [dataSource]="this.dataSource">
+  <ng-container matColumnDef="intitule">
+    <mat-header-cell *matHeaderCellDef>Intitulé</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.intitule }}</mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef=participants>
+    <mat-header-cell *matHeaderCellDef>Nb participants</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.nbParticipants }}</mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="date">
+    <mat-header-cell *matHeaderCellDef>Date prévisionnelle</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.datePrevu }}</mat-cell>
+  </ng-container>
+
+  <!--<ng-container matColumnDef="origine">
+    <mat-header-cell></mat-header-cell>
+    <mat-cell *matCellDef="let row"></mat-cell>
+  </ng-container>-->
+
+  <ng-container matColumnDef="statut">
+    <mat-header-cell *matHeaderCellDef>Statut</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ getStatut(row.statut) }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/formations',row.id]"></mat-row>
+</mat-table>

src/app/formations/formations.component.ts

@@ -1,4 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+
+import { Observable, Subscription } from 'rxjs';
+
+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 { FormationsService } from "@shared/api-swagger/api/api";
 
 /**
     */
@@ -7,9 +17,91 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './formations.component.html'
 })
 export class FormationsComponent implements OnInit {
+  formationsDisponibles : DisplayFormation[];
+  formationsFiltres : DisplayFormation[];
+  private formationsDisponiblesSubscription : Subscription;
+
+  //displayedColumns: string[] = ["intitule", "participants", "date", "origine", "statut"]
+  displayedColumns: string[] = ["intitule", "participants", "date", "statut"]
+
+  /**
+    * source pour l'affichage des formations dans le tableau qui est affichée.
+    */
+  dataSource : MatTableDataSource<DisplayFormation>;
 
-  constructor() {}
+  /**
+    * contenu de la recherche.
+    */
+  search = "";
+
+  /**
+    * Pagination du tableau.
+    */
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  /**
+    * Tri par les éléments du tableau selon la colonne choisie.
+    */
+  @ViewChild(MatSort) sort: MatSort;
+
+  /**
+    * Spécifie si la liste des EP est en cours de chargement et d'écriture dans le tableau.
+    */
+  chargement = true;
+  constructor(private service:FormationsService) {
+  }
 
   ngOnInit() {
+    this.formationsDisponiblesSubscription = this.service.getFormations(undefined, 1).subscribe(
+      formations => this.initFormations(formations)
+    );
+  }
+
+  initFormations(formations:FormationModel[]) {
+    this.formationsDisponibles = [];
+    console.log(formations);
+    let formationDisplay : DisplayFormation;
+    for(let formation of formations) {
+      formationDisplay = new DisplayFormation();
+      formationDisplay.id = formation.id;
+      formationDisplay.intitule = formation.intitule;
+      formationDisplay.nbParticipants = formation.participantsFormation.length;
+      formationDisplay.datePrevu = formation.dateDebut;
+      formationDisplay.origine = formation.origine;
+      formationDisplay.statut = formation.statut;
+      this.formationsDisponibles.push(formationDisplay);
+    }
+    this.formationsFiltres = this.formationsDisponibles;
+    this.dataSource = new MatTableDataSource(this.formationsFiltres);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+
+  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.formationsDisponiblesSubscription != undefined) {
+      this.formationsDisponiblesSubscription.unsubscribe();
+    }
   }
 }

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

@@ -13,9 +13,9 @@ import { paths_formation } from "@shared/utils/paths";
 
 const routes: Routes = [
   { path:'', component: FormationsComponent, pathMatch: 'full', canActivate: [KeycloakGuard] },
-  { path:paths_formation.get, component: FormationComponent, canActivate: [KeycloakGuard] },
   { path:paths_formation.edit, component: EditFormationComponent, canActivate: [KeycloakGuard] },
   { path:paths_formation.new, component: NewFormationComponent, canActivate: [KeycloakGuard] },
+  { path:paths_formation.get, component: FormationComponent, canActivate: [KeycloakGuard] }
 ];
 
 

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

@@ -9,7 +9,7 @@ import {MatSort} from '@angular/material/sort';
 
 import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel";
 import { EpModel } from "@shared/api-swagger/model/epModel";
-import { DisplayEP } from "@shared/displayInfo/displayEP";
+import { DisplayEP } from "@shared/displayInfo/displays";
 import { EpService } from "@shared/api-swagger/api/api";
 
 

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

@@ -1 +1,31 @@
 <h1> Page RH </h1>
+
+<mat-table [dataSource]="this.dataSource">
+  <ng-container matColumnDef="intitule">
+    <mat-header-cell *matHeaderCellDef>Intitulé</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.intitule }}</mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef=participants>
+    <mat-header-cell *matHeaderCellDef>Nb participants</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.nbParticipants }}</mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="date">
+    <mat-header-cell *matHeaderCellDef>Date prévisionnelle</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.datePrevu }}</mat-cell>
+  </ng-container>
+
+  <!--<ng-container matColumnDef="origine">
+    <mat-header-cell></mat-header-cell>
+    <mat-cell *matCellDef="let row"></mat-cell>
+  </ng-container>-->
+
+  <ng-container matColumnDef="statut">
+    <mat-header-cell *matHeaderCellDef>Statut</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ getStatut(row.statut) }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/formations',row.id]"></mat-row>
+</mat-table>

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

@@ -1,4 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+
+import { Observable, Subscription } from 'rxjs';
+
+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 { FormationsService } from "@shared/api-swagger/api/api";
+
 
 /**
   * Le composant home qui sera affiché pour les RH.
@@ -11,9 +22,93 @@ import { Component, OnInit } from '@angular/core';
   templateUrl : 'home-rh.component.html'
 })
 export class HomeRHComponent implements OnInit {
-  constructor() {
+
+
+  formationsDisponibles : DisplayFormation[];
+  formationsFiltres : DisplayFormation[];
+  private formationsDisponiblesSubscription : Subscription;
+
+  //displayedColumns: string[] = ["intitule", "participants", "date", "origine", "statut"]
+  displayedColumns: string[] = ["intitule", "participants", "date", "statut"]
+
+  /**
+    * source pour l'affichage des formations dans le tableau qui est affichée.
+    */
+  dataSource : MatTableDataSource<DisplayFormation>;
+
+  /**
+    * contenu de la recherche.
+    */
+  search = "";
+
+  /**
+    * Pagination du tableau.
+    */
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  /**
+    * Tri par les éléments du tableau selon la colonne choisie.
+    */
+  @ViewChild(MatSort) sort: MatSort;
+
+  /**
+    * Spécifie si la liste des EP est en cours de chargement et d'écriture dans le tableau.
+    */
+  chargement = true;
+  constructor(private service:FormationsService) {
   }
 
   ngOnInit() {
+    this.formationsDisponiblesSubscription = this.service.getFormations(undefined, 1).subscribe(
+      formations => this.initFormations(formations)
+    );
+  }
+
+  initFormations(formations:FormationModel[]) {
+    this.formationsDisponibles = [];
+    console.log(formations);
+    let formationDisplay : DisplayFormation;
+    for(let formation of formations) {
+      formationDisplay = new DisplayFormation();
+      formationDisplay.id = formation.id;
+      formationDisplay.intitule = formation.intitule;
+      formationDisplay.nbParticipants = formation.participantsFormation.length;
+      formationDisplay.datePrevu = formation.dateDebut;
+      formationDisplay.origine = formation.origine;
+      formationDisplay.statut = formation.statut;
+      this.formationsDisponibles.push(formationDisplay);
+    }
+    this.formationsFiltres = this.formationsDisponibles;
+    this.dataSource = new MatTableDataSource(this.formationsFiltres);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+
+  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.formationsDisponiblesSubscription != undefined) {
+      this.formationsDisponiblesSubscription.unsubscribe();
+    }
   }
 }

src/app/referents/details-referent/details-referent.component.ts

@@ -11,7 +11,7 @@ import { ReferentsService } from "@shared/api-swagger/api/api";
 
 import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel";
 import { EpModel } from "@shared/api-swagger/model/epModel";
-import { DisplayEP } from "@shared/displayInfo/displayEP";
+import { DisplayEP } from "@shared/displayInfo/displays";
 
 /**
     */

src/app/referents/referents.component.ts

@@ -9,7 +9,7 @@ import {MatSort} from '@angular/material/sort';
 import { ReferentsService } from "@shared/api-swagger/api/api";
 
 import { CollaborateurModel } from "@shared/api-swagger/model/collaborateurModel";
-import { DisplayCollaborateur } from "@shared/displayInfo/displayCollaborateur";
+import { DisplayCollaborateur } from "@shared/displayInfo/displays";
 
 
 /**

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

@@ -214,10 +214,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 getListeFormations(idBu?: number, idAgence?: number, observe?: 'body', reportProgress?: boolean): Observable<Array<FormationModel>>;
-    public getListeFormations(idBu?: number, idAgence?: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<Array<FormationModel>>>;
-    public getListeFormations(idBu?: number, idAgence?: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<Array<FormationModel>>>;
-    public getListeFormations(idBu?: number, idAgence?: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+    public getFormations(idBu?: number, idAgence?: number, observe?: 'body', reportProgress?: boolean): Observable<Array<FormationModel>>;
+    public getFormations(idBu?: number, idAgence?: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<Array<FormationModel>>>;
+    public getFormations(idBu?: number, idAgence?: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<Array<FormationModel>>>;
+    public getFormations(idBu?: number, idAgence?: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
 
 
 

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

@@ -3,7 +3,7 @@
  * 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.1.0
- * 
+ *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
  * https://github.com/swagger-api/swagger-codegen.git
@@ -11,15 +11,16 @@
  */
 import { ParticipationFormationModel } from './participationFormationModel';
 
-export interface FormationModel { 
+export interface FormationModel {
     id: number;
     intitule: string;
     dateDebut: Date;
     dateFin: Date;
-    status: FormationModel.StatusEnum;
+    statut: FormationModel.StatusEnum;
     lieu: string;
     duree: number;
     jours?: number;
+    origine: string;
     organisme: string;
     nomFormateur: string;
     participantsFormation?: Array<ParticipationFormationModel>;
@@ -27,11 +28,11 @@ export interface FormationModel {
     typeFormation?: string;
 }
 export namespace FormationModel {
-    export type StatusEnum = 'Planifiée' | 'Replanifiée' | 'Annulée' | 'Réalisée';
+    export type StatusEnum = 0 | 1 | 2 | 3;
     export const StatusEnum = {
-        Planifie: 'Planifiée' as StatusEnum,
-        Replanifie: 'Replanifiée' as StatusEnum,
-        Annule: 'Annulée' as StatusEnum,
-        Ralise: 'Réalisée' as StatusEnum
+        Planifie: 0 as StatusEnum,
+        Replanifie: 1 as StatusEnum,
+        Realise: 2 as StatusEnum,
+        Annule: 3 as StatusEnum
     };
-}
+}

src/app/shared/nav-menu/nav-menu-rh/nav-menu-rh.component.html

@@ -3,7 +3,7 @@
   <mat-icon>more_vert</mat-icon>
 </button>
 <mat-menu #menuFormation="matMenu">
-  <button mat-menu-item>Ajouter une nouvelle formation</button>
+  <button mat-menu-item routerLink="/formations/nouvelleformation">Ajouter une nouvelle formation</button>
   <button mat-menu-item routerLink="/formations">Liste des formations</button>
 </mat-menu>
 <button mat-button [matMenuTriggerFor]="menuDemande">
@@ -11,6 +11,15 @@
   <mat-icon>more_vert</mat-icon>
 </button>
 <mat-menu #menuDemande="matMenu">
-  <button mat-menu-item>Créer une nouvelle demande de formation</button>
+  <button mat-menu-item routerLink="/demandesformation/nouvelledemandeformation">Créer une nouvelle demande de formation</button>
   <button mat-menu-item routerLink="/demandesformation">Liste des demandes</button>
 </mat-menu>
+<button mat-button [matMenuTriggerFor]="menuCollaborateurs">
+  <span>Collaborateurs</span>
+  <mat-icon>more_vert</mat-icon>
+</button>
+<mat-menu #menuCollaborateurs="matMenu">
+  <button mat-button routerLink="/collaborateurs">Liste des collaborateurs</button>
+  <button mat-button>Liste des engagements</button>
+</mat-menu>
+<button mat-button routerLink="/referents">Liste des référents</button>

src/app/shared/nav-menu/nav-menu.component.html

@@ -16,6 +16,8 @@
       <mat-icon>more_vert</mat-icon>
     </button>
     <mat-menu #menuMore="matMenu">
+      <button mat-menu-item>A propos</button>
+      <button mat-menu-item>Manuel utilisation</button>
       <button mat-menu-item on-click="logout()">Déconnexion</button>
     </mat-menu>
   </mat-card>