From cbcf35b5a7273293d06d9d63df5b617cbea209c6 Mon Sep 17 00:00:00 2001 From: Rene Vergara A Date: Fri, 22 Jul 2022 15:42:58 -0500 Subject: [PATCH] Notifier service up an running --- CHANGELOG.md | 3 ++ src/app/app.module.ts | 4 +-- src/app/notifier.service.spec.ts | 16 ++++++++++ src/app/notifier.service.ts | 25 +++++++++++++++ src/app/notifier/notifier.component.css | 31 +++++++++++++++++++ src/app/notifier/notifier.component.html | 16 ++++++++++ .../notifier.component.spec.ts} | 12 +++---- src/app/notifier/notifier.component.ts | 20 ++++++++++++ src/app/show-error/show-error.component.css | 21 ------------- src/app/show-error/show-error.component.html | 8 ----- src/app/show-error/show-error.component.ts | 21 ------------- src/app/user.service.ts | 20 +++--------- 12 files changed, 124 insertions(+), 73 deletions(-) create mode 100644 src/app/notifier.service.spec.ts create mode 100644 src/app/notifier.service.ts create mode 100644 src/app/notifier/notifier.component.css create mode 100644 src/app/notifier/notifier.component.html rename src/app/{show-error/show-error.component.spec.ts => notifier/notifier.component.spec.ts} (52%) create mode 100644 src/app/notifier/notifier.component.ts delete mode 100644 src/app/show-error/show-error.component.css delete mode 100644 src/app/show-error/show-error.component.html delete mode 100644 src/app/show-error/show-error.component.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index e724654..4d74d82 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Changed +- (2022-07-22) Notifier service created - replaces snackbar used for + reporting invalid viewing key. + Notifier component created - used to apply custom style to message sent by Notifier service. - (2022-07-21) user.service.ts - Function updateOwner() removed - not needed anymore. - Response Error 500 (Invalid Viewing Key) catched in diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 89c27b0..76b6e30 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -42,7 +42,7 @@ import { ReceiptQRComponent } from './receipt-qr/receipt-qr.component'; import { InvoiceComponent } from './invoice/invoice.component'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { PromptInvoiceComponent } from './prompt-invoice/prompt-invoice.component'; -import { ShowErrorComponent } from './show-error/show-error.component'; +import { NotifierComponent } from './notifier/notifier.component'; @NgModule({ declarations: [ @@ -67,7 +67,7 @@ import { ShowErrorComponent } from './show-error/show-error.component'; ReceiptQRComponent, InvoiceComponent, PromptInvoiceComponent, - ShowErrorComponent + NotifierComponent ], imports: [ BrowserModule, diff --git a/src/app/notifier.service.spec.ts b/src/app/notifier.service.spec.ts new file mode 100644 index 0000000..b499131 --- /dev/null +++ b/src/app/notifier.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { NotifierService } from './notifier.service'; + +describe('NotifierService', () => { + let service: NotifierService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(NotifierService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/notifier.service.ts b/src/app/notifier.service.ts new file mode 100644 index 0000000..83faa42 --- /dev/null +++ b/src/app/notifier.service.ts @@ -0,0 +1,25 @@ +import { Injectable } from '@angular/core'; +import { MatSnackBar } from '@angular/material/snack-bar'; +import { NotifierComponent } from './notifier/notifier.component'; + +@Injectable({ + providedIn: 'root' +}) +export class NotifierService { + + constructor(private snackBar:MatSnackBar) { } + + showNotification(displayMessage:string, buttonText: string, messageType: 'error' | 'success') { + this.snackBar.openFromComponent(NotifierComponent, { + data: { + message: displayMessage, + buttonText: buttonText, + type : messageType + }, + duration: 4000, + verticalPosition: 'top', + panelClass: [messageType] + }) + } + +} diff --git a/src/app/notifier/notifier.component.css b/src/app/notifier/notifier.component.css new file mode 100644 index 0000000..480241d --- /dev/null +++ b/src/app/notifier/notifier.component.css @@ -0,0 +1,31 @@ + +.notifier { + font-family: Spartan, sans-serif; + color: black; + font-size: 16px; + text-align: center; +} + +.notifier-type { + border: 2px solid; + border-color: lightcoral; + background: #ff5722; + font-size: 26px; + font-weight: 700; + height: 30px; + color: white; + justify-content: center; + text-align: center; + align-items: center; + vertical-align: center; +} + +::ng-deep .mat-snack-bar-container.error { + background: lightgray; + color: black; +} + +::ng-deep .mat-snack-bar-container.success { + background: lightgray; + color: black; +} diff --git a/src/app/notifier/notifier.component.html b/src/app/notifier/notifier.component.html new file mode 100644 index 0000000..6aaf969 --- /dev/null +++ b/src/app/notifier/notifier.component.html @@ -0,0 +1,16 @@ +
+
+ {{ data.type | titlecase }} +
+

+ {{ data.message }} +

+
+ +
+
\ No newline at end of file diff --git a/src/app/show-error/show-error.component.spec.ts b/src/app/notifier/notifier.component.spec.ts similarity index 52% rename from src/app/show-error/show-error.component.spec.ts rename to src/app/notifier/notifier.component.spec.ts index 2438453..78bf533 100644 --- a/src/app/show-error/show-error.component.spec.ts +++ b/src/app/notifier/notifier.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ShowErrorComponent } from './show-error.component'; +import { NotifierComponent } from './notifier.component'; -describe('ShowErrorComponent', () => { - let component: ShowErrorComponent; - let fixture: ComponentFixture; +describe('NotifierComponent', () => { + let component: NotifierComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ ShowErrorComponent ] + declarations: [ NotifierComponent ] }) .compileComponents(); - fixture = TestBed.createComponent(ShowErrorComponent); + fixture = TestBed.createComponent(NotifierComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/notifier/notifier.component.ts b/src/app/notifier/notifier.component.ts new file mode 100644 index 0000000..7a238c7 --- /dev/null +++ b/src/app/notifier/notifier.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit, Inject} from '@angular/core'; +import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar'; + +@Component({ + selector: 'app-notifier', + templateUrl: './notifier.component.html', + styleUrls: ['./notifier.component.css'] +}) + +export class NotifierComponent implements OnInit { + + constructor( + public sbRef: MatSnackBarRef, + @Inject(MAT_SNACK_BAR_DATA) public data: any + ) {} + + ngOnInit(): void { + } + +} diff --git a/src/app/show-error/show-error.component.css b/src/app/show-error/show-error.component.css deleted file mode 100644 index b3b4528..0000000 --- a/src/app/show-error/show-error.component.css +++ /dev/null @@ -1,21 +0,0 @@ -.green-snackbar { - background: rgb(65, 252, 134); - color: white; -} - -.green-snackbar button { - background-color: rgb(65, 252, 134); - color: white; - border: none; -} - -.red-snackbar { - background: #F44336; - color: white; -} - -.red-snackbar button { - background-color: #F44336; - color: white !important; - border: none; -} \ No newline at end of file diff --git a/src/app/show-error/show-error.component.html b/src/app/show-error/show-error.component.html deleted file mode 100644 index 8ba2676..0000000 --- a/src/app/show-error/show-error.component.html +++ /dev/null @@ -1,8 +0,0 @@ -
-
{{ data }}
-
- -
-
diff --git a/src/app/show-error/show-error.component.ts b/src/app/show-error/show-error.component.ts deleted file mode 100644 index a724d92..0000000 --- a/src/app/show-error/show-error.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component, OnInit, Inject } from '@angular/core'; -import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from "@angular/material/snack-bar"; - -@Component({ - selector: 'app-show-error', - templateUrl: './show-error.component.html', - styleUrls: ['./show-error.component.css'] -}) - - -export class ShowErrorComponent implements OnInit { - - constructor( - public sbRef: MatSnackBarRef, - @Inject(MAT_SNACK_BAR_DATA) public data: any - ) { } - - ngOnInit(): void { - } - -} diff --git a/src/app/user.service.ts b/src/app/user.service.ts index 42be39f..6e28903 100644 --- a/src/app/user.service.ts +++ b/src/app/user.service.ts @@ -2,8 +2,8 @@ import { Injectable } from '@angular/core'; import { Subject, BehaviorSubject, Observable } from 'rxjs'; import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http'; -import { MatSnackBar } from '@angular/material/snack-bar'; -//import { ShowErrorComponent } from './show-error/show-error.component'; + +import { NotifierService } from './notifier.service'; import { User } from './user.model'; import { Owner } from './owner.model'; @@ -74,7 +74,7 @@ export class UserService{ private reqHeaders: HttpHeaders; constructor(private http: HttpClient, - private _snackBar: MatSnackBar){ + private notifierService : NotifierService ){ var auth = 'Basic ' + Buffer.from(ConfigData.UsrPwd).toString('base64'); this.reqHeaders = new HttpHeaders().set('Authorization', auth); //console.log('US:', this.reqHeaders); @@ -157,15 +157,8 @@ export class UserService{ }, (error) => { console.log("Status is : [" + error.status + "]"); if ( error.status = 500 ) { - let sb = this._snackBar.open("Error: Invalid Viewing Key", - "Close", - { duration: 4000, - panelClass: ["green-snackbar"] - } - ); - sb.onAction().subscribe(() => { - sb.dismiss(); - }); + this.notifierService + .showNotification("Invalid Viewing Key, changes not saved!!","Close",'error'); }; }); @@ -205,7 +198,4 @@ export class UserService{ return obs; } - openSnackBar(message: string, action: string) { - this._snackBar.open(message, action); - } }