Add property mapping feature to ONAP

Add service property assignment

Change-Id: I29748ce12bacab06b8bc27f8875b39d80ffe5af7
Issue-ID: SDC-1988
Signed-off-by: Talio <tali.orenbach@amdocs.com>

3 files changed, 24 insertions, 1 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
index 65072f8185..2068b170b3 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
@@ -58,6 +58,9 @@
                     </div>
                     <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}"
                         tooltipDelay="0"></span>
+                    <div class="delete-button-container">
+                        <span *ngIf="showDelete" class="sprite-new delete-btn" [ngClass]="{'disabled' : property.isDisabled || property.isDeclared}" (click)="openDeleteModal(property)" data-tests-id="delete-input-button"></span>
+                    </div>
                 </div>
                 <div class="table-cell col2" *ngIf="!hidePropertyType">
                     <div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}">
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
index 0f6dd512e2..86832e57f0 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less
@@ -189,6 +189,11 @@
         }
     }
 
+    .delete-button-container {
+        max-height: 24px;
+        cursor: pointer;
+    }
+
     .filtered {
         /deep/ .checkbox-label-content{
             background-color: yellow;
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
index b11bc02fb9..167509b1e6 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
@@ -22,6 +22,7 @@
 import { Component, Input, Output, EventEmitter} from "@angular/core";
 import {PropertyFEModel, DerivedFEProperty, InstanceFePropertiesMap} from "app/models";
 import {PropertiesService} from "../../../services/properties.service";
+import {ModalService} from "../../../services/modal.service";
 import { InstanceFeDetails } from "../../../../models/instance-fe-details";
 
 @Component({
@@ -40,10 +41,13 @@ export class PropertiesTableComponent {
     @Input() isLoading:boolean;
     @Input() hasDeclareOption:boolean;
     @Input() hidePropertyType:boolean;
+    @Input() showDelete:boolean;
     
     @Output('propertyChanged') emitter: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>();
     @Output() selectPropertyRow: EventEmitter<PropertyRowSelectedEvent> = new EventEmitter<PropertyRowSelectedEvent>();
     @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();//only for hasDeclareOption
+    @Output() deleteProperty: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>();
+    private selectedPropertyToDelete: PropertyFEModel;
 
     sortBy: String;
     reverse: boolean;
@@ -57,7 +61,7 @@ export class PropertiesTableComponent {
         this.path = sortBy.split('.');
     }
 
-    constructor (private propertiesService:PropertiesService ){
+    constructor (private propertiesService:PropertiesService, private modalService: ModalService){
     }
     
     ngOnInit() {
@@ -92,6 +96,17 @@ export class PropertiesTableComponent {
         this.updateCheckedPropertyCount.emit(isChecked);
     }
 
+    onDeleteProperty = () => {
+        this.deleteProperty.emit(this.selectedPropertyToDelete);
+        this.modalService.closeCurrentModal();
+    };
+
+    openDeleteModal = (property:PropertyFEModel) => {
+        this.selectedPropertyToDelete = property;
+        this.modalService.createActionModal("Delete Property", "Are you sure you want to delete this property?",
+            "Delete", this.onDeleteProperty, "Close").instance.open();
+    }
+
 }
 
 export class PropertyRowSelectedEvent {