Support for concat TOSCA function

[sdc.git] / catalog-ui / src / app / ng2 / pages / properties-assignment / tosca-function / tosca-function.component.html

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 b6b313d..e98f688 100644 (file)
--- 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
@@ -18,32 +18,27 @@
   -->
 
 <div class="tosca-function">
-  <loader [display]="isLoading" [loaderDelay]="500" [relative]="true" [size]="'large'"></loader>
-  <form class="w-sdc-form">
+  <div class="w-sdc-form" [formGroup]="formGroup">
     <div class="i-sdc-form-item">
       <label class="i-sdc-form-label">{{'TOSCA_FUNCTION_LABEL' | translate}}</label>
-      <select [(ngModel)]="toscaGetFunction.functionType" (change)="onToscaFunctionChange()" name="toscaFunctionType">
+      <select formControlName="toscaFunctionType">
         <option *ngFor="let toscaFunction of toscaFunctions"
                 [ngValue]="toscaFunction">{{toscaFunction | lowercase}}</option>
       </select>
     </div>
-    <div class="i-sdc-form-item" *ngIf="showPropertySourceDropdown()">
-      <label class="i-sdc-form-label required">{{'TOSCA_FUNCTION_PROPERTY_SOURCE_LABEL' | translate}}</label>
-      <select name="propertySource" [(ngModel)]="propertySource" (change)="onPropertySourceChange()">
-        <option *ngFor="let propertySource of propertySourceList"
-                [ngValue]="propertySource">{{propertySource}}</option>
-      </select>
+    <div *ngIf="isConcatSelected()">
+      <app-tosca-concat-function [toscaConcatFunction]="toscaFunction" [componentInstanceMap]="componentInstanceMap"
+                                 (onValidityChange)="onConcatFunctionValidityChange($event)"></app-tosca-concat-function>
     </div>
-    <div *ngIf="showPropertyDropdown()" class="i-sdc-form-item">
-      <label class="i-sdc-form-label required">{{dropdownValuesLabel}}</label>
-      <select [(ngModel)]="selectedProperty" name="selectedProperty" (change)="onPropertyChange()">
-        <option *ngFor="let value of propertyDropdownList" [ngValue]="value">{{value.propertyLabel}}</option>
-      </select>
+    <div *ngIf="isGetFunctionSelected()">
+      <app-tosca-get-function [property]="property" [toscaGetFunction]="toscaFunction"
+                              [componentInstanceMap]="componentInstanceMap"
+                              [functionType]="toscaFunctionTypeForm.value"
+                              (onValidityChange)="onGetFunctionValidityChange($event)"></app-tosca-get-function>
     </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>
+  </div>
   <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
 </div>