From 7c41e83299c8afc2d647d0d25069152b89ce6bd8 Mon Sep 17 00:00:00 2001 From: wangyuerg Date: Fri, 26 Mar 2021 17:48:55 +0800 Subject: style: add loading after click the OK button to submit new communication service Signed-off-by: wangyuerg Change-Id: Iffd508a7a08df29d0c9eacb6baa9841cd8f5e071 Issue-ID: USECASEUI-527 --- .../business-order/business-order.component.html | 29 +++++---- .../business-order/business-order.component.ts | 72 ++++++++++++---------- 2 files changed, 56 insertions(+), 45 deletions(-) (limited to 'usecaseui-portal') 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 @@ - +
@@ -7,20 +7,22 @@ {{ item.title }} - - -
-

- {{ masktext }} -

- -
- +
+

+ {{ masktext }} +

+ +
+ @@ -44,4 +46,9 @@
+ + Modal Footer: + + + \ 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(); 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(); }); } -- cgit 1.2.3-korg