From 3bb632ae93f5dbe1ef43a9c08e380c142a69e1ce Mon Sep 17 00:00:00 2001 From: cyuamber Date: Mon, 24 Feb 2020 15:42:52 +0800 Subject: feat:Optimize the writing of tab switching, remove the writing of Ngif Change-Id: I1a315a363d75ac5b18d05b20337f63c32cd7a5d9 Issue-ID: USECASEUI-368 Signed-off-by: cyuamber --- .../csmf-slicing-business-management.component.ts | 22 ++++++---- .../slicing-management.component.html | 20 +++------ .../nsi-table/nsi-table.component.ts | 48 +++++++++++++-------- .../nssi-table/nssi-table.component.ts | 50 +++++++++++++--------- .../slicing-business-table.component.ts | 22 ++++++---- .../slicing-resource-management.component.html | 20 ++++----- .../slicing-resource-management.component.ts | 30 ++++++++----- .../slicing-task-management.component.ts | 14 ++++-- 8 files changed, 133 insertions(+), 93 deletions(-) (limited to 'usecaseui-portal') diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts index 272a84af..36a089cd 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, Input, OnInit, SimpleChanges} from '@angular/core'; import { BUSINESS_STATUS } from "../../../../../constants/constants"; import { SlicingTaskServices } from '.././../../../core/services/slicingTaskServices'; import { NzModalService, NzMessageService } from 'ng-zorro-antd'; @@ -16,17 +16,21 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit { private message: NzMessageService ) { } + @Input() currentTabTitle; - ngOnInit() { - this.getCSMFBusinessList() - } - ngOnDestroy() { - this.progressingTimer.forEach((item) => { - clearInterval(item.timer); - }); - this.progressingTimer = []; + ngOnChanges(changes: SimpleChanges) { + if(changes.currentTabTitle.currentValue === 'Communication Service'){ + this.getCSMFBusinessList() + }else { + this.progressingTimer.forEach((item) => { + clearInterval(item.timer); + }); + this.progressingTimer = []; + } } + ngOnInit() {} + selectedValue: string = BUSINESS_STATUS[0]; listOfData: any[] = []; pageIndex: number = 1; diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html index 6d55ea1c..5a1dd3f0 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html @@ -1,17 +1,11 @@ - + + + + + + + - - - - - - \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts index 6ac29417..3c08463d 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts @@ -1,12 +1,13 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, Input, OnInit,SimpleChanges} from '@angular/core'; import {BUSINESS_STATUS} from '../../../../../../../constants/constants'; import {SlicingTaskServices} from "../../../../../../core/services/slicingTaskServices"; import {NsiModelComponent} from "../nsi-model/nsi-model.component"; -import { NzModalService } from 'ng-zorro-antd'; +import {NzModalService} from 'ng-zorro-antd'; + @Component({ - selector: 'app-nsi-table', - templateUrl: './nsi-table.component.html', - styleUrls: ['./nsi-table.component.less'] + selector: 'app-nsi-table', + templateUrl: './nsi-table.component.html', + styleUrls: ['./nsi-table.component.less'] }) export class NsiTableComponent implements OnInit { @@ -16,10 +17,16 @@ export class NsiTableComponent implements OnInit { ) { } - ngOnInit() { - this.getNsiList() - } - selectedValue:string = BUSINESS_STATUS[0]; + @Input() currentTabName; + + ngOnChanges(changes: SimpleChanges) { + if (changes.currentTabName.currentValue === 'Slicing Instance Management') { + this.getNsiList() + } + } + ngOnInit() {} + + selectedValue: string = BUSINESS_STATUS[0]; listOfData: any[] = []; pageIndex: number = 1; pageSize: number = 10; @@ -28,7 +35,7 @@ export class NsiTableComponent implements OnInit { isSelect: boolean = false; statusOptions: any[] = BUSINESS_STATUS; - getNsiList (): void{ + getNsiList(): void { this.loading = true; this.isSelect = false; this.listOfData = []; @@ -36,17 +43,17 @@ export class NsiTableComponent implements OnInit { pageNo: this.pageIndex, pageSize: this.pageSize }; - if(this.selectedValue !== BUSINESS_STATUS[0]){ + if (this.selectedValue !== BUSINESS_STATUS[0]) { paramsObj["instanceStatus"] = this.selectedValue.toLocaleLowerCase(); this.isSelect = true; } - this.myhttp.getSlicingNsiList(paramsObj,this.isSelect).subscribe (res => { - const { result_header: { result_code }, result_body: { nsi_service_instances,record_number } } = res; + this.myhttp.getSlicingNsiList(paramsObj, this.isSelect).subscribe(res => { + const {result_header: {result_code}, result_body: {nsi_service_instances, record_number}} = res; this.loading = false; if (+result_code === 200) { this.total = record_number; this.loading = false; - if(nsi_service_instances !== null && nsi_service_instances.length >0) { + if (nsi_service_instances !== null && nsi_service_instances.length > 0) { this.listOfData = nsi_service_instances; } } @@ -55,23 +62,26 @@ export class NsiTableComponent implements OnInit { console.error(res); }) } - getListOfProcessingStatus(){ + + getListOfProcessingStatus() { this.pageIndex = 1; this.pageSize = 10; this.getNsiList(); } + searchData(reset: boolean = false) { this.getNsiList(); } + showdetail(data) { const nsiModal = this.modalService.create({ - nzTitle:"Detail", + nzTitle: "Detail", nzContent: NsiModelComponent, - nzWidth:"70%", + nzWidth: "70%", nzOkText: null, nzCancelText: null, - nzComponentParams:{ - nsiId:data.service_instance_id + nzComponentParams: { + nsiId: data.service_instance_id } }) } diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts index 5e90bcee..6dec5c72 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts @@ -1,12 +1,13 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, Input, OnInit,SimpleChanges} from '@angular/core'; import {BUSINESS_STATUS} from '../../../../../../../constants/constants'; import {SlicingTaskServices} from "../../../../../../core/services/slicingTaskServices"; -import { NzModalService } from 'ng-zorro-antd'; +import {NzModalService} from 'ng-zorro-antd'; import {NssiModelComponent} from "../nssi-model/nssi-model.component"; + @Component({ - selector: 'app-nssi-table', - templateUrl: './nssi-table.component.html', - styleUrls: ['./nssi-table.component.less'] + selector: 'app-nssi-table', + templateUrl: './nssi-table.component.html', + styleUrls: ['./nssi-table.component.less'] }) export class NssiTableComponent implements OnInit { @@ -16,10 +17,16 @@ export class NssiTableComponent implements OnInit { ) { } - ngOnInit() { - this.getNssiList() - } - selectedValue:string = BUSINESS_STATUS[0]; + @Input() currentTabName; + + ngOnChanges(changes: SimpleChanges) { + if (changes.currentTabName.currentValue === 'Slicing Subnet Instance Management') { + this.getNssiList() + } + } + ngOnInit() {} + + selectedValue: string = BUSINESS_STATUS[0]; listOfData: any[] = []; pageIndex: number = 1; pageSize: number = 10; @@ -28,7 +35,7 @@ export class NssiTableComponent implements OnInit { isSelect: boolean = false; statusOptions: any[] = BUSINESS_STATUS; - getNssiList (): void{ + getNssiList(): void { this.loading = true; this.isSelect = false; this.listOfData = []; @@ -36,42 +43,45 @@ export class NssiTableComponent implements OnInit { pageNo: this.pageIndex, pageSize: this.pageSize }; - if(this.selectedValue !== BUSINESS_STATUS[0]){ + if (this.selectedValue !== BUSINESS_STATUS[0]) { paramsObj["instanceStatus"] = this.selectedValue.toLocaleLowerCase(); this.isSelect = true; } - this.myhttp.getSlicingNssiList(paramsObj,this.isSelect).subscribe (res => { - const { result_header: { result_code }, result_body: { nssi_service_instances,record_number } } = res; + this.myhttp.getSlicingNssiList(paramsObj, this.isSelect).subscribe(res => { + const {result_header: {result_code}, result_body: {nssi_service_instances, record_number}} = res; this.loading = false; if (+result_code === 200) { this.total = record_number; this.loading = false; - if(nssi_service_instances !== null && nssi_service_instances.length >0) { + if (nssi_service_instances !== null && nssi_service_instances.length > 0) { this.listOfData = nssi_service_instances; } } - },(res) => { + }, (res) => { this.loading = false; console.error(res); }) } - getListOfProcessingStatus(){ + + getListOfProcessingStatus() { this.pageIndex = 1; this.pageSize = 10; this.getNssiList(); } + searchData(reset: boolean = false) { this.getNssiList(); } + showdetail(data) { const nssiModal = this.modalService.create({ - nzTitle:"Detail", + nzTitle: "Detail", nzContent: NssiModelComponent, - nzWidth:"70%", + nzWidth: "70%", nzOkText: null, nzCancelText: null, - nzComponentParams:{ - nssiId:data.service_instance_id + nzComponentParams: { + nssiId: data.service_instance_id } }) } diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts index fc07efc9..fbce729f 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +import {Component, Input, OnInit, ViewChild,SimpleChanges} from '@angular/core'; import { SlicingTaskServices } from '.././../../../../../core/services/slicingTaskServices'; import { BUSINESS_STATUS } from '../../../../../../../constants/constants'; import { NzModalService, NzMessageService } from 'ng-zorro-antd'; @@ -17,14 +17,20 @@ export class SlicingBusinessTableComponent implements OnInit { ) { } - ngOnInit() { - this.getBusinessList() + @Input() currentTabName; + + ngOnChanges(changes: SimpleChanges) { + if(changes.currentTabName.currentValue === 'Slicing Business Management'){ + this.getBusinessList() + }else { + this.progressingTimer.forEach((item) => { + clearInterval(item.timer); + }); + this.progressingTimer = []; + } } - ngOnDestroy() { - this.progressingTimer.forEach((item) => { - clearInterval(item.timer); - }) - this.progressingTimer = []; + ngOnInit() { + } selectedValue: string = BUSINESS_STATUS[0]; listOfData: any[] = []; diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html index eed187ea..adbe769f 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html @@ -1,11 +1,11 @@ - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts index b88b9073..a2a0aaf7 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts @@ -1,19 +1,29 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, Input, OnInit, SimpleChanges} from '@angular/core'; @Component({ - selector: 'app-slicing-resource-management', - templateUrl: './slicing-resource-management.component.html', - styleUrls: ['./slicing-resource-management.component.less'] + selector: 'app-slicing-resource-management', + templateUrl: './slicing-resource-management.component.html', + styleUrls: ['./slicing-resource-management.component.less'] }) export class SlicingResourceManagementComponent implements OnInit { - constructor() { } + constructor() {} + + @Input() currentTabTitle; + + ngOnChanges(changes: SimpleChanges) { + if (changes.currentTabTitle.currentValue === 'Slicing Resource Management') { + this.currentTab = 'Slicing Business Management' + }else { + this.currentTab = '' + } + } + + ngOnInit() {} + + currentTab = ''; - ngOnInit() { - } - currentTab = 'Slicing Business Management'; handleTabChange($event): void { - console.log($event,"$event"); - this.currentTab = $event.tab._title; + this.currentTab = $event.tab._title; } } diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts index 05f06e3c..39e5f1d2 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit, Input, SimpleChanges} from '@angular/core'; import { NzMessageService } from 'ng-zorro-antd'; import { SlicingTaskServices } from '.././../../../core/services/slicingTaskServices'; import { TASK_PROCESSING_STATUS } from '../../../../../constants/constants'; @@ -12,6 +12,8 @@ export class SlicingTaskManagementComponent implements OnInit { constructor(private myhttp: SlicingTaskServices, private message: NzMessageService) { } + @Input() currentTabTitle; + showDetail: boolean = false; showProcess: boolean = false; selectedValue = 'all'; @@ -25,9 +27,13 @@ export class SlicingTaskManagementComponent implements OnInit { pageSize: string = '10'; pageNum: string = '1'; - ngOnInit() { - this.getTaskList(); - } + ngOnChanges(changes: SimpleChanges) { + if(changes.currentTabTitle.currentValue === 'Slicing Task Management'){ + this.getTaskList(); + } + } + + ngOnInit() {} getTaskList(): void { const { pageNum, pageSize } = this; -- cgit 1.2.3-korg