style: Split the area component from the subnet module

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

diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 7559862..be1f08a 100644 (file)
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -13,204 +13,207 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule  } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
-import { HttpClient } from '@angular/common/http';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { NZ_I18N, en_US } from 'ng-zorro-antd';
-import { NgxEchartsModule } from 'ngx-echarts';
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { HttpClientModule } from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
+import { NgZorroAntdModule } from "ng-zorro-antd";
+import { NZ_I18N, en_US } from "ng-zorro-antd";
+import { NgxEchartsModule } from "ngx-echarts";
 
 //Custom Directive
-import { DisableControlDirective } from './core/Directives/disable-control.directive';
+import { DisableControlDirective } from "./core/Directives/disable-control.directive";
 
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
+import { TranslateHttpLoader } from "@ngx-translate/http-loader";
 export function HttpLoaderFactory(httpClient: HttpClient) {
-  return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
+       return new TranslateHttpLoader(httpClient, "./assets/i18n/", ".json");
 }
 
-import { AppRoutingModule } from './app-routing.module';
+import { AppRoutingModule } from "./app-routing.module";
 
 //Registered language pack
-import { registerLocaleData } from '@angular/common';
-import en from '@angular/common/locales/en';
+import { registerLocaleData } from "@angular/common";
+import en from "@angular/common/locales/en";
 registerLocaleData(en);
 
 //Custom component
-import { AppComponent } from './app.component';
-import { HomeComponent } from './views/home/home.component';
-import { ManagementComponent } from './views/management/management.component';
-import { ServicesListComponent } from './views/services/services-list/services-list.component';
-import { OnboardVnfVmComponent } from './views/onboard-vnf-vm/onboard-vnf-vm.component';
-import { AlarmComponent } from './views/alarm/alarm.component';
-import { PerformanceComponent } from './views/performance/performance.component';
-import { PerformanceVnfComponent } from './views/performance/performance-vnf/performance-vnf.component';
-import { PerformanceVmComponent } from './views/performance/performance-vm/performance-vm.component';
-import { CcvpnNetworkComponent } from './views/network/ccvpn-network/ccvpn-network.component';
-import { CcvpnDetailComponent } from './views/services/services-list/ccvpn-detail/ccvpn-detail.component';
-import { CcvpnCreationComponent } from './views/services/services-list/ccvpn-creation/ccvpn-creation.component';
-import { MdonsDetailComponent } from './views/services/services-list/mdons-detail/mdons-detail.component';
-import { MdonsCreationComponent } from './views/services/services-list/mdons-creation/mdons-creation.component';
-import { MdonsNetworkComponent } from './views/network/mdons-network/mdons-network.component';
-
-import { DetailsComponent } from './shared/components/details/details.component';
-import { GraphiclistComponent } from './shared/components/graphiclist/graphiclist.component';
-import { E2eCreationComponent } from './views/services/services-list/e2e-creation/e2e-creation.component';
-
-import { BarComponent } from './shared/components/charts/bar/bar.component';
-import { LineComponent } from './shared/components/charts/line/line.component';
-import { PieComponent } from './shared/components/charts/pie/pie.component';
-
-import { PathLocationStrategy, LocationStrategy, HashLocationStrategy } from '@angular/common';
+import { AppComponent } from "./app.component";
+import { HomeComponent } from "./views/home/home.component";
+import { ManagementComponent } from "./views/management/management.component";
+import { ServicesListComponent } from "./views/services/services-list/services-list.component";
+import { OnboardVnfVmComponent } from "./views/onboard-vnf-vm/onboard-vnf-vm.component";
+import { AlarmComponent } from "./views/alarm/alarm.component";
+import { PerformanceComponent } from "./views/performance/performance.component";
+import { PerformanceVnfComponent } from "./views/performance/performance-vnf/performance-vnf.component";
+import { PerformanceVmComponent } from "./views/performance/performance-vm/performance-vm.component";
+import { CcvpnNetworkComponent } from "./views/network/ccvpn-network/ccvpn-network.component";
+import { CcvpnDetailComponent } from "./views/services/services-list/ccvpn-detail/ccvpn-detail.component";
+import { CcvpnCreationComponent } from "./views/services/services-list/ccvpn-creation/ccvpn-creation.component";
+import { MdonsDetailComponent } from "./views/services/services-list/mdons-detail/mdons-detail.component";
+import { MdonsCreationComponent } from "./views/services/services-list/mdons-creation/mdons-creation.component";
+import { MdonsNetworkComponent } from "./views/network/mdons-network/mdons-network.component";
+
+import { DetailsComponent } from "./shared/components/details/details.component";
+import { GraphiclistComponent } from "./shared/components/graphiclist/graphiclist.component";
+import { E2eCreationComponent } from "./views/services/services-list/e2e-creation/e2e-creation.component";
+
+import { BarComponent } from "./shared/components/charts/bar/bar.component";
+import { LineComponent } from "./shared/components/charts/line/line.component";
+import { PieComponent } from "./shared/components/charts/pie/pie.component";
+
+import {
+       PathLocationStrategy,
+       LocationStrategy,
+       HashLocationStrategy,
+} from "@angular/common";
 // common function util
