feat: change the data struc and loading timer of csmf page

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

3 files changed, 85 insertions, 103 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 38ecbf11..0f138db8 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,68 +1,60 @@
-<nz-spin nzTip='Loading...' [nzSpinning]="isSpinning">
-    <nz-modal [(nzVisible)]="showModel" nzTitle="Create Communication Service" (nzOnCancel)="handleCancel()"
-        (nzOnOk)="handleOk()" nzWidth="80%">
-        <div class="subnet_params_container">
-            <form nz-form>
-                <nz-form-item *ngFor="let item of comunicationFormItems; let i = index">
-                    <nz-form-label [nzSpan]="6" [nzRequired]="item.required" [nzFor]=" item.key">
-                        {{ item.title }}
-                    </nz-form-label>
-                    <nz-form-control [nzSpan]="15">
-                        <input nz-input nz-tooltip [id]="item.key" [name]="item.key"
+<nz-modal [(nzVisible)]="showModel" nzTitle="Create Communication Service" (nzOnCancel)="handleCancel()"
+    (nzOnOk)="handleOk()" nzWidth="80%">
+    <div class="subnet_params_container">
+        <form nz-form>
+            <nz-form-item *ngFor="let item of comunicationFormItems; let i = index">
+                <nz-form-label [nzSpan]="6" [nzRequired]="item.required" [nzFor]=" item.key">
+                    {{ item.title }}
+                </nz-form-label>
+                <nz-form-control [nzSpan]="15">
+                    <nz-tooltip [nzTitle]="item.scoped&&item.scopedText?item.scopedText:''" [nzPlacement]="'right'"
+                        [nzTrigger]="'focus'">
+                        <input nz-input nz-tooltip [id]="item.key" [name]="item.key" *ngIf="item.type === 'input'"
                             [(ngModel)]="slicing_order_info[item.key]"
