summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/shared/components/city-select
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/shared/components/city-select')
-rw-r--r--usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.html6
-rw-r--r--usecaseui-portal/src/app/shared/components/city-select/city-select/city-select.component.ts165
-rw-r--r--usecaseui-portal/src/app/shared/components/city-select/city-select/constants.ts138
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",
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+];