Improve admin tables

2 files changed, 56 insertions, 18 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 f1b14e5e3..87717d3dd 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
@@ -8,20 +8,42 @@
   </div>
 </div>
 
+<p-table
+  [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" dataKey="id"
+  sortField="createdAt" (onLazyLoad)="loadLazy($event)"
+>
+  <ng-template pTemplate="header">
+    <tr>
+      <th style="width: 27px"></th>
+      <th style="width: 60px">ID</th>
+      <th style="width: 210px">Type</th>
+      <th style="width: 130px">State</th>
+      <th style="width: 250px" pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 250px">Updated</th>
+    </tr>
+  </ng-template>
 
+  <ng-template pTemplate="body" let-expanded="expanded" let-job>
+    <tr>
+      <td>
+        <span class="expander" [pRowToggler]="job">
+          <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+        </span>
+      </td>
+      <td>{{ job.id }}</td>
+      <td>{{ job.type }}</td>
+      <td>{{ job.state }}</td>
+      <td>{{ job.createdAt }}</td>
+      <td>{{ job.updatedAt }}</td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="rowexpansion" let-job>
+    <tr>
+      <td colspan="6">
+        <pre>{{ job.data }}</pre>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
 
-<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: '60px' }"></p-column>
-  <p-column field="type" header="Type" [style]="{ width: '210px' }"></p-column>
-  <p-column field="state" header="State" [style]="{ width: '130px' }"></p-column>
-  <p-column header="Payload">
-    <ng-template pTemplate="body" let-job="rowData">
-      <pre>{{ job.data }}</pre>
-    </ng-template>
-  </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.ts b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
index 7de6f70d2..80aba9f3a 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
@@ -14,11 +14,13 @@ import { RestExtractor } from '../../../shared/rest/rest-extractor.service'
   styleUrls: [ './jobs-list.component.scss' ]
 })
 export class JobsListComponent extends RestTable implements OnInit {
+  private static JOB_STATE_LOCAL_STORAGE_STATE = 'jobs-list-state'
+
   jobState: JobState = 'inactive'
   jobStates: JobState[] = [ 'active', 'complete', 'failed', 'inactive', 'delayed' ]
   jobs: Job[] = []
-  totalRecords = 0
-  rowsPerPage = 20
+  totalRecords: number
+  rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
   scrollHeight = ''
@@ -32,12 +34,16 @@ export class JobsListComponent extends RestTable implements OnInit {
   }
 
   ngOnInit () {
-    // 270 -> headers + footer...
+    // 380 -> headers + footer...
     this.scrollHeight = (viewportHeight() - 380) + 'px'
+
+    this.loadJobState()
+    this.loadSort()
   }
 
   onJobStateChanged () {
     this.loadData()
+    this.saveJobState()
   }
 
   protected loadData () {
@@ -52,4 +58,14 @@ export class JobsListComponent extends RestTable implements OnInit {
         err => this.notificationsService.error('Error', err.message)
       )
   }
+
+  private loadJobState () {
+    const result = localStorage.getItem(JobsListComponent.JOB_STATE_LOCAL_STORAGE_STATE)
+
+    if (result) this.jobState = result as JobState
+  }
+
+  private saveJobState () {
+    localStorage.setItem(JobsListComponent.JOB_STATE_LOCAL_STORAGE_STATE, this.jobState)
+  }
 }