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