paging

src/packages/notification/component/notification/notification.component.html

@@ -24,6 +24,6 @@
     <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>
   </mat-table>
 
-  <mat-paginator [length]="length" [pageIndex]="0" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25, 100]">
+  <mat-paginator #paginator [length]="totalLength" [pageIndex]="0" [pageSize]="PAGE_SIZE" (page)="handlePaging($event)">
   </mat-paginator>
 </div>

src/packages/notification/component/notification/notification.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, ViewChild, AfterContentInit } from '@angular/core';
-import { MatTableDataSource, MatSort } from '@angular/material';
+import { MatTableDataSource, MatSort, PageEvent } from '@angular/material';
 import { Router } from '@angular/router';
 import { Store, select } from '@ngrx/store';
 import { RPCError } from 'packages/core/rpc/error';
@@ -8,7 +8,7 @@ import * as NotificationStore from '../../store/notification';
 import { ReadAllByMemberSelector } from '../../store';
 import { AuthSelector } from 'packages/member/store';
 import { Member } from '../../../member/model';
-import { PageParams } from 'app/commons/model';
+import { PageParams, Page } from 'app/commons/model';
 
 @Component({
   selector: 'of-notification',
@@ -17,11 +17,12 @@ import { PageParams } from 'app/commons/model';
 })
 export class NotificationComponent implements OnInit, AfterContentInit {
 
-  notification$ = this.store.pipe(select(ReadAllByMemberSelector.select('notifications')));
+  notification$ = this.store.pipe(select(ReadAllByMemberSelector.select('page')));
 
   displayedColumns = ['id', 'title', 'message', 'member'];
   dataSource: MatTableDataSource<Notification>;
-  @ViewChild(MatSort) sort: MatSort;
+  PAGE_SIZE = '10';
+  totalLength = 0;
 
   constructor(
     private router: Router,
@@ -30,9 +31,11 @@ export class NotificationComponent implements OnInit, AfterContentInit {
 
   ngOnInit() {
     this.notification$.subscribe(
-      (notifications: Notification[]) => {
-        this.dataSource = new MatTableDataSource(notifications);
-        this.dataSource.sort = this.sort;
+      (page: Page) => {
+        if (page !== null) {
+          this.totalLength = page.totalElements;
+          this.dataSource = new MatTableDataSource(page.content);
+        }
       },
       (error: RPCError) => {
         console.log(error.message);
@@ -41,23 +44,31 @@ export class NotificationComponent implements OnInit, AfterContentInit {
   }
 
   ngAfterContentInit() {
-    // this.store.select(AuthSelector.select('member')).subscribe(
-    //   (member: Member) => {
-    //     const pageParams: PageParams = {
-    //       pageNo: '1',
-    //       countPerPage: '10',
-    //     };
-    //     this.store.dispatch(new NotificationStore.ReadAllByMember({member, pageParams}));
-    //   },
-    //   (error) => {
-    //     console.log(error);
-    //   }
-    // );
+    this.getNotifications(0);
+  }
 
+  getNotifications(pageIndex: number) {
+    this.store.select(AuthSelector.select('member')).subscribe(
+      (member: Member) => {
+        const pageParams: PageParams = {
+          pageNo: pageIndex + '',
+          countPerPage: this.PAGE_SIZE,
+          sortCol: 'id',
+          sortDirection: 'descending'
+        };
+        this.store.dispatch(new NotificationStore.ReadAllByMember({ member, pageParams }));
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
   }
 
   handleRowClick(n: Notification) {
     this.router.navigate([n.url]);
   }
 
+  handlePaging(e: PageEvent) {
+    this.getNotifications(e.pageIndex);
+  }
 }

src/packages/notification/store/notification/notification.action.ts

@@ -2,9 +2,8 @@ import { Action } from '@ngrx/store';
 
 import { RPCError } from 'packages/core/rpc/error';
 
-import { Notification } from '../../model';
 import { Member } from '../../../member/model';
-import { PageParams } from 'app/commons/model';
+import { PageParams, Page } from 'app/commons/model';
 
 export enum ActionType {
   ReadAllByMember = '[Notification.notification] ReadAllByMember',
@@ -21,7 +20,7 @@ export class ReadAllByMember implements Action {
 export class ReadAllByMemberSuccess implements Action {
   readonly type = ActionType.ReadAllByMemberSuccess;
 
-  constructor(public payload: Notification[]) {}
+  constructor(public payload: any) {}
 }
 
 export class ReadAllByMemberFailure implements Action {

src/packages/notification/store/notification/notification.effect.ts

@@ -47,8 +47,8 @@ export class Effects {
     .ofType(ActionType.ReadAllByMember)
     .map((action: ReadAllByMember) => action.payload)
     .switchMap(payload => this.notificationService.readAllByMember(payload.member, payload.pageParams))
-    .map(notifications => {
-      return new ReadAllByMemberSuccess(notifications);
+    .map(page => {
+      return new ReadAllByMemberSuccess(page);
     })
     .catch((error: RPCError) => {
       return of(new ReadAllByMemberFailure(error));

src/packages/notification/store/notification/notification.reducer.ts

@@ -8,8 +8,6 @@ import {
     initialState,
   } from './notification.state';
 
-  import { Notification } from '../../model';
-
   export function reducer(state = initialState, action: Actions): State {
     switch (action.type) {
       case ActionType.ReadAllByMember: {
@@ -25,7 +23,7 @@ import {
           ...state,
           error: null,
           pending: false,
-          notifications: action.payload,
+          page: action.payload,
         };
       }
 
@@ -34,7 +32,7 @@ import {
           ...state,
           error: action.payload,
           pending: false,
-          notifications: null,
+          page: null,
         };
       }
 

src/packages/notification/store/notification/notification.state.ts

@@ -1,15 +1,18 @@
 import { RPCError } from 'packages/core/rpc/error';
 
 import { Notification } from '../../model';
+import { Page } from 'app/commons/model';
 
 export interface State {
   error: RPCError | null;
   pending: boolean;
-  notifications: Notification[] | null;
+  page: Page;
+  // notifications: Notification[] | null;
 }
 
 export const initialState: State = {
   error: null,
   pending: false,
-  notifications: null,
+  page: null,
+  // notifications: null,
 };