From 1de1692115d1df5b4e07c1feb21d098899a6604b Mon Sep 17 00:00:00 2001 From: aribeiro Date: Fri, 1 Oct 2021 11:30:49 +0100 Subject: Add UI support for adding tosca artifact types UI support for adding artifacts to an interface operation implementation Issue-ID: SDC-3768 Signed-off-by: aribeiro Change-Id: I71b3e49a160521e35a45515ad7adef836f901e78 --- .../interface-operation-handler.component.ts | 146 +++++++++++++++++++-- 1 file changed, 132 insertions(+), 14 deletions(-) (limited to 'catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts') diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts index 1618af4aea..0b0efde1bf 100644 --- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts @@ -19,7 +19,7 @@ * ============LICENSE_END========================================================= */ -import {Component} from '@angular/core'; +import {Component, EventEmitter, Output} from '@angular/core'; import {UIInterfaceModel} from "../interface-operations.component"; import { InputOperationParameter, @@ -27,6 +27,12 @@ import { IOperationParamsList } from "../../../../../models/interfaceOperation"; import {TranslateService} from "../../../../shared/translator/translate.service"; +import {IDropDownOption} from "onap-ui-angular/dist/form-elements/dropdown/dropdown-models"; +import {DropdownValue} from "../../../../components/ui/form-components/dropdown/ui-element-dropdown.component"; +import {ArtifactModel} from "../../../../../models/artifacts"; +import {PropertyBEModel} from "../../../../../models/properties-inputs/property-be-model"; +import {PropertyParamRowComponent} from "./property-param-row/property-param-row.component"; +import {PropertyFEModel} from "../../../../../models/properties-inputs/property-fe-model"; @Component({ selector: 'operation-handler', @@ -36,20 +42,32 @@ import {TranslateService} from "../../../../shared/translator/translate.service" }) export class InterfaceOperationHandlerComponent { + @Output('propertyChanged') emitter: EventEmitter = new EventEmitter(); input: { + toscaArtifactTypes: Array; selectedInterface: UIInterfaceModel; selectedInterfaceOperation: InterfaceOperationModel; validityChangedCallback: Function; }; interfaceType: string; + artifactVersion: string; + artifactName: string; interfaceOperationName: string; operationToUpdate: InterfaceOperationModel; inputs: Array = []; + properties: Array = []; isLoading: boolean = false; readonly: boolean; + toscaArtifactTypeSelected: string; + toscaArtifactTypeProperties: Array = []; + + toscaArtifactTypes: Array = []; + + enableAddArtifactImplementation: boolean; + ngOnInit() { this.interfaceType = this.input.selectedInterface.displayType(); this.operationToUpdate = new InterfaceOperationModel(this.input.selectedInterfaceOperation); @@ -60,9 +78,82 @@ export class InterfaceOperationHandlerComponent { listToscaDataDefinition: Array = []; } } + this.inputs = this.operationToUpdate.inputs.listToscaDataDefinition; this.removeImplementationQuote(); this.validityChanged(); + this.loadInterfaceOperationImplementation(); + } + + private loadInterfaceOperationImplementation() { + this.toscaArtifactTypes = this.input.toscaArtifactTypes; + this.artifactVersion = this.operationToUpdate.implementation.artifactVersion; + this.artifactName = this.operationToUpdate.implementation.artifactName; + this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties; + this.getArtifactTypesSelected(); + } + + onDescriptionChange= (value: any): void => { + this.operationToUpdate.description = value; + } + + onImplementationNameChange(value: any) { + this.readonly = true + if (value) { + let artifact = new ArtifactModel(); + artifact.artifactName = value; + this.operationToUpdate.implementation = artifact; + this.enableAddArtifactImplementation = false; + this.readonly = false; + } + } + + onPropertyValueChange = (propertyValue) => { + this.emitter.emit(propertyValue); + } + + onMarkToAddArtifactToImplementation(event: any) { + if (!event) { + this.toscaArtifactTypeSelected = undefined; + this.artifactVersion = undefined; + if (this.operationToUpdate.implementation.artifactType) { + this.artifactName = undefined; + } + this.toscaArtifactTypeProperties = undefined; + } else { + this.getArtifactTypesSelected(); + } + this.enableAddArtifactImplementation = event; + this.validateRequiredField(); + } + + onSelectToscaArtifactType(type: IDropDownOption) { + if (type) { + let toscaArtifactType = type.value; + let artifact = new ArtifactModel(); + this.artifactName = undefined; + this.artifactVersion = undefined; + artifact.artifactType = toscaArtifactType.type; + artifact.properties = toscaArtifactType.properties; + this.toscaArtifactTypeProperties = artifact.properties; + this.toscaArtifactTypeSelected = artifact.artifactType; + this.operationToUpdate.implementation = artifact; + this.getArtifactTypesSelected(); + } + this.validateRequiredField(); + } + + onArtifactFileChange(value: any) { + if (value) { + this.operationToUpdate.implementation.artifactName = value; + } + this.validateRequiredField(); + } + + onArtifactVersionChange(value: any) { + if (value) { + this.operationToUpdate.implementation.artifactVersion = value; + } } onAddInput(inputOperationParameter?: InputOperationParameter): void { @@ -73,12 +164,32 @@ export class InterfaceOperationHandlerComponent { this.validityChanged(); } + propertyValueValidation = (propertyValue): void => { + this.onPropertyValueChange(propertyValue); + this.readonly = !propertyValue.isValid; + } + onRemoveInput = (inputParam: InputOperationParameter): void => { let index = this.inputs.indexOf(inputParam); this.inputs.splice(index, 1); this.validityChanged(); } + private removeImplementationQuote(): void { + if (this.operationToUpdate.implementation) { + if (!this.operationToUpdate.implementation + || !this.operationToUpdate.implementation.artifactName) { + return; + } + + let implementation = this.operationToUpdate.implementation.artifactName.trim(); + + if (implementation.startsWith("'") && implementation.endsWith("'")) { + this.operationToUpdate.implementation.artifactName = implementation.slice(1, -1); + } + } + } + private generateUniqueId = (): string => { let result = ''; const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; @@ -97,8 +208,24 @@ export class InterfaceOperationHandlerComponent { } } - onDescriptionChange= (value: any): void => { - this.operationToUpdate.description = value; + private getArtifactTypesSelected() { + if (this.operationToUpdate.implementation && this.operationToUpdate.implementation.artifactType) { + this.artifactName = this.operationToUpdate.implementation.artifactName; + this.toscaArtifactTypeSelected = this.operationToUpdate.implementation.artifactType; + this.artifactVersion = this.operationToUpdate.implementation.artifactVersion; + this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties; + this.enableAddArtifactImplementation = true; + } + this.validateRequiredField(); + } + + validateRequiredField = () => { + this.readonly = true; + let requiredFieldSelected = this.toscaArtifactTypeSelected && this.artifactName ? true : false; + this.input.validityChangedCallback(requiredFieldSelected); + if (requiredFieldSelected) { + this.readonly = false; + } } private checkFormValidForSubmit = (): boolean => { @@ -114,17 +241,8 @@ export class InterfaceOperationHandlerComponent { return isValid; } - private removeImplementationQuote(): void { - if (!this.operationToUpdate.implementation - || !this.operationToUpdate.implementation.artifactName) { - return; - } - - let implementation = this.operationToUpdate.implementation.artifactName.trim(); - - if (implementation.startsWith("'") && implementation.endsWith("'")) { - this.operationToUpdate.implementation.artifactName = implementation.slice(1, -1); - } + toDropDownOption(val: string) { + return { value : val, label: val }; } } -- cgit 1.2.3-korg