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

Refactor key navigation on recent pegs table

Browse Source
This commit is contained in:
natsoni 2024-03-22 13:48:01 +09:00
parent c18779b4e3
commit adda511869
No known key found for this signature in database
GPG Key ID: C65917583181743B
2 changed files with 19 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/components/blocks-list/blocks-list.component.ts
View File

@ -26,7 +26,6 @@ export class BlocksList implements OnInit {
auditAvailable = false; auditAvailable = false;
isLoading = true; isLoading = true;
fromBlockHeight = undefined; fromBlockHeight = undefined;
lastKeyNavTime = 0;
lastBlockHeightFetched = -1; lastBlockHeightFetched = -1;
paginationMaxSize: number; paginationMaxSize: number;
page = 1; page = 1;
@ -77,6 +76,7 @@ export class BlocksList implements OnInit {
this.keyNavigationSubscription = this.stateService.keyNavigation$ this.keyNavigationSubscription = this.stateService.keyNavigation$
.pipe( .pipe(
tap((event) => { tap((event) => {
this.isLoading = true;
const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight'; const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight';
const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft'; const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft';
if (event.key === prevKey && this.page > 1) { if (event.key === prevKey && this.page > 1) {
@ -184,10 +184,6 @@ export class BlocksList implements OnInit {
this.router.navigate([], { queryParams: { page: page } }); this.router.navigate([], { queryParams: { page: page } });
} }
keyNavPageChange(page: number): void {
this.pageChange(page);
}
trackByBlock(index: number, block: BlockExtended): number { trackByBlock(index: number, block: BlockExtended): number {
return block.height; return block.height;
} }

72
frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts
View File

@ -39,10 +39,6 @@ export class RecentPegsListComponent implements OnInit {
queryParamSubscription: Subscription; queryParamSubscription: Subscription;
keyNavigationSubscription: Subscription; keyNavigationSubscription: Subscription;
dir: 'rtl' | 'ltr' = 'ltr'; dir: 'rtl' | 'ltr' = 'ltr';
lastKeyNavTime = 0;
isArrowKeyPressed = false;
keydownListener: EventListener;
keyupListener: EventListener;
private destroy$ = new Subject(); private destroy$ = new Subject();
@ -59,10 +55,6 @@ export class RecentPegsListComponent implements OnInit {
if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) { if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
this.dir = 'rtl'; this.dir = 'rtl';
} }
this.keydownListener = this.onKeyDown.bind(this);
this.keyupListener = this.onKeyUp.bind(this);
window.addEventListener('keydown', this.keydownListener);
window.addEventListener('keyup', this.keyupListener);
} }
ngOnInit(): void { ngOnInit(): void {
@ -81,23 +73,24 @@ export class RecentPegsListComponent implements OnInit {
}), }),
).subscribe(); ).subscribe();
this.keyNavigationSubscription = this.stateService.keyNavigation$.subscribe((event) => { this.keyNavigationSubscription = this.stateService.keyNavigation$
const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight'; .pipe(
const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft'; tap((event) => {
if (event.key === prevKey && this.page > 1) { this.isLoading = true;
this.page--; const prevKey = this.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight';
this.page === 1 ? this.isArrowKeyPressed = false : null; const nextKey = this.dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft';
this.keyNavPageChange(this.page); if (event.key === prevKey && this.page > 1) {
this.lastKeyNavTime = Date.now(); this.page--;
this.cd.markForCheck(); this.cd.markForCheck();
} }
if (event.key === nextKey && this.page < this.pegsCount / this.pageSize) { if (event.key === nextKey && this.page < this.pegsCount / this.pageSize) {
this.page++; this.page++;
this.page >= this.pegsCount / this.pageSize ? this.isArrowKeyPressed = false : null; this.cd.markForCheck();
this.keyNavPageChange(this.page); }
this.lastKeyNavTime = Date.now(); }),
this.cd.markForCheck(); throttleTime(1000, undefined, { leading: true, trailing: true }),
} ).subscribe(() => {
this.pageChange(this.page);
}); });
this.auditStatus$ = this.stateService.blocks$.pipe( this.auditStatus$ = this.stateService.blocks$.pipe(
@ -181,39 +174,10 @@ export class RecentPegsListComponent implements OnInit {
this.destroy$.complete(); this.destroy$.complete();
this.queryParamSubscription?.unsubscribe(); this.queryParamSubscription?.unsubscribe();
this.keyNavigationSubscription?.unsubscribe(); this.keyNavigationSubscription?.unsubscribe();
window.removeEventListener('keydown', this.keydownListener);
window.removeEventListener('keyup', this.keyupListener);
} }
pageChange(page: number): void { pageChange(page: number): void {
this.router.navigate([], { queryParams: { page: page } }); this.router.navigate([], { queryParams: { page: page } });
} }
keyNavPageChange(page: number): void {
this.isLoading = true;
if (this.isArrowKeyPressed) {
timer(400).pipe(
take(1),
filter(() => Date.now() - this.lastKeyNavTime >= 400 && this.isArrowKeyPressed === false),
).subscribe(() => {
this.pageChange(page);
});
} else {
this.pageChange(page);
}
}
onKeyDown(event: KeyboardEvent) {
if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
this.isArrowKeyPressed = true;
}
}
onKeyUp(event: KeyboardEvent) {
if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
this.isArrowKeyPressed = false;
}
}
} }