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

2 files changed, 56 insertions, 45 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 57e08be7..e41e1113 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,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 6409f008..9c3fe319 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
@@ -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();
 			});
 	}