3 files changed, 33 insertions, 14 deletions

diff --git a/client/src/app/+admin/friends/friend-list/friend-list.component.html b/client/src/app/+admin/friends/friend-list/friend-list.component.html
index 7887bc5e3..7e92ced54 100644
--- a/client/src/app/+admin/friends/friend-list/friend-list.component.html
+++ b/client/src/app/+admin/friends/friend-list/friend-list.component.html
@@ -2,12 +2,15 @@
   <div class="content-padding">
     <h3>Friends list</h3>
 
-    <p-dataTable [value]="friends">
-      <p-column field="id" header="ID"></p-column>
-      <p-column field="host" header="Host"></p-column>
+    <p-dataTable
+        [value]="friends" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+        sortField="id" (onLazyLoad)="loadLazy($event)"
+    >
+      <p-column field="id" header="ID" [sortable]="true"></p-column>
+      <p-column field="host" header="Host" [sortable]="true"></p-column>
       <p-column field="email" header="Email"></p-column>
-      <p-column field="score" header="Score"></p-column>
-      <p-column field="createdAt" header="Created date"></p-column>
+      <p-column field="score" header="Score" [sortable]="true"></p-column>
+      <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
       <p-column header="Delete" styleClass="action-cell">
         <ng-template pTemplate="body" let-pod="rowData">
           <span (click)="removeFriend(pod)" class="glyphicon glyphicon-remove glyphicon-black" title="Remove this pod"></span>
diff --git a/client/src/app/+admin/friends/friend-list/friend-list.component.ts b/client/src/app/+admin/friends/friend-list/friend-list.component.ts
index 4af39c47e..5a1ecd280 100644
--- a/client/src/app/+admin/friends/friend-list/friend-list.component.ts
+++ b/client/src/app/+admin/friends/friend-list/friend-list.component.ts
@@ -1,24 +1,32 @@
 import { Component, OnInit } from '@angular/core'
 
 import { NotificationsService } from 'angular2-notifications'
+import { SortMeta } from 'primeng/primeng'
 
 import { ConfirmService } from '../../../core'
-import { FriendService } from '../shared'
+import { RestTable, RestPagination } from '../../../shared'
 import { Pod } from '../../../../../../shared'
+import { FriendService } from '../shared'
 
 @Component({
   selector: 'my-friend-list',
   templateUrl: './friend-list.component.html',
   styleUrls: ['./friend-list.component.scss']
 })
-export class FriendListComponent implements OnInit {
+export class FriendListComponent extends RestTable implements OnInit {
   friends: Pod[] = []
+  totalRecords = 0
+  rowsPerPage = 10
+  sort: SortMeta = { field: 'id', order: 1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
   constructor (
     private notificationsService: NotificationsService,
     private confirmService: ConfirmService,
     private friendService: FriendService
-  ) {}
+  ) {
+    super()
+  }
 
   ngOnInit () {
     this.loadData()
@@ -65,11 +73,12 @@ export class FriendListComponent implements OnInit {
     )
   }
 
-  private loadData () {
-    this.friendService.getFriends()
+  protected loadData () {
+    this.friendService.getFriends(this.pagination, this.sort)
                       .subscribe(
                         resultList => {
                           this.friends = resultList.data
+                          this.totalRecords = resultList.total
                         },
 
                         err => this.notificationsService.error('Error', err.message)
diff --git a/client/src/app/+admin/friends/shared/friend.service.ts b/client/src/app/+admin/friends/shared/friend.service.ts
index 274373e3b..a32cdcc88 100644
--- a/client/src/app/+admin/friends/shared/friend.service.ts
+++ b/client/src/app/+admin/friends/shared/friend.service.ts
@@ -1,9 +1,12 @@
 import { Injectable } from '@angular/core'
-import { HttpClient } from '@angular/common/http'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Observable } from 'rxjs/Observable'
 import 'rxjs/add/operator/catch'
 import 'rxjs/add/operator/map'
 
-import { RestExtractor } from '../../../shared'
+import { SortMeta } from 'primeng/primeng'
+
+import { RestExtractor, RestPagination, RestService } from '../../../shared'
 import { Pod, ResultList } from '../../../../../../shared'
 
 @Injectable()
@@ -12,11 +15,15 @@ export class FriendService {
 
   constructor (
     private authHttp: HttpClient,
+    private restService: RestService,
     private restExtractor: RestExtractor
   ) {}
 
-  getFriends () {
-    return this.authHttp.get<ResultList<Pod>>(FriendService.BASE_FRIEND_URL)
+  getFriends (pagination: RestPagination, sort: SortMeta): Observable<ResultList<Pod>> {
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    return this.authHttp.get<ResultList<Pod>>(FriendService.BASE_FRIEND_URL, { params })
                         .map(res => this.restExtractor.convertResultListDateToHuman(res))
                         .catch(res => this.restExtractor.handleError(res))
   }