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

1 files changed, 19 insertions, 41 deletions

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 6584b4732b..7feea50d89 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
@@ -118,7 +118,6 @@ export class PropertiesAssignmentComponent {
     serviceBePropertiesMap: InstanceBePropertiesMap;
     serviceBeCapabilitiesPropertiesMap: InstanceBePropertiesMap;
     selectedInstance_FlattenCapabilitiesList: Capability[];
-    btnToscaFunctionText: string;
 
     @ViewChild('hierarchyNavTabs') hierarchyNavTabs: Tabs;
     @ViewChild('propertyInputTabs') propertyInputTabs: Tabs;
@@ -156,7 +155,6 @@ export class PropertiesAssignmentComponent {
 
     ngOnInit() {
         console.debug("==>" + this.constructor.name + ": ngOnInit");
-        this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
         this.loadingInputs = true;
         this.loadingPolicies = true;
         this.loadingInstances = true;
@@ -518,11 +516,6 @@ export class PropertiesAssignmentComponent {
         if (!selectedInstanceData) {
             return;
         }
-        const property: PropertyBEModel = this.buildCheckedInstanceProperty();
-        if (property.isToscaGetFunction()) {
-            this.clearCheckedInstancePropertyValue();
-            return;
-        }
         this.openToscaGetFunctionModal();
     }
 
@@ -543,26 +536,31 @@ export class PropertiesAssignmentComponent {
     }
 
     private openToscaGetFunctionModal() {
-        const modalTitle = 'Set value using TOSCA functions';
+        const modalTitle = this.translateService.translate('TOSCA_FUNCTION_MODAL_TITLE');
+        const modalButtons = [];
+        modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_SAVE'), 'blue',
+            () => {
+                const toscaGetFunction: ToscaGetFunction = modal.instance.dynamicContent.instance.toscaGetFunction;
+                if (toscaGetFunction.functionType) {
+                    this.updateCheckedInstancePropertyGetFunctionValue(toscaGetFunction);
+                } else {
+                    this.clearCheckedInstancePropertyValue();
+                }
+                modal.instance.close();
+            }
+        ));
+        const checkedInstanceProperty = this.buildCheckedInstanceProperty();
+        modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CANCEL'), 'outline grey', () => {
+            modal.instance.close();
+        }));
         const modal = this.modalService.createCustomModal(new ModalModel(
             'sm',
             modalTitle,
             null,
-            [
-                new ButtonModel(this.translateService.translate('MODAL_SAVE'), 'blue',
-                    () => {
-                        const toscaGetFunction: ToscaGetFunction = modal.instance.dynamicContent.instance.toscaGetFunction;
-                        this.updateCheckedInstancePropertyGetFunctionValue(toscaGetFunction);
-                        modal.instance.close();
-                    }
-                ),
-                new ButtonModel(this.translateService.translate('MODAL_CANCEL'), 'outline grey', () => {
-                    modal.instance.close();
-                }),
-            ],
+            modalButtons,
             null /* type */
         ));
-        const checkedInstanceProperty = this.buildCheckedInstanceProperty();
+
         this.modalService.addDynamicContentToModalAndBindInputs(modal, ToscaFunctionComponent, {
             'property': checkedInstanceProperty,
             'componentInstanceMap': this.componentInstanceMap
@@ -610,25 +608,6 @@ export class PropertiesAssignmentComponent {
             console.error(errorMsg, error);
         }, () => {
             this.loadingProperties = false;
-            this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
-        });
-    }
-
-    selectInputBtnLabel = () => {
-        let instancesIds = this.keysPipe.transform(this.instanceFePropertiesMap, []);
-        angular.forEach(instancesIds, (instanceId: string): void => {
-            let checkedProperties: PropertyBEModel[] = this.propertiesService.getCheckedProperties(this.instanceFePropertiesMap[instanceId]);
-            angular.forEach(checkedProperties, (property: PropertyBEModel) => {
-                if(this.checkedPropertiesCount == 1) {
-                    if (property.isToscaGetFunction()) {
-                        this.btnToscaFunctionText = this.translateService.translate('CLEAR_VALUE_LABEL');
-                    } else {
-                        this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
-                    }
-                } else {
-                    this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
-                }
-            });
         });
     }
 
@@ -1106,7 +1085,6 @@ export class PropertiesAssignmentComponent {
     updateCheckedPropertyCount = (increment: boolean): void => {
         this.checkedPropertiesCount += (increment) ? 1 : -1;
         console.debug("CheckedProperties count is now.... " + this.checkedPropertiesCount);
-        this.selectInputBtnLabel();
     };
 
     updateCheckedChildPropertyCount = (increment: boolean): void => {