Merge pull request 'fix_champs_non_modifies' (#12) from fix_champs_non_modifies into develop

Reviewed-on: Clement.Ferrere/Collaborateur_Epa_Front#12

Dockerfile

@@ -6,12 +6,10 @@ RUN mkdir -p /app
 
 WORKDIR /app
 
-COPY package.json /app
+COPY . /app
 
 RUN npm install
 
-COPY . /app
-
 RUN npm run build --prod
 
 # Stage 2

src/app/app-routing.module.ts

@@ -7,6 +7,8 @@ import {AgenceComponent} from "./components/agence/agence.component";
 import {AgenceEditComponent} from "./components/agence/agence-edit/agence-edit.component";
 import {BusinessunitComponent} from "./components/businessunit/businessunit.component";
 import {BusinessunitEditComponent} from "./components/businessunit/businessunit-edit/businessunit-edit.component";
+import {PeriodeEssaiComponent} from "./components/periode-essai/periode-essai.component";
+import {PeriodeEssaiEditComponent} from "./components/periode-essai/periode-essai-edit/periode-essai-edit.component";
 
 const routes : Routes = [
   {path:'', redirectTo:'/home', pathMatch:'full'},
@@ -17,6 +19,8 @@ const routes : Routes = [
   { path: 'agences/:id', component: AgenceEditComponent, data:{title:'Agences'} },
   { path:'businessunits',component:BusinessunitComponent, data:{title:'BusinessUnits'} },
   { path: 'businessunits/:id', component: BusinessunitEditComponent, data:{title:'BusinessUnits'} },
+  { path:'periodeessais',component:PeriodeEssaiComponent, data:{title:'Periodes d\'Essai'} },
+  { path: 'periodeessais/:id', component: PeriodeEssaiEditComponent, data:{title:'Periodes d\'Essai'} },
 ];
 
 @NgModule({

src/app/app.component.html

@@ -58,16 +58,19 @@
 
 <div class="toolbar" role="banner">
   <nav>
-    <a class="toolbar-button" routerLink="/home">Home</a>
+    <a routerLink="/home">Home</a>
   </nav>
   <nav>
-    <a class="toolbar-button" routerLink="/businessunits">Business Units</a>
+    <a routerLink="/businessunits">Business Units</a>
   </nav>
   <nav>
-    <a class="toolbar-button" routerLink="/agences">Agences</a>
+    <a routerLink="/agences">Agences</a>
   </nav>
   <nav>
-    <a class="toolbar-button" routerLink="/collaborateurs">Collaborateurs</a>
+    <a routerLink="/collaborateurs">Collaborateurs</a>
+  </nav>
+  <nav>
+    <a routerLink="/periodeessais">Périodes d'essai</a>
   </nav>
 </div>
 

src/app/app.module.ts

@@ -13,6 +13,8 @@ import { AgenceComponent } from './components/agence/agence.component';
 import { AgenceEditComponent } from './components/agence/agence-edit/agence-edit.component';
 import { BusinessunitComponent } from './components/businessunit/businessunit.component';
 import { BusinessunitEditComponent } from './components/businessunit/businessunit-edit/businessunit-edit.component';
+import { PeriodeEssaiComponent } from './components/periode-essai/periode-essai.component';
+import { PeriodeEssaiEditComponent } from './components/periode-essai/periode-essai-edit/periode-essai-edit.component';
 
 @NgModule({
   declarations: [
@@ -24,6 +26,8 @@ import { BusinessunitEditComponent } from './components/businessunit/businessuni
     AgenceEditComponent,
     BusinessunitComponent,
     BusinessunitEditComponent,
+    PeriodeEssaiComponent,
+    PeriodeEssaiEditComponent,
 
   ],
   imports: [

src/app/components/agence/agence-edit/agence-edit.component.html

@@ -4,7 +4,10 @@
   <h2>{{agence.name | uppercase}} </h2>
   <div><span>id : </span>{{agence.id}}</div>
 
-  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
+  <form
+    *ngIf="agenceObservable | async;"
+    [formGroup]="registerForm"
+    (ngSubmit)="onSubmit()" >
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
       <label class="form-label">Nom</label>
@@ -27,9 +30,9 @@
 
 
     <div>
-      <button (click)="goBack()">Retour</button>
       <button type="submit">Sauvegarder les changements</button>
       <button type="reset" (click)="onReset()">Effacer</button>
+      <button (click)="goBack()">Retour</button>
     </div>
   </form>
 

src/app/components/agence/agence-edit/agence-edit.component.ts

@@ -6,6 +6,8 @@ import {Location} from "@angular/common";
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {Businessunit} from "../../../interfaces/businessunit";
 import {BusinessunitService} from "../../../services/businessunit.service";
+import {Observable} from "rxjs";
+import {take, tap} from "rxjs/operators";
 
 @Component({
   selector: 'app-agence-edit',
@@ -13,9 +15,12 @@ import {BusinessunitService} from "../../../services/businessunit.service";
   styleUrls: ['./agence-edit.component.scss']
 })
 export class AgenceEditComponent implements OnInit {
-  agence = {} as Agence;
   businessUnits : Businessunit[] = [];
   businessUnit = {} as Businessunit ;
+  agence = {} as Agence;
+
+  agenceObservable!:Observable<Agence>;
+  id: number;
 
   registerForm!: FormGroup;
   submitted = false;
@@ -26,43 +31,40 @@ export class AgenceEditComponent implements OnInit {
     private businessUnitService: BusinessunitService,
     private location: Location,
     private formBuilder: FormBuilder
-  ) { }
+  ) {
+    this.id = Number(this.route.snapshot.paramMap.get('id'))
+  }
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
     this.getBusinessUnits()
-    this.getAgence()
     this.registerForm = this.formBuilder.group({
       name: ['', Validators.required],
       businessUnitId:['',Validators.required]
     });
+    this.agenceObservable = this.agenceService.getAgence(this.id).pipe(tap(agence => this.registerForm.patchValue(agence)))
+    this.agence = await this.agenceObservable.pipe(take(1)).toPromise()
   }
 
-  getAgence(): void {
+  getBusinessUnits() {
-    const id = Number(this.route.snapshot.paramMap.get('id'))
+    this.businessUnitService.getBusinessunits()
-    this.agenceService.getAgence(id)
+      .subscribe(businessunits => this.businessUnits = businessunits);
-      .subscribe(agence => this.agence = agence);
   }
 
   goBack(): void {
     this.location.back();
   }
 
-  save():void{
+  onSubmit():void{
-    if (this.agence){
+    this.submitted = true
-      this.agenceService.updateAgence(this.agence)
-        .subscribe(()=>this.goBack());
-    }
-  }
-
-
-  onSubmit() {
-    this.submitted = true;
-
     if (this.registerForm.invalid) {
       return;
     }
+    if (this.agence){
     this.agence.name = this.registerForm.value.name
-    this.save()
+    this.agence.businessUnitId = this.registerForm.value.businessUnitId
+      this.agenceService.updateAgence(this.agence)
+        .subscribe(()=>this.goBack());
+    }
   }
 
   get f() { return this.registerForm.controls; }
@@ -71,9 +73,5 @@ export class AgenceEditComponent implements OnInit {
     this.submitted = false;
     this.registerForm.reset();
   }
-  getBusinessUnits():void {
-    this.businessUnitService.getBusinessunits()
-      .subscribe(businessunits => this.businessUnits = businessunits);
-  }
 
 }

src/app/components/businessunit/businessunit-edit/businessunit-edit.component.html

@@ -1,24 +1,26 @@
 
 <div *ngIf="businessunit">
 
-  <h2>{{businessunit.name | uppercase}} </h2>
+  <h2>{{bu.name | uppercase}} </h2>
-  <div><span>id : </span>{{businessunit.id}}</div>
+  <div><span>id : </span>{{bu.id}}</div>
 
-  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
+  <form
+    *ngIf="businessunit | async;"
+    [formGroup]="registerForm"
+    (ngSubmit)="onSubmit()" >
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
       <label class="form-label">Nom</label>
-      <input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" [value]="businessunit.name">
+      <input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }">
       <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
         <div *ngIf="f.name.errors.required">Le nom d'une business unit est obligatoire</div>
       </div>
     </div>
 
     <div>
-      <button (click)="goBack()">Retour</button>
       <button type="submit">Sauvegarder les changements</button>
-      <button (click)="delete()">Supprimer la business unit</button>
       <button type="reset" (click)="onReset()">Effacer</button>
+      <button (click)="goBack()">Retour</button>
     </div>
   </form>
 </div>

src/app/components/businessunit/businessunit-edit/businessunit-edit.component.ts

@@ -4,8 +4,8 @@ import {ActivatedRoute} from "@angular/router";
 import {BusinessunitService} from "../../../services/businessunit.service";
 import {Location} from "@angular/common";
 import {FormBuilder, FormGroup, Validators} from "@angular/forms";
-import {Agence} from "../../../interfaces/agence";
+import {Observable} from "rxjs";
-import {AgenceService} from "../../../services/agence.service";
+import {take, tap} from "rxjs/operators";
 
 @Component({
   selector: 'app-businessunit-edit',
@@ -14,9 +14,9 @@ import {AgenceService} from "../../../services/agence.service";
 })
 export class BusinessunitEditComponent implements OnInit {
 
-  businessunit = {} as Businessunit ;
+  businessunit! : Observable<Businessunit> ;
-  agences : Agence[] = [];
+  bu = {} as Businessunit ;
-
+  id: number;
 
   registerForm!: FormGroup;
   submitted = false;
@@ -24,56 +24,31 @@ export class BusinessunitEditComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private businessunitService: BusinessunitService,
-    private agenceService: AgenceService,
     private location: Location,
     private formBuilder: FormBuilder
-  ) { }
+  ) {
+    this.id = Number(this.route.snapshot.paramMap.get('id'))
+  }
 
-  ngOnInit(): void {
+  async ngOnInit() {
-    this.getBusinessunit();
-    this.getAgences();
     this.registerForm = this.formBuilder.group({
       name: ['', Validators.required]
     });
-  }
+    this.businessunit = this.businessunitService.getBusinessunit(this.id).pipe(tap(businessUnit => this.registerForm.patchValue(businessUnit)));
-
+    this.bu = await this.businessunit.pipe(take(1)).toPromise()
-  getAgences():void {
-    this.agenceService.getAgences()
-      .subscribe(agences => this.agences = agences);
-  }
-
-  getBusinessunit(): void {
-    const id = Number(this.route.snapshot.paramMap.get('id'))
-    this.businessunitService.getBusinessunit(id)
-      .subscribe(businessunit => this.businessunit = businessunit);
-  }
-
-  goBack(): void {
-    this.location.back();
-  }
-
-  save():void{
-    if (this.businessunit){
-      this.businessunitService.updateBusinessunit(this.businessunit)
-        .subscribe(()=>this.goBack());
-    }
-  }
-
-  delete():void {
-    if (this.businessunit){
-      this.businessunitService.deleteBusinessunit(this.businessunit)
-        .subscribe(()=>this.goBack());
-    }
   }
 
   onSubmit() {
     this.submitted = true;
-
     if (this.registerForm.invalid) {
       return;
     }
-    this.businessunit.name = this.registerForm.value.name
+    this.bu.name = this.registerForm.value.name
-    this.save()
+
+    if (this.businessunit) {
+      this.businessunitService.updateBusinessunit(this.bu, this.id)
+        .subscribe(() => this.goBack());
+    }
   }
 
   get f() { return this.registerForm.controls; }
@@ -83,4 +58,8 @@ export class BusinessunitEditComponent implements OnInit {
     this.registerForm.reset();
   }
 
+  goBack(): void {
+    this.location.back();
+  }
+
 }

src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html

@@ -5,7 +5,9 @@
 
   <div><label class="form-label">ID : </label>{{collaborateur.id}}</div>
 
-  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
+  <form *ngIf="collaborateurObservable | async;"
+        [formGroup]="registerForm"
+        (ngSubmit)="onSubmit()" >
 
     <div class="row mb-2">
 
@@ -96,14 +98,19 @@
         <input type="email" class="form-control" formControlName="personalMail" [ngClass]="{ 'is-invalid': submitted && f.personalMail.errors }" placeholder="prenom.nom@example.com" [value]="collaborateur.personalMail">
         <div *ngIf="submitted && f.personalMail.errors" class="invalid-feedback">
           <div *ngIf="f.personalMail.errors.required">Le mail personnel d'un collaborateur est obligatoire</div>
+          <div *ngIf="f.personalMail.errors.pattern">Le mail personnel d'un collaborateur doit être au format "exemple@nom.de.domaine"</div>
         </div>
       </div>
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Mail Apside</label>
-        <input type="email" class="form-control" formControlName="apsideMail" [ngClass]="{ 'is-invalid': submitted && f.apsideMail.errors }" placeholder="prenom.nom@apside-groupe.com" [value]="collaborateur.apsideMail">
+        <input type="email" class="form-control" formControlName="apsideMail" [ngClass]="{ 'is-invalid': (submitted && f.apsideMail.errors) || errorValue==1 }" placeholder="prenom.nom@apside-groupe.com" [value]="collaborateur.apsideMail">
         <div *ngIf="submitted && f.apsideMail.errors" class="invalid-feedback">
           <div *ngIf="f.apsideMail.errors.required">Le mail Apside d'un collaborateur est obligatoire</div>
+          <div *ngIf="f.apsideMail.errors.pattern">Le mail Apside d'un collaborateur doit être au format "exemple@apside-groupe.com" ou "exemple@apside.fr"</div>
+        </div>
+        <div *ngIf="submitted && errorValue==1" class="invalid-feedback">
+          <div *ngIf="errorValue==1">Le mail Apside que vous avez entré est déjà utilisé pour un autre collaborateur</div>
         </div>
       </div>
 
@@ -144,10 +151,10 @@
     </div>
 
     <div>
-      <button (click)="goBack()">Retour</button>
       <button type="submit">Sauvegarder les changements</button>
       <button (click)="delete()">Supprimer le collaborateur</button>
       <button type="reset" (click)="onReset()">Effacer</button>
+      <button (click)="goBack()">Retour</button>
     </div>
   </form>
 

src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.ts

@@ -6,6 +6,8 @@ import { CollaborateurService} from "../../../services/collaborateur.service";
 import {BusinessunitService} from "../../../services/businessunit.service";
 import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 import {Businessunit} from "../../../interfaces/businessunit";
+import {Observable} from "rxjs";
+import {take, tap} from "rxjs/operators";
 
 @Component({
   selector: 'app-collaborateur-edit',
@@ -13,11 +15,16 @@ import {Businessunit} from "../../../interfaces/businessunit";
   styleUrls: ['./collaborateur-edit.component.scss']
 })
 export class CollaborateurEditComponent implements OnInit {
+
+  collaborateurObservable! : Observable<Collaborateur>;
+  id: number;
+
   collaborateur = {} as Collaborateur;
+  businessUnit = {} as Businessunit ;
   collaborateurs : Collaborateur[] = [];
   businessUnits : Businessunit[] = [];
-  businessUnit = {} as Businessunit ;
 
+  errorValue : number = 0;
   rDate : String = "";
   bDate : String = "";
 
@@ -30,11 +37,12 @@ export class CollaborateurEditComponent implements OnInit {
     private businessunitService: BusinessunitService,
     private location: Location,
     private formBuilder: FormBuilder
-  ) { }
+  ) {
+    this.id = Number(this.route.snapshot.paramMap.get('id'))
+  }
 
-  ngOnInit(): void {
+  async ngOnInit() {
     this.getCollaborateurs()
-    this.getCollaborateur();
     this.getBusinessunits();
     this.registerForm = this.formBuilder.group({
       name: ['', Validators.required],
@@ -45,12 +53,14 @@ export class CollaborateurEditComponent implements OnInit {
       childrenNumber: ['', Validators.required],
       address: ['', Validators.required],
       telephone: ['', Validators.required],
-      personalMail: ['', Validators.required],
+      personalMail: ['',Validators.compose([Validators.required,Validators.pattern(".+@[a-z]*\.[a-z]*")])],
-      apsideMail: ['', Validators.required],
+      apsideMail: ['', Validators.compose([Validators.required,Validators.pattern(".+@apside-groupe\.com|.*@apside\.fr")])],
       resignationDate: ['', Validators.required],
       referrerId: ['', Validators.required],
       businessUnitId: ['', Validators.required],
     });
+    this.collaborateurObservable = this.collaborateurService.getCollaborateur(this.id).pipe(tap(collaborateur => this.registerForm.patchValue(collaborateur)))
+    this.collaborateur = await this.collaborateurObservable.pipe(take(1)).toPromise()
     if (this.collaborateur.resignationDate) {
       this.rDate = new Date(this.collaborateur.resignationDate).toISOString().split('T')[0];
     }
@@ -64,12 +74,6 @@ export class CollaborateurEditComponent implements OnInit {
       .subscribe(collaborateurs => this.collaborateurs = collaborateurs);
   }
 
-  getCollaborateur(): void {
-    const id = Number(this.route.snapshot.paramMap.get('id'))
-    this.collaborateurService.getCollaborateur(id)
-      .subscribe(collaborateur => this.collaborateur = collaborateur);
-  }
-
   getBusinessunits():void {
     this.businessunitService.getBusinessunits()
       .subscribe(businessunits => this.businessUnits = businessunits);
@@ -79,13 +83,6 @@ export class CollaborateurEditComponent implements OnInit {
     this.location.back();
   }
 
-  save():void{
-    if (this.collaborateur){
-      this.collaborateurService.updateCollaborateur(this.collaborateur)
-        .subscribe(()=>this.goBack());
-    }
-  }
-
   delete():void {
     if (this.collaborateur){
       this.collaborateurService.deleteCollaborateur(this.collaborateur)
@@ -99,10 +96,35 @@ export class CollaborateurEditComponent implements OnInit {
     if (this.registerForm.invalid) {
       return;
     }
-    this.collaborateur = this.registerForm.value
+
-    this.save()
+    this.collaborateur.name = this.registerForm.value.name
+    this.collaborateur.firstName = this.registerForm.value.firstName
+    this.collaborateur.birthDate = this.registerForm.value.birthDate
+    this.collaborateur.gender = this.registerForm.value.gender
+    this.collaborateur.resignationDate = this.registerForm.value.resignationDate
+    this.collaborateur.businessUnitId = this.registerForm.value.businessUnitId
+    this.collaborateur.referrerId = this.registerForm.value.referrerId
+    this.collaborateur.apsideMail = this.registerForm.value.apsideMail
+    this.collaborateur.personalMail = this.registerForm.value.personalMail
+    this.collaborateur.telephone = this.registerForm.value.telephone
+    this.collaborateur.address = this.registerForm.value.address
+    this.collaborateur.childrenNumber = this.registerForm.value.childrenNumber
+    this.collaborateur.status = this.registerForm.value.status
+
+    if (this.collaborateur) {
+      this.collaborateurService.updateCollaborateur(this.collaborateur).subscribe({
+        next: () => {
+          this.goBack();
+        },
+        error: () => {
+          this.errorValue = 1;
+        }
+      })
+
+    }
   }
 
+
   get f() { return this.registerForm.controls; }
 
   onReset() {

src/app/components/collaborateur/collaborateur.component.html

@@ -93,17 +93,24 @@
         <input type="email" class="form-control" formControlName="personalMail" [ngClass]="{ 'is-invalid': submitted && f.personalMail.errors }" placeholder="prenom.nom@example.com">
         <div *ngIf="submitted && f.personalMail.errors" class="invalid-feedback">
           <div *ngIf="f.personalMail.errors.required">Le mail personnel d'un collaborateur est obligatoire</div>
+          <div *ngIf="f.personalMail.errors.pattern">Le mail personnel d'un collaborateur doit être au format "exemple@nom.de.domaine"</div>
         </div>
       </div>
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Mail Apside</label>
-        <input type="email" class="form-control" formControlName="apsideMail" [ngClass]="{ 'is-invalid': submitted && f.apsideMail.errors }" placeholder="prenom.nom@apside-groupe.com">
+        <input type="email" class="form-control" formControlName="apsideMail" [ngClass]="{ 'is-invalid': (submitted && f.apsideMail.errors) || errorValue==1 }" placeholder="prenom.nom@apside-groupe.com" [value]="collaborateur.apsideMail">
         <div *ngIf="submitted && f.apsideMail.errors" class="invalid-feedback">
           <div *ngIf="f.apsideMail.errors.required">Le mail Apside d'un collaborateur est obligatoire</div>
+          <div *ngIf="f.apsideMail.errors.pattern">Le mail Apside d'un collaborateur doit être au format "exemple@apside-groupe.com" ou "exemple@apside.fr"</div>
+        </div>
+        <div *ngIf="submitted && errorValue==1" class="invalid-feedback">
+          <div *ngIf="errorValue==1">Le mail Apside que vous avez entré est déjà utilisé pour un autre collaborateur</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épart</label>
         <input type="date" class="form-control" formControlName="resignationDate" (change)="onResignationDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.resignationDate.errors }">

src/app/components/collaborateur/collaborateur.component.ts

@@ -17,6 +17,7 @@ export class CollaborateurComponent implements OnInit {
   businessUnits : Businessunit[] = [];
   businessUnit = {} as Businessunit ;
 
+  errorValue : number = 0;
   rDate : String = "";
   bDate : String = "";
 
@@ -42,8 +43,8 @@ export class CollaborateurComponent implements OnInit {
       childrenNumber: ['', Validators.required],
       address: ['', Validators.required],
       telephone: ['', Validators.required],
-      personalMail: ['', Validators.required],
+      personalMail: ['',Validators.compose([Validators.required,Validators.pattern(".*@[a-z]*\.[a-z]*")])],
-      apsideMail: ['', Validators.required],
+      apsideMail: ['', Validators.compose([Validators.required,Validators.pattern(".*@apside-groupe\.com|.*@apside\.fr")])],
       resignationDate: ['', Validators.required],
       referrerId: ['', Validators.required],
       businessUnitId: ['', Validators.required],
@@ -66,13 +67,6 @@ export class CollaborateurComponent implements OnInit {
       .subscribe(businessunits => this.businessUnits = businessunits);
   }
 
-  add(collaborateur: Collaborateur): void {
-    this.collaborateurService.addCollaborateur(collaborateur)
-      .subscribe(collaborateur => {
-        this.collaborateurs.push(collaborateur);
-      });
-  }
-
   onSubmit() {
     this.submitted = true;
 
@@ -80,7 +74,16 @@ export class CollaborateurComponent implements OnInit {
       return;
     }
     this.collaborateur = this.registerForm.value
-    this.add(this.collaborateur)
+    if (this.collaborateur) {
+      this.collaborateurService.addCollaborateur(this.collaborateur).subscribe({
+        next: () => {
+        },
+        error: () => {
+          this.errorValue = 1;
+        }
+      })
+
+    }
   }
 
   get f() { return this.registerForm.controls; }

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

@@ -0,0 +1,69 @@
+<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 type="submit">Sauvegarder les changements</button>
+      <button (click)="delete()">Supprimer la période d'essai</button>
+      <button type="reset" (click)="onReset()">Effacer</button>
+      <button (click)="goBack()">Retour</button>
+    </div>
+
+  </form>
+
+</div>

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

@@ -0,0 +1,124 @@
+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',
+  templateUrl: './periode-essai-edit.component.html',
+  styleUrls: ['./periode-essai-edit.component.scss']
+})
+export class PeriodeEssaiEditComponent implements OnInit {
+
+  periodeEssaiObservable! : Observable<PeriodeEssai>;
+  id: number;
+
+  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

@@ -0,0 +1,92 @@
+<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> {{periodeEssai.issue}}</td>
+        <td> <a routerLink="{{periodeEssai.id}}"> Modifier </a></td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+
+
+
+
+</div>

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

@@ -0,0 +1,107 @@
+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',
+  templateUrl: './periode-essai.component.html',
+  styleUrls: ['./periode-essai.component.scss']
+})
+export class PeriodeEssaiComponent implements OnInit {
+
+  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.getPeriodeEssais();
+    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);
+  }
+
+  getPeriodeEssais() {
+    this.periodeEssaiService.getPeriodeEssais()
+      .subscribe(periodeEssais => this.periodeEssais = periodeEssais);
+  }
+}

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/businessunit.service.ts

@@ -21,16 +21,12 @@ export class BusinessunitService {
   }
 
   getBusinessunit(id : number):Observable<Businessunit>{
-    return this.http.get<Businessunit>(this.businessunitsUrl+"/"+id);
+    return this.http.get<Businessunit>(this.businessunitsUrl + "/" + id);
   }
 
-  updateBusinessunit(businessunit : Businessunit):Observable<Businessunit>{
+  updateBusinessunit(businessunit: Businessunit, id:number):Observable<Businessunit>{
-    let body = JSON.stringify(businessunit);
+    let body= JSON.stringify(businessunit);
-    return this.http.put<Businessunit>(this.businessunitsUrl + "/" + businessunit.id, body, this.httpOptions);
+    return this.http.put<Businessunit>(this.businessunitsUrl + "/" + id, body, this.httpOptions);
-  }
-
-  deleteBusinessunit(businessunit: Businessunit) {
-    return this.http.delete(this.businessunitsUrl + "/" + businessunit.id);
   }
 
   addBusinessunit(businessunit: Businessunit): Observable<Businessunit> {

src/app/services/collaborateur.service.ts

@@ -28,6 +28,7 @@ export class CollaborateurService {
   updateCollaborateur(collaborateur : Collaborateur):Observable<Collaborateur>{
     let body = JSON.stringify(collaborateur);
     return this.http.put<Collaborateur>(this.collaborateursUrl + "/" + collaborateur.id, body, this.httpOptions);
+
   }
 
   deleteCollaborateur(collaborateur: Collaborateur) {
@@ -37,5 +38,6 @@ export class CollaborateurService {
   addCollaborateur(collaborateur: Collaborateur): Observable<Collaborateur> {
     let body = JSON.stringify(collaborateur);
     return this.http.post<Collaborateur>(this.collaborateursUrl, body, this.httpOptions);
+
   }
 }

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

@@ -0,0 +1,41 @@
+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);
+  }
+
+  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,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://collaborateur-epa.apsdigit.lan/api/periodeessais';

src/styles.scss

@@ -15,59 +15,46 @@ label {
 input {
   font-size: 1em;
   padding: .3rem;
-  margin: .5rem;
+  margin: 0 15px 0 0;
 }
 
-button {
+.form-submit {
-  padding: 5px;
   text-decoration: none;
-  margin: 2px;
-  display: inline-block;
   background-color: $secondary;
   color: white;
   border-radius: 4px;
+
 }
-button:hover {
+.form-submit:hover {
   background-color: $primary;
 }
-button:disabled {
+.form-submit:disabled {
   background-color: #eee;
   color: #ccc;
   cursor: auto;
 }
 
-.form-submit {
+a {
+  padding: 5px;
   text-decoration: none;
+  margin: 2px;
+  display: inline-block;
   background-color: $secondary;
   color: white;
   border-radius: 4px;
-
-}
-.form-submit:hover {
-  background-color: $primary;
-}
-.form-submit:disabled {
-  background-color: #eee;
-  color: #ccc;
-  cursor: auto;
 }
 
-.entities {
+a:hover {
-  margin: 0 0 2em 0;
+  background-color: $primary;
-  list-style-type: none;
+  color: white;
-  padding: 0;
-  width: 15em;
-}
-.entities li {
-  position: relative;
-  cursor: pointer;
 }
 
-.entities li:hover {
+a:active {
-  left: .1em;
+  background-color: #525252;
+  color: white;
 }
 
-.entities a, td a {
+button {
   padding: 5px;
   text-decoration: none;
   margin: 2px;
@@ -75,18 +62,13 @@ button:disabled {
   background-color: $secondary;
   color: white;
   border-radius: 4px;
+  border-color: transparent;
 }
-
+button:hover {
-.entities a:hover {
   background-color: $primary;
 }
-
+button:disabled {
-.entities a:active {
+  background-color: #eee;
-  background-color: #525252;
+  color: #ccc;
-  color: #fafafa;
+  cursor: auto;
-}
-
-input{
-  margin: 0 15px 0 0;
 }
-