Vladyslav
6 years ago
committed by
GitHub
GitHub
17 changed files with 384 additions and 14 deletions
@ -0,0 +1,57 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2020 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. |
|||
|
|||
--> |
|||
<form [formGroup]="jsonFormGroup" (ngSubmit)="add()" style="min-width: 400px;"> |
|||
<mat-toolbar fxLayout="row" color="primary"> |
|||
<h2>{{ (this.data.title ? this.data.title : 'details.edit-json') | translate }}</h2> |
|||
<span fxFlex></span> |
|||
<button mat-button mat-icon-button |
|||
(click)="cancel()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
|||
</mat-progress-bar> |
|||
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
|||
<div mat-dialog-content> |
|||
<fieldset [disabled]="isLoading$ | async"> |
|||
<tb-json-object-edit |
|||
formControlName="json" |
|||
label="{{ 'value.json-value' | translate }}" |
|||
validateContent="true" |
|||
[required]="true" |
|||
[fillHeight]="false"> |
|||
</tb-json-object-edit> |
|||
</fieldset> |
|||
</div> |
|||
<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center"> |
|||
<span fxFlex></span> |
|||
<button mat-button mat-raised-button color="primary" |
|||
type="submit" |
|||
[disabled]="(isLoading$ | async) || jsonFormGroup.invalid || !jsonFormGroup.dirty"> |
|||
{{ 'action.save' | translate }} |
|||
</button> |
|||
<button mat-button color="primary" |
|||
style="margin-right: 20px;" |
|||
type="button" |
|||
[disabled]="(isLoading$ | async)" |
|||
(click)="cancel()" cdkFocusInitial> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
</div> |
|||
</form> |
|||
@ -0,0 +1,63 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 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, Inject, OnInit} from "@angular/core"; |
|||
import {DialogComponent} from "@shared/components/dialog.component"; |
|||
import {Store} from "@ngrx/store"; |
|||
import {AppState} from "@core/core.state"; |
|||
import {Router} from "@angular/router"; |
|||
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; |
|||
import {FormBuilder, FormGroup} from "@angular/forms"; |
|||
|
|||
export interface JsonObjectEdittDialogData { |
|||
jsonValue: Object; |
|||
title?: string; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-object-edit-dialog', |
|||
templateUrl: './json-object-edit-dialog.component.html', |
|||
styleUrls: [] |
|||
}) |
|||
export class JsonObjectEditDialogComponent extends DialogComponent<JsonObjectEditDialogComponent, Object> |
|||
implements OnInit { |
|||
|
|||
jsonFormGroup: FormGroup; |
|||
|
|||
submitted = false; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
@Inject(MAT_DIALOG_DATA) public data: JsonObjectEdittDialogData, |
|||
public dialogRef: MatDialogRef<JsonObjectEditDialogComponent, Object>, |
|||
public fb: FormBuilder) { |
|||
super(store, router, dialogRef); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.jsonFormGroup = this.fb.group({ |
|||
json: [this.data.jsonValue, []] |
|||
}); |
|||
} |
|||
|
|||
cancel(): void { |
|||
this.dialogRef.close(undefined); |
|||
} |
|||
|
|||
add(): void { |
|||
this.dialogRef.close(this.jsonFormGroup.get('json').value); |
|||
} |
|||
} |
|||
@ -0,0 +1,96 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 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 {Directive, ElementRef, forwardRef, HostListener, Renderer2, SkipSelf} from "@angular/core"; |
|||
import { |
|||
ControlValueAccessor, |
|||
FormControl, FormGroupDirective, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, NgForm, |
|||
ValidationErrors, |
|||
Validator |
|||
} from "@angular/forms"; |
|||
import {ErrorStateMatcher} from "@angular/material/core"; |
|||
|
|||
@Directive({ |
|||
selector: '[tb-json-to-string]', |
|||
providers: [{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => TbJsonToStringDirective), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => TbJsonToStringDirective), |
|||
multi: true, |
|||
}, |
|||
{ |
|||
provide: ErrorStateMatcher, |
|||
useExisting: TbJsonToStringDirective |
|||
}] |
|||
}) |
|||
|
|||
export class TbJsonToStringDirective implements ControlValueAccessor, Validator, ErrorStateMatcher { |
|||
private propagateChange = null; |
|||
private parseError: boolean; |
|||
private data: any; |
|||
|
|||
@HostListener('input', ['$event.target.value']) input(newValue: any): void { |
|||
try { |
|||
this.data = JSON.parse(newValue); |
|||
this.parseError = false; |
|||
} catch (e) { |
|||
this.parseError = true; |
|||
} |
|||
|
|||
this.propagateChange(this.data); |
|||
} |
|||
|
|||
constructor(private render: Renderer2, |
|||
private element: ElementRef, |
|||
@SkipSelf() private errorStateMatcher: ErrorStateMatcher) { |
|||
|
|||
} |
|||
|
|||
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { |
|||
const originalErrorState = this.errorStateMatcher.isErrorState(control, form); |
|||
const customErrorState = !!(control && control.invalid && this.parseError); |
|||
return originalErrorState || customErrorState; |
|||
} |
|||
|
|||
validate(c: FormControl): ValidationErrors { |
|||
return (!this.parseError) ? null : { |
|||
invalidJSON: { |
|||
valid: false |
|||
} |
|||
}; |
|||
} |
|||
|
|||
writeValue(obj: any): void { |
|||
if (obj) { |
|||
this.data = obj; |
|||
this.parseError = false; |
|||
this.render.setProperty(this.element.nativeElement, 'value', JSON.stringify(obj)); |
|||
} |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
} |
|||
@ -0,0 +1,30 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 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 {Pipe, PipeTransform} from '@angular/core'; |
|||
import {isObject, isNumber} from "@core/utils"; |
|||
|
|||
@Pipe({name: 'tbJson'}) |
|||
export class TbJsonPipe implements PipeTransform { |
|||
transform(value: any): string { |
|||
if (isObject(value)) { |
|||
return JSON.stringify(value); |
|||
} else if (isNumber(value)) { |
|||
return value.toString(); |
|||
} |
|||
return value; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue