aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/ui/modal
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui/modal')
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.html30
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.less61
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts65
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts30
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/modal.component.html1
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"