diff options
Diffstat (limited to 'usecaseui-portal/src/app/shared')
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", + }, + ], + }, + ], + }, +]; |