summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2021-01-26 19:22:38 +0800
committerxu ran <xuranyjy@chinamobile.com>2021-01-27 01:50:04 +0000
commitdb0ce30f2215a7983d43a86855d0a36bf0b12bc0 (patch)
tree86ade403626834da01c790de1ee8a70730d39074 /usecaseui-portal
parent78f3d26b3dc21b3c5ba89e88c40d301932c68cbf (diff)
feat: change the ui struc of csmf creating model
Change-Id: I5963b93d6ca0ef21556da2728e39e15b8b72f260 Issue-ID: USECASEUI-531 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal')
-rw-r--r--usecaseui-portal/src/app/shared/utils/utils.ts2
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html29
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts1
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts47
4 files changed, 53 insertions, 26 deletions
diff --git a/usecaseui-portal/src/app/shared/utils/utils.ts b/usecaseui-portal/src/app/shared/utils/utils.ts
index 6864d60d..63e19075 100644
--- a/usecaseui-portal/src/app/shared/utils/utils.ts
+++ b/usecaseui-portal/src/app/shared/utils/utils.ts
@@ -35,7 +35,7 @@ export class Util {
getRulesText(words: string, title: string, index: number, rulesText: any[]){
return rulesText[index] = words + title
};
- validator(title: string, key: string, val: any, index: number, rulesText: any[], validateRulesShow: any[]) {
+ validator(title: string="", key: string="", val: any="", index: number=0, rulesText: any[]=[], validateRulesShow: any[]=[]) {
let maxNumberReg = /^([1-9]\d{0,4}|100000)$/, // Check integer between 1 ~ 100000
expDataRateReg = /^([1-9]\d{2}|[1-3]\d{3}|3000)$/, // Check integer between 100 ~ 3000
latencyReg = /^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/; // Check integers between 10 and 200
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
index e540c655..38ecbf11 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
@@ -4,48 +4,41 @@
<div class="subnet_params_container">
<form nz-form>
<nz-form-item *ngFor="let item of comunicationFormItems; let i = index">
- <nz-form-label [nzSpan]="6" nzRequired *ngIf=" item.title !== 'Coverage Area Number' "
- [nzFor]="item.key">
- {{ item.title }}
- </nz-form-label>
- <nz-form-label [nzSpan]="6" *ngIf="item.title === 'Coverage Area Number' " [nzFor]="item.key">
+ <nz-form-label [nzSpan]="6" [nzRequired]="item.required" [nzFor]=" item.key">
{{ item.title }}
</nz-form-label>
<nz-form-control [nzSpan]="15">
<input nz-input nz-tooltip [id]="item.key" [name]="item.key"
[(ngModel)]="slicing_order_info[item.key]"
[ngClass]="{'error-input-border':validateRulesShow[i] === true}"
- *ngIf=" item.title === 'Communication Service Name' "
- (blur)="this.Util.validator(item.title,item.key,slicing_order_info[item.key],i,rulesText,validateRulesShow)" />
+ *ngIf=" item.type === 'input'&&!item.scoped "
+ [placeholder]="item.placeholder?item.placeholder:''"
+ (blur)="item.required?this.Util.validator(item.title,item.key,slicing_order_info[item.key],i,rulesText,validateRulesShow):this.Util.validator()" />
<nz-tooltip [nzTitle]="tooltipText" [nzPlacement]="'right'" [nzTrigger]="'focus'">
- <input nz-input nz-tooltip [id]="item.key" [name]="item.key"
+ <input nz-input nz-tooltip [id]="item.key" [name]="item.key" *ngIf="item.scoped"
[(ngModel)]="slicing_order_info[item.key]"
[ngClass]="{'error-input-border':validateRulesShow[i] === true}"
- *ngIf=" item.title !== 'Communication Service Name' && item.title !== 'Coverage Area Number'&&item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' "
(blur)="this.Util.validator(item.title,item.key,slicing_order_info[item.key],i,rulesText,validateRulesShow)"
(focus)="changeTooltipText(item.title)" />
</nz-tooltip>
<nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
- *ngIf="item.title === 'Resource Sharing Level'">
+ *ngIf="item.type === 'radio'">
<label nz-radio [nzValue]="option.key" *ngFor="let option of item.options">
{{ option.title }}
</label>
</nz-radio-group>
<nz-select [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
- *ngIf="item.title === 'Mobility'">
+ *ngIf="item.type === 'select'">
<nz-option [nzValue]="option.key" [nzLabel]="option.title"
*ngFor="let option of item.options">
</nz-option>
</nz-select>
- <nz-form-explain
- *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' && validateRulesShow[i]"
- class="validateRules">{{rulesText[i]}}
+ <nz-form-explain *ngIf="item.type === 'input' && validateRulesShow[i]" class="validateRules">
+ {{rulesText[i]}}
</nz-form-explain>
- <input nz-input nz-tooltip [id]="item.key" [name]="item.key"
- [(ngModel)]="slicing_order_info[item.key]" *ngIf=" item.title === 'Coverage Area Number' "
- placeholder="Please enter the coverage area number. use , to separate them if necessary " />
</nz-form-control>
- <div *ngIf="item.key === 'coverageArea'">
+
+ <div *ngIf="item.type === 'city-select'">
<div *ngFor="let area of areaList; let i = index">
<nz-form-control [nzSpan]="!ind ? 3 : 4" [nzOffset]="i && !ind ? 6 : 0"
class="subnet_params_area" *ngFor="let item of area; let ind = index">
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts
index ef7971fd..8e58a60c 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts
@@ -209,6 +209,7 @@ export class BusinessOrderComponent implements OnInit {
const paramsObj = {
slicing_order_info: this.slicing_order_info
};
+ console.log(paramsObj,"===>paramsObj")
this.isSpinning = true;
const csmfSlicingPurchaseFailedCallback = () => {
this.handleCancel();
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts
index 4a42b957..4f64a5c7 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts
@@ -1,27 +1,53 @@
export const COMMUNICATION_FORM_ITEMS = [
+ /***
+ title: MARK THE ITEM NAME,
+ key: MARK THE ITEM KEY,
+ type: MARKE THE ITEM TYPE, CAN BE ADDED IF NECESSARY: input/select/radio/city-select
+ required: IF REQUIRED,
+ scoped: IF SCOPED NUMBERS, CAN BE EMITTED IF NOT
+ placeholder: IF PLACEHOLDER, CAN BE EMITTED IF NOT
+ options: IF ITEM NEEDS OPTIONS, CAN BE EMITTED IF NOT
+ ***/
{
title: 'Communication Service Name',
- key: 'name'
+ key: 'name',
+ type:"input",
+ required:true
+
},
{
title: 'Max Number of UEs',
- key: 'maxNumberofUEs'
+ key: 'maxNumberofUEs',
+ type:"input",
+ scoped:true,
+ required:true
},
{
title: 'Data Rate Downlink (Mbps)',
- key: 'expDataRateDL'
+ key: 'expDataRateDL',
+ type:"input",
+ scoped:true,
+ required:true
},
{
title: 'Latency',
- key: 'latency'
+ key: 'latency',
+ type:"input",
+ scoped:true,
+ required:true
},
{
title: 'Data Rate Uplink (Mbps)',
- key: 'expDataRateUL'
+ key: 'expDataRateUL',
+ type:"input",
+ scoped:true,
+ required:true
},
{
title: 'Resource Sharing Level',
key: 'resourceSharingLevel',
+ type:"radio",
+ required:true,
options: [
{
title: 'Shared',
@@ -36,6 +62,8 @@ export const COMMUNICATION_FORM_ITEMS = [
{
title: 'Mobility',
key: 'uEMobilityLevel',
+ type:"select",
+ required:true,
options: [
{
title: 'Stationary',
@@ -57,11 +85,16 @@ export const COMMUNICATION_FORM_ITEMS = [
},
{
title: 'Area',
- key: 'coverageArea'
+ key: 'coverageArea',
+ type:"city-select",
+ required:true
},
{
title: 'Coverage Area Number',
- key: 'coverageAreaNumber'
+ key: 'coverageAreaNumber',
+ type:"input",
+ placeholder:"Please enter the coverage area number. use , to separate them if necessary",
+ required:false
}
]