-                            [ngClass]="{'error-input-border':validateRulesShow[i] === true}"
-                            *ngIf=" item.type === 'input'&&!item.scoped "
-                            [placeholder]="item.placeholder?item.placeholder:''"
-                            (blur)="item.required?this.Util.validator(item.title,item.key,slicing_order_info[item.key],i,rulesText,validateRulesShow):this.Util.validator()" />
-                        <nz-tooltip [nzTitle]="tooltipText" [nzPlacement]="'right'" [nzTrigger]="'focus'">
-                            <input nz-input nz-tooltip [id]="item.key" [name]="item.key" *ngIf="item.scoped"
-                                [(ngModel)]="slicing_order_info[item.key]"
-                                [ngClass]="{'error-input-border':validateRulesShow[i] === true}"
-                                (blur)="this.Util.validator(item.title,item.key,slicing_order_info[item.key],i,rulesText,validateRulesShow)"
-                                (focus)="changeTooltipText(item.title)" />
-                        </nz-tooltip>
-                        <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
-                            *ngIf="item.type === 'radio'">
-                            <label nz-radio [nzValue]="option.key" *ngFor="let option of item.options">
-                                {{ option.title }}
-                            </label>
-                        </nz-radio-group>
-                        <nz-select [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
-                            *ngIf="item.type === 'select'">
-                            <nz-option [nzValue]="option.key" [nzLabel]="option.title"
-                                *ngFor="let option of item.options">
-                            </nz-option>
-                        </nz-select>
-                        <nz-form-explain *ngIf="item.type === 'input' && validateRulesShow[i]" class="validateRules">
-                            {{rulesText[i]}}
-                        </nz-form-explain>
-                    </nz-form-control>
+                            [ngClass]="{'error-input-border' : validateRulesShow[i] === true}"
+                            [placeholder]="item.placeholder ? item.placeholder : ''"
+                            (blur)="item.required ? this.Util.validator(item.title,item.key,slicing_order_info[item.key],i,rulesText,validateRulesShow) : this.Util.validator()" />
+                    </nz-tooltip>
+                    <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
+                        *ngIf="item.type === 'radio'">
+                        <label nz-radio [nzValue]="option.key" *ngFor="let option of item.options">
+                            {{ option.title }}
+                        </label>
+                    </nz-radio-group>
+                    <nz-select [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
+                        *ngIf="item.type === 'select'">
+                        <nz-option [nzValue]="option.key" [nzLabel]="option.title" *ngFor="let option of item.options">
+                        </nz-option>
+                    </nz-select>
+                    <nz-form-explain *ngIf="item.type === 'input' && validateRulesShow[i]" class="validateRules">
+                        {{rulesText[i]}}
+                    </nz-form-explain>
+                </nz-form-control>
 
-                    <div *ngIf="item.type === 'city-select'">
-                        <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">
-                                <nz-select [(ngModel)]="item.selected" [name]="'area' + i + ind"
-                                    (nzOpenChange)="handleChange(area, item)"
-                                    (ngModelChange)=" handleChangeSelected(area, item) ">
-                                    <nz-option [nzValue]="op.name" [nzLabel]="op.name" *ngFor="let op of item.options">
-                                    </nz-option>
-                                </nz-select>
-                            </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()">
-                                    <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"
-                                    (click)="deleteAreaList(i)">
-                                    <i nz-icon class="anticon anticon-minus subnet_params_icon"></i>
-                                </button>
-                            </nz-form-control>
-                        </div>
+                <div *ngIf="item.type === 'city-select'">
+                    <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">
+                            <nz-select [(ngModel)]="item.selected" [name]="'area' + i + ind"
+                                (nzOpenChange)="handleChange(area, item)"
+                                (ngModelChange)=" handleChangeSelected(area, item) ">
+                                <nz-option [nzValue]="op.name" [nzLabel]="op.name" *ngFor="let op of item.options">
+                                </nz-option>
+                            </nz-select>
+                        </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()">
+                                <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"
+                                (click)="deleteAreaList(i)">
+                                <i nz-icon class="anticon anticon-minus subnet_params_icon"></i>
+                            </button>
+                        </nz-form-control>
                     </div>
-                </nz-form-item>
-            </form>
-        </div>
-    </nz-modal>
-</nz-spin>
\ No newline at end of file
+                </div>
+            </nz-form-item>
+        </form>
+    </div>
+</nz-modal>
\ No newline at end of file
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 8e58a60c..bfef2d20 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
@@ -40,10 +40,8 @@ export class BusinessOrderComponent implements OnInit {
         coverageAreaNumber: null
     };
     areaList: any[] = [];
-    isSpinning: boolean = false;
     validateRulesShow: any[] = [];
     rulesText: any[] = [];
-    tooltipText: string = 'Scope: 1-100000';
 
     AreaFormatting(): void {
         let areaList = ['Beijing;Beijing;Haidian District;Wanshoulu Street'];
@@ -71,7 +69,7 @@ export class BusinessOrderComponent implements OnInit {
     }
 
     creatAreaList(): void {
-        let arr = [
+        const arr = [
             {
                 key: 'province',
                 selected: '',
@@ -156,30 +154,16 @@ export class BusinessOrderComponent implements OnInit {
             coverageArea: '',
             coverageAreaNumber: null
         };
-    }
-
-    changeTooltipText(title: string): void {
-        if (title === 'Max Number of UEs') {
-            this.tooltipText = 'Scope: 1-100000'
-        } else if (title === 'Data Rate Downlink (Mbps)' || title === 'Data Rate Uplink (Mbps)') {
-            this.tooltipText = 'Scope: 100-3000'
-        } else if (title === 'Latency') {
-            this.tooltipText = 'Scope: 10-200'
-        } else if (title === 'Use Interval (Month)') {
-            this.tooltipText = 'Scope: ≥1'
-        }
+        this.validateRulesShow = []
     }
 
     handleOk(): void {
         const coverage_list: string[] = [];
-        let coverageAreaNumber = null;
         let coverageAreas;
 
         COMMUNICATION_FORM_ITEMS.forEach((item, index) => {
-            if (item.key !== 'resourceSharingLevel' && item.key !== 'uEMobilityLevel' && item.key !== 'coverageArea' && item.key !== 'coverageAreaNumber') {
+            if (item.required && item.type==="input") {
                 this.Util.validator(item.title,item.key, this.slicing_order_info[item.key], index, this.rulesText, this.validateRulesShow)
-            }else if(item.key === 'coverageAreaNumber'){
-                coverageAreaNumber = this.slicing_order_info[item.key]
             }
         });
         if (this.validateRulesShow.indexOf(true) > -1) {
@@ -193,12 +177,12 @@ export class BusinessOrderComponent implements OnInit {
             });
             coverage_list.push(str.substring(0, str.length - 1));
         });
-        
         if (coverage_list.length > 1) {
             coverageAreas = coverage_list.join('|')
         } else {
             coverageAreas = coverage_list.toString();
         }
+        const coverageAreaNumber = this.slicing_order_info["coverageAreaNumber"];
         if(coverageAreaNumber){
             this.slicing_order_info.coverageArea = `${coverageAreas}-${coverageAreaNumber}`;
         }else{
@@ -209,14 +193,16 @@ export class BusinessOrderComponent implements OnInit {
         const paramsObj = {
             slicing_order_info: this.slicing_order_info
         };
-        console.log(paramsObj,"===>paramsObj")
-        this.isSpinning = true;
         const csmfSlicingPurchaseFailedCallback  = () => {
             this.handleCancel();
-            this.isSpinning = false;
         }
         this.myhttp.csmfSlicingPurchase(paramsObj, csmfSlicingPurchaseFailedCallback).then(res => {
-            this.isSpinning = false;
+            const result = res.result_header;
+            if(result&&result.result_code&&+result.result_code===200){
+                console.log(res)
+            }else{
+                this.message.create('error','Network error')
+            }
             this.handleCancel();
         })
     }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts
index 4f64a5c7..9f79bff6 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts
@@ -1,46 +1,50 @@
 export const COMMUNICATION_FORM_ITEMS = [
-    /***
-        title: MARK THE ITEM NAME,
-        key:  MARK THE ITEM KEY,
-        type: MARKE THE ITEM TYPE, CAN BE ADDED IF NECESSARY: input/select/radio/city-select
-        required: IF REQUIRED, 
+    /*******
+        title /MUST/: MARK THE ITEM NAME,
+        key /MUST/:  MARK THE ITEM KEY,
+        type /MUST/: MARKE THE ITEM TYPE, CAN BE ADDED IF NECESSARY: input/select/radio/city-select
+        required /MUST/: IF REQUIRED, 
         scoped: IF SCOPED NUMBERS, CAN BE EMITTED IF NOT
+        scopedText: SCOPED NUMBERS' DESCRIPTION. IF SCOPED NUMBERS EXITS, IT'S A MUST
         placeholder: IF PLACEHOLDER, CAN BE EMITTED IF NOT
         options: IF ITEM NEEDS OPTIONS, CAN BE EMITTED IF NOT
-    ***/
+    ********/
     {
         title: 'Communication Service Name',
         key: 'name',
         type:"input",
         required:true 
-
     },
     {
         title: 'Max Number of UEs',
         key: 'maxNumberofUEs',
         type:"input",
         scoped:true, 
+        scopedText:'Scope: 1-100000',
         required:true
     },
     {
-        title: 'Data Rate Downlink (Mbps)',
-        key: 'expDataRateDL',
+        title: 'Data Rate Uplink (Mbps)',
+        key: 'expDataRateUL',
         type:"input",
         scoped:true,
+        scopedText:'Scope: 100-3000',
         required:true
     },
     {
-        title: 'Latency',
-        key: 'latency',
+        title: 'Data Rate Downlink (Mbps)',
+        key: 'expDataRateDL',
         type:"input",
         scoped:true,
+        scopedText:'Scope: 100-3000',
         required:true
     },
     {
-        title: 'Data Rate Uplink (Mbps)',
-        key: 'expDataRateUL',
+        title: 'Latency',
+        key: 'latency',
         type:"input",
         scoped:true,
+        scopedText:'Scope: 10-200',
         required:true
     },
     {
@@ -185,7 +189,7 @@ export const COMMUNICATION_FORM_ADDRESS = [
             "name": "Shanghai City",
             "county": [{
                 "id": "2001",
-                "name": "udongxin District",
+                "name": "Pudongxin District",
                 "street": [
                     {
                         "id": "200101",