tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: refactor alias/filter-select enhance reactivity and remove unused deps

pull/13757/head
Vladyslav_Prykhodko 11 months ago
parent
c6885ca262
commit
857dfc8a60
4 changed files with 64 additions and 72 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.html
  2. 53
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.ts
  3. 3
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.html
  4. 77
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.ts

3
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.html
View File

@ -74,8 +74,7 @@
</div>
<ng-template #searchNotEmpty>
<span>
{{ translate.get('entity.no-alias-matching',
{alias: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
{{ 'entity.no-alias-matching' | translate : {alias: (searchText | truncate: true: 6: &apos;...&apos;)} }}
</span>
</ng-template>
<span>

53
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/alias/entity-alias-select.component.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License.
///
import { Component, ElementRef, forwardRef, Input, OnInit, SkipSelf, ViewChild } from '@angular/core';
import { Component, DestroyRef, ElementRef, forwardRef, Input, OnInit, SkipSelf, ViewChild } from '@angular/core';
import {
ControlValueAccessor,
FormBuilder,
@ -26,18 +26,17 @@ import {
} from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, mergeMap, share, tap } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
import { EntityType } from '@shared/models/entity-type.models';
import { EntityService } from '@core/http/entity.service';
import { coerceBoolean } from '@shared/decorators/coercion';
import { EntityAlias } from '@shared/models/alias.models';
import { IAliasController } from '@core/api/widget-api.models';
import { TruncatePipe } from '@shared/pipe/truncate.pipe';
import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
import { MatAutocomplete } from '@angular/material/autocomplete';
import { EntityAliasSelectCallbacks } from './entity-alias-select.component.models';
import { ENTER } from '@angular/cdk/keycodes';
import { ErrorStateMatcher } from '@angular/material/core';
import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({
selector: 'tb-entity-alias-select',
@ -47,11 +46,7 @@ import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => EntityAliasSelectComponent),
multi: true
}/*,
{
provide: ErrorStateMatcher,
useExisting: EntityAliasSelectComponent
}*/]
}]
})
export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit, ErrorStateMatcher {
@ -72,7 +67,6 @@ export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit,
showLabel: boolean;
@ViewChild('entityAliasAutocomplete') entityAliasAutocomplete: MatAutocomplete;
@ViewChild('autocomplete', { read: MatAutocompleteTrigger }) autoCompleteTrigger: MatAutocompleteTrigger;
@Input()
@coerceBoolean()
@ -93,21 +87,18 @@ export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit,
@ViewChild('entityAliasInput', {static: true}) entityAliasInput: ElementRef;
entityAliasList: Array<EntityAlias> = [];
filteredEntityAliases: Observable<Array<EntityAlias>>;
searchText = '';
private dirty = false;
private entityAliasList: Array<EntityAlias> = [];
private propagateChange = (_v: any) => { };
constructor(@SkipSelf() private errorStateMatcher: ErrorStateMatcher,
private entityService: EntityService,
public translate: TranslateService,
public truncate: TruncatePipe,
private fb: FormBuilder) {
private fb: FormBuilder,
private destroyRef: DestroyRef) {
this.selectEntityAliasFormGroup = this.fb.group({
entityAlias: [null]
});
@ -121,15 +112,7 @@ export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit,
}
ngOnInit() {
const entityAliases = this.aliasController.getEntityAliases();
for (const aliasId of Object.keys(entityAliases)) {
if (this.allowedEntityTypes && this.allowedEntityTypes.length) {
if (!this.entityService.filterAliasByEntityTypes(entityAliases[aliasId], this.allowedEntityTypes)) {
continue;
}
}
this.entityAliasList.push(entityAliases[aliasId]);
}
this.loadEntityAliases();
this.filteredEntityAliases = this.selectEntityAliasFormGroup.get('entityAlias').valueChanges
.pipe(
@ -149,6 +132,12 @@ export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit,
mergeMap(name => this.fetchEntityAliases(name) ),
share()
);
this.aliasController.entityAliasesChanged.pipe(
takeUntilDestroyed(this.destroyRef),
).subscribe(() => {
this.loadEntityAliases();
});
}
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
@ -271,4 +260,18 @@ export class EntityAliasSelectComponent implements ControlValueAccessor, OnInit,
);
}
}
private loadEntityAliases(): void {
this.entityAliasList = [];
const entityAliases = this.aliasController.getEntityAliases();
for (const aliasId of Object.keys(entityAliases)) {
if (this.allowedEntityTypes?.length) {
if (!this.entityService.filterAliasByEntityTypes(entityAliases[aliasId], this.allowedEntityTypes)) {
continue;
}
}
this.entityAliasList.push(entityAliases[aliasId]);
}
this.dirty = true;
}
}

3
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.html
View File

