style: Combine city-select of csmf and city-select of subnet into one

Signed-off-by: wangyuerg <wangyuerg@chinamobile.com>
Change-Id: Iade2b82052389864d36a9524547702d689920ec9
Issue-ID: USECASEUI-527

4 files changed, 256 insertions, 457 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 0f138db8..ff4dade4 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
@@ -3,10 +3,10 @@
     <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]="item.required" [nzFor]=" item.key">
+                <nz-form-label [nzSpan]="7" [nzRequired]="item.required" [nzFor]=" item.key">
                     {{ item.title }}
                 </nz-form-label>
-                <nz-form-control [nzSpan]="15">
+                <nz-form-control [nzSpan]="16">
                     <nz-tooltip [nzTitle]="item.scoped&&item.scopedText?item.scopedText:''" [nzPlacement]="'right'"
                         [nzTrigger]="'focus'">
                         <input nz-input nz-tooltip [id]="item.key" [name]="item.key" *ngIf="item.type === 'input'"
@@ -32,27 +32,7 @@
                 </nz-form-control>
 
                 <div *ngIf="item.type === 'city-select'">
-                    <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>
+                    <app-city-select [areaList]="areaList" [level]="areaLevel"></app-city-select>
                 </div>
             </nz-form-item>
         </form>
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 52d3ce3e..3d0813f4 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
@@ -1,25 +1,32 @@
-.subnet_params_container{
+.subnet_params_container {
   padding-left: 3%;
-  .subnet_params_area{
-    margin-right: 5px;
-  }
-  .ant-btn-icon-only{
+
+  // .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;
-  }
+
+  // .subnet_params_button {
+  //   margin-top: 7px;
+  //   margin-left: 10px;
+  // }
+
+  // .subnet_params_icon {
+  //   font-size: 14px;
+  // }
 }
+
 .ant-form-item-label {
   text-align: left;
 }
-.validateRules{
+
+.validateRules {
   color: red;
 }
-.error-input-border{
-  border-color: red!important;
-}
+
+.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 bfef2d20..4d3c7972 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,209 +1,150 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {COMMUNICATION_FORM_ITEMS, COMMUNICATION_FORM_ADDRESS} from "./constants";
-import { Util } from '../../../../../shared/utils/utils';
-import {SlicingTaskServices} from "../../../../../core/services/slicingTaskServices";
-import {NzMessageService} from "ng-zorro-antd";
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { COMMUNICATION_FORM_ITEMS } from "./constants";
+import { Util } from "../../../../../shared/utils/utils";
+import { SlicingTaskServices } from "../../../../../core/services/slicingTaskServices";
+import { NzMessageService } from "ng-zorro-antd";
 
 @Component({
-    selector: 'app-business-order',
-    templateUrl: './business-order.component.html',
-    styleUrls: ['./business-order.component.less']
+	selector: "app-business-order",
+	templateUrl: "./business-order.component.html",
+	styleUrls: ["./business-order.component.less"],
 })
 export class BusinessOrderComponent implements OnInit {
+	constructor(
+		private myhttp: SlicingTaskServices,
+		private message: NzMessageService,
+		private Util: Util
+	) {}
 
-    constructor(
-        private myhttp: SlicingTaskServices,
-        private message: NzMessageService,
-        private Util: Util
-    ) {
-    }
+	ngOnInit() {}
 
-    ngOnInit() {
-    }
+	ngOnChanges() {
+		this.AreaFormatting();
+	}
 
-    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: "stationary",
+		coverageArea: "",
+		coverageAreaNumber: null,
+	};
+	areaList: any[] = [];
+	validateRulesShow: any[] = [];
+	rulesText: any[] = [];
+	areaLevel: number = 4;
 
-    @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: "stationary",
-        coverageArea: '',
-        coverageAreaNumber: null
-    };
-    areaList: any[] = [];
-    validateRulesShow: any[] = [];
-    rulesText: any[] = [];
+	AreaFormatting(): void {
+		let areaList = ["Beijing;Beijing;Haidian District;Wanshoulu Street"];
+		this.areaList = areaList.map((item: any) => {
+			let arr = item.split(";");
+			item = arr.map((it, 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 = it;
+				obj.options = [{ name: it, id: it }];
+				return obj;
+			});
+			return item;
+		});
+	}
 
-    AreaFormatting(): void {
-        let areaList = ['Beijing;Beijing;Haidian District;Wanshoulu Street'];
-        this.areaList = areaList.map((item: any) => {
-            let arr = item.split(';');
-            item = arr.map((it, 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 = it;
-                obj.options = [{name: it, id: it}]
-                return obj
-            })
-            return item;
-        })
-    }
+	handleCancel(): void {
+		this.showModel = false;
+		this.cancel.emit(this.showModel);
+		this.slicing_order_info = {
+			name: null,
+			maxNumberofUEs: null,
+			expDataRateDL: null,
+			latency: null,
+			expDataRateUL: null,
+			resourceSharingLevel: "shared",
+			uEMobilityLevel: "stationary",
+			coverageArea: "",
+			coverageAreaNumber: null,
+		};
+		this.validateRulesShow = [];
+	}
 
-    creatAreaList(): void {
-        const arr = [
-            {
-                key: 'province',
-                selected: '',
-                options: []
-            },
-            {
-                key: 'city',
-                selected: '',
-                options: []
-            },
-            {
-                key: 'district',
-                selected: '',
-                options: []
-            },
-            {
-                key: 'street',
-                selected: '',
-                options: []
-            }
-        ]
-        this.areaList.push(arr)
-    }
+	handleOk(): void {
+		const coverage_list: string[] = [];
+		let coverageAreas;
 
-    deleteAreaList(index: number): void {
-        this.areaList.splice(index, 1);
-    }
+		COMMUNICATION_FORM_ITEMS.forEach((item, index) => {
+			if (item.required && item.type === "input") {
+				this.Util.validator(
+					item.title,
+					item.key,
+					this.slicing_order_info[item.key],
+					index,
+					this.rulesText,
+					this.validateRulesShow
+				);
+			}
+		});
+		if (this.validateRulesShow.indexOf(true) > -1) {
+			return;
+		}
 
-    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;
-                            }
-                        })
-                    }
-                })
-            })
-        }
-    }
+		this.areaList.forEach((item) => {
+			let str = "";
+			item.forEach((area) => {
+				str += area.selected + ";";
+			});
+			coverage_list.push(str.substring(0, str.length - 1));
+		});
+		if (coverage_list.length > 1) {
+			coverageAreas = coverage_list.join("|");
+		} else {
+			coverageAreas = coverage_list.toString();
+		}
+		const coverageAreaNumber = this.slicing_order_info[
+			"coverageAreaNumber"
+		];
+		if (coverageAreaNumber) {
+			this.slicing_order_info.coverageArea = `${coverageAreas}-${coverageAreaNumber}`;
+		} else {
+			this.slicing_order_info.coverageArea = `${coverageAreas}`;
+		}
+		delete this.slicing_order_info.coverageAreaNumber;
 
