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'))
   }
@@ -63,7 +65,13 @@ export class AgenceEditComponent implements OnInit {
     this.agence.name = this.registerForm.value.name
     this.agence.businessUnitId = this.registerForm.value.businessUnitId
       this.agenceService.updateAgence(this.agence)
-        .subscribe(()=>this.goBack());
+        .subscribe(() => {
+            this.showSuccess();
+            this.goBack();
+          },
+          () => {
+            this.showError()
+          });
     }
   }
 
@@ -74,4 +82,12 @@ export class AgenceEditComponent implements OnInit {
     this.registerForm.reset();
   }
 
+  showSuccess() {
+    this.toastr.success('Modification réussie', 'Business Unit');
+  }
+
+  showError() {
+    this.toastr.error('Modification é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 {
@@ -50,6 +52,10 @@ export class AgenceComponent implements OnInit {
     this.agenceService.addAgence(agence)
       .subscribe(agence => {
           this.agences.push(agence);
+          this.showSuccess();
+        },
+        () => {
+          this.showError()
         });
   }
 
@@ -71,5 +77,12 @@ export class AgenceComponent implements OnInit {
     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-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'))
   }
@@ -47,7 +49,13 @@ export class BusinessunitEditComponent implements OnInit {
 
     if (this.businessunit) {
       this.businessunitService.updateBusinessunit(this.bu, this.id)
-        .subscribe(() => this.goBack());
+        .subscribe(() => {
+            this.showSuccess();
+            this.goBack();
+          },
+          () => {
+            this.showError()
+          });
     }
   }
 
@@ -62,4 +70,12 @@ export class BusinessunitEditComponent implements OnInit {
     this.location.back();
   }
 
+  showSuccess() {
+    this.toastr.success('Modification réussie', 'Business Unit');
+  }
+
+  showError() {
+    this.toastr.error('Modification é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,7 +34,7 @@ export class BusinessunitComponent implements OnInit {
     });
   }
 
-  getBusinessunits():void {
+  getBusinessunits(): void {
     this.businessunitService.getBusinessunits()
       .subscribe(businessunits => this.businessunits = businessunits);
   }
@@ -39,7 +43,12 @@ export class BusinessunitComponent implements OnInit {
     this.businessunitService.addBusinessunit(businessunit)
       .subscribe(businessunit => {
           this.businessunits.push(businessunit);
+          this.showSuccess();
+        },
+        error => {
+          this.showError()
         });
+
   }
 
   onSubmit() {
@@ -52,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 {
@@ -74,12 +76,12 @@ export class CollaborateurAddComponent implements OnInit {
     }
     this.collaborateur = this.registerForm.value
     if (this.collaborateur) {
-      this.collaborateurService.addCollaborateur(this.collaborateur).subscribe({
-        next: () => {
+      this.collaborateurService.addCollaborateur(this.collaborateur).subscribe(collaborateur => {
+          this.collaborateurs.push(collaborateur);
+          this.showSuccess();
         },
-        error: () => {
-          this.errorValue = 1;
-        }
+        () => {
+          this.showError()
         })
 
     }
@@ -102,4 +104,12 @@ export class CollaborateurAddComponent implements OnInit {
     this.collaborateur.birthDate = new Date($event.target.value);
   }
 
+  showSuccess() {
+    this.toastr.success('Création réussie', 'Collaborateur');
+  }
+
+  showError() {
+    this.toastr.error('Création échouée', 'Collaborateur');
+  }
+
 }

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'))
   }
@@ -112,13 +114,12 @@ export class CollaborateurEditComponent implements OnInit {
     this.collaborateur.status = this.registerForm.value.status
 
     if (this.collaborateur) {
-      this.collaborateurService.updateCollaborateur(this.collaborateur).subscribe({
-        next: () => {
+      this.collaborateurService.updateCollaborateur(this.collaborateur).subscribe(() => {
+          this.showSuccess();
           this.goBack();
         },
-        error: () => {
-          this.errorValue = 1;
-        }
+        () => {
+          this.showError()
         })
 
     }
@@ -139,4 +140,12 @@ export class CollaborateurEditComponent implements OnInit {
   onBirthDateChange($event: any):void {
     this.collaborateur.birthDate = new Date($event.target.value);
   }
+
+  showSuccess() {
+    this.toastr.success('Modification réussie', 'Collaborateur');
+  }
+
+  showError() {
+    this.toastr.error('Modification échouée', 'Collaborateur');
+  }
 }

src/app/components/periode-essai/periode-essai-edit/periode-essai-edit.component.ts

@@ -8,6 +8,7 @@ import {Observable} from "rxjs";
 import {ActivatedRoute} from "@angular/router";
 import {take, tap} from "rxjs/operators";
 import {Location} from "@angular/common";
+import {ToastrService} from "ngx-toastr";
 
 @Component({
   selector: 'app-periode-essai-edit',
@@ -37,7 +38,8 @@ export class PeriodeEssaiEditComponent implements OnInit {
     private location: Location,
     private collaborateurService: CollaborateurService,
     private periodeEssaiService: PeriodeEssaiService,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private toastr: ToastrService
   ) {
     this.id = Number(this.route.snapshot.paramMap.get('id'))
   }
@@ -96,7 +98,13 @@ export class PeriodeEssaiEditComponent implements OnInit {
 
     if (this.periodeEssai){
       this.periodeEssaiService.updatePeriodeEssai(this.periodeEssai)
-        .subscribe(()=>this.goBack());
+        .subscribe(() => {
+            this.showSuccess();
+            this.goBack();
+          },
+          () => {
+            this.showError()
+          });
     }
   }
 
@@ -119,6 +127,14 @@ export class PeriodeEssaiEditComponent implements OnInit {
     this.periodeEssai.realEndingDate = new Date($event.target.value);
   }
 
+  showSuccess() {
+    this.toastr.success('Modification réussie', 'Période d\'essai');
+  }
+
+  showError() {
+    this.toastr.error('Modification échouée', 'Collaborateur');
+  }
+
 }
 
 

src/app/components/periode-essai/periode-essai.component.ts

@@ -5,6 +5,7 @@ import {PeriodeEssai} from "../../interfaces/periode-essai";
 import {Collaborateur} from "../../interfaces/collaborateur";
 import {CollaborateurService} from "../../services/collaborateur.service";
 import {PeriodeEssaiService} from "../../services/periode-essai.service";
+import {ToastrService} from "ngx-toastr";
 
 @Component({
   selector: 'app-periode-essai',
@@ -30,7 +31,8 @@ export class PeriodeEssaiComponent implements OnInit {
     private http : HttpClient,
     private collaborateurService: CollaborateurService,
     private periodeEssaiService: PeriodeEssaiService,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private toastr: ToastrService
   ) { }
 
   ngOnInit(): void {
@@ -104,4 +106,12 @@ export class PeriodeEssaiComponent implements OnInit {
     this.periodeEssaiService.getPeriodeEssais()
       .subscribe(periodeEssais => this.periodeEssais = periodeEssais);
   }
+
+  showSuccess() {
+    this.toastr.success('Création réussie', 'Collaborateur');
+  }
+
+  showError() {
+    this.toastr.error('Création échouée', 'Collaborateur');
+  }
 }