diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/properties-assignment')
6 files changed, 93 insertions, 49 deletions
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html index d04ddf5c91..c1a1ae5b57 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html @@ -75,11 +75,11 @@ <span class="sprite search-icon" data-tests-id="search-button"></span> <filter-properties-assignment *ngIf="isPropertiesTabSelected" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment> </div> - <button (click)="selectInput()" + <button (click)="selectToscaFunctionAndValues()" *ngIf="isPropertiesTabSelected && !isSelf()" [disabled]="checkedPropertiesCount != 1 || isReadonly || hasChangedData" class="tlv-btn blue declare-button" - data-tests-id="declare-button select-input">{{btnSelectInputText}}</button> + data-tests-id="declare-button select-tosca-function">{{btnToscaFunctionText}}</button> <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly || hasChangedData" (click)="declareProperties()" data-tests-id="declare-button declare-input">Declare Input</button> <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly || hasChangedData || isSelf()" (click)="declarePropertiesToPolicies()" data-tests-id="declare-button declare-policy">Declare Policy</button> <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || checkedChildPropertiesCount || isReadonly || hasChangedData" (click)="declareListProperties()" data-tests-id="declare-but($event)ton declare-list-input">Create List Input</button> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts index 4baae199c4..a6e0b51136 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts @@ -19,7 +19,7 @@ */ import * as _ from "lodash"; -import {Component, Inject, ViewChild} from "@angular/core"; +import {Component, Inject, ViewChild, ComponentRef} from "@angular/core"; import {PropertiesService} from "../../services/properties.service"; import { ButtonModel, @@ -62,12 +62,13 @@ import {UnsavedChangesComponent} from "app/ng2/components/ui/forms/unsaved-chang import {PropertyCreatorComponent} from "./property-creator/property-creator.component"; import {ModalService} from "../../services/modal.service"; import {DeclareListComponent} from "./declare-list/declare-list.component"; -import {InputListComponent} from "./input-list/input-list.component"; +import {ToscaFunctionComponent} from "./tosca-function/tosca-function.component"; import {CapabilitiesGroup, Capability} from "../../../models/capability"; import {ToscaPresentationData} from "../../../models/tosca-presentation"; import {Observable} from "rxjs"; import {ToscaGetFunctionType} from "../../../models/tosca-get-function-type.enum"; import {TranslateService} from "../../shared/translator/translate.service"; +import {ModalComponent} from "../../components/ui/modal/modal.component"; const SERVICE_SELF_TITLE = "SELF"; @Component({ @@ -102,7 +103,6 @@ export class PropertiesAssignmentComponent { currentMainTab: Tab; isInputsTabSelected: boolean; isPropertiesTabSelected: boolean; - isInputValueSelected: boolean = false; isPoliciesTabSelected: boolean; isReadonly: boolean; resourceIsReadonly: boolean; @@ -118,8 +118,7 @@ export class PropertiesAssignmentComponent { serviceBePropertiesMap: InstanceBePropertiesMap; serviceBeCapabilitiesPropertiesMap: InstanceBePropertiesMap; selectedInstance_FlattenCapabilitiesList: Capability[]; - propertyType: string; - btnSelectInputText: string; + btnToscaFunctionText: string; @ViewChild('hierarchyNavTabs') hierarchyNavTabs: Tabs; @ViewChild('propertyInputTabs') propertyInputTabs: Tabs; @@ -157,7 +156,7 @@ export class PropertiesAssignmentComponent { ngOnInit() { console.log("==>" + this.constructor.name + ": ngOnInit"); - this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL'); + this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL'); this.loadingInputs = true; this.loadingPolicies = true; this.loadingInstances = true; @@ -501,8 +500,8 @@ export class PropertiesAssignmentComponent { this.searchQuery = ''; }; - /**Select Properties value from defined input values**/ - selectInput = (): void => { + /**Select Tosca function value from defined values**/ + selectToscaFunctionAndValues = (): void => { let instancesIds = this.keysPipe.transform(this.instanceFePropertiesMap, []); angular.forEach(instancesIds, (instanceId: string): void => { let selectedInstanceData: any = this.instances.find(instance => instance.uniqueId == instanceId @@ -518,7 +517,7 @@ export class PropertiesAssignmentComponent { property.toscaGetFunctionType = null; this.updateInstancePropertiesWithInput(checkedProperties, selectedInstanceData); } else { - let modalTitle = 'Select value from Input'; + const modalTitle = 'Set value using TOSCA functions'; const modal = this.ModalService.createCustomModal(new ModalModel( 'sm', modalTitle, @@ -526,19 +525,10 @@ export class PropertiesAssignmentComponent { [ new ButtonModel('Save', 'blue', () => { - this.loadingProperties = true; - let selectInputValue: InputFEModel = modal.instance.dynamicContent.instance.selectInputValue; - property.getInputValues = []; - const propertyInputDetail = new PropertyInputDetail(); - propertyInputDetail.inputId = selectInputValue.uniqueId; - propertyInputDetail.inputName = selectInputValue.name; - propertyInputDetail.inputType = selectInputValue.type; - property.getInputValues.push(propertyInputDetail); - property.value = selectInputValue.name.indexOf("->") !== -1 - ? '{"get_input":[' + selectInputValue.name.replace("->", ", ") + ']}' - : '{"get_input":"' + selectInputValue.name+ '"}' ; - property.toscaGetFunctionType = ToscaGetFunctionType.GET_INPUT; - this.updateInstancePropertiesWithInput(checkedProperties, selectedInstanceData); + const selectedToscaFunction: string = modal.instance.dynamicContent.instance.selectToscaFunction; + if (selectedToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) { + this.updateSelectInputValues(modal, property, checkedProperties, selectedInstanceData); + } modal.instance.close(); } ), @@ -548,7 +538,7 @@ export class PropertiesAssignmentComponent { ], null /* type */ )); //modal - this.ModalService.addDynamicContentToModal(modal, InputListComponent); + this.ModalService.addDynamicContentToModal(modal, ToscaFunctionComponent); modal.instance.open(); } }); @@ -556,6 +546,22 @@ export class PropertiesAssignmentComponent { }); }; + private updateSelectInputValues(modal:ComponentRef<ModalComponent>, property:PropertyBEModel, checkedProperties:PropertyBEModel[], selectedInstanceData:any) { + this.loadingProperties = true; + let selectInputValue: InputFEModel = modal.instance.dynamicContent.instance.selectValue; + property.getInputValues = []; + const propertyInputDetail = new PropertyInputDetail(); + propertyInputDetail.inputId = selectInputValue.uniqueId; + propertyInputDetail.inputName = selectInputValue.name; + propertyInputDetail.inputType = selectInputValue.type; + property.getInputValues.push(propertyInputDetail); + property.value = selectInputValue.name.indexOf("->") !== -1 + ? '{"get_input":[' + selectInputValue.name.replace("->", ", ") + ']}' + : '{"get_input":"' + selectInputValue.name+ '"}' ; + property.toscaGetFunctionType = ToscaGetFunctionType.GET_INPUT; + this.updateInstancePropertiesWithInput(checkedProperties, selectedInstanceData); + } + updateInstancePropertiesWithInput(checkedProperties: PropertyBEModel[], selectedInstanceData: any) { this.componentInstanceServiceNg2.updateInstanceProperties(this.component.componentType, this.component.uniqueId, this.selectedInstanceData.uniqueId, checkedProperties) @@ -568,7 +574,7 @@ export class PropertiesAssignmentComponent { }); }, () => { this.loadingProperties = false; - this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL'); + this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL'); }); } @@ -579,18 +585,17 @@ export class PropertiesAssignmentComponent { angular.forEach(checkedProperties, (property: PropertyBEModel) => { if(this.checkedPropertiesCount == 1) { if (property.toscaGetFunctionType == null) { - this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL'); + this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL'); } else { - this.btnSelectInputText = this.translateService.translate('DESELECT_INPUT_LABEL'); + this.btnToscaFunctionText = this.translateService.translate('DESELECT_INPUT_LABEL'); } } else { - this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL'); + this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL'); } }); }); } - /*** DECLARE PROPERTIES/INPUTS ***/ declareProperties = (): void => { console.log("==>" + this.constructor.name + ": declareProperties"); diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html index b61d25cb25..ea52f20e91 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html @@ -17,14 +17,21 @@ ~ ============LICENSE_END========================================================= --> -<div class="input-list"> +<div class="tosca-function"> <loader [display]="isLoading" [loaderDelay]="500" [relative]="true" [size]="'large'"></loader> <form class="w-sdc-form"> <div class="i-sdc-form-item"> - <label class="i-sdc-form-label required">Input Value</label> - <select [(ngModel)]="selectInputValue" name="selectInputValue"> - <option *ngFor="let input of inputs" - [ngValue]="input">{{input.name}}</option> + <label class="i-sdc-form-label required">TOSCA function</label> + <select [(ngModel)]="selectToscaFunction" (change)="onToscaFunctionChange()" name="selectToscaFunction"> + <option *ngFor="let toscaFunction of toscaFunctions" + [ngValue]="toscaFunction">{{toscaFunction}}</option> + </select> + </div> + <div *ngIf="selectToscaFunction" class="i-sdc-form-item"> + <label class="i-sdc-form-label required">{{dropdownValuesLabel}}</label> + <select [(ngModel)]="selectValue" name="selectValue"> + <option *ngFor="let value of dropdownValues" + [ngValue]="value">{{value.name}}</option> </select> </div> </form> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less index e1e9b0d20d..e1e9b0d20d 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.less +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts index 0bdd028d93..22fb8cc358 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts @@ -26,19 +26,24 @@ import {WorkspaceService} from "../../workspace/workspace.service"; import {PropertiesService} from "../../../services/properties.service"; import {PROPERTY_DATA} from "../../../../utils/constants"; import {DataTypeService} from "../../../services/data-type.service"; +import {ToscaGetFunctionType} from "../../../../models/tosca-get-function-type.enum"; +import {TranslateService} from "../../../shared/translator/translate.service"; @Component({ - selector: 'input-list', - templateUrl: './input-list.component.html', - styleUrls: ['./input-list.component.less'], + selector: 'tosca-function', + templateUrl: './tosca-function.component.html', + styleUrls: ['./tosca-function.component.less'], }) -export class InputListComponent { +export class ToscaFunctionComponent { - selectInputValue; + selectToscaFunction; + selectValue; isLoading: boolean; propertyType: string; - inputs: Array<PropertyBEModel> = []; + dropdownValues: Array<PropertyBEModel> = []; + toscaFunctions: Array<string> = []; + dropdownValuesLabel: string; private dataTypeProperties: Array<PropertyBEModel> = []; private componentMetadata: ComponentMetadata; @@ -46,13 +51,40 @@ export class InputListComponent { constructor(private topologyTemplateService: TopologyTemplateService, private workspaceService: WorkspaceService, private propertiesService: PropertiesService, - private dataTypeService: DataTypeService) { + private dataTypeService: DataTypeService, + private translateService: TranslateService) { } ngOnInit() { this.componentMetadata = this.workspaceService.metadata; this.propertyType = this.propertiesService.getCheckedPropertyType(); - this.loadInputValues(this.propertyType); + this.loadToscaFunctions(); + } + + private loadToscaFunctions(): void { + this.toscaFunctions.push(ToscaGetFunctionType.GET_INPUT.toLowerCase()); + } + + onToscaFunctionChange(): void { + this.loadDropdownValueLabel(); + this.loadDropdownValues(); + } + + private loadDropdownValueLabel(): void { + if (this.selectToscaFunction) { + if (this.selectToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) { + this.dropdownValuesLabel = this.translateService.translate('INPUT_DROPDOWN_LABEL'); + } + } + } + + private loadDropdownValues(): void { + if (this.selectToscaFunction) { + this.dropdownValues = []; + if (this.selectToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) { + this.loadInputValues(this.propertyType); + } + } } private loadInputValues(propertyType: string): void { @@ -61,7 +93,7 @@ export class InputListComponent { .subscribe((response) => { response.inputs.forEach((inputProperty: any) => { if (propertyType === inputProperty.type) { - this.inputs.push(inputProperty); + this.dropdownValues.push(inputProperty); } else if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(inputProperty.type) === -1 && inputProperty.type !== propertyType) { this.buildInputDataForComplexType(inputProperty, propertyType); } @@ -80,7 +112,7 @@ export class InputListComponent { let inputData = inputProperty.name + "->" + dataTypeProperty.name; dataTypeProperty.name = inputData; if (this.dataTypeProperties.indexOf(dataTypeProperty) === -1 && dataTypeProperty.type === propertyType) { - this.inputs.push(dataTypeProperty); + this.dropdownValues.push(dataTypeProperty); } }); } diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.module.ts index 50d7b08314..efe45c3d27 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.module.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.module.ts @@ -23,12 +23,12 @@ import { FormsModule } from '@angular/forms'; import { FormElementsModule } from 'app/ng2/components/ui/form-components/form-elements.module'; import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module'; import { TranslateModule } from '../../../shared/translator/translate.module'; -import { InputListComponent } from './input-list.component'; +import { ToscaFunctionComponent } from './tosca-function.component'; import { SdcUiComponentsModule } from 'onap-ui-angular'; @NgModule({ declarations: [ - InputListComponent, + ToscaFunctionComponent, ], imports: [ CommonModule, @@ -40,9 +40,9 @@ import { SdcUiComponentsModule } from 'onap-ui-angular'; ], exports: [], entryComponents: [ - InputListComponent + ToscaFunctionComponent ], providers: [] }) -export class InputListModule {} +export class ToscaFunctionModule {} |