diff options
Diffstat (limited to 'usecaseui-portal')
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) { |