gestion de la période d'essai

src/app/app.component.html

@@ -69,6 +69,9 @@
   <nav>
     <a routerLink="/collaborateurs">Collaborateurs</a>
   </nav>
+  <nav>
+    <a routerLink="/periodeessais">Périodes d'essai</a>
+  </nav>
 </div>
 
 <div class="container" role="main">

src/app/components/periode-essai/periode-essai.component.html

@@ -1 +1,92 @@
-<p>periode-essai works!</p>
+<div xmlns="">
+
+  <h3>Ajouter une Période d'Essai : </h3>
+
+  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
+
+    <div class="form-group col-12 col-md-6">
+      <label class="form-label">Collaborateur</label>
+      <select class="form-select" formControlName="collaborateurId" id="collaborateur-select" [ngClass]="{ 'is-invalid': submitted && f.collaborateurId.errors }">
+        <option value="" disabled selected>Choisissez le collaborateur concerné par cette période d'essai</option>
+        <option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}}</option>
+      </select>
+      <div *ngIf="submitted && f.collaborateurId.errors" class="invalid-feedback">
+        <div *ngIf="f.collaborateurId.errors.required">Vous devez choisir le collaborateur concerné par cette période d'essai </div>
+      </div>
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label class="form-label">Date de début</label>
+      <input type="date" class="form-control" formControlName="startingDate" (change)="onStartingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.startingDate.errors }">
+      <div *ngIf="submitted && f.startingDate.errors" class="invalid-feedback">
+        <div *ngIf="f.startingDate.errors.required">La date de début d'une période d'essai est obligatoire</div>
+      </div>
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label class="form-label">Date de fin prévue</label>
+      <input type="date" class="form-control" formControlName="plannedEndingDate" (change)="onPlannedEndingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.plannedEndingDate.errors }">
+      <div *ngIf="submitted && f.plannedEndingDate.errors" class="invalid-feedback">
+        <div *ngIf="f.plannedEndingDate.errors.required">La date de fin prévue d'une période d'essai est obligatoire</div>
+      </div>
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label class="form-label">Date de fin réelle</label>
+      <input type="date" class="form-control" formControlName="realEndingDate" (change)="onRealEndingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.realEndingDate.errors }">
+      <div *ngIf="submitted && f.realEndingDate.errors" class="invalid-feedback">
+        <div *ngIf="f.realEndingDate.errors.required">La date de fin réelle d'une période d'essai est obligatoire</div>
+      </div>
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
+      <label class="form-label">Commentaire</label>
+      <input class="form-control" formControlName="comment" [ngClass]="{ 'is-invalid': submitted && f.comment.errors }">
+      <div *ngIf="submitted && f.comment.errors" class="invalid-feedback">
+        <div *ngIf="f.comment.errors.required">Le commentaire d'une période d'essai est obligatoire</div>
+      </div>
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
+      <label class="form-label">Issue</label>
+      <input class="form-control" formControlName="issue" [ngClass]="{ 'is-invalid': submitted && f.issue.errors }">
+      <div *ngIf="submitted && f.issue.errors" class="invalid-feedback">
+        <div *ngIf="f.issue.errors.required">L'issue d'une période d'essai est obligatoire</div>
+      </div>
+    </div>
+
+
+
+
+    <div>
+      <button type="submit">Créer la période d'essai</button>
+      <button type="reset" (click)="onReset()">Effacer</button>
+    </div>
+  </form>
+
+  <h2 class = mb-4>Périodes d'essai</h2>
+
+  <div style="overflow-x:auto;" class="mb-5 col-12">
+    <table class="table">
+      <thead>
+      <tr>
+        <th scope="col">ID</th>
+        <th scope="col">Collaborateur ID</th>
+        <th scope="col">Issue</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let periodeEssai of periodeEssais">
+        <th scope="row">{{periodeEssai.id}}</th>
+        <td> {{periodeEssai.collaborateurId}} </td>
+        <td> <a routerLink="{{periodeEssai.issue}}"></a></td>
+        <td> <a routerLink="{{periodeEssai.id}}"> Modifier </a></td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+
+
+
+
+</div>

src/app/components/periode-essai/periode-essai.component.ts

