Interface Operation tab and screens

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

7 files changed, 288 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
new file mode 100644
index 0000000000..9e47cd5cef
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
@@ -0,0 +1,59 @@
+<div class="operation-creator">
+    <form class="w-sdc-form">
+
+        <div class="side-by-side">
+            <div class="i-sdc-form-item">
+                <label class="i-sdc-form-label">Operation Type</label>
+                <input
+                    type="text"
+                    data-tests-id="operationType"
+                    name="operationType"
+                    [(ngModel)]="operation.operationType"
+                    [attr.maxLength]="200"
+                    [disabled]="isEditMode" />
+            </div>
+
+            <div class="i-sdc-form-item" >
+                <label class="i-sdc-form-label">Description</label>
+                <input
+                    type="text"
+                    data-tests-id="operationDescription"
+                    name="description"
+                    [(ngModel)]="operation.description"
+                    [attr.maxLength]="200" />
+            </div>
+        </div>
+
+        <div class="separator-buttons">
+            <span class="input-param-title">Input Parameters</span>
+            <a
+                class="add-param-link"
+                data-tests-id="addInputParameter"
+                [ngClass]="{'disabled':!isAddAllowed()}"
+                (click)="addParam()">
+                Add Input Parameter
+            </a>
+        </div>
+
+        <div class="generic-table">
+            <div class="header-row table-row">
+                <span class="cell header-cell">Name</span>
+                <span class="cell header-cell">Property Name</span>
+                <span class="cell header-cell"></span>
+            </div>
+
+            <div class="empty-msg data-row" *ngIf="inputParams.length === 0">
+                No data to display.
+            </div>
+
+            <param-row
+                *ngFor="let param of inputParams; let idx=index"
+                class="data-row"
+                [param]="param"
+                [inputProps]="inputProperties"
+                [onRemoveParam]="onRemoveParam">
+            </param-row>
+        </div>
+
+    </form>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
new file mode 100644
index 0000000000..289dd5b452
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
@@ -0,0 +1,69 @@
+@import '../../../../../assets/styles/variables.less';
+
+.operation-creator {
+    font-family: @font-opensans-regular;
+    user-select: none;
+    padding-top: 12px;
+    padding-bottom: 20px;
+
+    .i-sdc-form-label {
+        font-size: 12px;
+    }
+
+    .w-sdc-form .i-sdc-form-item {
+        margin-bottom: 15px;
+    }
+
+    .side-by-side {
+        display: flex;
+
+        .i-sdc-form-item {
+            flex-basis: 100%;
+
+            &:first-child {
+                flex-basis: 40%;
+                margin-right: 10px;
+            }
+        }
+    }
+
+    .input-param-title {
+        font-size: 16px;
+        text-transform: uppercase;
+    }
+
+    .separator-buttons {
+        margin: 10px 0;
+        display: flex;
+        justify-content: space-between;
+
+        .add-param-link {
+            &:not(.disabled):hover {
+                cursor: pointer;
+            }
+        }
+    }
+
+    .generic-table {
+        max-height: 233px;
+
+        .header-row .header-cell {
+            &:last-child {
+                padding: 0;
+            }
+        }
+
+        .data-row {
+            &.empty-msg {
+                padding: 6px 14px;
+            }
+        }
+
+        /deep/ .cell {
+            &:last-child {
+                min-width: 40px;
+            }
+        }
+
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
new file mode 100644
index 0000000000..cc7b5feaf3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
@@ -0,0 +1,68 @@
+import * as _ from "lodash";
+import {Component} from '@angular/core';
+import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+import {InputModel, OperationModel, OperationParam} from 'app/models';
+
+@Component({
+    selector: 'operation-creator',
+    templateUrl: './operation-creator.component.html',
+    styleUrls:['./operation-creator.component.less'],
+})
+
+export class OperationCreatorComponent {
+
+    inputProperties: Array<DropdownValue>;
+    input: any;
+    inputParams: Array<OperationParam> = [];
+    operation: OperationModel;
+    isEditMode: boolean = false;
+
+    ngOnInit() {
+        this.operation = new OperationModel(this.input.operation || {});
+
+        if (this.input.operation) {
+            let {inputParams} = this.input.operation;
+
+            if (inputParams) {
+                _.forEach(inputParams.listToscaDataDefinition, (input: OperationParam) => {
+                    this.addParam(input);
+                });
+            }
+
+            if (this.input.operation.uniqueId) {
+                this.isEditMode = true;
+            }
+        }
+
+        this.inputProperties = _.map(this.input.inputProperties,
+            (input: InputModel) => new DropdownValue(input.uniqueId, input.name)
+        );
+    }
+
+    addParam(param?: OperationParam): void {
+        this.inputParams.push(new OperationParam(param));
+    }
+
+    isAddAllowed(): boolean {
+        if (this.inputParams.length === 0) {
+            return true;
+        }
+
+        const {paramId, paramName} = _.last(this.inputParams);
+        return paramId && paramName.length > 0;
+    }
+
+    onRemoveParam = (param: OperationParam): void  => {
+        let index = _.indexOf(this.inputParams, param);
+        this.inputParams.splice(index, 1);
+    }
+
+    createInputParamList(): void {
+        this.operation.createInputParamsList(this.inputParams);
+    }
+
+    checkFormValidForSubmit(): boolean {
+        return this.operation.operationType && this.operation.operationType.length > 0 && this.isAddAllowed();
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts
new file mode 100644
index 0000000000..9128e74641
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts
@@ -0,0 +1,27 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {OperationCreatorComponent} from "./operation-creator.component";
+import {FormsModule} from "@angular/forms";
+import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
+import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+import {ParamRowComponent} from './param-row/param-row.component';
+
+@NgModule({
+    declarations: [
+        OperationCreatorComponent,
+        ParamRowComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        FormElementsModule,
+        UiElementsModule
+    ],
+    exports: [],
+    entryComponents: [
+        OperationCreatorComponent
+    ],
+    providers: []
+})
+
+export class OperationCreatorModule {}
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
new file mode 100644
index 0000000000..86d7628c17
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
@@ -0,0 +1,21 @@
+<div class="cell">
+    <input
+        type="text"
+        data-tests-id="inputParamName"
+        [(ngModel)]="param.paramName" />
+</div>
+
+<ui-element-dropdown
+    class="cell"
+    data-tests-id="inputParamProperty"
+    [values]="inputProps"
+    [(value)]="param.paramId">
+</ui-element-dropdown>
+
+<div class="cell remove">
+    <span
+        class="sprite-new delete-item-icon"
+        data-tests-id="removeInputParam"
+        (click)="onRemoveParam(param)">
+    </span>
+</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
new file mode 100644
index 0000000000..9abd7c7681
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
@@ -0,0 +1,29 @@
+@import '../../../../../../assets/styles/variables.less';
+
+.remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .delete-item-icon {
+        &:hover {
+            cursor: pointer;
+        }
+    }
+}
+
+
+.cell {
+    padding: 0;
+
+    /deep/ select {
+        height: 30px;
+        border: none;
+    }
+
+    input {
+        height: 30px;
+        border: none;
+        padding-left: 10px;
+    }
+}
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
new file mode 100644
index 0000000000..01e0629942
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
@@ -0,0 +1,15 @@
+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';
+
+@Component({
+    selector: 'param-row',
+    templateUrl: './param-row.component.html',
+    styleUrls: ['./param-row.component.less']
+})
+
+export class ParamRowComponent {
+    @Input() param: OperationParam;
+    @Input() inputProps: Array<DropdownValue>;
+    @Input() onRemoveParam: Function;
+}