Provide tosca function to List entries

Providing the capability to add tosca function as the List entries

Issue-ID: SDC-4288
Signed-off-by: Imam hussain <imam.hussain@est.tech>
Change-Id: Ib2e11945f76b7004dbf8807274ee6333b9d9aa05

4 files changed, 20 insertions, 16 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
index 2431a70536..d79c6dbb08 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
@@ -43,7 +43,7 @@
     <!-- RIGHT CELL OR FULL WIDTH CELL-->
     <ng-container *ngIf="propType == derivedPropertyTypes.SIMPLE || property.isDeclared || property.isToscaFunction() || (property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP && property.schema.property.isSimpleType)">
         <div class="table-cell">
-            <checkbox class="inline-checkBox" *ngIf="(nestedLevel == 1 && property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP && property.schema.property.isSimpleType)" [(checked)]="property.isSelected" [disabled]="property.isDisabled || readonly || property.mapKey == ''" (checkedChange)="toggleTosca.emit(property)" ></checkbox>
+            <checkbox class="{{propType == derivedPropertyTypes.MAP ? 'inline-checkBox' : 'inline-checkBox-List'}}" *ngIf="(nestedLevel == 1 && property.isChildOfListOrMap && property.schema.property.isSimpleType)" [(checked)]="property.isSelected" [disabled]="property.isDisabled || readonly || property.mapKey == ''" (checkedChange)="toggleTosca.emit(property)" ></checkbox>
             <dynamic-element class="value-input"
                 pattern="validationUtils.getValidationPattern(property.type)"
                 [value]="(property.isDeclared || property.isToscaFunction()) ? property.value : property.valueObj"
@@ -66,7 +66,7 @@
         <div class="table-cell empty"></div>
     </ng-container>
     <!-- ICONS: add, delete, and expand -->
-    <ng-container *ngIf="(!property.isDeclared && !property.isToscaFunction()) || (property.isToscaFunction() && property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP && property.schema.property.isSimpleType)">
+    <ng-container *ngIf="(!property.isDeclared && !property.isToscaFunction()) || (property.isToscaFunction() && property.isChildOfListOrMap && property.schema.property.isSimpleType)">
             <a *ngIf="(propType == derivedPropertyTypes.LIST) && (!property.isChildOfListOrMap || property.mapInlist)" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly || preventInsertItem(property)}" [attr.data-tests-id]="'add-to-list-' + propertyTestsId">Add value to list</a>
             <a *ngIf="(propType == derivedPropertyTypes.MAP) && (!property.isChildOfListOrMap || property.mapInlist)" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly || preventInsertItem(property)}" [attr.data-tests-id]="'add-to-list-' + propertyTestsId">Add value to map</a>
             <span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}" [attr.data-tests-id]="'delete-from-list-' + propertyTestsId"></span>
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
index 4d2cc89dfe..6b0f445006 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less
@@ -83,7 +83,13 @@
 }
 .inline-checkBox {
     float: left;
-    width: 7%;
+    width: 9%;
     margin-left: -5px;
     margin-top: 4px;
 }
+.inline-checkBox-List {
+    float: left;
+    width: 5%;
+    margin-left: 0;
+    margin-top: 4px;
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
index 57b991bf70..edcbd43e27 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
@@ -171,7 +171,6 @@ export class DynamicPropertyComponent {
             this.expandChildById(newProps[0].propertiesName);
 
             this.updateMapKeyValueOnMainParent(newProps);
-            this.emitter.emit();
         }
     }
 
@@ -219,23 +218,22 @@ export class DynamicPropertyComponent {
             if (!itemParent) {
                 return;
             }
-
+            const oldKey = item.getActualMapKey();
+            if (this.property.subPropertyToscaFunctions !== null) {
+                let tempSubToscaFunction: SubPropertyToscaFunction[] = [];
+                this.property.subPropertyToscaFunctions.forEach((item : SubPropertyToscaFunction, index) => {
+                    if(item.subPropertyPath[0] != oldKey){
+                        tempSubToscaFunction.push(item);
+                    }
+                });
+                this.property.subPropertyToscaFunctions = tempSubToscaFunction;
+            }
             if (item.derivedDataType == DerivedPropertyType.MAP && !item.mapInlist) {
-                const oldKey = item.getActualMapKey();
                 delete itemParent.valueObj[oldKey];
                 if (itemParent instanceof PropertyFEModel) {
                     delete itemParent.valueObjValidation[oldKey];
                     itemParent.valueObjIsValid = itemParent.calculateValueObjIsValid();
                 }
-                if (this.property.subPropertyToscaFunctions !== null) {
-                    let tempSubToscaFunction: SubPropertyToscaFunction[] = [];
-                    this.property.subPropertyToscaFunctions.forEach((item : SubPropertyToscaFunction, index) => {
-                        if(item.subPropertyPath[0] != oldKey){
-                            tempSubToscaFunction.push(item);
-                        }
-                    });
-                    this.property.subPropertyToscaFunctions = tempSubToscaFunction;
-                }
                 this.property.childPropMapKeyUpdated(item, null);  // remove map key
             } else {
                 const itemIndex: number = this.property.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName);
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
index 8c2c6ce940..b5abcb3451 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
@@ -2,7 +2,7 @@
 @import '../../../../../assets/styles/sprite';
 @smaller-screen: ~"only screen and (max-width: 1580px)";
 
-:host /deep/ input { width:100%;}
+:host /deep/ input { width:96%;}
 
 .properties-table {
     display:flex;