Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2025-02-07 23:41:37 +01:00
Code Issues Projects Releases Wiki Activity

paging user by server for userList UI

Browse Source 
Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
AllForNothing 2019-08-01 16:16:43 +08:00
parent 75707adeb9
commit 2f3b4f0933
3 changed files with 294 additions and 318 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/portal/src/app/user/user.component.html
View File

@ -9,7 +9,7 @@
</span>
</div>
<div>
<clr-datagrid (clrDgRefresh)="load($event)" [clrDgLoading]="inProgress" [(clrDgSelected)]="selectedRow" (clrDgSelectedChange)="SelectedChange()">
<clr-datagrid (clrDgRefresh)="load($event)" [clrDgLoading]="inProgress" [(clrDgSelected)]="selectedRow">
<clr-dg-action-bar>
<button type="button" class="btn btn-sm btn-secondary" (click)="addNewUser()" [disabled]="!canCreateUser"><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'USER.ADD_ACTION' | translate}}</button>
<button type="button" class="btn btn-sm btn-secondary" id="set-admin" [disabled]="!ifSameRole" (click)="changeAdminRole()" ><clr-icon shape="wrench" size="16"></clr-icon>&nbsp;{{ISADMNISTRATOR | translate}}</button>
@ -35,7 +35,7 @@
<clr-dg-footer>
<span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'USER.OF' | translate }}</span>
{{pagination.totalItems}} {{'USER.ITEMS' | translate }}
<clr-dg-pagination #pagination [clrDgPageSize]="15" [(clrDgPage)]="currentPage" [clrDgTotalItems]="totalCount">
<clr-dg-pagination #pagination [clrDgPageSize]="pageSize" [(clrDgPage)]="currentPage" [clrDgTotalItems]="totalCount">
</clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>

107
src/portal/src/app/user/user.component.ts
View File

