diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts index d8c60113f..d19bf8390 100644 --- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts +++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.ts @@ -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; pegsCount$: Observable; + pegsCount: number; startingIndexSubject: BehaviorSubject = 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; }