séparation des listes et de l'ajout des business units et des agences

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'}},

src/app/app.component.html

@@ -2,12 +2,25 @@
   <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>
+      <button ngbDropdownItem routerLink="/businessunits/add">Ajouter</button>
+    </div>
+  </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

src/app/app.module.ts

@@ -22,6 +22,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 { 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-essai
     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,7 +1,6 @@
 <div *ngIf="agence">
 
   <h2>{{agence.name | uppercase}} </h2>
-  <div><span>id : </span>{{agence.id}}</div>
 
   <form
     (ngSubmit)="onSubmit()"
@@ -31,7 +30,6 @@
       </div>
     </div>
 
-
     <div>
       <button type="submit">Sauvegarder les changements</button>
       <button type="reset">Effacer</button>

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

@@ -1,41 +1,12 @@
 <div xmlns="">
 
-  <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>
-
   <h2 class=mb-4>Agences</h2>
 
+  <div style="display: flex">
+    <p style="margin: 10px 0 10px 0">Pour ajouter une nouvelle agence, cliquez ici : </p>
+    <button routerLink="/agences/add">Ajouter</button>
+  </div>
+
   <div class="mb-5 col-12" style="overflow-x:auto;">
     <table class="table">
       <thead>
@@ -46,13 +17,12 @@
       </thead>
       <tbody>
       <tr *ngFor="let agence of agences">
-        <th >{{agence.name}}</th>
+        <th>{{agence.name}}</th>
-        <td >{{getBusinessUnitById(agence.businessUnitId).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,29 +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
   ) {
   }
 
-  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 {
@@ -48,9 +35,9 @@ 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);
   }
 
   getBusinessUnitById(id: number): Businessunit {
@@ -64,39 +51,6 @@ export class AgenceComponent implements OnInit {
     return bu;
   }
 
-  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/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,80 @@
+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 {
+
+  businessunits: Businessunit[] = [];
+  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.getBusinessunits();
+    this.registerForm = this.formBuilder.group({
+      name: ['', Validators.required],
+    });
+  }
+
+  getBusinessunits(): void {
+    this.businessunitService.getBusinessunits()
+      .subscribe(businessunits => this.businessunits = businessunits);
+  }
+
+  add(businessunit: Businessunit): void {
+    this.businessunitService.addBusinessunit(businessunit)
+      .subscribe(businessunit => {
+          this.businessunits.push(businessunit);
+          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.component.html

@@ -1,23 +1,5 @@
 <div xmlns="">
 
-  <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>
-
   <h2 class=mb-4>Business Units</h2>
 
   <div class="mb-5 col-12" style="overflow-x:auto;">

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,20 +21,12 @@ export class BusinessunitComponent implements OnInit {
   constructor(
     private http: HttpClient,
     private businessunitService: BusinessunitService,
-    private formBuilder: FormBuilder,
-    private toastr: ToastrService
   ) {
   }
 
-  get f() {
-    return this.registerForm.controls;
-  }
 
   ngOnInit(): void {
     this.getBusinessunits();
-    this.registerForm = this.formBuilder.group({
-      name: ['', Validators.required],
-    });
   }
 
   getBusinessunits(): void {
@@ -43,39 +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)
-  }
 
-  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');
-  }
 
 }