[SDC] rebase 1710 code

Change-Id: I532ed68979fee7840ea8a5395e7e965b155fb9f9
Signed-off-by: Michael Lando <ml636r@att.com>

10 files changed, 82 insertions, 97 deletions

diff --git a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html
deleted file mode 100644
index 7fdd95b304..0000000000
--- a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<modal #confirmationModal title="Delete Input" size="sm" [buttons]="footerButtons">
-    Are you sure you want to delete this input?
-</modal>
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts
deleted file mode 100644
index f73692f525..0000000000
--- a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- * Created by rc2122 on 6/1/2017.
- */
-import {Component, Output, EventEmitter, ViewChild} from "@angular/core";
-import {ButtonsModelMap, ButtonModel} from "app/models/button";
-import {ModalComponent} from "app/ng2/components/modal/modal.component";
-
-@Component({
-    selector: 'confirm-delete-input',
-    templateUrl: './confirmation-delete-input.component.html'
-})
-export class ConfirmationDeleteInputComponent {
-
-    @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
-    @ViewChild ('confirmationModal') confirmationModal:ModalComponent;
-    footerButtons:ButtonsModelMap = {};
-
-    constructor (){
-    }
-
-    ngOnInit() {
-        this.footerButtons['Delete'] = new ButtonModel('Delete', 'blue', this.onDeleteInput);
-        this.footerButtons['Close'] = new ButtonModel('Close', 'grey', this.closeModal);
-    }
-
-    onDeleteInput = (input) => {
-        this.deleteInput.emit(input);
-        this.closeModal();
-    };
-
-    openModal = () => {
-        this.confirmationModal.open();
-    }
-
-    closeModal = () => {
-        this.confirmationModal.close();
-    }
-}
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
index 331415c26f..38de3ce649 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
@@ -45,6 +45,5 @@
         </div>
     </div>
 </div>
-<confirm-delete-input #deleteInputConfirmation (deleteInput)="onDeleteInput()"></confirm-delete-input>
 
 
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
index 526f5de360..30cdb89d8e 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
@@ -23,7 +23,9 @@
  */
 import {Component, Input, Output, EventEmitter, ViewChild} from "@angular/core";
 import {InputFEModel} from "app/models";
