Bisq Pagination and tx type select history. Increased transactions per page.

frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { BisqApiService } from '../bisq-api.service';
 import { switchMap, map } from 'rxjs/operators';
-import { Subject, Observable, of, merge } from 'rxjs';
+import { Observable } from 'rxjs';
 import { BisqBlock, BisqOutput, BisqTransaction } from '../bisq.interfaces';
 import { SeoService } from 'src/app/services/seo.service';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -29,6 +29,7 @@ export class BisqBlocksComponent implements OnInit {
     private seoService: SeoService,
     private route: ActivatedRoute,
     private router: Router,
+    private cd: ChangeDetectorRef,
   ) { }
 
   ngOnInit(): void {
@@ -44,8 +45,10 @@ export class BisqBlocksComponent implements OnInit {
       .pipe(
         map((queryParams) => {
           if (queryParams.page) {
-            this.page = parseInt(queryParams.page, 10);
+            const newPage = parseInt(queryParams.page, 10);
-            return parseInt(queryParams.page, 10);
+            this.page = newPage;
+            this.cd.markForCheck();
+            return newPage;
           }
           return 1;
         }),
@@ -67,7 +70,6 @@ export class BisqBlocksComponent implements OnInit {
   pageChange(page: number) {
     this.router.navigate([], {
       queryParams: { page: page },
-      replaceUrl: true,
       queryParamsHandling: 'merge',
     });
   }

frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html

@@ -22,7 +22,7 @@
       <th class="d-none d-md-block">Height</th>
     </thead>
     <tbody *ngIf="transactions.value; else loadingTmpl">
-      <tr *ngFor="let tx of transactions.value[0]; trackBy: trackByFn">
+      <tr *ngFor="let tx of transactions.value[0]">
         <td><a [routerLink]="['/tx/' | relativeUrl, tx.id]" [state]="{ data: tx }">{{ tx.id | slice : 0 : 8 }}</a></td>
         <td class="d-none d-md-block">
           <app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon>

frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { BisqTransaction, BisqOutput } from '../bisq.interfaces';
-import { merge, Observable } from 'rxjs';
+
-import { switchMap, map } from 'rxjs/operators';
+import { merge, Observable, Subject } from 'rxjs';
+import { switchMap, map, tap, filter } from 'rxjs/operators';
 import { BisqApiService } from '../bisq-api.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { FormGroup, FormBuilder } from '@angular/forms';
@@ -17,13 +18,13 @@ import { IMultiSelectOption, IMultiSelectSettings, IMultiSelectTexts } from 'ngx
 export class BisqTransactionsComponent implements OnInit {
   transactions$: Observable<[BisqTransaction[], number]>;
   page = 1;
-  itemsPerPage: number;
+  itemsPerPage = 50;
-  contentSpace = window.innerHeight - (165 + 75);
   fiveItemsPxSize = 250;
   isLoading = true;
   loadingItems: number[];
   radioGroupForm: FormGroup;
   types: string[] = [];
+  pageSubject$ = new Subject<any>();
 
   txTypeOptions: IMultiSelectOption[] = [
       { id: 1, name: 'Asset listing fee' },
@@ -66,6 +67,7 @@ export class BisqTransactionsComponent implements OnInit {
     private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
+    private cd: ChangeDetectorRef,
   ) { }
 
   ngOnInit(): void {
@@ -75,7 +77,6 @@ export class BisqTransactionsComponent implements OnInit {
       txTypes: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]],
     });
 
-    this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10);
     this.loadingItems = Array(this.itemsPerPage);
 
     if (document.body.clientWidth < 768) {
@@ -83,41 +84,84 @@ export class BisqTransactionsComponent implements OnInit {
       this.paginationMaxSize = 3;
     }
 
+    this.route.queryParams.subscribe(() => console.log('changed'));
+
     this.transactions$ = merge(
       this.route.queryParams
         .pipe(
-          map((queryParams) => {
+          filter((queryParams) => {
-            if (queryParams.page) {
+            const newPage = parseInt(queryParams.page, 10);
-              this.page = parseInt(queryParams.page, 10);
+            const types = queryParams.types;
-              return parseInt(queryParams.page, 10);
+            if (newPage !== this.page || types !== this.types.map((type) => this.txTypes.indexOf(type) + 1).join(',')) {
+              return true;
+            }
+            return false;
+          }),
+          tap((queryParams) => {
+            if (queryParams.page) {
+              const newPage = parseInt(queryParams.page, 10);
+              this.page = newPage;
+              this.cd.markForCheck();
+            }
+            if (queryParams.types) {
+              const types = queryParams.types.split(',').map((str: string) => parseInt(str, 10));
+              this.types = types.map((id: number) => this.txTypes[id - 1]);
+              this.radioGroupForm.get('txTypes').setValue(types, { emitEvent: false });
             }
-            return 1;
           })
         ),
       this.radioGroupForm.valueChanges
         .pipe(
-          map((data) => {
+          tap((data) => {
             this.types = data.txTypes.map((id: number) => this.txTypes[id - 1]);
             if (this.types.length === this.txTypes.length) {
               this.types = [];
             }
-            if (this.page !== 1) {
+            this.page = 1;
-              this.pageChange(1);
+            this.typesChanged(data.txTypes);
-            }
+            this.cd.markForCheck();
-            return 1;
           })
-        )
+        ),
+        this.pageSubject$,
       )
       .pipe(
         switchMap(() => this.bisqApiService.listTransactions$((this.page - 1) * this.itemsPerPage, this.itemsPerPage, this.types)),
         map((response) =>  [response.body, parseInt(response.headers.get('x-total-count'), 10)])
       );
+
+    this.radioGroupForm.valueChanges
+      .subscribe((data) => {
+        const types: string[] = [];
+        for (const i in data) {
+          if (data[i]) {
+            types.push(i);
+          }
+        }
+        this.types = types;
+        if (this.page !== 1) {
+          this.pageChange(1, true);
+        }
+        return 1;
+      });
   }
 
-  pageChange(page: number) {
+  pageChange(page: number, noTrigger?: boolean) {
+    this.page = page;
     this.router.navigate([], {
+      relativeTo: this.route,
       queryParams: { page: page },
-      replaceUrl: true,
+      queryParamsHandling: 'merge',
+    });
+
+    if (!noTrigger) {
+      this.pageSubject$.next();
+    }
+  }
+
+  typesChanged(types: number[]) {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { types: types.join(','), page: 1 },
       queryParamsHandling: 'merge',
     });
   }
@@ -125,8 +169,4 @@ export class BisqTransactionsComponent implements OnInit {
   calculateTotalOutput(outputs: BisqOutput[]): number {
     return outputs.reduce((acc: number, output: BisqOutput) => acc + output.bsqAmount, 0);
   }
-
-  trackByFn(index: number) {
-    return index;
-  }
 }