-import { Util } from './shared/utils/utils';
+import { Util } from "./shared/utils/utils";
 // common function http
-import { Http } from './shared/utils/http';
+import { Http } from "./shared/utils/http";
 // Custom service
-import { ServiceListService } from './core/services/serviceList.service';
-import { HomesService } from './core/services/homes.service';
-import { onboardService } from './core/services/onboard.service';
-import { networkHttpservice } from './core/services/networkHttpservice.service';
+import { ServiceListService } from "./core/services/serviceList.service";
+import { HomesService } from "./core/services/homes.service";
+import { onboardService } from "./core/services/onboard.service";
+import { networkHttpservice } from "./core/services/networkHttpservice.service";
 // slicingTask service
-import { SlicingTaskServices } from './core/services/slicingTaskServices'
-
-import { PerformanceDetailsComponent } from './shared/components/performance-details/performance-details.component';
-import { E2eDetailComponent } from './views/services/services-list/e2e-detail/e2e-detail.component';
-import { CustomerComponent } from './views/management/customer/customer.component';
-import { ManagemencsService } from './core/services/managemencs.service';
-import { FcapsComponent } from './views/fcaps/fcaps.component';
-import { TestComponent } from './test/test.component';
-import { TextService } from './core/services/text.service';
-import { TopCardComponent } from './views/services/services-list/top-card/top-card.component';
-import { CreateModelComponent } from './views/services/services-list/create-model/create-model.component';
-import { DeleteModelComponent } from './views/services/services-list/delete-model/delete-model.component';
-import { NotificationComponent } from './shared/components/notification/notification.component';
-import { ScaleModelComponent } from './views/services/services-list/scale-model/scale-model.component';
-import { HealModelComponent } from './views/services/services-list/heal-model/heal-model.component';
-import { Monitor5gComponent } from './views/fcaps/monitor-5g/monitor-5g.component';
-import { SlicingManagementComponent } from './views/services/slicing-management/slicing-management.component';
-import { SlicingTaskManagementComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-management.component';
-import { SlicingResourceManagementComponent } from './views/services/slicing-management/slicing-resource-management/slicing-resource-management.component';
-import { SlicingTaskModelComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component';
-import { SubnetParamsModelComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component';
-import { SlicingBusinessTableComponent } from './views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component'
-import { BasicInfoComponent } from './shared/components/basic-info/basic-info.component';
-import { CheckProcessModelComponent } from './views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component'
-import { NsiTableComponent } from './views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component'
-import { NssiTableComponent } from './views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component'
-import { SlicingBusinessModelComponent } from './views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component';
-import { NsiModelComponent } from './views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component';
-import { NssiModelComponent } from './views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component';
-import { CsmfSlicingBusinessManagementComponent } from './views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component';
-import { BusinessOrderComponent } from './views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component';
-import { SotnManagementComponent } from './views/services/sotn-management/sotn-management.component';
-import { OrderServiceComponent } from './views/services/sotn-management/order-service/order-service.component';
-import { ManageServiceComponent } from './views/services/sotn-management/manage-service/manage-service.component';
-import { MonitorServiceComponent } from './views/services/sotn-management/monitor-service/monitor-service.component';
-import { fakeBackendProvider } from '../../testBE/FakeBackendInterceptor';
+import { SlicingTaskServices } from "./core/services/slicingTaskServices";
+
+import { PerformanceDetailsComponent } from "./shared/components/performance-details/performance-details.component";
+import { E2eDetailComponent } from "./views/services/services-list/e2e-detail/e2e-detail.component";
+import { CustomerComponent } from "./views/management/customer/customer.component";
+import { ManagemencsService } from "./core/services/managemencs.service";
+import { FcapsComponent } from "./views/fcaps/fcaps.component";
+import { TestComponent } from "./test/test.component";
+import { TextService } from "./core/services/text.service";
+import { TopCardComponent } from "./views/services/services-list/top-card/top-card.component";
+import { CreateModelComponent } from "./views/services/services-list/create-model/create-model.component";
+import { DeleteModelComponent } from "./views/services/services-list/delete-model/delete-model.component";
+import { NotificationComponent } from "./shared/components/notification/notification.component";
+import { ScaleModelComponent } from "./views/services/services-list/scale-model/scale-model.component";
+import { HealModelComponent } from "./views/services/services-list/heal-model/heal-model.component";
+import { Monitor5gComponent } from "./views/fcaps/monitor-5g/monitor-5g.component";
+import { SlicingManagementComponent } from "./views/services/slicing-management/slicing-management.component";
+import { SlicingTaskManagementComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-management.component";
+import { SlicingResourceManagementComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-resource-management.component";
+import { SlicingTaskModelComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component";
+import { SubnetParamsModelComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component";
+import { SlicingBusinessTableComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component";
+import { BasicInfoComponent } from "./shared/components/basic-info/basic-info.component";
+import { CheckProcessModelComponent } from "./views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component";
+import { NsiTableComponent } from "./views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component";
+import { NssiTableComponent } from "./views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component";
+import { SlicingBusinessModelComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component";
+import { NsiModelComponent } from "./views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component";
+import { NssiModelComponent } from "./views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component";
+import { CsmfSlicingBusinessManagementComponent } from "./views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component";
+import { BusinessOrderComponent } from "./views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component";
+import { SotnManagementComponent } from "./views/services/sotn-management/sotn-management.component";
+import { OrderServiceComponent } from "./views/services/sotn-management/order-service/order-service.component";
+import { ManageServiceComponent } from "./views/services/sotn-management/manage-service/manage-service.component";
+import { MonitorServiceComponent } from "./views/services/sotn-management/monitor-service/monitor-service.component";
+import { fakeBackendProvider } from "../../testBE/FakeBackendInterceptor";
+import { CitySelectComponent } from "./shared/components/city-select/city-select/city-select.component";
 
 @NgModule({
-  providers: [
-    { provide: LocationStrategy, useClass: HashLocationStrategy },
-    { provide: NZ_I18N, useValue: en_US },
-    Util,
-    Http,
-    ServiceListService,
-    HomesService,
-    onboardService,
-    networkHttpservice,
-    ManagemencsService,
-    TextService,
-    SlicingTaskServices,
-    // fakeBackendProvider
-  ],
-  declarations: [
-    AppComponent,
-    HomeComponent,
-    ManagementComponent,
-    ServicesListComponent,
-    OnboardVnfVmComponent,
-
-    AlarmComponent,
-
-    PerformanceComponent,
-    PerformanceVnfComponent,
-    PerformanceVmComponent,
-    DetailsComponent,
-    PieComponent,
-    LineComponent,
-    BarComponent,
-    GraphiclistComponent,
-    E2eCreationComponent,
-
-    CcvpnNetworkComponent,
-    CcvpnDetailComponent,
-    CcvpnCreationComponent,
-    E2eDetailComponent,
-    CustomerComponent,
-    PerformanceDetailsComponent,
-    FcapsComponent,
-    TestComponent,
-    TopCardComponent,
-    CreateModelComponent,
-    DeleteModelComponent,
-    NotificationComponent,
-    ScaleModelComponent,
-    HealModelComponent,
-    Monitor5gComponent,
-    SlicingManagementComponent,
-    SlicingTaskManagementComponent,
-    SlicingResourceManagementComponent,
-    SlicingTaskModelComponent,
-    SubnetParamsModelComponent,
-    SlicingBusinessTableComponent,
-    BasicInfoComponent,
-    CheckProcessModelComponent,
-      NsiTableComponent,
-      NssiTableComponent,
-      SlicingBusinessModelComponent,
-      NsiModelComponent,
-      NssiModelComponent,
-      CsmfSlicingBusinessManagementComponent,
-      BusinessOrderComponent,
-    MdonsCreationComponent,
-    MdonsDetailComponent,
-    DisableControlDirective,
-    SotnManagementComponent,
-    OrderServiceComponent,
-    ManageServiceComponent,
-    MonitorServiceComponent,
-    MdonsNetworkComponent
-  ],
-  imports: [
-    BrowserModule,
-    FormsModule,
-    ReactiveFormsModule ,
-    HttpClientModule,
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: HttpLoaderFactory,
-        deps: [HttpClient]
-      }
-    }),
-    BrowserAnimationsModule,
-    NgZorroAntdModule.forRoot(),
-    NgxEchartsModule,
-    AppRoutingModule
-  ],
-  bootstrap: [AppComponent],
-    entryComponents: [
-        SlicingBusinessModelComponent,
-        NsiModelComponent,
-        NssiModelComponent
-    ],
-  exports: [
-    FormsModule,
-    ReactiveFormsModule
-  ]
+       providers: [
+               { provide: LocationStrategy, useClass: HashLocationStrategy },
+               { provide: NZ_I18N, useValue: en_US },
+               Util,
+               Http,
+               ServiceListService,
+               HomesService,
+               onboardService,
+               networkHttpservice,
+               ManagemencsService,
+               TextService,
+               SlicingTaskServices,
+               // fakeBackendProvider
+       ],
+       declarations: [
+               AppComponent,
+               HomeComponent,
+               ManagementComponent,
+               ServicesListComponent,
+               OnboardVnfVmComponent,
+
+               AlarmComponent,
+
+               PerformanceComponent,
+               PerformanceVnfComponent,
+               PerformanceVmComponent,
+               DetailsComponent,
+               PieComponent,
+               LineComponent,
+               BarComponent,
+               GraphiclistComponent,
+               E2eCreationComponent,
+
+               CcvpnNetworkComponent,
+               CcvpnDetailComponent,
+               CcvpnCreationComponent,
+               E2eDetailComponent,
+               CustomerComponent,
+               PerformanceDetailsComponent,
+               FcapsComponent,
+               TestComponent,
+               TopCardComponent,
+               CreateModelComponent,
+               DeleteModelComponent,
+               NotificationComponent,
+               ScaleModelComponent,
+               HealModelComponent,
+               Monitor5gComponent,
+               SlicingManagementComponent,
+               SlicingTaskManagementComponent,
+               SlicingResourceManagementComponent,
+               SlicingTaskModelComponent,
+               SubnetParamsModelComponent,
+               SlicingBusinessTableComponent,
+               BasicInfoComponent,
+               CheckProcessModelComponent,
+               NsiTableComponent,
+               NssiTableComponent,
+               SlicingBusinessModelComponent,
+               NsiModelComponent,
+               NssiModelComponent,
+               CsmfSlicingBusinessManagementComponent,
+               BusinessOrderComponent,
+               MdonsCreationComponent,
+               MdonsDetailComponent,
+               DisableControlDirective,
+               SotnManagementComponent,
+               OrderServiceComponent,
+               ManageServiceComponent,
+               MonitorServiceComponent,
+               MdonsNetworkComponent,
+               CitySelectComponent,
+       ],
+       imports: [
+               BrowserModule,
+               FormsModule,
+               ReactiveFormsModule,
+               HttpClientModule,
+               TranslateModule.forRoot({
+                       loader: {
+                               provide: TranslateLoader,
+                               useFactory: HttpLoaderFactory,
+                               deps: [HttpClient],
+                       },
+               }),
+               BrowserAnimationsModule,
+               NgZorroAntdModule.forRoot(),
+               NgxEchartsModule,
+               AppRoutingModule,
+       ],
+       bootstrap: [AppComponent],
+       entryComponents: [
+               SlicingBusinessModelComponent,
+               NsiModelComponent,
+               NssiModelComponent,
+       ],
+       exports: [FormsModule, ReactiveFormsModule],
 })
-export class AppModule { }
+export class AppModule {}

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 (file)
index 0000000..e66d25f
--- /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 (file)
index 0000000..644c93e
--- /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 (file)
index 0000000..968b7ab
--- /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 (file)
index 0000000..432d49d
--- /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 (file)
index 0000000..ecb2d03
--- /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",
+                                       },
+                               ],
+                       },
+               ],
+       },
+];

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts
index e83f50e..5f8c384 100644 (file)
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts
@@ -4,12 +4,11 @@
     type /MUST/: MARKE THE ITEM TYPE, CAN BE ADDED IF NECESSARY: input/select/radio/city-select/select/table-radio/endpoint
     required /MUST/: IF REQUIRED, 
     disable /MUST/: IF DISABLED,
