fix: change parameters of subnet, change the selection box of nexthop to an input box; method abstraction and extration; set placeholder for all input box; cancel required fields for jitter

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

3 files changed, 52 insertions, 65 deletions

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 c4f377f1..93e6f485 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
@@ -3,8 +3,8 @@
 	<div class="subnet_params_container">
 		<form nz-form *ngIf="title === 'Tn'">
 			<nz-form-item *ngFor="let item of transferFormItems">
-				<nz-form-label [nzSpan]="7" nzRequired [nzFor]="item.key">
-					{{ item.title }}
+				<nz-form-label [nzSpan]="7" [nzRequired]="item.required" [nzFor]="item.key" [ngStyle]="labelStyle(item.required)">
+					{{item.title}}
 				</nz-form-label>
 				<nz-form-control [nzSpan]="12">
 					<input nz-input
@@ -13,19 +13,21 @@
 						   [id]="item.key"
 						   [readOnly]="item.title === 'S-NSSAI'"
 						   [disabled]="item.title === 'S-NSSAI'"
+						   [placeholder]="inputHolder(item.title)"
 					/>
+					<div class="validation_alert" *ngIf="item.required">{{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div>
 				</nz-form-control>
 			</nz-form-item>
 		</form>
 		<form nz-form *ngIf="title === 'An' || title === 'Cn'">
 			<nz-form-item *ngFor="let item of coreFormItems">
-				<nz-form-label [nzSpan]="(item.key === 'an_coverage_area_ta_list' || item.title === 'Endpoint')?7:13" nzRequired *ngIf=" item.title !== 'Endpoint' || EndpointEnable ">
+				<nz-form-label [nzSpan]="(item.key === 'an_coverage_area_ta_list' || item.title === 'Endpoint')?7:13" [nzRequired]="item.required" *ngIf=" item.title !== 'Endpoint' || EndpointEnable " [ngStyle]="labelStyle(item.required)">
 					{{ 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)]="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' " />
+						*ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Endpoint' " [placeholder]="inputHolder(item.title)"/>
 					<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">
@@ -36,14 +38,13 @@
 						<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>
+					<div class="validation_alert" *ngIf="item.required">{{Util.isEmpty(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">
 							<div class="endpoint_input">
 								<input nz-input
-								   *ngIf="option.title !== 'nexthop_info'"
 								   [id]="option.key"
 								   [name]="option.key"
 								   [title]="EndpointInputs[i][option.key]"
@@ -53,18 +54,8 @@
 								   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 class="end_alert_nexthop"  *ngIf="option.title === 'nexthop_info'">{{validateEndPoint(option.title, EndpointInputs[i][option.key])}}</div>
 							</div>
-							<nz-select
-									*ngIf="option.title === 'nexthop_info'"
-									[name]="option.key"
-									[title]="EndpointInputs[i][option.key]"
-									[(ngModel)]="EndpointInputs[i][option.key]" style="width:34%;">
-								<nz-option
-										*ngFor="let infoOption of NexthopInfoOptions"
-										[nzValue]="infoOption.key"
-										[nzLabel]="infoOption.title"
-								></nz-option>
-							</nz-select>
 						</div>
 					</nz-input-group>
 					<!-- Comment: Above code-->
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 d8cad111..335b377c 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
@@ -42,4 +42,10 @@
         top: 0;

         margin: 30px 0 0 126px;

     }

+    .end_alert_nexthop {

+        position: absolute;

+        color: red;

+        top: 0;

+        margin: 30px 0 0 246px;

+    }

 }
\ 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 145a03e7..fb1e5b55 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,6 +1,8 @@
 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";
+import { stringify } from '@angular/core/src/util';
+import { Util } from '../../../../../../shared/utils/utils';
 
 @Component({
 	selector: 'app-subnet-params-model',
@@ -28,6 +30,7 @@ export class SubnetParamsModelComponent implements OnInit {
 
 	constructor(
 		private message: NzMessageService,
+		private Util: Util
 		) {
 		}
 
@@ -62,7 +65,7 @@ export class SubnetParamsModelComponent implements OnInit {
 		}
 	}
 	validateEndPoint (key: string, value: any): string {
-		if (value === '') {
+		if (this.Util.isEmpty(value)) {
 			return 'can not be empty';
 		}
 		if (key === 'ip_address') {
@@ -72,7 +75,7 @@ export class SubnetParamsModelComponent implements OnInit {
 				return '';
 			}
 		} else if (key === 'logical_link') {
-			if (!this.isInteger(value)){
+			if (!this.Util.isInteger(value)){
 				return 'integer only'
 			} else {
 				return ''
@@ -182,6 +185,7 @@ export class SubnetParamsModelComponent implements OnInit {
 		this.cancel.emit(this.showModel)
 	}
 	
+	// prompt text for each item of area_list
 	checkArea (area: any) {
 		if (area.every((item) => {return item.selected === ''})) {
 			return 'empty';
@@ -192,55 +196,22 @@ export class SubnetParamsModelComponent implements OnInit {
 		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;
-				  }
+	// special handling for address
+	areaCheckBeforeSubmit (target: object) : Boolean{
+		for (const prop in target) {
+			if (target.hasOwnProperty(prop)) { 
+				if (prop === 'an_coverage_area_ta_list' || prop ==='cn_coverage_area_ta_list') {
+					// if the vlaue is "shanghai;shanghai;", the input is incomplete
+					return target[prop].every((item) => {return this.Util.deepCheck(item.split(';'))});
 				}
 			}
-		} else {
-			if (!target && target!==0) {
-				return false;
-			} else {
-				return true;
-			}
 		}
 		return true;
 	}
 
-	isInteger (value: any) {
-		// for common string and undefined, eg '123a3'
-		if (isNaN(value)) {
-			return false;
-		} else if (isNaN(parseInt(value))) {
-			return false;
-		} else if (Number(value) >= 0 && Number(value)%1 !== 0){
-			return false;
-		} else {
-			return true;
-		}
-	}
-
-	endCheckBeforeSubmit () {
+	endCheckBeforeSubmit () : Array<any>{
 		// check params of Endpoint
-		let result = [true, ''];
+		let result: Array<any> = [true, ''];
 		let formatedEndpoint = {};
 		this.EndpointInputs.forEach((item) => {
 			formatedEndpoint[Object.keys(item)[0]] = item[Object.keys(item)[0]];
@@ -252,7 +223,7 @@ export class SubnetParamsModelComponent implements OnInit {
 						result = [false, 'Illegal IpAddress']
 					}
 				} else if (prop === 'an_logical_link') {
-					if (!this.isInteger(formatedEndpoint[prop])) {
+					if (!this.Util.isInteger(formatedEndpoint[prop])) {
 						result = [false, 'LogicalID can only be an integer']
 					}
 				}
@@ -264,7 +235,7 @@ export class SubnetParamsModelComponent implements OnInit {
 						result = [false, 'Illegal IpAddress']
 					}
 				} else if (prop === 'cn_logical_link') {
-					if (!this.isInteger(formatedEndpoint[prop])) {
+					if (!this.Util.isInteger(formatedEndpoint[prop])) {
 						result = [false, 'LogicalID can only be an integer']
 					}
 				}
@@ -273,6 +244,25 @@ export class SubnetParamsModelComponent implements OnInit {
 		return result;
 	}
 
+	inputHolder (title: string): string {
+		const titleArr = title.split(' ')
+		if (titleArr.length > 1) {
+			return titleArr.slice(0, 2).join('');
+		} else {
+			return title;
+		}
+	}
+	
+	labelStyle (required: boolean) : object{
+		let style;
+		if (!required) {
+			style = {'margin-left': '18px', 'margin-right': '-18px'};
+		} else {
+			style = {}
+		}
+		return style;
+	}
+
 	handleOk(): void {
 		// Verify that items of EndPoint is correct
 		let endCheckResult = this.endCheckBeforeSubmit()
@@ -294,8 +284,8 @@ export class SubnetParamsModelComponent implements OnInit {
 		} else {
 			params = {...this.formData};
 		}
-		// Verify that each item is not empty
-		if (this.deepCheck(params)) {
+		// Verify that each item is not empty, include special handeling of area_list
+		if (this.Util.deepCheck(params) && this.areaCheckBeforeSubmit(params)) {
 			this.paramsDataChange.emit(params);
 			this.handleCancel();
 		} else {