feat:Order business function development and improvement of csmf slicing

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

4 files changed, 237 insertions, 9 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 d4914dd1..0ad676a0 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,3 +1,54 @@
-<nz-modal [(nzVisible)]="showModel" nzTitle="Create Slicing Business Order" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
+<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">
+                <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]"
+                           *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' "/>
+                    <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-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>
+            </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 e69de29b..3871a5fa 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
@@ -0,0 +1,19 @@
+.subnet_params_container{
+  padding-left: 3%;
+  .subnet_params_area{
+    margin-right: 5px;
+  }
+  .ant-btn-icon-only{
+    padding: 0 5px !important;
+  }
+  .subnet_params_button{
+    margin-top: 7px;
+    margin-left: 10px;
+  }
+  .subnet_params_icon{
+    font-size: 14px;
+  }
+}
+.ant-form-item-label {
+  text-align: left;
+}
\ 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 0647b76d..f31f4dd1 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,8 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {COMMUNICATION_FORM_ITEMS} from "../../../../../../constants/constants";
+import {COMMUNICATION_FORM_ITEMS, COMMUNICATION_FORM_ADDRESS} from "../../../../../../constants/constants";
+import {SlicingTaskServices} from "../../../../../core/services/slicingTaskServices";
+import {NzMessageService} from "ng-zorro-antd";
+
 @Component({
   selector: 'app-business-order',
   templateUrl: './business-order.component.html',
@@ -7,18 +10,173 @@ import {COMMUNICATION_FORM_ITEMS} from "../../../../../../constants/constants";
 })
 export class BusinessOrderComponent implements OnInit {
 
-  constructor() { }
+    constructor(
+        private myhttp: SlicingTaskServices,
+        private message: NzMessageService
+        ) {
+    }
 
-  ngOnInit() {
-  }
+    ngOnInit() {
+    }
+    ngOnChanges() {
+        this.AreaFormatting();
+    }
     @Input() showModel: boolean;
     @Output() cancel = new EventEmitter<boolean>();
+    comunicationFormItems = COMMUNICATION_FORM_ITEMS;
+    slicing_order_info = {
+        name: null,
+        maxNumberofUEs: null,
+        expDataRateDL: null,
+        latency: null,
+        expDataRateUL: null,
+        resourceSharingLevel: "shared",
+        uEMobilityLevel: null,
+        useInterval: null,
+        coverageArea: ''
+    };
+    areaList: any[] = [];
+    isSpinning: boolean = false;
+    AreaFormatting() {
+        let areaList = ['Beijing;Beijing;Haidian District;Wanshoulu Street'];
+        this.areaList = areaList.map((item: any) => {
+            let arr = item.split(';');
+            item = arr.map((ite, index) => {
+                let key: string;
+                if (!index) {
+                    key = 'province';
+                } else if (index === 1) {
+                    key = 'city'
+                } else if (index === 2) {
+                    key = 'district'
+                } else {
+                    key = 'street'
+                }
+                const obj: any = {};
+                obj.key = key;
+                obj.selected = ite
+                obj.options = [{name: ite, id: ite}]
+                return obj
+            })
+            return item;
+        })
+    }
+
+    creatAreaList (): void {
+        let arr = [
+            {
+                key: 'province',
+                selected: '',
+                options: []
+            },
+            {
+                key: 'city',
+                selected: '',
+                options: []
+            },
+            {
+                key: 'district',
+                selected: '',
+                options: []
+            },
+            {
+                key: 'street',
+                selected: '',
+                options: []
+            }
+        ]
+        this.areaList.push(arr)
+    }
+
+    deleteAreaList (index: number): void {
+        this.areaList.splice(index,1);
+    }
+
+    handleChange(area: any[], areaItem: any): void{
+        if (areaItem.key === 'province' && areaItem.options.length <= 1) {
+            areaItem.options = COMMUNICATION_FORM_ADDRESS;
+        } else if (areaItem.key === 'city' && areaItem.options.length <= 1) {
+            COMMUNICATION_FORM_ADDRESS.forEach( item => {
+                if(item.name === area[0].selected) {
+                    areaItem.options = item.city;
+                }
+            })
+        }else if (areaItem.key === 'district' && areaItem.options.length <= 1) {
+            COMMUNICATION_FORM_ADDRESS.forEach( (item: any) => {
+                item.city.forEach(city => {
+                    if (city.name === area[1].selected) {
+                        areaItem.options = city.county;
+                    }
+                })
+            })
+        }else if (areaItem.key === 'street' && areaItem.options.length <= 1) {
+            COMMUNICATION_FORM_ADDRESS.forEach( (item: any) => {
+                item.city.forEach(city => {
+                    if (city.name === area[1].selected) {
+                        city.county.forEach(county => {
+                            if (county.name === area[2].selected) {
+                                areaItem.options = county.street;
+                            }
+                        })
+                    }
+                })
+            })
+        }
+    }
+
+    handleChangeSelected(area: any[], areaItem: any) {
+        if (areaItem.key === 'province') {
+            area[1].selected = ''
+            area[1].options = [];
+            area[2].selected = '';
+            area[2].options = [];
+            area[3].selected = '';
+            area[3].options = [];
+        } else if (areaItem.key === 'city') {
+            area[2].selected = '';
+            area[2].options = [];
+            area[3].selected = '';
+            area[3].options = [];
+        }else if (areaItem.key === 'district') {
+            area[3].selected = '';
+            area[3].options = [];
+        }
+    }
 
     handleCancel() {
         this.showModel = false;
         this.cancel.emit(this.showModel)
     }
-    handleOk() {
-        console.log(1)
+
+    handleOk(): void {
+            const coverage_list: string[] = [];
+            this.areaList.forEach( item => {
+                let str: string = '';
+                item.forEach( area => {
+                    str += area.selected + ';';
+                });
+                coverage_list.push(str.substring(0, str.length-1));
+            });
+            if(coverage_list.length>1){
+                this.slicing_order_info.coverageArea = coverage_list.join('|')
+            }else {
+                this.slicing_order_info.coverageArea = coverage_list.toString();
+            }
+        let paramsObj = {
+            slicing_order_info:this.slicing_order_info
+        };
+        console.log(paramsObj,"-----paramsObj");
+        this.isSpinning = true;
+        this.myhttp.csmfSlicingPurchase(paramsObj).subscribe(res => {
+            const { result_header: { result_code, result_message }, result_body: { service_id,operation_id } } = res;
+            if (+result_code === 200) {
+                this.isSpinning = false;
+                this.handleCancel();
+            }
+        }, (err) => {
+            this.message.error(err);
+            this.handleCancel();
+            this.isSpinning = false;
+        })
     }
 }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
index 818fc136..9c039c6d 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
@@ -19,7 +19,7 @@
         <th width=280>Service Instance Id</th>
         <th width=200>Service Instance Name</th>
         <th width=200>Creation Time</th>
-        <th width=110>Service Type</th>
+        <!--<th width=110>Service Type</th>-->
         <th width=110>S-NSSAI</th>
         <th width=110>Status</th>
         <th width=180>Aciton</th>
@@ -32,7 +32,7 @@
           <td>{{ data.order_id }}</td>
           <td>{{ data.order_name }}</td>
           <td>{{ data.order_creation_time }}</td>
-          <td>{{ data.service_type?data.service_type:'--' }}</td>
+          <!--<td>{{ data.service_type?data.service_type:'&#45;&#45;' }}</td>-->
           <td>{{ data.service_snssai }}</td>
           <td>
                             <span class="marginLeft10">