Client: replace simple tables by ng2 smart table component

6 files changed, 72 insertions, 6 deletions

diff --git a/client/src/app/shared/index.ts b/client/src/app/shared/index.ts
index 7876e6f14..61e8ed523 100644
--- a/client/src/app/shared/index.ts
+++ b/client/src/app/shared/index.ts
@@ -5,3 +5,4 @@ export * from './search';
 export * from './users';
 export * from './video-abuse';
 export * from './shared.module';
+export * from './utils';
diff --git a/client/src/app/shared/rest/index.ts b/client/src/app/shared/rest/index.ts
index 3c9509dc7..3cb123c3b 100644
--- a/client/src/app/shared/rest/index.ts
+++ b/client/src/app/shared/rest/index.ts
@@ -1,3 +1,4 @@
+export * from './rest-data-source';
 export * from './rest-extractor.service';
 export * from './rest-pagination';
 export * from './rest.service';
diff --git a/client/src/app/shared/rest/rest-data-source.ts b/client/src/app/shared/rest/rest-data-source.ts
new file mode 100644
index 000000000..847dd7c56
--- /dev/null
+++ b/client/src/app/shared/rest/rest-data-source.ts
@@ -0,0 +1,51 @@
+import { Http, RequestOptionsArgs, URLSearchParams,  } from '@angular/http';
+
+import { ServerDataSource } from 'ng2-smart-table';
+
+export class RestDataSource extends ServerDataSource {
+ constructor(http: Http, endpoint: string) {
+   const options = {
+     endPoint: endpoint,
+     sortFieldKey: 'sort',
+     dataKey: 'data'
+   }
+
+   super(http, options);
+ }
+
+ protected extractTotalFromResponse(res) {
+    const rawData = res.json();
+    return rawData ? parseInt(rawData.total): 0;
+  }
+
+ protected addSortRequestOptions(requestOptions: RequestOptionsArgs) {
+    let searchParams: URLSearchParams = <URLSearchParams> requestOptions.search;
+
+    if (this.sortConf) {
+      this.sortConf.forEach((fieldConf) => {
+        const sortPrefix = fieldConf.direction === 'desc' ? '-' : '';
+
+        searchParams.set(this.conf.sortFieldKey, sortPrefix + fieldConf.field);
+      });
+    }
+
+    return requestOptions;
+  }
+
+  protected addPagerRequestOptions(requestOptions: RequestOptionsArgs) {
+    let searchParams: URLSearchParams = <URLSearchParams> requestOptions.search;
+
+    if (this.pagingConf && this.pagingConf['page'] && this.pagingConf['perPage']) {
+      const perPage = this.pagingConf['perPage'];
+      const page = this.pagingConf['page'];
+
+      const start = (page - 1) * perPage;
+      const count = perPage;
+
+      searchParams.set('start', start.toString());
+      searchParams.set('count', count.toString());
+    }
+
+    return requestOptions;
+  }
+}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 7b2386d6c..99893c8b1 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -10,6 +10,7 @@ import { ProgressbarModule } from 'ng2-bootstrap/progressbar';
 import { PaginationModule } from 'ng2-bootstrap/pagination';
 import { ModalModule } from 'ng2-bootstrap/modal';
 import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';
+import { Ng2SmartTableModule } from 'ng2-smart-table';
 
 import { AUTH_HTTP_PROVIDERS } from './auth';
 import { RestExtractor, RestService } from './rest';
@@ -29,7 +30,8 @@ import { VideoAbuseService } from './video-abuse';
     PaginationModule.forRoot(),
     ProgressbarModule.forRoot(),
 
-    FileUploadModule
+    FileUploadModule,
+    Ng2SmartTableModule
   ],
 
   declarations: [
@@ -49,6 +51,7 @@ import { VideoAbuseService } from './video-abuse';
     ModalModule,
     PaginationModule,
     ProgressbarModule,
+    Ng2SmartTableModule,
     BytesPipe,
 
     SearchComponent
diff --git a/client/src/app/shared/utils.ts b/client/src/app/shared/utils.ts
new file mode 100644
index 000000000..1dd6f96f0
--- /dev/null
+++ b/client/src/app/shared/utils.ts
@@ -0,0 +1,12 @@
+import { DatePipe } from '@angular/common';
+
+export class Utils {
+
+  static dateToHuman(date: String) {
+    return new DatePipe('en').transform(date, 'medium')
+  }
+
+  static getRowDeleteButton() {
+    return '<span class="glyphicon glyphicon-remove glyphicon-black"></span>';
+  }
+}
diff --git a/client/src/app/shared/video-abuse/video-abuse.service.ts b/client/src/app/shared/video-abuse/video-abuse.service.ts
index 2750a41c7..f23c36f05 100644
--- a/client/src/app/shared/video-abuse/video-abuse.service.ts
+++ b/client/src/app/shared/video-abuse/video-abuse.service.ts
@@ -6,7 +6,7 @@ import 'rxjs/add/operator/map';
 
 import { AuthService } from '../core';
 import { AuthHttp } from '../auth';
-import { RestExtractor, ResultList } from '../rest';
+import { RestDataSource, RestExtractor, ResultList } from '../rest';
 import { VideoAbuse } from './video-abuse.model';
 
 @Injectable()
@@ -18,10 +18,8 @@ export class VideoAbuseService {
     private restExtractor: RestExtractor
   ) {}
 
-  getVideoAbuses() {
-    return this.authHttp.get(VideoAbuseService.BASE_VIDEO_ABUSE_URL + 'abuse')
-                        .map(this.restExtractor.extractDataList)
-                        .map(this.extractVideoAbuses)
+  getDataSource() {
+    return new RestDataSource(this.authHttp, VideoAbuseService.BASE_VIDEO_ABUSE_URL + 'abuse');
   }
 
   reportVideo(id: string, reason: string) {