diff --git a/src/ui_ng/src/app/project/create-project/create-project.component.html b/src/ui_ng/src/app/project/create-project/create-project.component.html
index 9d93180d1..a067a3211 100644
--- a/src/ui_ng/src/app/project/create-project/create-project.component.html
+++ b/src/ui_ng/src/app/project/create-project/create-project.component.html
@@ -1,6 +1,6 @@
 <clr-modal [(clrModalOpen)]="createProjectOpened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
     <h3 class="modal-title">{{'PROJECT.NEW_PROJECT' | translate}}</h3>
-    <inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert>
+    <inline-alert class="modal-title"></inline-alert>
     <div class="modal-body" style="height: 16.8em; overflow-y: hidden;">
         <form #projectForm="ngForm">
             <section class="form-block">
diff --git a/src/ui_ng/src/app/project/create-project/create-project.component.ts b/src/ui_ng/src/app/project/create-project/create-project.component.ts
index a3ff35664..6ffb44a88 100644
--- a/src/ui_ng/src/app/project/create-project/create-project.component.ts
+++ b/src/ui_ng/src/app/project/create-project/create-project.component.ts
@@ -17,35 +17,34 @@ import {
   Output,
   ViewChild,
   AfterViewChecked,
-  HostBinding,
   OnInit,
   OnDestroy
-} from '@angular/core';
-import { Response } from '@angular/http';
-import { NgForm } from '@angular/forms';
+} from "@angular/core";
+import { Response } from "@angular/http";
+import { NgForm } from "@angular/forms";
 
-import { Project } from '../project';
-import { ProjectService } from '../project.service';
+import { Project } from "../project";
+import { ProjectService } from "../project.service";
 
-import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
-import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component';
+import { MessageHandlerService } from "../../shared/message-handler/message-handler.service";
+import { InlineAlertComponent } from "../../shared/inline-alert/inline-alert.component";
 
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateService } from "@ngx-translate/core";
 
-import { Subject } from 'rxjs/Subject';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
+import { Subject } from "rxjs/Subject";
+import "rxjs/add/operator/debounceTime";
+import "rxjs/add/operator/distinctUntilChanged";
 
 @Component({
-  selector: 'create-project',
-  templateUrl: 'create-project.component.html',
-  styleUrls: ['create-project.css']
+  selector: "create-project",
+  templateUrl: "create-project.component.html",
+  styleUrls: ["create-project.css"]
 })
 export class CreateProjectComponent implements AfterViewChecked, OnInit, OnDestroy {
 
   projectForm: NgForm;
 
-  @ViewChild('projectForm')
+  @ViewChild("projectForm")
   currentForm: NgForm;
 
   project: Project = new Project();
@@ -54,14 +53,14 @@ export class CreateProjectComponent implements AfterViewChecked, OnInit, OnDestr
   createProjectOpened: boolean;
 
   hasChanged: boolean;
-  isSubmitOnGoing:boolean=false;
+  isSubmitOnGoing = false;
 
-  staticBackdrop: boolean = true;
-  closable: boolean = false;
+  staticBackdrop = true;
+  closable = false;
 
-  isNameValid: boolean = true;
-  nameTooltipText: string = 'PROJECT.NAME_TOOLTIP';
-  checkOnGoing: boolean = false;
+  isNameValid = true;
+  nameTooltipText = "PROJECT.NAME_TOOLTIP";
+  checkOnGoing = false;
   proNameChecker: Subject<string> = new Subject<string>();
 
   @Output() create = new EventEmitter<boolean>();
@@ -71,7 +70,6 @@ export class CreateProjectComponent implements AfterViewChecked, OnInit, OnDestr
   constructor(private projectService: ProjectService,
     private translateService: TranslateService,
     private messageHandlerService: MessageHandlerService) { }
-  
 
   ngOnInit(): void {
     this.proNameChecker
@@ -82,20 +80,20 @@ export class CreateProjectComponent implements AfterViewChecked, OnInit, OnDestr
         if (cont && this.hasChanged) {
           this.isNameValid = cont.valid;
           if (this.isNameValid) {
-            //Check exiting from backend
+            // Check exiting from backend
             this.projectService
               .checkProjectExists(cont.value).toPromise()
               .then(() => {
-                //Project existing
+                // Project existing
                 this.isNameValid = false;
-                this.nameTooltipText = 'PROJECT.NAME_ALREADY_EXISTS';
+                this.nameTooltipText = "PROJECT.NAME_ALREADY_EXISTS";
                 this.checkOnGoing = false;
               })
               .catch(error => {
                 this.checkOnGoing = false;
               });
           } else {
-            this.nameTooltipText = 'PROJECT.NAME_TOOLTIP';
+            this.nameTooltipText = "PROJECT.NAME_TOOLTIP";
           }
         }
       });
