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

3 files changed, 270 insertions, 39 deletions

diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html
index e66d25f7..1da7a71b 100644
--- a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html
+++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html
@@ -1,6 +1,6 @@
 <div class="city-select">
   <div *ngFor="let area of areaList; let i = index">
-    <nz-form-control [nzSpan]="!ind ? 4 : 4" [nzOffset]="i && !ind ? 7 : 0" class="subnet_params_area"
+    <nz-form-control [nzSpan]="computeSpan(ind)" [nzOffset]="computeOffset(ind, i)" 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) ">
@@ -8,10 +8,10 @@
         </nz-option>
       </nz-select>
     </nz-form-control>
-    <nz-form-control [nzSpan]="1">
+    <nz-form-control [nzSpan]="2">
       <div class="validation_alert_area">{{checkArea(area)}}</div>
     </nz-form-control>
-    <nz-form-control [nzSpan]="1" [nzOffset]="2">
+    <nz-form-control [nzSpan]="1">
       <button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button" *ngIf="!i"
         (click)="creatAreaList()">
         <i nz-icon class="anticon anticon-plus subnet_params_icon"></i>
diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts
index 432d49de..4a172d75 100644
--- a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts
+++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts
@@ -1,10 +1,13 @@
 /*******
     Input
-    areaList /MUST/: Selected region data
+	areaList /MUST/: Selected region data
+	level /MUST/: 
+	- 3: province;city;district
+	- 4: province;city;district;street
 ********/
 import { Component, OnInit } from "@angular/core";
 import { Input } from "@angular/core";
-import { ADDRESS } from "./constants";
+import { LEVEL3ADDRESS, LEVEL4ADDRESS } from "./constants";
 
 @Component({
 	selector: "app-city-select",
@@ -13,16 +16,74 @@ import { ADDRESS } from "./constants";
 })
 export class CitySelectComponent implements OnInit {
 	@Input() areaList: any[];
+	@Input() level: number;
+	defaultOptions: any[];
 
 	constructor() {}
 
 	ngOnInit() {}
-	ngOnChanges() {}
+	ngOnChanges() {
+		this.chooseDefaultOptions();
+	}
+	chooseDefaultOptions(): void {
+		// options for selection box
+		switch (this.level) {
+			case 3:
+				this.defaultOptions = LEVEL3ADDRESS;
+				break;
+			case 4:
+				this.defaultOptions = LEVEL4ADDRESS;
+				break;
+			default:
+				this.defaultOptions = LEVEL3ADDRESS;
+				break;
+		}
+	}
+
+	computeSpan(ind: number) {
+		// Space occupation of each selection box
+		let res: number = 4;
+		switch (this.level) {
+			case 4:
+				if (ind === 0 || ind === 1 || ind === 2) {
+					res = 3;
+				} else {
+					res = 4;
+				}
+				break;
+			default:
+				// 3 or others
+				res = 4;
+				break;
+		}
+		return res;
+	}
+	computeOffset(ind: number, i: number) {
+		// the offset of each selection box
+		let res: number = 0;
+		switch (this.level) {
+			case 4:
+				if (i && !ind) {
+					res = 7;
+				} else {
+					res = 0;
+				}
+				break;
+			default:
+				if (i && !ind) {
+					res = 7;
+				} else {
+					res = 0;
+				}
+				break;
+		}
+		return res;
+	}
 	handleChange(area: any[], areaItem: any): void {
 		if (areaItem.key === "province" && areaItem.options.length <= 1) {
-			areaItem.options = ADDRESS;
+			areaItem.options = this.defaultOptions;
 		} else if (areaItem.key === "city" && areaItem.options.length <= 1) {
-			ADDRESS.forEach((item) => {
+			this.defaultOptions.forEach((item) => {
 				if (item.name === area[0].selected) {
 					areaItem.options = item.city;
 				}
@@ -31,10 +92,22 @@ export class CitySelectComponent implements OnInit {
 			areaItem.key === "district" &&
 			areaItem.options.length <= 1
 		) {
-			ADDRESS.forEach((item: any) => {
+			this.defaultOptions.forEach((item: any) => {
 				item.city.forEach((city) => {
 					if (city.name === area[1].selected) {
-						areaItem.options = city.county;
+						areaItem.options = city.district;
+					}
+				});
+			});
+		} else if (areaItem.key === "street" && areaItem.options.length <= 1) {
+			this.defaultOptions.forEach((item: any) => {
+				item.city.forEach((city) => {
+					if (city.name === area[1].selected) {
+						city.district.forEach((district) => {
+							if (district.name === area[2].selected) {
+								areaItem.options = district.street;
+							}
+						});
 					}
 				});
 			});
@@ -42,15 +115,13 @@ export class CitySelectComponent implements OnInit {
 	}
 
 	handleChangeSelected(area: any[], areaItem: any) {
-		if (areaItem.key === "province") {
-			area[1].selected = "";
-			area[1].options = [];
-			area[2].selected = "";
-			area[2].options = [];
-		} else if (areaItem.key === "city") {
-			area[2].selected = "";
-			area[2].options = [];
-		}
+		let areaItemIndex = area.indexOf(areaItem);
+		area.map((item, index) => {
+			if (index > areaItemIndex) {
+				item.selected = "";
+				item.options = [];
+			}
+		});
 	}
 
 	// prompt text for each item of area_list
@@ -73,23 +144,51 @@ export class CitySelectComponent implements OnInit {
 	}
 
 	creatAreaList(): void {
-		let arr = [
-			{
-				key: "province",
-				selected: "",
-				options: [],
-			},
-			{
-				key: "city",
-				selected: "",
-				options: [],
-			},
-			{
-				key: "district",
-				selected: "",
-				options: [],
-			},
-		];
+		let arr: any[] = [];
+		switch (this.level) {
+			case 4:
+				arr = [
+					{
+						key: "province",
+						selected: "",
+						options: [],
+					},
+					{
+						key: "city",
+						selected: "",
+						options: [],
+					},
+					{
+						key: "district",
+						selected: "",
+						options: [],
+					},
+					{
+						key: "street",
+						selected: "",
+						options: [],
+					},
+				];
+				break;
+			default:
+				arr = [
+					{
+						key: "province",
+						selected: "",
+						options: [],
+					},
+					{
+						key: "city",
+						selected: "",
+						options: [],
+					},
+					{
+						key: "district",
+						selected: "",
+						options: [],
+					},
+				];
+		}
 		this.areaList.push(arr);
 	}
 
diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts b/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts
index ecb2d038..82e0cf56 100644
--- a/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts
+++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts
@@ -1,4 +1,4 @@
-export const ADDRESS = [
+export const LEVEL3ADDRESS = [
 	{
 		id: "1",
 		name: "Beijing",
@@ -6,7 +6,7 @@ export const ADDRESS = [
 			{
 				id: "101",
 				name: "Beijing",
-				county: [
+				district: [
 					{
 						id: "1001",
 						name: "Haiding District",
@@ -30,7 +30,7 @@ export const ADDRESS = [
 			{
 				id: "201",
 				name: "Shanghai City",
-				county: [
+				district: [
 					{
 						id: "2001",
 						name: "Pudongxin District",
@@ -44,3 +44,135 @@ export const ADDRESS = [
 		],
 	},
 ];
+export const LEVEL4ADDRESS = [
+	{
+		id: "1",
+		name: "Beijing",
+		city: [
+			{
+				id: "101",
+				name: "Beijing",
+				district: [
+					{
+						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",
+				district: [
+					{
+						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",
+							},
+						],
+					},
+				],
+			},
+		],
+	},
+];