[SDC-29] rebase continue work to align source

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

5 files changed, 264 insertions, 28 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
new file mode 100644
index 0000000000..7fdd95b304
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html
@@ -0,0 +1,3 @@
+<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
new file mode 100644
index 0000000000..24c37b5636
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts
@@ -0,0 +1,38 @@
+/**
+ * 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 e7801b82cf..fb6b04013f 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
@@ -1,4 +1,5 @@
 <div class="properties-table">
+    <loader [display]="isLoading" size="large" [relative]="true"></loader>
     <div class="table-header">
         <div class="table-cell col1">Property Name</div>
         <div class="table-cell col2">Type</div>
@@ -7,31 +8,39 @@
     </div>
     <div class="table-body">
         <div class="no-data" *ngIf="!inputs || !inputs.length">No data to display</div>
-        <div class="table-row" *ngFor="let input of inputs">
-            <div class="table-cell col1">
-                <span tooltip="{{input.name}}" >{{input.name}}</span>
-                <span *ngIf="input.description"
-                      class="property-description-icon sprite-new show-desc"
-                      tooltip="{{input.description}}"></span>
-            </div>
-            <div class="table-cell col2">{{input.type | contentAfterLastDot}}</div>
-            <div class="table-cell col3">{{input.schema && input.schema.property && input.schema.property.type ? (input.schema.property.type | contentAfterLastDot) : ''}}</div>
-            <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
-                <dynamic-element class="value-input"
-                                 *ngIf="input.isSimpleType"
-                                 pattern="validationUtils.getValidationPattern(input.type)"
-                                 [(value)]="input.defaultValue"
-                                 [type]="input.type"
-                                 [name]="input.name"
-                                 (change)="onInputValueChanged(input);">
-                </dynamic-element>
-                <div class="delete-button-container">
-                    <span class="sprite-new delete-btn" (click)="onDeleteInput(input)"></span>
+        <div>
+            <div class="table-row" *ngFor="let input of inputs" (click)="selectedInputId = input.path" [ngClass]="{'selected': selectedInputId && selectedInputId === input.path}">
+                <div class="table-cell col1">
+                    <div class="inner-cell-div" tooltip="{{input.name}}"><span class="property-name">{{input.name}}</span></div>
+                    <span *ngIf="input.description"
+                          class="property-description-icon sprite-new show-desc"
+                          tooltip="{{input.description}}"></span>
+                </div>
+                <div class="table-cell col2">
+                    <div class="inner-cell-div" tooltip="{{input.type | contentAfterLastDot}}">
+                        <span>{{input.type | contentAfterLastDot}}</span>
+                    </div>
+                </div>
+                <div class="table-cell col3">{{input.schema && input.schema.property && input.schema.property.type ? (input.schema.property.type | contentAfterLastDot) : ''}}</div>
+                <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
+                    <dynamic-element class="value-input"
+                                     *ngIf="input.isSimpleType"
+                                     pattern="validationUtils.getValidationPattern(input.type)"
+                                     [(value)]="input.defaultValue"
+                                     [type]="input.type"
+                                     [name]="input.name"
+                                 (change)="onInputValueChanged(input);"
+                                 [readonly]="readonly">
+                    </dynamic-element>
+                    <div class="delete-button-container">
+                        <span *ngIf="!input.ownerId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)"></span>
+                    </div>
                 </div>
-            </div>
 
+            </div>
         </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.less b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less
new file mode 100644
index 0000000000..93f96470bc
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less
@@ -0,0 +1,178 @@
+
+@import './../../../../assets/styles/variables.less';
+
+:host /deep/ input { width:100%;}
+
+.properties-table {
+    display:flex;
+    flex-direction:column;
+    flex: 1;
+    height:100%;
+    text-align:left;
+
+    dynamic-property {
+        width:100%;
+    }
+
+    /deep/ .dynamic-property-row {
+         border-top:solid #d2d2d2 1px;
+    }
+
+    /deep/ dynamic-property dynamic-property:first-of-type .dynamic-property-row:not(.with-top-border) {
+        border-top: none;
+    }
+
+    .table-header {
+        font-weight:bold;
+        border-top: #d2d2d2 solid 1px;
+        background-color: #eaeaea;
+
+        .valueCol {
+            justify-content: flex-start;
+            padding: 5px;
+        }
+    }
+    .table-header, .table-row {
+        display: flex;
+        flex-direction:row;
+        flex: 0 0 auto;
+    }
+
+    .table-body {
+        display:flex;
+        flex-direction: column;
+        overflow-y:auto;
+        flex: 1;
+
+        .no-data {
+            border: #d2d2d2 solid 1px;
+            border-top:none;
+            text-align: center;
+            height: 100%;
+            padding: 20px;
+        }
+        /deep/.selected{
+            background-color: #e6f6fb;
+            color:  #009fdb;
+        }
+    }
+
+    .table-rows-header {
+        font-size:16px;
+        flex:1;
+        border: #d2d2d2 solid 1px;
+        border-top:none;
+        padding: 5px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        background-color: @tlv_color_v;
+    }
+
+    .table-row {
+        &:hover {
+             background-color:#f8f8f8; cursor:pointer;
+        }
+
+        &:last-child {
+            flex: 1 0 auto;
+        }
+        .selected-row {
+            background-color:#e6f6fb;
+        }
+    }
+    .cut-inner-long-text{
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+     .table-cell {
+        font-size:13px;
+        flex:1;
+        border: #d2d2d2 solid 1px;
+        border-right:none;
+        border-top:none;
+        padding: 5px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+
+        &:last-child {
+            border-right:#d2d2d2 solid 1px;
+        }
+        &.col1 {
+            flex: 0 0 300px;
+            max-width:300px;
+            display: flex;
+            justify-content: space-between;
+
+            .property-name {
+                flex: 1;
+            }
+
+            .property-description-icon {
+                float: right;
+                margin-top: 4px;
+                margin-left: 5px;
+                flex: 0 0 auto;
+            }
+        }
+        &.col2 {
+            flex: 0 0 150px;
+            max-width:150px;
+        }
+
+        &.col3 {
+            flex:0 0 120px;
+            max-width:120px;
+        }
+
+        &.valueCol {
+            flex: 1 0 auto;
+            min-width: 350px;
+            display: flex;
+            justify-content: flex-end;
+            padding: 0px;
+
+            .value-input {
+                flex: 1;
+                max-height: 24px;
+                border: none;
+                background-color: inherit;
+
+                &:focus, &:active {
+                    border:none;
+                    outline:none;
+                }
+            }
+
+            .delete-btn {
+                flex: 0 0 auto;
+            }
+
+            .delete-button-container {
+                max-height: 24px;
+            }
+
+            &.inner-table-container {
+                padding: 0px;
+
+                .delete-button-container {
+                    padding: 3px 5px 0 0 ;
+                }
+            }
+        }
+
+         &.input-value-col {
+             padding: 5px;
+         }
+
+
+    }
+
+    .filtered {
+        /deep/ .checkbox-label-content{
+            background-color: yellow;
+        }
+    }
+
+}
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 ea01edf043..83c0bda991 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
@@ -1,20 +1,25 @@
 /**
  * Created by rc2122 on 5/4/2017.
  */
