gestion des retours de l'api via les toasts partie 1

angular.json

@@ -46,8 +46,10 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/ngx-toastr/toastr.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.scss"
+
             ],
             "scripts": [
               "./node_modules/jquery/dist/jquery.min.js",

package.json

@@ -22,6 +22,7 @@
     "@ng-bootstrap/ng-bootstrap": "^10.0.0",
     "bootstrap": "^5.1.3",
     "jquery": "^3.6.0",
+    "ngx-toastr": "^14.3.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.1.0",
     "zone.js": "~0.11.4"

src/app/app.module.ts

@@ -1,21 +1,23 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule,Title } from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {BrowserModule, Title} from '@angular/platform-browser';
 import {HttpClientModule} from "@angular/common/http";
-import { AppComponent } from './app.component';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import {AppComponent} from './app.component';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import {RouterModule} from "@angular/router";
-import { CollaborateurComponent } from './components/collaborateur/collaborateur.component';
-import { CollaborateurEditComponent } from './components/collaborateur/collaborateur-edit/collaborateur-edit.component';
+import {CollaborateurComponent} from './components/collaborateur/collaborateur.component';
+import {CollaborateurEditComponent} from './components/collaborateur/collaborateur-edit/collaborateur-edit.component';
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import { AppRoutingModule } from './app-routing.module';
-import { HomeComponent } from './components/home/home.component';
-import { AgenceComponent } from './components/agence/agence.component';
-import { AgenceEditComponent } from './components/agence/agence-edit/agence-edit.component';
-import { BusinessunitComponent } from './components/businessunit/businessunit.component';
-import { BusinessunitEditComponent } from './components/businessunit/businessunit-edit/businessunit-edit.component';
-import { PeriodeEssaiComponent } from './components/periode-essai/periode-essai.component';
-import { PeriodeEssaiEditComponent } from './components/periode-essai/periode-essai-edit/periode-essai-edit.component';
-import { CollaborateurAddComponent } from './components/collaborateur/collaborateur-add/collaborateur-add.component';
+import {AppRoutingModule} from './app-routing.module';
+import {HomeComponent} from './components/home/home.component';
+import {AgenceComponent} from './components/agence/agence.component';
+import {AgenceEditComponent} from './components/agence/agence-edit/agence-edit.component';
+import {BusinessunitComponent} from './components/businessunit/businessunit.component';
+import {BusinessunitEditComponent} from './components/businessunit/businessunit-edit/businessunit-edit.component';
+import {PeriodeEssaiComponent} from './components/periode-essai/periode-essai.component';
+import {PeriodeEssaiEditComponent} from './components/periode-essai/periode-essai-edit/periode-essai-edit.component';
+import {CollaborateurAddComponent} from './components/collaborateur/collaborateur-add/collaborateur-add.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule } from 'ngx-toastr';
 
 @NgModule({
   declarations: [
@@ -39,9 +41,12 @@ import { CollaborateurAddComponent } from './components/collaborateur/collaborat
     RouterModule,
     FormsModule,
     AppRoutingModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    BrowserAnimationsModule,
+    ToastrModule.forRoot({preventDuplicates: true}),
   ],
   providers: [Title],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

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

@@ -8,6 +8,7 @@ import {Businessunit} from "../../../interfaces/businessunit";
 import {BusinessunitService} from "../../../services/businessunit.service";
 import {Observable} from "rxjs";
 import {take, tap} from "rxjs/operators";
+import {ToastrService} from "ngx-toastr";
 
 @Component({
   selector: 'app-agence-edit',
@@ -30,7 +31,8 @@ export class AgenceEditComponent implements OnInit {
     private agenceService: AgenceService,
     private businessUnitService: BusinessunitService,
     private location: Location,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private toastr: ToastrService
   ) {
     this.id = Number(this.route.snapshot.paramMap.get('id'))
   }
@@ -74,4 +76,12 @@ export class AgenceEditComponent implements OnInit {
     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/agence/agence.component.ts

@@ -5,6 +5,7 @@ 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',
@@ -24,7 +25,8 @@ export class AgenceComponent implements OnInit {
     private http : HttpClient,
     private agenceService: AgenceService,
     private businessUnitService: BusinessunitService,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private toastr: ToastrService
   ) { }
 
   ngOnInit(): void {
@@ -71,5 +73,12 @@ export class AgenceComponent implements OnInit {
     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.ts

@@ -6,6 +6,7 @@ import {Location} from "@angular/common";
 import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 import {Observable} from "rxjs";
 import {take, tap} from "rxjs/operators";
+import {ToastrService} from "ngx-toastr";
 
 @Component({
   selector: 'app-businessunit-edit',
@@ -25,7 +26,8 @@ export class BusinessunitEditComponent implements OnInit {
     private route: ActivatedRoute,
     private businessunitService: BusinessunitService,
     private location: Location,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private toastr: ToastrService
   ) {
     this.id = Number(this.route.snapshot.paramMap.get('id'))
   }
@@ -62,4 +64,12 @@ export class BusinessunitEditComponent implements OnInit {
     this.location.back();
   }
 
+  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

@@ -2,7 +2,7 @@
 
   <h3>Ajouter une Business Unit : </h3>
 
-  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
+  <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>
@@ -18,8 +18,7 @@
     </div>
   </form>
 
-
-  <h2 class = mb-4>Business Units</h2>
+  <h2 class=mb-4>Business Units</h2>
 
   <div style="overflow-x:auto;" class="mb-5 col-12">
     <table class="table">
@@ -33,7 +32,7 @@
       <tr *ngFor="let businessunit of businessunits">
         <th scope="row">{{businessunit.id}}</th>
         <td> {{businessunit.name}} </td>
-          <td> <a routerLink="{{businessunit.id}}"> Modifier </a></td>
+        <td><a routerLink="{{businessunit.id}}"> Modifier </a></td>
       </tr>
       </tbody>
     </table>

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

@@ -1,8 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+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 {ToastrService} from "ngx-toastr";
+
 
 @Component({
   selector: 'app-businessunit',
@@ -11,17 +13,19 @@ import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 })
 export class BusinessunitComponent implements OnInit {
 
-  businessunits : Businessunit[] = [];
-  businessunit = {} as Businessunit ;
+  businessunits: Businessunit[] = [];
+  businessunit = {} as Businessunit;
 
   registerForm!: FormGroup;
   submitted = false;
 
   constructor(
-    private http : HttpClient,
+    private http: HttpClient,
     private businessunitService: BusinessunitService,
-    private formBuilder: FormBuilder
-  ) { }
+    private formBuilder: FormBuilder,
+    private toastr: ToastrService
+  ) {
+  }
 
   ngOnInit(): void {
     this.getBusinessunits();
@@ -30,19 +34,21 @@ export class BusinessunitComponent implements OnInit {
     });
   }
 
-  getBusinessunits():void {
+  getBusinessunits(): void {
     this.businessunitService.getBusinessunits()
       .subscribe(businessunits => this.businessunits = businessunits);
   }
 
   add(businessunit: Businessunit): void {
-    // let test = this.businessunitService.addBusinessunit(businessunit)
-    //   .subscribe(businessunit => {
-    //     this.businessunits.push(businessunit);
-    //   });
-    let test = this.businessunitService.addBusinessunit(businessunit)
+    this.businessunitService.addBusinessunit(businessunit)
+      .subscribe(businessunit => {
+          this.businessunits.push(businessunit);
+          this.showSuccess();
+        },
+        error => {
+          this.showError()
+        });
 
-    console.log(test.toPromise());
   }
 
   onSubmit() {
@@ -55,11 +61,21 @@ export class BusinessunitComponent implements OnInit {
     this.add(this.businessunit)
   }
 
-  get f() { return this.registerForm.controls; }
+  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.ts

@@ -5,6 +5,7 @@ import {Businessunit} from "../../../interfaces/businessunit";
 import {HttpClient} from "@angular/common/http";
 import {BusinessunitService} from "../../../services/businessunit.service";
 import {CollaborateurService} from "../../../services/collaborateur.service";
+import {ToastrService} from "ngx-toastr";
 
 @Component({
   selector: 'app-collaborateur-add',
@@ -28,7 +29,8 @@ export class CollaborateurAddComponent implements OnInit {
   constructor(private http: HttpClient,
               private businessunitService: BusinessunitService,
               private collaborateurService: CollaborateurService,
-              private formBuilder: FormBuilder) {
+              private formBuilder: FormBuilder,
+              private toastr: ToastrService) {
   }
 
   ngOnInit(): void {

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

@@ -8,6 +8,7 @@ import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 import {Businessunit} from "../../../interfaces/businessunit";
 import {Observable} from "rxjs";
 import {take, tap} from "rxjs/operators";
+import {ToastrService} from "ngx-toastr";
 
 @Component({
   selector: 'app-collaborateur-edit',
@@ -36,7 +37,8 @@ export class CollaborateurEditComponent implements OnInit {
     private collaborateurService: CollaborateurService,
     private businessunitService: BusinessunitService,
     private location: Location,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private toastr: ToastrService
   ) {
     this.id = Number(this.route.snapshot.paramMap.get('id'))
   }