Design admin data tables

6 files changed, 45 insertions, 51 deletions

diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
index a90267172..29103c06b 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
@@ -1,18 +1,20 @@
-<div class="row">
-  <div class="content-padding">
-    <h3>Jobs list</h3>
-
-    <p-dataTable
-        [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-        sortField="createdAt" (onLazyLoad)="loadLazy($event)"
-    >
-      <p-column field="id" header="ID"></p-column>
-      <p-column field="category" header="Category"></p-column>
-      <p-column field="handlerName" header="Handler name"></p-column>
-      <p-column field="handlerInputData" header="Input data"></p-column>
-      <p-column field="state" header="State"></p-column>
-      <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
-      <p-column field="updatedAt" header="Updated date"></p-column>
-    </p-dataTable>
-  </div>
+<div class="admin-sub-header">
+  <div class="admin-sub-title">Jobs list</div>
 </div>
+
+<p-dataTable
+    [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+    sortField="createdAt" (onLazyLoad)="loadLazy($event)" [scrollable]="true" [virtualScroll]="true" [scrollHeight]="scrollHeight"
+>
+  <p-column field="id" header="ID" [style]="{ width: '40px' }"></p-column>
+  <p-column field="category" header="Category" [style]="{ width: '100px' }"></p-column>
+  <p-column field="handlerName" header="Handler name" [style]="{ width: '150px' }"></p-column>
+  <p-column header="Input data">
+    <ng-template pTemplate="body" let-job="rowData">
+      <pre>{{ job.handlerInputData }}</pre>
+    </ng-template>
+  </p-column>
+  <p-column field="state" header="State" [style]="{ width: '100px' }"></p-column>
+  <p-column field="createdAt" header="Created date" [sortable]="true" [style]="{ width: '250px' }"></p-column>
+  <p-column field="updatedAt" header="Updated date" [style]="{ width: '250px' }"></p-column>
+</p-dataTable>
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss
new file mode 100644
index 000000000..9dde13216
--- /dev/null
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.scss
@@ -0,0 +1,3 @@
+pre {
+  font-size: 13px;
+}
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
index 88fe259fb..f93847f29 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
@@ -1,22 +1,24 @@
-import { Component } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import { NotificationsService } from 'angular2-notifications'
 import { SortMeta } from 'primeng/primeng'
 import { Job } from '../../../../../../shared/index'
 import { RestPagination, RestTable } from '../../../shared'
+import { viewportHeight } from '../../../shared/misc/utils'
 import { JobService } from '../shared'
 import { RestExtractor } from '../../../shared/rest/rest-extractor.service'
 
 @Component({
   selector: 'my-jobs-list',
   templateUrl: './jobs-list.component.html',
-  styleUrls: [ ]
+  styleUrls: [ './jobs-list.component.scss' ]
 })
-export class JobsListComponent extends RestTable {
+export class JobsListComponent extends RestTable implements OnInit {
   jobs: Job[] = []
   totalRecords = 0
-  rowsPerPage = 10
+  rowsPerPage = 20
   sort: SortMeta = { field: 'createdAt', order: 1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+  scrollHeight = ''
 
   constructor (
     private notificationsService: NotificationsService,
@@ -26,10 +28,14 @@ export class JobsListComponent extends RestTable {
     super()
   }
 
+  ngOnInit () {
+    // 270 -> headers + footer...
+    this.scrollHeight = (viewportHeight() - 380) + 'px'
+  }
+
   protected loadData () {
     this.jobsService
       .getJobs(this.pagination, this.sort)
-      .map(res => this.restExtractor.applyToResultListData(res, this.formatJob.bind(this)))
       .subscribe(
         resultList => {
           this.jobs = resultList.data
@@ -39,12 +45,4 @@ export class JobsListComponent extends RestTable {
         err => this.notificationsService.error('Error', err.message)
       )
   }
-
-  private formatJob (job: Job) {
-    const handlerInputData = JSON.stringify(job.handlerInputData)
-
-    return Object.assign(job, {
-      handlerInputData
-    })
-  }
 }
diff --git a/client/src/app/+admin/jobs/shared/job.service.ts b/client/src/app/+admin/jobs/shared/job.service.ts
index 49f1ab6f5..0cfbdbbea 100644
--- a/client/src/app/+admin/jobs/shared/job.service.ts
+++ b/client/src/app/+admin/jobs/shared/job.service.ts
@@ -25,6 +25,13 @@ export class JobService {
 
     return this.authHttp.get<ResultList<Job>>(JobService.BASE_JOB_URL, { params })
       .map(res => this.restExtractor.convertResultListDateToHuman(res))
+      .map(res => this.restExtractor.applyToResultListData(res, this.prettyPrintData))
       .catch(err => this.restExtractor.handleError(err))
   }
+
+  private prettyPrintData (obj: Job) {
+    const handlerInputData = JSON.stringify(obj.handlerInputData, null, 2)
+
+    return Object.assign(obj, { handlerInputData })
+  }
 }
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 a100ddfaa..5a19edfde 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,4 +1,4 @@
-<div class="sub-header">
+<div class="admin-sub-header">
   <div class="admin-sub-title">Users list</div>
 
   <a class="add-button" routerLink="/admin/users/add">
@@ -17,16 +17,10 @@
   <p-column field="videoQuota" header="Video quota"></p-column>
   <p-column field="roleLabel" header="Role"></p-column>
   <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
-  <p-column header="Edit" styleClass="action-cell">
-    <ng-template pTemplate="body" let-user="rowData">
-      <a [routerLink]="getRouterUserEditLink(user)" title="Edit this user">
-        <span class="glyphicon glyphicon-pencil glyphicon-black"></span>
-      </a>
-    </ng-template>
-  </p-column>
-  <p-column header="Delete" styleClass="action-cell">
-    <ng-template pTemplate="body" let-user="rowData">
-      <span (click)="removeUser(user)" class="glyphicon glyphicon-remove glyphicon-black" title="Remove this user"></span>
+  <p-column styleClass="action-cell">
+      <ng-template pTemplate="body" let-user="rowData">
+      <my-edit-button [routerLink]="getRouterUserEditLink(user)"></my-edit-button>
+      <my-delete-button (click)="removeUser(user)"></my-delete-button>
     </ng-template>
   </p-column>
 </p-dataTable>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss
index 54ecb61b4..8b22f67ff 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -1,12 +1,3 @@
-.sub-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 30px;
-
-  .admin-sub-title {
-    flex-grow: 1;
-  }
-
   .add-button {
     @include peertube-button-link;
     @include orange-button;
@@ -18,4 +9,3 @@
       background-image: url('../../../../assets/images/admin/add.svg');
     }
   }
-}