aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/dynamic-element
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
committerMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
commited64b5edff15e702493df21aa3230b81593e6133 (patch)
treea4cb01fdaccc34930a8db403a3097c0d1e40914b /catalog-ui/src/app/ng2/components/dynamic-element
parent280f8015d06af1f41a3ef12e8300801c7a5e0d54 (diff)
[SDC-29] catalog 1707 rebase commit.
Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1 Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/components/dynamic-element')
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less3
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts117
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts34
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html1
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less2
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts27
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html3
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less11
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts33
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html13
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less17
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts22
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html26
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less36
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts39
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts34
16 files changed, 418 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less
new file mode 100644
index 0000000000..e219d49aa4
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less
@@ -0,0 +1,3 @@
+dynamic-element {
+
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts
new file mode 100644
index 0000000000..de5965e488
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts
@@ -0,0 +1,117 @@
+import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactory, ComponentFactoryResolver } from '@angular/core'
+import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component';
+import { UiElementDropDownComponent, DropdownValue } from './elements-ui/dropdown/ui-element-dropdown.component';
+import { UiElementInputComponent } from './elements-ui/input/ui-element-input.component';
+import {UiElementPopoverInputComponent} from "./elements-ui/popover-input/ui-element-popover-input.component";
+import {ValidationConfiguration} from "app/models";
+
+@Component({
+ selector: 'dynamic-element',
+ template: `<div #target></div>`,
+ styleUrls: ['./dynamic-element.component.less'],
+ entryComponents: [
+ UiElementInputComponent,
+ UiElementDropDownComponent,
+ UiElementCheckBoxComponent,
+ UiElementPopoverInputComponent
+ ]
+})
+export class DynamicElementComponent {
+
+ @ViewChild('target', { read: ViewContainerRef }) target: any;
+ @Input() type: any;
+ @Input() name: string;
+ value:any;
+
+ // Two way binding for value (need to write the "Change" word like this)
+ @Output('valueChange') emitter: EventEmitter<string> = new EventEmitter<any>();
+ @Input('value') set setValueValue(value) {
+ this.value = value;
+ }
+
+ cmpRef: ComponentRef<any>;
+ private isViewInitialized: boolean = false;
+ validation = ValidationConfiguration.validation;
+
+ constructor(
+ private componentFactoryResolver: ComponentFactoryResolver,
+ private compiler: Compiler,
+ private el: ElementRef) {
+ }
+
+ updateComponent() {
+ if (!this.isViewInitialized) {
+ return;
+ }
+ if (this.cmpRef) {
+ this.cmpRef.destroy();
+ }
+
+ // Factory to create component based on type or peroperty name.
+ switch(this.type) {
+ case 'list':
+ case 'integer':
+ this.createComponent(UiElementInputComponent);
+ this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
+ break;
+ case 'string':
+ switch(this.name.toUpperCase()) {
+ case 'SUBNETPOOLID':
+ this.createComponent(UiElementPopoverInputComponent);
+ break;
+ default:
+ this.createComponent(UiElementInputComponent);
+ }
+ break;
+ case 'boolean':
+ //this.createComponent(UiElementCheckBoxComponent);
+
+ this.createComponent(UiElementDropDownComponent);
+
+ // Build drop down values
+ let tmp = [];
+ tmp.push(new DropdownValue('true','TRUE'));
+ tmp.push(new DropdownValue('false','FALSE'));
+ this.cmpRef.instance.values = tmp;
+ break;
+ default:
+ this.createComponent(UiElementInputComponent);
+ console.log("ERROR: No ui component to handle type: " + this.type);
+ }
+
+ // Additional attributes in base element class
+ if (this.cmpRef) {
+ this.cmpRef.instance.name = this.name;
+ this.cmpRef.instance.type = this.type;
+ this.cmpRef.instance.value = this.value;
+ }
+
+ // Subscribe to change event of of ui-element-basic and fire event to change the value
+ this.cmpRef.instance.baseEmitter.subscribe((value):void => {
+ this.emitter.emit(value)
+ });
+
+ }
+
+ createComponent(ComponentToCreate:any):void {
+ let factory = this.componentFactoryResolver.resolveComponentFactory(ComponentToCreate);
+ this.cmpRef = this.target.createComponent(factory);
+ }
+
+ ngOnChanges() {
+ this.updateComponent();
+ }
+
+ ngAfterContentInit() {
+ //console.log("DynamicElementComponent: ngAfterContentInit: type: " + this.type + " value: " + this.value);
+ this.isViewInitialized = true;
+ this.updateComponent();
+ }
+
+ ngOnDestroy() {
+ if (this.cmpRef) {
+ this.cmpRef.destroy();
+ }
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts
new file mode 100644
index 0000000000..18b044bc9d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts
@@ -0,0 +1,34 @@
+import { NgModule } from "@angular/core";
+import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component';
+import { UiElementDropDownComponent } from './elements-ui/dropdown/ui-element-dropdown.component';
+import { UiElementInputComponent } from './elements-ui/input/ui-element-input.component';
+import { DynamicElementComponent } from "app/ng2/components/dynamic-element/dynamic-element.component";
+import { BrowserModule } from '@angular/platform-browser'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { UiElementPopoverInputComponent } from "./elements-ui/popover-input/ui-element-popover-input.component";
+import {PopoverModule} from "../popover/popover.module";
+import {TooltipModule} from "../tooltip/tooltip.module";
+
+@NgModule({
+ declarations: [
+ DynamicElementComponent,
+ UiElementInputComponent,
+ UiElementCheckBoxComponent,
+ UiElementDropDownComponent,
+ UiElementPopoverInputComponent
+ ],
+ imports: [
+ BrowserModule,
+ FormsModule,
+ PopoverModule,
+ ReactiveFormsModule,
+ TooltipModule
+ ],
+ exports: [
+ DynamicElementComponent
+ ],
+ providers: []
+})
+export class DynamicElementModule {
+
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html
new file mode 100644
index 0000000000..2ad3d8e94a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html
@@ -0,0 +1 @@
+<input #{{name}} [(ngModel)]="value" type="checkbox" (change)="onSave(value)" />
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less
new file mode 100644
index 0000000000..bed097fe5e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less
@@ -0,0 +1,2 @@
+/deep/ ui-element-checkbox {
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts
new file mode 100644
index 0000000000..152303aee7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts
@@ -0,0 +1,27 @@
+import { Component, ViewChild, ElementRef, ContentChildren, Input } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser'
+import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
+
+@Component({
+ selector: 'ui-element-checkbox',
+ templateUrl: './ui-element-checkbox.component.html',
+ styleUrls: ['./ui-element-checkbox.component.less'],
+})
+export class UiElementCheckBoxComponent extends UiElementBase implements UiElementBaseInterface {
+
+ constructor() {
+ super();
+ }
+
+ ngAfterContentInit() {
+ // Convert the value to boolean (instanceOf does not work, the type is undefined).
+ if (this.value==='true' || this.value==='false') {
+ this.value = this.value==='true'?true:false;
+ }
+ }
+
+ onSave() {
+ this.baseEmitter.emit(this.value);
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html
new file mode 100644
index 0000000000..589d00e42d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html
@@ -0,0 +1,3 @@
+<select name='{{name}}' [(ngModel)]="value" #t (change)="onSave()">
+ <option *ngFor="let ddvalue of values" [value]="ddvalue.value">{{ddvalue.label}}</option>
+</select>
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less
new file mode 100644
index 0000000000..ea3e35140e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less
@@ -0,0 +1,11 @@
+@import '../../../../../../assets/styles/variables';
+
+/deep/ ui-element-dropdown {
+
+ select {
+ text-indent: 6px;
+ border: solid 1px @main_color_o;
+ width: 100%;
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts
new file mode 100644
index 0000000000..208bf54983
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts
@@ -0,0 +1,33 @@
+import { Component, EventEmitter, Output, Input } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
+
+export class DropdownValue {
+ value:string;
+ label:string;
+
+ constructor(value:string,label:string) {
+ this.value = value;
+ this.label = label;
+ }
+}
+
+@Component({
+ selector: 'ui-element-dropdown',
+ templateUrl: './ui-element-dropdown.component.html',
+ styleUrls: ['./ui-element-dropdown.component.less'],
+})
+export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface {
+
+ @Input()
+ values: DropdownValue[];
+
+ constructor() {
+ super();
+ }
+
+ onSave() {
+ this.baseEmitter.emit(this.value);
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html
new file mode 100644
index 0000000000..00fea65b72
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html
@@ -0,0 +1,13 @@
+<input
+ class="value-input"
+ [ngClass]="{'error': control.invalid}"
+ type="text"
+ [name]="name"
+ [(ngModel)]="value"
+ (change)="onSave()"
+ [attr.maxlength]="validation.propertyValue.max"
+ [attr.minlength]="validation.propertyValue.min"
+ [pattern]="pattern"
+ [formControl]="control"
+ tooltip="{{value}}"
+ />
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less
new file mode 100644
index 0000000000..d320c7ff8b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less
@@ -0,0 +1,17 @@
+@import '../../../../../../assets/styles/variables';
+
+/deep/ ui-element-input {
+
+ input {
+ text-indent: 6px;
+ border: solid 1px @main_color_o;
+ }
+
+ .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/dynamic-element/elements-ui/input/ui-element-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts
new file mode 100644
index 0000000000..5a14d8f206
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts
@@ -0,0 +1,22 @@
+import { Component, ViewChild, ElementRef, ContentChildren } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser'
+import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
+
+@Component({
+ selector: 'ui-element-input',
+ templateUrl: './ui-element-input.component.html',
+ styleUrls: ['./ui-element-input.component.less'],
+})
+export class UiElementInputComponent extends UiElementBase implements UiElementBaseInterface {
+
+ constructor() {
+ super();
+ this.pattern = this.validation.validationPatterns.comment;
+ }
+
+ onSave() {
+ if (!this.control.invalid){
+ this.baseEmitter.emit(this.value);
+ }
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html
new file mode 100644
index 0000000000..5adceb49a0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html
@@ -0,0 +1,26 @@
+<div class="popover-input-wrapper" tooltip="{{value}}">
+ <input
+ class="value-input"
+ type="text"
+ [ngClass]="{'error': control.invalid}"
+ [name]="name"
+ [value]="value"
+ disabled
+ />
+ <button [popover]="popoverForm">Edit</button>
+</div>
+
+<popover-content #popoverForm [title]="name" [buttons]="buttonsArray" [placement]="'top'" [closeOnClickOutside]="true">
+ <div class="edit-subnet-wrapper">
+ <textarea rows="5"
+ #textArea
+ class="subnet-value"
+ [ngClass]="{'error': control.invalid}"
+ [(ngModel)]="value"
+ [attr.maxlength]="validation.propertyValue.max"
+ [attr.minlength]="validation.propertyValue.min"
+ [pattern]="pattern"
+ [formControl]="control"
+ ></textarea>
+ </div>
+</popover-content>
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less
new file mode 100644
index 0000000000..5be443f7b6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less
@@ -0,0 +1,36 @@
+@import '../../../../../../assets/styles/variables';
+
+.popover-input-wrapper {
+ display: flex;
+}
+
+/deep/ ui-element-popover-input {
+
+ .popover {
+ max-width: 350px;
+ width: 350px;
+ }
+
+ .edit-subnet-wrapper {
+ padding: 12px;
+
+ .subnet-value {
+ width: 100%;
+ resize: none;
+ }
+ }
+
+ input {
+ padding-right: 6px;
+ padding-left: 6px;
+ border: solid 1px @main_color_o;
+ }
+
+ .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/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts
new file mode 100644
index 0000000000..7300417686
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts
@@ -0,0 +1,39 @@
+import {Component, ViewChild, ElementRef} from '@angular/core';
+import {UiElementBase, UiElementBaseInterface} from "../ui-element-base.component";
+import {ButtonsModelMap, ButtonModel} from "app/models";
+import { PopoverContentComponent } from "app/ng2/components/popover/popover-content.component"
+import { PopoverComponent } from "app/ng2/components/popover/popover.component"
+
+@Component({
+ selector: 'ui-element-popover-input',
+ templateUrl: './ui-element-popover-input.component.html',
+ styleUrls: ['./ui-element-popover-input.component.less']
+})
+export class UiElementPopoverInputComponent extends UiElementBase implements UiElementBaseInterface {
+
+ @ViewChild('textArea') textArea: ElementRef;
+ @ViewChild('popoverForm') popoverContentComponent: PopoverContentComponent;
+
+ saveButton: ButtonModel;
+ buttonsArray: ButtonsModelMap;
+
+ onSave = ():void => {
+ if (!this.control.invalid){
+ this.baseEmitter.emit(this.value);
+ this.popoverContentComponent.hide();
+ }
+ }
+
+ constructor() {
+ super();
+ // Create Save button and insert to buttons map
+ this.saveButton = new ButtonModel('save', 'blue', this.onSave);
+ this.buttonsArray = { 'test': this.saveButton };
+
+ // Define the regex pattern for this controller
+ this.pattern = this.validation.validationPatterns.comment;
+
+ // Disable / Enable button according to validation
+ //this.control.valueChanges.subscribe(data => this.saveButton.disabled = this.control.invalid);
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts
new file mode 100644
index 0000000000..b60271f6f0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts
@@ -0,0 +1,34 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { ValidationConfiguration } from "app/models";
+import { FormControl, Validators } from '@angular/forms';
+
+export interface UiElementBaseInterface {
+ onSave();
+}
+
+@Component({
+ template: ``,
+ styles: []
+})
+export class UiElementBase {
+
+ protected validation = ValidationConfiguration.validation;
+ protected control: FormControl;
+
+ // Two way binding for value (need to write the "Change" word like this)
+ @Output('valueChange') baseEmitter: EventEmitter<string> = new EventEmitter<any>();
+ @Input('value') set setValueValue(value) {
+ this.value = value;
+ }
+
+ protected name: string;
+ protected type: string;
+ protected value: any;
+ protected pattern: any;
+
+ constructor() {
+ //this.control = new FormControl('', [Validators.required]);
+ this.control = new FormControl('', []);
+ }
+
+}