From 419b0bf70a2de2f930b3cb13f4cb4b0c2f98aa25 Mon Sep 17 00:00:00 2001 From: FlayInAHook Date: Thu, 3 Dec 2020 20:18:30 +0100 Subject: [PATCH] WIP multi error messages --- src/app/app.module.ts | 3 ++ src/app/helper/snackbar-dialog.html | 5 ++++ src/app/helper/snackbar-ref.component.ts | 35 ++++++++++++++++++++++++ src/app/helper/token.interceptor.ts | 24 ++++++++++++---- src/app/services/snackbar.service.ts | 24 ++++++++++++---- 5 files changed, 80 insertions(+), 11 deletions(-) create mode 100644 src/app/helper/snackbar-dialog.html create mode 100644 src/app/helper/snackbar-ref.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ec6d281..aefdad4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -66,6 +66,7 @@ import { SelectObjectDialogComponent } from './components/select-object-dialog/s import { AutocompleteSelectComponent } from './components/autocomplete-select/autocomplete-select.component'; import { LendingStationComponent } from './pages/dataPages/lending-station/lending-station.component'; import { ProfileComponent } from './pages/profile/profile.component'; +import { ErrorSnackbarComponent, SnackbarDialog } from './helper/snackbar-ref.component'; @@ -96,6 +97,8 @@ import { ProfileComponent } from './pages/profile/profile.component'; AutocompleteSelectComponent, LendingStationComponent, ProfileComponent, + ErrorSnackbarComponent, + SnackbarDialog ], imports: [ BrowserModule, diff --git a/src/app/helper/snackbar-dialog.html b/src/app/helper/snackbar-dialog.html new file mode 100644 index 0000000..1bddf5b --- /dev/null +++ b/src/app/helper/snackbar-dialog.html @@ -0,0 +1,5 @@ +

Dialog with elements

+
This dialog showcases the title, close, content and actions elements.
+
+ +
diff --git a/src/app/helper/snackbar-ref.component.ts b/src/app/helper/snackbar-ref.component.ts new file mode 100644 index 0000000..2d4ff33 --- /dev/null +++ b/src/app/helper/snackbar-ref.component.ts @@ -0,0 +1,35 @@ +import { Component, Inject } from '@angular/core'; +import { MatDialog } from '@angular/material/dialog'; +import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar'; + +@Component({ + selector: 'app-error-snackbar', + template: ` +

{{ data.message }}

+ + `, +}) + + +export class ErrorSnackbarComponent { + constructor( + public snackBarRef: MatSnackBarRef, + public dialog: MatDialog, + @Inject(MAT_SNACK_BAR_DATA) public data: any, + ) {} + + + public actionAndDismiss(){ + console.log("test"); + this.dialog.open(SnackbarDialog); + this.snackBarRef.dismiss() + } +} + +@Component({ + selector: 'app-snackbar-dialog', + templateUrl: 'snackbar-dialog.html', + }) + export class SnackbarDialog {} \ No newline at end of file diff --git a/src/app/helper/token.interceptor.ts b/src/app/helper/token.interceptor.ts index dd68b6a..a60e2c9 100644 --- a/src/app/helper/token.interceptor.ts +++ b/src/app/helper/token.interceptor.ts @@ -39,12 +39,11 @@ export class TokenInterceptor implements HttpInterceptor { break; default: - errorMessage = `${error.error.message}. Error Code: ${error.status}.`; + errorMessage = this.serverErrorMessageGenerator(error); break; } - } else - if (error.status === 401) { + } else if (error.status === 401) { var urlSplit : string[] = error.url.split("/"); if (urlSplit[3] === "users" && urlSplit[5] === "update"){ // Allow user pw updates to be processed correctly errorMessage = "Das aktuelle Passwort ist inkorrekt."; @@ -52,14 +51,29 @@ export class TokenInterceptor implements HttpInterceptor { return this.handle401Error(request, next); } } else { - errorMessage = `${error.error.message}. Error Code: ${error.status}.`; + errorMessage = this.serverErrorMessageGenerator(error); } } - this.snackBar.openSnackBar(errorMessage, "Ok", true); + if (errorMessage === "Viele Fehler sind aufgetreten.") { + this.snackBar.openSnackBar(errorMessage, "Erweitert", true, error.error.errors); + } else { + this.snackBar.openSnackBar(errorMessage, "Ok", true); + } + return throwError(errorMessage); })); } + private serverErrorMessageGenerator (error: HttpErrorResponse): string { + if (error.error.message === undefined){ + return "Viele Fehler sind aufgetreten." // If you change this you have to change it over this aswell + } else { + `${error.error.message}. Fehlercode: ${error.status}.`; + } + + } + + private addToken(request: HttpRequest, token: string) { return request.clone({ setHeaders: { diff --git a/src/app/services/snackbar.service.ts b/src/app/services/snackbar.service.ts index 1ef6718..05f6f07 100644 --- a/src/app/services/snackbar.service.ts +++ b/src/app/services/snackbar.service.ts @@ -1,5 +1,6 @@ import { Injectable } from '@angular/core'; import {MatSnackBar} from '@angular/material/snack-bar'; +import { ErrorSnackbarComponent } from '../helper/snackbar-ref.component'; @Injectable({ providedIn: 'root', @@ -9,15 +10,26 @@ export class SnackBarService { constructor(private snackBar : MatSnackBar) { } - openSnackBar(message: string, action: string = "", error: boolean = false) { + openSnackBar(message: string, action: string = "", error: boolean = false, errorMessageArray: Object[] = undefined) { if (error){ - this.snackBar.open(message, action, { - duration: 5000, - panelClass: ['mat-toolbar', 'mat-warn', 'simple-snack-bar'] - }); + if (errorMessageArray === undefined){ + this.snackBar.open(message, action, { + duration: 5000, + panelClass: ['mat-toolbar', 'mat-warn', 'simple-snack-bar'] + }); + } else { + this.snackBar.openFromComponent(ErrorSnackbarComponent, { + data: { + "message" : message, + "action" : action, + }, + panelClass: ['mat-toolbar', 'mat-warn', 'simple-snack-bar'], + duration: 5000 + }); + } } else { this.snackBar.open(message, action, { - duration: 5000, + duration: 2000, panelClass: ['mat-toolbar', 'mat-primary', 'simple-snack-bar'] }); }