-    scoped: IF SCOPED NUMBERS, CAN BE EMITTED IF NOT
-    scopedText: SCOPED NUMBERS' DESCRIPTION. IF SCOPED NUMBERS EXITS, IT'S A MUST
     placeholder: IF PLACEHOLDER, CAN BE EMITTED IF NOT
     options: IF ITEM NEEDS OPTIONS, CAN BE EMITTED IF NOT
 ********/
 
+// Tn
 export const TRANSFRER_FORM_ITEMS = [
        {
                title: "S-NSSAI",
@@ -113,6 +112,7 @@ export const TRANSFRER_FORM_ITEMS = [
        },
 ];
 
+// An and Cn
 export const CORE_FORM_ITEMS = {
        An: [
                {
@@ -364,50 +364,3 @@ export const CORE_FORM_ITEMS = {
                },
        ],
 };
-
-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",
-                                       },
-                               ],
-                       },
-               ],
-       },
-];

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html
index b0e3696..d095237 100644 (file)
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html
@@ -116,30 +116,7 @@
                                </nz-form-control>
                                <!-- Address selection needs special treatment -->
                                <div *ngIf="title === 'An' && item.type === '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>
+                                       <app-city-select [areaList]="areaList"></app-city-select>
                                </div>
                        </nz-form-item>
                </form>

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts
index bc352ad..c826a7e 100644 (file)
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts
@@ -6,7 +6,7 @@ import {
        EventEmitter,
        ElementRef,
 } from "@angular/core";
-import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS, ADDRESS } from "./constants";
+import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS } from "./constants";
 import { NzMessageService } from "ng-zorro-antd";
 import { stringify } from "@angular/core/src/util";
 import { Util } from "../../../../../../shared/utils/utils";
@@ -323,90 +323,11 @@ export class SubnetParamsModelComponent implements OnInit {
                });
        }
 
-       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);
-       }
-
-       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 = [];
-               }
-       }
-
        handleCancel(): void {
                this.showModel = false;
                this.cancel.emit(this.showModel);
        }
 
-       // 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 "";
-       }
-
        // special handling for address
        areaCheckBeforeSubmit(target: object): Boolean {
                for (const prop in target) {