From ef3cf7454fdb728fa178b008f16e56f236769378 Mon Sep 17 00:00:00 2001
From: Steven Zou <szou@vmware.com>
Date: Wed, 7 Jun 2017 18:23:58 +0800
Subject: [PATCH] enable pagination for user list

---
 src/ui_ng/src/app/user/user.component.html | 9 ++++++---
 src/ui_ng/src/app/user/user.component.ts   | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/ui_ng/src/app/user/user.component.html b/src/ui_ng/src/app/user/user.component.html
index e8ed38f66..6c351efd7 100644
--- a/src/ui_ng/src/app/user/user.component.html
+++ b/src/ui_ng/src/app/user/user.component.html
@@ -12,12 +12,12 @@
             </span>
         </div>
         <div>
-            <clr-datagrid>
+            <clr-datagrid [clrDgLoading]="inProgress">
                 <clr-dg-column>{{'USER.COLUMN_NAME' | translate}}</clr-dg-column>
                 <clr-dg-column>{{'USER.COLUMN_ADMIN' | translate}}</clr-dg-column>
                 <clr-dg-column>{{'USER.COLUMN_EMAIL' | translate}}</clr-dg-column>
                 <clr-dg-column>{{'USER.COLUMN_REG_NAME' | translate}}</clr-dg-column>
-                <clr-dg-row *ngFor="let user of users" [clrDgItem]="user">
+                <clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user">
                     <clr-dg-action-overflow [hidden]="isMySelf(user.user_id)">
                         <button class="action-item" (click)="changeAdminRole(user)">{{adminActions(user)}}</button>
                         <button class="action-item" (click)="deleteUser(user)">{{'USER.DEL_ACTION' | translate}}</button>
@@ -27,7 +27,10 @@
                     <clr-dg-cell>{{user.email}}</clr-dg-cell>
                     <clr-dg-cell>{{user.creation_time | date: 'short'}}</clr-dg-cell>
                 </clr-dg-row>
-                <clr-dg-footer>{{users.length}} {{'USER.ITEMS' | translate}}</clr-dg-footer>
+                <clr-dg-footer>{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
+                    <clr-dg-pagination #pagination [clrDgPageSize]="15" [clrDgTotalItems]="users.length"> {{'USER.ITEMS' | translate}}
+                    </clr-dg-pagination>
+                </clr-dg-footer>
             </clr-datagrid>
         </div>
         <new-user-modal (addNew)="addUserToList($event)"></new-user-modal>
diff --git a/src/ui_ng/src/app/user/user.component.ts b/src/ui_ng/src/app/user/user.component.ts
index cd90df25a..3195d9ff6 100644
--- a/src/ui_ng/src/app/user/user.component.ts
+++ b/src/ui_ng/src/app/user/user.component.ts
@@ -38,7 +38,7 @@ import { AppConfigService } from '../app-config.service';
 export class UserComponent implements OnInit, OnDestroy {
   users: User[] = [];
   originalUsers: Promise<User[]>;
-  private onGoing: boolean = false;
+  private onGoing: boolean = true;
   private adminMenuText: string = "";
   private adminColumn: string = "";
   private deletionSubscription: Subscription;