Enhance operations to associate workflows

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

3 files changed, 63 insertions, 16 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 86d7628c17..2a72177621 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
@@ -1,18 +1,40 @@
-<div class="cell">
+<div class="cell field-name">
     <input
+        *ngIf="!isAssociateWorkflow"
         type="text"
-        data-tests-id="inputParamName"
-        [(ngModel)]="param.paramName" />
+        data-tests-id="paramName"
+        [(ngModel)]="param.name" />
+    <span *ngIf="isAssociateWorkflow">{{param.name}}</span>
 </div>
 
-<ui-element-dropdown
-    class="cell"
-    data-tests-id="inputParamProperty"
-    [values]="inputProps"
-    [(value)]="param.paramId">
-</ui-element-dropdown>
+<div class="cell field-type">
+    <ui-element-dropdown
+        *ngIf="!isAssociateWorkflow"
+        data-tests-id="paramType"
+        [values]="propTypeEnum"
+        [(value)]="param.type"
+        (valueChange)="onChangeType()">
+    </ui-element-dropdown>
+    <span *ngIf="isAssociateWorkflow">{{param.type}}</span>
+</div>
+
+<div class="cell field-property">
+    <ui-element-dropdown
+        data-tests-id="paramProperty"
+        [values]="filteredInputProps"
+        [(value)]="param.property">
+    </ui-element-dropdown>
+</div>
+
+<div class="cell field-mandatory" *ngIf="!isAssociateWorkflow">
+    <checkbox
+        *ngIf="!isAssociateWorkflow"
+        data-tests-id="paramMandatory"
+        [(checked)]="param.mandatory">
+    </checkbox>
+</div>
 
-<div class="cell remove">
+<div class="cell remove" *ngIf="!isAssociateWorkflow">
     <span
         class="sprite-new delete-item-icon"
         data-tests-id="removeInputParam"
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 9abd7c7681..8795d22e8d 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,7 @@
     align-items: center;
     justify-content: center;
 
-    .delete-item-icon {
+    .delete-btn {
         &:hover {
             cursor: pointer;
         }
@@ -14,16 +14,26 @@
 
 
 .cell {
-    padding: 0;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+    > * {
+        flex-basis: 100%;
+    }
 
     /deep/ select {
         height: 30px;
-        border: none;
     }
 
     input {
         height: 30px;
-        border: none;
         padding-left: 10px;
     }
+
+    &.field-property {
+        &:last-child {
+            flex: 1;
+        }
+    }
 }
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 01e0629942..75d4fcf7d2 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,6 @@
 import {Component, Input} from '@angular/core';
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
-import {OperationParam} from 'app/models';
+import {OperationParameter} from 'app/models';
 
 @Component({
     selector: 'param-row',
@@ -9,7 +9,22 @@ import {OperationParam} from 'app/models';
 })
 
 export class ParamRowComponent {
-    @Input() param: OperationParam;
+    @Input() param: OperationParameter;
     @Input() inputProps: Array<DropdownValue>;
+    @Input() propTypes: {};
     @Input() onRemoveParam: Function;
+    @Input() isAssociateWorkflow: boolean;
+
+    propTypeEnum: Array<string> = ['boolean', 'float', 'integer', 'string'];
+    filteredInputProps: Array<DropdownValue> = [];
+
+    ngOnInit() {
+        this.onChangeType();
+    }
+
+    onChangeType() {
+        this.filteredInputProps = _.filter(this.inputProps, prop => {
+            return this.propTypes[prop.value] === this.param.type;
+        });
+    }
 }