@@ -1,4 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {PeriodeEssai} from "../../interfaces/periode-essai";
+import {Collaborateur} from "../../interfaces/collaborateur";
+import {CollaborateurService} from "../../services/collaborateur.service";
+import {PeriodeEssaiService} from "../../services/periode-essai.service";
 
 @Component({
   selector: 'app-periode-essai',
@@ -7,9 +13,91 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PeriodeEssaiComponent implements OnInit {
 
-  constructor() { }
+  collaborateurs : Collaborateur[] = [];
+  collaborateur = {} as Collaborateur;
+
+  periodeEssais : PeriodeEssai[] = [];
+  periodeEssai = {} as PeriodeEssai;
+
+  registerForm!: FormGroup;
+  submitted = false;
+
+  startingDate : String = "";
+  plannedEndingDate : String = "";
+  realEndingDate : String = "";
+
+  constructor(
+    private http : HttpClient,
+    private collaborateurService: CollaborateurService,
+    private periodeEssaiService: PeriodeEssaiService,
+    private formBuilder: FormBuilder
+  ) { }
 
   ngOnInit(): void {
+    this.getCollaborateurs();
+    this.registerForm = this.formBuilder.group({
+      comment: ['', Validators.required],
+      collaborateurId: ['',Validators.required],
+      issue: ['',Validators.required],
+      plannedEndingDate: ['',Validators.required],
+      realEndingDate: ['',Validators.required],
+      startingDate: ['',Validators.required]
+    });
+    if (this.periodeEssai.startingDate) {
+      this.startingDate = new Date(this.periodeEssai.startingDate).toISOString().split('T')[0];
+    }
+    if (this.periodeEssai.plannedEndingDate) {
+      this.plannedEndingDate = new Date(this.periodeEssai.plannedEndingDate).toISOString().split('T')[0];
+    }
+    if (this.periodeEssai.realEndingDate) {
+      this.realEndingDate = new Date(this.periodeEssai.realEndingDate).toISOString().split('T')[0];
+    }
+  }
+
+  getCollaborateurs():void {
+    this.collaborateurService.getCollaborateurs()
+      .subscribe(collaborateurs => this.collaborateurs = collaborateurs);
+  }
+
+  add(periodeEssai: PeriodeEssai): void {
+    this.periodeEssaiService.addPeriodeEssai(periodeEssai)
+      .subscribe(periodeEssai => {
+        this.periodeEssais.push(periodeEssai);
+      });
+  }
+
+  onSubmit() {
+    this.submitted = true;
+
+    if (this.registerForm.invalid) {
+      return;
+    }
+    this.periodeEssai.comment = this.registerForm.value.comment
+    this.periodeEssai.collaborateurId = this.registerForm.value.collaborateurId
+    this.periodeEssai.issue = this.registerForm.value.issue
+    this.periodeEssai.plannedEndingDate = this.registerForm.value.plannedEndingDate
+    this.periodeEssai.realEndingDate = this.registerForm.value.realEndingDate
+    this.periodeEssai.startingDate = this.registerForm.value.startingDate
+    this.add(this.periodeEssai)
+  }
+
+  get f() { return this.registerForm.controls; }
+
+  onReset() {
+    this.submitted = false;
+    this.registerForm.reset();
+  }
+
+  onStartingDateChange($event: any):void {
+    this.periodeEssai.startingDate = new Date($event.target.value);
+  }
+
+  onPlannedEndingDateChange($event: any):void {
+    this.periodeEssai.plannedEndingDate = new Date($event.target.value);
+  }
+
+  onRealEndingDateChange($event: any):void {
+    this.periodeEssai.realEndingDate = new Date($event.target.value);
   }
 
 }

src/app/interfaces/periode-essai.ts

@@ -0,0 +1,9 @@
+export interface PeriodeEssai {
+  id: number;
+  collaborateurId : number;
+  startingDate : Date;
+  plannedEndingDate : Date;
+  realEndingDate : Date;
+  comment : string;
+  issue : string;
+}

src/app/services/periode-essai.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import {HttpClient, HttpHeaders} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {periodeessaisUrl} from "../../ressources/routes/routesPreprod";
+import {PeriodeEssai} from "../interfaces/periode-essai";
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PeriodeEssaiService{
+  private periodeessaisUrl = periodeessaisUrl;
+
+  httpOptions = {
+    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+  };
+
+  constructor(private http: HttpClient) { }
+
+  getPeriodeEssais():Observable<PeriodeEssai[]> {
+    return this.http.get<PeriodeEssai[]>(this.periodeessaisUrl);
+  }
+
+  getPeriodeEssai(id : number):Observable<PeriodeEssai>{
+    return this.http.get<PeriodeEssai>(this.periodeessaisUrl+"/"+id);
+  }
+
+  updatePeriodeEssai(periodeEssai : PeriodeEssai):Observable<PeriodeEssai>{
+    let body = JSON.stringify(periodeEssai);
+    return this.http.put<PeriodeEssai>(this.periodeessaisUrl + "/" + periodeEssai.id, body, this.httpOptions);
+  }
+
+  addPeriodeEssai(periodeEssai: PeriodeEssai): Observable<PeriodeEssai> {
+    let body = JSON.stringify(periodeEssai);
+    return this.http.post<PeriodeEssai>(this.periodeessaisUrl, body, this.httpOptions);
+  }
+}

src/ressources/routes/routesPreprod.ts

@@ -1,3 +1,4 @@
 export const collaborateursUrl = 'https://collaborateur-epa.apsdigit.lan/api/collaborateurs';
 export const agencesUrl = 'https://collaborateur-epa.apsdigit.lan/api/agences';
 export const businessunitsUrl = 'https://collaborateur-epa.apsdigit.lan/api/businessunits';
+export const periodeessaisUrl = 'https://collaboratuer-epa.apsdigit.lan/api/periodeessais';