-    handleChangeSelected(area: any[], areaItem: any): void {
-        let areaItemIndex = area.indexOf(areaItem);
-        area.map((item,index)=>{
-            if(index > areaItemIndex){
-                item.selected = '';
-                item.options = [];
-            }
-        })
-    }
-
-    handleCancel(): void {
-        this.showModel = false;
-        this.cancel.emit(this.showModel);
-        this.slicing_order_info = {
-            name: null,
-            maxNumberofUEs: null,
-            expDataRateDL: null,
-            latency: null,
-            expDataRateUL: null,
-            resourceSharingLevel: "shared",
-            uEMobilityLevel: "stationary",
-            coverageArea: '',
-            coverageAreaNumber: null
-        };
-        this.validateRulesShow = []
-    }
-
-    handleOk(): void {
-        const coverage_list: string[] = [];
-        let coverageAreas;
-
-        COMMUNICATION_FORM_ITEMS.forEach((item, index) => {
-            if (item.required && item.type==="input") {
-                this.Util.validator(item.title,item.key, this.slicing_order_info[item.key], index, this.rulesText, this.validateRulesShow)
-            }
-        });
-        if (this.validateRulesShow.indexOf(true) > -1) {
-            return
-        }
-        
-        this.areaList.forEach(item => {
-            let str = '';
-            item.forEach(area => {
-                str += area.selected + ';';
-            });
-            coverage_list.push(str.substring(0, str.length - 1));
-        });
-        if (coverage_list.length > 1) {
-            coverageAreas = coverage_list.join('|')
-        } else {
-            coverageAreas = coverage_list.toString();
-        }
-        const coverageAreaNumber = this.slicing_order_info["coverageAreaNumber"];
-        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
-        };
-        const csmfSlicingPurchaseFailedCallback  = () => {
-            this.handleCancel();
-        }
-        this.myhttp.csmfSlicingPurchase(paramsObj, csmfSlicingPurchaseFailedCallback).then(res => {
-            const result = res.result_header;
-            if(result&&result.result_code&&+result.result_code===200){
-                console.log(res)
-            }else{
-                this.message.create('error','Network error')
-            }
-            this.handleCancel();
-        })
-    }
+		const paramsObj = {
+			slicing_order_info: this.slicing_order_info,
+		};
+		const csmfSlicingPurchaseFailedCallback = () => {
+			this.handleCancel();
+		};
+		this.myhttp
+			.csmfSlicingPurchase(paramsObj, csmfSlicingPurchaseFailedCallback)
+			.then((res) => {
+				const result = res.result_header;
+				if (
+					result &&
+					result.result_code &&
+					+result.result_code === 200
+				) {
+					console.log(res);
+				} else {
+					this.message.create("error", "Network error");
+				}
+				this.handleCancel();
+			});
+	}
 }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts
