feat: fix bugs of submit vertification bug, change checkbox to radio, pagination and scrolling of table

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

5 files changed, 118 insertions, 54 deletions

diff --git a/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json b/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json
index 07e6c98c..216a5497 100644
--- a/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json
+++ b/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json
@@ -70,7 +70,7 @@
             "sliceProfile_TN_BH_sST": "test_sliceProfile_TN_BH _sST",

             "sliceProfile_TN_BH_sNSSAI": "test_tn_service_snssai_01",

             "sliceProfile_TN_resourceSharingLevel": "shared",

-            "tn_connection_links": ["123213"],

+            "tn_connection_links": "123213",

             "tn_connection_links_option": [{

                     "id": "123213",

                     "AN": "1an",

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 f9e5e28c..6e5b5b0e 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
@@ -57,7 +57,8 @@
 					</nz-input-group>
 					<!-- connection links table -->
 					<div *ngIf="item.title === 'Connection Links'">
-						<nz-table #basicTable [nzData]="[{}]" nzShowPagination="false">
+						<nz-table #basicTable [nzData]="this.formData[item.options.key]" nzShowPagination="true"
+							nzPageSize="2">
 							<thead>
 								<tr>
 									<th *ngFor="let val of item.header" class="subnet_td">{{val.title}}</th>
@@ -65,14 +66,18 @@
 								</tr>
 							</thead>
 							<tbody>
-								<tr *ngFor="let t of formData[item.options.key]">
+								<tr *ngFor="let t of basicTable.data">
 									<td *ngFor="let val of item.header" class="subnet_td">
 										{{t[val.key]}}
 									</td>
-									<td nzShowCheckbox="true" [nzChecked]="t.checked"
+									<!-- <td nzShowCheckbox="true" [nzChecked]="t.checked"
 										(nzCheckedChange)="changeLinkCheck(t.id, $event)" [nzDisabled]="item.disable"
 										class="subnet_td">
-										<!-- <input type="checkbox" ng-model="t.checked" ng-change="nzCheckedChange(t.id)"> -->
+									</td> -->
+									<td>
+										<input type="radio" name="linkcheck" [value]="t.id"
+											(click)="changeLinkCheck(t.id)" [checked]="t.checked"
+											[disabled]="item.disable" class="table_radio" />
 									</td>
 								</tr>
 							</tbody>
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 a8674691..589a507e 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
@@ -1,8 +1,18 @@
 .subnet_params_container {

     padding-left: 3%;

 

+    ::ng-deep .ant-table {

+        width: 600px !important;

+        overflow: scroll !important;

+        height: 200px;

+    }

+

+    .table_radio {

+        color: #EAEAEA;

+    }

+

     .subnet_td {

-        width: 100px;

+        min-width: 100px;

     }

 

     .subnet_params_area {

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 c878de59..792e8dce 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
@@ -56,12 +56,13 @@ export class SubnetParamsModelComponent implements OnInit {
 				this.CNkeyList = this.transferFormItems.find((item) => {return item.title === 'CN Endpoint'}).options.map((val) => {return val.key})
 				this.keyList = this.ANkeyList.concat(this.CNkeyList)
 				this.formData['tn_connection_links_option'].forEach((item) => { // add init selection status
-					if (this.formData['tn_connection_links']!== null && this.formData['tn_connection_links'].indexOf(item.id) !== -1) {
+					if (typeof this.formData['tn_connection_links'] !== 'undefined' && this.formData['tn_connection_links'] !== '' && this.formData['tn_connection_links'] !== null && item.id === this.formData['tn_connection_links']) {
 						item.checked = true
 					} else {
 						item.checked = false
 					}
 				})
+				console.log(this.formData['tn_connection_links_option'])
 				this.judgeTn() // init judge
 			}
 			// If the endpoint related parameters from the back end are incomplete, delete the endpoint item
@@ -98,10 +99,10 @@ export class SubnetParamsModelComponent implements OnInit {
 				item.checked = false
 			})
 			this.formData['tn_connection_links'] = null
+			this.notPassPara = ['tn_connection_links', 'tn_connection_links_option']
 			this.transferFormItems.forEach((item) => {
 				if (item.title === 'Connection Links') {
 					item.disable = true
-					this.notPassPara = ['tn_connection_links', 'tn_connection_links_option']
 				} else if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
 					item.required = true
 					item.disable = false
@@ -112,15 +113,16 @@ export class SubnetParamsModelComponent implements OnInit {
 				if (item.title === 'Connection Links') {
 					item.disable = false
 				} else if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
-					if (this.formData['tn_connection_links']!==null && this.formData['tn_connection_links'].length !== 0) {
+					if (typeof this.formData['tn_connection_links'] !== 'undefined' && this.formData['tn_connection_links']!==null && this.formData['tn_connection_links'] !== '') {
 						item.disable = true
 						item.required = false
 						this.notPassPara = ['tn_connection_links_option']
 						this.notPassPara = this.notPassPara.concat(this.ANkeyList, this.CNkeyList)
-						console.log('not', this.notPassPara)
-					} else if (this.formData['tn_connection_links']!==null && this.formData['tn_connection_links'].length === 0) {
+					} else { //:todo
+						this.formData['tn_connection_links'] = ''
 						item.disable = false
 						item.required = true
+						this.notPassPara = ['tn_connection_links_option']
 					}
 				}
 			})
@@ -158,12 +160,16 @@ export class SubnetParamsModelComponent implements OnInit {
 		}
 	}
 
-	changeLinkCheck (id: string, e: boolean) : void{ // update the selection state
-		this.formData['tn_connection_links_option'].find((item) => {
-			return item.id === id
-		}).checked = e
-		const checkedList = this.formData['tn_connection_links_option'].filter((item) => {return item.checked === true})
-		this.formData['tn_connection_links'] = checkedList.map((item) => {return item.id}) //  get the selected id
+	changeLinkCheck (id: string) : void{ // update the selection state
+		this.formData['tn_connection_links_option'].forEach((item) => {
+			if (item.id === id) {
+				item.checked = true
+			} else {
+				item.checked = false
+			}
+		})
+		console.log(this.formData['tn_connection_links_option'])
+		this.formData['tn_connection_links'] = id //  get the selected id
 		this.judgeTn()
 	}
 
@@ -386,17 +392,26 @@ export class SubnetParamsModelComponent implements OnInit {
 		} else {
 			params = {...this.formData};
 		}
-		// Verify that each item exclude endpoint is not empty, include special handeling of area_list
-		let checkParams = params
-		if (this.title === 'An' || this.title === 'Cn') {
-			checkParams = this.coreFormItems.filter((item) => {
-				return item.required === true
-			})
-		} else if (this.title = 'Tn') {
-			checkParams = this.transferFormItems.filter((item) => {
-				return item.required === true
-			})
-		}
+        // Verify that each item exclude endpoint is not empty, include special handeling of area_list
+        let checkParams : object= params
+        let requireKeyList :string[] = []
+        let targetFormItems : any[] = []
+        if (this.title === 'An' || this.title === 'Cn') {
+            targetFormItems = this.coreFormItems
+        } else if (this.title = 'Tn') {
+            targetFormItems = this.transferFormItems
+        }
+        for (let item of targetFormItems) {
+            if (typeof item.required !== 'undefined' && item.required) {
+                if (typeof item.type !== 'undefined' && item.type !== 'endpoint')
+                    {
+                        requireKeyList.push(item.key)
+                    }
+            }
+        }
+        console.log(requireKeyList)
+        checkParams = this.Util.pick(params, requireKeyList)
+        console.log(checkParams)
 		if (this.Util.deepCheck(checkParams) && this.areaCheckBeforeSubmit(params)) {
 			this.paramsDataChange.emit(params);
 			this.noPassParaChange.emit(this.notPassPara)
diff --git a/usecaseui-portal/src/constants/constants.ts b/usecaseui-portal/src/constants/constants.ts
index ab40534b..fecbcda8 100644
--- a/usecaseui-portal/src/constants/constants.ts
+++ b/usecaseui-portal/src/constants/constants.ts
@@ -134,27 +134,31 @@ export const TRANSFRER_FORM_ITEMS = [
         title: 'S-NSSAI',

         key: 'sliceProfile_TN_BH_sNSSAI',

         required: true,

+        type: 'input'

     },

 	{

         title: 'Latency (ms)',

         key: 'tn_bh_latency',

-        required: true

+        required: true,

+        type: 'input'

     },

     {

         title: 'Jitter',

         key: 'sliceProfile_TN_BH_jitte',

         required: false,

+        type: 'input'

     },

 	{

 		title: 'MaxBandwidth',

         key: 'tn_bh_bandwidth',

-        required: true

+        required: true,

+        type: 'input'

     },

     {

         title: 'Resource Sharing Level', // select

         key: 'sliceProfile_TN_resourceSharingLevel', // :new

         required: true,

-        type: '',

+        type: 'radio',

         options: [

             {

                 title: 'Shared',

@@ -170,6 +174,7 @@ export const TRANSFRER_FORM_ITEMS = [
         title: 'Connection Links',// table

         key: 'tn_connection_links', // :new

         required: false, // combined

+        type: 'table',

         options: {

             title: 'connection_links_option',

             key: 'tn_connection_links_option'

@@ -201,6 +206,7 @@ export const TRANSFRER_FORM_ITEMS = [
     {

         title:'AN Endpoint', // input group

         key:"an_Endpoint",

+        type: 'endpoint',

         required: false,

         disable: false,

         options: [

@@ -224,6 +230,7 @@ export const TRANSFRER_FORM_ITEMS = [
     {

         title:'CN Endpoint',

         key:"cn_Endpoint",

+        type: 'endpoint',

         required: false,

         disable: false,

         options: [

@@ -251,12 +258,14 @@ export const CORE_FORM_ITEMS = {
         {

             title: 'S-NSSAI',

             key: 'sliceProfile_AN_sNSSAI',

-            required: true

+            required: true,

+            type: 'input'

         },

         {

             title: 'Resource Sharing Level',

             key: 'sliceProfile_AN_resourceSharingLevel',

             required: true,

+            type: 'radio',

             options: [

                 {

                     title: 'Shared',

@@ -272,6 +281,7 @@ export const CORE_FORM_ITEMS = {
             title: 'Mobility',

             key: 'sliceProfile_AN_uEMobilityLevel',

             required: true,

+            type: 'select',

             options: [

                 {

                     title: 'Stationary',

@@ -294,69 +304,82 @@ export const CORE_FORM_ITEMS = {
         {

             title: 'Latency (ms)',

             key: 'an_latency',

-            required: true

+            required: true,

+            type: 'input'

         },

         {

             title: 'Max Number of PUD Session',

             key: 'sliceProfile_AN_maxNumberofPDUSession',

-            required: true

+            required: true,

+            type: 'input'

         },

         {

             title: 'Max Number of UEs',

             key: 'sliceProfile_AN_maxNumberofUEs',

-            required: true

+            required: true,

+            type: 'input'

         },

         {

             title: 'Activity Factor (%)',

             key: 'sliceProfile_AN_activityFactor',

-            required: true

+            required: true,

+            type: 'input'

         },

         {

             title: 'User Downlink Experience Rate（Mbps）',

             key: 'sliceProfile_AN_expDataRateDL',

-            required: true

+            required: true,

+            type: 'input'

         },

         {

             title: 'User Uplink Experience Rate（Mbps）',

             key: 'sliceProfile_AN_expDataRateUL',

-            required: true

+            required: true,

+            type: 'input'

         },

         {

             title: 'Downlink Regional Traffic Density（Mbps/km ）',

             key: 'sliceProfile_AN_areaTrafficCapDL',

-            required: false

+            required: false,

+            type: 'input'

         },

         {

             title: 'Uplink Regional Traffic Density（Mbps/km ）',

             key: 'sliceProfile_AN_areaTrafficCapUL',

-            required: false

+            required: false,

+            type: 'input'

         },

         {

             title: 'Script Name',

             key: 'an_script_name',

-            required: false

+            required: false,

+            type: 'input'

         },

         {

             title: 'Overall User Density',

             key: 'sliceProfile_AN_overallUserDensity',

-            required: false

+            required: false,

+            type: 'input'

         },

         {

             title: 'Coverage Area Ta List',

             key: 'an_coverage_area_ta_list',

-            required: true

+            required: true,

+            type: 'area'

         }

     ],

     "Cn": [

         {

             title: 'S-NSSAI',

             key: 'cn_service_snssai',

-            required: true

+            required: true,

+            type: 'input'

         },

         {

             title: 'Resource Sharing Level',

             key: 'cn_resource_sharing_level',

             required: true,

+            type: 'radio',

             options: [

                 {

                     title: 'Shared',

@@ -372,6 +395,7 @@ export const CORE_FORM_ITEMS = {
             title: 'Mobility',

             key: 'cn_ue_mobility_level',

             required: true,

+            type: 'select',

             options: [

                 {

                     title: 'Stationary',

@@ -394,52 +418,62 @@ export const CORE_FORM_ITEMS = {
         {

             title: 'Latency (ms)',

             key: 'cn_latency',

-            required: true

+            required: true,

+            type: 'input'

         },

         {

             title: 'Max Number of UEs',

             key: 'cn_max_number_of_ues',

-            required: true

+            required: true,

+            type: 'input'

         },

         {

             title: 'Activity Factor (%)',

             key: 'cn_activity_factor',

-            required: true

+            required: true,

+            type: 'input'

         },

         {

             title: 'User Downlink Experience Rate（Mbps）',

             key: 'cn_exp_data_rate_dl',

-            required: true

+            required: true,

+            type: 'input'

         },

         {

             title: 'User Uplink Experience Rate（Mbps）',

             key: 'cn_exp_data_rate_ul',

-            required: true

+            required: true,

+            type: 'input'

         },

         {

             title: 'Downlink Regional Traffic Density（Mbps/km ）',

             key: 'cn_area_traffic_cap_dl',

-            required: false

+            required: false,

+            type: 'input'

         },

         {

             title: 'Uplink Regional Traffic Density（Mbps/km ）',

             key: 'cn_area_traffic_cap_ul',

-            required: false

+            required: false,

+            type: 'input'

         },

         {

             title: 'Script Name',

             key: 'cn_script_name',

-            required: false

+            required: false,

+            type: 'input'

         },

         {

             title: 'Max Number of PUD Session',

             key: 'sliceProfile_CN_maxNumberofPDUSession',

-            required: true

+            required: true,

+            type: 'input'

         },

         {

             title: 'OverAll User Density',

             key: 'sliceProfile_CN_overallUserDensity',

-            required: false

+            required: false,

+            type: 'input'

         },

         // {

         //     title: 'ip-address',