re base code

Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5
Issue-ID: SDC-1566
Signed-off-by: Michael Lando <ml636r@att.com>

5 files changed, 186 insertions, 1 deletions

diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.html b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.html
new file mode 100644
index 0000000000..ba897198d6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.html
@@ -0,0 +1,30 @@
+<div class="component-add-element">
+    <div class="add-element-selection-container">
+        <sdc-dropdown class="add-element-selection" selectedOption="selectedElement" placeHolder="Please choose option"
+                      (changed)="onElementSelected($event)" [options]="dropdownOptions"></sdc-dropdown>
+        <svg-icon-label class="add-element-button" [class.disabled]="!selectedElement"
+                        name="plus-circle-o"
+                        mode="primary"
+                        size="medium"
+                        label="ADD"
+                        labelPlacement="right"
+                        clickable="{{!!selectedElement}}"
+                        (click)="addElement()">
+        </svg-icon-label>
+    </div>
+
+    <div class="elements-list">
+        <ul>
+            <li *ngFor="let element of existingElements" class="elements-list-item">
+                <span>{{element.name}}</span>
+                <svg-icon-label name="trash-o" clickable="true" size="small" class="elements-list-item-delete"
+                                data-tests-id="delete_target" (click)="removeElement(element)"></svg-icon-label>
+            </li>
+        </ul>
+        <div *ngIf="existingElements.length===0" class="add-element-no-data">
+            <div class="add-element-no-data-title">No {{elementName}} have been added yet.</div>
+            <div class="add-element-no-data-content">Begin typing or select {{elementName}} above</div>
+        </div>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.less b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.less
new file mode 100644
index 0000000000..522483dfb7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.less
@@ -0,0 +1,61 @@
+@import "./../../../../../../assets/styles/variables-old";
+
+.component-add-element {
+
+  .add-element-selection-container {
+
+    display: flex;
+    flex-direction: row;
+    .add-element-selection {
+      flex: 2;
+    }
+
+    .add-element-button {
+      padding: 0px 0px 0px 15px;
+      &:not(.disabled) {
+        cursor:pointer;
+      }
+    }
+
+  }
+
+  .elements-list {
+    border: 1px solid #d2d2d2;
+    margin-top: 10px;
+    height: 300px;
+    overflow: auto;
+
+    .elements-list-item {
+      padding: 10px 20px 10px 20px;
+
+      &:first-child {
+        padding-top: 15px;
+      }
+
+      &:hover {
+        background-color: #f8f8f8;
+        .elements-list-item-delete {
+          visibility: visible;
+        }
+      }
+    }
+  }
+
+  .elements-list-item-delete {
+    float:right;
+    cursor: pointer;
+    visibility: hidden;
+  }
+
+
+  .add-element-no-data {
+    margin: 0 auto;
+    padding-top: 30px;
+    text-align: center;
+
+    .add-element-no-data-title {
+      font-family: @font-opensans-bold;
+    }
+
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts
new file mode 100644
index 0000000000..1d05b27d68
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts
@@ -0,0 +1,65 @@
+/**
+ * Created by ob0695 on 11.04.2018.
+ */
+import {Component, Input} from "@angular/core";
+import {UiBaseObject} from "../../../../../models/ui-models/ui-base-object";
+import {IDropDownOption} from "sdc-ui/lib/angular/form-elements/dropdown/dropdown-models";
+
+@Component({
+    selector: 'add-elements',
+    templateUrl: './add-elements.component.html',
+    styleUrls: ['./add-elements.component.less']
+})
+
+export class AddElementsComponent {
+
+    @Input() elementsToAdd:Array<UiBaseObject>;
+    @Input() elementName: string;
+
+    private existingElements:Array<UiBaseObject>;
+    private dropdownOptions:Array<IDropDownOption>;
+    private selectedElement:IDropDownOption;
+
+    ngOnInit() {
+        this.existingElements = [];
+        this.convertElementToDropdownDisplay();
+
+    }
+
+    private convertElementToDropdownDisplay = () => {
+        this.dropdownOptions = [];
+        _.forEach(this.elementsToAdd, (elementToAdd:UiBaseObject) =>{
+           this.dropdownOptions.push({label:elementToAdd.name, value: elementToAdd.uniqueId })
+        });
+    }
+
+    onElementSelected(selectedElement:IDropDownOption):void {
+        this.selectedElement = selectedElement
+    }
+
+    addElement():void {
+
+        if(this.selectedElement){
+            this.dropdownOptions = _.reject(this.dropdownOptions, (option: IDropDownOption) => { // remove from dropDown
+                return option.value === this.selectedElement.value;
+            });
+
+            let selected = _.find(this.elementsToAdd, (element:UiBaseObject) => {
+                return this.selectedElement.value === element.uniqueId;
+            });
+
+            this.elementsToAdd =_.without(this.elementsToAdd, selected); // remove from optional elements to add
+            this.existingElements.push(selected); // add to existing element list
+            this.selectedElement = undefined;
+        } else {
+            console.log("no element selected"); //TODO:show error?
+        }
+    }
+
+    removeElement(element:UiBaseObject):void {
+
+        this.existingElements =_.without(this.existingElements, element); // remove from optional elements to add
+        this.dropdownOptions.push({label:element.name, value: element.uniqueId });
+        this.elementsToAdd.push(element);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts
new file mode 100644
index 0000000000..a1c34f5686
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts
@@ -0,0 +1,30 @@
+/**
+ * Created by ob0695 on 11.04.2018.
+ */
+import {NgModule} from "@angular/core";
+import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+import {AddElementsComponent} from "./add-elements.component";
+import {CommonModule} from "@angular/common";
+
+/**
+ * Created by ob0695 on 9.04.2018.
+ */
+@NgModule({
+    declarations: [
+        AddElementsComponent
+    ],
+
+    imports: [
+        CommonModule,
+        SdcUiComponentsModule
+    ],
+
+    entryComponents: [
+        AddElementsComponent
+    ],
+    exports: [],
+    providers: []
+})
+export class AddElementsModule {
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html
index 6fc55d19e7..1708fc4c23 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html
@@ -1,6 +1,5 @@
 <div class="custom-modal {{input.size}}">
     <div class="ng2-modal-content"
-        ngDraggable
         [ngDraggable]="input.isMovable"
         [handle]="ModalHandle"
         [bounds]="ModalBounds"