index 9f79bff6..f982fa88 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts
@@ -1,5 +1,5 @@
 export const COMMUNICATION_FORM_ITEMS = [
-    /*******
+	/*******
         title /MUST/: MARK THE ITEM NAME,
         key /MUST/:  MARK THE ITEM KEY,
         type /MUST/: MARKE THE ITEM TYPE, CAN BE ADDED IF NECESSARY: input/select/radio/city-select
@@ -9,225 +9,96 @@ export const COMMUNICATION_FORM_ITEMS = [
         placeholder: IF PLACEHOLDER, CAN BE EMITTED IF NOT
         options: IF ITEM NEEDS OPTIONS, CAN BE EMITTED IF NOT
     ********/
-    {
-        title: 'Communication Service Name',
-        key: 'name',
-        type:"input",
-        required:true 
-    },
-    {
-        title: 'Max Number of UEs',
-        key: 'maxNumberofUEs',
-        type:"input",
-        scoped:true, 
-        scopedText:'Scope: 1-100000',
-        required:true
-    },
-    {
-        title: 'Data Rate Uplink (Mbps)',
-        key: 'expDataRateUL',
-        type:"input",
-        scoped:true,
-        scopedText:'Scope: 100-3000',
-        required:true
-    },
-    {
-        title: 'Data Rate Downlink (Mbps)',
-        key: 'expDataRateDL',
-        type:"input",
-        scoped:true,
-        scopedText:'Scope: 100-3000',
-        required:true
-    },
-    {
-        title: 'Latency',
-        key: 'latency',
-        type:"input",
-        scoped:true,
-        scopedText:'Scope: 10-200',
-        required:true
-    },
-    {
-        title: 'Resource Sharing Level',
-        key: 'resourceSharingLevel',
-        type:"radio",
-        required:true,
-        options: [
-            {
-                title: 'Shared',
-                key: 'shared'
-            },
-            {
-                title: 'Non-shared',
-                key: 'non-shared'
-            }
-        ]
-    },
-    {
-        title: 'Mobility',
-        key: 'uEMobilityLevel',
-        type:"select",
-        required:true,
-        options: [
-            {
-                title: 'Stationary',
-                key: 'stationary'
-            },
-            {
-                title: 'Nomadic',
-                key: 'nomadic'
-            },
-            {
-                title: 'Spatially Restricted Mobility',
-                key: 'spatially restricted mobility'
-            },
-            {
-                title: 'Fully Mobility',
-                key: 'fully mobility'
-            }
-        ]
-    },
-    {
-        title: 'Area',
-        key: 'coverageArea',
-        type:"city-select",
-        required:true
-    },
-    {
-        title: 'Coverage Area Number',
-        key: 'coverageAreaNumber',
-        type:"input",
-        placeholder:"Please enter the coverage area number. use , to separate them if necessary",
-        required:false
-    }
-]
-
-export const COMMUNICATION_FORM_ADDRESS = [
-    {
-        "id": "1",
-        "name": "Beijing",
-        "city": [
-            {
-                "id": "101",
-                "name": "Beijing",
-                "county": [
-                    {
-                        "id": "1001",
-                        "name": "Haiding District",
-                        "street": [
-                            {
-                                "id": "100101",
-                                "name": "Wanshoulu Street"
-                            },
-                            {
-                                "id": "100102",
-                                "name": "Zhongguancun Street"
-                            },
-                            {
-                                "id": "100103",
-                                "name": "Haidian Street"
-                            },
-                            {
-                                "id": "100104",
-                                "name": "Xisanqi Street"
-                            }
-                        ]
-                    },
-                    {
-                        "id": "1002",
-                        "name": "Xicheng District",
-                        "street": [
-                            {
-                                "id": "100201",
-                                "name": "Guang'anmenwai Street"
-                            },
-                            {
-                                "id": "100202",
-                                "name": "Xuanwumen Street"
-                            },
-                            {
-                                "id": "100203",
-                                "name": "West Changan Street"
-                            },
-                            {
-                                "id": "100204",
-                                "name": "Financial Street"
-                            }
-                        ]
-                    },
-                    {
-                        "id": "1003",
-                        "name": "Changping District",
-                        "street": [
-                            {
-                                "id": "100301",
-                                "name": "Chengbei Street"
-                            },
-                            {
-                                "id": "100302",
-                                "name": "Chengnan Street"
-                            },
-                            {
-                                "id": "100303",
-                                "name": "Tiantongyuan North Street"
-                            },
-                            {
-                                "id": "100304",
-                                "name": "Tiantongyuan South Street"
-                            }
-                        ]
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        "id": "2",
-        "name": "Shanghai",
-        "city": [{
-            "id": "201",
-            "name": "Shanghai City",
-            "county": [{
-                "id": "2001",
-                "name": "Pudongxin District",
-                "street": [
-                    {
-                        "id": "200101",
-                        "name": "Lujiazui Street"
-                    },
-                    {
-                        "id": "200102",
-                        "name": "Zhoujiadu Street"
-                    },
-                    {
-                        "id": "200103",
-                        "name": "Tangqiao Street"
-                    },
-                    {
-                        "id": "200104",
-                        "name": "Nanquanlu Street"
-                    }
-                ]
-            },
-                {
-                    "id": "2002",
-                    "name": "Jingan District",
-                    "street": [
-                        {
-                            "id": "200201",
-                            "name": "Jiangning Lu Street"
-                        },
-                        {
-                            "id": "200202",
-                            "name": "Jing'an Temple Street"
-                        },
-                        {
-                            "id": "200203",
-                            "name": "Nanjing West Road Street"
-                        }
-                    ]
-                }
-            ]
-        }]
-    }
-]
\ No newline at end of file
+	{
+		title: "Communication Service Name",
+		key: "name",
+		type: "input",
+		required: true,
+	},
+	{
+		title: "Max Number of UEs",
+		key: "maxNumberofUEs",
+		type: "input",
+		scoped: true,
+		scopedText: "Scope: 1-100000",
+		required: true,
+	},
+	{
+		title: "Data Rate Uplink (Mbps)",
+		key: "expDataRateUL",
+		type: "input",
+		scoped: true,
+		scopedText: "Scope: 100-3000",
+		required: true,
+	},
+	{
+		title: "Data Rate Downlink (Mbps)",
+		key: "expDataRateDL",
+		type: "input",
+		scoped: true,
+		scopedText: "Scope: 100-3000",
+		required: true,
+	},
+	{
+		title: "Latency",
+		key: "latency",
+		type: "input",
+		scoped: true,
+		scopedText: "Scope: 10-200",
+		required: true,
+	},
+	{
+		title: "Resource Sharing Level",
+		key: "resourceSharingLevel",
+		type: "radio",
+		required: true,
+		options: [
+			{
+				title: "Shared",
+				key: "shared",
+			},
+			{
+				title: "Non-shared",
+				key: "non-shared",
+			},
+		],
+	},
+	{
+		title: "Mobility",
+		key: "uEMobilityLevel",
+		type: "select",
+		required: true,
+		options: [
+			{
+				title: "Stationary",
+				key: "stationary",
+			},
+			{
+				title: "Nomadic",
+				key: "nomadic",
+			},
+			{
+				title: "Spatially Restricted Mobility",
+				key: "spatially restricted mobility",
+			},
+			{
+				title: "Fully Mobility",
+				key: "fully mobility",
+			},
+		],
+	},
+	{
+		title: "Area",
+		key: "coverageArea",
+		type: "city-select",
+		required: true,
+	},
+	{
+		title: "Coverage Area Number",
+		key: "coverageAreaNumber",
+		type: "input",
+		placeholder:
+			"Please enter the coverage area number. use , to separate them if necessary",
+		required: false,
+	},
+];