#7 Message in response to error in client

client/src/app/app.component.html

@@ -1,3 +1,4 @@
+<p-growl [value]="msgs"></p-growl>
 <app-toolbar></app-toolbar>
 <app-navbar></app-navbar>
 <router-outlet></router-outlet>

client/src/app/app.component.ts

@@ -1,8 +1,38 @@
-import { Component } from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} from "@angular/core";
+import {Message} from "primeng/primeng";
+import {AppService} from "./app.service";
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html'
+  templateUrl: './app.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+
+  msgs: Message[] = []
+
+  constructor(private appService: AppService,
+              private changeDetectionRef: ChangeDetectorRef) {
+  }
+
+  ngOnInit() {
+    this.appService.events.message.subscribe(e => {
+
+      // For some reason the change detection for the first item in array doesn't work
+      // Create a copy of array then empty array, trigger the detection and then put the previous copy
+      // + new message and detect again :-)
+      let previous = this.msgs.slice()
+      this.msgs = []
+      setTimeout(() => {
+        previous.push(e)
+        this.msgs = previous
+        this.changeDetectionRef.detectChanges()
+      })
+
+      this.changeDetectionRef.detectChanges()
+
+    })
+
+  }
+
 }

client/src/app/app.module.ts

@@ -9,8 +9,12 @@ import { SharedModule } from "./shared/shared.module";
 import { AuthModule, InitOptions } from 'angular-spa';
 import { HomeModule } from "./+home/home.module";
 import { SearchModule } from "./+search/search.module";
+import {GrowlModule} from 'primeng/primeng';
 
 import { environment } from '../environments/environment';
+import {Interceptor} from 'angular-http-interceptor'
+import {HttpStatusErrorInterceptor} from "./shared/interceptors/http-status-error";
+import {AppService} from "./app.service";
 
 
 @NgModule({
@@ -24,10 +28,17 @@ import { environment } from '../environments/environment';
     HttpModule,
     routing,
     HomeModule,
+    GrowlModule,
     SearchModule
   ],
   providers: [
     appRoutingProviders,
+    AppService,
+    {
+      provide: Interceptor,
+      useClass: HttpStatusErrorInterceptor,
+      multi: true
+    },
     {
       provide: InitOptions,
       useValue: {

client/src/app/app.service.ts

@@ -0,0 +1,11 @@
+import {Injectable} from "@angular/core";
+import {Message} from "primeng/primeng";
+
+import {Subject} from "rxjs";
+
+@Injectable()
+export class AppService {
+  events = {
+    message: new Subject<Message>()
+  }
+}

client/src/app/shared/interceptors/http-status-error.ts

@@ -0,0 +1,25 @@
+import {Interceptor} from 'angular-http-interceptor'
+import {Injectable} from "@angular/core";
+import {Request, Response} from "@angular/http"
+import {Observable} from "rxjs/Observable";
+
+import "rxjs/add/observable/of"
+import {AppService} from "../../app.service";
+
+@Injectable()
+export class HttpStatusErrorInterceptor implements Interceptor {
+  constructor(private appService: AppService) {}
+  before(request: Request): Observable<any> {
+    return Observable.of(request);
+  }
+
+  after(response: Response): void {
+
+  }
+
+  error(err: Response): void {
+    const severity = err.status == 404 ? 'info': 'error'
+    this.appService.events.message.next({summary: err.statusText, detail: err.text(), severity: severity})
+  }
+
+}