highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-03-26 17:51:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Block transactions list now use pagination instead of infinite scroll.

Browse Source
This commit is contained in:
softsimon 2020-05-30 21:18:53 +07:00
parent 5e5f048071
commit da4ce0855c
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
3 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/app.constants.ts
View File

@ -33,3 +33,5 @@ export const mempoolFeeColors = [
export const feeLevels = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200,
250, 300, 350, 400, 500, 600, 700, 800, 900, 1000, 1200, 1400, 1600, 1800, 2000];
export const ELCTRS_ITEMS_PER_PAGE = 25;

20
frontend/src/app/components/block/block.component.html
View File

@ -76,12 +76,16 @@
<br>
<h2><ng-template [ngIf]="transactions?.length">{{ (transactions?.length | number) || '?' }} of </ng-template>{{ block.tx_count | number }} transactions</h2>
<h2 class="float-left">{{ block.tx_count | number }} transactions</h2>
<app-transactions-list [transactions]="transactions" (loadMore)="loadMore()"></app-transactions-list>
<ngb-pagination class="float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
<div class="text-center">
<ng-template [ngIf]="isLoadingTransactions">
<div class="clearfix"></div>
<app-transactions-list [transactions]="transactions"></app-transactions-list>
<ng-template [ngIf]="isLoadingTransactions">
<div class="text-center mb-4">
<div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
<span class="skeleton-loader"></span>
@ -94,12 +98,15 @@
</div>
<div class="col-sm">
<span class="skeleton-loader"></span>
<span class="skeleton-loader"></span>
</div>
</div>
</div>
</ng-template>
</div>
</div>
</ng-template>
<ngb-pagination class="float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
</ng-template>
@ -158,3 +165,4 @@
</div>
<br>
<br>

23
frontend/src/app/components/block/block.component.ts
View File

@ -7,6 +7,7 @@ import { Block, Transaction, Vout } from '../../interfaces/electrs.interface';
import { of } from 'rxjs';
import { StateService } from '../../services/state.service';
import { SeoService } from 'src/app/services/seo.service';
import { ELCTRS_ITEMS_PER_PAGE } from 'src/app/app.constants';
@Component({
selector: 'app-block',
@ -25,6 +26,9 @@ export class BlockComponent implements OnInit, OnDestroy {
error: any;
blockSubsidy: number;
fees: number;
paginationMaxSize: number;
page = 1;
itemsPerPage = ELCTRS_ITEMS_PER_PAGE;
constructor(
private route: ActivatedRoute,
@ -36,11 +40,14 @@ export class BlockComponent implements OnInit, OnDestroy {
) { }
ngOnInit() {
this.paginationMaxSize = window.matchMedia('(max-width: 700px)').matches ? 3 : 5;
this.route.paramMap
.pipe(
switchMap((params: ParamMap) => {
const blockHash: string = params.get('id') || '';
this.block = undefined;
this.page = 1;
let isBlockHeight = false;
this.error = undefined;
this.fees = undefined;
@ -136,17 +143,15 @@ export class BlockComponent implements OnInit, OnDestroy {
}
}
loadMore() {
if (this.isLoadingTransactions || !this.transactions.length || this.transactions.length === this.block.tx_count) {
return;
}
pageChange(page: number) {
const start = (page - 1) * this.itemsPerPage;
this.isLoadingTransactions = true;
this.electrsApiService.getBlockTransactions$(this.block.id, this.transactions.length)
.subscribe((transactions) => {
this.transactions = this.transactions.concat(transactions);
this.transactions = null;
this.electrsApiService.getBlockTransactions$(this.block.id, start)
.subscribe((transactions) => {
this.transactions = transactions;
this.isLoadingTransactions = false;
});
}
}