feat:HTML formatting code to optimize the comments in the test

Change-Id: I8abcc7b579279b6c45614d72d46e03195e25b51c
Issue-ID: USECASEUI-368
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

2 files changed, 22 insertions, 35 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
index e4a5ef19..3b6debb9 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
@@ -1,7 +1,6 @@
 <nz-spin nzTip='Loading...' [nzSpinning]="isSpinning">
-    <nz-modal [(nzVisible)]="showModel" nzTitle="Create Slicing Business Order" (nzOnCancel)="handleCancel()"
-              (nzOnOk)="handleOk()"
-              nzWidth="900px">
+    <nz-modal [(nzVisible)]="showModel" nzTitle="Create Communication Service" (nzOnCancel)="handleCancel()"
+              (nzOnOk)="handleOk()" nzWidth="900px">
         <div class="subnet_params_container">
             <form nz-form>
                 <nz-form-item *ngFor="let item of comunicationFormItems; let i = index">
@@ -9,28 +8,18 @@
                         {{ item.title }}
                     </nz-form-label>
                     <nz-form-control [nzSpan]="15">
-                        <input nz-input nz-tooltip
-                               [id]="item.key"
-                               [name]="item.key"
+                        <input nz-input nz-tooltip [id]="item.key" [name]="item.key"
                                [(ngModel)]="slicing_order_info[item.key]"
                                [ngClass]="{'error-input-border':validateRules[i] === true}"
                                *ngIf=" item.title === 'Slicing Business Name' "
-                               (blur)="validator(item.key,slicing_order_info[item.key],i)"
-                        />
-                        <nz-tooltip
-                                [nzTitle]="tooltipText"
-                                [nzPlacement]="'right'"
-                                [nzTrigger]="'focus'"
-                        >
-                            <input nz-input nz-tooltip
-                                   [id]="item.key"
-                                   [name]="item.key"
+                               (blur)="validator(item,slicing_order_info[item.key],i)"/>
+                        <nz-tooltip [nzTitle]="tooltipText" [nzPlacement]="'right'" [nzTrigger]="'focus'">
+                            <input nz-input nz-tooltip [id]="item.key" [name]="item.key"
                                    [(ngModel)]="slicing_order_info[item.key]"
                                    [ngClass]="{'error-input-border':validateRules[i] === true}"
                                    *ngIf=" item.title !== 'Slicing Business Name' && item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' "
-                                   (blur)="validator(item.key,slicing_order_info[item.key],i)"
-                                   (focus)="changeTooltipText(item.title)"
-                            />
+                                   (blur)="validator(item,slicing_order_info[item.key],i)"
+                                   (focus)="changeTooltipText(item.title)"/>
                         </nz-tooltip>
                         <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
                                         *ngIf="item.title === 'Resource Sharing Level'">
@@ -52,8 +41,7 @@
                     <div *ngIf="item.key === 'coverageArea'">
                         <div *ngFor="let area of areaList; let i = index">
                             <nz-form-control [nzSpan]="!ind ? 3 : 4" [nzOffset]="i && !ind ? 6 : 0"
-                                             class="subnet_params_area"
-                                             *ngFor="let item of area; let ind = index">
+                                             class="subnet_params_area" *ngFor="let item of area; let ind = index">
                                 <nz-select [(ngModel)]="item.selected" [name]="'area' + i + ind"
                                            (nzOpenChange)="handleChange(area, item)"
                                            (ngModelChange)=" handleChangeSelected(area, item) ">
@@ -63,8 +51,7 @@
                             </nz-form-control>
                             <nz-form-control [nzSpan]="1" [nzOffset]="1">
                                 <button nz-button nzType="primary" nzSize="small" class="subnet_params_button"
-                                        *ngIf="!i"
-                                        (click)="creatAreaList()">
+                                        *ngIf="!i" (click)="creatAreaList()">
                                     <i nz-icon class="anticon anticon-plus subnet_params_icon"></i>
                                 </button>
                                 <button nz-button nzType="primary" nzSize="small" class="subnet_params_button" *ngIf="i"
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts
index 7db003ff..a07edce2 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts
@@ -179,19 +179,19 @@ export class BusinessOrderComponent implements OnInit {
         return this.rulesText[index] = words + title
     };
 
-    validator(key, val, i) {
+    validator(item, val, i) {
         if (val === null || val.replace(/\s*/g, '').length <= 0) {
             this.validateRules[i] = true;
-            this.getRulesText('Please enter', key, val, i,);
+            this.getRulesText('Please enter ', item.title, val, i,);
             return false
         } else {
             this.validateRules[i] = false;
         }
-        if (key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && isNaN(val)) {
+        if (item.key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && isNaN(val)) {
             this.validateRules[i] = true;
             this.getRulesText('Only numbers can be entered', '', '', i);
             return false
-        } else if (key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && !isNaN(val)) {
+        } else if (item.key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && !isNaN(val)) {
             console.log("-----maxNumberofUEs")
             this.validateRules[i] = true;
             this.getRulesText('Scope: 1-100000', '', '', i);
@@ -199,22 +199,22 @@ export class BusinessOrderComponent implements OnInit {
         } else {
             this.validateRules[i] = false;
         }
-        if ((key === 'expDataRateDL' || key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && isNaN(val)) {
+        if ((item.key === 'expDataRateDL' || item.key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && isNaN(val)) {
             this.validateRules[i] = true;
             this.getRulesText('Only numbers can be entered', '', '', i);
             return false
-        } else if ((key === 'expDataRateDL' || key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && !isNaN(val)) {
+        } else if ((item.key === 'expDataRateDL' || item.key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && !isNaN(val)) {
             this.validateRules[i] = true;
             this.getRulesText('Scope: 100-3000', '', '', i);
             return false
         } else {
             this.validateRules[i] = false;
         }
-        if (key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && isNaN(val)) {
+        if (item.key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && isNaN(val)) {
             this.validateRules[i] = true;
             this.getRulesText('Only numbers can be entered', '', '', i);
             return false
-        } else if (key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && !isNaN(val)) {
+        } else if (item.key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && !isNaN(val)) {
             this.validateRules[i] = true;
             this.getRulesText('Scope: 10-200', '', '', i);
             return false
@@ -224,9 +224,9 @@ export class BusinessOrderComponent implements OnInit {
     }
 
     handleOk(): void {
-        Object.keys(this.slicing_order_info).forEach((item, index) => {
-            if (item !== 'resourceSharingLevel' && item !== 'uEMobilityLevel' && item !== 'coverageArea') {
-                this.validator(item, this.slicing_order_info[item], index)
+        COMMUNICATION_FORM_ITEMS.forEach((item, index) => {
+            if (item.key !== 'resourceSharingLevel' && item.key !== 'uEMobilityLevel' && item.key !== 'coverageArea') {
+                this.validator(item, this.slicing_order_info[item.key], index)
             }
         });
         if (this.validateRules.indexOf(true) > -1) {
@@ -234,7 +234,7 @@ export class BusinessOrderComponent implements OnInit {
         }
         const coverage_list: string[] = [];
         this.areaList.forEach(item => {
-            let str: string = '';
+            let str = '';
             item.forEach(area => {
                 str += area.selected + ';';
             });