diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts')
-rw-r--r-- | catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts | 197 |
1 files changed, 160 insertions, 37 deletions
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); + } + } |