toast notifications

frontend/src/app/app.component.html

@@ -1,5 +1,6 @@
 <div>
   <app-header *ngIf="showHeader"></app-header>
+  <app-toast aria-live="polite" aria-atomic="true"></app-toast>
   <div class="az-content-wrapper">
     <router-outlet></router-outlet>
   </div>

frontend/src/app/app.component.ts

@@ -3,6 +3,7 @@ import {NavigationEnd, Router} from '@angular/router';
 import {fromWorker} from 'observable-webworker';
 import {Observable, of} from 'rxjs';
 import {QueueService} from './workers/queue.service';
+import {ToastService} from './services/toast.service';
 
 @Component({
   selector: 'app-root',
@@ -16,7 +17,7 @@ export class AppComponent implements OnInit {
   showHeader:boolean = false;
   showFooter:boolean = true;
 
-  constructor(private router: Router, private queueService: QueueService) {}
+  constructor(private router: Router, private queueService: QueueService, private toastService: ToastService) {}
 
   ngOnInit() {
 

frontend/src/app/components/shared.module.ts

@@ -32,6 +32,7 @@ import {ListDiagnosticReportComponent} from './list-generic-resource/list-diagno
 import {ListGoalComponent} from './list-generic-resource/list-goal.component';
 import { ListFallbackResourceComponent } from './list-fallback-resource/list-fallback-resource.component';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { ToastComponent } from './toast/toast.component';
 
 @NgModule({
   imports: [
@@ -70,6 +71,7 @@ import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
     ResourceListComponent,
     ResourceListOutletDirective,
     ListFallbackResourceComponent,
+    ToastComponent,
   ],
   exports: [
     ComponentsSidebarComponent,
@@ -99,7 +101,8 @@ import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
     ListDiagnosticReportComponent,
     ListGoalComponent,
     ResourceListComponent,
-    ResourceListOutletDirective
+    ResourceListOutletDirective,
+    ToastComponent,
   ]
 })
 

frontend/src/app/components/toast/toast.component.html

@@ -0,0 +1,17 @@
+<div class="pos-absolute t-10 r-10">
+  <ngb-toast
+    *ngFor="let toast of toastService.toasts"
+    [class]="toast.displayClass"
+    [autohide]="true"
+    [delay]="toast.delay || 5000"
+    (hidden)="toastService.remove(toast)"
+  >
+    <ng-template ngbToastHeader>
+      <h6 class="tx-inverse tx-14 mg-b-0 mg-r-auto">{{toast.title}}</h6>
+      <small>11 mins ago</small>
+    </ng-template>
+
+    {{ toast.message }}
+  </ngb-toast>
+</div>
+

frontend/src/app/components/toast/toast.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToastComponent } from './toast.component';
+
+describe('ToastComponent', () => {
+  let component: ToastComponent;
+  let fixture: ComponentFixture<ToastComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ToastComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ToastComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/toast/toast.component.ts

@@ -0,0 +1,15 @@
+import {Component, OnInit, TemplateRef} from '@angular/core';
+import {ToastService} from '../../services/toast.service';
+
+@Component({
+  selector: 'app-toast',
+  templateUrl: './toast.component.html',
+  styleUrls: ['./toast.component.scss']
+})
+export class ToastComponent implements OnInit {
+
+  constructor(public toastService: ToastService) {}
+
+  ngOnInit(): void {
+  }
+}

frontend/src/app/models/fasten/toast.ts

@@ -0,0 +1,11 @@
+export enum ToastType {
+  Error = "error",
+  Info = "info"
+}
+
+export class ToastNotification {
+  title?: string
+  message: string
+  type: ToastType = ToastType.Info
+  displayClass: string = 'demo-static-toast'
+}

frontend/src/app/pages/auth-signin/auth-signin.component.ts

@@ -1,7 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {User} from '../../../lib/models/fasten/user';
 import {FastenDbService} from '../../services/fasten-db.service';
 import {Router} from '@angular/router';
+import {ToastService} from '../../services/toast.service';
+import {ToastNotification, ToastType} from '../../models/fasten/toast';
 
 @Component({
   selector: 'app-auth-signin',
@@ -13,7 +15,7 @@ export class AuthSigninComponent implements OnInit {
   existingUser: User = new User()
   errorMsg: string = ""
 
-  constructor(private fastenDb: FastenDbService,  private router: Router) { }
+  constructor(private fastenDb: FastenDbService,  private router: Router, private toastService: ToastService) { }
 
   ngOnInit(): void {
   }
@@ -29,6 +31,10 @@ export class AuthSigninComponent implements OnInit {
         } else{
           this.errorMsg = "an unknown error occurred during sign-in"
         }
+        const toastNotificaiton = new ToastNotification()
+        toastNotificaiton.type = ToastType.Error
+        toastNotificaiton.message = this.errorMsg
+        this.toastService.show(toastNotificaiton)
       })
 
   }

frontend/src/app/pages/auth-signup/auth-signup.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import {FastenDbService} from '../../services/fasten-db.service';
 import {User} from '../../../lib/models/fasten/user';
 import {Router} from '@angular/router';
+import {ToastNotification, ToastType} from '../../models/fasten/toast';
+import {ToastService} from '../../services/toast.service';
 
 @Component({
   selector: 'app-auth-signup',
@@ -16,7 +18,8 @@ export class AuthSignupComponent implements OnInit {
   constructor(
     // private fastenApi: FastenApiService,
     private fastenDb: FastenDbService,
-    private router: Router
+    private router: Router,
+    private toastService: ToastService
   ) { }
 
   ngOnInit(): void {
@@ -40,6 +43,11 @@ export class AuthSignupComponent implements OnInit {
         } else {
           this.errorMsg = "an unknown error occurred during sign-up"
         }
+
+        const toastNotificaiton = new ToastNotification()
+        toastNotificaiton.type = ToastType.Error
+        toastNotificaiton.message = this.errorMsg
+        this.toastService.show(toastNotificaiton)
     })
   }
 

frontend/src/app/pages/medical-sources/medical-sources.component.html

@@ -23,9 +23,9 @@
         <div *ngFor="let sourceInfo of connectedSourceList" class="col-sm-3 mg-b-20 px-3">
           <div class="card h-100 d-flex align-items-center justify-content-center p-3 rounded-0 cursor-pointer">
             <div (click)="openModal(contentModalRef, sourceInfo)" class="card-body">
-              <img [src]="'assets/sources/'+sourceInfo.metadata['source_type']+'.png'" alt="client" class="img-fluid">
-              <div *ngIf="status[sourceInfo.source['source_type']]" class="progress">
-                <div [style.width]="status[sourceInfo.source['source_type']] == 'authorize' ? '33%' : '66%'" class="bg-indigo progress-bar progress-bar-striped progress-bar-animated" role="progressbar"></div>
+              <img [src]="'assets/sources/'+sourceInfo?.metadata['source_type']+'.png'" alt="client" class="img-fluid">
+              <div *ngIf="status[sourceInfo.source?.source_type]" class="progress">
+                <div [style.width]="status[sourceInfo?.source?.source_type] == 'authorize' ? '33%' : '66%'" class="bg-indigo progress-bar progress-bar-striped progress-bar-animated" role="progressbar"></div>
               </div>
             </div>
           </div>

frontend/src/app/services/fasten-db.service.ts

@@ -67,8 +67,11 @@ export class FastenDbService extends PouchdbRepository {
   }
 
   public async Logout(): Promise<any> {
-    localStorage.removeItem("current_user")
+
+    let remotePouchDb = new PouchDB(this.getRemoteUserDb(localStorage.getItem("current_user")), {skip_setup: true});
+    await remotePouchDb.logOut()
     await this.Close()
+    localStorage.removeItem("current_user")
   }
   public async IsAuthenticated(): Promise<boolean> {
     if(!this.localPouchDb){

frontend/src/app/services/toast.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ToastService } from './toast.service';
+
+describe('ToastService', () => {
+  let service: ToastService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ToastService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/services/toast.service.ts

@@ -0,0 +1,31 @@
+import {Injectable} from '@angular/core';
+import {ToastNotification, ToastType} from '../models/fasten/toast';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ToastService {
+
+  toasts: ToastNotification[] = [];
+  constructor() { }
+
+  show(toastNotification: ToastNotification) {
+    if(!toastNotification.title){
+      toastNotification.title = toastNotification.type == ToastType.Error ? "Error" : "Notification"
+    }
+
+    if(toastNotification.type == ToastType.Error){
+      toastNotification.displayClass += ' bg-danger text-light'
+    }
+
+    this.toasts.push(toastNotification);
+  }
+
+  remove(toast) {
+    this.toasts = this.toasts.filter(t => t !== toast);
+  }
+
+  clear() {
+    this.toasts.splice(0, this.toasts.length);
+  }
+}

frontend/src/polyfills.ts

@@ -64,3 +64,6 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
 
 //required for PouchDB
 (window as any).global = window;
+
+// required for toast
+import '@angular/localize/init';