feat(message): message center (#53)

package.json

@@ -45,6 +45,7 @@
     "@angular/platform-browser": "^4.0.0",
     "@ngx-translate/core": "^6.0.1",
     "@types/jspdf": "^1.1.31",
+    "angular2-notifications": "^0.4.46",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "jspdf": "^1.3.3",

src/demo-app/app/app.component.html

@@ -1,4 +1,5 @@
 <igo-spinner igoSpinnerBinding></igo-spinner>
+<igo-message-center></igo-message-center>
 
 <md-sidenav-container>
 
@@ -101,8 +102,6 @@
     <md-card-title>print.component</md-card-title>
     <md-card-content>
       <igo-print [map]="map"></igo-print>
-
-      <p *ngFor="let message of (messageService.messages$ | async)">{{message.text}}</p>
     </md-card-content>
   </md-card>
 

src/lib/context/shared/context.service.spec.ts

@@ -1,7 +1,7 @@
 import { TestBed, inject } from '@angular/core/testing';
 import { HttpModule } from '@angular/http';
 
-import { ActivityService, RequestService, MessageService } from '../../core';
+import { IgoCoreModule } from '../../core';
 import { ToolService } from '../../tool';
 
 import { ContextService,
@@ -12,17 +12,15 @@ describe('ContextService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        HttpModule
+        HttpModule,
+        IgoCoreModule.forRoot()
       ],
       providers: [
         provideContextServiceOptions({
           basePath: 'contexts',
           contextListFile: '_contexts.json'
         }),
-        ActivityService,
         ContextService,
-        MessageService,
-        RequestService,
         ToolService
       ]
     });

src/lib/core/message/index.ts

@@ -1 +1,2 @@
+export * from './message-center';
 export * from './shared';

src/lib/core/message/message-center/index.ts

@@ -0,0 +1 @@
+export * from './message-center.component';

src/lib/core/message/message-center/message-center.component.html

@@ -0,0 +1 @@
+<simple-notifications [options]="options"></simple-notifications>

src/lib/core/message/message-center/message-center.component.spec.ts

