style: Split the area component from the subnet module

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

5 files changed, 214 insertions, 0 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
new file mode 100644
index 00000000..e66d25f7
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html
@@ -0,0 +1,25 @@
+<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"
+      *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">
+      <div class="validation_alert_area">{{checkArea(area)}}</div>
+    </nz-form-control>
+    <nz-form-control [nzSpan]="1" [nzOffset]="2">
+      <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>
+      </button>
+      <button nz-button nzType="primary" type="button" 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>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.less b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.less
new file mode 100644
index 00000000..644c93e2
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.less
@@ -0,0 +1,19 @@
+.city-select {
+    .subnet_params_area {
+        margin-right: 5px;
+    }
+
+    .validation_alert_area {
+        color: red;
+        margin-left: 6px;
+    }
+
+    .subnet_params_button {
+        margin-top: 7px;
+        margin-left: 10px;
+    }
+
+    .subnet_params_icon {
+        font-size: 14px;
+    }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.spec.ts b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.spec.ts
new file mode 100644
index 00000000..968b7ab5
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CitySelectComponent } from './city-select.component';
+
+describe('CitySelectComponent', () => {
+  let component: CitySelectComponent;
+  let fixture: ComponentFixture<CitySelectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CitySelectComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CitySelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 00000000..432d49de
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts
@@ -0,0 +1,99 @@
+/*******
+    Input
+    areaList /MUST/: Selected region data
+********/
+import { Component, OnInit } from "@angular/core";
+import { Input } from "@angular/core";
+import { ADDRESS } from "./constants";
+
+@Component({
+	selector: "app-city-select",
+	templateUrl: "./city-select.component.html",
+	styleUrls: ["./city-select.component.less"],
+})
+export class CitySelectComponent implements OnInit {
+	@Input() areaList: any[];
+
+	constructor() {}
+
+	ngOnInit() {}
+	ngOnChanges() {}
+	handleChange(area: any[], areaItem: any): void {
+		if (areaItem.key === "province" && areaItem.options.length <= 1) {
+			areaItem.options = ADDRESS;
+		} else if (areaItem.key === "city" && areaItem.options.length <= 1) {
+			ADDRESS.forEach((item) => {
+				if (item.name === area[0].selected) {
+					areaItem.options = item.city;
+				}
+			});
+		} else if (
+			areaItem.key === "district" &&
+			areaItem.options.length <= 1
+		) {
+			ADDRESS.forEach((item: any) => {
+				item.city.forEach((city) => {
+					if (city.name === area[1].selected) {
+						areaItem.options = city.county;
+					}
+				});
+			});
+		}
+	}
+
+	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 = [];
+		}
+	}
+
+	// prompt text for each item of area_list
+	checkArea(area: any): string {
+		if (
+			area.every((item) => {
+				return item.selected === "";
+			})
+		) {
+			return "empty";
+		}
+		if (
+			area.some((item) => {
+				return item.selected === "";
+			})
+		) {
+			return "incomplete";
+		}
+		return "";
+	}
+
+	creatAreaList(): void {
+		let arr = [
+			{
+				key: "province",
+				selected: "",
+				options: [],
+			},
+			{
+				key: "city",
+				selected: "",
+				options: [],
+			},
+			{
+				key: "district",
+				selected: "",
+				options: [],
+			},
+		];
+		this.areaList.push(arr);
+	}
+
+	deleteAreaList(index: number): void {
+		this.areaList.splice(index, 1);
+	}
+}
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
new file mode 100644
index 00000000..ecb2d038
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts
@@ -0,0 +1,46 @@
+export const ADDRESS = [
+	{
+		id: "1",
+		name: "Beijing",
+		city: [
+			{
+				id: "101",
+				name: "Beijing",
+				county: [
+					{
+						id: "1001",
+						name: "Haiding District",
+					},
+					{
+						id: "1002",
+						name: "Xicheng District",
+					},
+					{
+						id: "1003",
+						name: "Changping District",
+					},
+				],
+			},
+		],
+	},
+	{
+		id: "2",
+		name: "Shanghai",
+		city: [
+			{
+				id: "201",
+				name: "Shanghai City",
+				county: [
+					{
+						id: "2001",
+						name: "Pudongxin District",
+					},
+					{
+						id: "2002",
+						name: "Jingan District",
+					},
+				],
+			},
+		],
+	},
+];