From d9f1613ccaf03583d83cd3b365c590b013ec17e5 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Wed, 22 Jan 2025 08:55:36 +0100 Subject: [PATCH] Extract snackbar error message implementation to service --- src/app/employee/table/table.component.ts | 21 ++++++------------- .../qualification/table/table.component.ts | 20 ++++++------------ src/app/services/error.handler.service.ts | 18 ++++++++++++++++ 3 files changed, 30 insertions(+), 29 deletions(-) create mode 100644 src/app/services/error.handler.service.ts diff --git a/src/app/employee/table/table.component.ts b/src/app/employee/table/table.component.ts index 7104b73..c97b115 100644 --- a/src/app/employee/table/table.component.ts +++ b/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,11 +47,11 @@ 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; - + private allEmployees: Employee[] = []; private searchSubject = new Subject(); public employees$: Observable = of([]); @@ -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() diff --git a/src/app/qualification/table/table.component.ts b/src/app/qualification/table/table.component.ts index bfba6e0..4c68005 100644 --- a/src/app/qualification/table/table.component.ts +++ b/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,11 +46,11 @@ 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; - + private allQualifications: Qualification[] = []; private searchSubject = new Subject(); public qualifications$: Observable = of([]); @@ -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); diff --git a/src/app/services/error.handler.service.ts b/src/app/services/error.handler.service.ts new file mode 100644 index 0000000..eb362de --- /dev/null +++ b/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'] + }); + } +}