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

Add pagination history to bisq transactions and blocks page.

Browse Source
This commit is contained in:
softsimon 2020-08-07 13:11:55 +07:00
parent 01b3407a9c
commit fea79f2ff4
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
7 changed files with 42 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html
View File

@ -27,7 +27,7 @@
<br>
<ngb-pagination [size]="paginationSize" [collectionSize]="blocks.value ? blocks.value[1] : 0" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
<ngb-pagination *ngIf="blocks.value" [size]="paginationSize" [collectionSize]="blocks.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
</ng-container>
</div>

20
frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts
View File

@ -4,6 +4,7 @@ import { switchMap, map } from 'rxjs/operators';
import { Subject, Observable, of, merge } from 'rxjs';
import { BisqBlock, BisqOutput, BisqTransaction } from '../bisq.interfaces';
import { SeoService } from 'src/app/services/seo.service';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-bisq-blocks',
@ -23,11 +24,11 @@ export class BisqBlocksComponent implements OnInit {
paginationSize: 'sm' | 'lg' = 'md';
paginationMaxSize = 10;
pageSubject$ = new Subject<number>();
constructor(
private bisqApiService: BisqApiService,
private seoService: SeoService,
private route: ActivatedRoute,
private router: Router,
) { }
ngOnInit(): void {
@ -39,8 +40,15 @@ export class BisqBlocksComponent implements OnInit {
this.paginationMaxSize = 3;
}
this.blocks$ = merge(of(1), this.pageSubject$)
this.blocks$ = this.route.queryParams
.pipe(
map((queryParams) => {
if (queryParams.page) {
this.page = parseInt(queryParams.page, 10);
return parseInt(queryParams.page, 10);
}
return 1;
}),
switchMap((page) => this.bisqApiService.listBlocks$((page - 1) * this.itemsPerPage, this.itemsPerPage)),
map((response) => [response.body, parseInt(response.headers.get('x-total-count'), 10)]),
);
@ -57,6 +65,10 @@ export class BisqBlocksComponent implements OnInit {
}
pageChange(page: number) {
this.pageSubject$.next(page);
this.router.navigate([], {
queryParams: { page: page },
replaceUrl: true,
queryParamsHandling: 'merge',
});
}
}

2
frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
View File

@ -155,7 +155,7 @@
<div class="clearfix"></div>
<div class="text-center">
Error loading transaction
Error loading Bisq transaction
<br><br>
<i>{{ error.status }}: {{ error.statusText }}</i>
</div>

2
frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html
View File

@ -94,7 +94,7 @@
<br>
<ngb-pagination [size]="paginationSize" [collectionSize]="transactions.value ? transactions.value[1] : 0" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
<ngb-pagination *ngIf="transactions.value" [size]="paginationSize" [collectionSize]="transactions.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
</ng-container>
</div>

27
frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts
View File

@ -1,10 +1,11 @@
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { BisqTransaction, BisqOutput } from '../bisq.interfaces';
import { Subject, merge, Observable, of } from 'rxjs';
import { Subject, merge, Observable } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';
import { BisqApiService } from '../bisq-api.service';
import { SeoService } from 'src/app/services/seo.service';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-bisq-transactions',
@ -20,7 +21,6 @@ export class BisqTransactionsComponent implements OnInit {
fiveItemsPxSize = 250;
isLoading = true;
loadingItems: number[];
pageSubject$ = new Subject<number>();
radioGroupForm: FormGroup;
types: string[] = [];
@ -32,6 +32,8 @@ export class BisqTransactionsComponent implements OnInit {
private bisqApiService: BisqApiService,
private seoService: SeoService,
private formBuilder: FormBuilder,
private route: ActivatedRoute,
private router: Router,
) { }
ngOnInit(): void {
@ -63,8 +65,16 @@ export class BisqTransactionsComponent implements OnInit {
}
this.transactions$ = merge(
of(1),
this.pageSubject$,
this.route.queryParams
.pipe(
map((queryParams) => {
if (queryParams.page) {
this.page = parseInt(queryParams.page, 10);
return parseInt(queryParams.page, 10);
}
return 1;
})
),
this.radioGroupForm.valueChanges
.pipe(
map((data) => {
@ -75,6 +85,9 @@ export class BisqTransactionsComponent implements OnInit {
}
}
this.types = types;
if (this.page !== 1) {
this.pageChange(1);
}
return 1;
})
)
@ -86,7 +99,11 @@ export class BisqTransactionsComponent implements OnInit {
}
pageChange(page: number) {
this.pageSubject$.next(page);
this.router.navigate([], {
queryParams: { page: page },
replaceUrl: true,
queryParamsHandling: 'merge',
});
}
calculateTotalOutput(outputs: BisqOutput[]): number {

1
frontend/src/app/bisq/bisq.routing.module.ts
View File

@ -1,7 +1,6 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from '../components/about/about.component';
import { AddressComponent } from '../components/address/address.component';
import { BisqTransactionsComponent } from './bisq-transactions/bisq-transactions.component';
import { BisqTransactionComponent } from './bisq-transaction/bisq-transaction.component';
import { BisqBlockComponent } from './bisq-block/bisq-block.component';

2
frontend/src/app/services/state.service.ts
View File

@ -53,7 +53,7 @@ export class StateService {
}
setNetworkBasedonUrl(url: string) {
switch (url.split('/')[1]) {
switch (url.split(/\/|\?|#/)[1]) {
case 'liquid':
if (this.network !== 'liquid') {
this.network = 'liquid';