From 372bbf21aba82b32c544933bce08cc9ae2795fb6 Mon Sep 17 00:00:00 2001 From: wangyuerg Date: Tue, 1 Sep 2020 17:11:20 +0800 Subject: fix: fix the bug of subnet-params and conflict Change-Id: Ic27e6cfbb3a706ed23f3f1317dd552c01f285bb1 Signed-off-by: wangyuerg Issue-ID: USECASEUI-444 --- .../slicing-task-model.component.html | 2 +- .../slicing-task-model.component.ts | 2 +- .../subnet-params-model.component.html | 18 ++- .../subnet-params-model.component.less | 28 ++++ .../subnet-params-model.component.ts | 173 +++++++++++++++++++-- 5 files changed, 201 insertions(+), 22 deletions(-) (limited to 'usecaseui-portal/src/app') diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html index 6bc72029..58f08d4c 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html @@ -74,7 +74,7 @@ - \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts index f65ed32c..2ebbb32a 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts @@ -157,7 +157,7 @@ export class SlicingTaskModelComponent implements OnInit { 'an_area_traffic_cap_ul', 'an_script_name', 'an_overalluser_density', - 'an_Endpoint' + 'an_Endpoint' ]), an_coverage_area_ta_list: area}; this.slicingSubnet[1].params = this.pick(nsi_nssi_info, ['tn_latency', 'tn_bandwidth', 'tn_script_name', 'tn_jitter', 'tn_service_snssai']); this.slicingSubnet[2].params = {...this.pick(nsi_nssi_info, [ diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html index 50b6e5ad..6a49cc67 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html @@ -8,7 +8,7 @@ - - - + +
{{formData[item.key] === ''? 'can not be empty!':' '}}
- + +
{{validateEndPoint(option.title, EndpointInputs[i][option.key])}}
+
{{validateEndPoint(option.title, EndpointInputs[i][option.key])}}
+
+
{{checkArea()}}
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less index 814d2f0d..25093399 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less @@ -16,4 +16,32 @@ } .ant-form-item-label { text-align: left; +} +.validation_alert { + color: red; + position: absolute; + top: 0; + margin-top: 15px; +} +.validation_alert_area { + color: red; + position: absolute; + top: 0; + margin-top: 35px; + margin-left: 15px; +} +.endpoint_input { + position: relative; + .end_alert_ip { + position: absolute; + color: red; + top: 0; + margin-top: 30px; + } + .end_alert_logical { + position: absolute; + color: red; + top: 0; + margin: 30px 0 0 120px; + } } \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts index bceca197..5bed207a 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts @@ -1,5 +1,6 @@ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; -import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS, ADDRESS , NexthopInfo_Options } from '@src/constants/constants' +import { Component, OnInit, Input, Output, EventEmitter, ElementRef } from '@angular/core'; +import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS, ADDRESS , NexthopInfo_Options } from '@src/constants/constants'; +import { NzMessageService } from "ng-zorro-antd"; @Component({ selector: 'app-subnet-params-model', @@ -15,23 +16,29 @@ export class SubnetParamsModelComponent implements OnInit { @Output() paramsDataChange = new EventEmitter(); transferFormItems = TRANSFRER_FORM_ITEMS; - coreFormItems: any[] = []; + formData: any; + coreFormItems : any = []; areaList: any[] = []; // 2020.08.17 Add 3 parameters for Endpoint, Comment: The following code NexthopInfoOptions = NexthopInfo_Options; EndpointInputs: any[] = []; - EndpointEnable: boolean = false; // Whether to enable the three parameters of Endpoint + EndpointEnable: boolean = true; // Whether to enable the three parameters of Endpoint // Comment: Above code - constructor() { } + constructor( + private message: NzMessageService, + ) { + } - ngOnInit() { } + ngOnInit() { + } ngOnChanges() { if(this.title){ - this.coreFormItems = this.title === 'An'?CORE_FORM_ITEMS.An:this.title === 'Cn'?CORE_FORM_ITEMS.Cn:[]; - if(this.detailData !==undefined && Object.keys(this.detailData).length!==0){ - this.EndpointEnable = (this.detailData.hasOwnProperty("an_Endpoint") && this.detailData['an_Endpoint'].length!==0) || (this.detailData.hasOwnProperty("cn_Endpoint") && this.detailData['cn_Endpoint'].length!==0) + this.coreFormItems = this.title === 'An'?CORE_FORM_ITEMS.An:this.title === 'Cn'?CORE_FORM_ITEMS.Cn:[]; + this.formData = JSON.parse(JSON.stringify(this.detailData)); + if(this.formData !==undefined && Object.keys(this.formData).length!==0){ + this.EndpointEnable = (this.formData.hasOwnProperty("an_Endpoint") && this.formData['an_Endpoint'].length!==0) || (this.formData.hasOwnProperty("cn_Endpoint") && this.formData['cn_Endpoint'].length!==0) } // -------> 2020.08.17 Add 3 parameters for Endpoint, Comment: The following code if(this.EndpointEnable){ @@ -53,9 +60,62 @@ export class SubnetParamsModelComponent implements OnInit { this.AreaFormatting(); } } - + validateEndPoint (key: string, value: any): string { + if (value === '') { + return 'can not be empty'; + } + if (key === 'ip_address') { + const regxp = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; + if (!regxp.test(value)) { + return 'xxx.xxx.xxx.xxx'; + } else { + return ''; + } + } else if (key === 'logical_link') { + return ''; + } else { + return ''; + } + } + // endPointOnBlur ($event:any, title: string): void { + // const target = $event.target; + // if (title === 'ip_address') { + // const regxp = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; + // if (!regxp.test(target.value)) { + // target.value = ''; + // this.message.error('Please enter legal IP address'); + // } + // } + // } + // endPointEnter ($event:any, title: string): void { + // if ($event.keyCode === 13) { + // const target = $event.target; + // if (title === 'ip_address') { + // const regxp = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; + // if (!regxp.test(target.value)) { + // target.value = ''; + // this.message.error('Please enter legal IP address'); + // } + // } + // } + // } + onInput ($event:any, title: string) { + if (!$event) { + return; + } + const target = $event.target; + if (title === 'ip_address') { + // only number and '.' can be inputted + const regexp = /[^\d^\.]+/g; + target.value = target.value.replace(regexp, ''); + } else if (title === 'logical_link') { + // only number can be inputted + const regxp = /[^\d]/g; + target.value = target.value.replace(regxp, ''); + } + } AreaFormatting () { - let areaList = [...this.detailData.an_coverage_area_ta_list]; + let areaList = [...this.formData.an_coverage_area_ta_list]; this.areaList = areaList.map ( (item: any) => { let arr = item.split(';'); item = arr.map( (ite, index) => { @@ -138,9 +198,88 @@ export class SubnetParamsModelComponent implements OnInit { this.showModel = false this.cancel.emit(this.showModel) } + + checkArea () { + let result = true; + console.log(this.areaList); + this.areaList.forEach((item) => { + if (item.some((val) => {return val['selected'] === ''})) { + result = false; + } + }) + if (!result) { + return 'can not be empty!'; + } else { + return ''; + } + } + + judgeType (a) { + return Object.prototype.toString.call(a) + } + + // used to verify that each item is not empty in a object + deepCheck (target) { + let type = this.judgeType(target); + if (type === '[object Array]') { + for (let i = 0; i < target.length; i++) { + if (!this.deepCheck(target[i])) { + return false; + } + } + } else if (type === '[object Object]') { + for (const prop in target) { + if (target.hasOwnProperty(prop)) { // special handling for address + if (prop === 'an_coverage_area_ta_list' || prop ==='cn_coverage_area_ta_list') { + return target[prop].every((item) => {return this.deepCheck(item.split(';'))}); + } else if (!this.deepCheck(target[prop])) { + return false; + } + } + } + } else { + if (!target && target!==0) { + return false; + } else { + return true; + } + } + return true; + } + + // endCheckBeforeSubmit (params) { + // let target; + // if (this.title === 'An') { + // target = params['an_Endpoint']; + // for (let item of target) { + // if (Object.keys[0] === 'an_ip_address') { + // const regxp = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; + // if (regxp.test(item['an_ip_address'])) { + // this.message.error('illegal IpAddress'); + // return false; + // } + // } + // } + // } else if (this.title === 'Cn'){ + // target = params['cn_Endpoint']; + // for (let item of target) { + // if (Object.keys[0] === 'cn_ip_address') { + // const regxp = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; + // if (regxp.test(item['cn_ip_address'])) { + // this.message.error('illegal IpAddress'); + // return false; + // } + // } + // } + // } else { + // return true; + // } + // return true; + // } handleOk(): void { let params: object; + // Verify that each item is not empty if (this.title === 'An') { const an_coverage_area_ta_list: string[] = []; this.areaList.forEach( item => { @@ -150,12 +289,16 @@ export class SubnetParamsModelComponent implements OnInit { }) an_coverage_area_ta_list.push(str.substring(0, str.length-1)); }) - params = {...this.detailData, an_coverage_area_ta_list} + params = {...this.formData, an_coverage_area_ta_list}; + } else { + params = {...this.formData}; + } + if (this.deepCheck(params)) { + this.paramsDataChange.emit(params); + this.handleCancel(); } else { - params = {...this.detailData} + this.message.error('Please complete the form'); } - this.paramsDataChange.emit(params) - this.handleCancel() } } -- cgit 1.2.3-korg