diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/dynamic-element')
13 files changed, 78 insertions, 20 deletions
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 index de5965e488..84ac46c4cf 100644 --- 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 @@ -4,6 +4,7 @@ import { UiElementDropDownComponent, DropdownValue } from './elements-ui/dropdow 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"; +import {UiElementIntegerInputComponent} from "./elements-ui/integer-input/ui-element-integer-input.component"; @Component({ selector: 'dynamic-element', @@ -13,7 +14,8 @@ import {ValidationConfiguration} from "app/models"; UiElementInputComponent, UiElementDropDownComponent, UiElementCheckBoxComponent, - UiElementPopoverInputComponent + UiElementPopoverInputComponent, + UiElementIntegerInputComponent ] }) export class DynamicElementComponent { @@ -21,6 +23,7 @@ export class DynamicElementComponent { @ViewChild('target', { read: ViewContainerRef }) target: any; @Input() type: any; @Input() name: string; + @Input() readonly:boolean; value:any; // Two way binding for value (need to write the "Change" word like this) @@ -50,17 +53,16 @@ export class DynamicElementComponent { // Factory to create component based on type or peroperty name. switch(this.type) { case 'list': - case 'integer': - this.createComponent(UiElementInputComponent); + case 'integer': + this.createComponent(UiElementIntegerInputComponent); 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); + if (this.name.toUpperCase().indexOf("SUBNETPOOLID") !== -1) { + this.createComponent(UiElementPopoverInputComponent); + } + else { + this.createComponent(UiElementInputComponent); } break; case 'boolean': @@ -84,6 +86,7 @@ export class DynamicElementComponent { this.cmpRef.instance.name = this.name; this.cmpRef.instance.type = this.type; this.cmpRef.instance.value = this.value; + this.cmpRef.instance.readonly = this.readonly; } // Subscribe to change event of of ui-element-basic and fire event to change the value 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 index 18b044bc9d..f53b8616ac 100644 --- 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 @@ -8,6 +8,7 @@ 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"; +import {UiElementIntegerInputComponent} from "./elements-ui/integer-input/ui-element-integer-input.component"; @NgModule({ declarations: [ @@ -15,7 +16,8 @@ import {TooltipModule} from "../tooltip/tooltip.module"; UiElementInputComponent, UiElementCheckBoxComponent, UiElementDropDownComponent, - UiElementPopoverInputComponent + UiElementPopoverInputComponent, + UiElementIntegerInputComponent ], imports: [ BrowserModule, 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 index 2ad3d8e94a..a3e28c5f0b 100644 --- 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 @@ -1 +1 @@ -<input #{{name}} [(ngModel)]="value" type="checkbox" (change)="onSave(value)" /> +<input #{{name}} [(ngModel)]="value" type="checkbox" (change)="onSave(value)" [ngClass]="{'disabled':readonly}"/> 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 index 589d00e42d..bfb927af71 100644 --- 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 @@ -1,3 +1,3 @@ -<select name='{{name}}' [(ngModel)]="value" #t (change)="onSave()"> +<select name='{{name}}' [(ngModel)]="value" #t (change)="onSave()" [ngClass]="{'disabled':readonly}"> <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.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts index 208bf54983..b1fb37a186 100644 --- 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 @@ -18,7 +18,6 @@ export class DropdownValue { styleUrls: ['./ui-element-dropdown.component.less'], }) export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface { - @Input() values: DropdownValue[]; @@ -27,7 +26,7 @@ export class UiElementDropDownComponent extends UiElementBase implements UiEleme } onSave() { - this.baseEmitter.emit(this.value); + this.baseEmitter.emit(JSON.parse(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 index 00fea65b72..814ebfd28b 100644 --- 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 @@ -10,4 +10,6 @@ [pattern]="pattern" [formControl]="control" tooltip="{{value}}" + [readonly]="readonly" + [ngClass]="{'disabled':readonly}" /> 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 index 5a14d8f206..2d64d9b713 100644 --- 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 @@ -1,4 +1,4 @@ -import { Component, ViewChild, ElementRef, ContentChildren } from '@angular/core'; +import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core'; import { BrowserModule } from '@angular/platform-browser' import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; @@ -8,7 +8,6 @@ import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.comp styleUrls: ['./ui-element-input.component.less'], }) export class UiElementInputComponent extends UiElementBase implements UiElementBaseInterface { - constructor() { super(); this.pattern = this.validation.validationPatterns.comment; diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html new file mode 100644 index 0000000000..e5518d453f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html @@ -0,0 +1,15 @@ +<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}}" + [readonly]="readonly" + [ngClass]="{'disabled':readonly}" +/> diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less new file mode 100644 index 0000000000..8073c3858e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less @@ -0,0 +1,17 @@ +@import '../../../../../../assets/styles/variables'; + +/deep/ ui-element-integer-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/integer-input/ui-element-integer-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts new file mode 100644 index 0000000000..d42c80a89e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts @@ -0,0 +1,21 @@ +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-integer-input', + templateUrl: './ui-element-integer-input.component.html', + styleUrls: ['./ui-element-integer-input.component.less'], +}) +export class UiElementIntegerInputComponent extends UiElementBase implements UiElementBaseInterface { + constructor() { + super(); + this.pattern = this.validation.validationPatterns.comment; + } + + onSave() { + if (!this.control.invalid){ + this.baseEmitter.emit(JSON.parse(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 index 5adceb49a0..3bd51b4e36 100644 --- 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 @@ -4,10 +4,10 @@ type="text" [ngClass]="{'error': control.invalid}" [name]="name" - [value]="value" + [value]="value!=undefined?value:''" disabled /> - <button [popover]="popoverForm">Edit</button> + <button [popover]="popoverForm" [ngClass]="{'disabled':readonly}">Edit</button> </div> <popover-content #popoverForm [title]="name" [buttons]="buttonsArray" [placement]="'top'" [closeOnClickOutside]="true"> 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 index 7300417686..84dd884d1f 100644 --- 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 @@ -1,4 +1,4 @@ -import {Component, ViewChild, ElementRef} from '@angular/core'; +import {Component, ViewChild, ElementRef, Input} 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" @@ -10,7 +10,6 @@ import { PopoverComponent } from "app/ng2/components/popover/popover.component" styleUrls: ['./ui-element-popover-input.component.less'] }) export class UiElementPopoverInputComponent extends UiElementBase implements UiElementBaseInterface { - @ViewChild('textArea') textArea: ElementRef; @ViewChild('popoverForm') popoverContentComponent: PopoverContentComponent; 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 index b60271f6f0..fa2be1048c 100644 --- 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 @@ -25,6 +25,7 @@ export class UiElementBase { protected type: string; protected value: any; protected pattern: any; + protected readonly:boolean; constructor() { //this.control = new FormControl('', [Validators.required]); |