fix: fix the bug of subnet-params and conflict

Change-Id: Ic27e6cfbb3a706ed23f3f1317dd552c01f285bb1
Signed-off-by: wangyuerg <wangyuerg@chinamobile.com>
Issue-ID: USECASEUI-444

5 files changed, 201 insertions, 22 deletions

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 @@
   <button nz-button (click)="handleCancel()">Cancel</button>
   <button nz-button nzType="primary" [nzLoading]='loading' (click)="handleOk()">OK</button>
 </ng-template>
-<app-subnet-params-model [showModel]="isShowParams" [detailData]="params" [title]="paramsTitle"
+<app-subnet-params-model [showModel]="isShowParams" *ngIf="isShowParams" [detailData]="params" [title]="paramsTitle"
   (cancel)="isShowParams=$event" (paramsDataChange)="changeParams($event)">
 </app-subnet-params-model>
 <app-notification #notification [isServicesList]="false" [parentComponent]="'slicing'"></app-notification>
\ 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 @@
 				</nz-form-label>
 				<nz-form-control [nzSpan]="12">
 					<input nz-input
-						   [(ngModel)]="detailData[item.key]"
+						   [(ngModel)]="formData[item.key]"
 						   [name]="item.key"
 						   [id]="item.key"
 						   [readOnly]="item.title === 'S-NSSAI'"
@@ -23,30 +23,37 @@
 					{{ item.title }}
 				</nz-form-label>
 				<nz-form-control [nzSpan]="item.title === 'Endpoint'?14:8" *ngIf="item.key !== 'an_coverage_area_ta_list'">
-					<input nz-input [id]="item.key" [name]="item.key" [(ngModel)]="detailData[item.key]"
+					<input nz-input [id]="item.key" [name]="item.key" [(ngModel)]="formData[item.key]"
 						[readOnly]="item.title === 'S-NSSAI'" [disabled]="item.title === 'S-NSSAI'"
 						*ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Endpoint' " />
-					<nz-radio-group [name]="item.key" [(ngModel)]="detailData[item.key]"
+					<nz-radio-group [name]="item.key" [(ngModel)]="formData[item.key]"
 						*ngIf="item.title === 'Resource Sharing Level'">
 						<label nz-radio [nzValue]="option.key" *ngFor="let option of item.options">
 							{{ option.title }}
 						</label>
 					</nz-radio-group>
-					<nz-select [name]="item.key" [(ngModel)]="detailData[item.key]" *ngIf="item.title === 'Mobility'">
+					<nz-select [name]="item.key" [(ngModel)]="formData[item.key]" *ngIf="item.title === 'Mobility'">
 						<nz-option [nzValue]="option.key" [nzLabel]="option.title" *ngFor="let option of item.options">
 						</nz-option>
 					</nz-select>
+					<div class="validation_alert">{{formData[item.key] === ''? 'can not be empty!':' '}}</div>
 					<!-- 2020.08.17  Add 3 parameters for Endpoint-->
 					<!-- Comment: The following code-->
 					<nz-input-group *ngIf="item.title === 'Endpoint' && EndpointEnable">
 						<div *ngFor="let option of item.options;let i=index">
-							<input nz-input
+							<div class="endpoint_input">
+								<input nz-input
 								   *ngIf="option.title !== 'nexthop_info'"
 								   [id]="option.key"
 								   [name]="option.key"
 								   [title]="EndpointInputs[i][option.key]"
 								   [(ngModel)]="EndpointInputs[i][option.key]"
+								   [placeholder]="option.holder"
+								   (input)="onInput($event, option.title)"
 								   style="width:32%;margin-right:1%" />
+								<div class="end_alert_ip" *ngIf="option.title === 'ip_address'">{{validateEndPoint(option.title, EndpointInputs[i][option.key])}}</div>
+								<div class="end_alert_logical"  *ngIf="option.title === 'logical_link'">{{validateEndPoint(option.title, EndpointInputs[i][option.key])}}</div>
+							</div>
 							<nz-select
 									*ngIf="option.title === 'nexthop_info'"
 									[name]="option.key"
@@ -84,6 +91,7 @@
 							</button>
 						</nz-form-control>
 					</div>
+					<div class="validation_alert_area">{{checkArea()}}</div>
 				</div>
 			</nz-form-item>
 		</form>
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<any>();
 
 	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()
 	}
 
 }