Merge pull request 'updates_packages + optimisation + séparation liste/ajout des BUs et agences' (#20) from updates_packages into develop

Reviewed-on: Clement.Ferrere/Collaborateur_Epa_Front#20

README.md

@@ -4,15 +4,18 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change
+any of the source files.
 
 ## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+Run `ng generate component component-name` to generate a new component. You can also
+use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag
+for a production build.
 
 ## Running unit tests
 
@@ -24,4 +27,5 @@ Run `ng e2e` to execute the end-to-end tests via a platform of your choice.
 
 ## Further help
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+To get more help on the Angular CLI use `ng help` or go check out
+the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

src/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {RouterModule,Routes} from "@angular/router";
+import {RouterModule, Routes} from "@angular/router";
 import {CollaborateurComponent} from "./components/collaborateur/collaborateur.component";
 import {CollaborateurEditComponent} from "./components/collaborateur/collaborateur-edit/collaborateur-edit.component";
 import {HomeComponent} from "./components/home/home.component";
@@ -14,23 +14,27 @@ import {ReferencementComponent} from "./components/referencement/referencement.c
 import {ReferencementAddComponent} from "./components/referencement/referencement-add/referencement-add.component";
 import {ReferencementEditComponent} from "./components/referencement/referencement-edit/referencement-edit.component";
 import {PeriodeEssaiAddComponent} from "./components/periode-essai/periode-essai-add/periode-essai-add.component";
+import {AgenceAddComponent} from "./components/agence/agence-add/agence-add.component";
+import {BusinessunitAddComponent} from "./components/businessunit/businessunit-add/businessunit-add.component";
 
-const routes : Routes = [
+const routes: Routes = [
-  {path:'', redirectTo:'/home', pathMatch:'full'},
+  {path: '', redirectTo: '/home', pathMatch: 'full'},
-  { path: 'home', component:HomeComponent, data:{title:'Services Collaborateurs'}},
+  {path: 'home', component: HomeComponent, data: {title: 'Services Collaborateurs'}},
-  { path:'collaborateurs',component:CollaborateurComponent, data:{title:'Collaborateurs'} },
+  {path: 'collaborateurs', component: CollaborateurComponent, data: {title: 'Collaborateurs'}},
-  { path:'collaborateurs/add',component:CollaborateurAddComponent, data:{title:'Collaborateurs'} },
+  {path: 'collaborateurs/add', component: CollaborateurAddComponent, data: {title: 'Collaborateurs'}},
-  { path: 'collaborateurs/:id', component: CollaborateurEditComponent, data:{title:'Collaborateurs'} },
+  {path: 'collaborateurs/:id', component: CollaborateurEditComponent, data: {title: 'Collaborateurs'}},
-  { path:'referencements',component:ReferencementComponent, data:{title:'Referencements'} },
+  {path: 'referencements', component: ReferencementComponent, data: {title: 'Referencements'}},
-  { path:'referencements/add',component:ReferencementAddComponent, data:{title:'Referencements'} },
+  {path: 'referencements/add', component: ReferencementAddComponent, data: {title: 'Referencements'}},
-  { path: 'referencements/:id', component: ReferencementEditComponent, data:{title:'Referencements'} },
+  {path: 'referencements/:id', component: ReferencementEditComponent, data: {title: 'Referencements'}},
-  { path:'agences',component:AgenceComponent, data:{title:'Agences'} },
+  {path: 'agences', component: AgenceComponent, data: {title: 'Agences'}},
-  { path: 'agences/:id', component: AgenceEditComponent, data:{title:'Agences'} },
+  {path: 'agences/add', component: AgenceAddComponent, data: {title: 'Agences'}},
-  { path:'businessunits',component:BusinessunitComponent, data:{title:'BusinessUnits'} },
+  {path: 'agences/:id', component: AgenceEditComponent, data: {title: 'Agences'}},
-  { path: 'businessunits/:id', component: BusinessunitEditComponent, data:{title:'BusinessUnits'} },
+  {path: 'businessunits', component: BusinessunitComponent, data: {title: 'BusinessUnits'}},
-  { path:'periodeessais',component:PeriodeEssaiComponent, data:{title:'Periodes d\'Essai'} },
+  {path: 'businessunits/add', component: BusinessunitAddComponent, data: {title: 'BusinessUnits'}},
-  { path: 'periodeessais/add', component: PeriodeEssaiAddComponent, data:{title:'Periodes d\'Essai'} },
+  {path: 'businessunits/:id', component: BusinessunitEditComponent, data: {title: 'BusinessUnits'}},
-  { path: 'periodeessais/:id', component: PeriodeEssaiEditComponent, data:{title:'Periodes d\'Essai'} },
+  {path: 'periodeessais', component: PeriodeEssaiComponent, data: {title: 'Periodes d\'Essai'}},
+  {path: 'periodeessais/add', component: PeriodeEssaiAddComponent, data: {title: 'Periodes d\'Essai'}},
+  {path: 'periodeessais/:id', component: PeriodeEssaiEditComponent, data: {title: 'Periodes d\'Essai'}},
 ];
 
 @NgModule({
@@ -38,4 +42,5 @@ const routes : Routes = [
   exports: [RouterModule]
 })
 
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}

src/app/app.component.html

@@ -2,31 +2,50 @@
   <nav>
     <button routerLink="/home">Home</button>
   </nav>
-  <nav>
+  <div #dropBusinessUnit="ngbDropdown" class="d-inline-block" ngbDropdown>
-    <button routerLink="/businessunits">Business Units</button>
+    <button (focus)="dropBusinessUnit.open()" id="dropdownBusinessUnit" ngbDropdownAnchor type="button">
-  </nav>
+      Business Units
-  <nav>
+    </button>
-    <button routerLink="/agences">Agences</button>
+    <div aria-labelledby="dropdownBusinessUnit" ngbDropdownMenu>
-  </nav>
+      <button ngbDropdownItem routerLink="/businessunits">Liste</button>
-  <div class="d-inline-block" ngbDropdown #dropCollaborateur="ngbDropdown">
+      <button ngbDropdownItem routerLink="/businessunits/add">Ajouter</button>
-    <button type="button" id="dropdownCollaborateur" ngbDropdownAnchor (focus)="dropCollaborateur.open()">Collaborateurs</button>
+    </div>
-    <div ngbDropdownMenu aria-labelledby="dropdownCollaborateur">
+  </div>
+  <div #dropAgence="ngbDropdown" class="d-inline-block" ngbDropdown>
+    <button (focus)="dropAgence.open()" id="dropdownAgence" ngbDropdownAnchor type="button">
+      Agences
+    </button>
+    <div aria-labelledby="dropdownAgence" ngbDropdownMenu>
+      <button ngbDropdownItem routerLink="/agences">Liste</button>
+      <button ngbDropdownItem routerLink="/agences/add">Ajouter</button>
+    </div>
+  </div>
+
+  <div #dropCollaborateur="ngbDropdown" class="d-inline-block" ngbDropdown>
+    <button (focus)="dropCollaborateur.open()" id="dropdownCollaborateur" ngbDropdownAnchor type="button">
+      Collaborateurs
+    </button>
+    <div aria-labelledby="dropdownCollaborateur" ngbDropdownMenu>
       <button ngbDropdownItem routerLink="/collaborateurs">Liste</button>
       <button ngbDropdownItem routerLink="/collaborateurs/add">Ajouter</button>
     </div>
   </div>
 
-  <div class="d-inline-block" ngbDropdown #dropReferencement="ngbDropdown">
+  <div #dropReferencement="ngbDropdown" class="d-inline-block" ngbDropdown>
-    <button type="button" id="dropdownReferencement" ngbDropdownAnchor (focus)="dropReferencement.open()">Référencements</button>
+    <button (focus)="dropReferencement.open()" id="dropdownReferencement" ngbDropdownAnchor type="button">
-    <div ngbDropdownMenu aria-labelledby="dropdownReferencement">
+      Référencements
+    </button>
+    <div aria-labelledby="dropdownReferencement" ngbDropdownMenu>
       <button ngbDropdownItem routerLink="/referencements">Liste</button>
       <button ngbDropdownItem routerLink="/referencements/add">Ajouter</button>
     </div>
   </div>
 
-  <div class="d-inline-block" ngbDropdown #dropPeriodeEssai="ngbDropdown">
+  <div #dropPeriodeEssai="ngbDropdown" class="d-inline-block" ngbDropdown>
-    <button type="button" id="dropdownPeriodeEssai" ngbDropdownAnchor (focus)="dropPeriodeEssai.open()">Périodes d'essai</button>
+    <button (focus)="dropPeriodeEssai.open()" id="dropdownPeriodeEssai" ngbDropdownAnchor type="button">Périodes
-    <div ngbDropdownMenu aria-labelledby="dropdownPeriodeEssai">
+      d'essai
+    </button>
+    <div aria-labelledby="dropdownPeriodeEssai" ngbDropdownMenu>
       <button ngbDropdownItem routerLink="/periodeessais">Liste</button>
       <button ngbDropdownItem routerLink="/periodeessais/add">Ajouter</button>
     </div>

src/app/app.component.scss

@@ -33,7 +33,7 @@ p {
 }
 
 .terminal pre {
-  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
   color: white;
   padding: 0 1rem 1rem;
   margin: 0;
@@ -53,6 +53,6 @@ nav a:hover {
   background-color: #42545C;
 }
 
-.dropdown-menu{
+.dropdown-menu {
   min-width: fit-content;
 }

src/app/app.component.ts

@@ -1,7 +1,7 @@
-import { Component,OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Title} from "@angular/platform-browser";
-import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
+import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
-import { filter} from 'rxjs/operators';
+import {filter} from 'rxjs/operators';
 
 
 @Component({
@@ -9,7 +9,7 @@ import { filter} from 'rxjs/operators';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit  {
+export class AppComponent implements OnInit {
 
   constructor(private router: Router,
               private activatedRoute: ActivatedRoute,
@@ -23,11 +23,12 @@ export class AppComponent implements OnInit  {
     ).subscribe(() => {
       const rt = this.getChild(this.activatedRoute);
       rt.data.subscribe(data => {
-        this.titleService.setTitle(data.title)});
+        this.titleService.setTitle(data.title)
+      });
     });
   }
 
-  getChild(activatedRoute: ActivatedRoute):ActivatedRoute {
+  getChild(activatedRoute: ActivatedRoute): ActivatedRoute {
     if (activatedRoute.firstChild) {
       return this.getChild(activatedRoute.firstChild);
     } else {

src/app/app.module.ts

@@ -16,12 +16,14 @@ import {BusinessunitEditComponent} from './components/businessunit/businessunit-
 import {PeriodeEssaiComponent} from './components/periode-essai/periode-essai.component';
 import {PeriodeEssaiEditComponent} from './components/periode-essai/periode-essai-edit/periode-essai-edit.component';
 import {CollaborateurAddComponent} from './components/collaborateur/collaborateur-add/collaborateur-add.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import { ToastrModule } from 'ngx-toastr';
+import {ToastrModule} from 'ngx-toastr';
-import { ReferencementComponent } from './components/referencement/referencement.component';
+import {ReferencementComponent} from './components/referencement/referencement.component';
-import { ReferencementAddComponent } from './components/referencement/referencement-add/referencement-add.component';
+import {ReferencementAddComponent} from './components/referencement/referencement-add/referencement-add.component';
-import { ReferencementEditComponent } from './components/referencement/referencement-edit/referencement-edit.component';
+import {ReferencementEditComponent} from './components/referencement/referencement-edit/referencement-edit.component';
-import { PeriodeEssaiAddComponent } from './components/periode-essai/periode-essai-add/periode-essai-add.component';
+import {PeriodeEssaiAddComponent} from './components/periode-essai/periode-essai-add/periode-essai-add.component';
+import { BusinessunitAddComponent } from './components/businessunit/businessunit-add/businessunit-add.component';
+import { AgenceAddComponent } from './components/agence/agence-add/agence-add.component';
 
 @NgModule({
   declarations: [
@@ -40,6 +42,8 @@ import { PeriodeEssaiAddComponent } from './components/periode-essai/periode-ess
     ReferencementAddComponent,
     ReferencementEditComponent,
     PeriodeEssaiAddComponent,
+    BusinessunitAddComponent,
+    AgenceAddComponent,
 
   ],
   imports: [

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

@@ -0,0 +1,33 @@
+<h3>Ajouter une agence : </h3>
+
+<form (ngSubmit)="onSubmit()" [formGroup]="registerForm">
+
+  <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
+    <label class="form-label">Nom</label>
+    <input [ngClass]="{ 'is-invalid': submitted && f.name.errors }" class="form-control" formControlName="name">
+    <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
+      <div *ngIf="f.name.errors.required">Le nom d'une agence est obligatoire</div>
+    </div>
+  </div>
+
+  <div class="form-group col-12 col-md-6">
+    <label class="form-label">Business Unit</label>
+    <select [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }" class="form-select"
+            formControlName="businessUnitId"
+            id="businessUnit-select">
+      <option disabled selected value="">Choisissez la business unit de cette agence</option>
+      <option *ngFor="let businessUnit of businessUnits" [ngValue]="businessUnit.id">{{businessUnit.name}}</option>
+    </select>
+    <div *ngIf="submitted && f.businessUnitId.errors" class="invalid-feedback">
+      <div *ngIf="f.businessUnitId.errors.required">Vous devez choisir la business unit à laquelle appartient
+        l'agence
+      </div>
+    </div>
+  </div>
+
+
+  <div>
+    <button type="submit">Créer l'agence</button>
+    <button type="reset">Effacer</button>
+  </div>
+</form>

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

@@ -0,0 +1,91 @@
+import { Component, OnInit } from '@angular/core';
+import {Agence} from "../../../interfaces/agence";
+import {Businessunit} from "../../../interfaces/businessunit";
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {HttpClient} from "@angular/common/http";
+import {AgenceService} from "../../../services/agence.service";
+import {BusinessunitService} from "../../../services/businessunit.service";
+import {ToastrService} from "ngx-toastr";
+
+@Component({
+  selector: 'app-agence-add',
+  templateUrl: './agence-add.component.html',
+  styleUrls: ['./agence-add.component.scss']
+})
+export class AgenceAddComponent implements OnInit {
+
+  agences: Agence[] = [];
+  agence = {} as Agence;
+  businessUnits: Businessunit[] = [];
+  businessUnit = {} as Businessunit;
+
+  registerForm!: FormGroup;
+  submitted = false;
+
+  constructor(
+    private http: HttpClient,
+    private agenceService: AgenceService,
+    private businessUnitService: BusinessunitService,
+    private formBuilder: FormBuilder,
+    private toastr: ToastrService
+  ) {
+  }
+
+  get f() {
+    return this.registerForm.controls;
+  }
+
+  ngOnInit(): void {
+    this.getAgences();
+    this.getBusinessUnits();
+    this.registerForm = this.formBuilder.group({
+      name: ['', Validators.required],
+      businessUnitId: ['', Validators.required]
+    });
+  }
+
+  getAgences(): void {
+    this.agenceService.getAgences()
+      .subscribe(agences => this.agences = agences);
+  }
+
+  getBusinessUnits() {
+    this.businessUnitService.getBusinessunits()
+      .subscribe(businessunits => this.businessUnits = businessunits);
+  }
+
+  add(agence: Agence): void {
+    this.agenceService.addAgence(agence)
+      .subscribe(agence => {
+          this.agences.push(agence);
+          this.showSuccess();
+        },
+        () => {
+          this.showError()
+        });
+  }
+
+  onSubmit() {
+    this.submitted = true;
+
+    if (this.registerForm.invalid) {
+      return;
+    }
+    this.agence.name = this.registerForm.value.name
+    this.agence.businessUnitId = this.registerForm.value.businessUnitId
+    this.add(this.agence)
+  }
+
+  onReset() {
+    this.submitted = false;
+    this.registerForm.reset();
+  }
+
+  showSuccess() {
+    this.toastr.success('Création réussie', 'Agence');
+  }
+
+  showError() {
+    this.toastr.error('Création échouée', 'Agence');
+  }
+}

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

@@ -1,17 +1,15 @@
-
 <div *ngIf="agence">
 
   <h2>{{agence.name | uppercase}} </h2>
-  <div><span>id : </span>{{agence.id}}</div>
 
   <form
-    *ngIf="agenceObservable | async;"
+    (ngSubmit)="onSubmit()"
-    [formGroup]="registerForm"
+    [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]="agence.name">
+      <input [ngClass]="{ 'is-invalid': submitted && f.name.errors }" [value]="agence.name" class="form-control"
+             formControlName="name">
       <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
         <div *ngIf="f.name.errors.required">Le nom d'une agence est obligatoire</div>
       </div>
@@ -19,23 +17,25 @@
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Business Unit</label>
-      <select class="form-select" formControlName="businessUnitId" id="businessUnit-select" [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }">
+      <select [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }" class="form-select"
-        <option value="" disabled selected>Choisissez la business unit de cette agence</option>
+              formControlName="businessUnitId"
+              id="businessUnit-select">
+        <option disabled selected value="">Choisissez la business unit de cette agence</option>
         <option *ngFor="let businessUnit of businessUnits" [ngValue]="businessUnit.id">{{businessUnit.name}}</option>
       </select>
       <div *ngIf="submitted && f.businessUnitId.errors" class="invalid-feedback">
-        <div *ngIf="f.businessUnitId.errors.required">Vous devez choisir la business unit à laquelle appartient l'agence </div>
+        <div *ngIf="f.businessUnitId.errors.required">Vous devez choisir la business unit à laquelle appartient
+          l'agence
+        </div>
       </div>
     </div>
 
-
     <div>
       <button type="submit">Sauvegarder les changements</button>
-      <button type="reset" (click)="onReset()">Effacer</button>
+      <button type="reset">Effacer</button>
       <button (click)="goBack()">Retour</button>
     </div>
   </form>
 
 
-
 </div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Agence} from "../../../interfaces/agence";
 import {ActivatedRoute} from "@angular/router";
 import {AgenceService} from "../../../services/agence.service";
@@ -16,11 +16,11 @@ import {ToastrService} from "ngx-toastr";
   styleUrls: ['./agence-edit.component.scss']
 })
 export class AgenceEditComponent implements OnInit {
-  businessUnits : Businessunit[] = [];
+  businessUnits: Businessunit[] = [];
-  businessUnit = {} as Businessunit ;
+  businessUnit = {} as Businessunit;
   agence = {} as Agence;
 
-  agenceObservable!:Observable<Agence>;
+  agenceObservable!: Observable<Agence>;
   id: number;
 
   registerForm!: FormGroup;
@@ -37,11 +37,15 @@ export class AgenceEditComponent implements OnInit {
     this.id = Number(this.route.snapshot.paramMap.get('id'))
   }
 
-  async ngOnInit(): Promise<void> {
+  get f() {
+    return this.registerForm.controls;
+  }
+
+  async ngOnInit() {
     this.getBusinessUnits()
     this.registerForm = this.formBuilder.group({
       name: ['', Validators.required],
-      businessUnitId:['',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()
@@ -56,18 +60,17 @@ export class AgenceEditComponent implements OnInit {
     this.location.back();
   }
 
-  onSubmit():void{
+  onSubmit(): void {
     this.submitted = true
     if (this.registerForm.invalid) {
       return;
     }
-    if (this.agence){
+    if (this.agence) {
-    this.agence.name = this.registerForm.value.name
+      this.agence.name = this.registerForm.value.name
-    this.agence.businessUnitId = this.registerForm.value.businessUnitId
+      this.agence.businessUnitId = this.registerForm.value.businessUnitId
       this.agenceService.updateAgence(this.agence)
         .subscribe(() => {
             this.showSuccess();
-            this.goBack();
           },
           () => {
             this.showError()
@@ -75,19 +78,17 @@ export class AgenceEditComponent implements OnInit {
     }
   }
 
-  get f() { return this.registerForm.controls; }
-
   onReset() {
     this.submitted = false;
     this.registerForm.reset();
   }
 
   showSuccess() {
-    this.toastr.success('Modification réussie', 'Business Unit');
+    this.toastr.success('Modification réussie', 'Agence');
   }
 
   showError() {
-    this.toastr.error('Modification échouée', 'Business Unit');
+    this.toastr.error('Modification échouée', 'Agence');
   }
 
 }

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

@@ -1,56 +1,28 @@
 <div xmlns="">
 
-  <h3>Ajouter une agence : </h3>
+  <h2 class=mb-4>Agences</h2>
 
-  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
+  <div style="display: flex">
-
+    <p style="margin: 10px 0 10px 0">Pour ajouter une nouvelle agence, cliquez ici : </p>
-    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
+    <button routerLink="/agences/add">Ajouter</button>
-      <label class="form-label">Nom</label>
+  </div>
-      <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 agence est obligatoire</div>
-      </div>
-    </div>
-
-    <div class="form-group col-12 col-md-6">
-      <label class="form-label">Business Unit</label>
-      <select class="form-select" formControlName="businessUnitId" id="businessUnit-select" [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }">
-        <option value="" disabled selected>Choisissez la business unit de cette agence</option>
-        <option *ngFor="let businessUnit of businessUnits" [ngValue]="businessUnit.id">{{businessUnit.name}}</option>
-      </select>
-      <div *ngIf="submitted && f.businessUnitId.errors" class="invalid-feedback">
-        <div *ngIf="f.businessUnitId.errors.required">Vous devez choisir la business unit à laquelle appartient l'agence </div>
-      </div>
-    </div>
-
-
-    <div>
-      <button type="submit">Créer l'agence</button>
-      <button type="reset" (click)="onReset()">Effacer</button>
-    </div>
-  </form>
-
-  <h2 class = mb-4>Agences</h2>
 
-  <div style="overflow-x:auto;" class="mb-5 col-12">
+  <div class="mb-5 col-12" style="overflow-x:auto;">
     <table class="table">
       <thead>
       <tr>
-        <th scope="col">ID</th>
         <th scope="col">Nom</th>
+        <th scope="col"> Business Unit attitrée</th>
       </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let agence of agences">
+      <tr *ngFor="let agence of agences">
-          <th scope="row">{{agence.id}}</th>
+        <th>{{agence.name}}</th>
-          <td> {{agence.name}} </td>
+        <td>{{getBusinessUnitById(agence.businessUnitId).name}}</td>
-          <td> <a routerLink="{{agence.id}}"> Modifier </a></td>
+        <td><a routerLink="{{agence.id}}"> Modifier </a></td>
-        </tr>
+      </tr>
       </tbody>
     </table>
   </div>
 
-
-
-
 </div>

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

@@ -1,11 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Agence} from "../../interfaces/agence";
 import {HttpClient} from "@angular/common/http";
 import {AgenceService} from "../../services/agence.service";
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {Businessunit} from "../../interfaces/businessunit";
 import {BusinessunitService} from "../../services/businessunit.service";
-import {ToastrService} from "ngx-toastr";
 
 @Component({
   selector: 'app-agence',
@@ -13,76 +11,46 @@ import {ToastrService} from "ngx-toastr";
   styleUrls: ['./agence.component.scss']
 })
 export class AgenceComponent implements OnInit {
-  agences : Agence[] = [];
+  agences: Agence[] = [];
   agence = {} as Agence;
-  businessUnits : Businessunit[] = [];
+  businessUnits: Businessunit[] = [];
-  businessUnit = {} as Businessunit ;
+  businessUnit = {} as Businessunit;
 
-  registerForm!: FormGroup;
-  submitted = false;
 
   constructor(
-    private http : HttpClient,
+    private http: HttpClient,
     private agenceService: AgenceService,
     private businessUnitService: BusinessunitService,
-    private formBuilder: FormBuilder,
+  ) {
-    private toastr: ToastrService
+  }
-  ) { }
+
 
   ngOnInit(): void {
     this.getAgences();
     this.getBusinessUnits();
-    this.registerForm = this.formBuilder.group({
-      name: ['', Validators.required],
-      businessUnitId: ['',Validators.required]
-    });
   }
 
-  getAgences():void {
+  getAgences(): void {
     this.agenceService.getAgences()
       .subscribe(agences => this.agences = agences);
   }
 
-  getBusinessUnits() {
+  getBusinessUnits(): void {
     this.businessUnitService.getBusinessunits()
-      .subscribe(businessunits => this.businessUnits = businessunits);
+      .subscribe(bus => this.businessUnits = bus);
-  }
-
-  add(agence: Agence): void {
-    this.agenceService.addAgence(agence)
-      .subscribe(agence => {
-          this.agences.push(agence);
-          this.showSuccess();
-        },
-        () => {
-          this.showError()
-        });
-  }
-
-  onSubmit() {
-    this.submitted = true;
-
-    if (this.registerForm.invalid) {
-      return;
-    }
-    this.agence.name = this.registerForm.value.name
-    this.agence.businessUnitId = this.registerForm.value.businessUnitId
-    this.add(this.agence)
   }
 
-  get f() { return this.registerForm.controls; }
+  getBusinessUnitById(id: number): Businessunit {
-
+    let bu = {} as Businessunit;
-  onReset() {
+    this.businessUnits.forEach(c => {
-    this.submitted = false;
+      if (c.id == id) {
-    this.registerForm.reset();
+        bu = c;
+        return;
+      }
+    });
+    return bu;
   }
 
-  showSuccess() {
-    this.toastr.success('Création réussie', 'Agence');
-  }
 
-  showError() {
-    this.toastr.error('Création échouée', 'Agence');
-  }
 
 }

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

@@ -0,0 +1,17 @@
+<h3>Ajouter une Business Unit : </h3>
+
+<form (ngSubmit)="onSubmit()" [formGroup]="registerForm">
+
+  <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
+    <label class="form-label">Nom</label>
+    <input [ngClass]="{ 'is-invalid': submitted && f.name.errors }" class="form-control" formControlName="name">
+    <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 type="submit">Créer la business unit</button>
+    <button (click)="onReset()" type="reset">Effacer</button>
+  </div>
+</form>

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

@@ -0,0 +1,72 @@
+import { Component, OnInit } from '@angular/core';
+import {Businessunit} from "../../../interfaces/businessunit";
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {HttpClient} from "@angular/common/http";
+import {BusinessunitService} from "../../../services/businessunit.service";
+import {ToastrService} from "ngx-toastr";
+
+@Component({
+  selector: 'app-businessunit-add',
+  templateUrl: './businessunit-add.component.html',
+  styleUrls: ['./businessunit-add.component.scss']
+})
+export class BusinessunitAddComponent implements OnInit {
+
+  businessunit = {} as Businessunit;
+
+  registerForm!: FormGroup;
+  submitted = false;
+
+  constructor(
+    private http: HttpClient,
+    private businessunitService: BusinessunitService,
+    private formBuilder: FormBuilder,
+    private toastr: ToastrService
+  ) {
+  }
+
+  get f() {
+    return this.registerForm.controls;
+  }
+
+  ngOnInit(): void {
+    this.registerForm = this.formBuilder.group({
+      name: ['', Validators.required],
+    });
+  }
+
+  add(businessunit: Businessunit): void {
+    this.businessunitService.addBusinessunit(businessunit)
+      .subscribe(() => {
+          this.showSuccess();
+        },
+        () => {
+          this.showError()
+        });
+
+  }
+
+  onSubmit() {
+    this.submitted = true;
+
+    if (this.registerForm.invalid) {
+      return;
+    }
+    this.businessunit = this.registerForm.value
+    this.add(this.businessunit)
+  }
+
+  onReset() {
+    this.submitted = false;
+    this.registerForm.reset();
+  }
+
+  showSuccess() {
+    this.toastr.success('Création réussie', 'Business Unit');
+  }
+
+  showError() {
+    this.toastr.error('Création échouée', 'Business Unit');
+  }
+
+}

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

@@ -1,17 +1,14 @@
-
 <div *ngIf="businessunit">
 
   <h2>{{bu.name | uppercase}} </h2>
-  <div><span>id : </span>{{bu.id}}</div>
 
   <form
-    *ngIf="businessunit | async;"
+    (ngSubmit)="onSubmit()"
-    [formGroup]="registerForm"
+    [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 }">
+      <input [ngClass]="{ 'is-invalid': submitted && f.name.errors }" class="form-control" formControlName="name">
       <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>
@@ -19,7 +16,7 @@
 
     <div>
       <button type="submit">Sauvegarder les changements</button>
-      <button type="reset" (click)="onReset()">Effacer</button>
+      <button type="reset">Effacer</button>
       <button (click)="goBack()">Retour</button>
     </div>
   </form>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Businessunit} from "../../../interfaces/businessunit";
 import {ActivatedRoute} from "@angular/router";
 import {BusinessunitService} from "../../../services/businessunit.service";
@@ -15,8 +15,8 @@ import {ToastrService} from "ngx-toastr";
 })
 export class BusinessunitEditComponent implements OnInit {
 
-  businessunit! : Observable<Businessunit> ;
+  businessunit!: Observable<Businessunit>;
-  bu = {} as Businessunit ;
+  bu = {} as Businessunit;
   id: number;
 
   registerForm!: FormGroup;
@@ -32,6 +32,10 @@ export class BusinessunitEditComponent implements OnInit {
     this.id = Number(this.route.snapshot.paramMap.get('id'))
   }
 
+  get f() {
+    return this.registerForm.controls;
+  }
+
   async ngOnInit() {
     this.registerForm = this.formBuilder.group({
       name: ['', Validators.required]
@@ -51,7 +55,6 @@ export class BusinessunitEditComponent implements OnInit {
       this.businessunitService.updateBusinessunit(this.bu, this.id)
         .subscribe(() => {
             this.showSuccess();
-            this.goBack();
           },
           () => {
             this.showError()
@@ -59,8 +62,6 @@ export class BusinessunitEditComponent implements OnInit {
     }
   }
 
-  get f() { return this.registerForm.controls; }
-
   onReset() {
     this.submitted = false;
     this.registerForm.reset();

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

@@ -1,37 +1,22 @@
 <div xmlns="">
 
-  <h3>Ajouter une Business Unit : </h3>
-
-  <form [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 }">
-      <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 type="submit">Créer la business unit</button>
-      <button type="reset" (click)="onReset()">Effacer</button>
-    </div>
-  </form>
-
   <h2 class=mb-4>Business Units</h2>
 
-  <div style="overflow-x:auto;" class="mb-5 col-12">
+  <div style="display: flex">
+    <p style="margin: 10px 0 10px 0">Pour ajouter une nouvelle business unit, cliquez ici : </p>
+    <button routerLink="/businessunits/add">Ajouter</button>
+  </div>
+
+  <div class="mb-5 col-12" style="overflow-x:auto;">
     <table class="table">
       <thead>
       <tr>
-        <th scope="col">ID</th>
         <th scope="col">Nom</th>
       </tr>
       </thead>
       <tbody>
       <tr *ngFor="let businessunit of businessunits">
-        <th scope="row">{{businessunit.id}}</th>
+        <th scope="row">{{businessunit.name}}</th>
-        <td> {{businessunit.name}} </td>
         <td><a routerLink="{{businessunit.id}}"> Modifier </a></td>
       </tr>
       </tbody>

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

@@ -2,8 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {Businessunit} from "../../interfaces/businessunit";
 import {HttpClient} from "@angular/common/http";
 import {BusinessunitService} from "../../services/businessunit.service";
-import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {FormGroup} from "@angular/forms";
-import {ToastrService} from "ngx-toastr";
 
 
 @Component({
@@ -22,16 +21,12 @@ export class BusinessunitComponent implements OnInit {
   constructor(
     private http: HttpClient,
     private businessunitService: BusinessunitService,
-    private formBuilder: FormBuilder,
-    private toastr: ToastrService
   ) {
   }
 
+
   ngOnInit(): void {
     this.getBusinessunits();
-    this.registerForm = this.formBuilder.group({
-      name: ['', Validators.required],
-    });
   }
 
   getBusinessunits(): void {
@@ -39,43 +34,6 @@ export class BusinessunitComponent implements OnInit {
       .subscribe(businessunits => this.businessunits = businessunits);
   }
 
-  add(businessunit: Businessunit): void {
-    this.businessunitService.addBusinessunit(businessunit)
-      .subscribe(businessunit => {
-          this.businessunits.push(businessunit);
-          this.showSuccess();
-        },
-        error => {
-          this.showError()
-        });
-
-  }
-
-  onSubmit() {
-    this.submitted = true;
 
-    if (this.registerForm.invalid) {
-      return;
-    }
-    this.businessunit = this.registerForm.value
-    this.add(this.businessunit)
-  }
-
-  get f() {
-    return this.registerForm.controls;
-  }
-
-  onReset() {
-    this.submitted = false;
-    this.registerForm.reset();
-  }
-
-  showSuccess() {
-    this.toastr.success('Création réussie', 'Business Unit');
-  }
-
-  showError() {
-    this.toastr.error('Création échouée', 'Business Unit');
-  }
 
 }

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

@@ -1,12 +1,12 @@
 <h3>Ajouter un collaborateur : </h3>
 
-<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+<form (ngSubmit)="onSubmit()" [formGroup]="registerForm">
 
   <div class="row mb-2">
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Nom</label>
-      <input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && form.name.errors }">
+      <input [ngClass]="{ 'is-invalid': submitted && form.name.errors }" class="form-control" formControlName="name">
       <div *ngIf="submitted && form.name.errors" class="invalid-feedback">
         <div *ngIf="form.name.errors.required">Le nom d'un collaborateur est obligatoire</div>
       </div>
@@ -14,8 +14,8 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Prénom</label>
-      <input class="form-control" formControlName="firstName"
+      <input [ngClass]="{ 'is-invalid': submitted && form.firstName.errors }" class="form-control"
-             [ngClass]="{ 'is-invalid': submitted && form.firstName.errors }">
+             formControlName="firstName">
       <div *ngIf="submitted && form.firstName.errors" class="invalid-feedback">
         <div *ngIf="form.firstName.errors.required">Le prénom d'un collaborateur est obligatoire</div>
       </div>
@@ -23,8 +23,9 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Date de naissance</label>
-      <input type="date" class="form-control" formControlName="birthDate" (change)="onBirthDateChange($event)"
+      <input (change)="onBirthDateChange($event)" [ngClass]="{ 'is-invalid': submitted && form.birthDate.errors }"
-             [ngClass]="{ 'is-invalid': submitted && form.birthDate.errors }">
+             class="form-control" formControlName="birthDate"
+             type="date">
       <div *ngIf="submitted && form.birthDate.errors" class="invalid-feedback">
         <div *ngIf="form.birthDate.errors.required">La date de naissance d'un collaborateur est obligatoire</div>
       </div>
@@ -32,9 +33,9 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Genre</label>
-      <select class="form-select" formControlName="gender"
+      <select [ngClass]="{ 'is-invalid': submitted && form.gender.errors }" class="form-select"
-              [ngClass]="{ 'is-invalid': submitted && form.gender.errors }">
+              formControlName="gender">
-        <option value="" disabled selected>Genre</option>
+        <option disabled selected value="">Genre</option>
         <option value="MASCULIN">Masculin</option>
         <option value="FEMININ">Féminin</option>
         <option value="AUTRE">Autre</option>
@@ -50,9 +51,9 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Statut</label>
-      <select class="form-select" formControlName="status"
+      <select [ngClass]="{ 'is-invalid': submitted && form.status.errors }" class="form-select"
-              [ngClass]="{ 'is-invalid': submitted && form.status.errors }">
+              formControlName="status">
-        <option value="" disabled selected>Statut</option>
+        <option disabled selected value="">Statut</option>
         <option value="CADRE">Cadre</option>
         <option value="NONCADRE">Non-cadre</option>
         <option value="ALTERNANT">Alternant</option>
@@ -65,9 +66,9 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Nombre d'enfants</label>
-      <input class="form-control" formControlName="childrenNumber"
+      <input [ngClass]="{ 'is-invalid': submitted && form.childrenNumber.errors }" class="form-control"
-             [ngClass]="{ 'is-invalid': submitted && form.childrenNumber.errors }" type="number" min="0"
+             formControlName="childrenNumber" min="0" onkeyup="if(this.value<0){this.value= this.value * -1}"
-             onkeyup="if(this.value<0){this.value= this.value * -1}">
+             type="number">
       <div *ngIf="submitted && form.childrenNumber.errors" class="invalid-feedback">
         <div *ngIf="form.childrenNumber.errors.required">Le nombre d'enfant d'un collaborateur est obligatoire</div>
       </div>
@@ -75,8 +76,8 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Adresse</label>
-      <input class="form-control" formControlName="address"
+      <input [ngClass]="{ 'is-invalid': submitted && form.address.errors }" class="form-control"
-             [ngClass]="{ 'is-invalid': submitted && form.address.errors }">
+             formControlName="address">
       <div *ngIf="submitted && form.address.errors" class="invalid-feedback">
         <div *ngIf="form.address.errors.required">L'adresse d'un collaborateur est obligatoire</div>
       </div>
@@ -84,8 +85,8 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Téléphone</label>
-      <input class="form-control" formControlName="telephone"
+      <input [ngClass]="{ 'is-invalid': submitted && form.telephone.errors }" class="form-control"
-             [ngClass]="{ 'is-invalid': submitted && form.telephone.errors }">
+             formControlName="telephone">
       <div *ngIf="submitted && form.telephone.errors" class="invalid-feedback">
         <div *ngIf="form.telephone.errors.required">Le numéro de téléphone d'un collaborateur est obligatoire</div>
       </div>
@@ -99,8 +100,9 @@
         <label class="form-label" style="padding-right: 5px">Mail personnel</label>
         <small>(pas Apside)</small>
       </div>
-      <input type="email" class="form-control" formControlName="personalMail"
+      <input [ngClass]="{ 'is-invalid': submitted && form.personalMail.errors }" class="form-control"
-             [ngClass]="{ 'is-invalid': submitted && form.personalMail.errors }" placeholder="prenom.nom@example.com">
+             formControlName="personalMail"
+             placeholder="prenom.nom@example.com" type="email">
       <div *ngIf="submitted && form.personalMail.errors" class="invalid-feedback">
         <div *ngIf="form.personalMail.errors.required">Le mail personnel d'un collaborateur est obligatoire</div>
         <div *ngIf="form.personalMail.errors.pattern">Le mail personnel d'un collaborateur doit être au format
@@ -111,9 +113,10 @@
 
     <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"
+      <input [ngClass]="{ 'is-invalid': (submitted && form.apsideMail.errors) || errorValue==1 }"
-             [ngClass]="{ 'is-invalid': (submitted && form.apsideMail.errors) || errorValue==1 }"
+             [value]="collaborateur.apsideMail" class="form-control"
-             placeholder="prenom.nom@apside-groupe.com" [value]="collaborateur.apsideMail">
+             formControlName="apsideMail"
+             placeholder="prenom.nom@apside-groupe.com" type="email">
       <div *ngIf="submitted && form.apsideMail.errors" class="invalid-feedback">
         <div *ngIf="form.apsideMail.errors.required">Le mail Apside d'un collaborateur est obligatoire</div>
         <div *ngIf="form.apsideMail.errors.pattern">Le mail Apside d'un collaborateur doit être au format
@@ -128,9 +131,10 @@
 
     <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"
+      <input (change)="onResignationDateChange($event)"
-             (change)="onResignationDateChange($event)"
+             [ngClass]="{ 'is-invalid': submitted && form.resignationDate.errors }" class="form-control"
-             [ngClass]="{ 'is-invalid': submitted && form.resignationDate.errors }">
+             formControlName="resignationDate"
+             type="date">
       <div *ngIf="submitted && form.resignationDate.errors" class="invalid-feedback">
         <div *ngIf="form.resignationDate.errors.required">La date de départ d'un collaborateur est obligatoire</div>
       </div>
@@ -142,9 +146,9 @@
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Business Unit</label>
-      <select class="form-select" formControlName="businessUnitId"
+      <select [ngClass]="{ 'is-invalid': submitted && form.businessUnitId.errors }" class="form-select"
-              [ngClass]="{ 'is-invalid': submitted && form.businessUnitId.errors }">
+              formControlName="businessUnitId">
-        <option value="" disabled selected>Choisissez une Business Unit pour le collaborateur</option>
+        <option disabled selected value="">Choisissez une Business Unit pour le collaborateur</option>
         <option *ngFor="let businessUnit of businessUnits" [ngValue]="businessUnit.id">{{businessUnit.name}} </option>
       </select>
       <div *ngIf="submitted && form.businessUnitId.errors" class="invalid-feedback">
@@ -156,6 +160,6 @@
 
   <div>
     <button type="submit">Ajouter le collaborateur</button>
-    <button type="reset" (click)="onReset()">Effacer</button>
+    <button (click)="onReset()" type="reset">Effacer</button>
   </div>
 </form>

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

@@ -33,6 +33,10 @@ export class CollaborateurAddComponent implements OnInit {
               private toastr: ToastrService) {
   }
 
+  get form() {
+    return this.registerForm.controls;
+  }
+
   ngOnInit(): void {
     this.getCollaborateurs();
     this.getBusinessunits();
@@ -86,10 +90,6 @@ export class CollaborateurAddComponent implements OnInit {
     }
   }
 
-  get form() {
-    return this.registerForm.controls;
-  }
-
   onReset() {
     this.submitted = false;
     this.registerForm.reset();

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

@@ -2,17 +2,16 @@
 
   <h2>{{collaborateur.name | uppercase}} {{collaborateur.firstName | uppercase}} </h2>
 
-  <div><label class="form-label">ID : </label>{{collaborateur.id}}</div>
+  <form (ngSubmit)="onSubmit()"
-
+        [formGroup]="registerForm">
-  <form [formGroup]="registerForm"
-        (ngSubmit)="onSubmit()">
 
     <div class="row mb-2">
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Nom</label>
-        <input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }"
+        <input [ngClass]="{ 'is-invalid': submitted && f.name.errors }" [value]="collaborateur.name"
-               [value]="collaborateur.name">
+               class="form-control"
+               formControlName="name">
         <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
           <div *ngIf="f.name.errors.required">Le nom d'un collaborateur est obligatoire</div>
         </div>
@@ -20,8 +19,8 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Prénom</label>
-        <input class="form-control" formControlName="firstName"
+        <input [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" [value]="collaborateur.firstName"
-               [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" [value]="collaborateur.firstName">
+               class="form-control" formControlName="firstName">
         <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
           <div *ngIf="f.firstName.errors.required">Le prénom d'un collaborateur est obligatoire</div>
         </div>
@@ -29,9 +28,10 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Date de naissance</label>
-        <input type="date" [value]="collaborateur.birthDate | date:'yyyy-MM-dd'" class="form-control"
+        <input (change)="onBirthDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.birthDate.errors }"
-               formControlName="birthDate" (change)="onBirthDateChange($event)"
+               [value]="collaborateur.birthDate | date:'yyyy-MM-dd'"
-               [ngClass]="{ 'is-invalid': submitted && f.birthDate.errors }">
+               class="form-control" formControlName="birthDate"
+               type="date">
         <div *ngIf="submitted && f.birthDate.errors" class="invalid-feedback">
           <div *ngIf="f.birthDate.errors.required">La date de naissance d'un collaborateur est obligatoire</div>
         </div>
@@ -39,9 +39,10 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Genre</label>
-        <select class="form-select" formControlName="gender" [ngClass]="{ 'is-invalid': submitted && f.gender.errors }"
+        <select [ngClass]="{ 'is-invalid': submitted && f.gender.errors }" [value]="collaborateur.gender"
-                [value]="collaborateur.gender">
+                class="form-select"
-          <option value="" disabled selected>Genre</option>
+                formControlName="gender">
+          <option disabled selected value="">Genre</option>
           <option value="MASCULIN">Masculin</option>
           <option value="FEMININ">Féminin</option>
           <option value="AUTRE">Autre</option>
@@ -57,9 +58,10 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Statut</label>
-        <select class="form-select" formControlName="status" [ngClass]="{ 'is-invalid': submitted && f.status.errors }"
+        <select [ngClass]="{ 'is-invalid': submitted && f.status.errors }" [value]="collaborateur.status"
-                [value]="collaborateur.status">
+                class="form-select"
-          <option value="" disabled selected>Statut</option>
+                formControlName="status">
+          <option disabled selected value="">Statut</option>
           <option value="CADRE">Cadre</option>
           <option value="NONCADRE">Non-cadre</option>
           <option value="ALTERNANT">Alternant</option>
@@ -72,9 +74,9 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Nombre d'enfants</label>
-        <input class="form-control" formControlName="childrenNumber"
+        <input [ngClass]="{ 'is-invalid': submitted && f.childrenNumber.errors }" [value]="collaborateur.childrenNumber"
-               [ngClass]="{ 'is-invalid': submitted && f.childrenNumber.errors }" type="number" min="0"
+               class="form-control" formControlName="childrenNumber" min="0"
-               onkeyup="if(this.value<0){this.value= this.value * -1}" [value]="collaborateur.childrenNumber">
+               onkeyup="if(this.value<0){this.value= this.value * -1}" type="number">
         <div *ngIf="submitted && f.childrenNumber.errors" class="invalid-feedback">
           <div *ngIf="f.childrenNumber.errors.required">Le nombre d'enfant d'un collaborateur est obligatoire</div>
         </div>
@@ -82,8 +84,8 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Adresse</label>
-        <input class="form-control" formControlName="address"
+        <input [ngClass]="{ 'is-invalid': submitted && f.address.errors }" [value]="collaborateur.address"
-               [ngClass]="{ 'is-invalid': submitted && f.address.errors }" [value]="collaborateur.address">
+               class="form-control" formControlName="address">
         <div *ngIf="submitted && f.address.errors" class="invalid-feedback">
           <div *ngIf="f.address.errors.required">L'adresse d'un collaborateur est obligatoire</div>
         </div>
@@ -91,8 +93,8 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Téléphone</label>
-        <input class="form-control" formControlName="telephone"
+        <input [ngClass]="{ 'is-invalid': submitted && f.telephone.errors }" [value]="collaborateur.telephone"
-               [ngClass]="{ 'is-invalid': submitted && f.telephone.errors }" [value]="collaborateur.telephone">
+               class="form-control" formControlName="telephone">
         <div *ngIf="submitted && f.telephone.errors" class="invalid-feedback">
           <div *ngIf="f.telephone.errors.required">Le numéro de téléphone d'un collaborateur est obligatoire</div>
         </div>
@@ -106,9 +108,10 @@
           <label class="form-label" style="padding-right: 5px">Mail personnel</label>
           <small>(pas Apside)</small>
         </div>
-        <input type="email" class="form-control" formControlName="personalMail"
+        <input [ngClass]="{ 'is-invalid': submitted && f.personalMail.errors }" [value]="collaborateur.personalMail"
-               [ngClass]="{ 'is-invalid': submitted && f.personalMail.errors }" placeholder="prenom.nom@example.com"
+               class="form-control"
-               [value]="collaborateur.personalMail">
+               formControlName="personalMail" placeholder="prenom.nom@example.com"
+               type="email">
         <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
@@ -119,9 +122,10 @@
 
       <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"
+        <input [ngClass]="{ 'is-invalid': (submitted && f.apsideMail.errors) || errorValue==1 }"
-               [ngClass]="{ 'is-invalid': (submitted && f.apsideMail.errors) || errorValue==1 }"
+               [value]="collaborateur.apsideMail" class="form-control"
-               placeholder="prenom.nom@apside-groupe.com" [value]="collaborateur.apsideMail">
+               formControlName="apsideMail"
+               placeholder="prenom.nom@apside-groupe.com" type="email">
         <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
@@ -136,9 +140,11 @@
 
       <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" [value]="collaborateur.resignationDate | date:'yyyy-MM-dd'" class="form-control"
+        <input (change)="onResignationDateChange($event)"
-               formControlName="resignationDate" (change)="onResignationDateChange($event)"
+               [ngClass]="{ 'is-invalid': submitted && f.resignationDate.errors }"
-               [ngClass]="{ 'is-invalid': submitted && f.resignationDate.errors }">
+               [value]="collaborateur.resignationDate | date:'yyyy-MM-dd'"
+               class="form-control" formControlName="resignationDate"
+               type="date">
       </div>
 
     </div>
@@ -147,9 +153,9 @@
 
       <div class="form-group col-12 col-md-6">
         <label class="form-label">Business Unit</label>
-        <select class="form-select" formControlName="businessUnitId"
+        <select [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }" class="form-select"
-                [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }">
+                formControlName="businessUnitId">
-          <option value="" disabled selected>Choisissez une Business Unit pour le collaborateur</option>
+          <option disabled selected value="">Choisissez une Business Unit pour le collaborateur</option>
           <option *ngFor="let businessUnit of businessUnits" [ngValue]="businessUnit.id">{{businessUnit.name}} </option>
         </select>
         <div *ngIf="submitted && f.businessUnitId.errors" class="invalid-feedback">
@@ -162,7 +168,7 @@
     <div>
       <button type="submit">Sauvegarder les changements</button>
       <button (click)="delete()">Supprimer le collaborateur</button>
-      <button type="reset" (click)="onReset()">Effacer</button>
+      <button (click)="onReset()" type="reset">Effacer</button>
       <button (click)="goBack()">Retour</button>
     </div>
   </form>

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

@@ -39,6 +39,10 @@ export class CollaborateurEditComponent implements OnInit {
     this.id = Number(this.route.snapshot.paramMap.get('id'))
   }
 
+  get f() {
+    return this.registerForm.controls;
+  }
+
   async ngOnInit() {
     this.getCollaborateurs()
     this.getBusinessunits();
@@ -115,11 +119,6 @@ export class CollaborateurEditComponent implements OnInit {
     }
   }
 
-
-  get f() {
-    return this.registerForm.controls;
-  }
-
   onReset() {
     this.submitted = false;
     this.registerForm.reset();

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

@@ -8,11 +8,10 @@
   </div>
 
 
-  <div style="overflow-x:auto;" class="mb-5 col-12">
+  <div class="mb-5 col-12" style="overflow-x:auto;">
     <table class="table">
       <thead>
       <tr>
-        <th scope="col">ID</th>
         <th scope="col">Nom</th>
         <th scope="col">Prénom</th>
         <th scope="col">Mail Apside</th>
@@ -21,8 +20,7 @@
 
       <tbody>
       <tr *ngFor="let collaborateur of collaborateurs">
-        <th scope="row">{{collaborateur.id}}</th>
+        <th scope="row">{{collaborateur.name}}</th>
-        <td> {{collaborateur.name}} </td>
         <td> {{collaborateur.firstName}} </td>
         <td> {{collaborateur.apsideMail}} </td>
         <td><a routerLink="{{collaborateur.id}}"> Modifier </a></td>

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

@@ -2,7 +2,6 @@ import {Component, OnInit} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
 import {CollaborateurService} from "../../services/collaborateur.service";
 import {Collaborateur} from "../../interfaces/collaborateur";
-import {Businessunit} from "../../interfaces/businessunit";
 import {BusinessunitService} from "../../services/businessunit.service";
 
 @Component({
@@ -12,15 +11,6 @@ import {BusinessunitService} from "../../services/businessunit.service";
 })
 export class CollaborateurComponent implements OnInit {
   collaborateurs: Collaborateur[] = [];
-  collaborateur = {} as Collaborateur;
-  businessUnits: Businessunit[] = [];
-  businessUnit = {} as Businessunit;
-
-  errorValue: number = 0;
-  rDate: String = "";
-  bDate: String = "";
-
-  submitted = false;
 
   constructor(
     private http: HttpClient,
@@ -31,7 +21,6 @@ export class CollaborateurComponent implements OnInit {
 
   ngOnInit(): void {
     this.getCollaborateurs();
-    this.getBusinessunits();
 
   }
 
@@ -40,11 +29,5 @@ export class CollaborateurComponent implements OnInit {
       .subscribe(collaborateurs => this.collaborateurs = collaborateurs);
   }
 
-  getBusinessunits(): void {
-    this.businessunitService.getBusinessunits()
-      .subscribe(businessunits => this.businessUnits = businessunits);
-  }
-
-
 
 }

src/app/components/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-home',
@@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-  constructor() { }
+  constructor() {
+  }
 
   ngOnInit(): void {
   }

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

@@ -1,12 +1,12 @@
 <h3>Ajouter une Période d'essai : </h3>
 
-<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+<form (ngSubmit)="onSubmit()" [formGroup]="registerForm">
 
   <div class="form-group col-12 col-md-6">
     <label class="form-label">Collaborateur</label>
-    <select class="form-select" formControlName="collaborateurId" id="collaborateur-select"
+    <select [ngClass]="{ 'is-invalid': submitted && f.collaborateurId.errors }" class="form-select" formControlName="collaborateurId"
-            [ngClass]="{ 'is-invalid': submitted && f.collaborateurId.errors }">
+            id="collaborateur-select">
-      <option value="" disabled selected>Choisissez le collaborateur concerné par cette période d'essai</option>
+      <option disabled selected value="">Choisissez le collaborateur concerné par cette période d'essai</option>
       <option *ngFor="let collaborateur of collaborateurs"
               [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
     </select>
@@ -20,8 +20,8 @@
   <div class="row mb-2">
     <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)"
+      <input (change)="onStartingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.startingDate.errors }" class="form-control" formControlName="startingDate"
-             [ngClass]="{ 'is-invalid': submitted && f.startingDate.errors }">
+             type="date">
       <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>
@@ -29,9 +29,9 @@
 
     <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"
+      <input (change)="onPlannedEndingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.plannedEndingDate.errors }" class="form-control"
-             (change)="onPlannedEndingDateChange($event)"
+             formControlName="plannedEndingDate"
-             [ngClass]="{ 'is-invalid': submitted && f.plannedEndingDate.errors }">
+             type="date">
       <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>
@@ -40,8 +40,8 @@
 
     <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"
+      <input (change)="onRealEndingDateChange($event)" class="form-control" formControlName="realEndingDate"
-             (change)="onRealEndingDateChange($event)">
+             type="date">
     </div>
   </div>
 
@@ -49,13 +49,13 @@
 
     <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 }">
+      <input [ngClass]="{ 'is-invalid': submitted && f.comment.errors }" class="form-control" formControlName="comment">
     </div>
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
       <label class="form-label">Issue</label>
       <select class="form-select" formControlName="issue">
-        <option value="" disabled selected>Statut</option>
+        <option disabled selected value="">Statut</option>
         <option value="VALIDEE">Validée</option>
         <option value="PROLONGEE_COLLAB">Prolongée par le collaborateur</option>
         <option value="PROLONGEE_APSIDE">Prolongée par Apside</option>
@@ -68,6 +68,6 @@
 
   <div>
     <button type="submit">Créer la période d'essai</button>
-    <button type="reset" (click)="onReset()">Effacer</button>
+    <button (click)="onReset()" type="reset">Effacer</button>
   </div>
 </form>

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

@@ -2,14 +2,15 @@
 
   <h3>Modifier une Période d'essai : </h3>
 
-  <form [formGroup]="registerForm"
+  <form (ngSubmit)="onSubmit()"
-        (ngSubmit)="onSubmit()">
+        [formGroup]="registerForm">
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Collaborateur</label>
-      <select class="form-select" formControlName="collaborateurId" id="collaborateur-select"
+      <select [ngClass]="{ 'is-invalid': submitted && f.collaborateurId.errors }" class="form-select"
-              [ngClass]="{ 'is-invalid': submitted && f.collaborateurId.errors }">
+              formControlName="collaborateurId"
-        <option value="" disabled selected>Choisissez le collaborateur concerné par cette période d'essai</option>
+              id="collaborateur-select">
+        <option disabled selected value="">Choisissez le collaborateur concerné par cette période d'essai</option>
         <option *ngFor="let collaborateur of collaborateurs"
                 [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
       </select>
@@ -20,56 +21,69 @@
       </div>
     </div>
 
-    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+    <div class="row mb-2">
-      <label class="form-label">Date de début</label>
+
-      <input type="date" [value]="periodeEssai.startingDate | date:'yyyy-MM-dd'" class="form-control"
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
-             formControlName="startingDate" (change)="onStartingDateChange($event)"
+        <label class="form-label">Date de début</label>
-             [ngClass]="{ 'is-invalid': submitted && f.startingDate.errors }">
+        <input (change)="onStartingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.startingDate.errors }"
-      <div *ngIf="submitted && f.startingDate.errors" class="invalid-feedback">
+               [value]="periodeEssai.startingDate | date:'yyyy-MM-dd'"
-        <div *ngIf="f.startingDate.errors.required">La date de début d'une période d'essai est obligatoire</div>
+               class="form-control" formControlName="startingDate"
+               type="date">
+        <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>
 
-    <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>
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
-      <input type="date" [value]="periodeEssai.plannedEndingDate | date:'yyyy-MM-dd'" class="form-control"
+        <label class="form-label">Date de fin prévue</label>
-             formControlName="plannedEndingDate"
+        <input (change)="onPlannedEndingDateChange($event)"
-             (change)="onPlannedEndingDateChange($event)"
+               [ngClass]="{ 'is-invalid': submitted && f.plannedEndingDate.errors }"
-             [ngClass]="{ 'is-invalid': submitted && f.plannedEndingDate.errors }">
+               [value]="periodeEssai.plannedEndingDate | date:'yyyy-MM-dd'"
-      <div *ngIf="submitted && f.plannedEndingDate.errors" class="invalid-feedback">
+               class="form-control"
-        <div *ngIf="f.plannedEndingDate.errors.required">La date de fin prévue d'une période d'essai est obligatoire
+               formControlName="plannedEndingDate"
+               type="date">
+        <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>
 
-    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <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>
+        <label class="form-label">Date de fin réelle</label>
-      <input type="date" [value]="periodeEssai.realEndingDate | date:'yyyy-MM-dd'" class="form-control"
+        <input (change)="onRealEndingDateChange($event)" [value]="periodeEssai.realEndingDate | date:'yyyy-MM-dd'"
-             formControlName="realEndingDate" (change)="onRealEndingDateChange($event)">
+               class="form-control"
-    </div>
+               formControlName="realEndingDate" type="date">
+      </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">
     </div>
 
-    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
+    <div class="row mb-2">
-      <label class="form-label">Issue</label>
+
-      <select class="form-select" formControlName="issue">
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
-        <option value="" disabled selected>Statut</option>
+        <label class="form-label">Commentaire</label>
-        <option value="VALIDEE">Validée</option>
+        <input class="form-control" formControlName="comment">
-        <option value="PROLONGEE_COLLAB">Prolongée par le collaborateur</option>
+      </div>
-        <option value="PROLONGEE_APSIDE">Prolongée par Apside</option>
+
-        <option value="ARRETEE_COLLAB">Arrêtée par le collaborateur</option>
+      <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
-        <option value="ARRETEE_APSIDE">Arrêtée par Apside</option>
+        <label class="form-label">Issue</label>
-        <option value="INDETERMINEE">Indéterminée</option>
+        <select class="form-select" formControlName="issue">
-      </select>
+          <option disabled selected value="">Statut</option>
+          <option value="VALIDEE">Validée</option>
+          <option value="PROLONGEE_COLLAB">Prolongée par le collaborateur</option>
+          <option value="PROLONGEE_APSIDE">Prolongée par Apside</option>
+          <option value="ARRETEE_COLLAB">Arrêtée par le collaborateur</option>
+          <option value="ARRETEE_APSIDE">Arrêtée par Apside</option>
+          <option value="INDETERMINEE">Indéterminée</option>
+        </select>
+      </div>
+
     </div>
 
     <div>
-      <button type="submit" (click)="onSubmit()">Sauvegarder les changements</button>
+      <button (click)="onSubmit()" type="submit">Sauvegarder les changements</button>
-      <button type="button" (click)="delete()">Supprimer la période d'essai</button>
+      <button (click)="delete()" type="button">Supprimer la période d'essai</button>
-      <button type="reset" (click)="onReset()">Effacer</button>
+      <button (click)="onReset()" type="reset">Effacer</button>
       <button (click)="goBack()">Retour</button>
     </div>
 

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

@@ -7,19 +7,17 @@
     <button routerLink="/periodeessais/add">Ajouter</button>
   </div>
 
-  <div style="overflow-x:auto;" class="mb-5 col-12">
+  <div class="mb-5 col-12" style="overflow-x:auto;">
     <table class="table">
       <thead>
       <tr>
-        <th scope="col">ID</th>
         <th scope="col">Collaborateur</th>
         <th scope="col">Issue</th>
       </tr>
       </thead>
       <tbody>
       <tr *ngFor="let periodeEssai of periodeEssais">
-        <th scope="row">{{periodeEssai.id}}</th>
+        <th scope="row">{{getCollaborateurById(periodeEssai.collaborateurId).name}} {{getCollaborateurById(periodeEssai.collaborateurId).firstName}}</th>
-        <td> {{getCollaborateurById(periodeEssai.collaborateurId).name}} {{getCollaborateurById(periodeEssai.collaborateurId).firstName}} </td>
         <td> {{periodeEssai.issue}}</td>
         <td><a routerLink="{{periodeEssai.id}}"> Modifier </a></td>
       </tr>

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

@@ -32,11 +32,11 @@ export class PeriodeEssaiComponent implements OnInit {
       .subscribe(collaborateurs => this.collaborateurs = collaborateurs);
   }
 
-  getCollaborateurById(id : number) : Collaborateur{
+  getCollaborateurById(id: number): Collaborateur {
     let collab = {} as Collaborateur;
     this.collaborateurs.forEach(c => {
-      if (c.id==id){
+      if (c.id == id) {
-        collab= c;
+        collab = c;
         return;
       }
     });

src/app/components/referencement/referencement-add/referencement-add.component.html

@@ -1,21 +1,21 @@
 <h3>Ajouter un référencement : </h3>
 
-<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+<form (ngSubmit)="onSubmit()" [formGroup]="registerForm">
 
   <div class="row mb-2">
 
     <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"
+      <input (change)="onStartingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && form.startingDate.errors }" class="form-control"
-             (change)="onStartingDateChange($event)"
+             formControlName="startingDate"
-             [ngClass]="{ 'is-invalid': submitted && form.startingDate.errors }">
+             type="date">
     </div>
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Date de fin</label>
-      <input type="date" class="form-control" formControlName="endingDate"
+      <input (change)="onEndingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && form.endingDate.errors }" class="form-control"
-             (change)="onEndingDateChange($event)"
+             formControlName="endingDate"
-             [ngClass]="{ 'is-invalid': submitted && form.endingDate.errors }">
+             type="date">
     </div>
 
   </div>
@@ -24,10 +24,11 @@
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Référent</label>
-      <select class="form-select" formControlName="referrerId"
+      <select [ngClass]="{ 'is-invalid': submitted && form.referrerId.errors }" class="form-select"
-              [ngClass]="{ 'is-invalid': submitted && form.referrerId.errors }">
+              formControlName="referrerId">
-        <option value="" disabled selected>Choisissez le référent du référencement</option>
+        <option disabled selected value="">Choisissez le référent du référencement</option>
-        <option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
+        <option *ngFor="let collaborateur of collaborateurs"
+                [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
       </select>
       <div *ngIf="submitted && form.referrerId.errors" class="invalid-feedback">
         <div *ngIf="form.referrerId.errors.required">Vous devez préciser le référent du référencement</div>
@@ -36,10 +37,11 @@
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Référé</label>
-      <select class="form-select" formControlName="referredId"
+      <select [ngClass]="{ 'is-invalid': submitted && form.referredId.errors }" class="form-select"
-              [ngClass]="{ 'is-invalid': submitted && form.referredId.errors }">
+              formControlName="referredId">
-        <option value="" disabled selected>Choisissez le référé du référencement</option>
+        <option disabled selected value="">Choisissez le référé du référencement</option>
-        <option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
+        <option *ngFor="let collaborateur of collaborateurs"
+                [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
       </select>
       <div *ngIf="submitted && form.referredId.errors" class="invalid-feedback">
         <div *ngIf="form.referredId.errors.required">Vous devez préciser le référent du référencement</div>
@@ -50,6 +52,6 @@
 
   <div>
     <button type="submit">Ajouter le référencement</button>
-    <button type="reset" (click)="onReset()">Effacer</button>
+    <button (click)="onReset()" type="reset">Effacer</button>
   </div>
 </form>

src/app/components/referencement/referencement-add/referencement-add.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Collaborateur} from "../../../interfaces/collaborateur";
 import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 import {HttpClient} from "@angular/common/http";
@@ -32,6 +32,10 @@ export class ReferencementAddComponent implements OnInit {
               private toastr: ToastrService) {
   }
 
+  get form() {
+    return this.registerForm.controls;
+  }
+
   ngOnInit(): void {
     this.getCollaborateurs();
     this.registerForm = this.formBuilder.group({
@@ -70,10 +74,6 @@ export class ReferencementAddComponent implements OnInit {
     }
   }
 
-  get form() {
-    return this.registerForm.controls;
-  }
-
   onReset() {
     this.submitted = false;
     this.registerForm.reset();

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

@@ -1,23 +1,23 @@
 <h3>Modifier un référencement : </h3>
 
-<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+<form (ngSubmit)="onSubmit()" [formGroup]="registerForm">
 
   <div class="row mb-2">
 
     <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" [value]="referencement.startingDate | date:'yyyy-MM-dd'" class="form-control"
+      <input (change)="onStartingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && form.startingDate.errors }" [value]="referencement.startingDate | date:'yyyy-MM-dd'"
+             class="form-control"
              formControlName="startingDate"
-             (change)="onStartingDateChange($event)"
+             type="date">
-             [ngClass]="{ 'is-invalid': submitted && form.startingDate.errors }">
     </div>
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Date de fin</label>
-      <input type="date" [value]="referencement.endingDate | date:'yyyy-MM-dd'" class="form-control"
+      <input (change)="onEndingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && form.endingDate.errors }" [value]="referencement.endingDate | date:'yyyy-MM-dd'"
+             class="form-control"
              formControlName="endingDate"
-             (change)="onEndingDateChange($event)"
+             type="date">
-             [ngClass]="{ 'is-invalid': submitted && form.endingDate.errors }">
     </div>
 
   </div>
@@ -26,9 +26,9 @@
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Référent</label>
-      <select class="form-select" formControlName="referrerId"
+      <select [ngClass]="{ 'is-invalid': submitted && form.referrerId.errors }" class="form-select"
-              [ngClass]="{ 'is-invalid': submitted && form.referrerId.errors }">
+              formControlName="referrerId">
-        <option value="" disabled selected>Choisissez le référent du référencement</option>
+        <option disabled selected value="">Choisissez le référent du référencement</option>
         <option *ngFor="let collaborateur of collaborateurs"
                 [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
       </select>
@@ -39,9 +39,9 @@
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Référé</label>
-      <select class="form-select" formControlName="referredId"
+      <select [ngClass]="{ 'is-invalid': submitted && form.referredId.errors }" class="form-select"
-              [ngClass]="{ 'is-invalid': submitted && form.referredId.errors }">
+              formControlName="referredId">
-        <option value="" disabled selected>Choisissez le référé du référencement</option>
+        <option disabled selected value="">Choisissez le référé du référencement</option>
         <option *ngFor="let collaborateur of collaborateurs"
                 [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
       </select>
@@ -54,8 +54,8 @@
 
   <div>
     <button type="submit">Sauvegarder les changements</button>
-    <button type="button" (click)="delete()">Supprimer le référencement</button>
+    <button (click)="delete()" type="button">Supprimer le référencement</button>
-    <button type="reset" (click)="onReset()">Effacer</button>
+    <button (click)="onReset()" type="reset">Effacer</button>
     <button (click)="goBack()">Retour</button>
   </div>
 </form>

src/app/components/referencement/referencement.component.html

@@ -8,7 +8,7 @@
   </div>
 
 
-  <div style="overflow-x:auto;" class="mb-5 col-12">
+  <div class="mb-5 col-12" style="overflow-x:auto;">
     <table class="table">
       <thead>
       <tr>

src/app/components/referencement/referencement.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
 import {ReferencementService} from "../../services/referencement.service";
 import {Referencement} from "../../interfaces/referencement";
@@ -13,7 +13,7 @@ import {Collaborateur} from "../../interfaces/collaborateur";
 export class ReferencementComponent implements OnInit {
 
   referencements: Referencement[] = [];
-  collaborateurs: Collaborateur[]= [];
+  collaborateurs: Collaborateur[] = [];
 
   constructor(
     private http: HttpClient,
@@ -32,11 +32,11 @@ export class ReferencementComponent implements OnInit {
       .subscribe(collaborateurs => this.collaborateurs = collaborateurs);
   }
 
-  getCollaborateurById(id : number) : Collaborateur{
+  getCollaborateurById(id: number): Collaborateur {
     let collab = {} as Collaborateur;
     this.collaborateurs.forEach(c => {
-      if (c.id==id){
+      if (c.id == id) {
-        collab= c;
+        collab = c;
         return;
       }
     });
@@ -49,11 +49,11 @@ export class ReferencementComponent implements OnInit {
       .subscribe(referencements => this.referencements = referencements);
   }
 
-  getSplitDate(date: string | undefined) : string{
+  getSplitDate(date: string | undefined): string {
-    if (date == undefined){
+    if (date == undefined) {
       return "";
     }
-  return date.split('T')[0];
+    return date.split('T')[0];
   }
 
 }

src/app/interfaces/agence.ts

@@ -1,5 +1,5 @@
 export interface Agence {
   name: string;
   id: number;
-  businessUnitId : number;
+  businessUnitId: number;
 }

src/app/interfaces/collaborateur.ts

@@ -3,13 +3,13 @@ export interface Collaborateur {
   firstName: string;
   birthDate: Date;
   gender: string;
-  status:string;
+  status: string;
-  childrenNumber:number;
+  childrenNumber: number;
-  address:string;
+  address: string;
-  telephone:string;
+  telephone: string;
-  personalMail:string;
+  personalMail: string;
-  apsideMail:string;
+  apsideMail: string;
-  resignationDate:Date;
+  resignationDate: Date;
-  businessUnitId:number;
+  businessUnitId: number;
   id: number;
 }

src/app/interfaces/periode-essai.ts

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

src/app/interfaces/referencement.ts

@@ -1,7 +1,7 @@
 export interface Referencement {
   id: number;
-  startingDate : Date;
+  startingDate: Date;
-  endingDate : Date | null;
+  endingDate: Date | null;
-  referredId : number;
+  referredId: number;
-  referrerId : number;
+  referrerId: number;
 }

src/app/services/agence.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 import {HttpClient, HttpHeaders} from "@angular/common/http";
 import {Observable} from "rxjs";
 import {Agence} from "../interfaces/agence";
@@ -8,23 +8,23 @@ import {agencesUrl} from "../../ressources/routes/routesPreprod";
   providedIn: 'root'
 })
 export class AgenceService {
-  private agencesUrl = agencesUrl;
-
   httpOptions = {
-    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+    headers: new HttpHeaders({'Content-Type': 'application/json'})
   };
+  private agencesUrl = agencesUrl;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
-  getAgences():Observable<Agence[]> {
+  getAgences(): Observable<Agence[]> {
     return this.http.get<Agence[]>(this.agencesUrl);
   }
 
-  getAgence(id : number):Observable<Agence>{
+  getAgence(id: number): Observable<Agence> {
-    return this.http.get<Agence>(this.agencesUrl+"/"+id);
+    return this.http.get<Agence>(this.agencesUrl + "/" + id);
   }
 
-  updateAgence(agence : Agence):Observable<Agence>{
+  updateAgence(agence: Agence): Observable<Agence> {
     let body = JSON.stringify(agence);
     return this.http.put<Agence>(this.agencesUrl + "/" + agence.id, body, this.httpOptions);
   }

src/app/services/businessunit.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 import {HttpClient, HttpHeaders} from "@angular/common/http";
 import {Observable} from "rxjs";
 import {Businessunit} from "../interfaces/businessunit";
@@ -8,24 +8,24 @@ import {businessunitsUrl} from "../../ressources/routes/routesPreprod";
   providedIn: 'root'
 })
 export class BusinessunitService {
-  private businessunitsUrl = businessunitsUrl;
-
   httpOptions = {
-    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+    headers: new HttpHeaders({'Content-Type': 'application/json'})
   };
+  private businessunitsUrl = businessunitsUrl;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
-  getBusinessunits():Observable<Businessunit[]> {
+  getBusinessunits(): Observable<Businessunit[]> {
     return this.http.get<Businessunit[]>(this.businessunitsUrl);
   }
 
-  getBusinessunit(id : number):Observable<Businessunit>{
+  getBusinessunit(id: number): Observable<Businessunit> {
     return this.http.get<Businessunit>(this.businessunitsUrl + "/" + id);
   }
 
-  updateBusinessunit(businessunit: Businessunit, id:number):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 + "/" + id, body, this.httpOptions);
   }
 

src/app/services/collaborateur.service.ts

@@ -9,23 +9,23 @@ import {collaborateursUrl} from "../../ressources/routes/routesPreprod";
 
 export class CollaborateurService {
 
-  private collaborateursUrl = collaborateursUrl;
-
   httpOptions = {
-    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+    headers: new HttpHeaders({'Content-Type': 'application/json'})
   };
+  private collaborateursUrl = collaborateursUrl;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
-  getCollaborateurs():Observable<Collaborateur[]> {
+  getCollaborateurs(): Observable<Collaborateur[]> {
     return this.http.get<Collaborateur[]>(this.collaborateursUrl);
   }
 
-  getCollaborateur(id : number):Observable<Collaborateur>{
+  getCollaborateur(id: number): Observable<Collaborateur> {
-    return this.http.get<Collaborateur>(this.collaborateursUrl+"/"+id);
+    return this.http.get<Collaborateur>(this.collaborateursUrl + "/" + id);
   }
 
-  updateCollaborateur(collaborateur : Collaborateur):Observable<Collaborateur>{
+  updateCollaborateur(collaborateur: Collaborateur): Observable<Collaborateur> {
     let body = JSON.stringify(collaborateur);
     return this.http.put<Collaborateur>(this.collaborateursUrl + "/" + collaborateur.id, body, this.httpOptions);
 

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

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

src/app/services/referencement.service.ts

@@ -9,23 +9,23 @@ import {referencementsUrl} from "../../ressources/routes/routesPreprod";
 
 export class ReferencementService {
 
-  private referencementsUrl = referencementsUrl;
-
   httpOptions = {
-    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+    headers: new HttpHeaders({'Content-Type': 'application/json'})
   };
+  private referencementsUrl = referencementsUrl;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
-  getReferencements():Observable<Referencement[]> {
+  getReferencements(): Observable<Referencement[]> {
     return this.http.get<Referencement[]>(this.referencementsUrl);
   }
 
-  getReferencement(id : number):Observable<Referencement>{
+  getReferencement(id: number): Observable<Referencement> {
-    return this.http.get<Referencement>(this.referencementsUrl+"/"+id);
+    return this.http.get<Referencement>(this.referencementsUrl + "/" + id);
   }
 
-  updateReferencement(referencement : Referencement):Observable<Referencement>{
+  updateReferencement(referencement: Referencement): Observable<Referencement> {
     let body = JSON.stringify(referencement);
     return this.http.put<Referencement>(this.referencementsUrl + "/" + referencement.id, body, this.httpOptions);
 

src/index.html

@@ -4,12 +4,12 @@
   <meta charset="utf-8">
   <title>Services Collaborateurs</title>
   <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta content="width=device-width, initial-scale=1" name="viewport">
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 </head>
 <body>
-  <app-root></app-root>
+<app-root></app-root>
 </body>
 </html>

src/main.ts

@@ -1,8 +1,8 @@
-import { enableProdMode } from '@angular/core';
+import {enableProdMode} from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+import {AppModule} from './app/app.module';
-import { environment } from './environments/environment';
+import {environment} from './environments/environment';
 
 if (environment.production) {
   enableProdMode();

src/styles.scss

@@ -12,6 +12,7 @@ label {
   color: $primary;
   font-weight: bold;
 }
+
 input {
   font-size: 1em;
   padding: .3rem;
@@ -25,9 +26,11 @@ input {
   border-radius: 4px;
 
 }
+
 .form-submit:hover {
   background-color: $primary;
 }
+
 .form-submit:disabled {
   background-color: #eee;
   color: #ccc;
@@ -64,9 +67,11 @@ button {
   border-radius: 4px;
   border-color: transparent;
 }
+
 button:hover {
   background-color: $primary;
 }
+
 button:disabled {
   background-color: #eee;
   color: #ccc;