From ca30916132c62fa6488b8f891776d262c3eac529 Mon Sep 17 00:00:00 2001 From: KrupaNagabhushan Date: Mon, 9 May 2022 20:03:56 +0100 Subject: Generalise Select Input button in Properties Assignment view Issue-ID: SDC-3996 Signed-off-by: KrupaNagabhushan Change-Id: Idb7ff3552ffb68748c688c374625b216ac273499 --- .../properties-assignment.page.component.ts | 61 ++++++++++++---------- 1 file changed, 33 insertions(+), 28 deletions(-) (limited to 'catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts') 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, 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"); -- cgit