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

@@ -14,6 +14,8 @@ 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 = [
   {path: '', redirectTo: '/home', pathMatch: 'full'},
@@ -25,8 +27,10 @@ const routes : Routes = [
   {path: 'referencements/add', component: ReferencementAddComponent, data: {title: 'Referencements'}},
   {path: 'referencements/:id', component: ReferencementEditComponent, data: {title: 'Referencements'}},
   {path: 'agences', component: AgenceComponent, data: {title: 'Agences'}},
+  {path: 'agences/add', component: AgenceAddComponent, data: {title: 'Agences'}},
   {path: 'agences/:id', component: AgenceEditComponent, data: {title: 'Agences'}},
   {path: 'businessunits', component: BusinessunitComponent, data: {title: 'BusinessUnits'}},
+  {path: 'businessunits/add', component: BusinessunitAddComponent, data: {title: 'BusinessUnits'}},
   {path: 'businessunits/:id', component: BusinessunitEditComponent, data: {title: 'BusinessUnits'}},
   {path: 'periodeessais', component: PeriodeEssaiComponent, data: {title: 'Periodes d\'Essai'}},
   {path: 'periodeessais/add', component: PeriodeEssaiAddComponent, data: {title: 'Periodes d\'Essai'}},
@@ -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.ts

@@ -1,6 +1,6 @@
 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';
 
 
@@ -23,7 +23,8 @@ 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)
+      });
     });
   }
 

src/app/app.module.ts

