Début mplémentation visuelle des détails d'un EP

src/app/ep/details-ep/details-ep.component.css

@@ -0,0 +1,4 @@
+.saisie {
+    overflow-y: scroll;
+    height: 60%;
+}

src/app/ep/details-ep/details-ep.component.html

@@ -0,0 +1,104 @@
+<app-nav-menu></app-nav-menu>
+<div class="detailsep">
+    <p> Collaborateur : NOM PRENOM (AGENCE) <button mat-stroked-button>Accéder au détails</button></p> 
+    <p> Référent : NOM PRENOM </p>
+    <p> Entretien le : dd/MM/yyyy</p>
+    <p> EPA</p>
+
+    <button mat-raised-button color="primary" title="Valider le déroulement de l'entretien">Valider entretien</button>
+
+    <button mat-raised-button color="primary" title="Signer l'EP">Signer</button>
+
+    <mat-tab-group mat-align-tabs="start">
+        <mat-tab label="La saisie">
+            
+            <mat-vertical-stepper class="saisie" linear  #stepper>
+                <mat-step label="Les objectifs précédents" completed="true">
+
+                </mat-step>
+
+                <mat-step label="Mission/Projet" completed="true">
+
+                </mat-step>
+
+                <mat-step label="Compétences générales" completed="true">
+
+                </mat-step>
+
+                <mat-step label="Compétences techniques" completed="true">
+
+                </mat-step>
+
+                <mat-step label="Apside" completed="true">
+
+                </mat-step>
+
+                <mat-step label="Objectifs" completed="true">
+
+                </mat-step>
+
+
+                <mat-step label="Engagements" completed="true">
+
+
+                </mat-step>
+
+                <mat-step label="Demandes de formation" completed="true">
+
+                </mat-step>
+                <mat-step label="Demande d'augmentation salaire" completed="true">
+
+                </mat-step>
+
+                <mat-step label="Formation effectuée" completed="true">
+
+                </mat-step>
+
+                <mat-step label="Evolution du collaborateur" completed="true">
+                    
+                </mat-step>
+
+            </mat-vertical-stepper>
+
+
+
+
+
+
+        </mat-tab>
+        <mat-tab label="Commentaire assistant">
+            Ajout et consultation des commentaires (pour les assistants)
+        </mat-tab>
+
+        <mat-tab label="Choix de dates"> 
+            Le collaborateur choisi une date parmi la liste des dates proposés (collaborateur)
+        </mat-tab>
+
+        <mat-tab label="Proposition de date">
+            Le référent propose trois dates d'entretien (référent)
+        </mat-tab>
+        <mat-tab label="Demande délégation">
+            Effectuer une demande de délégation (Assistant et référent)
+        </mat-tab>
+        <mat-tab label="Les participants">
+            Ajouter et enlever des participants (Assistants et référent)
+        </mat-tab>
+
+      </mat-tab-group>
+</div>
+
+<!--
+
+    <ng-container *ngIf="ep == undefined" >
+        <mat-spinner></mat-spinner>
+    </ng-container>
+    
+    <ng-container *ngIf="ep != undefined">
+        <p> Collaborateur : {{ep.collaborateur.nom + " " + ep.collaborateur.prenom}}</p>
+        <p *ngIf="ep.referent != undefined"> Référent : {{ep.referent.nom + " " + ep.referent.prenom}}</p>
+        <p *ngIf="ep.referent == undefined"> Aucun référent pour </p>
+        <p> Entretien le : {{ep.datePrevisionnelle }}</p>
+        
+        
+    </ng-container>
+-->

src/app/ep/details-ep/details-ep.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { EpDTO, EpService } from "@shared/api-swagger";
+import { AuthService } from "@shared/auth/auth.service";
+import { Role } from "@shared/utils/roles";
+import { Subscription } from "rxjs";
+
+@Component({
+    selector : "details-ep",
+    templateUrl: "./details-ep.component.html",
+    styleUrls: ["./details-ep.component.css"]
+})
+export class DetailsEPComponent implements OnInit {
+
+    epSubscription : Subscription;
+
+    idEp: any;
+
+    role : Role;
+    roleUtilisateur: string;
+
+    ep : EpDTO;
+    constructor(private epService : EpService, private route : ActivatedRoute, private authService: AuthService) {
+        this.roleUtilisateur = authService.firstRole;
+    }
+
+    ngOnInit() {
+        /*
+        this.idEp = this.route.snapshot.paramMap.get("id");
+        this.epSubscription = this.epService.getEPById(this.idEp).subscribe(
+            ep => this.ep = ep,
+            err => console.log(err) 
+        );*/
+    }
+}

src/app/ep/ep.module.ts

@@ -12,15 +12,16 @@ import { EpComponent } from './ep.component';
 import { EpRoutingModule } from './ep.routing.module';
 import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
 import { EpSignesComponent } from "./ep-signes/ep-signes.component";
+import { DetailsEPComponent } from "./details-ep/details-ep.component";
 
 /**
   * Module de l'ep
   */
 @NgModule({
   declarations: [
-    EpComponent, EpSignesComponent
+    EpComponent, EpSignesComponent, DetailsEPComponent
   ],
-  exports: [EpComponent
+  exports: [EpComponent, DetailsEPComponent
   ],
   imports: [
     MaterialModule,
@@ -28,7 +29,7 @@ import { EpSignesComponent } from "./ep-signes/ep-signes.component";
     EpRoutingModule,
     RouterModule,
     MatTablesModule,
-    CommonModule
+    CommonModule,
   ],
 })
 export class EpModule {}

src/app/ep/ep.routing.module.ts

@@ -7,6 +7,7 @@ import { EpComponent } from "./ep.component";
 import { AuthGuard } from '@shared/auth/auth.guard';
 import { paths_ep } from "@shared/utils/paths";
 import { EpSignesComponent } from './ep-signes/ep-signes.component';
+import { DetailsEPComponent } from './details-ep/details-ep.component';
 
 /**
   * Routes du module ep
@@ -16,6 +17,11 @@ const routes: Routes = [
     component: EpSignesComponent,
     canActivate: [AuthGuard]
   },
+  { 
+    path: paths_ep.consultation,
+    component: DetailsEPComponent,
+    canActivate: [AuthGuard]
+  },
   {
     path:'',
     component: EpComponent,