Igor Kulikov
7 years ago
18 changed files with 1112 additions and 43 deletions
@ -0,0 +1,39 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2019 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div style="background: #fff;" [ngClass]="{'fill-height': fillHeight}" |
||||
|
tb-fullscreen |
||||
|
[fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()" fxLayout="column"> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;" class="tb-json-content-toolbar"> |
||||
|
<label class="tb-title no-padding">{{ label }}</label> |
||||
|
<span fxFlex></span> |
||||
|
<button type="button" |
||||
|
mat-button *ngIf="!readonly" class="tidy" (click)="beautifyJson()"> |
||||
|
{{'js-func.tidy' | translate }} |
||||
|
</button> |
||||
|
<button type='button' mat-button mat-icon-button (click)="fullscreen = !fullscreen" |
||||
|
class="tb-mat-32" |
||||
|
matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon class="material-icons">{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div id="tb-json-panel" tb-toast toastTarget="jsonContentEditor" |
||||
|
class="tb-json-content-panel" fxLayout="column"> |
||||
|
<div #jsonEditor id="tb-json-input" [ngStyle]="editorStyle" [ngClass]="{'fill-height': fillHeight}"></div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,57 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2019 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
|
||||
|
:host { |
||||
|
position: relative; |
||||
|
|
||||
|
.fill-height { |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-json-content-toolbar { |
||||
|
button.mat-button, button.mat-icon-button, button.mat-icon-button.tb-mat-32 { |
||||
|
align-items: center; |
||||
|
vertical-align: middle; |
||||
|
min-width: 32px; |
||||
|
min-height: 15px; |
||||
|
padding: 4px; |
||||
|
margin: 0; |
||||
|
font-size: .8rem; |
||||
|
line-height: 15px; |
||||
|
color: #7b7b7b; |
||||
|
background: rgba(220, 220, 220, .35); |
||||
|
&:not(:last-child) { |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-json-content-panel { |
||||
|
height: 100%; |
||||
|
margin-left: 15px; |
||||
|
border: 1px solid #c0c0c0; |
||||
|
|
||||
|
#tb-json-input { |
||||
|
width: 100%; |
||||
|
min-width: 200px; |
||||
|
height: 100%; |
||||
|
|
||||
|
&:not(.fill-height) { |
||||
|
min-height: 200px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,275 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { |
||||
|
Component, |
||||
|
ElementRef, |
||||
|
forwardRef, |
||||
|
Input, |
||||
|
OnChanges, |
||||
|
OnInit, |
||||
|
ViewChild, |
||||
|
SimpleChanges, |
||||
|
OnDestroy |
||||
|
} from '@angular/core'; |
||||
|
import { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms'; |
||||
|
import * as ace from 'ace-builds'; |
||||
|
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
||||
|
import { ActionNotificationHide, ActionNotificationShow } from '@core/notification/notification.actions'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { ContentType, contentTypesMap } from '@shared/models/constants'; |
||||
|
import { CancelAnimationFrame, RafService } from '@core/services/raf.service'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-json-content', |
||||
|
templateUrl: './json-content.component.html', |
||||
|
styleUrls: ['./json-content.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => JsonContentComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => JsonContentComponent), |
||||
|
multi: true, |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class JsonContentComponent implements OnInit, ControlValueAccessor, Validator, OnChanges, OnDestroy { |
||||
|
|
||||
|
@ViewChild('jsonEditor', {static: true}) |
||||
|
jsonEditorElmRef: ElementRef; |
||||
|
|
||||
|
private jsonEditor: ace.Ace.Editor; |
||||
|
private editorsResizeCaf: CancelAnimationFrame; |
||||
|
private editorResizeListener: any; |
||||
|
|
||||
|
@Input() label: string; |
||||
|
|
||||
|
@Input() contentType: ContentType; |
||||
|
|
||||
|
@Input() disabled: boolean; |
||||
|
|
||||
|
@Input() fillHeight: boolean; |
||||
|
|
||||
|
@Input() editorStyle: {[klass: string]: any}; |
||||
|
|
||||
|
private readonlyValue: boolean; |
||||
|
get readonly(): boolean { |
||||
|
return this.readonlyValue; |
||||
|
} |
||||
|
@Input() |
||||
|
set readonly(value: boolean) { |
||||
|
this.readonlyValue = coerceBooleanProperty(value); |
||||
|
} |
||||
|
|
||||
|
private validateContentValue: boolean; |
||||
|
get validateContent(): boolean { |
||||
|
return this.validateContentValue; |
||||
|
} |
||||
|
@Input() |
||||
|
set validateContent(value: boolean) { |
||||
|
this.validateContentValue = coerceBooleanProperty(value); |
||||
|
} |
||||
|
|
||||
|
fullscreen = false; |
||||
|
|
||||
|
contentBody: string; |
||||
|
|
||||
|
contentValid: boolean; |
||||
|
|
||||
|
validationError: string; |
||||
|
|
||||
|
errorShowed = false; |
||||
|
|
||||
|
private propagateChange = null; |
||||
|
|
||||
|
constructor(public elementRef: ElementRef, |
||||
|
protected store: Store<AppState>, |
||||
|
private raf: RafService) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
const editorElement = this.jsonEditorElmRef.nativeElement; |
||||
|
let mode = 'text'; |
||||
|
if (this.contentType) { |
||||
|
mode = contentTypesMap.get(this.contentType).code; |
||||
|
} |
||||
|
let editorOptions: Partial<ace.Ace.EditorOptions> = { |
||||
|
mode: `ace/mode/${mode}`, |
||||
|
theme: 'ace/theme/github', |
||||
|
showGutter: true, |
||||
|
showPrintMargin: false, |
||||
|
readOnly: this.readonly |
||||
|
}; |
||||
|
|
||||
|
const advancedOptions = { |
||||
|
enableSnippets: true, |
||||
|
enableBasicAutocompletion: true, |
||||
|
enableLiveAutocompletion: true |
||||
|
}; |
||||
|
|
||||
|
editorOptions = {...editorOptions, ...advancedOptions}; |
||||
|
this.jsonEditor = ace.edit(editorElement, editorOptions); |
||||
|
this.jsonEditor.session.setUseWrapMode(true); |
||||
|
this.jsonEditor.setValue(this.contentBody ? this.contentBody : '', -1); |
||||
|
this.jsonEditor.on('change', () => { |
||||
|
this.cleanupJsonErrors(); |
||||
|
this.updateView(); |
||||
|
}); |
||||
|
this.editorResizeListener = this.onAceEditorResize.bind(this); |
||||
|
// @ts-ignore
|
||||
|
addResizeListener(editorElement, this.editorResizeListener); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
if (this.editorResizeListener) { |
||||
|
const editorElement = this.jsonEditorElmRef.nativeElement; |
||||
|
// @ts-ignore
|
||||
|
removeResizeListener(editorElement, this.editorResizeListener); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private onAceEditorResize() { |
||||
|
if (this.editorsResizeCaf) { |
||||
|
this.editorsResizeCaf(); |
||||
|
this.editorsResizeCaf = null; |
||||
|
} |
||||
|
this.editorsResizeCaf = this.raf.raf(() => { |
||||
|
this.jsonEditor.resize(); |
||||
|
this.jsonEditor.renderer.updateFull(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
ngOnChanges(changes: SimpleChanges): void { |
||||
|
for (const propName of Object.keys(changes)) { |
||||
|
const change = changes[propName]; |
||||
|
if (!change.firstChange && change.currentValue !== change.previousValue) { |
||||
|
if (propName === 'contentType') { |
||||
|
if (this.jsonEditor) { |
||||
|
let mode = 'text'; |
||||
|
if (this.contentType) { |
||||
|
mode = contentTypesMap.get(this.contentType).code; |
||||
|
} |
||||
|
this.jsonEditor.session.setMode(`ace/mode/${mode}`); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
} |
||||
|
|
||||
|
public validate(c: FormControl) { |
||||
|
return (this.contentValid) ? null : { |
||||
|
contentBody: { |
||||
|
valid: false, |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
validateOnSubmit(): void { |
||||
|
if (!this.readonly) { |
||||
|
this.cleanupJsonErrors(); |
||||
|
this.contentValid = true; |
||||
|
this.propagateChange(this.contentBody); |
||||
|
this.contentValid = this.doValidate(); |
||||
|
this.propagateChange(this.contentBody); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private doValidate(): boolean { |
||||
|
try { |
||||
|
if (this.validateContent && this.contentType === ContentType.JSON) { |
||||
|
JSON.parse(this.contentBody); |
||||
|
} |
||||
|
return true; |
||||
|
} catch (ex) { |
||||
|
let errorInfo = 'Error:'; |
||||
|
if (ex.name) { |
||||
|
errorInfo += ' ' + ex.name + ':'; |
||||
|
} |
||||
|
if (ex.message) { |
||||
|
errorInfo += ' ' + ex.message; |
||||
|
} |
||||
|
this.store.dispatch(new ActionNotificationShow( |
||||
|
{ |
||||
|
message: errorInfo, |
||||
|
type: 'error', |
||||
|
target: 'jsonContentEditor', |
||||
|
verticalPosition: 'bottom', |
||||
|
horizontalPosition: 'left' |
||||
|
})); |
||||
|
this.errorShowed = true; |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
cleanupJsonErrors(): void { |
||||
|
if (this.errorShowed) { |
||||
|
this.store.dispatch(new ActionNotificationHide( |
||||
|
{ |
||||
|
target: 'jsonContentEditor' |
||||
|
})); |
||||
|
this.errorShowed = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: string): void { |
||||
|
this.contentBody = value; |
||||
|
this.contentValid = true; |
||||
|
if (this.jsonEditor) { |
||||
|
this.jsonEditor.setValue(this.contentBody ? this.contentBody : '', -1); |
||||
|
// this.jsonEditor.
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
updateView() { |
||||
|
const editorValue = this.jsonEditor.getValue(); |
||||
|
if (this.contentBody !== editorValue) { |
||||
|
this.contentBody = editorValue; |
||||
|
this.contentValid = true; |
||||
|
this.propagateChange(this.contentBody); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
beautifyJson() { |
||||
|
const res = js_beautify(this.contentBody, {indent_size: 4, wrap_line_length: 60}); |
||||
|
this.jsonEditor.setValue(res ? res : '', -1); |
||||
|
this.updateView(); |
||||
|
} |
||||
|
|
||||
|
onFullscreen() { |
||||
|
if (this.jsonEditor) { |
||||
|
setTimeout(() => { |
||||
|
this.jsonEditor.resize(); |
||||
|
}, 0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,60 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2019 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
|
||||
|
<section fxLayout="column" class="tb-kv-map" [formGroup]="kvListFormGroup"> |
||||
|
<label translate class="tb-title no-padding">{{ titleText }}</label> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="max-height: 40px;" |
||||
|
formArrayName="keyVals" |
||||
|
*ngFor="let keyValControl of keyValsFormArray().controls; let $index = index"> |
||||
|
<mat-form-field fxFlex floatLabel="always" hideRequiredMarker class="mat-block" |
||||
|
style="max-height: 40px;"> |
||||
|
<mat-label></mat-label> |
||||
|
<input [formControl]="keyValControl.get('key')" matInput required |
||||
|
placeholder="{{ (keyPlaceholderText ? keyPlaceholderText : 'key-val.key') | translate }}"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex floatLabel="always" hideRequiredMarker class="mat-block" |
||||
|
style="max-height: 40px;"> |
||||
|
<mat-label></mat-label> |
||||
|
<input [formControl]="keyValControl.get('value')" matInput required |
||||
|
placeholder="{{ (valuePlaceholderText ? valuePlaceholderText : 'key-val.value') | translate }}"/> |
||||
|
</mat-form-field> |
||||
|
<button mat-button mat-icon-button color="primary" |
||||
|
[fxShow]="!disabled" |
||||
|
type="button" |
||||
|
(click)="removeKeyVal($index)" |
||||
|
[disabled]="isLoading$ | async" |
||||
|
matTooltip="{{ 'key-val.remove-entry' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>close</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
<span [fxShow]="!keyValsFormArray().length" |
||||
|
fxLayoutAlign="center center" [ngClass]="{'disabled': disabled}" |
||||
|
class="no-data-found" translate>{{noDataText ? noDataText : 'key-val.no-data'}}</span> |
||||
|
<div style="margin-top: 8px;"> |
||||
|
<button mat-button mat-raised-button color="primary" |
||||
|
[fxShow]="!disabled" |
||||
|
[disabled]="isLoading$ | async" |
||||
|
(click)="addKeyVal()" |
||||
|
type="button" |
||||
|
matTooltip="{{ 'key-val.add-entry' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
{{ 'action.add' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</section> |
||||
@ -0,0 +1,41 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2019 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
:host { |
||||
|
.tb-kv-map { |
||||
|
span.no-data-found { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
height: 40px; |
||||
|
text-transform: uppercase; |
||||
|
|
||||
|
&.disabled { |
||||
|
color: rgba(0, 0, 0, .38); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
|
.mat-form-field-wrapper { |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.mat-form-field-infix { |
||||
|
border-top: 0; |
||||
|
} |
||||
|
.mat-form-field-underline { |
||||
|
bottom: 0; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,160 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'; |
||||
|
import { |
||||
|
AbstractControl, |
||||
|
ControlValueAccessor, FormArray, |
||||
|
FormBuilder, FormControl, |
||||
|
FormGroup, NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, Validator, |
||||
|
ValidatorFn, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import { AliasFilterType, aliasFilterTypeTranslationMap, EntityAliasFilter } from '@shared/models/alias.models'; |
||||
|
import { AliasEntityType, EntityType } from '@shared/models/entity-type.models'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { EntityService } from '@core/http/entity.service'; |
||||
|
import { EntitySearchDirection, entitySearchDirectionTranslations, EntityTypeFilter } from '@shared/models/relation.models'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { Subscription } from 'rxjs'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-key-val-map', |
||||
|
templateUrl: './kv-map.component.html', |
||||
|
styleUrls: ['./kv-map.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => KeyValMapComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => KeyValMapComponent), |
||||
|
multi: true, |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class KeyValMapComponent extends PageComponent implements ControlValueAccessor, OnInit, Validator { |
||||
|
|
||||
|
@Input() disabled: boolean; |
||||
|
|
||||
|
@Input() titleText: string; |
||||
|
|
||||
|
@Input() keyPlaceholderText: string; |
||||
|
|
||||
|
@Input() valuePlaceholderText: string; |
||||
|
|
||||
|
@Input() noDataText: string; |
||||
|
|
||||
|
kvListFormGroup: FormGroup; |
||||
|
|
||||
|
private propagateChange = null; |
||||
|
|
||||
|
private valueChangeSubscription: Subscription = null; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.kvListFormGroup = this.fb.group({}); |
||||
|
this.kvListFormGroup.addControl('keyVals', |
||||
|
this.fb.array([])); |
||||
|
} |
||||
|
|
||||
|
keyValsFormArray(): FormArray { |
||||
|
return this.kvListFormGroup.get('keyVals') as FormArray; |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState?(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (this.disabled) { |
||||
|
this.kvListFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.kvListFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(keyValMap: {[key: string]: string}): void { |
||||
|
if (this.valueChangeSubscription) { |
||||
|
this.valueChangeSubscription.unsubscribe(); |
||||
|
} |
||||
|
const keyValsControls: Array<AbstractControl> = []; |
||||
|
if (keyValMap) { |
||||
|
for (const property of Object.keys(keyValMap)) { |
||||
|
if (Object.prototype.hasOwnProperty.call(keyValMap, property)) { |
||||
|
keyValsControls.push(this.fb.group({ |
||||
|
key: [property, [Validators.required]], |
||||
|
value: [keyValMap[property], [Validators.required]] |
||||
|
})); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.kvListFormGroup.setControl('keyVals', this.fb.array(keyValsControls)); |
||||
|
this.valueChangeSubscription = this.kvListFormGroup.valueChanges.subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public removeKeyVal(index: number) { |
||||
|
(this.kvListFormGroup.get('keyVals') as FormArray).removeAt(index); |
||||
|
} |
||||
|
|
||||
|
public addKeyVal() { |
||||
|
const keyValsFormArray = this.kvListFormGroup.get('keyVals') as FormArray; |
||||
|
keyValsFormArray.push(this.fb.group({ |
||||
|
key: ['', [Validators.required]], |
||||
|
value: ['', [Validators.required]] |
||||
|
})); |
||||
|
} |
||||
|
|
||||
|
public validate(c: FormControl) { |
||||
|
const kvList: {key: string; value: string}[] = this.kvListFormGroup.get('keyVals').value; |
||||
|
let valid = true; |
||||
|
for (const entry of kvList) { |
||||
|
if (!entry.key || !entry.value) { |
||||
|
valid = false; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
return (valid) ? null : { |
||||
|
keyVals: { |
||||
|
valid: false, |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
const kvList: {key: string; value: string}[] = this.kvListFormGroup.get('keyVals').value; |
||||
|
const keyValMap: {[key: string]: string} = {}; |
||||
|
kvList.forEach((entry) => { |
||||
|
keyValMap[entry.key] = entry.value; |
||||
|
}); |
||||
|
this.propagateChange(keyValMap); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,43 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2019 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<mat-form-field [formGroup]="messageTypeFormGroup" class="mat-block"> |
||||
|
<mat-label>{{ 'rulenode.message-type' | translate }}</mat-label> |
||||
|
<input matInput type="text" placeholder="{{ 'rulenode.select-message-type' | translate }}" |
||||
|
#messageTypeInput |
||||
|
formControlName="messageType" |
||||
|
(focusin)="onFocus()" |
||||
|
[required]="required" |
||||
|
[matAutocomplete]="messageTypeAutocomplete"> |
||||
|
<button *ngIf="messageTypeFormGroup.get('messageType').value && !disabled" |
||||
|
type="button" |
||||
|
matSuffix mat-button mat-icon-button aria-label="Clear" |
||||
|
(click)="clear()"> |
||||
|
<mat-icon class="material-icons">close</mat-icon> |
||||
|
</button> |
||||
|
<mat-autocomplete |
||||
|
class="tb-autocomplete" |
||||
|
#messageTypeAutocomplete="matAutocomplete" |
||||
|
[displayWith]="displayMessageTypeFn"> |
||||
|
<mat-option *ngFor="let messageType of filteredMessageTypes | async" [value]="messageType"> |
||||
|
<span [innerHTML]="displayMessageTypeFn(messageType) | highlight:searchText"></span> |
||||
|
</mat-option> |
||||
|
</mat-autocomplete> |
||||
|
<mat-error *ngIf="messageTypeFormGroup.get('messageType').hasError('required')"> |
||||
|
{{ 'rulenode.message-type-required' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
@ -0,0 +1,178 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; |
||||
|
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; |
||||
|
import { Observable, of } from 'rxjs'; |
||||
|
import { map, mergeMap, startWith, tap } from 'rxjs/operators'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@app/core/core.state'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
||||
|
import { MessageType, messageTypeNames } from '@shared/models/rule-node.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-message-type-autocomplete', |
||||
|
templateUrl: './message-type-autocomplete.component.html', |
||||
|
styleUrls: [], |
||||
|
providers: [{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => MessageTypeAutocompleteComponent), |
||||
|
multi: true |
||||
|
}] |
||||
|
}) |
||||
|
export class MessageTypeAutocompleteComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy { |
||||
|
|
||||
|
messageTypeFormGroup: FormGroup; |
||||
|
|
||||
|
modelValue: string | null; |
||||
|
|
||||
|
private requiredValue: boolean; |
||||
|
get required(): boolean { |
||||
|
return this.requiredValue; |
||||
|
} |
||||
|
@Input() |
||||
|
set required(value: boolean) { |
||||
|
this.requiredValue = coerceBooleanProperty(value); |
||||
|
} |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@ViewChild('messageTypeInput', {static: true}) messageTypeInput: ElementRef; |
||||
|
|
||||
|
filteredMessageTypes: Observable<Array<MessageType | string>>; |
||||
|
|
||||
|
searchText = ''; |
||||
|
|
||||
|
private dirty = false; |
||||
|
|
||||
|
private propagateChange = (v: any) => { }; |
||||
|
|
||||
|
constructor(private store: Store<AppState>, |
||||
|
public translate: TranslateService, |
||||
|
private fb: FormBuilder) { |
||||
|
this.messageTypeFormGroup = this.fb.group({ |
||||
|
messageType: [null] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.filteredMessageTypes = this.messageTypeFormGroup.get('messageType').valueChanges |
||||
|
.pipe( |
||||
|
tap(value => { |
||||
|
this.updateView(value); |
||||
|
}), |
||||
|
startWith<string | MessageType>(''), |
||||
|
map(value => value ? value : ''), |
||||
|
mergeMap(messageType => this.fetchMessageTypes(messageType) ) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit(): void { |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (this.disabled) { |
||||
|
this.messageTypeFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.messageTypeFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: string | null): void { |
||||
|
this.searchText = ''; |
||||
|
this.modelValue = value; |
||||
|
let res: MessageType | string = null; |
||||
|
if (value) { |
||||
|
if (Object.values(MessageType).includes(value)) { |
||||
|
res = MessageType[value]; |
||||
|
} else { |
||||
|
res = value; |
||||
|
} |
||||
|
} |
||||
|
this.messageTypeFormGroup.get('messageType').patchValue(res, {emitEvent: false}); |
||||
|
this.dirty = true; |
||||
|
} |
||||
|
|
||||
|
onFocus() { |
||||
|
if (this.dirty) { |
||||
|
this.messageTypeFormGroup.get('messageType').updateValueAndValidity({onlySelf: true, emitEvent: true}); |
||||
|
this.dirty = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
updateView(value: MessageType | string | null) { |
||||
|
let res: string = null; |
||||
|
if (value) { |
||||
|
if (Object.values(MessageType).includes(value)) { |
||||
|
res = MessageType[value]; |
||||
|
} else { |
||||
|
res = value; |
||||
|
} |
||||
|
} |
||||
|
if (this.modelValue !== res) { |
||||
|
this.modelValue = res; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
displayMessageTypeFn(messageType?: MessageType | string): string | undefined { |
||||
|
if (messageType) { |
||||
|
if (Object.values(MessageType).includes(messageType)) { |
||||
|
return messageTypeNames.get(MessageType[messageType]); |
||||
|
} else { |
||||
|
return messageType; |
||||
|
} |
||||
|
} |
||||
|
return undefined; |
||||
|
} |
||||
|
|
||||
|
fetchMessageTypes(searchText?: string): Observable<Array<MessageType | string>> { |
||||
|
this.searchText = searchText; |
||||
|
const result: Array<MessageType | string> = []; |
||||
|
messageTypeNames.forEach((value, key) => { |
||||
|
if (value.toUpperCase().includes(searchText.toUpperCase())) { |
||||
|
result.push(key); |
||||
|
} |
||||
|
}); |
||||
|
if (result.length) { |
||||
|
return of(result); |
||||
|
} else { |
||||
|
return of([searchText]); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
clear() { |
||||
|
this.messageTypeFormGroup.get('messageType').patchValue(null, {emitEvent: true}); |
||||
|
setTimeout(() => { |
||||
|
this.messageTypeInput.nativeElement.blur(); |
||||
|
this.messageTypeInput.nativeElement.focus(); |
||||
|
}, 0); |
||||
|
} |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue