Mise à jour des détails d'un référent et des détails d'un collaborateur avec utilisation d'un composant réutilisable

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { FormationsModule } from './formations';
 import { DemandesFormationModule } from './demandes-formation';
 import { DemandesDelegationModule } from './demandes-delegation';
 import { EpSaisieModule } from "./ep-saisie";
+import { AffichageDetailsCollaborateurModule } from "@shared/affichage-details-collaboarteur/affichage-details-collaborateur.module";
 import { EpModule } from "./ep"
 import { AuthModule } from '@shared/auth/auth.module';
 
@@ -36,7 +37,8 @@ import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
     HomeModule, CollaborateursModule,
     ReferentsModule, FormationsModule,
     DemandesFormationModule, DemandesDelegationModule,
-    EpSaisieModule, EpModule, MatTablesModule
+    EpSaisieModule, EpModule, MatTablesModule,
+    AffichageDetailsCollaborateurModule
     
   ],
   providers: [],

src/app/collaborateurs/collaborateurs.module.ts

@@ -15,6 +15,7 @@ import { FormationsCollaboateurComponent } from "./formations-collaborateur/form
 
 import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
 import { CollaborateursRoutingModule } from "./collaborateurs.routing.module";
+import { AffichageDetailsCollaborateurModule } from "@shared/affichage-details-collaboarteur/affichage-details-collaborateur.module";
 
 /**
   * Module collaborateur.
@@ -36,6 +37,7 @@ import { CollaborateursRoutingModule } from "./collaborateurs.routing.module";
     MaterialModule,
     NavMenuModule,
     MatTablesModule,
+    AffichageDetailsCollaborateurModule,
     CollaborateursRoutingModule,
     RouterModule
   ],

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

@@ -1,20 +1,13 @@
 <app-nav-menu></app-nav-menu>
-<ng-container *ngIf="collaborateur!=undefined">
-  <h2>{{ collaborateur.prenom }} {{ collaborateur.nom }} </h2>
-
-  <h3>Agence : {{ collaborateur.businessUnit.nom}}</h3>
-  <h3>Date embauche : {{ collaborateur.dateArrivee}}</h3>
-</ng-container>
-<ng-container *ngIf="collaborateur==undefined || !eploaded">
-  <mat-spinner></mat-spinner>
-</ng-container>
 
+<affichage-details-collaborateur [idCollaborateur]="idCollaborateur"></affichage-details-collaborateur>
+<!--
 <ng-container *ngIf= "eploaded && nbEP==0">
   <h3> Aucun EP effectué encore </h3>
 </ng-container>
 
 <ng-container *ngIf= "eploaded && nbEP>0">
-  <!-- Affichage de la liste des EP effectués -->
+ Affichage de la liste des EP effectués
   <h3>Liste des précédents EP</h3>
   <mat-table [dataSource]="this.dataSource" matSort>
     <ng-container matColumnDef="dateentretien">
@@ -34,7 +27,7 @@
 
     <ng-container matColumnDef="details">
       <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
-      <!-- Lien pour consulter l'EP -->
+      
       <mat-cell *matCellDef="let row" [routerLink]="['/ep',row.id]"> Voir détails EP </mat-cell>
     </ng-container>
 
@@ -42,3 +35,5 @@
     <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
   </mat-table>
 </ng-container>
+
+-->

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

@@ -1,15 +1,7 @@
-import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
+import { Component } from '@angular/core';
 
-import { Observable, Subscription } from 'rxjs';
 import {ActivatedRoute} from '@angular/router';
 
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {MatSort} from '@angular/material/sort';
-
-import { CollaborateursService, EpService } from "@shared/api-swagger/api/api";
-
-import { EpInformationDTO, CollaborateurDTO } from "@shared/api-swagger/model/models";
 
 /**
   * Composant pour gérer l'affichage des détails d'un collaborateur et de ses EP
@@ -18,124 +10,10 @@ import { EpInformationDTO, CollaborateurDTO } from "@shared/api-swagger/model/mo
   selector: 'app-details-collaborateur',
   templateUrl: './details-collaborateur.component.html'
 })
-export class DetailsCollaborateurComponent implements OnInit {
+export class DetailsCollaborateurComponent {
-
-  /**
-    * Ordre de tri à envoyer au serveur (true : croissant, false : décroissantà).
-    */
-  asc = true;
-  /**
-    * Numéro de la page à afficher dans le tableau.
-    */
-  numPage = 1;
-  /**
-    * Nombre d'élément du tableau à affiche en une page.
-    */
-  parPage = 5;
-  /**
-    * contenu de la recherche pour trouver un référent.
-    */
-  search = "";
-  /**
-    * Permet de savoir sur quelle attribut d'un CollaborateurDTO doit être trié le tableau.
-    */
-  tri = "";
-
-  /**
-    * Nombre d'EP effectué permettant de savoir si il faut faire afficher le  tableau ou non
-    */
-  nbEP = 0;
-
-  /**
-    * Collaborateur dont on affiche les détails
-    */
-  collaborateur: CollaborateurDTO;
-  /**
-    * Observable pour récupérer le collaborateur
-    */
-  private collaborateurSubscription : Subscription;
-  /**
-    * Observable pour récupérer la liste des EP du collaborateur
-    */
-  private epSubscription : Subscription;
-  /**
-    * Les colonnes à afficher dans le tableau.
-    */
-  displayedColumns: string[] = ["dateentretien", "referent", "type", "details"];
-
-  /**
-    * dataSource dans lequel sera stockée les informations à faire afficher dans le Mat Table
-    */
-  dataSource : MatTableDataSource<EpInformationDTO>;
-  /**
-    * Variable qui permet de vérifier que le chargement des EP a bien été fait
-    */
-  eploaded = false;
-  /**
-    * id du collaborateur à récupérer dans l'URL
-    */
-  idCollaborateur: any;
-
-  /**
-    * Pagination du tableau.
-    */
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-
-  /**
-    * Tri par les éléments du tableau selon la colonne choisie.
-    */
-  @ViewChild(MatSort) sort: MatSort;
 
