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

Merge pull request #5932 from vvlladd28/improvement/dashboard-autocomplete/double-request-and-init

Browse Source 
[3.3.3] UI: Improvement dashboard autocomplete - fixed double request and init component
This commit is contained in:
Igor Kulikov 2022-01-20 12:18:35 +02:00 committed by GitHub
commit ac8f866d1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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) }}" <input matInput type="text" placeholder="{{ placeholder || ('dashboard.dashboard' | translate) }}"
#dashboardInput #dashboardInput
formControlName="dashboard" formControlName="dashboard"
(focusin)="onFocus()"
[required]="required" [required]="required"
[matAutocomplete]="dashboardAutocomplete"> [matAutocomplete]="dashboardAutocomplete">
<button *ngIf="selectDashboardFormGroup.get('dashboard').value && !disabled" <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 { Observable, of } from 'rxjs';
import { PageLink } from '@shared/models/page/page-link'; import { PageLink } from '@shared/models/page/page-link';
import { Direction } from '@shared/models/page/sort-order'; 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 { emptyPageData, PageData } from '@shared/models/page/page-data';
import { DashboardInfo } from '@app/shared/models/dashboard.models'; import { DashboardInfo } from '@app/shared/models/dashboard.models';
import { DashboardService } from '@core/http/dashboard.service'; 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 { export class DashboardAutocompleteComponent implements ControlValueAccessor, OnInit, AfterViewInit {
private dirty = false;
selectDashboardFormGroup: FormGroup; selectDashboardFormGroup: FormGroup;
modelValue: DashboardInfo | string | null; modelValue: DashboardInfo | string | null;
@ -117,10 +119,10 @@ export class DashboardAutocompleteComponent implements ControlValueAccessor, OnI
} }
this.updateView(modelValue); this.updateView(modelValue);
}), }),
startWith<string | DashboardInfo>(''),
map(value => value ? (typeof value === 'string' ? value : value.name) : ''), map(value => value ? (typeof value === 'string' ? value : value.name) : ''),
distinctUntilChanged(), 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( this.dashboardService.getDashboardInfo(value).subscribe(
(dashboard) => { (dashboard) => {
this.modelValue = this.useIdValue ? dashboard.id.id : 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 { } else {
this.modelValue = this.useIdValue ? value.id.id : value; 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 { } else {
this.modelValue = null; this.modelValue = null;
this.selectDashboardFormGroup.get('dashboard').patchValue(null, {emitEvent: true}); this.selectDashboardFormGroup.get('dashboard').patchValue('', {emitEvent: false});
this.selectFirstDashboardIfNeeded(); this.selectFirstDashboardIfNeeded();
} }
this.dirty = true;
} }
updateView(value: DashboardInfo | string | null) { updateView(value: DashboardInfo | string | null) {
@ -224,8 +227,15 @@ export class DashboardAutocompleteComponent implements ControlValueAccessor, OnI
return dashboardsObservable; return dashboardsObservable;
} }
onFocus() {
if (this.dirty) {
this.selectDashboardFormGroup.get('dashboard').updateValueAndValidity({onlySelf: true});
this.dirty = false;
}
}
clear() { clear() {
this.selectDashboardFormGroup.get('dashboard').patchValue(null, {emitEvent: true}); this.selectDashboardFormGroup.get('dashboard').patchValue('');
setTimeout(() => { setTimeout(() => {
this.dashboardInput.nativeElement.blur(); this.dashboardInput.nativeElement.blur();
this.dashboardInput.nativeElement.focus(); this.dashboardInput.nativeElement.focus();