Notifier service up an running

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 

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,

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();
+  });
+});

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] 
+    })
+  }
+
+}

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;
+}

src/app/notifier/notifier.component.html

@@ -0,0 +1,16 @@
+<div class="notifier" >
+	<div class="notifier-type">
+		{{ data.type | titlecase }}
+	</div>
+	<p>
+		{{ data.message }}
+	</p>
+	<div >
+		<button mat-flat-button (click)="sbRef.dismiss()"
+				style="justify-content: center;
+					   align-items: center;"
+				color="primary">
+			{{ data.buttonText }}
+		</button>
+	</div>
+</div>

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<ShowErrorComponent>;
+describe('NotifierComponent', () => {
+  let component: NotifierComponent;
+  let fixture: ComponentFixture<NotifierComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ShowErrorComponent ]
+      declarations: [ NotifierComponent ]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ShowErrorComponent);
+    fixture = TestBed.createComponent(NotifierComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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<NotifierComponent>,
+    @Inject(MAT_SNACK_BAR_DATA) public data: any
+  ) {}
+
+  ngOnInit(): void {
+  }
+
+}

src/app/show-error/show-error.component.css

@@ -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;
-}

src/app/show-error/show-error.component.html

@@ -1,8 +0,0 @@
-<div>
-  <div>{{ data }}</div>
-  <div class="dismiss" test-selector="aaaa">
-    <button mat-icon-button (click)="sbRef.dismiss()">
-      <mat-icon>Dismiss</mat-icon>AAAA
-    </button>
-  </div>
-</div>

src/app/show-error/show-error.component.ts

@@ -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<ShowErrorComponent>,
-     @Inject(MAT_SNACK_BAR_DATA) public data: any
-  ) { }
-
-  ngOnInit(): void {
-  }
-
-}

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);
-	}
 }