Add metadata to topology inputs1.8.0

Change-Id: If57e16003532d59552fa0b5cacc69a792e5b877a
Issue-ID: SDC-3399
Signed-off-by: MichaelMorris <michael.morris@est.tech>

3 files changed, 171 insertions, 13 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
index d3db53aa43..ee090245f0 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
@@ -32,6 +32,9 @@
         <div class="table-cell col4" (click)="sort('required')" *ngIf="componentType == 'SERVICE'">
             <span tooltip="Required in Runtime" tooltipDelay="400">Req. in RT</span>
         </div>
+        <div class="table-cell" [class.metadata-col-small]="!hasInputMetadata()" [class.metadata-col-wide]="hasInputMetadata()">
+            <div [class.metadata-col-wide-text]="hasInputMetadata()">Metadata</div>
+        </div>
         <div class="table-cell valueCol">Value</div>
     </div>
     <div class="table-body">
@@ -65,8 +68,51 @@
                         (checkedChange)="onRequiredChanged(input, $event)"
                         [disabled]="readonly"></sdc-checkbox>
                 </div>
+                <!-- Metadata -->
+                <div class="table-cell" [class.metadata-col-small]="!hasInputMetadata()" [class.metadataCol]="hasInputMetadata()">
+                    <div class="inner-cell-div metadata-add" tooltip="Add key value pair">
+                        <a class="property-icon add-item" (click)="createNewMetadataEntry(input);" [ngClass]="{'disabled':readonly}">Add metadata</a>
+                    </div>
+                    <ng-container >
+                        <div class="metadata-container">
+                        <ng-container *ngFor="let metadataEntry of input.metadataEntries;">
+                            <div  class="metadata-entry">
+                                    <ng-container>
+                                        <div class="metadata-key-value metadata-key" >
+                                            <dynamic-element #metadataViewChildren
+                                                class="value-input"
+                                                pattern="validationUtils.getValidationPattern(string)"
+                                                [value]="metadataEntry.key"
+                                                type="string"
+                                                name="{{input.name}}_{{metadataEntry.key}}"
+                                                (elementChanged)="onMetadataKeyChanged(input, $event, metadataEntry)"
+                                                [readonly]="readonly" 
+                                                [testId]="'prop-key-' + propertyTestsId"
+                                            ></dynamic-element>
+                                        </div>
+                                    </ng-container>
+                                    <ng-container>
+                                        <div class="metadata-key-value">
+                                            <dynamic-element
+                                                class="value-input"
+                                                pattern="validationUtils.getValidationPattern(string)"
+                                                [value]="metadataEntry.value"
+                                                type="string"
+                                                [name]="metadataEntry.key"
+                                                (elementChanged)="onMetadataValueChanged(input, $event, metadataEntry)"
+                                                [readonly]="readonly"
+                                                [testId]="'prop-key-' + propertyTestsId"
+                                        ></dynamic-element>
+                                        </div>
+                                        <span (click)="deleteMetadataEntry(input, metadataEntry);" class="delete-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span>
+                                    </ng-container>
+                            </div>
+                        </ng-container>
+                        </div>
+                    </ng-container>
+                </div>
                 <!-- Value -->
-                <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
+                <div class="table-cell valueCol" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
                     <dynamic-element class="value-input"
                                      *ngIf="checkInstanceFePropertiesMapIsFilled() && input.isSimpleType"
                                      pattern="validationUtils.getValidationPattern(input.type)"
@@ -82,7 +128,6 @@
                         <span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span>
                     </div>
                 </div>
-
             </div>
         </div>
     </div>
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
index 77c002c899..74520b6314 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
@@ -3,6 +3,37 @@
 
 :host /deep/ input { width:100%;}
 
