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

@@ -16,6 +16,8 @@ import { BusinessunitEditComponent } from './components/businessunit/businessuni
 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

@@ -18,7 +18,6 @@
     </div>
   </form>
 
-
   <h2 class=mb-4>Business Units</h2>
 
   <div style="overflow-x:auto;" class="mb-5 col-12">

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

@@ -3,6 +3,8 @@ 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',
@@ -20,8 +22,10 @@ export class BusinessunitComponent implements OnInit {
   constructor(
     private http: HttpClient,
     private businessunitService: BusinessunitService,
-    private formBuilder: FormBuilder
-  ) { }
+    private formBuilder: FormBuilder,
+    private toastr: ToastrService
+  ) {
+  }
 
   ngOnInit(): void {
     this.getBusinessunits();
@@ -36,13 +40,15 @@ export class BusinessunitComponent implements OnInit {
   }
 
   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'))
   }