feat: add coverage area number

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

2 files changed, 52 insertions, 29 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 be199b5e..e540c655 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,61 +1,68 @@
 <nz-spin nzTip='Loading...' [nzSpinning]="isSpinning">
     <nz-modal [(nzVisible)]="showModel" nzTitle="Create Communication Service" (nzOnCancel)="handleCancel()"
-              (nzOnOk)="handleOk()" nzWidth="900px">
+        (nzOnOk)="handleOk()" nzWidth="80%">
         <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">
+                    <nz-form-label [nzSpan]="6" nzRequired *ngIf=" item.title !== 'Coverage Area Number' "
+                        [nzFor]="item.key">
+                        {{ item.title }}
+                    </nz-form-label>
+                    <nz-form-label [nzSpan]="6" *ngIf="item.title === 'Coverage Area Number' " [nzFor]="item.key">
                         {{ item.title }}
                     </nz-form-label>
                     <nz-form-control [nzSpan]="15">
                         <input nz-input nz-tooltip [id]="item.key" [name]="item.key"
-                               [(ngModel)]="slicing_order_info[item.key]"
-                               [ngClass]="{'error-input-border':validateRulesShow[i] === true}"
-                               *ngIf=" item.title === 'Communication Service Name' "
-                               (blur)="this.Util.validator(item.title,item.key,slicing_order_info[item.key],i,rulesText,validateRulesShow)"/>
+                            [(ngModel)]="slicing_order_info[item.key]"
+                            [ngClass]="{'error-input-border':validateRulesShow[i] === true}"
+                            *ngIf=" item.title === 'Communication Service Name' "
+                            (blur)="this.Util.validator(item.title,item.key,slicing_order_info[item.key],i,rulesText,validateRulesShow)" />
                         <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':validateRulesShow[i] === true}"
-                                   *ngIf=" item.title !== 'Communication Service Name' && item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' "
-                                   (blur)="this.Util.validator(item.title,item.key,slicing_order_info[item.key],i,rulesText,validateRulesShow)"
-                                   (focus)="changeTooltipText(item.title)"/>
+                                [(ngModel)]="slicing_order_info[item.key]"
+                                [ngClass]="{'error-input-border':validateRulesShow[i] === true}"
+                                *ngIf=" item.title !== 'Communication Service Name' && item.title !== 'Coverage Area Number'&&item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' "
+                                (blur)="this.Util.validator(item.title,item.key,slicing_order_info[item.key],i,rulesText,validateRulesShow)"
+                                (focus)="changeTooltipText(item.title)" />
                         </nz-tooltip>
                         <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
-                                        *ngIf="item.title === 'Resource Sharing Level'">
+                            *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'">
+                            *ngIf="item.title === 'Mobility'">
                             <nz-option [nzValue]="option.key" [nzLabel]="option.title"
-                                       *ngFor="let option of item.options">
+                                *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' && validateRulesShow[i]"
-                                class="validateRules">{{rulesText[i]}}
+                            *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' && validateRulesShow[i]"
+                            class="validateRules">{{rulesText[i]}}
                         </nz-form-explain>
+                        <input nz-input nz-tooltip [id]="item.key" [name]="item.key"
+                            [(ngModel)]="slicing_order_info[item.key]" *ngIf=" item.title === 'Coverage Area Number' "
+                            placeholder="Please enter the coverage area number. use , to separate them if necessary " />
                     </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">
+                                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) ">
+                                    (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()">
+                                    *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)">
+                                    (click)="deleteAreaList(i)">
                                     <i nz-icon class="anticon anticon-minus subnet_params_icon"></i>
                                 </button>
                             </nz-form-control>
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 cac2bb29..9e31c705 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
@@ -36,7 +36,8 @@ export class BusinessOrderComponent implements OnInit {
         expDataRateUL: null,
         resourceSharingLevel: "shared",
         uEMobilityLevel: "stationary",
-        coverageArea: ''
+        coverageArea: '',
+        coverageAreaNumber: null
     };
     areaList: any[] = [];
     isSpinning: boolean = false;
@@ -152,7 +153,8 @@ export class BusinessOrderComponent implements OnInit {
             expDataRateUL: null,
             resourceSharingLevel: "shared",
             uEMobilityLevel: "stationary",
-            coverageArea: ''
+            coverageArea: '',
+            coverageAreaNumber: null
         };
     }
 
@@ -169,15 +171,21 @@ export class BusinessOrderComponent implements OnInit {
     }
 
     handleOk(): void {
+        const coverage_list: string[] = [];
+        let coverageAreaNumber = null;
+        let coverageAreas;
+        
         COMMUNICATION_FORM_ITEMS.forEach((item, index) => {
-            if (item.key !== 'resourceSharingLevel' && item.key !== 'uEMobilityLevel' && item.key !== 'coverageArea') {
+            if (item.key !== 'resourceSharingLevel' && item.key !== 'uEMobilityLevel' && item.key !== 'coverageArea' && item.key !== 'coverageAreaNumber') {
                 this.Util.validator(item.title,item.key, this.slicing_order_info[item.key], index, this.rulesText, this.validateRulesShow)
+            }else if(item.key === 'coverageAreaNumber'){
+                coverageAreaNumber = this.slicing_order_info[item.key]
             }
         });
         if (this.validateRulesShow.indexOf(true) > -1) {
             return
         }
-        const coverage_list: string[] = [];
+        
         this.areaList.forEach(item => {
             let str = '';
             item.forEach(area => {
@@ -185,16 +193,24 @@ export class BusinessOrderComponent implements OnInit {
             });
             coverage_list.push(str.substring(0, str.length - 1));
         });
+        
         if (coverage_list.length > 1) {
-            this.slicing_order_info.coverageArea = coverage_list.join('|')
+            coverageAreas = coverage_list.join('|')
         } else {
-            this.slicing_order_info.coverageArea = coverage_list.toString();
+            coverageAreas = coverage_list.toString();
         }
-        let paramsObj = {
+        if(coverageAreaNumber){
+            this.slicing_order_info.coverageArea = `${coverageAreas}-${coverageAreaNumber}`;
+        }else{
+            this.slicing_order_info.coverageArea = `${coverageAreas}`;
+        }
+        delete this.slicing_order_info.coverageAreaNumber
+
+        const paramsObj = {
             slicing_order_info: this.slicing_order_info
         };
         this.isSpinning = true;
-        let csmfSlicingPurchaseFailedCallback  = () => {
+        const csmfSlicingPurchaseFailedCallback  = () => {
             this.handleCancel();
             this.isSpinning = false;
         }