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

Merge pull request #5253 from mempool/natsoni/fix-accelerator-dashboard

Browse Source 
Fix key navigation bug in accelerator dashboard
This commit is contained in:
wiz 2024-07-02 21:43:36 +09:00 committed by GitHub
commit c4f5aa1874
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 30 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnDestroy, Inject, LOCALE_ID } from '@angular/core'; import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnDestroy, Inject, LOCALE_ID } from '@angular/core';
import { BehaviorSubject, Observable, Subscription, catchError, of, switchMap, tap, throttleTime } from 'rxjs'; import { BehaviorSubject, Observable, Subscription, catchError, filter, of, switchMap, tap, throttleTime } from 'rxjs';
import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface'; import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
import { StateService } from '../../../services/state.service'; import { StateService } from '../../../services/state.service';
import { WebsocketService } from '../../../services/websocket.service'; import { WebsocketService } from '../../../services/websocket.service';
@ -50,10 +50,6 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
if (!this.widget) { if (!this.widget) {
this.websocketService.want(['blocks']); this.websocketService.want(['blocks']);
this.seoService.setTitle($localize`:@@02573b6980a2d611b4361a2595a4447e390058cd:Accelerations`); this.seoService.setTitle($localize`:@@02573b6980a2d611b4361a2595a4447e390058cd:Accelerations`);
}
this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
this.paramSubscription = this.route.params.pipe( this.paramSubscription = this.route.params.pipe(
tap(params => { tap(params => {
@ -62,6 +58,32 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
}) })
).subscribe(); ).subscribe();
const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight';
const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft';
this.keyNavigationSubscription = this.stateService.keyNavigation$.pipe(
filter((event) => event.key === prevKey || event.key === nextKey),
tap((event) => {
if (event.key === prevKey && this.page > 1) {
this.page--;
this.isLoading = true;
this.cd.markForCheck();
}
if (event.key === nextKey && this.page * 15 < this.accelerationCount) {
this.page++;
this.isLoading = true;
this.cd.markForCheck();
}
}),
throttleTime(1000, undefined, { leading: true, trailing: true }),
).subscribe(() => {
this.pageChange(this.page);
});
}
this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
this.accelerationList$ = this.pageSubject.pipe( this.accelerationList$ = this.pageSubject.pipe(
switchMap((page) => { switchMap((page) => {
this.isLoading = true; this.isLoading = true;
@ -100,26 +122,6 @@ export class AccelerationsListComponent implements OnInit, OnDestroy {
); );
}) })
); );
this.keyNavigationSubscription = this.stateService.keyNavigation$.pipe(
tap((event) => {
const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight';
const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft';
if (event.key === prevKey && this.page > 1) {
this.page--;
this.isLoading = true;
this.cd.markForCheck();
}
if (event.key === nextKey && this.page * 15 < this.accelerationCount) {
this.page++;
this.isLoading = true;
this.cd.markForCheck();
}
}),
throttleTime(1000, undefined, { leading: true, trailing: true }),
).subscribe(() => {
this.pageChange(this.page);
});
} }
pageChange(page: number): void { pageChange(page: number): void {