Update Interface definition on VFC

Signed-off-by: aribeiro <anderson.ribeiro@est.tech>
Change-Id: I13678c92ae6088016a78554ffaf0da47b82f7e65
Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>
Issue-ID: SDC-3893
Signed-off-by: andre.schmid <andre.schmid@est.tech>

3 files changed, 29 insertions, 9 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts
index 17f697ecda..07d8fd6eea 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts
@@ -29,7 +29,7 @@ import {PluginsService} from "app/ng2/services/plugins.service";
 import {SelectedComponentType} from "../common/store/graph.actions";
 
 import {WorkspaceService} from "../../workspace/workspace.service";
-import {ComponentInstanceInterfaceModel, InterfaceOperationModel} from "../../../../models/interfaceOperation";
+import {ComponentInterfaceDefinitionModel, InterfaceOperationModel} from "../../../../models/interfaceOperation";
 import {InterfaceOperationHandlerComponent} from "./operation-creator/interface-operation-handler.component";
 
 import {ArtifactModel, ButtonModel, ComponentInstance, ComponentMetadata, InputBEModel, InterfaceModel, ModalModel} from 'app/models';
@@ -85,7 +85,7 @@ class ModalTranslation {
   }
 }
 
-export class UIInterfaceModel extends ComponentInstanceInterfaceModel {
+export class UIInterfaceModel extends ComponentInterfaceDefinitionModel {
   isCollapsed: boolean = false;
 
   constructor(interf?: any) {
@@ -163,7 +163,7 @@ export class InterfaceOperationsComponent {
     this.sortInterfaces();
   }
 
-  private initInterfaces(interfaces: ComponentInstanceInterfaceModel[]): void {
+  private initInterfaces(interfaces: ComponentInterfaceDefinitionModel[]): void {
     this.interfaces = _.map(interfaces, (interfaceModel) => new UIInterfaceModel(interfaceModel));
   }
 
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
index ce4738a780..7a73a5babc 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
@@ -28,7 +28,7 @@
                 <sdc-input
                     label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
                     [(value)]="interfaceType"
-                    [disabled]=isViewOnly>
+                    [disabled]=!isViewOnly>
                 </sdc-input>
             </div>
 
@@ -36,7 +36,7 @@
                 <sdc-input
                     label="{{ 'OPERATION_NAME' | translate }}"
                     [(value)]="operationToUpdate.name"
-                    [disabled]=isViewOnly>
+                    [disabled]=!isViewOnly>
                 </sdc-input>
             </div>
         </div>
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 f357ddfc54..059708592e 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
@@ -49,6 +49,7 @@ export class InterfaceOperationHandlerComponent {
         selectedInterfaceOperation: InterfaceOperationModel;
         validityChangedCallback: Function;
         isViewOnly: boolean;
+        interfaceTypesMap: Map<string, string[]>;
     };
 
     dataTypeMap$: Observable<Map<string, DataTypeModel>>;
@@ -63,6 +64,10 @@ export class InterfaceOperationHandlerComponent {
     isLoading: boolean = false;
     readonly: boolean;
     isViewOnly: boolean;
+    interfaceTypes: Array<DropdownValue> = [];
+    interfaceOperations: Array<DropdownValue> = [];
+
+    interfaceTypesMap: Map<string, string[]>;
 
     toscaArtifactTypeSelected: string;
     toscaArtifactTypeProperties: Array<PropertyBEModel> = [];
@@ -71,6 +76,7 @@ export class InterfaceOperationHandlerComponent {
     toscaArtifactTypes: Array<DropdownValue> = [];
 
     enableAddArtifactImplementation: boolean;
+
     propertyValueValid: boolean = true;
     inputTypeOptions: any[];
 
@@ -89,7 +95,7 @@ export class InterfaceOperationHandlerComponent {
 
     ngOnInit() {
         this.isViewOnly = this.input.isViewOnly;
-        this.interfaceType = this.input.selectedInterface.displayType();
+        this.interfaceType = this.input.selectedInterface.type;
         this.operationToUpdate = this.input.selectedInterfaceOperation;
         this.operationToUpdate.interfaceId = this.input.selectedInterface.uniqueId;
         this.operationToUpdate.interfaceType = this.input.selectedInterface.type;
@@ -105,7 +111,13 @@ export class InterfaceOperationHandlerComponent {
                 listToscaDataDefinition: Array<InputOperationParameter> = [];
             }
         }
+
         this.inputs = Array.from(this.operationToUpdate.inputs.listToscaDataDefinition);
+        this.interfaceTypesMap = this.input.interfaceTypesMap;
+        this.loadInterfaceTypesAndOperations();
+        this.removeImplementationQuote();
+        this.validityChanged();
+        this.loadInterfaceOperationImplementation();
     }
 
     private loadInterfaceOperationImplementation() {
@@ -117,13 +129,13 @@ export class InterfaceOperationHandlerComponent {
         this.getArtifactTypesSelected();
     }
 
-    onDescriptionChange= (value: any): void => {
+    onDescriptionChange = (value: any): void => {
         this.operationToUpdate.description = value;
     }
 
     onImplementationNameChange(value: any) {
         this.readonly = true
-        if (value) {
+        if (value || value === '') {
             let artifact = new ArtifactModel();
             artifact.artifactName = value;
             this.operationToUpdate.implementation = artifact;
@@ -141,6 +153,7 @@ export class InterfaceOperationHandlerComponent {
             this.toscaArtifactTypeSelected = undefined;
             this.artifactVersion = undefined;
             if (this.operationToUpdate.implementation.artifactType) {
+                this.operationToUpdate.implementation.artifactName = '';
                 this.artifactName = undefined;
             }
             this.toscaArtifactTypeProperties = undefined;
@@ -281,7 +294,6 @@ export class InterfaceOperationHandlerComponent {
         if (changedProperty.value instanceof Object) {
             changedProperty.value = JSON.stringify(changedProperty.value);
         }
-        this.toscaArtifactTypeProperties.find(artifactProperty => artifactProperty.name == changedProperty.name);
         const property = this.toscaArtifactTypeProperties.find(artifactProperty => artifactProperty.name == changedProperty.name);
         property.value = changedProperty.value;
     }
@@ -335,4 +347,12 @@ export class InterfaceOperationHandlerComponent {
         });
         return inputList;
     }
+
+    private loadInterfaceTypesAndOperations() {
+        console.log("loadInterfaceTypesAndOperations ", this.interfaceTypesMap.keys());
+
+        Array.from(this.interfaceTypesMap.keys()).forEach(value => this.interfaceTypes.push(new DropdownValue(value, value)));
+        console.log("loadInterfaceTypesAndOperations interfaceType ", this.interfaceTypes);
+    }
+
 }