@@ -106,35 +104,35 @@ export class CreateProjectComponent implements AfterViewChecked, OnInit, OnDestr
   }
 
   onSubmit() {
-    if (this.isSubmitOnGoing){
+    if (this.isSubmitOnGoing) {
       return ;
     }
 
-    this.isSubmitOnGoing=true;
+    this.isSubmitOnGoing = true;
     this.projectService
       .createProject(this.project.name, this.project.metadata)
       .subscribe(
       status => {
-        this.isSubmitOnGoing=false;
+        this.isSubmitOnGoing = false;
 
         this.create.emit(true);
-        this.messageHandlerService.showSuccess('PROJECT.CREATED_SUCCESS');
+        this.messageHandlerService.showSuccess("PROJECT.CREATED_SUCCESS");
         this.createProjectOpened = false;
       },
       error => {
-        this.isSubmitOnGoing=false;
+        this.isSubmitOnGoing = false;
 
         let errorMessage: string;
         if (error instanceof Response) {
           switch (error.status) {
             case 409:
-              this.translateService.get('PROJECT.NAME_ALREADY_EXISTS').subscribe(res => errorMessage = res);
+              this.translateService.get("PROJECT.NAME_ALREADY_EXISTS").subscribe(res => errorMessage = res);
               break;
             case 400:
-              this.translateService.get('PROJECT.NAME_IS_ILLEGAL').subscribe(res => errorMessage = res);
+              this.translateService.get("PROJECT.NAME_IS_ILLEGAL").subscribe(res => errorMessage = res);
               break;
             default:
-              this.translateService.get('PROJECT.UNKNOWN_ERROR').subscribe(res => errorMessage = res);
+              this.translateService.get("PROJECT.UNKNOWN_ERROR").subscribe(res => errorMessage = res);
           }
           if (this.messageHandlerService.isAppLevel(error)) {
             this.messageHandlerService.handleError(error);
@@ -147,13 +145,8 @@ export class CreateProjectComponent implements AfterViewChecked, OnInit, OnDestr
   }
 
   onCancel() {
-    if (this.hasChanged) {
-      this.inlineAlert.showInlineConfirmation({ message: 'ALERT.FORM_CHANGE_CONFIRMATION' });
-    } else {
       this.createProjectOpened = false;
       this.projectForm.reset();
-    }
-
   }
 
   ngAfterViewChecked(): void {
@@ -181,21 +174,15 @@ export class CreateProjectComponent implements AfterViewChecked, OnInit, OnDestr
     this.createProjectOpened = true;
   }
 
-  confirmCancel(event: boolean): void {
-    this.createProjectOpened = false;
-    this.inlineAlert.close();
-    this.projectForm.reset();
-  }
-
   public get isValid(): boolean {
     return this.currentForm &&
     this.currentForm.valid &&
-    !this.isSubmitOnGoing&&
+    !this.isSubmitOnGoing &&
     this.isNameValid &&
     !this.checkOnGoing;
   }
 
-  //Handle the form validation
+  // Handle the form validation
   handleValidation(): void {
     let cont = this.currentForm.controls["create_project_name"];
     if (cont) {
diff --git a/src/ui_ng/src/app/project/list-project/list-project.component.ts b/src/ui_ng/src/app/project/list-project/list-project.component.ts
index 74f8c6cf6..7fc109958 100644
--- a/src/ui_ng/src/app/project/list-project/list-project.component.ts
+++ b/src/ui_ng/src/app/project/list-project/list-project.component.ts
@@ -14,42 +14,41 @@
 import {
     Component,
     Output,
-    Input,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     OnDestroy, EventEmitter
-} from '@angular/core';
-import { Router, NavigationExtras } from '@angular/router';
-import { Project } from '../project';
-import { ProjectService } from '../project.service';
+} from "@angular/core";
+import { Router } from "@angular/router";
+import { Project } from "../project";
+import { ProjectService } from "../project.service";
 
-import { SessionService } from '../../shared/session.service';
-import { SearchTriggerService } from '../../base/global-search/search-trigger.service';
-import { ProjectTypes, RoleInfo } from '../../shared/shared.const';
-import { CustomComparator, doFiltering, doSorting, calculatePage } from '../../shared/shared.utils';
+import { SessionService } from "../../shared/session.service";
+import { SearchTriggerService } from "../../base/global-search/search-trigger.service";
+import { RoleInfo } from "../../shared/shared.const";
+import { CustomComparator, doFiltering, doSorting, calculatePage } from "../../shared/shared.utils";
 
-import { Comparator, State } from 'clarity-angular';
-import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
-import { StatisticHandler } from '../../shared/statictics/statistic-handler.service';
-import { Subscription } from 'rxjs/Subscription';
-import { ConfirmationDialogService } from '../../shared/confirmation-dialog/confirmation-dialog.service';
-import { ConfirmationMessage } from '../../shared/confirmation-dialog/confirmation-message';
-import { ConfirmationTargets, ConfirmationState, ConfirmationButtons } from '../../shared/shared.const';
+import { Comparator, State } from "clarity-angular";
+import { MessageHandlerService } from "../../shared/message-handler/message-handler.service";
+import { StatisticHandler } from "../../shared/statictics/statistic-handler.service";
+import { Subscription } from "rxjs/Subscription";
+import { ConfirmationDialogService } from "../../shared/confirmation-dialog/confirmation-dialog.service";
+import { ConfirmationMessage } from "../../shared/confirmation-dialog/confirmation-message";
+import { ConfirmationTargets, ConfirmationState, ConfirmationButtons } from "../../shared/shared.const";
 import {TranslateService} from "@ngx-translate/core";
 import {BatchInfo, BathInfoChanges} from "../../shared/confirmation-dialog/confirmation-batch-message";
 import {Observable} from "rxjs/Observable";
 import {AppConfigService} from "../../app-config.service";
 
 @Component({
-    selector: 'list-project',
-    templateUrl: 'list-project.component.html',
+    selector: "list-project",
+    templateUrl: "list-project.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ListProjectComponent implements OnDestroy {
-    loading: boolean = true;
+    loading = true;
     projects: Project[] = [];
-    filteredType: number = 0;//All projects
-    searchKeyword: string = "";
+    filteredType = 0; // All projects
+    searchKeyword = "";
     selectedRow: Project[]  = [];
     batchDelectionInfos: BatchInfo[] = [];
 
@@ -60,9 +59,9 @@ export class ListProjectComponent implements OnDestroy {
     timeComparator: Comparator<Project> = new CustomComparator<Project>("creation_time", "date");
     accessLevelComparator: Comparator<Project> = new CustomComparator<Project>("public", "number");
     roleComparator: Comparator<Project> = new CustomComparator<Project>("current_user_role_id", "number");
-    currentPage: number = 1;
-    totalCount: number = 0;
-    pageSize: number = 15;
+    currentPage = 1;
+    totalCount = 0;
+    pageSize = 15;
     currentState: State;
     subscription: Subscription;
 
@@ -97,9 +96,9 @@ export class ListProjectComponent implements OnDestroy {
         let account = this.session.getCurrentUser();
         if (account) {
             switch (this.appConfigService.getConfig().project_creation_restriction) {
-                case 'adminonly':
+                case "adminonly":
                     return (account.has_admin_role === 1);
-                case 'everyone':
+                case "everyone":
                     return true;
             }
         }
@@ -131,7 +130,7 @@ export class ListProjectComponent implements OnDestroy {
     goToLink(proId: number): void {
         this.searchTrigger.closeSearch(true);
 
-        let linkUrl = ['harbor', 'projects', proId, 'repositories'];
+        let linkUrl = ["harbor", "projects", proId, "repositories"];
         this.router.navigate(linkUrl);
     }
 
@@ -143,7 +142,7 @@ export class ListProjectComponent implements OnDestroy {
     clrLoad(state: State) {
         this.selectedRow = [];
 
-        //Keep state for future filtering and sorting
+        // Keep state for future filtering and sorting
         this.currentState = state;
 
         let pageNumber: number = calculatePage(state);
@@ -157,7 +156,7 @@ export class ListProjectComponent implements OnDestroy {
         }
         this.proService.listProjects(this.searchKeyword, passInFilteredType, pageNumber, this.pageSize).toPromise()
             .then(response => {
-                //Get total count
+                // Get total count
                 if (response.headers) {
                     let xHeader: string = response.headers.get("X-Total-Count");
                     if (xHeader) {
@@ -166,7 +165,7 @@ export class ListProjectComponent implements OnDestroy {
                 }
 
                 this.projects = response.json() as Project[];
-                //Do customising filtering and sorting
+                // Do customising filtering and sorting
                 this.projects = doFiltering<Project>(this.projects, state);
                 this.projects = doSorting<Project>(this.projects, state);
 
@@ -177,7 +176,7 @@ export class ListProjectComponent implements OnDestroy {
                 this.msgHandler.handleError(error);
             });
 
-        //Force refresh view
+        // Force refresh view
         let hnd = setInterval(() => this.ref.markForCheck(), 100);
         setTimeout(() => clearInterval(hnd), 5000);
     }
@@ -190,12 +189,12 @@ export class ListProjectComponent implements OnDestroy {
 
     toggleProject(p: Project) {
         if (p) {
-            p.metadata.public === 'true' ? p.metadata.public = 'false' : p.metadata.public = 'true';
+            p.metadata.public === "true" ? p.metadata.public = "false" : p.metadata.public = "true";
             this.proService
                 .toggleProjectPublic(p.project_id, p.metadata.public)
                 .subscribe(
                 response => {
-                    this.msgHandler.showSuccess('PROJECT.TOGGLED_SUCCESS');
+                    this.msgHandler.showSuccess("PROJECT.TOGGLED_SUCCESS");
                     let pp: Project = this.projects.find((item: Project) => item.project_id === p.project_id);
                     if (pp) {
                         pp.metadata.public = p.metadata.public;
@@ -205,7 +204,7 @@ export class ListProjectComponent implements OnDestroy {
                 error => this.msgHandler.handleError(error)
                 );
 
-            //Force refresh view
+            // Force refresh view
             let hnd = setInterval(() => this.ref.markForCheck(), 100);
             setTimeout(() => clearInterval(hnd), 2000);
         }
@@ -222,21 +221,13 @@ export class ListProjectComponent implements OnDestroy {
                 this.batchDelectionInfos.push(initBatchMessage);
             });
             this.deletionDialogService.addBatchInfoList(this.batchDelectionInfos);
-            let deletionMessage = new ConfirmationMessage(
-                'PROJECT.DELETION_TITLE',
-                'PROJECT.DELETION_SUMMARY',
-                nameArr.join(','),
-                p,
-                ConfirmationTargets.PROJECT,
-                ConfirmationButtons.DELETE_CANCEL
-            );
-            this.deletionDialogService.openComfirmDialog(deletionMessage);
+            this.delProjects(p);
         }
     }
-    delProjects(datas: Project[]) {
+    delProjects(projects: Project[]) {
         let observableLists: any[] = [];
-        if (datas && datas.length) {
-            datas.forEach(data => {
+        if (projects && projects.length) {
+            projects.forEach(data => {
                 observableLists.push(this.delOperate(data.project_id, data.name));
             });
             Promise.all(observableLists).then(item => {
@@ -252,23 +243,23 @@ export class ListProjectComponent implements OnDestroy {
         }
     }
 
-    delOperate(id: number, name:  string) {
+    delOperate(id: number, name: string) {
         let findedList = this.batchDelectionInfos.find(list => list.name === name);
         return this.proService.deleteProject(id)
             .then(
                 () => {
-                    this.translate.get('BATCH.DELETED_SUCCESS').subscribe(res => {
+                    this.translate.get("BATCH.DELETED_SUCCESS").subscribe(res => {
                         findedList = BathInfoChanges(findedList, res);
                     });
                 },
                 error => {
                     if (error && error.status === 412) {
-                        Observable.forkJoin(this.translate.get('BATCH.DELETED_FAILURE'),
-                            this.translate.get('PROJECT.FAILED_TO_DELETE_PROJECT')).subscribe(res => {
+                        Observable.forkJoin(this.translate.get("BATCH.DELETED_FAILURE"),
+                            this.translate.get("PROJECT.FAILED_TO_DELETE_PROJECT")).subscribe(res => {
                             findedList = BathInfoChanges(findedList, res[0], false, true, res[1]);
                         });
                     } else {
-                        this.translate.get('BATCH.DELETED_FAILURE').subscribe(res => {
+                        this.translate.get("BATCH.DELETED_FAILURE").subscribe(res => {
                             findedList = BathInfoChanges(findedList, res, false, true);
                         });
                     }
@@ -318,7 +309,7 @@ export class ListProjectComponent implements OnDestroy {
         let targetPageNumber: number = this.currentPage;
 
         if (this.currentPage > totalPages) {
-            targetPageNumber = totalPages;//Should == currentPage -1
+            targetPageNumber = totalPages; // Should == currentPage -1
         }
 
         let st: State = this.currentState;
diff --git a/src/ui_ng/src/app/project/member/member.component.html b/src/ui_ng/src/app/project/member/member.component.html
index ddd9fcf30..714d8f36d 100644
--- a/src/ui_ng/src/app/project/member/member.component.html
+++ b/src/ui_ng/src/app/project/member/member.component.html
@@ -12,23 +12,31 @@
         </div>
     </div>
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+        <clr-dg-action-bar>
+            <button class="btn btn-sm btn-secondary" (click)="openAddMemberModal()" [disabled]="!hasProjectAdminRole">
+                <span><clr-icon shape="plus"></clr-icon>{{'MEMBER.NEW_MEMBER' | translate }}</span>
+            </button>
+            <clr-dropdown [clrCloseMenuOnItemClick]="false" class="btn btn-sm btn-secondary" clrDropdownTrigger>
+                <span>{{'MEMBER.REMOVE' | translate}}<clr-icon shape="caret down"></clr-icon></span>
+                <clr-dropdown-menu *clrIfOpen>
+                    <button class="btn btn-sm btn-secondary" (click)="changeRole(selectedRow, 1)" [disabled]="!(selectedRow.length && hasProjectAdminRole)">{{'MEMBER.PROJECT_ADMIN' | translate}}</button>
+                    <button class="btn btn-sm btn-secondary" (click)="changeRole(selectedRow, 2)" [disabled]="!(selectedRow.length && hasProjectAdminRole)">{{'MEMBER.DEVELOPER' | translate}}</button>
+                    <button class="btn btn-sm btn-secondary" (click)="changeRole(selectedRow, 3)" [disabled]="!(selectedRow.length && hasProjectAdminRole)">{{'MEMBER.GUEST' | translate}}</button>
+                </clr-dropdown-menu>
+            </clr-dropdown>
+            <button class="btn btn-sm btn-secondary" (click)="deleteMembers(selectedRow)" [disabled]="!(selectedRow.length && hasProjectAdminRole)">
+                <span>{{'MEMBER.REMOVE' | translate}}</span>
+            </button>
+        </clr-dg-action-bar>
         <clr-datagrid [(clrDgSelected)]="selectedRow" (clrDgSelectedChange)="SelectedChange()">
-            <clr-dg-action-bar>
-                <div class="btn-group">
-                    <clr-button-group [clrMenuPosition]="'bottom-right'" >
-                        <clr-button class="btn btn-sm btn-secondary" (click)="openAddMemberModal()" [disabled]="!hasProjectAdminRole">{{'MEMBER.NEW_MEMBER' | translate }}</clr-button>
-                        <clr-button class="btn btn-sm btn-secondary" (click)="deleteMembers(selectedRow)" [disabled]="!(selectedRow.length && hasProjectAdminRole)">{{'MEMBER.DELETE' | translate}}</clr-button>
-                        <clr-button class="btn btn-sm btn-secondary" [clrInMenu]="true" (click)="changeRole(selectedRow, 1)" [disabled]="!(selectedRow.length && hasProjectAdminRole)">{{'MEMBER.PROJECT_ADMIN' | translate}}</clr-button>
-                        <clr-button class="btn btn-sm btn-secondary" [clrInMenu]="true" (click)="changeRole(selectedRow, 2)" [disabled]="!(selectedRow.length && hasProjectAdminRole)">{{'MEMBER.DEVELOPER' | translate}}</clr-button>
-                        <clr-button class="btn btn-sm btn-secondary" [clrInMenu]="true" (click)="changeRole(selectedRow, 3)" [disabled]="!(selectedRow.length && hasProjectAdminRole)">{{'MEMBER.GUEST' | translate}}</clr-button>
-                    </clr-button-group>
-                </div>
-            </clr-dg-action-bar>
             <clr-dg-column>{{'MEMBER.NAME' | translate}}</clr-dg-column>
             <clr-dg-column>{{'MEMBER.ROLE' | translate}}</clr-dg-column>
             <clr-dg-row *ngFor="let m of members"  [clrDgItem]="m">
                 <clr-dg-cell>{{m.username}}</clr-dg-cell>
-                <clr-dg-cell>{{roleInfo[m.role_id] | translate}}</clr-dg-cell>
+                <clr-dg-cell>
+                    <span class="spinner spinner-inline"> Loading... </span>
+                    <span *ngIf="!ChangeRoleOngoing(m.username)">{{roleInfo[m.role_id] | translate}}</span>
+                </clr-dg-cell>
             </clr-dg-row>
             <clr-dg-footer>
                 <span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'MEMBER.OF' | translate}} </span>
diff --git a/src/ui_ng/src/app/project/member/member.component.ts b/src/ui_ng/src/app/project/member/member.component.ts
index 01cba055a..79f56272b 100644
--- a/src/ui_ng/src/app/project/member/member.component.ts
+++ b/src/ui_ng/src/app/project/member/member.component.ts
@@ -11,39 +11,37 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit, ViewChild, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { ActivatedRoute, Params, Router } from '@angular/router';
-import { Response } from '@angular/http';
+import { Component, OnInit, ViewChild, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
 
-import { SessionUser } from '../../shared/session-user';
-import { Member } from './member';
-import { MemberService } from './member.service';
+import { SessionUser } from "../../shared/session-user";
+import { Member } from "./member";
+import { MemberService } from "./member.service";
 
-import { AddMemberComponent } from './add-member/add-member.component';
+import { AddMemberComponent } from "./add-member/add-member.component";
 
-import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
-import { ConfirmationTargets, ConfirmationState, ConfirmationButtons } from '../../shared/shared.const';
+import { MessageHandlerService } from "../../shared/message-handler/message-handler.service";
+import { ConfirmationTargets, ConfirmationState, ConfirmationButtons } from "../../shared/shared.const";
 
-import { ConfirmationDialogService } from '../../shared/confirmation-dialog/confirmation-dialog.service';
-import { ConfirmationMessage } from '../../shared/confirmation-dialog/confirmation-message';
-import { SessionService } from '../../shared/session.service';
+import { ConfirmationDialogService } from "../../shared/confirmation-dialog/confirmation-dialog.service";
+import { ConfirmationMessage } from "../../shared/confirmation-dialog/confirmation-message";
+import { SessionService } from "../../shared/session.service";
 
-import { RoleInfo } from '../../shared/shared.const';
+import { RoleInfo } from "../../shared/shared.const";
 
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/observable/throw';
-import { Subscription } from 'rxjs/Subscription';
+import "rxjs/add/operator/switchMap";
+import "rxjs/add/operator/catch";
+import "rxjs/add/operator/map";
+import "rxjs/add/observable/throw";
+import { Subscription } from "rxjs/Subscription";
 
-import { Project } from '../../project/project';
+import { Project } from "../../project/project";
 import {TranslateService} from "@ngx-translate/core";
 import {BatchInfo, BathInfoChanges} from "../../shared/confirmation-dialog/confirmation-batch-message";
 
 @Component({
-  templateUrl: 'member.component.html',
-  styleUrls: ['./member.component.css'],
+  templateUrl: "member.component.html",
+  styleUrls: ["./member.component.css"],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MemberComponent implements OnInit, OnDestroy {
@@ -60,22 +58,22 @@ export class MemberComponent implements OnInit, OnDestroy {
   hasProjectAdminRole: boolean;
 
   searchMember: string;
-  selectedRow: Member[] = []
+  selectedRow: Member[] = [];
   roleNum: number;
-  isDelete: boolean =false;
-  isChangeRole: boolean =false;
-  batchDelectionInfos: BatchInfo[] = [];
+  isDelete = false;
+  isChangeRole = false;
+  batchActionInfos: BatchInfo[] = [];
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private memberService: MemberService, 
+    private memberService: MemberService,
     private translate: TranslateService,
     private messageHandlerService: MessageHandlerService,
     private OperateDialogService: ConfirmationDialogService,
     private session: SessionService,
     private ref: ChangeDetectorRef) {
-    
+
     this.delSub = OperateDialogService.confirmationConfirm$.subscribe(message => {
       if (message &&
         message.state === ConfirmationState.CONFIRMED &&
@@ -88,8 +86,8 @@ export class MemberComponent implements OnInit, OnDestroy {
         }
       }
     });
-    let hnd = setInterval(()=>ref.markForCheck(), 100);
-    setTimeout(()=>clearInterval(hnd), 1000);
+    let hnd = setInterval(() => ref.markForCheck(), 100);
+    setTimeout(() => clearInterval(hnd), 1000);
   }
 
   retrieve(projectId: number, username: string) {
@@ -99,11 +97,11 @@ export class MemberComponent implements OnInit, OnDestroy {
       .subscribe(
       response => {
         this.members = response;
-        let hnd = setInterval(()=>this.ref.markForCheck(), 100);
-        setTimeout(()=>clearInterval(hnd), 1000);
+        let hnd = setInterval(() => this.ref.markForCheck(), 100);
+        setTimeout(() => clearInterval(hnd), 1000);
       },
       error => {
-        this.router.navigate(['/harbor', 'projects']);
+        this.router.navigate(["/harbor", "projects"]);
         this.messageHandlerService.handleError(error);
       });
   }
@@ -115,15 +113,15 @@ export class MemberComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    //Get projectId from route params snapshot.          
-    this.projectId = +this.route.snapshot.parent.params['id'];
-    //Get current user from registered resolver.
+    // Get projectId from route params snapshot.
+    this.projectId = +this.route.snapshot.parent.params["id"];
+    // Get current user from registered resolver.
     this.currentUser = this.session.getCurrentUser();
     let resolverData = this.route.snapshot.parent.data;
-    if(resolverData) {
-      this.hasProjectAdminRole = (<Project>resolverData['projectResolver']).has_project_admin_role;
+    if (resolverData) {
+      this.hasProjectAdminRole = (<Project>resolverData["projectResolver"]).has_project_admin_role;
     }
-    this.retrieve(this.projectId, '');
+    this.retrieve(this.projectId, "");
   }
 
   openAddMemberModal() {
@@ -131,8 +129,8 @@ export class MemberComponent implements OnInit, OnDestroy {
   }
 
   addedMember($event: any) {
-    this.searchMember = '';
-    this.retrieve(this.projectId, '');
+    this.searchMember = "";
+    this.retrieve(this.projectId, "");
   }
 
   changeRole(m: Member[], roleId: number) {
@@ -141,24 +139,16 @@ export class MemberComponent implements OnInit, OnDestroy {
       this.isChangeRole = true;
       this.roleNum = roleId;
       let nameArr: string[] = [];
-      this.batchDelectionInfos = [];
+      this.batchActionInfos = [];
       m.forEach(data => {
         nameArr.push(data.username);
         let initBatchMessage = new BatchInfo();
         initBatchMessage.name = data.username;
-        this.batchDelectionInfos.push(initBatchMessage);
+        this.batchActionInfos.push(initBatchMessage);
       });
-      this.OperateDialogService.addBatchInfoList(this.batchDelectionInfos);
+      this.OperateDialogService.addBatchInfoList(this.batchActionInfos);
 
-      let switchMessage = new ConfirmationMessage(
-          'MEMBER.SWITCH_TITLE',
-          'MEMBER.SWITCH_SUMMARY',
-          nameArr.join(','),
-          m,
-          ConfirmationTargets.PROJECT_MEMBER,
-          ConfirmationButtons.SWITCH_CANCEL
-      );
-      this.OperateDialogService.openComfirmDialog(switchMessage);
+      this.changeOpe(m);
     }
   }
 
@@ -167,64 +157,64 @@ export class MemberComponent implements OnInit, OnDestroy {
       let promiseList: any[] = [];
       members.forEach(member => {
         if (member.user_id === this.currentUser.user_id) {
-          let findedList = this.batchDelectionInfos.find(data => data.name === member.username);
-          this.translate.get('BATCH.SWITCH_FAILURE').subscribe(res => {
-            findedList = BathInfoChanges(findedList, res, false, true);
+          let foundMember = this.batchActionInfos.find(batchInfo => batchInfo.name === member.username);
+          this.translate.get("BATCH.SWITCH_FAILURE").subscribe(res => {
+            foundMember = BathInfoChanges(foundMember, res, false, true);
           });
-        }else {
+        } else {
           promiseList.push(this.changeOperate(this.projectId, member.user_id, this.roleNum, member.username));
         }
-
       });
 
       Promise.all(promiseList).then(num => {
-            this.retrieve(this.projectId, '');
+            this.retrieve(this.projectId, "");
           },
       );
     }
   }
 
   changeOperate(projectId: number, memberId: number, roleId: number, username: string) {
-    let findedList = this.batchDelectionInfos.find(data => data.name === username);
+    let foundMember = this.batchActionInfos.find(batchInfo => batchInfo.name === username);
     return this.memberService
         .changeMemberRole(projectId, memberId, roleId)
         .then(
             response => {
-              this.translate.get('BATCH.SWITCH_SUCCESS').subscribe(res => {
-                findedList = BathInfoChanges(findedList, res);
+              this.translate.get("BATCH.SWITCH_SUCCESS").subscribe(res => {
+                foundMember = BathInfoChanges(foundMember, res);
               });
             },
             error => {
-              this.translate.get('BATCH.SWITCH_FAILURE').subscribe(res => {
-                findedList = BathInfoChanges(findedList, res, false, true);
+              this.translate.get("BATCH.SWITCH_FAILURE").subscribe(res => {
+                foundMember = BathInfoChanges(foundMember, res, false, true);
               });
             }
         );
   }
 
+  ChangeRoleOngoing(username: string) {
+    if (this.batchActionInfos) {
+      let memberActionInfo = this.batchActionInfos.find(batchInfo => batchInfo.name === username);
+      return memberActionInfo && memberActionInfo.status === "pending";
+    } else {
+      return false;
+    }
+  }
+
   deleteMembers(m: Member[]) {
     this.isDelete = true;
     this.isChangeRole = false;
     let nameArr: string[] = [];
-    this.batchDelectionInfos = [];
+    this.batchActionInfos = [];
     if (m && m.length) {
       m.forEach(data => {
         nameArr.push(data.username);
         let initBatchMessage = new BatchInfo ();
         initBatchMessage.name = data.username;
-        this.batchDelectionInfos.push(initBatchMessage);
+        this.batchActionInfos.push(initBatchMessage);
       });
-      this.OperateDialogService.addBatchInfoList(this.batchDelectionInfos);
+      this.OperateDialogService.addBatchInfoList(this.batchActionInfos);
 
-      let deletionMessage = new ConfirmationMessage(
-          'MEMBER.DELETION_TITLE',
-          'MEMBER.DELETION_SUMMARY',
-          nameArr.join(','),
-          m,
-          ConfirmationTargets.PROJECT_MEMBER,
-          ConfirmationButtons.DELETE_CANCEL
-      );
-      this.OperateDialogService.openComfirmDialog(deletionMessage);
+      this.deleteMem(m);
     }
   }
 
@@ -233,8 +223,8 @@ export class MemberComponent implements OnInit, OnDestroy {
       let promiseLists: any[] = [];
       members.forEach(member => {
         if (member.user_id === this.currentUser.user_id) {
-          let findedList = this.batchDelectionInfos.find(data => data.name === member.username);
-          this.translate.get('BATCH.DELETED_FAILURE').subscribe(res => {
+          let findedList = this.batchActionInfos.find(data => data.name === member.username);
+          this.translate.get("BATCH.DELETED_FAILURE").subscribe(res => {
             findedList = BathInfoChanges(findedList, res, false, true);
           });
         }else {
@@ -245,23 +235,23 @@ export class MemberComponent implements OnInit, OnDestroy {
 
       Promise.all(promiseLists).then(item => {
         this.selectedRow = [];
-        this.retrieve(this.projectId, '');
+        this.retrieve(this.projectId, "");
       });
     }
   }
 
   delOperate(projectId: number, memberId: number, username: string) {
-    let findedList = this.batchDelectionInfos.find(data => data.name === username);
+    let findedList = this.batchActionInfos.find(data => data.name === username);
     return this.memberService
         .deleteMember(projectId, memberId)
         .then(
             response => {
-              this.translate.get('BATCH.DELETED_SUCCESS').subscribe(res => {
+              this.translate.get("BATCH.DELETED_SUCCESS").subscribe(res => {
                 findedList = BathInfoChanges(findedList, res);
               });
             },
             error => {
-              this.translate.get('BATCH.DELETED_FAILURE').subscribe(res => {
+              this.translate.get("BATCH.DELETED_FAILURE").subscribe(res => {
                 findedList = BathInfoChanges(findedList, res, false, true);
               });
             }
@@ -269,7 +259,7 @@ export class MemberComponent implements OnInit, OnDestroy {
   }
 
   SelectedChange(): void {
-    //this.forceRefreshView(5000);
+    // this.forceRefreshView(5000);
   }
 
   doSearch(searchMember: string) {
@@ -278,6 +268,6 @@ export class MemberComponent implements OnInit, OnDestroy {
   }
 
   refresh() {
-    this.retrieve(this.projectId, '');
+    this.retrieve(this.projectId, "");
   }
 }
\ No newline at end of file
diff --git a/src/ui_ng/src/app/shared/confirmation-dialog/confirmation-batch-message.ts b/src/ui_ng/src/app/shared/confirmation-dialog/confirmation-batch-message.ts
index b4b160ee1..42b7cc24d 100644
--- a/src/ui_ng/src/app/shared/confirmation-dialog/confirmation-batch-message.ts
+++ b/src/ui_ng/src/app/shared/confirmation-dialog/confirmation-batch-message.ts
@@ -10,10 +10,10 @@ export class BatchInfo {
     errorState: boolean;
     errorInfo: string;
     constructor() {
-        this.status = 'pending';
+        this.status = "pending";
         this.loading = false;
         this.errorState = false;
-        this.errorInfo = '';
+        this.errorInfo = "";
     }
 }
 
diff --git a/src/ui_ng/src/app/shared/confirmation-dialog/confirmation-dialog.component.ts b/src/ui_ng/src/app/shared/confirmation-dialog/confirmation-dialog.component.ts
index 1db093bda..8969e8720 100644
--- a/src/ui_ng/src/app/shared/confirmation-dialog/confirmation-dialog.component.ts
+++ b/src/ui_ng/src/app/shared/confirmation-dialog/confirmation-dialog.component.ts
@@ -113,7 +113,7 @@ export class ConfirmationDialogComponent implements OnDestroy {
     }
 
     operate(): void {
-        if(!this.message){//Inproper condition
+        if (!this.message) {// Improper condition
             this.close();
             return;
         }