From 80c2cf3c70db2605eb9c2e28515a73567f3404ee Mon Sep 17 00:00:00 2001 From: "andre.schmid" Date: Thu, 2 Jun 2022 16:34:57 +0100 Subject: Support get functions in composition property modal Allow to assign get functions values to properties in the composition properties modal. Change-Id: I470be63e2980994f43be255d8056af7392baab75 Issue-ID: SDC-4031 Signed-off-by: andre.schmid --- .../tosca-function/tosca-function.component.ts | 63 +++++++++++++++++++--- 1 file changed, 57 insertions(+), 6 deletions(-) (limited to 'catalog-ui/src/app/ng2/pages') 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 6b0cdd04d9..e44c29fc5c 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, OnInit} from '@angular/core'; +import {Component, EventEmitter, Input, OnInit, Output} 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"; @@ -31,6 +31,7 @@ import {Observable} from 'rxjs/Observable'; import {PropertySource} from "../../../../models/property-source"; import {InstanceFeDetails} from "../../../../models/instance-fe-details"; import {ToscaGetFunction} from "../../../../models/tosca-get-function"; +import {AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn} from "@angular/forms"; @Component({ selector: 'tosca-function', @@ -42,6 +43,40 @@ export class ToscaFunctionComponent implements OnInit { @Input() property: PropertyBEModel; @Input() componentInstanceMap: Map = new Map(); @Input() allowClear: boolean = true; + @Output() onValidFunction: EventEmitter = new EventEmitter(); + @Output() onValidityChange: EventEmitter = new EventEmitter(); + + toscaGetFunctionValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { + const toscaGetFunction: ToscaGetFunction = control.value; + const errors: ValidationErrors = {}; + if (!toscaGetFunction.sourceName) { + errors.sourceName = { required: true }; + } + if (!toscaGetFunction.functionType) { + errors.functionType = { required: true }; + } + if (!toscaGetFunction.sourceUniqueId) { + errors.sourceUniqueId = { required: true }; + } + if (!toscaGetFunction.sourceName) { + errors.sourceName = { required: true }; + } + if (!toscaGetFunction.propertyPathFromSource) { + errors.propertyPathFromSource = { required: true }; + } + if (!toscaGetFunction.propertyName) { + errors.propertyName = { required: true }; + } + if (!toscaGetFunction.propertySource) { + errors.propertySource = { required: true }; + } + return errors ? errors : null; + }; + + toscaGetFunctionForm: FormControl = new FormControl(new ToscaGetFunction(undefined), [this.toscaGetFunctionValidator]); + formGroup: FormGroup = new FormGroup({ + 'toscaGetFunction': this.toscaGetFunctionForm + }); TOSCA_FUNCTION_GET_PROPERTY = ToscaGetFunctionType.GET_PROPERTY; @@ -70,6 +105,12 @@ export class ToscaFunctionComponent implements OnInit { this.loadToscaFunctions(); this.loadPropertySourceDropdown(); this.initToscaGetFunction(); + this.toscaGetFunctionForm.valueChanges.subscribe(toscaGetFunction => { + this.onValidityChange.emit(this.toscaGetFunctionForm.valid); + if (this.toscaGetFunctionForm.valid) { + this.onValidFunction.emit(toscaGetFunction); + } + }) } private initToscaGetFunction(): void { @@ -77,6 +118,7 @@ export class ToscaFunctionComponent implements OnInit { return; } this.toscaGetFunction = new ToscaGetFunction(this.property.toscaGetFunction); + this.toscaGetFunctionForm.setValue(this.toscaGetFunction); if (this.toscaGetFunction.functionType === ToscaGetFunctionType.GET_PROPERTY) { if (this.toscaGetFunction.propertySource === PropertySource.SELF) { this.propertySource = PropertySource.SELF; @@ -89,7 +131,6 @@ export class ToscaFunctionComponent implements OnInit { this.selectedProperty = this.propertyDropdownList.find(property => property.propertyName === this.toscaGetFunction.propertyName) }); } - } private loadToscaFunctions(): void { @@ -129,13 +170,14 @@ export class ToscaFunctionComponent implements OnInit { } } - private loadPropertyDropdown(onComplete: () => any = () => {}): void { + private loadPropertyDropdown(onComplete?: () => any): void { this.loadPropertyDropdownLabel(); this.loadPropertyDropdownValues(onComplete); } private resetForm(): void { this.toscaGetFunction = new ToscaGetFunction(undefined); + this.toscaGetFunctionForm.setValue(new ToscaGetFunction(undefined)); this.propertySource = undefined; this.selectedProperty = undefined; } @@ -149,6 +191,10 @@ export class ToscaFunctionComponent implements OnInit { this.toscaGetFunction.propertyPathFromSource = undefined; this.propertySource = undefined; this.selectedProperty = undefined; + + const toscaGetFunction1 = new ToscaGetFunction(undefined); + toscaGetFunction1.functionType = this.toscaGetFunction.functionType; + this.toscaGetFunctionForm.setValue(toscaGetFunction1); } private loadPropertyDropdownLabel(): void { @@ -162,7 +208,7 @@ export class ToscaFunctionComponent implements OnInit { } } - private loadPropertyDropdownValues(onComplete: () => any = () => {}): void { + private loadPropertyDropdownValues(onComplete?: () => any): void { if (!this.toscaGetFunction.functionType) { return; } @@ -176,7 +222,7 @@ export class ToscaFunctionComponent implements OnInit { this.propertyDropdownList = []; } - private fillPropertyDropdownValues(onComplete: () => any = () => {}): void { + private fillPropertyDropdownValues(onComplete?: () => any): void { this.startLoading(); const propertiesObservable: Observable = this.getPropertyObservable(); propertiesObservable.subscribe( (response: ComponentGenericResponse) => { @@ -194,7 +240,9 @@ export class ToscaFunctionComponent implements OnInit { }, (error) => { console.error('An error occurred while loading properties.', error); }, () => { - onComplete(); + if (onComplete) { + onComplete(); + } this.stopLoading(); }); } @@ -316,6 +364,7 @@ export class ToscaFunctionComponent implements OnInit { this.toscaGetFunction.sourceName = this.propertySource; this.toscaGetFunction.sourceUniqueId = this.instanceNameAndIdMap.get(this.propertySource); } + this.toscaGetFunctionForm.setValue(this.toscaGetFunction); this.loadPropertyDropdown(); } @@ -323,12 +372,14 @@ export class ToscaFunctionComponent implements OnInit { this.toscaGetFunction.propertySource = PropertySource.SELF; this.toscaGetFunction.sourceName = this.componentMetadata.name; this.toscaGetFunction.sourceUniqueId = this.componentMetadata.uniqueId; + this.toscaGetFunctionForm.setValue(this.toscaGetFunction); } onPropertyChange(): void { this.toscaGetFunction.propertyUniqueId = this.selectedProperty.propertyId; this.toscaGetFunction.propertyName = this.selectedProperty.propertyName; this.toscaGetFunction.propertyPathFromSource = this.selectedProperty.propertyPath; + this.toscaGetFunctionForm.setValue(this.toscaGetFunction); } onClearValues() { -- cgit 1.2.3-korg