Affichage du prochain EP du collaborateur dans ses détails

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

@@ -11,6 +11,10 @@
     <button mat-raised-button color="primary" (click)="openDialog()"> {{ estReferent ? "Ajouter des collaborateurs EP" : "Mettre à jour le référent EP"}}</button>
 
     <mat-tab-group mat-align-tabs="start">
+        <mat-tab *ngIf="!estReferent" label="Prochain EP">
+            <prochain-ep [idCollaborateur]="idCollaborateur"></prochain-ep>
+        </mat-tab>
+
         <mat-tab *ngIf="!estReferent" label="Liste des EP effectués">
             <ep-table [rechercherParBU]="false" [rechercherParDate]="true" [typeRechercheEP]="epTypeRecherche.RechercheEPCollaborateursSignes" [displayedColumns]="displayedColumnsEPCollaborateur" [idCollaborateur]="idCollaborateur" (eventEmitter)="ouvrirEP($event)" ></ep-table>
         </mat-tab>

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

@@ -6,18 +6,21 @@ import { MaterialModule } from "../angular-material/angular-material.module";
 import { AffichageDetailsCollaborateurComponent } from "@shared/affichage-details-collaboarteur/affichage-details-collaborateur";
 import { MatTablesModule } from '@shared/mat-tables/mat-tables.module';
 import { DialogAssignationRapideReferentComponent, DialogAssignationRapideCollaborateursComponent } from "./dialog-assignation-rapide/dialog-assignation-rapide.component";
+import { ProchainEpComponent } from "./prochain-ep/prochain-ep.component";
+import { RouterModule } from "@angular/router";
 
 
 @NgModule({
   declarations: [ 
     AffichageDetailsCollaborateurComponent, DialogAssignationRapideReferentComponent,
-    DialogAssignationRapideCollaborateursComponent
+    DialogAssignationRapideCollaborateursComponent, ProchainEpComponent
   ],
   imports: [
     MaterialModule,
     CommonModule,
     FormsModule,
-    MatTablesModule
+    MatTablesModule,
+    RouterModule
   ],
   exports: [AffichageDetailsCollaborateurComponent]
 })

src/app/shared/affichage-details-collaboarteur/prochain-ep/prochain-ep.component.html

@@ -0,0 +1,31 @@
+<ng-container *ngIf="chargement">
+    <mat-spinner></mat-spinner>
+</ng-container>
+<ng-container *ngIf="!chargement">
+    <ng-container *ngIf="ep == undefined">
+        <p> Aucun prochain EP n'a été trouvé </p>
+    </ng-container>
+
+    <ng-container  *ngIf="ep != undefined">
+        <ng-container *ngIf="ep.statut == statutEP.cree">
+            <p> Prochain {{ep.type}} disponible pour saisie le {{ ep.dateDisponibilite | date: "dd/MM/yyyy" }} </p>
+        </ng-container>
+        
+        <ng-container *ngIf="ep.statut != statutEP.cree">
+            <p> {{ep.type}} : {{ afficherStatutEP(ep.statut) }} </p>
+            <p> Disponible depuis le {{ ep.dateDisponibilite | date : "dd/MM/yyyy" }}</p>
+            <p> Date d'entretien le {{ ep.datePrevisionnelle | date : "dd/MM/yyyy" }}</p>
+            <ng-container *ngIf="ep.referent != undefined">
+                <p> Référent EP : {{ep.referent.nom}} {{ep.referent.prenom}} </p>
+            </ng-container>
+            
+        
+            <ng-container *ngIf="ep.referent == undefined">
+                <p> Il n'y a actuellement aucun référent pour cet EP </p>
+            </ng-container>
+        
+            <button mat-stroked-button *ngIf="ep.statut != statutEP.Disponible" [routerLink]="['/ep',ep.id]">Accéder à l'EP</button>
+        </ng-container>    
+    </ng-container>
+    
+</ng-container>

src/app/shared/affichage-details-collaboarteur/prochain-ep/prochain-ep.component.ts

@@ -0,0 +1,50 @@
+import { Component, Input, OnInit } from "@angular/core"
+import { affichageStatut, EpInformationDTO, EpService, StatutEp } from "@shared/api-swagger";
+import { Subscription } from "rxjs";
+
+
+
+@Component({
+    selector: "prochain-ep",
+    templateUrl: "./prochain-ep.component.html"
+})
+export class ProchainEpComponent implements OnInit {
+    
+    statutEP : any = StatutEp;
+     
+    @Input() idCollaborateur: string;
+
+    chargement: boolean = true;
+
+    ep : EpInformationDTO;
+    
+    epSubscription: Subscription;
+    
+    constructor(private epService: EpService) {
+
+    }
+
+    ngOnInit() {
+        this.epSubscription = this.epService.getProchainEPCollaborateur(this.idCollaborateur).subscribe(
+            ep => {
+                console.log(ep);
+                this.ep = ep;
+                this.chargement = false;
+            },
+            err => { 
+                this.chargement = false; 
+                console.log(err) 
+            }
+        );
+    }
+
+    afficherStatutEP(statut: StatutEp) {
+        return affichageStatut(statut);
+    }
+
+    ngDestroy() {
+        if(this.epSubscription != undefined)
+            this.epSubscription.unsubscribe();
+    }
+
+}

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

@@ -55,7 +55,7 @@ export function affichageStatut(statut: StatutEp) {
         case StatutEp.Saisi:
             return "Saisie effectuée";
         case StatutEp.SignatureReferent:
-            return "Attente signature collaborature";
+            return "Attente signature collaborateur";
         case StatutEp.Signe:
             return "Signé"
     }