dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Improvement dashboard autocomplete - fixed double request and init component

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2022-01-20 12:15:14 +02:00
parent 8fa4dd18f3
commit 92dfa75aec
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html
View File

@ -19,6 +19,7 @@
<input matInput type="text" placeholder="{{ placeholder || ('dashboard.dashboard' | translate) }}"
#dashboardInput
formControlName="dashboard"
(focusin)="onFocus()"
[required]="required"
[matAutocomplete]="dashboardAutocomplete">
<button *ngIf="selectDashboardFormGroup.get('dashboard').value && !disabled"

24
ui-ngx/src/app/shared/components/dashboard-autocomplete.component.ts
View File

@ -19,7 +19,7 @@ import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from
import { Observable, of } from 'rxjs';
import { PageLink } from '@shared/models/page/page-link';
import { Direction } from '@shared/models/page/sort-order';
import { catchError, debounceTime, distinctUntilChanged, map, startWith, switchMap, tap } from 'rxjs/operators';
import { catchError, debounceTime, distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators';
import { emptyPageData, PageData } from '@shared/models/page/page-data';
import { DashboardInfo } from '@app/shared/models/dashboard.models';
import { DashboardService } from '@core/http/dashboard.service';
@ -43,6 +43,8 @@ import { FloatLabelType } from '@angular/material/form-field/form-field';
})
export class DashboardAutocompleteComponent implements ControlValueAccessor, OnInit, AfterViewInit {
private dirty = false;
selectDashboardFormGroup: FormGroup;
modelValue: DashboardInfo | string | null;
@ -117,10 +119,10 @@ export class DashboardAutocompleteComponent implements ControlValueAccessor, OnI
}
this.updateView(modelValue);
}),
startWith<string | DashboardInfo>(''),
map(value => value ? (typeof value === 'string' ? value : value.name) : ''),
distinctUntilChanged(),
switchMap(name => this.fetchDashboards(name) )
switchMap(name => this.fetchDashboards(name) ),
share()
);
}
@ -159,18 +161,19 @@ export class DashboardAutocompleteComponent implements ControlValueAccessor, OnI
this.dashboardService.getDashboardInfo(value).subscribe(
(dashboard) => {
this.modelValue = this.useIdValue ? dashboard.id.id : dashboard;
this.selectDashboardFormGroup.get('dashboard').patchValue(dashboard, {emitEvent: true});
this.selectDashboardFormGroup.get('dashboard').patchValue(dashboard, {emitEvent: false});
}
);
} else {
this.modelValue = this.useIdValue ? value.id.id : value;
this.selectDashboardFormGroup.get('dashboard').patchValue(value, {emitEvent: true});
this.selectDashboardFormGroup.get('dashboard').patchValue(value, {emitEvent: false});
}
} else {
this.modelValue = null;
this.selectDashboardFormGroup.get('dashboard').patchValue(null, {emitEvent: true});
this.selectDashboardFormGroup.get('dashboard').patchValue('', {emitEvent: false});
this.selectFirstDashboardIfNeeded();
}
this.dirty = true;
}
updateView(value: DashboardInfo | string | null) {
@ -224,8 +227,15 @@ export class DashboardAutocompleteComponent implements ControlValueAccessor, OnI
return dashboardsObservable;
}
onFocus() {
if (this.dirty) {
this.selectDashboardFormGroup.get('dashboard').updateValueAndValidity({onlySelf: true});
this.dirty = false;
}
}
clear() {
this.selectDashboardFormGroup.get('dashboard').patchValue(null, {emitEvent: true});
this.selectDashboardFormGroup.get('dashboard').patchValue('');
setTimeout(() => {
this.dashboardInput.nativeElement.blur();
this.dashboardInput.nativeElement.focus();