diff options
author | Arielk <Ariel.Kenan@amdocs.com> | 2018-04-16 15:37:39 +0300 |
---|---|---|
committer | Avi Gaffa <avi.gaffa@amdocs.com> | 2018-05-01 03:38:57 +0000 |
commit | 802bd2af2e3c6ba92eb1ce0180a13b11018f6695 (patch) | |
tree | 0906a846aa2c3edc9f2067364ed812bdead9f939 /catalog-ui/src/app/ng2/pages/interface-operation/operation-creator | |
parent | d0f6cb3ef9600846358a0e7f849759be6f9d917e (diff) |
Interface Operation tab and screens
Change-Id: If03234c783d6ce16fdd0945987ada83b6285f97f
Issue-ID: SDC-1060
Signed-off-by: Arielk <Ariel.Kenan@amdocs.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/interface-operation/operation-creator')
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; +} |