style: add loading after click the OK button to submit new communication service

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

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 57e08be..e41e111 100644 (file)
--- 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,5 +1,5 @@
-<nz-modal [(nzVisible)]="showModel" nzTitle="Create Communication Service" (nzOnCancel)="handleCancel()"
-    (nzOnOk)="handleOk()" nzWidth="80%">
+<nz-modal [(nzVisible)]="showModel" nzTitle="Create Communication Service" (nzOnCancel)="handleCancel()" nzWidth="80%"
+    [nzFooter]="modalFooter">
     <div class="subnet_params_container">
         <form nz-form>
             <nz-form-item *ngFor="let item of comunicationFormItems; let i = index">
@@ -7,20 +7,22 @@
                     {{ item.title }}
                 </nz-form-label>
                 <nz-form-control [nzSpan]="16">
-                    <nz-tooltip    [nzTitle]="item.scoped&&item.scopedText?item.scopedText:''" [nzPlacement]="'right'"
+                    <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'"
+                        <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}"
                             [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()" />
-                            <div *ngIf="item.coverflag" class="detail-wrap">
-                               <p>
-                                   {{ masktext }}
-                                </p> 
-                                <img src="assets/images/coverageAreaMap.png" class="detail-img"/>
-                            </div>
-                            <img src="assets/images/ask-img.png" alt="" class="detail-icon" *ngIf="item.key === 'coverageAreaNumber'" (mouseover)="detailFn(item.coverflag)" (mouseleave)="detailFn(item.coverflag)" />
+                        <div *ngIf="item.coverflag" class="detail-wrap">
+                            <p>
+                                {{ masktext }}
+                            </p>
+                            <img src="assets/images/coverageAreaMap.png" class="detail-img" />
+                        </div>
+                        <img src="assets/images/ask-img.png" alt="" class="detail-icon"
+                            *ngIf="item.key === 'coverageAreaNumber'" (mouseover)="detailFn(item.coverflag)"
+                            (mouseleave)="detailFn(item.coverflag)" />
                     </nz-tooltip>
                     <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
                         *ngIf="item.type === 'radio'">
@@ -44,4 +46,9 @@
             </nz-form-item>
         </form>
     </div>
+    <ng-template #modalFooter>
+        <span>Modal Footer:</span>
+        <button nz-button nzType="default" (click)="handleCancel()">Cancel</button>
+        <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="loading">OK</button>
+    </ng-template>
 </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 6409f00..9c3fe31 100644 (file)
--- 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
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
-import { COMMUNICATION_FORM_ITEMS,MASKTEXT } from "./constants";
+import { COMMUNICATION_FORM_ITEMS, MASKTEXT } from "./constants";
 import { Util } from "../../../../../shared/utils/utils";
 import { SlicingTaskServices } from "../../../../../core/services/slicingTaskServices";
 import { NzMessageService } from "ng-zorro-antd";
@@ -19,26 +19,28 @@ export class BusinessOrderComponent implements OnInit {
        ngOnInit() {}
 
        ngOnChanges() {
-           let areaList = ["Beijing;Beijing;Haidian District;Wanshoulu Street"];
-            if (this.modelParams && this.showModel) {
-                this.slicing_order_info = {...this.modelParams};
-                if (this.slicing_order_info.coverageArea) {
-                    areaList = [];
-                    areaList.push(this.slicing_order_info.coverageArea.split(" ").join(";"));
-                }
-            }
-           this.AreaFormatting(areaList);
+               let areaList = ["Beijing;Beijing;Haidian District;Wanshoulu Street"];
+               if (this.modelParams && this.showModel) {
+                       this.slicing_order_info = { ...this.modelParams };
+                       if (this.slicing_order_info.coverageArea) {
+                               areaList = [];
+                               areaList.push(
+                                       this.slicing_order_info.coverageArea.split(" ").join(";")
+                               );
+                       }
+               }
+               this.AreaFormatting(areaList);
        }
-        detailFn(flag){
-         COMMUNICATION_FORM_ITEMS.forEach((item, index) => {
-             if(item.key=='coverageAreaNumber'){
-                 item["coverflag"] = flag == true ? false:true
-             }
-         })
+       detailFn(flag) {
+               COMMUNICATION_FORM_ITEMS.forEach((item, index) => {
+                       if (item.key == "coverageAreaNumber") {
+                               item["coverflag"] = flag == true ? false : true;
+                       }
+               });
        }
 
-        @Input() showModel: boolean;
-        @Input() modelParams: any;
+       @Input() showModel: boolean;
+       @Input() modelParams: any;
        @Output() cancel = new EventEmitter<boolean>();
        comunicationFormItems = COMMUNICATION_FORM_ITEMS;
        slicing_order_info = {
@@ -56,7 +58,8 @@ export class BusinessOrderComponent implements OnInit {
        validateRulesShow: any[] = [];
        rulesText: any[] = [];
        areaLevel: number = 4;
-        masktext: string = MASKTEXT ;
+       masktext: string = MASKTEXT;
+       loading: boolean = false;
        AreaFormatting(areaList): void {
                this.areaList = areaList.map((item: any) => {
                        let arr = item.split(";");
@@ -102,7 +105,7 @@ export class BusinessOrderComponent implements OnInit {
                const coverage_list: string[] = [];
                let coverageAreas;
                COMMUNICATION_FORM_ITEMS.forEach((item, index) => {
-                       if (item.required && item.type === "input" ) {
+                       if (item.required && item.type === "input") {
                                this.Util.validator(
                                        item.title,
                                        item.key,
@@ -116,19 +119,19 @@ export class BusinessOrderComponent implements OnInit {
                if (this.validateRulesShow.indexOf(true) > -1) {
                        return;
                }
-               for(const key in this.areaList){
-                       const value  = this.areaList[key]
-                        let str = "";
-                        for(const val of value){
-                                const area = val
-                                str += area.selected + ";";
-                                if(!area.selected){
-                                        this.message.error("Please complete the form");
-                                        return;
-                                        }
-                        }
-                        coverage_list.push(str.substring(0, str.length - 1));
-                }
+               for (const key in this.areaList) {
+                       const value = this.areaList[key];
+                       let str = "";
+                       for (const val of value) {
+                               const area = val;
+                               str += area.selected + ";";
+                               if (!area.selected) {
+                                       this.message.error("Please complete the form");
+                                       return;
+                               }
+                       }
+                       coverage_list.push(str.substring(0, str.length - 1));
+               }
                if (coverage_list.length > 1) {
                        coverageAreas = coverage_list.join("|");
                } else {
@@ -150,7 +153,7 @@ export class BusinessOrderComponent implements OnInit {
                const csmfSlicingPurchaseFailedCallback = () => {
                        this.handleCancel();
                };
-               
+               this.loading = true;
                this.myhttp
                        .csmfSlicingPurchase(paramsObj, csmfSlicingPurchaseFailedCallback)
                        .then((res) => {
@@ -164,6 +167,7 @@ export class BusinessOrderComponent implements OnInit {
                                } else {
                                        this.message.create("error", "Network error");
                                }
+                               this.loading = false;
                                this.handleCancel();
                        });
        }