mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 14:50:52 +01:00
Code Issues Projects Releases Wiki Activity

Add URL pagination and keyboard navigation to Liquid pegs list

Browse source
This commit is contained in:
natsoni 2024-03-20 16:33:19 +09:00
parent 666165ebe9
commit 524619f48e
No known key found for this signature in database
GPG key ID: C65917583181743B
1 changed files with 45 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
import { BehaviorSubject, Observable, Subject, combineLatest, of, timer } from 'rxjs';
import { delayWhen, filter, map, share, shareReplay, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators';
import { ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit, ChangeDetectionStrategy, Input, Inject, LOCALE_ID, ChangeDetectorRef } from '@angular/core';
import { BehaviorSubject, Observable, Subject, Subscription, combineLatest, of, timer } from 'rxjs';
import { delayWhen, filter, map, share, shareReplay, switchMap, take, takeUntil, tap, throttleTime } from 'rxjs/operators';
import { ApiService } from '../../../services/api.service';
import { Env, StateService } from '../../../services/state.service';
import { AuditStatus, CurrentPegs, RecentPeg } from '../../../interfaces/node-api.interface';
@ -29,20 +30,31 @@ export class RecentPegsListComponent implements OnInit {
lastReservesBlockUpdate: number = 0;
currentPeg$: Observable<CurrentPegs>;
pegsCount$: Observable<number>;
pegsCount: number;
startingIndexSubject: BehaviorSubject<number> = new BehaviorSubject(0);
currentIndex: number = 0;
lastPegBlockUpdate: number = 0;
lastPegAmount: string = '';
isLoad: boolean = true;
queryParamSubscription: Subscription;
keyNavigationSubscription: Subscription;
dir: 'rtl' | 'ltr' = 'ltr';
private destroy$ = new Subject();
constructor(
private apiService: ApiService,
private cd: ChangeDetectorRef,
public stateService: StateService,
private websocketService: WebsocketService,
private seoService: SeoService
private seoService: SeoService,
private route: ActivatedRoute,
private router: Router,
@Inject(LOCALE_ID) private locale: string,
) {
if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
this.dir = 'rtl';
}
}
ngOnInit(): void {
@ -53,6 +65,26 @@ export class RecentPegsListComponent implements OnInit {
if (!this.widget) {
this.seoService.setTitle($localize`:@@a8b0889ea1b41888f1e247f2731cc9322198ca04:Recent Peg-In / Out's`);
this.websocketService.want(['blocks']);
this.queryParamSubscription = this.route.queryParams.pipe(
tap((params) => this.pageChange(+params['page'] || 1)),
).subscribe();
this.keyNavigationSubscription = this.stateService.keyNavigation$.subscribe((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.pageChange(this.page);
this.cd.markForCheck();
}
if (event.key === nextKey && this.page < this.pegsCount / this.pageSize) {
this.page++;
this.pageChange(this.page);
this.cd.markForCheck();
}
});
this.auditStatus$ = this.stateService.blocks$.pipe(
takeUntil(this.destroy$),
throttleTime(40000),
@ -99,7 +131,10 @@ export class RecentPegsListComponent implements OnInit {
tap(() => this.isPegCountLoading = true),
switchMap(_ => this.apiService.pegsCount$()),
map((data) => data.pegs_count),
tap(() => this.isPegCountLoading = false),
tap((pegsCount) => {
this.isPegCountLoading = false;
this.pegsCount = pegsCount;
}),
share()
);
@ -122,16 +157,19 @@ export class RecentPegsListComponent implements OnInit {
tap(() => this.isLoading = false),
share()
);
}
}
ngOnDestroy(): void {
this.destroy$.next(1);
this.destroy$.complete();
this.queryParamSubscription?.unsubscribe();
this.keyNavigationSubscription?.unsubscribe();
}
pageChange(page: number): void {
this.router.navigate([], { queryParams: { page: page } });
this.startingIndexSubject.next((page - 1) * 15);
this.page = page;
}