Create inputs independent of properties

Issue-ID: SDC-3431
Signed-off-by: KrupaNagabhushan <krupa.nagabhushan@est.tech>
Change-Id: I4f29d0e490a14292fd1aa9f96ca6621b37f325d8

3 files changed, 48 insertions, 3 deletions

diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
index 6856ae8358..6b3e92adfd 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
@@ -44,6 +44,7 @@
                         <inputs-table class="properties-table"
                             [fePropertiesMap]="instanceFePropertiesMap"
                             [readonly]="isReadonly"
+                            [showDelete]="!isReadOnly && isSelf()"
                             [inputs]="inputs | searchFilter:'name':searchQuery"
                             [instanceNamesMap]="componentInstanceNamesMap"
                             [isLoading]="loadingInputs"
@@ -80,8 +81,10 @@
             </div>
         </div>
         <div class="right-column">
-            <div *ngIf="!isReadonly" class="add-btn"
+            <div *ngIf="!isReadonly && !isInputsTabSelected" class="add-btn"
                  (click)="addProperty()" [ngClass]="{'disabled': !isSelf()}">Add Property</div>
+            <div *ngIf="!isReadonly && isInputsTabSelected" class="add-btn"
+                 (click)="addInput()" [ngClass]="{'disabled': !isSelf()}">Add Input</div>
             <tabs #hierarchyNavTabs tabStyle="simple-tabs" class="gray-border">
                 <tab tabTitle="Composition">
                     <div class="hierarchy-nav-container">
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
index e4a8749386..74e2680b80 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
@@ -1052,6 +1052,41 @@ export class PropertiesAssignmentComponent {
         modal.instance.open();
     }
 
+    /*** addInput ***/
+    addInput = () => {
+        let modalTitle = 'Add Input';
+        let modal = this.ModalService.createCustomModal(new ModalModel(
+            'sm',
+            modalTitle,
+            null,
+            [
+                new ButtonModel('Save', 'blue', () => {
+                    modal.instance.dynamicContent.instance.isLoading = true;
+                    const newInput: InputBEModel = modal.instance.dynamicContent.instance.propertyModel;
+                    this.topologyTemplateService.createServiceInput(this.component.uniqueId, newInput)
+                        .subscribe((response) => {
+                            modal.instance.dynamicContent.instance.isLoading = false;
+                            const newInputProp: InputFEModel = this.inputsUtils.convertInputBEToInputFE(response);
+                            this.inputs.push(newInputProp);
+                            modal.instance.close();
+                        }, (error) => {
+                            modal.instance.dynamicContent.instance.isLoading = false;
+                            this.Notification.error({
+                                message: 'Failed to add input:' + error,
+                                title: 'Failure'
+                            });
+                        });
+                }, () => !modal.instance.dynamicContent.instance.checkFormValidForSubmit()),
+                new ButtonModel('Cancel', 'outline grey', () => {
+                    modal.instance.close();
+                }),
+            ],
+            null
+        ));
+        this.ModalService.addDynamicContentToModal(modal, PropertyCreatorComponent, {});
+        modal.instance.open();
+    }
+
     /*** SEARCH RELATED FUNCTIONS ***/
     searchPropertiesInstances = (filterData:FilterPropertiesAssignmentData) => {
         let instanceBePropertiesMap:InstanceBePropertiesMap;
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/services/inputs.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/services/inputs.utils.ts
index 408a00e7b4..948c9032bf 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/services/inputs.utils.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/services/inputs.utils.ts
@@ -19,12 +19,13 @@
  */
 
 import { Injectable } from '@angular/core';
-import { InputFEModel} from "app/models";
+import { InputBEModel, InputFEModel } from "app/models";
+import { DataTypeService } from "app/ng2/services/data-type.service";
 
 @Injectable()
 export class InputsUtils {
 
-    constructor() {}
+    constructor(private dataTypeService:DataTypeService) {}
 
     public initDefaultValueObject = (input: InputFEModel): void => {
         input.resetDefaultValueObjValidation();
@@ -37,4 +38,10 @@ export class InputsUtils {
         this.initDefaultValueObject(input);
     }
 
+    public convertInputBEToInputFE = (input: InputBEModel): InputFEModel => {
+        const newFEInput: InputFEModel = new InputFEModel(input); //Convert input to FE
+        this.initDefaultValueObject(newFEInput);
+        return newFEInput;
+    }
+
 }