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>

5 files changed, 108 insertions, 130 deletions

diff --git a/usecaseui-portal/src/app/shared/utils/utils.ts b/usecaseui-portal/src/app/shared/utils/utils.ts
index 63e19075..0633778c 100644
--- a/usecaseui-portal/src/app/shared/utils/utils.ts
+++ b/usecaseui-portal/src/app/shared/utils/utils.ts
@@ -104,13 +104,13 @@ export class Util {
 				if (!this.deepCheck(target[i])) {
 					return false;
 				}
-			  }
+			}
 		} else if (type === '[object Object]') {
 			for (const prop in target) {
 				if (target.hasOwnProperty(prop)) {
-				  if (!this.deepCheck(target[prop])) {
-					  return false;
-				  }
+                    if (!this.deepCheck(target[prop])) {
+                        return false;
+                    }
 				}
 			}
 		} else {
@@ -124,10 +124,10 @@ export class Util {
     }
     pick(obj: object, arr: Array<string>): Object {
         return arr.reduce((iter, val) => {
-          if(val in obj) {
-            iter[val] = obj[val];
-          }
-          return iter;
+            if(val in obj) {
+                iter[val] = obj[val];
+            }
+            return iter;
         }, {});
       }
 }
\ 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.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",
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
index a448bcf2..20bcd104 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
@@ -32,7 +32,6 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
     ngOnInit() {}
 
     ngOnDestroy() {
-        console.log(this.progressingTimer)
         this.progressingTimer.forEach((item) => {
             clearInterval(item.timer)
         })
@@ -51,26 +50,29 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
     getCSMFBusinessList(): void {
         this.loading = true;
         this.listOfData = [];
-        let paramsObj = {
+        const paramsObj = {
             status: this.selectedValue.toLocaleLowerCase(),
             pageNo: this.pageIndex,
             pageSize: this.pageSize
         };
-        let getCSMFSlicingBusinessListFailedCallback  = () => {
+        const getCSMFSlicingBusinessListFailedCallback  = () => {
             this.loading = false;
         }
         this.myhttp.getCSMFSlicingBusinessList(paramsObj, getCSMFSlicingBusinessListFailedCallback).then(res => {
             const { result_body: { slicing_order_list, record_number } } = res;
-            this.loading = false;
+            setTimeout(() => {
+                this.loading = false;
+            }, 100);
+            
             this.total = record_number;
             if (slicing_order_list !== null && slicing_order_list.length > 0) {
                 this.listOfData = slicing_order_list.map((item, index) => {
                     item.order_creation_time = moment(Number(item.order_creation_time)).format('YYYY-MM-DD HH:mm:ss');
                     if (item.last_operation_progress && item.last_operation_type && Number(item.last_operation_progress) < 100) {
-                        let updata = (prodata: { operation_progress: string }) => {
+                        const updata = (prodata: { operation_progress: string }) => {
                             item.last_operation_progress = prodata.operation_progress || item.last_operation_progress;
                         };
-                        let obj = {
+                        const obj = {
                             serviceId: item.order_id
                         };
                         if (item.last_operation_type.toUpperCase() === 'DELETE') this.terminateStart[index] = true
@@ -120,23 +122,20 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
             },
             nzCancelText: 'No',
             nzOnCancel: () => {
-                let singleSlicing = Object.assign({}, this.listOfData[i]);
+                const singleSlicing = Object.assign({}, this.listOfData[i]);
                 this.listOfData[i] = singleSlicing;
                 this.listOfData = [...this.listOfData];
             }
         });
     }
     changeActivate(paramsObj: any, isActivate: boolean, index: number): void {
-        this.loading = true;
-        let changeActivateFailedCallback = () => {
-            this.loading = false;
-            let singleSlicing = Object.assign({}, this.listOfData[index]);
+        const changeActivateFailedCallback = () => {
+            const singleSlicing = Object.assign({}, this.listOfData[index]);
             this.listOfData[index] = singleSlicing;
             this.listOfData = [...this.listOfData];
             this.getCSMFBusinessList();
         }
         this.myhttp.changeActivateSlicingService(paramsObj, isActivate, changeActivateFailedCallback).then((res) => {
-            this.loading = false;
             this.getCSMFBusinessList();
         })
     }
@@ -146,15 +145,12 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
             nzTitle: 'Are you sure you want to terminate this task?',
             nzContent: '<b>Name:&nbsp;</b>' + slicing.order_name,
             nzOnOk: () => {
-                let paramsObj = { serviceId: slicing.order_id };
+                const paramsObj = { serviceId: slicing.order_id };
                 this.terminateStart[index] = true;
-                this.loading = true;
-                let terminateFailedCallback  = () => {
-                    this.loading = false;
+                const terminateFailedCallback  = () => {
                     this.terminateStart[index] = false;
                 }
                 this.myhttp.terminateSlicingService(paramsObj, terminateFailedCallback).then(res => {
-                    this.loading = false;
                     this.getCSMFBusinessList();
                 })
             },
@@ -166,8 +162,8 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
     }
     queryProgress(obj:any, index:number, callback:any) {
         return new Promise(res => {
-            let requery = () => {
-                let queryProgressFailedCallback  = () => {
+            const requery = () => {
+                const queryProgressFailedCallback  = () => {
                     this.progressingTimer.forEach((item) => {
                         if (item.serviceId === obj.serviceId) {
                             clearInterval(item.timer);