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 <andre.schmid@est.tech>

1 files changed, 57 insertions, 6 deletions

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<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
     @Input() allowClear: boolean = true;
+    @Output() onValidFunction: EventEmitter<ToscaGetFunction> = new EventEmitter<ToscaGetFunction>();
+    @Output() onValidityChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    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<ComponentGenericResponse> = 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() {