diff options
author | 2020-02-14 10:53:56 +0800 | |
---|---|---|
committer | 2020-02-14 10:54:01 +0800 | |
commit | 83c56f99f08810126fca49e291a9c3bc6000bb72 (patch) | |
tree | f520a2d616b2f2658a82ceac9f504278e11d5244 /usecaseui-portal/src | |
parent | 7669d892d9032312d4f0bd6e76e630fe11a0d384 (diff) |
feat: add toolTips to Forms of csmf slicing page
Change-Id: I08b8785d1c318fc12918eabb21940701c0560fa2
Issue-ID: USECASEUI-368
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src')
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 |