feat(ui): Add loader to sorted table

ovh · Sep 12, 2018 · e363ffd · e363ffd
1 parent 729ffcf
commit e363ffd
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 28 deletions.
diff --git a/ui/src/app/shared/table/sorted-table.component.ts b/ui/src/app/shared/table/sorted-table.component.ts
@@ -22,6 +22,7 @@ export class SortedTableComponent {
     @Input() columns: Array<Column>;
     @Input() data: any;
     @Output() sortChange = new EventEmitter<any>();
+    @Input() loading: boolean;
 
     sortedColumn: Column;
     sortedColumnDirection: direction;

diff --git a/ui/src/app/shared/table/sorted-table.html b/ui/src/app/shared/table/sorted-table.html
@@ -8,7 +8,15 @@
             </th>
         </tr>
     </thead>
-    <tbody>
+    <tbody *ngIf="loading">
+        <tr>
+            <td class="center" [colSpan]="columns.length">
+                <div class="ui active small inline loader"></div>
+                <div>{{ 'common_loading' | translate }}</div>
+            </td>
+        </tr>
+    </tbody>
+    <tbody *ngIf="!loading">
         <tr *ngFor="let d of data">
             <td *ngFor="let c of columns" class="border">{{ c.selector(d) }}</td>
         </tr>

diff --git a/ui/src/app/shared/table/sorted-table.scss b/ui/src/app/shared/table/sorted-table.scss
@@ -10,3 +10,6 @@ th.descending:after {
     font-family: Icons;
     content: '\f0dd';
 }
+td.center {
+    text-align: center;
+}
diff --git a/ui/src/app/views/admin/hooks-tasks/hooks-tasks.component.ts b/ui/src/app/views/admin/hooks-tasks/hooks-tasks.component.ts
@@ -18,9 +18,8 @@ export class HooksTasksComponent {
         private _hookService: HookService,
         private _translate: TranslateService
     ) {
-        this.loading = true;
         this.columns = [
-            {
+            <Column>{
                 name: this._translate.instant('hook_task_cron'),
                 selector: d => d.config['cron'] && d.config['cron'].value,
             },
@@ -36,47 +35,43 @@ export class HooksTasksComponent {
                 sortable: true,
                 sortKey: 'nb_executions_total'
             },
-            {
+            <Column>{
                 name: this._translate.instant('common_project'),
                 selector: d => d.config['project'] && d.config['project'].value,
             },
-            {
+            <Column>{
                 name: this._translate.instant('hook_task_repo_fullname'),
                 selector: d => d.config['repoFullName'] && d.config['repoFullName'].value,
             },
-            {
+            <Column>{
                 name: this._translate.instant('common_stopped'),
                 selector: d => d.stopped,
             },
-            {
+            <Column>{
                 name: this._translate.instant('common_type'),
                 selector: d => d.type,
             },
-            {
+            <Column>{
                 name: 'UUID',
                 selector: d => d.uuid,
             },
-            {
+            <Column>{
                 name: this._translate.instant('vcs_server'),
                 selector: d => d.config['vcsServer'] && d.config['vcsServer'].value,
             },
-            {
+            <Column>{
                 name: this._translate.instant('common_workflow'),
                 selector: d => d.config['workflow'] && d.config['workflow'].value,
             }
         ];
-        this._hookService.getAdminTasks('')
-            .subscribe(ts => {
-                this.tasks = ts;
-                this.loading = false;
-            });
+        this.getAdminTasks('');
     }
 
-    sortChange(event: string) {
-        this._hookService.getAdminTasks(event)
-            .subscribe(ts => {
-                this.tasks = ts;
-                this.loading = false;
-            });
+    getAdminTasks(sort: string) {
+        this.loading = true;
+        this._hookService.getAdminTasks(sort).subscribe(ts => {
+            this.tasks = ts;
+            this.loading = false;
+        });
     }
 }
diff --git a/ui/src/app/views/admin/hooks-tasks/hooks-tasks.html b/ui/src/app/views/admin/hooks-tasks/hooks-tasks.html
@@ -1,9 +1,3 @@
 <h2>{{ 'hook_tasks_summary' | translate }}</h2>
 
-<div *ngIf="!loading && tasks;then showTasks;else loadTasks"></div>
-<ng-template #showTasks>
-    <app-sorted-table [columns]="columns" [data]="tasks" (sortChange)="sortChange($event)"></app-sorted-table>
-</ng-template>
-<ng-template #loadTasks>
-    <div class="ui text active loader">{{ 'common_loading' | translate }}</div>
-</ng-template>
+<app-sorted-table [columns]="columns" [data]="tasks" (sortChange)="getAdminTasks($event)" [loading]="loading"></app-sorted-table>