From 90d6e2ddd348afd42b08d66c6e2308c63535e8de Mon Sep 17 00:00:00 2001 From: "andre.schmid" Date: Mon, 30 May 2022 16:21:52 +0100 Subject: Allow to edit or clear a TOSCA function value In the properties assignment view, when a property that has a TOSCA function value is selected, a button "Clear Value" will show allowing to clear the property value. This behaviour was changed to show the TOSCA function button, which, when clicked, will open the TOSCA function modal with the function values loaded, allowing to edit or clear the existing value. Change-Id: Ic365f81921052aa2c5737d2a1ac956a3fb745db6 Issue-ID: SDC-4028 Signed-off-by: andre.schmid --- .../tosca-function/tosca-function.component.html | 5 +- .../tosca-function/tosca-function.component.less | 29 ++---- .../tosca-function/tosca-function.component.ts | 106 +++++++++++++++------ 3 files changed, 88 insertions(+), 52 deletions(-) (limited to 'catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function') diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html index 1f81ebe425..f0db645b0e 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html @@ -21,7 +21,7 @@
- +
{{dropDownErrorMsg}}
+
+ +
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less index e1e9b0d20d..7857771f0a 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less @@ -19,25 +19,14 @@ @import '../../../../../assets/styles/variables.less'; -.input-list { - font-family: @font-opensans-regular; - user-select: none; - padding-top: 12px; - padding-bottom: 20px; - - .i-sdc-form-label { - font-size: 12px; - } - - .w-sdc-form .i-sdc-form-item { - margin-bottom: 15px; - } - - .side-by-side { - display: flex; - - .i-sdc-form-item { - flex-basis: 100%; - } +.button-container { + display: flex; + padding: 5px 5px; + flex-grow: 1; + clear: both; + justify-content: flex-end; + border-radius: 4px; + button { + margin: 0 12px 0 6px; } } diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts index 054a21f251..6b0cdd04d9 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts @@ -17,7 +17,7 @@ * ============LICENSE_END========================================================= */ -import {Component, Input} from '@angular/core'; +import {Component, Input, OnInit} from '@angular/core'; import {ComponentMetadata, DataTypeModel, PropertyBEModel, PropertyModel} from 'app/models'; import {TopologyTemplateService} from "../../../services/component-services/topology-template.service"; import {WorkspaceService} from "../../workspace/workspace.service"; @@ -37,10 +37,11 @@ import {ToscaGetFunction} from "../../../../models/tosca-get-function"; templateUrl: './tosca-function.component.html', styleUrls: ['./tosca-function.component.less'], }) -export class ToscaFunctionComponent { +export class ToscaFunctionComponent implements OnInit { @Input() property: PropertyBEModel; @Input() componentInstanceMap: Map = new Map(); + @Input() allowClear: boolean = true; TOSCA_FUNCTION_GET_PROPERTY = ToscaGetFunctionType.GET_PROPERTY; @@ -53,7 +54,7 @@ export class ToscaFunctionComponent { dropdownValuesLabel: string; dropDownErrorMsg: string; propertySource: string - toscaGetFunction: ToscaGetFunction = new ToscaGetFunction(); + toscaGetFunction: ToscaGetFunction = new ToscaGetFunction(undefined); private componentMetadata: ComponentMetadata; @@ -64,10 +65,31 @@ export class ToscaFunctionComponent { private translateService: TranslateService) { } - ngOnInit() { + ngOnInit(): void { this.componentMetadata = this.workspaceService.metadata; this.loadToscaFunctions(); this.loadPropertySourceDropdown(); + this.initToscaGetFunction(); + } + + private initToscaGetFunction(): void { + if (!this.property.isToscaGetFunction()) { + return; + } + this.toscaGetFunction = new ToscaGetFunction(this.property.toscaGetFunction); + if (this.toscaGetFunction.functionType === ToscaGetFunctionType.GET_PROPERTY) { + if (this.toscaGetFunction.propertySource === PropertySource.SELF) { + this.propertySource = PropertySource.SELF; + } else { + this.propertySource = this.toscaGetFunction.sourceName; + } + } + if (this.toscaGetFunction.propertyName) { + this.loadPropertyDropdown(() => { + this.selectedProperty = this.propertyDropdownList.find(property => property.propertyName === this.toscaGetFunction.propertyName) + }); + } + } private loadToscaFunctions(): void { @@ -75,7 +97,7 @@ export class ToscaFunctionComponent { this.toscaFunctions.push(ToscaGetFunctionType.GET_PROPERTY); } - private loadPropertySourceDropdown() { + private loadPropertySourceDropdown(): void { this.propertySourceList.push(PropertySource.SELF); this.componentInstanceMap.forEach((value, key) => { const instanceName = value.name; @@ -86,7 +108,7 @@ export class ToscaFunctionComponent { }); } - private addToPropertySource(source: string) { + private addToPropertySource(source: string): void { this.propertySourceList.push(source); this.propertySourceList.sort((a, b) => { if (a === PropertySource.SELF) { @@ -100,6 +122,25 @@ export class ToscaFunctionComponent { } onToscaFunctionChange(): void { + this.resetPropertySource(); + if (this.isGetInputSelected()) { + this.setSelfPropertySource(); + this.loadPropertyDropdown(); + } + } + + private loadPropertyDropdown(onComplete: () => any = () => {}): void { + this.loadPropertyDropdownLabel(); + this.loadPropertyDropdownValues(onComplete); + } + + private resetForm(): void { + this.toscaGetFunction = new ToscaGetFunction(undefined); + this.propertySource = undefined; + this.selectedProperty = undefined; + } + + private resetPropertySource(): void { this.toscaGetFunction.propertyUniqueId = undefined; this.toscaGetFunction.propertyName = undefined; this.toscaGetFunction.propertySource = undefined; @@ -107,14 +148,10 @@ export class ToscaFunctionComponent { this.toscaGetFunction.sourceName = undefined; this.toscaGetFunction.propertyPathFromSource = undefined; this.propertySource = undefined; - if (this.isGetInputSelected()) { - this.setSelfPropertySource(); - this.loadDropdownValueLabel(); - this.loadDropdownValues(); - } + this.selectedProperty = undefined; } - private loadDropdownValueLabel(): void { + private loadPropertyDropdownLabel(): void { if (!this.toscaGetFunction.functionType) { return; } @@ -125,20 +162,21 @@ export class ToscaFunctionComponent { } } - private loadDropdownValues(): void { + private loadPropertyDropdownValues(onComplete: () => any = () => {}): void { if (!this.toscaGetFunction.functionType) { return; } - this.resetDropDown(); - this.loadPropertiesInDropdown(); + this.resetPropertyDropdown(); + this.fillPropertyDropdownValues(onComplete); } - private resetDropDown() { + private resetPropertyDropdown(): void { this.dropDownErrorMsg = undefined; + this.selectedProperty = undefined; this.propertyDropdownList = []; } - private loadPropertiesInDropdown() { + private fillPropertyDropdownValues(onComplete: () => any = () => {}): void { this.startLoading(); const propertiesObservable: Observable = this.getPropertyObservable(); propertiesObservable.subscribe( (response: ComponentGenericResponse) => { @@ -156,6 +194,7 @@ export class ToscaFunctionComponent { }, (error) => { console.error('An error occurred while loading properties.', error); }, () => { + onComplete(); this.stopLoading(); }); } @@ -195,12 +234,12 @@ export class ToscaFunctionComponent { ); } - private addPropertyToDropdown(propertyDropdownValue: PropertyDropdownValue) { + private addPropertyToDropdown(propertyDropdownValue: PropertyDropdownValue): void { this.propertyDropdownList.push(propertyDropdownValue); this.propertyDropdownList.sort((a, b) => a.propertyLabel.localeCompare(b.propertyLabel)); } - private addPropertiesToDropdown(properties: PropertyBEModel[]) { + private addPropertiesToDropdown(properties: PropertyBEModel[]): void { for (const property of properties) { if (this.property.type === property.type) { this.addPropertyToDropdown({ @@ -215,7 +254,7 @@ export class ToscaFunctionComponent { } } - private fillPropertyDropdownWithMatchingChildProperties(inputProperty: PropertyBEModel, parentPropertyList: Array = []) { + private fillPropertyDropdownWithMatchingChildProperties(inputProperty: PropertyBEModel, parentPropertyList: Array = []): void { const dataTypeFound: DataTypeModel = this.dataTypeService.getDataTypeByModelAndTypeName(this.componentMetadata.model, inputProperty.type); if (!dataTypeFound || !dataTypeFound.properties) { return; @@ -235,23 +274,23 @@ export class ToscaFunctionComponent { }); } - private isGetPropertySelected() { + private isGetPropertySelected(): boolean { return this.toscaGetFunction.functionType === ToscaGetFunctionType.GET_PROPERTY; } - private isGetInputSelected() { + private isGetInputSelected(): boolean { return this.toscaGetFunction.functionType === ToscaGetFunctionType.GET_INPUT; } - private isComplexType(propertyType: string) { + private isComplexType(propertyType: string): boolean { return PROPERTY_DATA.SIMPLE_TYPES.indexOf(propertyType) === -1; } - private stopLoading() { + private stopLoading(): void { this.isLoading = false; } - private startLoading() { + private startLoading(): void { this.isLoading = true; } @@ -263,7 +302,7 @@ export class ToscaFunctionComponent { return this.toscaGetFunction.functionType && !this.isLoading && !this.dropDownErrorMsg; } - onPropertySourceChange() { + onPropertySourceChange(): void { if (!this.toscaGetFunction.functionType || !this.propertySource) { return; } @@ -277,23 +316,28 @@ export class ToscaFunctionComponent { this.toscaGetFunction.sourceName = this.propertySource; this.toscaGetFunction.sourceUniqueId = this.instanceNameAndIdMap.get(this.propertySource); } - this.loadDropdownValueLabel(); - this.resetDropDown(); - this.loadPropertiesInDropdown(); + this.loadPropertyDropdown(); } - private setSelfPropertySource() { + private setSelfPropertySource(): void { this.toscaGetFunction.propertySource = PropertySource.SELF; this.toscaGetFunction.sourceName = this.componentMetadata.name; this.toscaGetFunction.sourceUniqueId = this.componentMetadata.uniqueId; } - onPropertyChange() { + onPropertyChange(): void { this.toscaGetFunction.propertyUniqueId = this.selectedProperty.propertyId; this.toscaGetFunction.propertyName = this.selectedProperty.propertyName; this.toscaGetFunction.propertyPathFromSource = this.selectedProperty.propertyPath; } + onClearValues() { + this.resetForm(); + } + + showClearButton(): boolean { + return this.allowClear && this.toscaGetFunction.functionType !== undefined; + } } export interface PropertyDropdownValue { -- cgit 1.2.3-korg