style: Split the area component from the subnet module

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

3 files changed, 4 insertions, 153 deletions

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) {