Extract snackbar error message implementation to service (#42)

Co-authored-by: Phan Huy Tran <p.tran@neusta.de>
Reviewed-on: http://git.simonis.lol/angular/ems-frontend/pulls/42
Reviewed-by: Constantin Simonis <constantin@simonis.lol>

src/app/employee/table/table.component.ts

@@ -1,6 +1,6 @@
 import {Component, inject, OnInit} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {catchError, debounceTime, distinctUntilChanged, filter, map, Observable, of, retry, Subject} from 'rxjs';
+import {catchError, debounceTime, distinctUntilChanged, Observable, of, retry, Subject} from 'rxjs';
 import {HttpErrorResponse} from '@angular/common/http';
 import {Employee} from '../Employee';
 
@@ -8,7 +8,7 @@ import {MatCardModule} from '@angular/material/card';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatMenuModule} from '@angular/material/menu';
@@ -22,7 +22,7 @@ import {EditComponent} from "../edit/edit.component";
 import {DetailsComponent} from "../details/details.component";
 import {MatFormFieldModule} from "@angular/material/form-field";
 import {MatInputModule} from "@angular/material/input";
-import {Qualification} from "../../qualification/Qualification";
+import {ErrorHandlerService} from "../../services/error.handler.service";
 
 @Component({
   selector: 'app-employee-list',
@@ -47,8 +47,8 @@ import {Qualification} from "../../qualification/Qualification";
 })
 export class TableComponent implements OnInit {
   private readonly apiService: EmployeeApiService = inject(EmployeeApiService);
-  private readonly snackBar: MatSnackBar = inject(MatSnackBar);
   private readonly matDialog: MatDialog = inject(MatDialog);
+  private readonly errorHandlerService: ErrorHandlerService = inject(ErrorHandlerService);
 
   private static readonly MAX_RETRIES = 3;
 
@@ -92,21 +92,12 @@ export class TableComponent implements OnInit {
       retry(TableComponent.MAX_RETRIES),
       catchError((error: HttpErrorResponse) => {
         console.error('Error fetching employees:', error);
-        this.showErrorMessage('Failed to load employees. Please try again.');
+        this.errorHandlerService.showErrorMessage('Failed to load employees. Please try again.');
         return of([]);
       })
     );
   }
 
-  private showErrorMessage(message: string): void {
-    this.snackBar.open(message, 'Close', {
-      duration: 5000,
-      horizontalPosition: 'end',
-      verticalPosition: 'bottom',
-      panelClass: ['!bg-red-50', '!text-red-900', '!border', '!border-red-100']
-    });
-  }
-
   protected openDeleteDialogue(employee: Employee): void {
     this.matDialog.open(DeleteComponent, {data: employee})
       .afterClosed()

src/app/qualification/table/table.component.ts

@@ -1,6 +1,6 @@
 import {Component, inject, OnInit} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {catchError, debounceTime, distinctUntilChanged, filter, map, Observable, of, retry, Subject} from 'rxjs';
+import {catchError, debounceTime, distinctUntilChanged, Observable, of, retry, Subject} from 'rxjs';
 import {HttpErrorResponse} from '@angular/common/http';
 import {Qualification} from "../Qualification";
 import {MatDialog} from "@angular/material/dialog";
@@ -12,7 +12,7 @@ import {MatCardModule} from '@angular/material/card';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatMenuModule} from '@angular/material/menu';
@@ -21,6 +21,7 @@ import {MatSortModule} from '@angular/material/sort';
 import {MatFormFieldModule} from "@angular/material/form-field";
 import {MatInputModule} from "@angular/material/input";
 import {DetailsComponent} from "../details/details.component";
+import {ErrorHandlerService} from "../../services/error.handler.service";
 
 @Component({
     selector: 'app-qualifications',
@@ -45,7 +46,7 @@ import {DetailsComponent} from "../details/details.component";
 })
 export class QualificationsComponent implements OnInit {
     private readonly qualificationService: QualificationService = inject(QualificationService);
-    private readonly snackBar: MatSnackBar = inject(MatSnackBar);
+    private readonly errorHandlerService: ErrorHandlerService = inject(ErrorHandlerService);
     private readonly dialog: MatDialog = inject(MatDialog);
 
     private static readonly MAX_RETRIES = 3;
@@ -89,21 +90,12 @@ export class QualificationsComponent implements OnInit {
             retry(QualificationsComponent.MAX_RETRIES),
             catchError((error: HttpErrorResponse) => {
                 console.error('Error fetching qualifications:', error);
-                this.showErrorMessage('Failed to load qualifications. Please try again.');
+                this.errorHandlerService.showErrorMessage('Failed to load qualifications. Please try again.');
                 return of([]);
             })
         );
     }
 
-    private showErrorMessage(message: string): void {
-        this.snackBar.open(message, 'Close', {
-            duration: 5000,
-            horizontalPosition: 'end',
-            verticalPosition: 'bottom',
-            panelClass: ['!bg-red-50', '!text-red-900', '!border', '!border-red-100']
-        });
-    }
-
     protected filterQualifications(event: Event): void {
         const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
         this.searchSubject.next(searchTerm);

src/app/services/error.handler.service.ts

@@ -0,0 +1,18 @@
+import {inject, Injectable} from '@angular/core';
+import {MatSnackBar} from "@angular/material/snack-bar";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ErrorHandlerService {
+  private readonly snackBar: MatSnackBar = inject(MatSnackBar);
+
+  public showErrorMessage(message: string): void {
+    this.snackBar.open(message, 'Close', {
+      duration: 5000,
+      horizontalPosition: 'end',
+      verticalPosition: 'bottom',
+      panelClass: ['!bg-red-50', '!text-red-900', '!border', '!border-red-100']
+    });
+  }
+}