test

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

@@ -1 +1,5 @@
-<of-notification-list [notificationPage]="notificationPage$ | async"></of-notification-list>
+<of-notification-list [notificationPage]="notificationPage$ | async" 
+ (pageChange)="onPageChange($event)"
+ (markAll)="markAllasRead($event)"
+ (select)="notificationSelected($event)"
+ ></of-notification-list>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
 import { AfterContentInit, OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
 import { Store, select } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
@@ -10,6 +10,7 @@ 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';
 import { Notification } from '@overflow/commons-typescript/model/notification';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
     selector: 'of-notification-container',
@@ -17,23 +18,37 @@ import { Notification } from '@overflow/commons-typescript/model/notification';
 })
 export class NotificationListContainerComponent implements OnInit {
     notificationPage$: Observable<Page<Notification>>;
+    @Output() pageChange = new EventEmitter<number>();
+    pageNo: number;
 
     constructor(
         private store: Store<ListStore.State>,
+        private route: ActivatedRoute
     ) {
         this.notificationPage$ = store.pipe(select(NotificationSelector.select('page')));
     }
 
     ngOnInit() {
+        this.route.queryParams.subscribe(queryParams => {
+            this.pageNo = queryParams['page'] || 0;
+            this.getNotifications();
+        });
+    }
+
+    onPageChange(pageNo: number) {
+        this.pageChange.emit(pageNo);
+    }
+
+    getNotifications() {
         this.store.select(AuthSelector.select('member')).subscribe(
             (member: Member) => {
                 const pageParams: PageParams = {
-                    pageNo: 0,
+                    pageNo: this.pageNo,
                     countPerPage: 10,
                     sortCol: 'id',
                     sortDirection: 'descending',
                 };
-                this.store.dispatch(new ListStore.ReadAllByMember({member, pageParams}));
+                this.store.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
             },
             (error) => {
                 console.log(error);
@@ -41,4 +56,25 @@ export class NotificationListContainerComponent implements OnInit {
         );
     }
 
+    markAllasRead() {
+        this.store.select(AuthSelector.select('member')).subscribe(
+            (member: Member) => {
+                const pageParams: PageParams = {
+                    pageNo: this.pageNo,
+                    countPerPage: 10,
+                    sortCol: 'id',
+                    sortDirection: 'descending'
+                };
+                this.store.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+    }
+
+    notificationSelected(notification: Notification) {
+        // this.router.navigate([notification.url]);
+        alert('redirect to ' + notification.url);
+    }
 }