notification in progress

@overflow/notification/component/index.ts

@@ -1,5 +1,5 @@
-import { NotificationComponent } from './notification/notification.component';
+import { NotificationListComponent } from './list/list.component';
 
 export const COMPONENTS = [
-  NotificationComponent,
+  NotificationListComponent,
 ];

@overflow/notification/component/list/list.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NotificationComponent } from './notification.component';
+import { NotificationListComponent } from './list.component';
 
-describe('NotificationComponent', () => {
+describe('NotificationListComponent', () => {
-  let component: NotificationComponent;
+  let component: NotificationListComponent;
-  let fixture: ComponentFixture<NotificationComponent>;
+  let fixture: ComponentFixture<NotificationListComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ NotificationComponent ]
+      declarations: [ NotificationListComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(NotificationComponent);
+    fixture = TestBed.createComponent(NotificationListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

@overflow/notification/component/list/list.component.ts

@@ -0,0 +1,104 @@
+import { Component, Input } from '@angular/core';
+import { Notification } from '@overflow/commons-typescript/model/notification';
+
+@Component({
+    selector: 'of-notification-list',
+    templateUrl: './list.component.html',
+})
+export class NotificationListComponent {
+
+    @Input() notifications: Notification[];
+
+    constructor(
+    ) { }
+
+    // ngOnInit() {
+    //     // this.notificationSubscription$ = this.notification$.subscribe(
+    //     //     (page: Page) => {
+    //     //         if (page !== null) {
+    //     //             this.notifications = page.content;
+    //     //             this.totalLength = page.totalElements;
+    //     //         }
+    //     //     },
+    //     //     (error: RPCClientError) => {
+    //     //         console.log(error.response.message);
+    //     //     }
+    //     // );
+
+    //     this.readSuccess$.subscribe(
+    //         (noti: Notification) => {
+    //             if (noti) {
+    //                 this.getNotifications(this.currPage);
+    //             }
+    //         },
+    //         (error: RPCClientError) => {
+    //             console.log(error.response.message);
+    //         }
+    //     );
+    // }
+
+    // ngAfterContentInit() {
+    //     this.getNotifications(this.currPage);
+    // }
+
+    // ngOnDestroy() {
+    //     if (this.notificationSubscription$) {
+    //         this.notificationSubscription$.unsubscribe();
+    //     }
+    // }
+
+    // // updateData(noti: Notification) {
+    // //     for (let i = 0; i < this.notifications.length; i++) {
+    // //         const exist = this.notifications[i];
+    // //         if (exist.id === noti.id) {
+    // //             this.notifications[i] = noti;
+    // //             return;
+    // //         }
+    // //     }
+    // // }
+
+    // getNotifications(pageIndex: number) {
+    //     // this.listStore.select(AuthSelector.select('member')).subscribe(
+    //     //     (member: Member) => {
+    //     //         const pageParams: PageParams = {
+    //     //             pageNo: pageIndex + '',
+    //     //             countPerPage: this.pageSize,
+    //     //             sortCol: 'id',
+    //     //             sortDirection: 'descending'
+    //     //         };
+    //     //         this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
+    //     //         this.currPage = pageIndex;
+    //     //     },
+    //     //     (error) => {
+    //     //         console.log(error);
+    //     //     }
+    //     // );
+    // }
+
+    // onRowSelect(event) {
+    //     this.detailStore.dispatch(new DetailStore.MarkAsRead(event.data));
+    //     alert('Will redirect to ' + event.data.url);
+    //     // this.router.navigate([n.url]);
+    // }
+
+    // onPaging(e) {
+    //     this.getNotifications(e.page);
+    // }
+
+    // onMarkAllAsRead() {
+    //     // this.listStore.select(AuthSelector.select('member')).subscribe(
+    //     //     (member: Member) => {
+    //     //         const pageParams: PageParams = {
+    //     //             pageNo: this.currPage + '',
+    //     //             countPerPage: this.pageSize,
+    //     //             sortCol: 'id',
+    //     //             sortDirection: 'descending'
+    //     //         };
+    //     //         this.listStore.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
+    //     //     },
+    //     //     (error) => {
+    //     //         console.log(error);
+    //     //     }
+    //     // );
+    // }
+}

@overflow/notification/component/notification/notification.component.ts

@@ -1,124 +0,0 @@
-import { Component, OnInit, Input, ViewChild, AfterContentInit, OnDestroy } from '@angular/core';
-import { Router } from '@angular/router';
-import { Store, select } from '@ngrx/store';
-import { RPCClientError } from '@loafer/ng-rpc';
-import { Notification } from '@overflow/commons-typescript/model/notification';
-import * as DetailStore from '../../store/detail';
-import * as ListStore from '../../store/list';
-import { ReadAllByMemberSelector, ReadSelector } from '../../store';
-import { AuthSelector } from '@overflow/member/store';
-import { Member } from '@overflow/commons-typescript/model/member';
-// import { PageParams, Page } from 'app/commons/model';
-import { Subscription } from 'rxjs/Subscription';
-
-@Component({
-    selector: 'of-notification',
-    templateUrl: './notification.component.html',
-})
-export class NotificationComponent implements OnInit, AfterContentInit, OnDestroy {
-
-    notificationSubscription$: Subscription;
-    notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
-    notifications: Notification[];
-    readSuccess$ = this.detailStore.pipe(select(ReadSelector.select('notification')));
-
-    pageSize = '10';
-    totalLength = 0;
-    currPage = 0;
-
-    constructor(
-        private router: Router,
-        private listStore: Store<ListStore.State>,
-        private detailStore: Store<DetailStore.State>
-    ) { }
-
-    ngOnInit() {
-        // this.notificationSubscription$ = this.notification$.subscribe(
-        //     (page: Page) => {
-        //         if (page !== null) {
-        //             this.notifications = page.content;
-        //             this.totalLength = page.totalElements;
-        //         }
-        //     },
-        //     (error: RPCClientError) => {
-        //         console.log(error.response.message);
-        //     }
-        // );
-
-        this.readSuccess$.subscribe(
-            (noti: Notification) => {
-                if (noti) {
-                    this.getNotifications(this.currPage);
-                }
-            },
-            (error: RPCClientError) => {
-                console.log(error.response.message);
-            }
-        );
-    }
-
-    ngAfterContentInit() {
-        this.getNotifications(this.currPage);
-    }
-
-    ngOnDestroy() {
-        if (this.notificationSubscription$) {
-            this.notificationSubscription$.unsubscribe();
-        }
-    }
-
-    // updateData(noti: Notification) {
-    //     for (let i = 0; i < this.notifications.length; i++) {
-    //         const exist = this.notifications[i];
-    //         if (exist.id === noti.id) {
-    //             this.notifications[i] = noti;
-    //             return;
-    //         }
-    //     }
-    // }
-
-    getNotifications(pageIndex: number) {
-        // this.listStore.select(AuthSelector.select('member')).subscribe(
-        //     (member: Member) => {
-        //         const pageParams: PageParams = {
-        //             pageNo: pageIndex + '',
-        //             countPerPage: this.pageSize,
-        //             sortCol: 'id',
-        //             sortDirection: 'descending'
-        //         };
-        //         this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
-        //         this.currPage = pageIndex;
-        //     },
-        //     (error) => {
-        //         console.log(error);
-        //     }
-        // );
-    }
-
-    onRowSelect(event) {
-        this.detailStore.dispatch(new DetailStore.MarkAsRead(event.data));
-        alert('Will redirect to ' + event.data.url);
-        // this.router.navigate([n.url]);
-    }
-
-    onPaging(e) {
-        this.getNotifications(e.page);
-    }
-
-    onMarkAllAsRead() {
-        // this.listStore.select(AuthSelector.select('member')).subscribe(
-        //     (member: Member) => {
-        //         const pageParams: PageParams = {
-        //             pageNo: this.currPage + '',
-        //             countPerPage: this.pageSize,
-        //             sortCol: 'id',
-        //             sortDirection: 'descending'
-        //         };
-        //         this.listStore.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
-        //     },
-        //     (error) => {
-        //         console.log(error);
-        //     }
-        // );
-    }
-}

@overflow/notification/container/index.ts

@@ -0,0 +1,5 @@
+import { NotificationListContainerComponent } from './list/list-container.component';
+
+export const CONTAINER_COMPONENTS = [
+  NotificationListContainerComponent,
+];

@overflow/notification/container/list/list-container.component.html

@@ -0,0 +1 @@
+<of-notification-list [notifications]="notifications$ | async"></of-notification-list>

@overflow/notification/container/list/list-container.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { AfterContentInit, OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
+import { Store, select } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+import { Domain } from '@overflow/commons-typescript/model/domain';
+import * as ListStore from '../../store/notification';
+import { NotificationSelector } from '../../store';
+import { AuthSelector } from '../../../member/store';
+import { Member } from '@overflow/commons-typescript/model/member';
+import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
+
+@Component({
+    selector: 'of-notification-container',
+    templateUrl: './list-container.component.html',
+})
+export class NotificationListContainerComponent implements OnInit {
+    notifications$: Observable<Notification[]>;
+
+    constructor(
+        private store: Store<ListStore.State>,
+    ) {
+        this.notifications$ = store.pipe(select(NotificationSelector.select('notifications')));
+    }
+
+    ngOnInit() {
+        this.store.select(AuthSelector.select('member')).subscribe(
+            (member: Member) => {
+                const pageParams: PageParams = {
+                    pageNo: 0,
+                    countPerPage: 10,
+                    sortCol: 'id',
+                    sortDirection: 'descending',
+                };
+                this.store.dispatch(new ListStore.ReadAllByMember({member, pageParams}));
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+    }
+
+}

@overflow/notification/notification.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { COMPONENTS } from './component';
+import { CONTAINER_COMPONENTS } from './container';
 import { SERVICES } from './service';
 
 import { NotificationStoreModule } from './notification-store.module';
@@ -15,9 +16,11 @@ import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
   ],
   declarations: [
     COMPONENTS,
+    CONTAINER_COMPONENTS
   ],
   exports: [
     COMPONENTS,
+    CONTAINER_COMPONENTS
   ],
   providers: [
     SERVICES,

@overflow/notification/service/notification.service.ts

@@ -7,7 +7,8 @@ import { RPCService } from '@loafer/ng-rpc';
 
 import { Notification } from '@overflow/commons-typescript/model/notification';
 import { Member } from '@overflow/commons-typescript/model/member';
-// import { PageParams, Page } from 'app/commons/model';
+import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
+import { Page } from '@overflow/commons-typescript/model/commons/Page';
 
 @Injectable()
 export class NotificationService {
@@ -18,13 +19,13 @@ export class NotificationService {
 
   }
 
-  // public readAllByMember(member: Member, pageParams: PageParams): Observable<Page> {
+  public readAllByMember(member: Member, pageParams: PageParams): Observable<Page> {
-  //   return this.rpcService.call('NotificationService.readAllByMember', member, pageParams);
+    return this.rpcService.call('NotificationService.readAllByMember', member, pageParams);
-  // }
+  }
 
-  // public markAllAsRead(member: Member, pageParams: PageParams): Observable<Page> {
+  public markAllAsRead(member: Member, pageParams: PageParams): Observable<Page> {
-  //   return this.rpcService.call('NotificationService.markAllAsRead',  member, pageParams);
+    return this.rpcService.call('NotificationService.markAllAsRead',  member, pageParams);
-  // }
+  }
 
   public markAsRead(notification: Notification): Observable<Notification> {
     return this.rpcService.call('NotificationService.markAsRead', notification);

@overflow/notification/store/index.ts

@@ -1,38 +1,29 @@
 import {
   createSelector,
   createFeatureSelector,
-  ActionReducerMap,
 } from '@ngrx/store';
 
 import { StateSelector } from '@overflow/core/ngrx/store';
 
 import { MODULE } from '../notification.constant';
 
-import * as ListStore from './list';
+import * as NotificationStore from './notification';
-import * as DetailStore from './detail';
 
 export interface State {
-  notifications: ListStore.State;
+  notification: NotificationStore.State;
-  notification: DetailStore.State;
 }
 
 export const REDUCERS = {
-  notifications: ListStore.reducer,
+  notification: NotificationStore.reducer,
-  notification: DetailStore.reducer,
 };
 
 export const EFFECTS = [
-  ListStore.Effects,
+  NotificationStore.Effects,
-  DetailStore.Effects,
 ];
 
 export const selectNotificationState = createFeatureSelector<State>(MODULE.name);
 
-export const ReadAllByMemberSelector = new StateSelector<ListStore.State>(createSelector(
+export const NotificationSelector = new StateSelector<NotificationStore.State>(createSelector(
-  selectNotificationState,
-  (state: State) => state.notifications
-));
-export const ReadSelector = new StateSelector<DetailStore.State>(createSelector(
   selectNotificationState,
   (state: State) => state.notification
 ));

@overflow/notification/store/notification/list/index.ts

@@ -0,0 +1,4 @@
+export * from './notification.action';
+export * from './notification.effect';
+export * from './notification.reducer';
+export * from './notification.state';

@overflow/notification/store/notification/notification.action.ts

@@ -0,0 +1,60 @@
+import { Action } from '@ngrx/store';
+import { RPCClientError } from '@loafer/ng-rpc';
+import { Member } from '@overflow/commons-typescript/model/member';
+import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
+import { Page } from '@overflow/commons-typescript/model/commons/Page';
+
+export enum ActionType {
+  ReadAllByMember = '[Notification.list] ReadAllByMember',
+  ReadAllByMemberSuccess = '[Notification.list] ReadAllByMemberSuccess',
+  ReadAllByMemberFailure = '[Notification.list] ReadAllByMemberFailure',
+  MarkAllAsRead = '[Notification.mark] MarkAllAsRead',
+  MarkAllAsReadSuccess = '[Notification.mark] MarkAllAsReadSuccess',
+  MarkAllAsReadFailure = '[Notification.mark] MarkAllAsReadFailure',
+}
+
+export class ReadAllByMember implements Action {
+  readonly type = ActionType.ReadAllByMember;
+
+  constructor(public payload: { member: Member, pageParams: PageParams }) {}
+}
+
+export class ReadAllByMemberSuccess implements Action {
+  readonly type = ActionType.ReadAllByMemberSuccess;
+
+  constructor(public payload: Page) {}
+}
+
+export class ReadAllByMemberFailure implements Action {
+  readonly type = ActionType.ReadAllByMemberFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export class MarkAllAsRead implements Action {
+  readonly type = ActionType.MarkAllAsRead;
+
+  constructor(public payload: { member: Member, pageParams: PageParams }) {}
+}
+
+export class MarkAllAsReadSuccess implements Action {
+  readonly type = ActionType.MarkAllAsReadSuccess;
+
+  constructor(public payload: Page) {}
+}
+
+export class MarkAllAsReadFailure implements Action {
+  readonly type = ActionType.MarkAllAsReadFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+
+export type Actions =
+  | ReadAllByMember
+  | ReadAllByMemberSuccess
+  | ReadAllByMemberFailure
+  | MarkAllAsRead
+  | MarkAllAsReadSuccess
+  | MarkAllAsReadFailure
+;

@overflow/notification/store/notification/notification.effect.ts

@@ -0,0 +1,64 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc';
+
+import { Domain } from '@overflow/commons-typescript/model/domain';
+
+import {
+  ReadAllByMember,
+  ReadAllByMemberSuccess,
+  ReadAllByMemberFailure,
+  MarkAllAsRead,
+  MarkAllAsReadSuccess,
+  MarkAllAsReadFailure,
+  ActionType,
+} from './notification.action';
+import { NotificationService } from '../../service/notification.service';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private notificationService: NotificationService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  readAllByMember$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAllByMember)
+    .map((action: ReadAllByMember) => action.payload)
+    .switchMap(payload => this.notificationService.readAllByMember(payload.member, payload.pageParams))
+    .map(page => {
+      return new ReadAllByMemberSuccess(page);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllByMemberFailure(error));
+    });
+
+    @Effect()
+    markAllAsRead$: Observable<Action> = this.actions$
+      .ofType(ActionType.MarkAllAsRead)
+      .map((action: MarkAllAsRead) => action.payload)
+      .switchMap(payload => this.notificationService.markAllAsRead(payload.member, payload.pageParams))
+      .map(page => {
+        return new MarkAllAsReadSuccess(page);
+      })
+      .catch((error: RPCClientError) => {
+        return of(new MarkAllAsReadFailure(error));
+      });
+}

@overflow/notification/store/notification/notification.reducer.ts

@@ -0,0 +1,63 @@
+import {
+  Actions,
+  ActionType,
+} from './notification.action';
+
+import {
+  State,
+  initialState,
+} from './notification.state';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ReadAllByMember: {
+      return {
+        ...state,
+        error: null,
+      };
+    }
+
+    case ActionType.ReadAllByMemberSuccess: {
+      return {
+        ...state,
+        error: null,
+        page: action.payload,
+      };
+    }
+
+    case ActionType.ReadAllByMemberFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        page: null,
+      };
+    }
+
+    case ActionType.MarkAllAsRead: {
+      return {
+        ...state,
+        error: null,
+      };
+    }
+
+    case ActionType.MarkAllAsReadSuccess: {
+      return {
+        ...state,
+        error: null,
+        page: action.payload,
+      };
+    }
+
+    case ActionType.MarkAllAsReadFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        page: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}

@overflow/notification/store/notification/notification.state.ts

@@ -0,0 +1,12 @@
+import { RPCClientError } from '@loafer/ng-rpc';
+import { Page } from '@overflow/commons-typescript/model/commons/Page';
+
+export interface State {
+  error: RPCClientError | null;
+  page: Page | null;
+}
+
+export const initialState: State = {
+  error: null,
+  page: null,
+};

src/app/commons/component/layout/notification/app.notification.component.ts

@@ -1,8 +1,7 @@
 import { Component, Injectable, OnInit, AfterContentInit, Output, EventEmitter, OnDestroy } from '@angular/core';
-import * as ListStore from '@overflow/notification/store/list';
+import * as NotificationStore from '@overflow/notification/store/notification';
-import * as DetailStore from '@overflow/notification/store/detail';
 import { Store, select } from '@ngrx/store';
-import { ReadAllByMemberSelector, ReadSelector } from '@overflow/notification/store';
+import { NotificationSelector } from '@overflow/notification/store';
 import { Page } from '@overflow/commons-typescript/model/commons/Page';
 import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
 import { RPCClientError } from '@loafer/ng-rpc';
@@ -20,32 +19,31 @@ import { Subscription } from 'rxjs/Subscription';
 
 export class AppNotificationComponent implements OnInit, AfterContentInit, OnDestroy {
 
-    notificationSubscription$: Subscription;
+    // notificationSubscription$: Subscription;
-    notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
+    // notification$ = this.listStore.pipe(select(NotificationSelector.select('page')));
-    notifications: Notification[];
+    // notifications: Notification[];
 
     @Output() notificationLoaded = new EventEmitter<number>();
 
     constructor(
         private router: Router,
         private app: PagesComponent,
-        private listStore: Store<ListStore.State>,
+        private notificationStore: Store<NotificationStore.State>,
-        private detailStore: Store<DetailStore.State>,
     ) {
     }
 
     ngOnInit() {
-        this.notificationSubscription$ = this.notification$.subscribe(
+        // this.notificationSubscription$ = this.notification$.subscribe(
-            (page: Page) => {
+        //     (page: Page) => {
-                if (page !== null && page !== undefined) {
+        //         if (page !== null && page !== undefined) {
-                    this.notifications = page.content;
+        //             this.notifications = page.content;
-                    this.getUnconfirmedCount();
+        //             this.getUnconfirmedCount();
-                }
+        //         }
-            },
+        //     },
-            (error: RPCClientError) => {
+        //     (error: RPCClientError) => {
-                console.log(error.response.message);
+        //         console.log(error.response.message);
-            }
+        //     }
-        );
+        // );
     }
 
     ngAfterContentInit() {
@@ -66,22 +64,22 @@ export class AppNotificationComponent implements OnInit, AfterContentInit, OnDes
     }
 
     ngOnDestroy() {
-        if (this.notificationSubscription$) {
+        // if (this.notificationSubscription$) {
-            this.notificationSubscription$.unsubscribe();
+        //     this.notificationSubscription$.unsubscribe();
-        }
+        // }
     }
 
     getUnconfirmedCount() {
-        if (this.notifications === null || this.notifications.length === 0) {
+        // if (this.notifications === null || this.notifications.length === 0) {
-            return;
+        //     return;
-        }
+        // }
-        let totalCnt = 0;
+        // let totalCnt = 0;
-        for (let i = 0; i < 5; i ++) {
+        // for (let i = 0; i < 5; i ++) {
-            if (!this.notifications[i].confirmDate) {
+        //     if (!this.notifications[i].confirmDate) {
-                totalCnt += 1;
+        //         totalCnt += 1;
-            }
+        //     }
-        }
+        // }
-        this.notificationLoaded.emit(totalCnt);
+        // this.notificationLoaded.emit(totalCnt);
       }
 
     onViewAllClick() {
@@ -89,7 +87,7 @@ export class AppNotificationComponent implements OnInit, AfterContentInit, OnDes
     }
 
     onNotiClick(notification: Notification) {
-        this.detailStore.dispatch(new DetailStore.MarkAsRead(notification));
+        // this.detailStore.dispatch(new DetailStore.MarkAsRead(notification));
-        alert('Will redirect to ' + notification.url);
+        // alert('Will redirect to ' + notification.url);
     }
 }

src/app/pages/notification/notification-page.component.html

@@ -2,7 +2,7 @@
     <div class="ui-g">
         <div class="ui-g-12">
             <div class="card no-margin">
-                <of-notification></of-notification>
+                <of-notification-container></of-notification-container>
             </div>
         </div>
     </div>

src/app/pages/notification/notification-page.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { BreadcrumbService } from '../../commons/service/breadcrumb.service';
+
 
 @Component({
   selector: 'of-page-notification',
@@ -6,7 +8,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class NotificationPageComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private breadcrumbService: BreadcrumbService
+  ) {
+    breadcrumbService.setItems([
+      { label: 'Notifications', routerLink: ['/notification'] },
+    ]);
+  }
 
   ngOnInit() {
   }

src/app/pages/pages-routing.module.ts

@@ -17,7 +17,7 @@ const routes: Routes = [
       // { path: 'target', loadChildren: './target/target-page.module#TargetPageModule' },
       // { path: 'overview', loadChildren: './overview/overview-page.module#OverviewPageModule' },
       // { path: 'dashboard', loadChildren: './dashboard/dashboard-page.module#DashboardPageModule' },
-      // { path: 'notification', loadChildren: './notification/notification-page.module#NotificationPageModule' },
+      { path: 'notification', loadChildren: './notification/notification-page.module#NotificationPageModule' },
       // { path: 'alert', loadChildren: './alert/alert-page.module#AlertPageModule' },
       // { path: 'report', loadChildren: './report/report-page.module#ReportPageModule' },
       // { path: 'log', loadChildren: './log/log-page.module#LogPageModule' },