webapp/src/app/pages/notifications/notifications.component.ts

   1 import { Component } from '@angular/core';
   2 import { ToasterService, ToasterConfig, Toast, BodyOutputType } from 'angular2-toaster';
   3 import { Observable } from 'rxjs/Observable';
   4 import { AlertService, IAlert } from '../../@core-xds/services/alert.service';
   5
   6 import 'style-loader!angular2-toaster/toaster.css';
   7
   8 @Component({
   9   selector: 'ngx-notifications',
  10   styleUrls: ['./notifications.component.scss'],
  11   template: '<toaster-container [toasterconfig]="config"></toaster-container>',
  12 })
  13 export class NotificationsComponent {
  14
  15   config: ToasterConfig;
  16
  17   private position = 'toast-top-full-width';
  18   private animationType = 'slideDown';
  19   private toastsLimit = 10;
  20   private toasterService: ToasterService;
  21   private alerts$: Observable<IAlert[]>;
  22
  23   constructor(
  24     toasterService: ToasterService,
  25     private alertSvr: AlertService,
  26   ) {
  27     this.toasterService = toasterService;
  28
  29     this.alertSvr.alerts.subscribe(alerts => {
  30       if (alerts.length === 0) {
  31         this.clearToasts();
  32       } else {
  33         alerts.forEach(al => {
  34           const title = al.type.toUpperCase();
  35           this.showToast(al.type, title, al.msg, al.dismissTimeout);
  36         });
  37       }
  38     });
  39   }
  40
  41   private showToast(type: string, title: string, body: string, tmo: number) {
  42     this.config = new ToasterConfig({
  43       positionClass: this.position,
  44       timeout: tmo,
  45       newestOnTop: true,
  46       tapToDismiss: true, // is Hide OnClick
  47       preventDuplicates: false,
  48       animation: this.animationType,
  49       limit: this.toastsLimit,
  50     });
  51     const toast: Toast = {
  52       type: type,
  53       title: title,
  54       body: body,
  55       timeout: tmo,
  56       showCloseButton: true,
  57       bodyOutputType: BodyOutputType.TrustedHtml,
  58     };
  59     this.toasterService.popAsync(toast);
  60   }
  61
  62   clearToasts() {
  63     this.toasterService.clear();
  64   }
  65 }