@@ -22,6 +22,8 @@ import { ReferencementComponent } from './components/referencement/referencement
 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 { 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

@@ -37,7 +37,11 @@ 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],
@@ -67,7 +71,6 @@ export class AgenceEditComponent implements OnInit {
       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 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 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>
+  <div style="display: flex">
-      <button type="submit">Créer l'agence</button>
+    <p style="margin: 10px 0 10px 0">Pour ajouter une nouvelle agence, cliquez ici : </p>
-      <button type="reset" (click)="onReset()">Effacer</button>
+    <button routerLink="/agences/add">Ajouter</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">
-          <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>
       </tr>
       </tbody>
     </table>
   </div>
 
-
-
-
 </div>

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

@@ -2,10 +2,8 @@ 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',
@@ -18,24 +16,18 @@ export class AgenceComponent implements OnInit {
   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
+  }
-  ) { }
+
 
   ngOnInit(): void {
     this.getAgences();
     this.getBusinessUnits();
-    this.registerForm = this.formBuilder.group({
-      name: ['', Validators.required],
-      businessUnitId: ['',Validators.required]
-    });
   }
 
   getAgences(): void {
@@ -43,46 +35,22 @@ export class AgenceComponent implements OnInit {
       .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 {
+  getBusinessUnitById(id: number): Businessunit {
-    this.agenceService.addAgence(agence)
+    let bu = {} as Businessunit;
-      .subscribe(agence => {
+    this.businessUnits.forEach(c => {
-          this.agences.push(agence);
+      if (c.id == id) {
-          this.showSuccess();
+        bu = c;
-        },
-        () => {
-          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
+    return bu;
-    this.add(this.agence)
-  }
-
-  get f() { return this.registerForm.controls; }
-
-  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/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

@@ -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>
+  <h2 class=mb-4>Business Units</h2>
-
-  <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>
+  <div style="display: flex">
-      <button type="submit">Créer la business unit</button>
+    <p style="margin: 10px 0 10px 0">Pour ajouter une nouvelle business unit, cliquez ici : </p>
-      <button type="reset" (click)="onReset()">Effacer</button>
+    <button routerLink="/businessunits/add">Ajouter</button>
   </div>
-  </form>
-
-  <h2 class=mb-4>Business Units</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>
       </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

@@ -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,22 +21,28 @@
       </div>
     </div>
 
+    <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]="periodeEssai.startingDate | date:'yyyy-MM-dd'" class="form-control"
+        <input (change)="onStartingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.startingDate.errors }"
-             formControlName="startingDate" (change)="onStartingDateChange($event)"
+               [value]="periodeEssai.startingDate | date:'yyyy-MM-dd'"
-             [ngClass]="{ 'is-invalid': submitted && f.startingDate.errors }">
+               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 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" [value]="periodeEssai.plannedEndingDate | date:'yyyy-MM-dd'" class="form-control"
+        <input (change)="onPlannedEndingDateChange($event)"
+               [ngClass]="{ 'is-invalid': submitted && f.plannedEndingDate.errors }"
+               [value]="periodeEssai.plannedEndingDate | date:'yyyy-MM-dd'"
+               class="form-control"
                formControlName="plannedEndingDate"
-             (change)="onPlannedEndingDateChange($event)"
+               type="date">
-             [ngClass]="{ 'is-invalid': submitted && f.plannedEndingDate.errors }">
         <div *ngIf="submitted && f.plannedEndingDate.errors" class="invalid-feedback">
           <div *ngIf="f.plannedEndingDate.errors.required">La date de fin prévue d'une période d'essai est obligatoire
           </div>
@@ -44,10 +51,15 @@
 
       <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" [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"
+               formControlName="realEndingDate" type="date">
+      </div>
+
     </div>
 
+    <div class="row mb-2">
+
       <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">
@@ -56,7 +68,7 @@
       <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>
@@ -66,10 +78,12 @@
         </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/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

@@ -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/services/agence.service.ts

@@ -8,13 +8,13 @@ import {agencesUrl} from "../../ressources/routes/routesPreprod";
   providedIn: 'root'
 })
 export class AgenceService {
-  private agencesUrl = agencesUrl;
-
   httpOptions = {
     headers: new HttpHeaders({'Content-Type': 'application/json'})
   };
+  private agencesUrl = agencesUrl;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
   getAgences(): Observable<Agence[]> {
     return this.http.get<Agence[]>(this.agencesUrl);

src/app/services/businessunit.service.ts

@@ -8,13 +8,13 @@ import {businessunitsUrl} from "../../ressources/routes/routesPreprod";
   providedIn: 'root'
 })
 export class BusinessunitService {
-  private businessunitsUrl = businessunitsUrl;
-
   httpOptions = {
     headers: new HttpHeaders({'Content-Type': 'application/json'})
   };
+  private businessunitsUrl = businessunitsUrl;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
   getBusinessunits(): Observable<Businessunit[]> {
     return this.http.get<Businessunit[]>(this.businessunitsUrl);

src/app/services/collaborateur.service.ts

@@ -9,13 +9,13 @@ import {collaborateursUrl} from "../../ressources/routes/routesPreprod";
 
 export class CollaborateurService {
 
-  private collaborateursUrl = collaborateursUrl;
-
   httpOptions = {
     headers: new HttpHeaders({'Content-Type': 'application/json'})
   };
+  private collaborateursUrl = collaborateursUrl;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
   getCollaborateurs(): Observable<Collaborateur[]> {
     return this.http.get<Collaborateur[]>(this.collaborateursUrl);

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

@@ -9,13 +9,13 @@ import {PeriodeEssai} from "../interfaces/periode-essai";
   providedIn: 'root'
 })
 export class PeriodeEssaiService {
-  private periodeessaisUrl = periodeessaisUrl;
-
   httpOptions = {
     headers: new HttpHeaders({'Content-Type': 'application/json'})
   };
+  private periodeessaisUrl = periodeessaisUrl;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
   getPeriodeEssais(): Observable<PeriodeEssai[]> {
     return this.http.get<PeriodeEssai[]>(this.periodeessaisUrl);

src/app/services/referencement.service.ts

@@ -9,13 +9,13 @@ import {referencementsUrl} from "../../ressources/routes/routesPreprod";
 
 export class ReferencementService {
 
-  private referencementsUrl = referencementsUrl;
-
   httpOptions = {
     headers: new HttpHeaders({'Content-Type': 'application/json'})
   };
+  private referencementsUrl = referencementsUrl;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
   getReferencements(): Observable<Referencement[]> {
     return this.http.get<Referencement[]>(this.referencementsUrl);

src/index.html

@@ -4,7 +4,7 @@
   <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>

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;