Client: replace simple tables by ng2 smart table component

[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / users / user-list / user-list.component.ts

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 baefb7064ce60fa30d99cbce4e06325ed7551006..db025d3a82a71d6a5680cbc4eddb41747f5bbc55 100644 (file)
--- 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)