summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2020-02-14 10:53:56 +0800
committercyuamber <xuranyjy@chinamobile.com>2020-02-14 10:54:01 +0800
commit83c56f99f08810126fca49e291a9c3bc6000bb72 (patch)
treef520a2d616b2f2658a82ceac9f504278e11d5244
parent7669d892d9032312d4f0bd6e76e630fe11a0d384 (diff)
feat: add toolTips to Forms of csmf slicing page
Change-Id: I08b8785d1c318fc12918eabb21940701c0560fa2 Issue-ID: USECASEUI-368 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html122
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less2
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts15
-rw-r--r--usecaseui-portal/src/styles.less3
4 files changed, 88 insertions, 54 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 7b31b077..dc401089 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,55 +1,73 @@
<nz-spin nzTip='Loading...' [nzSpinning]="isSpinning">
-<nz-modal [(nzVisible)]="showModel" nzTitle="Create Slicing Business Order" (nzOnCancel)="handleCancel()"
- (nzOnOk)="handleOk()"
- nzWidth="900px">
- <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 [nzFor]="item.key">
- {{ item.title }}
- </nz-form-label>
- <nz-form-control [nzSpan]="15">
- <input nz-input [id]="item.key" [name]="item.key" [(ngModel)]="slicing_order_info[item.key]" [ngClass]="{'error-input-border':validateRules[i] === true}"
- *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' " (blur)="validator(item.key,slicing_order_info[item.key],i)"/>
- <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
- *ngIf="item.title === 'Resource Sharing Level'">
- <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.title === 'Mobility'">
- <nz-option [nzValue]="option.key" [nzLabel]="option.title" *ngFor="let option of item.options">
- </nz-option>
- </nz-select>
- <nz-form-explain *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' && validateRules[i]" class="validateRules">{{rulesText[i]}}</nz-form-explain>
- </nz-form-control>
- <div *ngIf="item.key === 'coverageArea'">
- <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>
+ <nz-modal [(nzVisible)]="showModel" nzTitle="Create Slicing Business Order" (nzOnCancel)="handleCancel()"
+ (nzOnOk)="handleOk()"
+ nzWidth="900px">
+ <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 [nzFor]="item.key">
+ {{ item.title }}
+ </nz-form-label>
+ <nz-form-control [nzSpan]="15">
+ <nz-tooltip
+ [nzTitle]="tooltipText"
+ [nzPlacement]="'right'"
+ [nzTrigger]="'focus'"
+ >
+ <input nz-input nz-tooltip
+ [id]="item.key"
+ [name]="item.key"
+ [(ngModel)]="slicing_order_info[item.key]"
+ [ngClass]="{'error-input-border':validateRules[i] === true}"
+ *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' "
+ (blur)="validator(item.key,slicing_order_info[item.key],i)"
+ (focus)="changeTooltipText(item.title)"
+ />
+ </nz-tooltip>
+ <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
+ *ngIf="item.title === 'Resource Sharing Level'">
+ <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.title === 'Mobility'">
+ <nz-option [nzValue]="option.key" [nzLabel]="option.title"
+ *ngFor="let option of item.options">
+ </nz-option>
+ </nz-select>
+ <nz-form-explain
+ *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' && validateRules[i]"
+ class="validateRules">{{rulesText[i]}}
+ </nz-form-explain>
+ </nz-form-control>
+ <div *ngIf="item.key === 'coverageArea'">
+ <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>
- </div>
- </nz-form-item>
- </form>
- </div>
-</nz-modal>
+ </nz-form-item>
+ </form>
+ </div>
+ </nz-modal>
</nz-spin> \ 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.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less
index 2840bbed..52d3ce3e 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less
@@ -22,4 +22,4 @@
}
.error-input-border{
border-color: red!important;
-} \ 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 28f99336..47578b52 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
@@ -38,6 +38,7 @@ export class BusinessOrderComponent implements OnInit {
isSpinning: boolean = false;
validateRules: any[] = [];
rulesText: any[] = [];
+ tooltipText: string = 'Scope: 1-100000';
AreaFormatting() {
let areaList = ['Beijing;Beijing;Haidian District;Wanshoulu Street'];
this.areaList = areaList.map((item: any) => {
@@ -160,6 +161,18 @@ export class BusinessOrderComponent implements OnInit {
};
}
+ changeTooltipText(title){
+ 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'
+ }
+ }
+
getRulesText = (words,title,val,index) => {
return this.rulesText[index] = words + title
};
@@ -209,7 +222,7 @@ export class BusinessOrderComponent implements OnInit {
return false
}else if(key === 'useInterval' && !/^[1-9]\d*$/.test(val) && !isNaN(val)){
this.validateRules[i] = true;
- this.getRulesText('Scope: >=1','','',i);
+ this.getRulesText('Scope: ≥1','','',i);
return false
}else {
this.validateRules[i] = false;
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index bd3a6b79..0cbd1a44 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -859,4 +859,7 @@ nz-notification-container .ant-notification{
.ant-table-wrapper {
padding: 10px;
}
+}
+#cdk-overlay-13.cdk-overlay-pane{
+ display: none!important;
} \ No newline at end of file