feat: add toolTips to Forms of csmf slicing page

Change-Id: I08b8785d1c318fc12918eabb21940701c0560fa2
Issue-ID: USECASEUI-368
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

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