Client: replace simple tables by ng2 smart table component

2 files changed, 54 insertions, 42 deletions

diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 36193d119..3d3d7e054 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -1,26 +1,9 @@
 <h3>Users list</h3>
 
-<table class="table table-hover">
-  <thead>
-    <tr>
-      <th class="table-column-id">ID</th>
-      <th>Username</th>
-      <th>Created Date</th>
-      <th class="text-right">Remove</th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <tr *ngFor="let user of users">
-      <td>{{ user.id }}</td>
-      <td>{{ user.username }}</td>
-      <td>{{ user.createdAt | date: 'medium' }}</td>
-      <td class="text-right">
-        <span class="glyphicon glyphicon-remove" *ngIf="!user.isAdmin()" (click)="removeUser(user)"></span>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<ng2-smart-table
+  [settings]="tableSettings" [source]="usersSource"
+  (delete)="removeUser($event)"
+></ng2-smart-table>
 
 <a class="add-user btn btn-success pull-right" [routerLink]="['/admin/users/add']">
   <span class="glyphicon glyphicon-plus"></span>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index baefb7064..db025d3a8 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -1,9 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { NotificationsService } from 'angular2-notifications';
 
 import { ConfirmService } from '../../../core';
-import { User } from '../../../shared';
+import { User, Utils } from '../../../shared';
 import { UserService } from '../shared';
 
 @Component({
@@ -11,33 +11,62 @@ import { UserService } from '../shared';
   templateUrl: './user-list.component.html',
   styleUrls: [ './user-list.component.scss' ]
 })
-export class UserListComponent implements OnInit {
-  totalUsers: number;
-  users: User[];
+export class UserListComponent {
+  usersSource = null;
+  tableSettings = {
+    mode: 'external',
+    attr: {
+      class: 'table-hover'
+    },
+    hideSubHeader: true,
+    actions: {
+      position: 'right',
+      add: false,
+      edit: false,
+      delete: true
+    },
+    delete: {
+      deleteButtonContent: Utils.getRowDeleteButton()
+    },
+    pager: {
+      display: true,
+      perPage: 10
+    },
+    columns: {
+      id: {
+        title: 'ID',
+        sortDirection: 'asc'
+      },
+      username: {
+        title: 'Username'
+      },
+      role: {
+        title: 'Role',
+        sort: false
+      },
+      createdAt: {
+        title: 'Created Date',
+        valuePrepareFunction: Utils.dateToHuman
+      }
+    }
+  }
 
   constructor(
     private notificationsService: NotificationsService,
     private confirmService: ConfirmService,
     private userService: UserService
-  ) {}
-
-  ngOnInit() {
-    this.getUsers();
+  ) {
+    this.usersSource = this.userService.getDataSource();
   }
 
-  getUsers() {
-    this.userService.getUsers().subscribe(
-      ({ users, totalUsers }) => {
-        this.users = users;
-        this.totalUsers = totalUsers;
-      },
-
-      err => this.notificationsService.error('Error', err.text)
-    );
-  }
+  removeUser({ data }) {
+    const user: User = data;
 
+    if (user.username === 'root') {
+      this.notificationsService.error('Error', 'You cannot delete root.');
+      return;
+    }
 
-  removeUser(user: User) {
     this.confirmService.confirm('Do you really want to delete this user?', 'Delete').subscribe(
       res => {
         if (res === false) return;
@@ -45,7 +74,7 @@ export class UserListComponent implements OnInit {
         this.userService.removeUser(user).subscribe(
           () => {
             this.notificationsService.success('Success', `User ${user.username} deleted.`);
-            this.getUsers();
+            this.usersSource.refresh();
           },
 
           err => this.notificationsService.error('Error', err.text)