@ -66,8 +66,7 @@
</div>
<ng-template #searchNotEmpty>
<span>
{{ translate.get('filter.no-filter-matching',
{filter: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
{{ 'filter.no-filter-matching' | translate : {filter: (searchText | truncate: true: 6: &apos;...&apos;)} }}
</span>
</ng-template>
<span>

77
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/filter/filter-select.component.ts
View File

@ -14,31 +14,27 @@
/// limitations under the License.
///
import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnInit, SkipSelf, ViewChild } from '@angular/core';
import { Component, DestroyRef, ElementRef, forwardRef, Input, OnInit, SkipSelf, ViewChild } from '@angular/core';
import {
ControlValueAccessor,
UntypedFormBuilder,
UntypedFormControl,
UntypedFormGroup,
FormGroupDirective,
NG_VALUE_ACCESSOR,
NgForm
NgForm,
UntypedFormBuilder,
UntypedFormControl,
UntypedFormGroup
} from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, mergeMap, share, 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 { IAliasController } from '@core/api/widget-api.models';
import { TruncatePipe } from '@shared/pipe/truncate.pipe';
import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
import { MatAutocomplete } from '@angular/material/autocomplete';
import { ENTER } from '@angular/cdk/keycodes';
import { ErrorStateMatcher } from '@angular/material/core';
import { FilterSelectCallbacks } from './filter-select.component.models';
import { Filter } from '@shared/models/query/query.models';
import { coerceBoolean } from '@shared/decorators/coercion';
import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({
selector: 'tb-filter-select',
@ -54,7 +50,7 @@ import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-
useExisting: FilterSelectComponent
}]
})
export class FilterSelectComponent implements ControlValueAccessor, OnInit, AfterViewInit, ErrorStateMatcher {
export class FilterSelectComponent implements ControlValueAccessor, OnInit, ErrorStateMatcher {
selectFilterFormGroup: UntypedFormGroup;
@ -81,40 +77,27 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
subscriptSizing: SubscriptSizing = 'fixed';
@ViewChild('filterAutocomplete') filterAutocomplete: MatAutocomplete;
@ViewChild('autocomplete', { read: MatAutocompleteTrigger }) autoCompleteTrigger: MatAutocompleteTrigger;
private requiredValue: boolean;
get tbRequired(): boolean {
return this.requiredValue;
}
@Input()
set tbRequired(value: boolean) {
this.requiredValue = coerceBooleanProperty(value);
}
@coerceBoolean()
tbRequired: boolean;
@Input()
disabled: boolean;
@ViewChild('filterInput', {static: true}) filterInput: ElementRef;
filterList: Array<Filter> = [];
filteredFilters: Observable<Array<Filter>>;
searchText = '';
private dirty = false;
private filterList: Array<Filter> = [];
private propagateChange = (_v: any) => { };
private creatingFilter = false;
private propagateChange = (v: any) => { };
constructor(private store: Store<AppState>,
@SkipSelf() private errorStateMatcher: ErrorStateMatcher,
public translate: TranslateService,
public truncate: TruncatePipe,
private fb: UntypedFormBuilder) {
constructor(@SkipSelf() private errorStateMatcher: ErrorStateMatcher,
private fb: UntypedFormBuilder,
private destroyRef: DestroyRef) {
this.selectFilterFormGroup = this.fb.group({
filter: [null]
});
@ -124,19 +107,16 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
this.propagateChange = fn;
}
registerOnTouched(fn: any): void {
registerOnTouched(_fn: any): void {
}
ngOnInit() {
const filters = this.aliasController.getFilters();
for (const filterId of Object.keys(filters)) {
this.filterList.push(filters[filterId]);
}
this.loadFilters();
this.filteredFilters = this.selectFilterFormGroup.get('filter').valueChanges
.pipe(
tap(value => {
let modelValue;
let modelValue: Filter;
if (typeof value === 'string' || !value) {
modelValue = null;
} else {
@ -151,6 +131,12 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
mergeMap(name => this.fetchFilters(name) ),
share()
);
this.aliasController.filtersChanged.pipe(
takeUntilDestroyed(this.destroyRef),
).subscribe(() => {
this.loadFilters();
});
}
isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
@ -159,8 +145,6 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
return originalErrorState || customErrorState;
}
ngAfterViewInit(): void {}
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
if (this.disabled) {
@ -227,7 +211,7 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
}
textIsNotEmpty(text: string): boolean {
return (text && text != null && text.length > 0) ? true : false;
return text?.length > 0;
}
filterEnter($event: KeyboardEvent) {
@ -242,7 +226,6 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
createFilter($event: Event, filter: string, focusOnCancel = true) {
$event.preventDefault();
$event.stopPropagation();
this.creatingFilter = true;
if (this.callbacks && this.callbacks.createFilter) {
this.callbacks.createFilter(filter).subscribe((newFilter) => {
if (!newFilter) {
@ -253,7 +236,6 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
}, 0);
}
} else {
this.filterList.push(newFilter);
this.modelValue = newFilter.id;
this.selectFilterFormGroup.get('filter').patchValue(newFilter, {emitEvent: true});
this.propagateChange(this.modelValue);
@ -262,4 +244,13 @@ export class FilterSelectComponent implements ControlValueAccessor, OnInit, Afte
);
}
}
private loadFilters(): void {
this.filterList = [];
const filters = this.aliasController.getFilters();
for (const filterId of Object.keys(filters)) {
this.filterList.push(filters[filterId]);
}
this.dirty = true;
}
}

Write Preview
Loading…
Cancel
Save