+.metadata-container {
+    .metadata-entry {
+        border-top:solid 1px #d2d2d2;
+        flex: 1;
+        display:flex;
+        flex-direction:row;
+        align-items: stretch;
+		
+        .metadata-key-value {
+            flex: 1;
+            padding:8px;
+            justify-content: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .metadata-key {
+            flex: 0 0 50%;
+            border-right:#d2d2d2 solid 1px;
+        }
+
+        .delete-icon {
+            flex: 0 0 auto;
+            margin-right:10px;
+            align-self:center;
+            cursor:pointer;
+        }
+    }
+}
+
 .properties-table {
     display:flex;
     flex-direction:column;
@@ -46,7 +77,22 @@
         }
         .valueCol {
             justify-content: flex-start;
+            padding: 10px 8px 10px 8px;
+        }
+
+        .metadata-col-small {
             padding: 10px;
+	        flex: 0 0 115px;
+         }
+        .metadata-col-wide {
+            justify-content: flex-start;
+            padding: 0px;
+            flex: 1;
+
+           .metadata-col-wide-text {
+	            justify-content: flex-start;
+	            padding: 10px;
+			}
         }
     }
     .table-header, .table-row {
@@ -85,6 +131,37 @@
         .selected-row {
             background-color:#e6f6fb;
         }
+        .table-cell.valueCol {
+            padding:8px;
+        }
+        .table-cell.metadataCol {
+            padding:0px;
+            .value-input {
+                flex: 1;
+                border: none;
+                background-color: inherit;
+
+                &:focus, &:active {
+                    border:none;
+                    outline:none;
+                }
+            }
+			.metadata-add {
+		        padding: 10px;
+	        	height: 40px;
+        	}
+        }
+
+        .table-cell.metadata-col-small {
+	        flex: 0 0 115px;
+            padding: 0px 10px 0px 10px;
+            .metadata-add {
+                padding: 10px 0px 10px 0px;
+                height: 40px;
+                margin-right: 0px;
+            }
+        }
+
     }
 
      .table-cell {
@@ -123,13 +200,13 @@
 
         // Column: Type
         &.col2 {
-            flex: 0 0 140px;
+            flex: 0 1 140px;
             max-width: 140px;
         }
 
         // Column: From Instance
         &.col3 {
-            flex: 0 0 120px;
+            flex: 0 1 120px;
             max-width: 120px;
         }
 
@@ -169,12 +246,6 @@
                 }
             }
         }
-
-         &.input-value-col {
-             padding: 8px;
-         }
-
-
     }
 
     .filtered {
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
index 682a3e2463..3fa7ab4a80 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
@@ -22,12 +22,14 @@
 /**
  * Created by rc2122 on 5/4/2017.
  */
-import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { Component, Input, Output, EventEmitter, ViewChildren, QueryList } from "@angular/core";
 import { InputFEModel } from "app/models";
 import { ModalService } from "../../../services/modal.service";
 import { InstanceFeDetails } from "app/models/instance-fe-details";
 import { InstanceFePropertiesMap } from "../../../../models/properties-inputs/property-fe-map";
 import { DataTypeService } from "../../../services/data-type.service";
+import { MetadataEntry } from "app/models/metadataEntry";
+import { DynamicElementComponent } from "../../ui/dynamic-element/dynamic-element.component";
 
 @Component({
     selector: 'inputs-table',
@@ -41,10 +43,13 @@ export class InputsTableComponent {
     @Input() readonly: boolean;
     @Input() isLoading: boolean;
     @Input() componentType: string;
+    
     @Output() inputChanged: EventEmitter<any> = new EventEmitter<any>();
     @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
 
     @Input() fePropertiesMap: InstanceFePropertiesMap;
+
+    @ViewChildren('metadataViewChildren') public metadataViewChildren: QueryList<DynamicElementComponent>;
     
     sortBy: String;
     reverse: boolean;
@@ -93,6 +98,35 @@ export class InputsTableComponent {
         this.inputChanged.emit(input);
     }
 
+    onMetadataKeyChanged = (input: InputFEModel, event, metadataEntry: MetadataEntry) => {
+        let dynamicElementComponent = this.metadataViewChildren.filter(element => element.name == input.name + "_" + metadataEntry.key).pop();
+
+        input.updateMetadataKey(metadataEntry, event.value);
+        this.inputChanged.emit(input);
+
+        var mapKeyError = input.metadataMapKeyError;
+        if(input.metadataMapKeyError){
+            dynamicElementComponent.cmpRef.instance.control.setErrors({mapKeyError});
+        } 
+    };
+
+    onMetadataValueChanged = (input: InputFEModel, event, metadataEntry: MetadataEntry) => {
+        input.updateMetadataValue(metadataEntry, event.value);
+        this.inputChanged.emit(input);
+    };
+    
+    
+    createNewMetadataEntry = (input: InputFEModel): void => {
+        let metadataEntry = new MetadataEntry("", "");
+        input.addMetadataEntry(metadataEntry);
+        this.inputChanged.emit(input);
+    }
+
+    deleteMetadataEntry = (input: InputFEModel, metadataEntry: MetadataEntry) => {
+        input.deleteMetadataEntry(metadataEntry);
+        this.inputChanged.emit(input);
+    }
+    
     onDeleteInput = () => {
         this.deleteInput.emit(this.selectedInputToDelete);
         this.modalService.closeCurrentModal();
@@ -100,8 +134,6 @@ export class InputsTableComponent {
 
     openDeleteModal = (input: InputFEModel) => {
         console.log('exist inputs: ' + this.inputs)
-        
-        
         this.selectedInputToDelete = input;
         this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open();
     }
@@ -133,6 +165,16 @@ export class InputsTableComponent {
     checkInstanceFePropertiesMapIsFilled(){
         return _.keys(this.fePropertiesMap).length > 0
     }
+
+    hasInputMetadata(){
+        for(let input of this.inputs){
+            if (input.metadataEntries.length > 0){
+                return true;
+            }
+        }
+        return false;
+    }
+
 }