@ -11,13 +11,19 @@
// 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 { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Subscription, Observable, forkJoin } from "rxjs";
import { TranslateService } from '@ngx-translate/core';
import { ConfirmationState, ConfirmationTargets, ConfirmationButtons } from '../shared/shared.const';
import { operateChanges, OperateInfo, OperationService, OperationState, errorHandler as errorHandFn } from '@harbor/ui';
import {
operateChanges,
OperateInfo,
OperationService,
OperationState,
errorHandler as errorHandFn,
} from '@harbor/ui';
import { ConfirmationDialogService } from '../shared/confirmation-dialog/confirmation-dialog.service';
import { ConfirmationMessage } from '../shared/confirmation-dialog/confirmation-message';
import { MessageHandlerService } from '../shared/message-handler/message-handler.service';
@ -45,18 +51,17 @@ import { throwError as observableThrowError } from "rxjs";
templateUrl: 'user.component.html',
styleUrls: ['user.component.scss'],
providers: [UserService],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserComponent implements OnInit, OnDestroy {
users: User[] = [];
originalUsers: Observable<User[]>;
selectedRow: User[] = [];
ISADMNISTRATOR: string = "USER.ENABLE_ADMIN_ACTION";
currentTerm: string;
totalCount: number = 0;
currentPage: number = 1;
pageSize: number = 15;
timerHandler: any;
private onGoing: boolean = true;
@ -75,8 +80,7 @@ export class UserComponent implements OnInit, OnDestroy {
private msgHandler: MessageHandlerService,
private session: SessionService,
private appConfigService: AppConfigService,
private operationService: OperationService,
private ref: ChangeDetectorRef) {
private operationService: OperationService) {
this.deletionSubscription = deletionDialogService.confirmationConfirm$.subscribe(confirmed => {
if (confirmed &&
confirmed.source === ConfirmationTargets.USER &&
@ -155,7 +159,8 @@ export class UserComponent implements OnInit, OnDestroy {
return this.onGoing;
}
ngOnInit(): void { }
ngOnInit(): void {
}
ngOnDestroy(): void {
if (this.deletionSubscription) {
@ -172,26 +177,15 @@ export class UserComponent implements OnInit, OnDestroy {
if (this.selectedRow.length === 1) {
this.changePwdDialog.open(this.selectedRow[0].user_id);
}
}
// Filter items by keywords
doFilter(terms: string): void {
this.selectedRow = [];
this.currentTerm = terms;
this.originalUsers.subscribe(users => {
if (terms.trim() === "") {
this.refreshUser((this.currentPage - 1) * 15, this.currentPage * 15);
} else {
let selectUsers = users.filter(user => {
return this.isMatchFilterTerm(terms, user.username);
});
this.totalCount = selectUsers.length;
this.users = selectUsers.slice((this.currentPage - 1) * 15, this.currentPage * 15); // First page
this.forceRefreshView(5000);
}
});
this.currentTerm = terms.trim();
this.currentPage = 1;
this.onGoing = true;
this.getUserListByPaging();
}
// Disable the admin role for the specified user
@ -303,27 +297,12 @@ export class UserComponent implements OnInit, OnDestroy {
}
// Refresh the user list
refreshUser(from: number, to: number): void {
refreshUser(): void {
this.selectedRow = [];
// Start to get
this.currentTerm = '';
this.onGoing = true;
this.originalUsers = this.userService.getUsers();
this.originalUsers.subscribe(users => {
this.onGoing = false;
this.totalCount = users.length;
this.users = users.slice(from, to); // First page
this.forceRefreshView(5000);
return users;
}, error => {
this.onGoing = false;
this.msgHandler.handleError(error);
this.forceRefreshView(5000);
});
this.getUserListByPaging();
}
// Add new user
@ -343,46 +322,30 @@ export class UserComponent implements OnInit, OnDestroy {
// Data loading
load(state: any): void {
this.selectedRow = [];
if (state && state.page) {
if (this.originalUsers) {
this.originalUsers.subscribe(users => {
this.users = users.slice(state.page.from, state.page.to + 1);
});
this.forceRefreshView(5000);
} else {
this.refreshUser(state.page.from, state.page.to + 1);
}
} else {
// Refresh
this.refresh();
}
this.onGoing = true;
this.getUserListByPaging();
}
refresh(): void {
this.currentPage = 1; // Refresh pagination
this.refreshUser(0, 15);
this.refreshUser();
}
SelectedChange(): void {
this.forceRefreshView(5000);
getUserListByPaging() {
this.userService.getUserListByPaging(this.currentPage, this.pageSize, this.currentTerm)
.subscribe(response => {
// Get total count
if (response.headers) {
let xHeader: string = response.headers.get("X-Total-Count");
if (xHeader) {
this.totalCount = parseInt(xHeader, 0);
}
forceRefreshView(duration: number): void {
// Reset timer
if (this.timerHandler) {
clearInterval(this.timerHandler);
}
this.timerHandler = setInterval(() => this.ref.markForCheck(), 100);
setTimeout(() => {
if (this.timerHandler) {
clearInterval(this.timerHandler);
this.timerHandler = null;
this.users = response.body as User[];
this.onGoing = false;
}, error => {
this.msgHandler.handleError(error);
this.onGoing = false;
});
}
}, duration);
}
private isMatchFilterTerm(terms: string, testedItem: string): boolean {
return testedItem.toLowerCase().indexOf(terms.toLowerCase()) !== -1;
}
}

19
src/portal/src/app/user/user.service.ts
View File

@ -12,14 +12,15 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
import { map, catchError } from "rxjs/operators";
import { Observable, throwError as observableThrowError } from "rxjs";
import {HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS} from "@harbor/ui";
import {HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS, buildHttpRequestOptionsWithObserveResponse} from "@harbor/ui";
import { User, LDAPUser } from './user';
import LDAPUsertoUser from './user';
const userMgmtEndpoint = '/api/users';
const userListSearch = '/api/users/search?';
const ldapUserEndpoint = '/api/ldap/users';
@ -34,7 +35,19 @@ const ldapUserEndpoint = '/api/ldap/users';
export class UserService {
constructor(private http: HttpClient) { }
// Get paging user list
getUserListByPaging(page: number, pageSize: number, username?: string) {
let params = new HttpParams();
if (page && pageSize) {
params = params.set('page', page + '').set('page_size', pageSize + '');
}
if (username) {
params = params.set('username', username);
}
return this.http
.get<HttpResponse<User[]>>(userMgmtEndpoint, buildHttpRequestOptionsWithObserveResponse(params)).pipe(
catchError(error => observableThrowError(error)), );
}
// Handle the related exceptions
handleError(error: any): Observable<any> {
return observableThrowError(error.error || error);