gestion de la période d'essai et des éditions

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

@@ -1 +1,69 @@
-<p>periode-essai-edit works!</p>
+<div xmlns="">
+
+  <h3>Ajouter une Période d'Essai : </h3>
+
+  <form *ngIf="periodeEssaiObservable | async;"
+        [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 (click)="goBack()">Retour</button>
+      <button type="submit">Sauvegarder les changements</button>
+      <button (click)="delete()">Supprimer la période d'essai</button>
+      <button type="reset" (click)="onReset()">Effacer</button>
+    </div>
+
+  </form>
+
+</div>

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

@@ -1,4 +1,13 @@
 import { Component, OnInit } from '@angular/core';
+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";
+import {Observable} from "rxjs";
+import {ActivatedRoute} from "@angular/router";
+import {take, tap} from "rxjs/operators";
+import {Location} from "@angular/common";
 
 @Component({
   selector: 'app-periode-essai-edit',
@@ -7,9 +16,109 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PeriodeEssaiEditComponent implements OnInit {
 
-  constructor() { }
+  periodeEssaiObservable! : Observable<PeriodeEssai>;
+  id: number;
 
-  ngOnInit(): void {
+  collaborateurs : Collaborateur[] = [];
+  collaborateur = {} as Collaborateur;
+
+  periodeEssais : PeriodeEssai[] = [];
+  periodeEssai = {} as PeriodeEssai;
+
+  registerForm!: FormGroup;
+  submitted = false;
+
+  startingDate : String = "";
+  plannedEndingDate : String = "";
+  realEndingDate : String = "";
+
+  constructor(
+    private route: ActivatedRoute,
+    private location: Location,
+    private collaborateurService: CollaborateurService,
+    private periodeEssaiService: PeriodeEssaiService,
+    private formBuilder: FormBuilder
+  ) {
+    this.id = Number(this.route.snapshot.paramMap.get('id'))
+  }
+
+  async ngOnInit() {
+    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]
+    });
+    this.periodeEssaiObservable = this.periodeEssaiService.getPeriodeEssai(this.id).pipe(tap(periodeEssai => this.registerForm.patchValue(periodeEssai)))
+    this.periodeEssai = await this.periodeEssaiObservable.pipe(take(1)).toPromise()
+    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);
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
+
+  delete():void {
+    if (this.periodeEssai){
+      this.periodeEssaiService.deletePeriodeEssai(this.periodeEssai)
+        .subscribe(()=>this.goBack());
+    }
+  }
+
+  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
+
+    if (this.periodeEssai){
+      this.periodeEssaiService.updatePeriodeEssai(this.periodeEssai)
+        .subscribe(()=>this.goBack());
+    }
+  }
+
+  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/components/periode-essai/periode-essai.component.html

@@ -79,7 +79,7 @@
       <tr *ngFor="let periodeEssai of periodeEssais">
         <th scope="row">{{periodeEssai.id}}</th>
         <td> {{periodeEssai.collaborateurId}} </td>
-        <td> <a routerLink="{{periodeEssai.issue}}"></a></td>
+        <td> {{periodeEssai.issue}}</td>
         <td> <a routerLink="{{periodeEssai.id}}"> Modifier </a></td>
       </tr>
       </tbody>

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

@@ -35,6 +35,7 @@ export class PeriodeEssaiComponent implements OnInit {
 
   ngOnInit(): void {
     this.getCollaborateurs();
+    this.getPeriodeEssais();
     this.registerForm = this.formBuilder.group({
       comment: ['', Validators.required],
       collaborateurId: ['',Validators.required],
@@ -68,7 +69,6 @@ export class PeriodeEssaiComponent implements OnInit {
 
   onSubmit() {
     this.submitted = true;
-
     if (this.registerForm.invalid) {
       return;
     }
@@ -100,4 +100,8 @@ export class PeriodeEssaiComponent implements OnInit {
     this.periodeEssai.realEndingDate = new Date($event.target.value);
   }
 
+  getPeriodeEssais() {
+    this.periodeEssaiService.getPeriodeEssais()
+      .subscribe(periodeEssais => this.periodeEssais = periodeEssais);
+  }
 }

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

@@ -30,6 +30,10 @@ export class PeriodeEssaiService{
     return this.http.put<PeriodeEssai>(this.periodeessaisUrl + "/" + periodeEssai.id, body, this.httpOptions);
   }
 
+  deletePeriodeEssai(periodeEssai: PeriodeEssai) {
+    return this.http.delete(this.periodeessaisUrl + "/" + periodeEssai.id);
+  }
+
   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,4 +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';
+export const periodeessaisUrl = 'https://collaborateur-epa.apsdigit.lan/api/periodeessais';