Client: replace simple tables by ng2 smart table component

2 files changed, 59 insertions, 44 deletions

diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
index 46043577c..b2fd17bf0 100644
--- a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
@@ -1,27 +1,5 @@
 <h3>Video abuses list</h3>
 
-<table class="table table-hover">
-  <thead>
-    <tr>
-      <th class="cell-id">ID</th>
-      <th class="cell-reason">Reason</th>
-      <th>Reporter pod host</th>
-      <th>Reporter username</th>
-      <th>Video</th>
-      <th>Created at</th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <tr *ngFor="let videoAbuse of videoAbuses">
-      <td>{{ videoAbuse.id }}</td>
-      <td>{{ videoAbuse.reason }}</td>
-      <td>{{ videoAbuse.reporterPodHost }}</td>
-      <td>{{ videoAbuse.reporterUsername }}</td>
-      <td>
-        <a [routerLink]="buildVideoLink(videoAbuse)" title="Go to video">{{ videoAbuse.videoId }}</a>
-      </td>
-      <td>{{ videoAbuse.createdAt | date: 'medium' }}</td>
-    </tr>
-  </tbody>
-</table>
+<ng2-smart-table
+  [settings]="tableSettings" [source]="videoAbusesSource"
+></ng2-smart-table>
diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
index cfd9151b0..2f22a4ab0 100644
--- a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
+++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
@@ -1,35 +1,72 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { NotificationsService } from 'angular2-notifications';
 
-import { VideoAbuseService, VideoAbuse} from '../../../shared';
+import { Utils, VideoAbuseService, VideoAbuse} from '../../../shared';
 
 @Component({
         selector: 'my-video-abuse-list',
         templateUrl: './video-abuse-list.component.html',
   styleUrls: [ './video-abuse-list.component.scss' ]
 })
-export class VideoAbuseListComponent implements OnInit {
-  videoAbuses: VideoAbuse[];
+export class VideoAbuseListComponent {
+  videoAbusesSource = null;
+  tableSettings = {
+    mode: 'external',
+    attr: {
+      class: 'table-hover'
+    },
+    hideSubHeader: true,
+    actions: {
+      position: 'right',
+      add: false,
+      edit: false,
+      delete: false
+    },
+    pager: {
+      display: true,
+      perPage: 10
+    },
+    columns: {
+      id: {
+        title: 'ID',
+        sortDirection: 'asc'
+      },
+      reason: {
+        title: 'Reason',
+        sort: false
+      },
+      reporterPodHost: {
+        title: 'Reporter pod host',
+        sort: false
+      },
+      reporterUsername: {
+        title: 'Reporter username',
+        sort: false
+      },
+      videoId: {
+        title: 'Video',
+        type: 'html',
+        sort: false,
+        valuePrepareFunction: this.buildVideoLink
+      },
+      createdAt: {
+        title: 'Created Date',
+        valuePrepareFunction: Utils.dateToHuman
+      }
+    }
+  }
 
   constructor(
     private notificationsService: NotificationsService,
     private videoAbuseService: VideoAbuseService
-  ) {  }
-
-  ngOnInit() {
-    this.getVideoAbuses();
-  }
-
-  buildVideoLink(videoAbuse: VideoAbuse) {
-    return `/videos/${videoAbuse.videoId}`;
-  }
-
-  private getVideoAbuses() {
-    this.videoAbuseService.getVideoAbuses().subscribe(
-      res => this.videoAbuses = res.videoAbuses,
+  ) {
+    this.videoAbusesSource = this.videoAbuseService.getDataSource();
+   }
 
-      err => this.notificationsService.error('Error', err.text)
-    );
+  buildVideoLink(videoId: string) {
+    // TODO: transform to routerLink
+    // https://github.com/akveo/ng2-smart-table/issues/57
+    return `<a href="/videos/${videoId}" title="Go to the video">${videoId}</a>`;
   }
 }