aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/interface-operation/operation-creator')
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html130
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less78
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts197
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts4
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html21
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less5
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts39
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> {