-import {ConfirmationDeleteInputComponent} from "./confirmation-delete-input/confirmation-delete-input.component";
+import { ModalService } from 'app/ng2/services/modal.service';
+
+
 
 @Component({
     selector: 'inputs-table',
@@ -38,11 +40,10 @@ export class InputsTableComponent {
     @Input() isLoading:boolean;
     @Output() inputValueChanged: EventEmitter<any> = new EventEmitter<any>();
     @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
-    @ViewChild ('deleteInputConfirmation') deleteInputConfirmation:ConfirmationDeleteInputComponent;
 
     selectedInputToDelete:InputFEModel;
 
-    constructor (){
+    constructor(private modalService: ModalService){
     }
 
     onInputValueChanged = (input) => {
@@ -51,11 +52,12 @@ export class InputsTableComponent {
 
     onDeleteInput = () => {
         this.deleteInput.emit(this.selectedInputToDelete);
+        this.modalService.closeCurrentModal();
     };
 
     openDeleteModal = (input:InputFEModel) => {
         this.selectedInputToDelete = input;
-        this.deleteInputConfirmation.openModal();
+        this.modalService.openActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close");
     }
 }
 
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.html b/catalog-ui/src/app/ng2/components/modal/modal.component.html
index 4882449596..cc411bc751 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.html
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.html
@@ -1,17 +1,15 @@
-<div class="custom-modal {{size}}">
+<div class="custom-modal {{input.size}}">
     <div class="ng2-modal-content">
         <div class="ng2-modal-header">
-            <span class="title">{{ title }}</span>
+            <span class="title">{{ input.title }}</span>
             <span class="close-button" (click)="close()"></span>
         </div>
-        <div class="ng2-modal-body">
-            <ng-content></ng-content>
-        </div>
+        <div class="ng2-modal-body" >{{input.content}}</div>
         <div class="ng2-modal-footer">
-            <button *ngFor="let buttonName of buttonsNames"
-                    class="tlv-btn {{buttons[buttonName].cssClass}}"
-                    [disabled] = "buttons[buttonName].getDisabled && buttons[buttonName].getDisabled()"
-                    (click) = "buttons[buttonName].callback()">{{buttons[buttonName].text}}</button>
+            <button *ngFor="let button of input.buttons"
+                    class="tlv-btn {{button.cssClass}}"
+                    [disabled] = "button.getDisabled && button.getDisabled()"
+                    (click) = "button.callback()">{{button.text}}</button>
         </div>
     </div>
 </div>
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
index e432a6fde0..09fb9abdd1 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.ts
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
@@ -22,8 +22,9 @@
  * Created by rc2122 on 6/1/2017.
  */
 import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
+//import {ViewContainerRef, ViewChild} from '@angular/core';
 import * as $ from 'jquery';
-import {ButtonsModelMap} from "app/models/button";
+import { ButtonsModelMap, ModalModel } from 'app/models';
 
 @Component({
     selector: 'modal',
@@ -32,22 +33,17 @@ import {ButtonsModelMap} from "app/models/button";
 })
 
 export class ModalComponent implements OnInit, OnDestroy {
-    @Input() size: string; 'xl|l|md|sm|xsm'
-    @Input() title: string;
-    @Input() public buttons:ButtonsModelMap;
+    @Input() input: ModalModel;
     private modalElement: JQuery;
-    private buttonsNames:Array<string>;
+    //@ViewChild('modalBody', { read: ViewContainerRef }) modalContainer: ViewContainerRef; //TODO: allow for custom component as body instead of simple message
+    
 
     constructor( el: ElementRef ) {
         this.modalElement = $(el.nativeElement);
     }
 
     ngOnInit(): void {
-        let modal = this;
         this.modalElement.appendTo('body');
-        if(this.buttons){
-            this.buttonsNames = Object.keys(this.buttons);
-        }
     }
 
     ngOnDestroy(): void {
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/modal/modal.module.ts
new file mode 100644
index 0000000000..d77be2cd23
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/modal.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { ModalService } from 'app/ng2/services/modal.service';
+import { ModalComponent } from "app/ng2/components/modal/modal.component"
+
+@NgModule({
+    declarations: [
+        ModalComponent,
+    ],
+    imports: [CommonModule],
+    exports: [],
+    entryComponents: [
+        ModalComponent
+    ],
+    providers: [ModalService]
+})
+export class ModalModule {
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
index 92948b3b0d..95cc79dce9 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
@@ -5,12 +5,12 @@
     <!-- LEFT CELL -->
     <ng-container *ngIf="!isPropertyFEModel">
         <div class="table-cell" *ngIf="canBeDeclared" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared"> <!-- simple children of complex type [@checkEffect]="property.isDeclared"-->
-            <checkbox [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)" ></checkbox> 
+            <checkbox [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)" ></checkbox>
             <div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div>
         </div>
         <div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list -->
         <div class="table-cell map-entry" *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP"><!-- map left cell -->
-            <input [value]="property.mapKey" #mapKey (change)="mapKeyChanged.emit(mapKey.value)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly}" />
+            <input [value]="property.mapKey" #mapKey (change)="mapKeyChanged.emit(mapKey)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly, 'error':!mapKey.validity.valid}" />
         </div>
     </ng-container>
     <!-- RIGHT CELL OR FULL WIDTH CELL-->
@@ -36,7 +36,7 @@
     </ng-container>
     <!-- ICONS: add, delete, and expand -->
     <ng-container *ngIf="!property.isDeclared">
-            <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly}">Add value to list</a>
+            <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly || preventInsertItem(property)}">Add value to list</a>
             <span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span>
             <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren()))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0"></span>
     </ng-container>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
index 4da98ec736..48d3d035d0 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
@@ -1,3 +1,4 @@
+@import '../../../../../assets/styles/variables.less';
 .flat-children-container {
     .dynamic-property-row {
         /*create nested left border classes for up to 10 levels of nesting*/
@@ -64,4 +65,10 @@
     overflow: hidden;
     display: inline;
     padding-left: 8px;
-}
\ No newline at end of file
+}
+.error {
+    border: solid 1px @func_color_q;
+    color: @func_color_q;
+    outline: none;
+    box-sizing: border-box;
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
index e078b74d65..59811b582d 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
@@ -88,7 +88,7 @@ export class DynamicPropertyComponent {
     }
 
     createNewChildProperty = (): void => {
-        
+
         let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined);
         if (this.property instanceof PropertyFEModel) {
             this.addChildProps(newProps, this.property.name);
@@ -98,11 +98,22 @@ export class DynamicPropertyComponent {
     }
 
     addChildProps = (newProps: Array<DerivedFEProperty>, childPropName: string) => {
-        
+
         if (this.property instanceof PropertyFEModel) {
-            let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children 
-            this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator 
+            let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children
+            this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator
             this.expandChildById(newProps[0].propertiesName);
+
+
+            if(!newProps[0].schema.property.isSimpleType){
+                angular.forEach(newProps, (prop:DerivedFEProperty):void => { //Update parent PropertyFEModel with value for each child, including nested props
+                    (<PropertyFEModel>this.property).childPropUpdated(prop);
+                },this);
+                //grab the cumulative value for the new item from parent PropertyFEModel and assign that value to DerivedFEProp[0] (which is the list or map parent with UUID of the set we just added)
+                let parentNames = (<PropertyFEModel>this.property).getParentNamesArray(newProps[0].propertiesName, []);
+                newProps[0].valueObj = _.get(this.property.valueObj, parentNames.join('.'));
+                this.valueChanged.emit(this.property.name);
+            }
         }
     }
 
@@ -113,7 +124,7 @@ export class DynamicPropertyComponent {
             this.dataTypeService.checkForCustomBehavior(this.property);
             this.valueChanged.emit(this.property.name);
         }
-    }    
+    }
 
     deleteListOrMapItem = (item: DerivedFEProperty) => {
         if (this.property instanceof PropertyFEModel) {
@@ -123,15 +134,22 @@ export class DynamicPropertyComponent {
         }
     }
 
-    removeValueFromParent = (item: DerivedFEProperty, replaceKey?: string) => {
+    removeValueFromParent = (item: DerivedFEProperty, target?: any) => {
         if (this.property instanceof PropertyFEModel) {
             let itemParent = (item.parentName == this.property.name) ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName);
 
             if (item.derivedDataType == DerivedPropertyType.MAP) {
                 let oldKey = item.mapKey;
-                if (typeof replaceKey == 'string') { //allow saving empty string
-                    _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]);
-                    item.mapKey = replaceKey;
+                if (target && typeof target.value == 'string') { //allow saving empty string
+                    let replaceKey:string = target.value;
+                    if(Object.keys(itemParent.valueObj).indexOf(replaceKey) > -1){//the key is exists
+                        target.setCustomValidity('This key is already exists.');
+                        return;
+                    }else {
+                        target.setCustomValidity('');
+                        _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]);
+                        item.mapKey = replaceKey;
+                    }
                 }
                 delete itemParent.valueObj[oldKey];
             } else {
@@ -147,4 +165,11 @@ export class DynamicPropertyComponent {
         }
     }
 
+    preventInsertItem = (property:DerivedFEProperty):boolean => {
+        if(property.type == PROPERTY_TYPES.MAP && Object.keys(property.valueObj).indexOf('') > -1 ){
+            return true;
+        }
+        return false;
+    }
+
 }