@@ -0,0 +1,31 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SimpleNotificationsModule } from 'angular2-notifications';
+
+import { MessageCenterComponent } from './message-center.component';
+
+describe('NotificationComponent', () => {
+  let component: MessageCenterComponent;
+  let fixture: ComponentFixture<MessageCenterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        SimpleNotificationsModule.forRoot()
+      ],
+      declarations: [
+        MessageCenterComponent
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessageCenterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/lib/core/message/message-center/message-center.component.styl

@@ -0,0 +1,43 @@
+@require '../../../../style/media.styl';
+
+:host >>> simple-notifications {
+
+  div.simple-notification {
+    min-height: 50px;
+    margin-bottom: 5px;
+
+    +media(mobile) {
+      margin-bottom: 0;
+    }
+
+    svg {
+      width: 63px;
+      height: 63px;
+      padding: 15px;
+    }
+
+    .sn-title {
+      line-height: 23px;
+      font-size: 15px;
+      font-weight: bold;
+    }
+
+    .sn-content {
+      line-height: 18px;
+      font-size: 15px;
+    }
+
+    &.error {
+      background-color: #d32f2f;
+      .sn-progress-loader span {
+        background-color: #c41515;
+      }
+    }
+
+    md-icon {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+    }
+  }
+}

src/lib/core/message/message-center/message-center.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input } from '@angular/core';
+
+import { Options } from 'angular2-notifications/src/options.type';
+
+
+@Component({
+  selector: 'igo-message-center',
+  templateUrl: './message-center.component.html',
+  styleUrls: ['./message-center.component.styl'],
+})
+
+export class MessageCenterComponent {
+
+  static defaultOptions = {
+    timeOut: 500000,
+    showProgressBar: true,
+    pauseOnHover: true,
+    clickToClose: true,
+    maxLength: 100,
+    maxStack: 3,
+    preventDuplicates: true
+  };
+
+  @Input()
+  get options(): Options {
+    return Object.assign(
+      {}, MessageCenterComponent.defaultOptions, this._options);
+  }
+  set options(value: Options) {
+    this._options = value;
+  }
+  private _options: Options = '';
+
+  constructor() { }
+
+}

src/lib/core/message/shared/message.enum.ts

@@ -1,6 +1,6 @@
 export enum MessageType {
   ERROR = <any> 'error',
-  WARN = <any> 'warn',
+  ALERT = <any> 'alert',
   INFO = <any> 'info',
   SUCCESS = <any> 'success'
 }

src/lib/core/message/shared/message.interface.ts

@@ -3,6 +3,7 @@ import { MessageType } from './message.enum';
 export interface Message {
   title?: string;
   text: string;
+  icon?: string;
   type?: MessageType;
   format?: 'text' | 'html';
 }

src/lib/core/message/shared/message.service.spec.ts

@@ -1,4 +1,5 @@
 import { TestBed, inject } from '@angular/core/testing';
+import { NotificationsService } from 'angular2-notifications';
 
 import { MessageService } from '.';
 
@@ -7,6 +8,7 @@ describe('MessageService', () => {
     TestBed.configureTestingModule({
       imports: [],
       providers: [
+        NotificationsService,
         MessageService
       ]
     });

src/lib/core/message/shared/message.service.ts

@@ -1,4 +1,6 @@
 import { Injectable } from '@angular/core';
+import { NotificationsService } from 'angular2-notifications';
+import { Notification } from 'angular2-notifications/src/notification.type';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 import { Message } from './message.interface';
@@ -10,29 +12,51 @@ export class MessageService {
 
   public messages$ = new BehaviorSubject<Message[]>([]);
 
-  constructor() { }
+  constructor(private notificationService: NotificationsService) { }
 
   message(message: Message) {
-    const messages_ = this.messages$.value;
-    messages_.push(message);
+    this.messages$.next(this.messages$.value.concat([message]));
 
-    this.messages$.next(messages_);
+    const notification = this.notificationService.create(
+      message.title, message.text, message.type as any as string);
+
+    if (message.icon !== undefined) {
+      this.addIcon(notification, message.icon);
+    }
+  }
+
+  html(message: Message) {
+    this.messages$.next(this.messages$.value.concat([message]));
+
+    this.notificationService.html(message.title, message.text);
   }
 
-  success(text: string, title?: string) {
+  success(text: string, title?: string, icon?: string) {
     this.message({
       text: text,
       title: title,
+      icon: icon,
       type: MessageType.SUCCESS
     });
   }
 
-  error(text: string, title?: string) {
+  error(text: string, title?: string, icon?: string) {
     this.message({
       text: text,
       title: title,
+      icon: icon,
       type: MessageType.ERROR
     });
   }
 
+  private addIcon(notification: Notification, icon: string) {
+    // There is no way to add an icon to a notification when reating
+    // it so we simply set it on the notification directly.
+    // See https://github.com/flauc/angular2-notifications/issues/165
+    notification.icon = `
+      <md-icon class="material-icons mat-icon mat-list-avatar">
+        ${icon}
+      </md-icon>`;
+  }
+
 }

src/lib/core/module.ts

@@ -1,5 +1,7 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 
+import { SimpleNotificationsModule } from 'angular2-notifications';
+
 import { TranslateModule, MissingTranslationHandler,
          TranslateService } from '@ngx-translate/core';
 
@@ -9,19 +11,25 @@ import { LanguageService, IgoMissingTranslationHandler,
 import { ActivityService } from './activity';
 import { MediaService } from './media';
 import { RequestService } from './request';
-import { MessageService } from './message';
+import { MessageCenterComponent, MessageService } from './message';
 
 
 @NgModule({
   imports: [
+    SimpleNotificationsModule.forRoot(),
     TranslateModule.forRoot({
       missingTranslationHandler: {
         provide: MissingTranslationHandler,
         useClass: IgoMissingTranslationHandler
       }
     })
   ],
-  exports: []
+  declarations: [
+    MessageCenterComponent
+  ],
+  exports: [
+    MessageCenterComponent
+  ]
 })
 export class IgoCoreModule {
   static forRoot(): ModuleWithProviders {

src/lib/core/request/request.service.spec.ts

@@ -1,4 +1,5 @@
 import { TestBed, inject } from '@angular/core/testing';
+import { NotificationsService } from 'angular2-notifications';
 import { HttpModule, JsonpModule } from '@angular/http';
 
 import { MessageService } from '../message';
@@ -13,6 +14,7 @@ describe('RequestService', () => {
         JsonpModule
       ],
       providers: [
+        NotificationsService,
         ActivityService,
         MessageService,
         RequestService

src/lib/datasource/shared/capabilities.service.spec.ts

@@ -1,20 +1,18 @@
 import { TestBed, inject } from '@angular/core/testing';
 import { HttpModule } from '@angular/http';
 
-import { ActivityService, RequestService, MessageService } from '../../core';
+import { IgoCoreModule } from '../../core';
 
 import { CapabilitiesService } from './capabilities.service';
 
 describe('CapabilitiesService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        HttpModule
+        HttpModule,
+        IgoCoreModule.forRoot()
       ],
       providers: [
-        ActivityService,
-        RequestService,
-        MessageService,
         CapabilitiesService
       ]
     });

src/lib/datasource/shared/datasource.service.spec.ts

@@ -1,7 +1,7 @@
 import { TestBed, inject } from '@angular/core/testing';
 import { HttpModule } from '@angular/http';
 
-import { ActivityService, RequestService, MessageService } from '../../core';
+import { IgoCoreModule } from '../../core';
 
 import { CapabilitiesService } from './capabilities.service';
 import { DataSourceService } from './datasource.service';
@@ -11,12 +11,10 @@ describe('DataSourceService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        HttpModule
+        HttpModule,
+        IgoCoreModule.forRoot()
       ],
       providers: [
-        ActivityService,
-        RequestService,
-        MessageService,
         CapabilitiesService,
         DataSourceService
       ]

src/lib/print/shared/print.service.spec.ts

@@ -1,17 +1,16 @@
 import { TestBed, inject } from '@angular/core/testing';
 
-import { ActivityService, MessageService, RequestService } from '../../core';
+import { IgoCoreModule } from '../../core';
 
 import { PrintService } from './print.service';
 
 describe('PrintService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [],
+      imports: [
+        IgoCoreModule.forRoot()
+      ],
       providers: [
-        ActivityService,
-        MessageService,
-        RequestService,
         PrintService
       ]
     });