Skip to content

frontend: fix page init reload list-resource #138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wilhelmguo merged 1 commit into from
Dec 12, 2018
Merged

frontend: fix page init reload list-resource #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 20 additions & 18 deletions src/frontend/src/app/portal/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AfterViewInit, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { AfterViewInit, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild, HostBinding } from '@angular/core';
import { State } from '@clr/angular';
import { ListAppComponent } from './list-app/list-app.component';
import { CreateEditAppComponent } from './create-edit-app/create-edit-app.component';
Expand Down Expand Up @@ -36,9 +36,6 @@ const showState = {

@Component({
selector: 'wayne-app',
host: {
'class': 'content-container'
},
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations: [
Expand All @@ -54,6 +51,7 @@ const showState = {
]
})
export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
@HostBinding('attr.class') class = 'content-container';
@ViewChild(ListAppComponent)
listApp: ListAppComponent;
@ViewChild(CreateEditAppComponent)
Expand All @@ -69,8 +67,8 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
subscription: Subscription;
resources: object = new Object();
clusters: ClusterCard[] = [];
allowNumber: number = 10;
allowShowAll: boolean = false;
allowNumber = 10;
allowShowAll = false;
showList: any[] = new Array();
showState: object = showState;
eventList: any[] = new Array();
Expand All @@ -91,7 +89,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
if (message &&
message.state === ConfirmationState.CONFIRMED &&
message.source === ConfirmationTargets.APP) {
let appId = message.data;
const appId = message.data;
this.appService.deleteById(appId, this.cacheService.namespaceId)
.subscribe(
response => {
Expand Down Expand Up @@ -125,11 +123,13 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
}

boxResize(slow?: boolean) {
if (this.allowShowAll) return;
if (this.allowShowAll) {
return;
}
const length = this.clusters.length;
setTimeout(() => {
this.allowNumber = this.getClusterMaxNumber();
for (var i = length; i > 0; i--) {
for (let i = length; i > 0; i--) {
if (i < this.allowNumber) {
this.clusters[i - 1].state = true;
} else {
Expand All @@ -156,7 +156,9 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
initShow() {
this.showList = [];
Object.keys(this.showState).forEach(key => {
if (!this.showState[key].hidden) this.showList.push(key);
if (!this.showState[key].hidden) {
this.showList.push(key);
}
});
}

Expand All @@ -172,7 +174,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
this.clusters.push({name: cluster, state: false});
});
this.allowNumber = this.getClusterMaxNumber();
for (var i = 0; i < this.allowNumber - 1; i++) {
for (let i = 0; i < this.allowNumber - 1; i++) {
setTimeout(((i) => {
if (this.clusters[i]) {
this.clusters[i].state = true;
Expand All @@ -185,12 +187,12 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
}

changeCard() {
let svg = this.element.nativeElement.querySelector('.card-change-svg');
const svg = this.element.nativeElement.querySelector('.card-change-svg');
let count = 0;
if (this.allowShowAll) {
this.allowShowAll = false;
const length = this.clusters.length;
for (var i = length; i > 0; i--) {
for (let i = length; i > 0; i--) {
if (i >= this.allowNumber) {
setTimeout(((i) => {
this.clusters[i - 1].state = false;
Expand All @@ -202,7 +204,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
this.allowShowAll = true;
this.clusters.forEach(item => {
if (!item.state) {
setTimeout(((item) => {
setTimeout((item => {
item.state = true;
}).bind(this, item), 200 * count++);
}
Expand All @@ -213,7 +215,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {

// 处理回车事件也可以搜索
keyDownFunction(event: KeyboardEvent) {
if (event.keyCode == 13) {
if (event.keyCode === 13) {
this.searchApp();
}
}
Expand Down Expand Up @@ -244,7 +246,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
if (state) {
this.pageState = PageState.fromState(state, {totalPage: this.pageState.page.totalPage, totalCount: this.pageState.page.totalCount});
}
let namespaceId = this.cacheService.namespaceId;
const namespaceId = this.cacheService.namespaceId;
this.pageState.params['name'] = this.appName;
this.pageState.params['deleted'] = false;
this.pageState.params['namespace'] = namespaceId;
Expand All @@ -256,7 +258,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
this.appService.listPage(this.pageState, namespaceId.toString())
.subscribe(
response => {
let data = response.data;
const data = response.data;
this.pageState.page.totalPage = data.totalPage;
this.pageState.page.totalCount = data.totalCount;
this.changedApps = data.list;
Expand All @@ -277,7 +279,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
}

deleteApp(app: App) {
let deletionMessage = new ConfirmationMessage(
const deletionMessage = new ConfirmationMessage(
'删除项目确认',
'你确认删除项目 ' + app.name + ' ？',
app.id,
Expand Down
4 changes: 2 additions & 2 deletions src/frontend/src/app/portal/app/list-app/list-app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export class ListAppComponent implements OnInit {
@Input() apps: App[];
@Input() page: Page;
state: State;
currentPage: number = 1;
currentPage = 1;
@Input() showState: object;
@Output() paginate = new EventEmitter<State>();
@Output() delete = new EventEmitter<App>();
Expand Down Expand Up @@ -71,7 +71,7 @@ export class ListAppComponent implements OnInit {
}

starredApp(app: App) {
let appStarred = new AppStarred();
const appStarred = new AppStarred();
appStarred.app = app;
this.appStarredService.create(appStarred).subscribe(
response => {
Expand Down
28 changes: 16 additions & 12 deletions src/frontend/src/app/shared/paginate/paginate.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,22 +19,22 @@ export class PaginateComponent implements OnInit {

@Input() set currentPage(value) {
this._current = value;
};
}

@Input() pageSizes: Array<number>;
@Input() rate: number = 1;
@Input() _size: number = 10;
@Input() localSave: boolean = true;
@Input() rate = 1;
@Input() _size = 10;
@Input() localSave = true;
@Output() sizeChange = new EventEmitter<number>();
@Output() currentPageChange = new EventEmitter<number>();

get current() {
return this._current || 1;
};
}

set current(value: number) {
this.currentPageChange.emit(value);
};
}

get lastPage(): number {
try {
Expand All @@ -46,7 +46,7 @@ export class PaginateComponent implements OnInit {

get pageList(): Array<any> {
try {
let pageList = Array();
const pageList = Array();
for (let key = 1; key <= this.lastPage; key++) {
pageList.push(key);
}
Expand All @@ -58,7 +58,7 @@ export class PaginateComponent implements OnInit {

get showSize() {
return this.pageSizes !== undefined;
};
}

constructor(
private storage: StorageService,
Expand All @@ -68,7 +68,7 @@ export class PaginateComponent implements OnInit {

ngOnInit() {
if (this.localSave && this.pageSizes) {
this._size = parseInt(this.storage.get('pagesize')) * this.rate || 10 * this.rate;
this._size = parseInt(this.storage.get('pagesize'), 10) * this.rate || 10 * this.rate;
if (this.pageSizes.indexOf(this._size) === -1) {
this.pageSizes.push(this._size);
this.pageSizes.sort((a, b) => a - b);
Expand All @@ -81,9 +81,13 @@ export class PaginateComponent implements OnInit {
}

set size(value) {
this._size = value;
if (this.localSave && this.pageSizes && this.pageSizes.indexOf(value) > -1) this.storage.save('pagesize', this._size / this.rate);
this.sizeChange.emit(this._size);
if (value !== this._size) {
this._size = value;
if (this.localSave && this.pageSizes && this.pageSizes.indexOf(value) > -1) {
this.storage.save('pagesize', this._size / this.rate);
}
this.sizeChange.emit(this._size);
}
}

}
⚡