diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function')
3 files changed, 88 insertions, 52 deletions
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 @@ <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">{{'TOSCA_FUNCTION_LABEL' | translate}}</label> + <label class="i-sdc-form-label">{{'TOSCA_FUNCTION_LABEL' | translate}}</label> <select [(ngModel)]="toscaGetFunction.functionType" (change)="onToscaFunctionChange()" name="toscaFunctionType"> <option *ngFor="let toscaFunction of toscaFunctions" [ngValue]="toscaFunction">{{toscaFunction | lowercase}}</option> @@ -41,6 +41,9 @@ </select> </div> <div *ngIf="dropDownErrorMsg">{{dropDownErrorMsg}}</div> + <div *ngIf="showClearButton()" class="button-container"> + <button (click)="onClearValues()" class="tlv-btn red ng-star-inserted">{{'TOSCA_FUNCTION_CLEAR_VALUE_BUTTON' | translate}}</button> + </div> </form> <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader> </div> 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<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>(); + @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<ComponentGenericResponse> = 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<PropertyBEModel> = []) { + private fillPropertyDropdownWithMatchingChildProperties(inputProperty: PropertyBEModel, parentPropertyList: Array<PropertyBEModel> = []): 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 { |