test

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

@@ -1,24 +1,31 @@
 <h1>Notifications</h1>
-<div class="ui-g-12" dir="rtl">
+<div *ngIf="!notificationPage; else content">
-    <button type="button" label="Mark all as read" pButton class="ui-button-width-fit" (click)="onMarkAllAsRead()"></button>
+    No data
 </div>
+<ng-template #content>
+    <div class="ui-g-12" dir="rtl">
+        <button type="button" label="Mark all as read" pButton class="ui-button-width-fit" (click)="onMarkAllAsRead()"></button>
+    </div>
+    <div>왜 이 div가 없으면 위에 버튼이 안눌릴까요 ㅠㅠ 한참 헤맸자농ㅠㅠ </div>
+    <p-table [value]="notificationPage.content" selectionMode="single"  (onRowSelect)="onRowSelect($event)" >
+        <ng-template pTemplate="header">
+            <tr>
+                <th style="width:9em">Date</th>
+                <th style="width:12em">Title</th>
+                <th pResizableColumn>Message</th>
+                <th style="width:8em">User</th>
+            </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
+          <tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}">
+              <td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td>
+              <td>{{notification.title}}</td>
+              <td>{{notification.message}}</td>
+              <td>{{notification.member.name}}</td>
+          </tr>
+      </ng-template>
+    </p-table>
+    <p-paginator #paginator [rows]="notificationPage.size" [totalRecords]="notificationPage.totalElements"
+     (onPageChange)="onPaginate($event)" [first]="2"></p-paginator>
     
-<p-table [value]="notificationPage.content" selectionMode="single"  (onRowSelect)="onRowSelect($event)" >
+</ng-template>
-    <ng-template pTemplate="header">
-        <tr>
-            <th style="width:9em">Date</th>
-            <th style="width:12em">Title</th>
-            <th pResizableColumn>Message</th>
-            <th style="width:8em">User</th>
-        </tr>
-    </ng-template>
-    <ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
-      <tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}">
-          <td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td>
-          <td>{{notification.title}}</td>
-          <td>{{notification.message}}</td>
-          <td>{{notification.member.name}}</td>
-      </tr>
-  </ng-template>
-</p-table>
-<p-paginator [rows]="pageSize" [totalRecords]="totalLength" (onPageChange)="onPaging($event)"></p-paginator>

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

@@ -1,105 +1,35 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, EventEmitter, Output, ViewChild, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { Notification } from '@overflow/commons-typescript/model/notification';
 import { Page } from '@overflow/commons-typescript/model/commons/Page';
+import { Paginator } from 'primeng/primeng';
 
 @Component({
     selector: 'of-notification-list',
     templateUrl: './list.component.html',
 })
-export class NotificationListComponent {
+export class NotificationListComponent implements OnChanges {
 
     @Input() notificationPage: Page<Notification>;
+    @Output() pageChange = new EventEmitter<number>();
+    @Output() markAll = new EventEmitter();
+    @Output() select = new EventEmitter();
+    @ViewChild('paginator') paginator: Paginator;
 
-    constructor(
+    ngOnChanges(changes: SimpleChanges): void {
-    ) { }
+        if (changes['notificationPage']) {
+            this.paginator.changePage(this.notificationPage.number);
+        }
+    }
 
-    // ngOnInit() {
+    onPaginate(e) {
-    //     // this.notificationSubscription$ = this.notification$.subscribe(
+        this.pageChange.emit(e.page);
-    //     //     (page: Page) => {
+    }
-    //     //         if (page !== null) {
-    //     //             this.notifications = page.content;
-    //     //             this.totalLength = page.totalElements;
-    //     //         }
-    //     //     },
-    //     //     (error: RPCClientError) => {
-    //     //         console.log(error.response.message);
-    //     //     }
-    //     // );
 
-    //     this.readSuccess$.subscribe(
+    onRowSelect(e) {
-    //         (noti: Notification) => {
+        this.select.emit(e.data);
-    //             if (noti) {
+    }
-    //                 this.getNotifications(this.currPage);
-    //             }
-    //         },
-    //         (error: RPCClientError) => {
-    //             console.log(error.response.message);
-    //         }
-    //     );
-    // }
 
-    // ngAfterContentInit() {
+    onMarkAllAsRead() {
-    //     this.getNotifications(this.currPage);
+        this.markAll.emit();
-    // }
+    }
-
-    // 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/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);
+    }
 }

package-lock.json

@@ -445,9 +445,9 @@
       }
     },
     "@overflow/commons-typescript": {
-      "version": "0.0.6",
+      "version": "0.0.7",
-      "resolved": "https://nexus.loafle.net/repository/npm-all/@overflow/commons-typescript/-/commons-typescript-0.0.6.tgz",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/@overflow/commons-typescript/-/commons-typescript-0.0.7.tgz",
-      "integrity": "sha512-XQ7FPsvaAU7xMoTqdXCZTzFy6myBoacAfUU0uNSHTbR8pgAIIg1loyKVw9q6rbgFhQ+ePInxqgjKWkh3GKIAKw=="
+      "integrity": "sha512-qbrNlHEZjUfmuExcHEQ1Bf+PNQfkAZsbinDSGU4ndD4H8hNg/Cv2i4TWaLSWVqXrbIEZkKmv4AZJC9WQTUcFPA=="
     },
     "@schematics/angular": {
       "version": "0.6.3",

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

@@ -6,7 +6,7 @@ const routes: Routes = [
   {
     path: '',
     component: NotificationPageComponent,
-  }
+  },
 ];
 
 @NgModule({

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-container></of-notification-container>
+                <of-notification-container (pageChange)="onPageChange($event)"></of-notification-container>
             </div>
         </div>
     </div>

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

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { BreadcrumbService } from '../../commons/service/breadcrumb.service';
+import { Router } from '@angular/router';
 
 
 @Component({
@@ -9,7 +10,8 @@ import { BreadcrumbService } from '../../commons/service/breadcrumb.service';
 export class NotificationPageComponent implements OnInit {
 
   constructor(
-    private breadcrumbService: BreadcrumbService
+    private breadcrumbService: BreadcrumbService,
+    private router: Router
   ) {
     breadcrumbService.setItems([
       { label: 'Notifications', routerLink: ['/notification'] },
@@ -19,4 +21,8 @@ export class NotificationPageComponent implements OnInit {
   ngOnInit() {
   }
 
+  onPageChange(pageNo: number) {
+    this.router.navigate(['/notification'], { queryParams: { page: pageNo } });
+  }
+
 }