machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[search bar] use afterviewinit instead of afterviewchecked

Browse Source
This commit is contained in:
nymkappa 2023-07-25 15:03:39 +09:00
parent 07b0f24cf1
commit 6d5be78dd0
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
4 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
View File

@ -1,7 +1,8 @@
import { AfterViewChecked, ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { SeoService } from '../../services/seo.service'; import { SeoService } from '../../services/seo.service';
import { WebsocketService } from '../../services/websocket.service'; import { WebsocketService } from '../../services/websocket.service';
import { StateService } from '../../services/state.service'; import { StateService } from '../../services/state.service';
import { EventType, NavigationStart, Router } from '@angular/router';
@Component({ @Component({
selector: 'app-mining-dashboard', selector: 'app-mining-dashboard',
@ -9,11 +10,12 @@ import { StateService } from '../../services/state.service';
styleUrls: ['./mining-dashboard.component.scss'], styleUrls: ['./mining-dashboard.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class MiningDashboardComponent implements OnInit, AfterViewChecked { export class MiningDashboardComponent implements OnInit, AfterViewInit {
constructor( constructor(
private seoService: SeoService, private seoService: SeoService,
private websocketService: WebsocketService, private websocketService: WebsocketService,
private stateService: StateService private stateService: StateService,
private router: Router
) { ) {
this.seoService.setTitle($localize`:@@a681a4e2011bb28157689dbaa387de0dd0aa0c11:Mining Dashboard`); this.seoService.setTitle($localize`:@@a681a4e2011bb28157689dbaa387de0dd0aa0c11:Mining Dashboard`);
} }
@ -22,7 +24,14 @@ export class MiningDashboardComponent implements OnInit, AfterViewChecked {
this.websocketService.want(['blocks', 'mempool-blocks', 'stats']); this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
} }
ngAfterViewChecked(): void { ngAfterViewInit(): void {
this.stateService.focusSearchInputDesktop(); this.stateService.focusSearchInputDesktop();
this.router.events.subscribe((e: NavigationStart) => {
if (e.type === EventType.NavigationStart) {
if (e.url.indexOf('graphs') === -1) { // The mining dashboard and the graph component are part of the same module so we can't use ngAfterViewInit in graphs.component.ts to blur the input
this.stateService.focusSearchInputDesktop();
}
}
});
} }
} }

8
frontend/src/app/components/search-form/search-form.component.ts
View File

@ -65,13 +65,15 @@ export class SearchFormComponent implements OnInit {
this.stateService.networkChanged$.subscribe((network) => this.network = network); this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.router.events.subscribe((e: NavigationStart) => { // Reset search focus when changing page this.router.events.subscribe((e: NavigationStart) => { // Reset search focus when changing page
if (e.type === EventType.NavigationStart) { if (this.searchInput && e.type === EventType.NavigationStart) {
this.searchInput.nativeElement.blur(); this.searchInput.nativeElement.blur();
} }
}); });
this.stateService.searchFocus$.subscribe(focus => { this.stateService.searchFocus$.subscribe(() => {
if (this.searchInput && focus === true) { if (!this.searchInput) { // Try again a bit later once the view is properly initialized
setTimeout(() => this.searchInput.nativeElement.focus(), 100);
} else if (this.searchInput) {
this.searchInput.nativeElement.focus(); this.searchInput.nativeElement.focus();
} }
}); });

6
frontend/src/app/dashboard/dashboard.component.ts
View File

@ -1,4 +1,4 @@
import { AfterViewChecked, ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
import { combineLatest, merge, Observable, of, Subscription } from 'rxjs'; import { combineLatest, merge, Observable, of, Subscription } from 'rxjs';
import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators'; import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators';
import { BlockExtended, OptimizedMempoolStats } from '../interfaces/node-api.interface'; import { BlockExtended, OptimizedMempoolStats } from '../interfaces/node-api.interface';
@ -31,7 +31,7 @@ interface MempoolStatsData {
styleUrls: ['./dashboard.component.scss'], styleUrls: ['./dashboard.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class DashboardComponent implements OnInit, OnDestroy, AfterViewChecked { export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
featuredAssets$: Observable<any>; featuredAssets$: Observable<any>;
network$: Observable<string>; network$: Observable<string>;
mempoolBlocksData$: Observable<MempoolBlocksData>; mempoolBlocksData$: Observable<MempoolBlocksData>;
@ -57,7 +57,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewChecked {
private seoService: SeoService private seoService: SeoService
) { } ) { }
ngAfterViewChecked(): void { ngAfterViewInit(): void {
this.stateService.focusSearchInputDesktop(); this.stateService.focusSearchInputDesktop();
} }

6
frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts
View File

@ -1,4 +1,4 @@
import { AfterViewChecked, ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { share } from 'rxjs/operators'; import { share } from 'rxjs/operators';
import { INodesRanking } from '../../interfaces/node-api.interface'; import { INodesRanking } from '../../interfaces/node-api.interface';
@ -12,7 +12,7 @@ import { LightningApiService } from '../lightning-api.service';
styleUrls: ['./lightning-dashboard.component.scss'], styleUrls: ['./lightning-dashboard.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class LightningDashboardComponent implements OnInit, AfterViewChecked { export class LightningDashboardComponent implements OnInit, AfterViewInit {
statistics$: Observable<any>; statistics$: Observable<any>;
nodesRanking$: Observable<INodesRanking>; nodesRanking$: Observable<INodesRanking>;
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE; officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
@ -30,7 +30,7 @@ export class LightningDashboardComponent implements OnInit, AfterViewChecked {
this.statistics$ = this.lightningApiService.getLatestStatistics$().pipe(share()); this.statistics$ = this.lightningApiService.getLatestStatistics$().pipe(share());
} }
ngAfterViewChecked(): void { ngAfterViewInit(): void {
this.stateService.focusSearchInputDesktop(); this.stateService.focusSearchInputDesktop();
} }
} }