Vladyslav
7 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