Interface operation screen enhancements

Change-Id: I2b510a4bf27ddf5730ed044cf77aebd955ad5862
Issue-ID: SDC-2044
Signed-off-by: Arielk <Ariel.Kenan@amdocs.com>

3 files changed, 52 insertions, 13 deletions

diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
index 9a5c101e87..1128d60e04 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
@@ -19,6 +19,7 @@
         *ngIf="!isAssociateWorkflow"
         data-tests-id="paramName"
         [(value)]="param.name"
+        (valueChange)="onChangeName()"
         [readonly]="readonly">
     </ui-element-input>
     <span *ngIf="isAssociateWorkflow">{{param.name}}</span>
@@ -41,13 +42,14 @@
         *ngIf="filteredInputProps.length || !isAssociateWorkflow"
         data-tests-id="paramProperty"
         [values]="filteredInputProps"
-        [(value)]="param.property"
+        value="paramId"
+        (valueChange)="onChangeProperty($event)"
         [readonly]="readonly">
     </ui-element-dropdown>
     <span
         *ngIf="!filteredInputProps.length && isAssociateWorkflow"
         class="no-properties-error">
-        No available properties of this type.
+        {{ 'PARAM_NONE_OF_TYPE' | translate }}
     </span>
 </div>
 
@@ -55,15 +57,18 @@
     <checkbox
         *ngIf="!isAssociateWorkflow"
         data-tests-id="paramMandatory"
-        [(checked)]="param.mandatory"
+        [(checked)]="param.required"
         [ngClass]="{'disabled':readonly}">
     </checkbox>
 </div>
 
 <div class="cell remove" *ngIf="!isAssociateWorkflow && !readonly">
-    <span
-        class="sprite-new delete-item-icon"
-        data-tests-id="removeInputParam"
-        (click)="onRemoveParam(param)">
-    </span>
+    <svg-icon
+      name="trash-o"
+      mode="info"
+      size="small"
+      testId="removeInputParam"
+      (click)="onRemoveParam(param)"
+      [clickable]="true">
+  </svg-icon>
 </div>
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
index 2c2625d778..99a54bb65c 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
@@ -5,7 +5,10 @@
     align-items: center;
     justify-content: center;
 
-    .delete-item-icon {
+    svg-icon {
+        position: relative;
+        right: -3px;
+
         &:hover {
             cursor: pointer;
         }
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
index a12425d6e9..8837a17bd9 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
@@ -1,6 +1,7 @@
 import {Component, Input} from '@angular/core';
 import {DataTypeService} from "app/ng2/services/data-type.service";
 import {OperationParameter, InputBEModel} from 'app/models';
+import {DropDownOption} from "../operation-creator.component";
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
 
 @Component({
@@ -16,8 +17,10 @@ export class ParamRowComponent {
     @Input() isAssociateWorkflow: boolean;
     @Input() readonly: boolean;
     @Input() isInputParam: boolean;
+    @Input() validityChanged: Function;
 
-    propTypeEnum: Array<String> = [];
+    paramId: string;
+    propTypeEnum: Array<DropDownOption> = [];
     filteredInputProps: Array<DropdownValue> = [];
 
     constructor(private dataTypeService: DataTypeService) {}
@@ -26,20 +29,48 @@ export class ParamRowComponent {
         this.propTypeEnum = _.uniq(
             _.map(
                 this.getPrimitiveSubtypes(),
-                prop => prop.type
+                prop => new DropDownOption(prop.type)
             )
         );
         this.onChangeType();
+        this.validityChanged();
     }
 
-    onChangeType() {
+    onChangeName() {
+        this.validityChanged();
+    }
+
+    onChangeType(paramId?: string) {
         this.filteredInputProps = _.map(
             _.filter(
                 this.getPrimitiveSubtypes(),
-                prop => prop.type === this.param.type
+                prop => !this.param.type || prop.type === this.param.type
             ),
             prop => new DropdownValue(prop.uniqueId, prop.name)
         );
+        if (paramId) {
+            this.paramId = paramId;
+        }
+    }
+
+    onChangeProperty(paramId: string) {
+        this.param.inputId = paramId;
+        const newProp = _.find(
+            this.getPrimitiveSubtypes(),
+            prop => this.param.inputId === prop.uniqueId
+        );
+
+        if (!this.param.type) {
+            this.param.type = newProp.type;
+            this.onChangeType(paramId);
+        } else {
+            this.paramId = paramId;
+        }
+
+        if (!this.param.name) {
+            this.param.name = newProp.name;
+        }
+        this.validityChanged();
     }
 
     getPrimitiveSubtypes(): Array<InputBEModel> {