-import {Component, Input, Output, EventEmitter} from "@angular/core";
+import {Component, Input, Output, EventEmitter, ViewChild} from "@angular/core";
 import {InputFEModel} from "app/models";
+import {ConfirmationDeleteInputComponent} from "./confirmation-delete-input/confirmation-delete-input.component";
 
 @Component({
     selector: 'inputs-table',
     templateUrl: './inputs-table.component.html',
-    styleUrls: ['../properties-table/properties-table.component.less']
+    styleUrls: ['../inputs-table/inputs-table.component.less']
 })
 export class InputsTableComponent {
 
     @Input() inputs: Array<InputFEModel>;
-
+    @Input() readonly:boolean;
+    @Input() isLoading:boolean;
     @Output() inputValueChanged: EventEmitter<any> = new EventEmitter<any>();
     @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
+    @ViewChild ('deleteInputConfirmation') deleteInputConfirmation:ConfirmationDeleteInputComponent;
+
+    selectedInputToDelete:InputFEModel;
 
     constructor (){
     }
@@ -23,11 +28,14 @@ export class InputsTableComponent {
         this.inputValueChanged.emit(input);
     };
 
-    onDeleteInput = (input) => {
-        this.deleteInput.emit(input);
-    }
-
+    onDeleteInput = () => {
+        this.deleteInput.emit(this.selectedInputToDelete);
+    };
 
+    openDeleteModal = (input:InputFEModel) => {
+        this.selectedInputToDelete = input;
+        this.deleteInputConfirmation.openModal();
+    }
 }