diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/interface-operation/operation-creator')
7 files changed, 354 insertions, 120 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 index 441875b2a9..81a33c4c8a 100644 --- 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 @@ -20,66 +20,92 @@ <form class="w-sdc-form"> <div class="side-by-side"> - <div class="i-sdc-form-item"> - <label class="i-sdc-form-label" [ngClass]="{'required': !isEditMode}">{{ 'OPERATION_NAME' | translate }}</label> - <input - type="text" - name="type" - data-tests-id="operationType" - [(ngModel)]="operation.operationType" - [attr.maxLength]="200" - [ngClass]="{'disabled':isEditMode}" /> + <div class="form-item"> + <sdc-dropdown + label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}" + [required]="true" + testId="interface-name" + selectedOption="{{operation.interfaceType}}" + placeHolder="Select..." + [disabled]="readonly" + (changed)="onSelectInterface($event)" + [options]="interfaceNames"> + </sdc-dropdown> </div> - <div class="i-sdc-form-item"> - <label class="i-sdc-form-label">{{ 'OPERATION_DESCRIPTION' | translate }}</label> - <input - type="text" - data-tests-id="operationDescription" - name="description" - [ngClass]="{'disabled': readonly}" - [(ngModel)]="operation.description" - [attr.maxLength]="200" /> + <div class="form-item" *ngIf="!isInterfaceOther()"> + <sdc-dropdown + label="{{ 'OPERATION_NAME' | translate }}" + [required]="true" + testId="operation-name" + selectedOption="{{operation.name}}" + placeHolder="Select..." + [disabled]="readonly" + (changed)="onSelectOperationName($event)" + [options]="operationNames"> + </sdc-dropdown> </div> + <div class="form-item" *ngIf="isInterfaceOther()"> + <sdc-input + label="{{ 'OPERATION_NAME' | translate }}" + [(value)]="operation.name" + testId="operationName"> + </sdc-input> + </div> + </div> - <div class="side-by-side association-options"> - <div class="i-sdc-form-item" *ngIf="enableWorkflowAssociation"> - <label class="i-sdc-form-label">{{ 'OPERATION_WORKFLOW_ASSIGNMENT' | translate }}</label> - <ui-element-dropdown - data-tests-id="association-type" - [(value)]="operation.workflowAssociationType" - [values]="associationOptions" - (valueChange)="toggleAssociateWorkflow()" - [readonly]="readonly"> - </ui-element-dropdown> - </div> - <div></div> + <div class="i-sdc-form-item sdc-input"> + <span class="sdc-input__label">{{ 'OPERATION_DESCRIPTION' | translate }}</span> + <textarea + data-tests-id="operationDescription" + rows="2" + name="description" + [(ngModel)]="descriptionValue" + [ngClass]="{'disabled': readonly}"> + </textarea> </div> - <div class="side-by-side" *ngIf="isUsingExistingWF()"> - <div class="i-sdc-form-item"> - <label class="i-sdc-form-label required">{{ 'OPERATION_WORKFLOW' | translate }} + <div class="side-by-side" *ngIf="enableWorkflowAssociation"> + <div class="form-item"> + <sdc-dropdown + label="{{ 'OPERATION_WORKFLOW_ASSIGNMENT' | translate }}" + placeHolder="Select..." + testId="association-type" + selectedOption="{{workflowAssociationType}}" + [options]="associationOptions" + (changed)="toggleAssociateWorkflow($event)" + [disabled]="readonly"> + </sdc-dropdown> + </div> + + <div class="form-item" *ngIf="!isUsingExistingWF()"></div> + + <div class="form-item sdc-input" *ngIf="isUsingExistingWF()"> + <label class="sdc-input__label required">{{ 'OPERATION_WORKFLOW' | translate }} <span class="archive-warning" *ngIf="archivedWorkflowId === operation.workflowId">({{ 'OPERATION_WORKFLOW_ARCHIVED' | translate }})</span> + <span class="no-workflow-warning" *ngIf="!workflows.length">{{ 'OPERATION_NO_WORKFLOW_ERROR' | translate }}</span> </label> - <ui-element-dropdown - data-tests-id="associated-workflow" - [readonly]="readonly" - [values]="workflows" - [(value)]="operation.workflowId" - (valueChange)="onSelectWorkflow()"> - </ui-element-dropdown> + <sdc-dropdown + placeHolder="Select..." + testId="associated-workflow" + selectedOption="{{operation.workflowId}}" + [options]="workflows" + (changed)="onSelectWorkflow($event)" + [disabled]="readonly || !workflows.length"> + </sdc-dropdown> </div> - <div class="i-sdc-form-item"> - <label class="i-sdc-form-label required">{{ 'OPERATION_WORKFLOW_VERSION' | translate }}</label> - <ui-element-dropdown - data-tests-id="associated-workflow-version" - [readonly]="!operation.workflowId || archivedWorkflowId === operation.workflowId || readonly" - [values]="workflowVersions" - [(value)]="operation.workflowVersionId" - (valueChange)="changeWorkflowVersion()"> - </ui-element-dropdown> + <div class="form-item sdc-input" *ngIf="isUsingExistingWF()"> + <sdc-dropdown + *ngIf="workflows.length" + label="{{ 'OPERATION_WORKFLOW_VERSION' | translate }}" + testId="associated-workflow-version" + selectedOption="{{operation.workflowVersionId}}" + [options]="workflowVersions" + (changed)="changeWorkflowVersion($event)" + [disabled]="!operation.workflowId || archivedWorkflowId === operation.workflowId || readonly"> + </sdc-dropdown> </div> </div> @@ -93,7 +119,7 @@ *ngIf="!isUsingExistingWF() && !readonly" data-tests-id="addInputParameter" [ngClass]="{'disabled':!canAdd()}" - (click)="addParam()">{{ 'OPERATION_ADD_PARAMS' | translate }}</a> + (click)="addParam()">{{ currentTab === TYPE_INPUT ? 'Add Input' : 'Add Output' }}</a> </div> <div class="generic-table"> @@ -120,7 +146,6 @@ <span class="bold-message">{{ 'EMPTY_PARAM_TABLE_NO_SELECTED_WORKFLOW_1' | translate }}</span> <span>{{ 'EMPTY_PARAM_TABLE_NO_SELECTED_WORKFLOW_2' | translate }}</span> </div> - <div *ngIf="!workflows.length" [innerHTML]="'EMPTY_PARAM_TABLE_NO_WORKFLOWS' | translate"></div> </div> </div> @@ -132,7 +157,8 @@ [param]="param" [inputProps]="inputProperties" [onRemoveParam]="onRemoveParam" - [readonly]="readonly"> + [readonly]="readonly" + [validityChanged]="validityChanged"> </param-row> </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 index 10976ef473..1d65d98b9c 100644 --- 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 @@ -1,4 +1,5 @@ @import '../../../../../assets/styles/variables.less'; +@import '../../../../../assets/styles/override.less'; .operation-creator { font-family: @font-opensans-regular; @@ -10,32 +11,66 @@ font-size: 12px; } - .w-sdc-form .i-sdc-form-item { + .w-sdc-form .form-item { margin-bottom: 15px; } - .side-by-side { - display: flex; + textarea { + min-height: 74px; + margin-bottom: 18px; + } + + /deep/ .sdc-dropdown__component-container { + .sdc-dropdown__header { + height: 38px; + line-height: 35px; + + svg-icon { + margin: 13px 6px; + } + } + } + + /deep/ .sdc-input { + margin-bottom: 0; - &.association-options { - margin-top: 5px; + .sdc-input__input { + height: 38px; } + } + + .side-by-side { + display: flex; - .i-sdc-form-item { - flex-basis: 100%; + .form-item { + flex: 1; &:first-child { - flex-basis: 40%; - margin-right: 10px; + margin-right: 14px; + flex-basis: 37%; + flex-grow: 0; + flex-shrink: 0; } - .archive-warning { - font-family: @font-opensans-bold; - color: @main_color_i; + &:nth-child(3) { + margin-left: 14px; + flex: 0.4; } + } } + .archive-warning { + font-family: @font-opensans-bold; + color: @main_color_i; + } + + .no-workflow-warning { + font-family: @font-opensans-bold; + color: @sdcui_color_red; + float: right; + } + .input-param-title { font-size: 16px; text-transform: uppercase; @@ -51,24 +86,33 @@ cursor: pointer; } } + + .tab { + width: 84px; + text-align: center; + } } .generic-table { - max-height: 233px; + max-height: 244px; min-height: 91px; background: @main_color_p; .header-row .header-cell { - &.remove { - padding: 8px; - } .info-icon { float: right; + position: relative; + top: 2px; } /deep/ .tooltip-inner { - max-width: 280px; + padding: 2px; + max-width: 270px; font-size: 11px; } + &.remove { + padding: 10px; + font-size: 10px; + } } .data-row { 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 index a304f1a30d..e1b2b4e079 100644 --- 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 @@ -7,15 +7,37 @@ import {TranslateService} from "app/ng2/shared/translator/translate.service"; import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service'; import {OperationModel, OperationParameter, InputBEModel, RadioButtonModel, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/models'; +import {IDropDownOption} from "sdc-ui/lib/angular/form-elements/dropdown/dropdown-models"; import {Tabs, Tab} from "app/ng2/components/ui/tabs/tabs.component"; import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component"; +export class DropDownOption implements IDropDownOption { + value: string; + label: string; + + constructor(value: string, label?: string) { + this.value = value; + this.label = label || value; + } +} + +class TypedDropDownOption extends DropDownOption { + type: number; + + constructor(value: string, label?: string, type?: number) { + super(value, label); + this.type = type; + } +} + export interface OperationCreatorInput { - operation: OperationModel, + inputOperation: OperationModel, inputProperties: Array<InputBEModel>, enableWorkflowAssociation: boolean, readonly: boolean, - isService: boolean + isService: boolean, + interfaceTypes: { [interfaceType: string]: Array<string> }, + validityChangedCallback: Function } @Component({ @@ -28,7 +50,12 @@ export interface OperationCreatorInput { export class OperationCreatorComponent { input: OperationCreatorInput; + inputOperation: OperationModel; operation: OperationModel; + interfaceNames: Array<TypedDropDownOption> = []; + interfaceTypes: { [interfaceType: string]: Array<string> }; + operationNames: Array<DropDownOption> = []; + validityChangedCallback: Function; workflows: Array<DropdownValue> = []; workflowVersions: Array<DropdownValue> = []; @@ -45,7 +72,8 @@ export class OperationCreatorComponent { tableParameters: Array<OperationParameter> = []; - associationOptions: Array<DropdownValue>; + associationOptions: Array<DropdownValue> = []; + workflowAssociationType: string; enableWorkflowAssociation: boolean; isEditMode: boolean = false; @@ -57,6 +85,9 @@ export class OperationCreatorComponent { TYPE_INPUT = 'Inputs'; TYPE_OUTPUT = 'Outputs'; + INTERFACE_OTHER_HEADER = 'Local Interfaces'; + INTERFACE_OTHER = 'Local'; + @ViewChild('propertyInputTabs') propertyInputTabs: Tabs; currentTab: String; @@ -65,24 +96,41 @@ export class OperationCreatorComponent { this.propertyTooltipText = this.translateService.translate("OPERATION_PROPERTY_TOOLTIP_TEXT"); this.associationOptions = [ - new DropdownValue(WORKFLOW_ASSOCIATION_OPTIONS.NONE, this.translateService.translate("NO_WORKFLOW_ASSOCIATION")), - new DropdownValue(WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.translateService.translate("EXISTING_WORKFLOW_ASSOCIATION")) + new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.NONE, this.translateService.translate("NO_WORKFLOW_ASSOCIATION")), + new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.translateService.translate("EXISTING_WORKFLOW_ASSOCIATION")) ]; + + this.workflowAssociationType = this.operation.workflowAssociationType || WORKFLOW_ASSOCIATION_OPTIONS.NONE; }); this.currentTab = this.TYPE_INPUT; } - ngOnInit() { - this.readonly = this.input.readonly; - this.enableWorkflowAssociation = this.input.enableWorkflowAssociation; - this.inputProperties = this.input.inputProperties; + createInterfaceDropdown(type: string) { + let label = type; + const lastDot = label.lastIndexOf('.'); + if (lastDot > -1) { + label = label.substr(lastDot + 1); + } + return new TypedDropDownOption(type, label); + } - const inputOperation = this.input.operation; + ngOnInit() { + this.interfaceNames = _.map( + _.keys(this.interfaceTypes), + type => this.createInterfaceDropdown(type) + ); + this.interfaceNames.unshift(new TypedDropDownOption('Existing Interfaces', 'Existing Interfaces', 1)); + this.interfaceNames = this.interfaceNames.concat([ + new TypedDropDownOption(' ', ' ', 3), + new TypedDropDownOption(this.INTERFACE_OTHER_HEADER, this.INTERFACE_OTHER_HEADER, 1), + new TypedDropDownOption(this.INTERFACE_OTHER) + ]); + + const inputOperation = this.inputOperation; this.operation = new OperationModel(inputOperation || {}); - if (!inputOperation) { - this.operation.workflowAssociationType = WORKFLOW_ASSOCIATION_OPTIONS.NONE; - } + this.onSelectInterface(new DropDownOption(this.operation.interfaceType)); + this.validityChanged(); if (this.enableWorkflowAssociation) { this.isLoading = true; @@ -113,13 +161,16 @@ export class OperationCreatorComponent { } reconstructOperation = () => { - const inputOperation = this.input.operation; + const inputOperation = this.inputOperation; if (inputOperation) { if (this.enableWorkflowAssociation && inputOperation.workflowVersionId && this.isUsingExistingWF(inputOperation)) { - this.onSelectWorkflow(inputOperation.workflowVersionId).add(() => { - this.buildParams(); - this.updateTable(); - }); + const sub = this.onSelectWorkflow(new DropDownOption(inputOperation.workflowId), inputOperation.workflowVersionId); + if (sub) { + sub.add(() => { + this.buildParams(); + this.updateTable(); + }); + } } else { this.inputParameters = this.noAssignInputParameters; this.outputParameters = this.noAssignOutputParameters; @@ -132,14 +183,15 @@ export class OperationCreatorComponent { } } this.updateTable(); + this.validityChanged(); } buildParams = () => { - if (this.input.operation.outputParams) { + if (this.inputOperation.outputs) { this.currentTab = this.TYPE_OUTPUT; this.updateTable(); _.forEach( - [...this.input.operation.outputParams.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)), + [...this.inputOperation.outputs.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)), (output: OperationParameter) => { this.addParam(output); } @@ -147,9 +199,9 @@ export class OperationCreatorComponent { } this.currentTab = this.TYPE_INPUT; this.updateTable(); - if (this.input.operation.inputParams) { + if (this.inputOperation.inputs) { _.forEach( - [...this.input.operation.inputParams.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)), + [...this.inputOperation.inputs.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)), (input: OperationParameter) => { this.addParam(input); } @@ -157,15 +209,53 @@ export class OperationCreatorComponent { } } - onSelectWorkflow(selectedVersionId?: string): Subscription { + isInterfaceOther(): boolean { + return this.operation.interfaceType === this.INTERFACE_OTHER; + } + + onSelectInterface(interf: IDropDownOption) { + if (interf && this.operation.interfaceType !== interf.value) { + this.operation.name = undefined; + } + this.operation.interfaceType = interf && interf.value; + this.operationNames = !this.operation.interfaceType ? [] : ( + _.map( + this.interfaceTypes[this.operation.interfaceType], + name => new DropDownOption(name) + ) + ); + this.validityChanged(); + } + + onSelectOperationName(name: IDropDownOption) { + if (name) { + this.operation.name = name.value; + this.validityChanged(); + } + } + + get descriptionValue() { + return this.operation.description; + } + + set descriptionValue(v) { + this.operation.description = v; + this.validityChanged(); + } - this.operation.workflowVersionId = selectedVersionId || null; + onSelectWorkflow(workflowId: DropDownOption, selectedVersionId?: string): Subscription { + + if (_.isUndefined(workflowId) || workflowId.value === this.operation.workflowId) { + return; + } + this.operation.workflowId = workflowId.value; if (!this.assignInputParameters[this.operation.workflowId]) { this.assignInputParameters[this.operation.workflowId] = {}; this.assignOutputParameters[this.operation.workflowId] = {}; } this.isLoading = true; + this.validityChanged(); return this.workflowServiceNg2.getWorkflowVersions(this.operation.workflowId).subscribe((versions: Array<any>) => { this.isLoading = false; @@ -197,18 +287,34 @@ export class OperationCreatorComponent { this.operation.workflowVersionId = _.last(this.workflowVersions).value; } - this.changeWorkflowVersion(); + this.changeWorkflowVersion(new DropDownOption(this.operation.workflowVersionId)); + this.validityChanged(); }); } - changeWorkflowVersion() { + changeWorkflowVersion(versionId: DropDownOption) { + + if (_.isUndefined(versionId)) { + return; + } + + this.operation.workflowVersionId = versionId.value; this.inputParameters = this.assignInputParameters[this.operation.workflowId][this.operation.workflowVersionId]; this.outputParameters = this.assignOutputParameters[this.operation.workflowId][this.operation.workflowVersionId]; this.updateTable(); + this.validityChanged(); + } - toggleAssociateWorkflow() { + toggleAssociateWorkflow(type: DropDownOption) { + + if (_.isUndefined(type)) { + return; + } + + this.operation.workflowAssociationType = type.value; + this.workflowAssociationType = this.operation.workflowAssociationType; if (!this.isUsingExistingWF()) { this.inputParameters = this.noAssignInputParameters; @@ -224,15 +330,19 @@ export class OperationCreatorComponent { } this.updateTable(); + this.validityChanged(); } tabChanged = (event) => { + this.currentTab = event.title; this.updateTable(); + } updateTable() { + switch (this.currentTab) { case this.TYPE_INPUT: this.tableParameters = this.inputParameters; @@ -241,17 +351,20 @@ export class OperationCreatorComponent { this.tableParameters = this.outputParameters; break; } + } addParam(param?: OperationParameter): void { + this.validityChanged(); this.tableParameters.push(new OperationParameter(param)); } - canAdd(): boolean { + canAdd = (): boolean => { + let valid = true; if (this.currentTab === this.TYPE_INPUT) { _.forEach(this.inputParameters, param => { - if (!param.name || !param.property) { + if (!param.name || !param.inputId) { valid = false; } }); @@ -262,13 +375,16 @@ export class OperationCreatorComponent { } }); } + return valid; + } - isParamsValid(): boolean { + isParamsValid = (): boolean => { + let valid = true; _.forEach(this.inputParameters, param => { - if (!param.name || !param.property) { + if (!param.name || !param.inputId) { valid = false; } }); @@ -277,7 +393,9 @@ export class OperationCreatorComponent { valid = false; } }); + return valid; + } onRemoveParam = (param: OperationParameter): void => { @@ -285,9 +403,9 @@ export class OperationCreatorComponent { this.tableParameters.splice(index, 1); } - createParamLists(): void { - this.operation.createInputParamsList(this.inputParameters); - this.operation.createOutputParamsList(this.outputParameters); + createParamLists = () => { + this.operation.createInputsList(this.inputParameters); + this.operation.createOutputsList(this.outputParameters); } isUsingExistingWF = (operation?: OperationModel): boolean => { @@ -295,15 +413,20 @@ export class OperationCreatorComponent { return operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXISTING; } - shouldCreateWF(operation?: OperationModel): boolean { + shouldCreateWF = (operation?: OperationModel): boolean => { operation = operation || this.operation; return this.operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW; } - checkFormValidForSubmit(): boolean { - return this.operation.operationType && + checkFormValidForSubmit = (): boolean => { + return this.operation.name && (!this.isUsingExistingWF() || this.operation.workflowVersionId) && this.isParamsValid(); } + validityChanged = () => { + let validState = this.checkFormValidForSubmit(); + this.validityChangedCallback(validState); + } + } 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 index 7d881231d5..0b6f8336c3 100644 --- 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 @@ -3,8 +3,9 @@ import {CommonModule} from "@angular/common"; import {FormsModule} from "@angular/forms"; import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module"; -import {TranslateModule} from "app/ng2/shared/translator/translate.module"; +import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index"; import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module"; +import {TranslateModule} from "app/ng2/shared/translator/translate.module"; import {OperationCreatorComponent} from "./operation-creator.component"; import {ParamRowComponent} from './param-row/param-row.component'; @@ -16,6 +17,7 @@ import {ParamRowComponent} from './param-row/param-row.component'; ], imports: [ CommonModule, + SdcUiComponentsModule, FormsModule, FormElementsModule, TranslateModule, 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> { |