-  constructor(private collaborateusrService:CollaborateursService, private epService:EpService, private route: ActivatedRoute) {}
+  idCollaborateur: string;
-
+  constructor(private route: ActivatedRoute) {
-  ngOnInit() {
-    //récupérer l'id du collaborateur dans les paramètres de l'URL
     this.idCollaborateur = this.route.snapshot.paramMap.get('id');
-    this.collaborateurSubscription = this.collaborateusrService.getCollaborateurById(this.idCollaborateur).subscribe(
-      collaborateur => {
-        this.collaborateur = collaborateur;
-        this.updateEP();
-      },
-      err => console.log(err)
-    );
-  }
-
-  getReferent(referent : CollaborateurDTO) {
-    if(referent == undefined || referent == null) { return "Referent indisponible"}
-    return referent.prenom + " "+ referent.nom;
-  }
-
-  /**
-    * Mise à jour du tableau des EP lors d'un changement de page du tableau, du nombre d'élément à afficher ou d'un tri.
-    * La fonction est aussi appelé au début du chargement et à l'utilisation de la barre de recherche.
-    */
-  updateEP() {
-    this.epSubscription = this.epService.getEPSignesCollaborateur(this.idCollaborateur).subscribe(
-      ep =>
-      {
-        console.log(ep);
-        if(ep != null) {
-
-          this.nbEP = ep.length;
-          this.dataSource = new MatTableDataSource(ep);
-        }
-      },
-      err => console.log(err)
-    );
-    this.eploaded = true;
-    //this.dataSource.paginator = this.paginator;
-    //this.dataSource.sort = this.sort;
-  }
-
-  /**
-    * Une fois la page fermée, il est nécessaire de se désabonner des Oberservable afin d'éviter les fuites mémoires.
-    */
-  ngOnDestroy() {
-    if(this.epSubscription!= undefined) {
-      this.epSubscription.unsubscribe();
-    }
-    if(this.collaborateurSubscription!= undefined) {
-      this.collaborateurSubscription.unsubscribe();
-    }
   }
 }

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

@@ -1,7 +1,2 @@
 <app-nav-menu></app-nav-menu>
-<ng-container  *ngIf="referent!=undefined">
+<affichage-details-collaborateur [idCollaborateur]="idReferent" [estReferent]="true"></affichage-details-collaborateur>
-  <h2> {{ referent.prenom}} {{referent.nom}} ({{referent.businessUnit.nom}})</h2>
-</ng-container>
-<ng-container *ngIf="referent==undefined">
-  <mat-spinner></mat-spinner>
-</ng-container>

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

@@ -1,47 +1,18 @@
-import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
+import { Component } from '@angular/core';
 
-import { Subscription } from 'rxjs';
 import {ActivatedRoute} from '@angular/router';
 
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginator} from '@angular/material/paginator';
-import {MatSort} from '@angular/material/sort';
-
-import { CollaborateursService, EpService } from "@shared/api-swagger/api/api";
-
-import { CollaborateurDTO, EpDTO } from "@shared/api-swagger/model/models";
-
 /**
     */
 @Component({
   selector: 'app-details-referent',
   templateUrl: './details-referent.component.html'
 })
