summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src
diff options
context:
space:
mode:
authorwangyuerg <wangyuerg@chinamobile.com>2021-03-26 17:48:55 +0800
committerwangyuerg <wangyuerg@chinamobile.com>2021-03-26 17:49:16 +0800
commit7c41e83299c8afc2d647d0d25069152b89ce6bd8 (patch)
treee03ec2b7cf6c4faae50e4e0612ec1f93820380c4 /usecaseui-portal/src
parentdac7f905c2761bdb54d21c8bcaee818bd3fd3489 (diff)
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
Diffstat (limited to 'usecaseui-portal/src')
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html29
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts72
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();
});
}