création de la page businessunit et de la page businessunitedit

src/app/app.module.ts

@@ -14,6 +14,7 @@ import { AgenceEditComponent } from './components/agence/agence-edit/agence-edit
 import { CollaborateurDetailComponent } from './components/collaborateur/collaborateur-detail/collaborateur-detail.component';
 import { BusinessunitComponent } from './components/businessunit/businessunit.component';
 import { BusinessunitEditComponent } from './components/businessunit/businessunit-edit/businessunit-edit.component';
+import { BusinessunitDetailComponent } from './components/businessunit/businessunit-detail/businessunit-detail.component';
 
 @NgModule({
   declarations: [
@@ -25,7 +26,8 @@ import { BusinessunitEditComponent } from './components/businessunit/businessuni
     AgenceEditComponent,
     CollaborateurDetailComponent,
     BusinessunitComponent,
-    BusinessunitEditComponent
+    BusinessunitEditComponent,
+    BusinessunitDetailComponent
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,17 @@
+<div class = mb-3>
+  <table>
+    <tr>
+      <th>Name</th>
+    </tr>
+    <tr>
+      <td>
+        <input id="businessunit-name" [(ngModel)]="businessunit.name" placeholder="name">
+      </td>
+    </tr>
+  </table>
+
+  <select name="agence" id="agence-select" [(ngModel)]="businessunit.agenceId">
+    <option value="">-- Choisissez l'agence de cette business Unit --</option>
+    <option *ngFor="let agence of agences" [ngValue]="agence.id">{{agence.name}}</option>
+  </select>
+</div>

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

@@ -0,0 +1,42 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Businessunit} from "../../../interfaces/businessunit";
+import {HttpClient} from "@angular/common/http";
+import {BusinessunitService} from "../../../services/businessunit.service";
+import {Agence} from "../../../interfaces/agence";
+import {AgenceService} from "../../../services/agence.service";
+
+@Component({
+  selector: 'app-businessunit-detail',
+  templateUrl: './businessunit-detail.component.html',
+  styleUrls: ['./businessunit-detail.component.scss']
+})
+export class BusinessunitDetailComponent implements OnInit {
+
+  businessunits : Businessunit[] = [];
+  @Input()
+  businessunit = {} as Businessunit ;
+  agences : Agence[] = [];
+  agence = {} as Agence ;
+
+  constructor(
+    private http : HttpClient,
+    private businessunitService: BusinessunitService,
+    private agenceService: AgenceService,
+  ) { }
+
+  ngOnInit(): void {
+    this.getBusinessunits();
+    this.getAgences();
+  }
+
+  getBusinessunits():void {
+    this.businessunitService.getBusinessunits()
+      .subscribe(businessunits => this.businessunits = businessunits);
+  }
+
+  getAgences():void {
+    this.agenceService.getAgences()
+      .subscribe(agences => this.agences = agences);
+  }
+
+}

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

@@ -1 +1,12 @@
-<p>businessunit-edit works!</p>
+
+<div *ngIf="businessunit">
+
+  <h2>{{businessunit.name | uppercase}} </h2>
+  <div><span>id : </span>{{businessunit.id}}</div>
+
+  <app-businessunit-detail [businessunit]="businessunit"></app-businessunit-detail>
+
+  <button (click)="goBack()">Retour</button>
+  <button (click)="save()">Sauvegarder les changements</button>
+  <button (click)="delete()">Supprimer le businessunit</button>
+</div>

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

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import {Businessunit} from "../../../interfaces/businessunit";
+import {ActivatedRoute} from "@angular/router";
+import {BusinessunitService} from "../../../services/businessunit.service";
+import {Location} from "@angular/common";
 
 @Component({
   selector: 'app-businessunit-edit',
@@ -7,9 +11,40 @@ import { Component, OnInit } from '@angular/core';
 })
 export class BusinessunitEditComponent implements OnInit {
 
-  constructor() { }
+  businessunit : Businessunit | undefined;
+
+  constructor(
+    private route: ActivatedRoute,
+    private businessunitService: BusinessunitService,
+    private location: Location
+  ) { }
 
   ngOnInit(): void {
+    this.getBusinessunit()
+  }
+
+  getBusinessunit(): void {
+    const id = Number(this.route.snapshot.paramMap.get('id'))
+    this.businessunitService.getBusinessunit(id)
+      .subscribe(businessunit => this.businessunit = businessunit);
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
+
+  save():void{
+    if (this.businessunit){
+      this.businessunitService.updateBusinessunit(this.businessunit)
+        .subscribe(()=>this.goBack());
+    }
+  }
+
+  delete():void {
+    if (this.businessunit){
+      this.businessunitService.deleteBusinessunit(this.businessunit)
+        .subscribe(()=>this.goBack());
+    }
   }
 
 }

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

@@ -24,6 +24,11 @@
         </td>
       </tr>
     </table>
+
+    <select name="agence" id="agence-select" [(ngModel)]="businessunit.agenceId">
+      <option value="">-- Choisissez l'agence de cette business Unit --</option>
+      <option *ngFor="let agence of agences" [ngValue]="agence.id">{{agence.name}}</option>
+    </select>
   </div>
 
   <button class="add-button" (click)="add(businessunit)">

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

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import {Businessunit} from "../../interfaces/businessunit";
 import {HttpClient} from "@angular/common/http";
 import {BusinessunitService} from "../../services/businessunit.service";
+import {Agence} from "../../interfaces/agence";
+import {AgenceService} from "../../services/agence.service";
 
 @Component({
   selector: 'app-businessunit',
@@ -12,14 +14,18 @@ export class BusinessunitComponent implements OnInit {
 
   businessunits : Businessunit[] = [];
   businessunit = {} as Businessunit ;
+  agences : Agence[] = [];
+  agence = {} as Agence ;
 
   constructor(
     private http : HttpClient,
     private businessunitService: BusinessunitService,
+    private agenceService: AgenceService,
   ) { }
 
   ngOnInit(): void {
     this.getBusinessunits();
+    this.getAgences();
   }
 
   getBusinessunits():void {
@@ -27,6 +33,11 @@ export class BusinessunitComponent implements OnInit {
       .subscribe(businessunits => this.businessunits = businessunits);
   }
 
+  getAgences():void {
+    this.agenceService.getAgences()
+      .subscribe(agences => this.agences = agences);
+  }
+
   add(businessunit: Businessunit): void {
     this.businessunitService.addBusinessunit(businessunit)
       .subscribe(businessunit => {