-export class DetailsReferentComponent implements OnInit {
+export class DetailsReferentComponent{
-  referent: CollaborateurDTO;
+  idReferent : string;
-  private referentSubscription : Subscription;
-  idReferent : any;
 
 
-  constructor(private service:CollaborateursService, private route: ActivatedRoute) {}
+  constructor(private route: ActivatedRoute) {
-
-  ngOnInit() {
-
     this.idReferent = this.route.snapshot.paramMap.get("id");
-    this.referentSubscription = this.service.getCollaborateurById(this.idReferent).subscribe(
-      referent => this.initReferent(referent),
-      err => console.log(err)
-    )
-  }
-
-  initReferent(referent:CollaborateurDTO) {
-    this.referent = referent;
-
-  }
-
-  ngOnDestroy() {
-    if(this.referentSubscription!=undefined) {
-      this.referentSubscription.unsubscribe();
-    }
   }
 }

src/app/referents/referents.module.ts

@@ -11,6 +11,7 @@ import { ReferentsComponent } from './referents.component';
 import { DetailsReferentComponent } from './details-referent/details-referent.component';
 import { ReferentsRoutingModule } from './referents.routing.module';
 import { AssignationReferentComponent, DialogAssignationReferentComponent } from "./assignation-referent/assignation-referent.component";
+import { AffichageDetailsCollaborateurModule } from "@shared/affichage-details-collaboarteur/affichage-details-collaborateur.module";
 
 @NgModule({
   declarations: [ DetailsReferentComponent,
@@ -26,6 +27,7 @@ import { AssignationReferentComponent, DialogAssignationReferentComponent } from
     FormsModule,
     RouterModule,
     ReactiveFormsModule,
+    AffichageDetailsCollaborateurModule,
     ReferentsRoutingModule,
     MatTablesModule
   ],

src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.html

@@ -0,0 +1,23 @@
+<ng-container *ngIf="collaborateur != undefined">
+    <h2> {{ collaborateur.nom }} {{ collaborateur.prenom }} </h2>
+    <p><b>Agence : {{ collaborateur.businessUnit.nom}} ({{ collaborateur.businessUnit.agence.nom}}) </b></p>
+    <ng-container *ngIf="!estReferent">
+        <p *ngIf="collaborateur.referent != null"><b>Aucun référent</b></p>
+        <p *ngIf="collaborateur.referent == null"><b>Référent : {{ collaborateur.referent.nom }} {{ collaborateur.referent.prenom }} </b></p>
+    </ng-container>
+    <p *ngIf="!estReferent"><b>Date embauche :  {{ collaborateur.dateArrivee | date: 'dd MMMM yyyy'}}</b></p>
+    <p *ngIf="!estReferent && collaborateur.dateDepart!=undefined"><b>Date départ : {{ collaborateur.dateDepart | date: 'dd MMMM yyyy'}}</b></p>
+
+    <mat-tab-group mat-align-tabs="start">
+        <mat-tab *ngIf="!estReferent" label="Liste des EP"><h3>Liste des EP</h3></mat-tab>
+        <mat-tab *ngIf="!estReferent" label="Liste des futurs formations"><h3>Liste des futurs formations</h3></mat-tab>
+        <mat-tab *ngIf="!estReferent" label="Liste des formations effectuées"><h3>Liste des formations effectuées</h3></mat-tab>
+        <mat-tab *ngIf="estReferent" label="Liste des collaborateurs"><h3>Liste des collaborateurs</h3></mat-tab>
+        <mat-tab *ngIf="estReferent" label="Liste des EP effectués"><h3>Liste des EP effectués</h3></mat-tab>
+        <mat-tab *ngIf="estReferent" label="Liste des EP en cours"><h3>Liste des EP en cours</h3></mat-tab>
+    </mat-tab-group>
+
+</ng-container>
+<ng-container *ngIf="collaborateur == undefined">
+    <mat-spinner></mat-spinner>
+</ng-container>

src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { MaterialModule } from "../angular-material/angular-material.module";
+import { AffichageDetailsCollaborateurComponent } from "@shared/affichage-details-collaboarteur/affichage-details-collaborateur";
+
+
+@NgModule({
+  declarations: [ 
+    AffichageDetailsCollaborateurComponent
+  ],
+  imports: [
+    MaterialModule,
+    CommonModule,
+    FormsModule
+  ],
+  exports: [AffichageDetailsCollaborateurComponent]
+})
+export class AffichageDetailsCollaborateurModule {}

src/app/shared/affichage-details-collaboarteur/affichage-details-collaborateur.ts

@@ -0,0 +1,30 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { CollaborateurDTO, CollaborateursService } from "@shared/api-swagger";
+import { Subscription } from "rxjs";
+
+@Component({
+    selector: "affichage-details-collaborateur",
+    templateUrl: "affichage-details-collaborateur.html"
+})
+export class AffichageDetailsCollaborateurComponent implements OnInit{
+    @Input() idCollaborateur: string;
+    @Input() estReferent: boolean=false;
+    
+    collaborateur: CollaborateurDTO = undefined;
+    private collaborateurSubscription: Subscription;
+
+    constructor(private collaborateurService: CollaborateursService) {}
+
+    ngOnInit() {
+        this.collaborateurSubscription = this.collaborateurService.getCollaborateurById(this.idCollaborateur).subscribe(
+            collab => this.collaborateur = collab,
+            err => console.log(err)
+        );
+    }
+
+    ngOnDestroy() {
+        if(this.collaborateurSubscription != undefined) {
+            this.collaborateurSubscription.unsubscribe();
+        }
+    }
+}

src/app/shared/mat-tables/mat-tables.module.ts

@@ -5,9 +5,7 @@ import { FormsModule } from '@angular/forms';
 import { MaterialModule } from "../angular-material/angular-material.module";
 import { CollaborateursTableComponent } from "@shared/mat-tables/collaborateurs-table/collaborateurs.table";
 
-/**
+
-  * Module des nav utilisés pour chaque role
-  */
 @NgModule({
   declarations: [ 
     CollaborateursTableComponent