summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorwangyuerg <wangyuerg@chinamobile.com>2021-02-04 18:19:30 +0800
committerwangyuerg <wangyuerg@chinamobile.com>2021-02-04 18:19:56 +0800
commit2061c3faf34037670d3b71b0e1d4dc14dfff7de6 (patch)
treebec8431c9bf4a61c71e7b699cff0db42b77cac10
parent3af39a2f4eb8e983fc8901de54538a984e4d73dc (diff)
style: Split the area component from the subnet module
Signed-off-by: wangyuerg <wangyuerg@chinamobile.com> Change-Id: I8d79b648b9b817f39d94799cb99be61e4ae8b393 Issue-ID: USECASEUI-527
-rw-r--r--usecaseui-portal/src/app/app.module.ts369
-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
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts51
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html25
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts81
9 files changed, 404 insertions, 336 deletions
diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 7559862e..be1f08a3 100644
--- 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
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",
+ },
+ ],
+ },
+ ],
+ },
+];
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 e83f50e3..5f8c3847 100644
--- 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 b0e3696c..d095237b 100644
--- 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 bc352ad4..c826a7ec 100644
--- 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) {