use *ngFor to replace *clrDgItems in user datagird

src/ui_ng/src/app/user/user.component.html

@@ -6,18 +6,18 @@
         <button [class.hide-create]="!canCreateUser" type="submit" class="btn btn-link custom-add-button" (click)="addNewUser()"><clr-icon shape="add"></clr-icon>  {{'USER.ADD_ACTION' | translate}}</button>
       </span>
             <grid-filter class="filter-pos" filterPlaceholder='{{"USER.FILTER_PLACEHOLDER" | translate}}' (filter)="doFilter($event)" [currentValue]="currentTerm"></grid-filter>
-            <span class="refresh-btn" (click)="refreshUser()">
+            <span class="refresh-btn" (click)="refresh()">
         <clr-icon shape="refresh" [hidden]="inProgress" ng-disabled="inProgress"></clr-icon>
         <span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
             </span>
         </div>
         <div>
-            <clr-datagrid [clrDgLoading]="inProgress">
+            <clr-datagrid (clrDgRefresh)="load($event)" [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 *clrDgItems="let user of users" [clrDgItem]="user">
+                <clr-dg-row *ngFor="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>
@@ -28,7 +28,7 @@
                     <clr-dg-cell>{{user.creation_time | date: 'short'}}</clr-dg-cell>
                 </clr-dg-row>
                 <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 #pagination [clrDgPageSize]="15" [(clrDgPage)]="currentPage" [clrDgTotalItems]="totalCount"> {{'USER.ITEMS' | translate}}
                     </clr-dg-pagination>
                 </clr-dg-footer>
             </clr-datagrid>

src/ui_ng/src/app/user/user.component.ts

@@ -14,6 +14,7 @@
 import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
 import 'rxjs/add/operator/toPromise';
 import { Subscription } from 'rxjs/Subscription';
+import { State } from 'Clarity-Angular';
 
 import { UserService } from './user.service';
 import { User } from './user';
@@ -27,6 +28,16 @@ import { MessageHandlerService } from '../shared/message-handler/message-handler
 import { SessionService } from '../shared/session.service';
 import { AppConfigService } from '../app-config.service';
 
+/**
+ * NOTES:
+ *   Pagination for this component is a temporary workaround solution. It will be replaced in future release.
+ * 
+ * @export
+ * @class UserComponent
+ * @implements {OnInit}
+ * @implements {OnDestroy}
+ */
+
 @Component({
   selector: 'harbor-user',
   templateUrl: 'user.component.html',
@@ -44,6 +55,8 @@ export class UserComponent implements OnInit, OnDestroy {
   private deletionSubscription: Subscription;
 
   currentTerm: string;
+  totalCount: number = 0;
+  currentPage: number = 1;
 
   @ViewChild(NewUserModalComponent)
   private newUserDialog: NewUserModalComponent;
@@ -76,7 +89,7 @@ export class UserComponent implements OnInit, OnDestroy {
   }
 
   private isMatchFilterTerm(terms: string, testedItem: string): boolean {
-    return testedItem.indexOf(terms) != -1;
+    return testedItem.toLowerCase().indexOf(terms.toLowerCase()) != -1;
   }
 
   public get canCreateUser(): boolean {
@@ -111,7 +124,6 @@ export class UserComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.refreshUser();
   }
 
   ngOnDestroy(): void {
@@ -125,7 +137,7 @@ export class UserComponent implements OnInit, OnDestroy {
     this.currentTerm = terms;
     this.originalUsers.then(users => {
       if (terms.trim() === "") {
-        this.users = users;
+        this.refreshUser((this.currentPage-1)*15,this.currentPage*15);
       } else {
         this.users = users.filter(user => {
           return this.isMatchFilterTerm(terms, user.username);
@@ -203,7 +215,7 @@ export class UserComponent implements OnInit, OnDestroy {
   }
 
   //Refresh the user list
-  refreshUser(): void {
+  refreshUser(from:number, to: number): void {
     //Start to get
     this.currentTerm = '';
     this.onGoing = true;
@@ -212,7 +224,8 @@ export class UserComponent implements OnInit, OnDestroy {
       .then(users => {
         this.onGoing = false;
 
-        this.users = users;
+        this.totalCount = users.length;
+        this.users = users.slice(from, to);//First page
         return users;
       })
       .catch(error => {
@@ -232,7 +245,28 @@ export class UserComponent implements OnInit, OnDestroy {
   //Add user to the user list
   addUserToList(user: User): void {
     //Currently we can only add it by reloading all
-    this.refreshUser();
+    this.refresh();
+  }
+
+  //Data loading
+  load(state: State): void {
+    if (state && state.page) {
+      if(this.originalUsers){
+        this.originalUsers.then(users => {
+          this.users = users.slice(state.page.from, state.page.to+1);
+        });
+      }else{
+        this.refreshUser(state.page.from, state.page.to+1);
+      }
+    } else {
+      //Refresh
+      this.refresh();
+    }
+  }
+
+  refresh(): void {
+    this.currentPage = 1;//Refresh pagination
+    this.refreshUser(0,15);
   }
 
 }