Client: replace simple tables by ng2 smart table component

3 files changed, 51 insertions, 49 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 06258f8c8..254d0c65e 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
@@ -1,29 +1,11 @@
 <h3>Friends list</h3>
 
-<table class="table table-hover">
-  <thead>
-    <tr>
-      <th class="table-column-id">ID</th>
-      <th>Host</th>
-      <th>Score</th>
-      <th>Created Date</th>
-    </tr>
-  </thead>
+<ng2-smart-table [settings]="tableSettings" [source]="friendsSource"></ng2-smart-table>
 
-  <tbody>
-    <tr *ngFor="let friend of friends">
-      <td>{{ friend.id }}</td>
-      <td>{{ friend.host }}</td>
-      <td>{{ friend.score }}</td>
-      <td>{{ friend.createdAt | date: 'medium' }}</td>
-    </tr>
-  </tbody>
-</table>
-
-<a *ngIf="friends && friends.length !== 0" class="add-user btn btn-danger pull-left" (click)="quitFriends()">
+<a *ngIf="hasFriends()" class="add-user btn btn-danger pull-left" (click)="quitFriends()">
   Quit friends
 </a>
 
-<a *ngIf="friends?.length === 0" class="add-user btn btn-success pull-right" [routerLink]="['/admin/friends/add']">
+<a *ngIf="!hasFriends()" class="add-user btn btn-success pull-right" [routerLink]="['/admin/friends/add']">
   Make friends
 </a>
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 175ad9cba..f29427640 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,8 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { NotificationsService } from 'angular2-notifications';
+import { ServerDataSource } from 'ng2-smart-table';
 
 import { ConfirmService } from '../../../core';
+import { Utils } from '../../../shared';
 import { Friend, FriendService } from '../shared';
 
 @Component({
@@ -10,17 +12,51 @@ import { Friend, FriendService } from '../shared';
   templateUrl: './friend-list.component.html',
   styleUrls: [ './friend-list.component.scss' ]
 })
-export class FriendListComponent implements OnInit {
-  friends: Friend[];
+export class FriendListComponent {
+  friendsSource = null;
+  tableSettings = {
+    attr: {
+      class: 'table-hover'
+    },
+    hideSubHeader: true,
+    actions: {
+      position: 'right',
+      add: false,
+      edit: false,
+      delete: false
+    },
+    columns: {
+      id: {
+        title: 'ID',
+        sort: false,
+        sortDirection: 'asc'
+      },
+      host: {
+        title: 'Host',
+        sort: false
+      },
+      score: {
+        title: 'Score',
+        sort: false
+      },
+      createdAt: {
+        title: 'Created Date',
+        sort: false,
+        valuePrepareFunction: Utils.dateToHuman
+      }
+    }
+  }
 
   constructor(
     private notificationsService: NotificationsService,
     private confirmService: ConfirmService,
     private friendService: FriendService
-  ) {  }
+  ) {
+    this.friendsSource = this.friendService.getDataSource();
+  }
 
-  ngOnInit() {
-    this.getFriends();
+  hasFriends() {
+    return this.friendsSource.count() != 0;
   }
 
   quitFriends() {
@@ -33,7 +69,7 @@ export class FriendListComponent implements OnInit {
           status => {
             this.notificationsService.success('Sucess', 'Friends left!');
 
-            this.getFriends();
+            this.friendsSource.refresh();
           },
 
           err => this.notificationsService.error('Error', err.text)
@@ -41,12 +77,4 @@ export class FriendListComponent implements OnInit {
       }
     );
   }
-
-  private getFriends() {
-    this.friendService.getFriends().subscribe(
-      res => this.friends = res.friends,
-
-      err => this.notificationsService.error('Error', err.text)
-    );
-  }
 }
diff --git a/client/src/app/+admin/friends/shared/friend.service.ts b/client/src/app/+admin/friends/shared/friend.service.ts
index e97459385..6cb84f5cd 100644
--- a/client/src/app/+admin/friends/shared/friend.service.ts
+++ b/client/src/app/+admin/friends/shared/friend.service.ts
@@ -3,8 +3,10 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
 
+import { ServerDataSource } from 'ng2-smart-table';
+
 import { Friend } from './friend.model';
-import { AuthHttp, RestExtractor, ResultList } from '../../../shared';
+import { AuthHttp, RestExtractor, RestDataSource, ResultList } from '../../../shared';
 
 @Injectable()
 export class FriendService {
@@ -15,11 +17,8 @@ export class FriendService {
     private restExtractor: RestExtractor
   ) {}
 
-  getFriends() {
-    return this.authHttp.get(FriendService.BASE_FRIEND_URL)
-                        .map(this.restExtractor.extractDataList)
-                        .map(this.extractFriends)
-                        .catch((res) => this.restExtractor.handleError(res));
+  getDataSource() {
+    return new RestDataSource(this.authHttp, FriendService.BASE_FRIEND_URL);
   }
 
   makeFriends(notEmptyHosts) {
@@ -37,11 +36,4 @@ export class FriendService {
                         .map(res => res.status)
                         .catch((res) => this.restExtractor.handleError(res));
   }
-
-  private extractFriends(result: ResultList) {
-    const friends: Friend[] = result.data;
-    const totalFriends = result.total;
-
-    return { friends, totalFriends };
-  }
 }