Add URL pagination and keyboard navigation to Liquid pegs list

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 { ActivatedRoute, Router } from '@angular/router';
-import { BehaviorSubject, Observable, Subject, combineLatest, of, timer } from 'rxjs';
+import { Component, OnInit, ChangeDetectionStrategy, Input, Inject, LOCALE_ID, ChangeDetectorRef } from '@angular/core';
-import { delayWhen, filter, map, share, shareReplay, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators';
+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;
   }