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

Enhancement: "Load more" is now "Load all"

Browse Source 
fixes #117
This commit is contained in:
softsimon 2020-09-29 15:05:52 +07:00
parent dfaa73803e
commit 0f72030d5e
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
2 changed files with 9 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/app/components/transactions-list/transactions-list.component.html
View File

@ -17,7 +17,7 @@
<div class="col"> <div class="col">
<table class="table table-borderless smaller-text table-xs" style="margin: 0;"> <table class="table table-borderless smaller-text table-xs" style="margin: 0;">
<tbody> <tbody>
<tr *ngFor="let vin of getFilteredTxVin(tx); trackBy: trackByIndexFn"> <tr *ngFor="let vin of (tx['@vinLimit'] ? tx.vin.slice(0, 10) : tx.vin); trackBy: trackByIndexFn">
<td class="arrow-td"> <td class="arrow-td">
<ng-template [ngIf]="vin.prevout === null && !vin.is_pegin" [ngIfElse]="hasPrevout"> <ng-template [ngIf]="vin.prevout === null && !vin.is_pegin" [ngIfElse]="hasPrevout">
<i class="arrow grey"></i> <i class="arrow grey"></i>
@ -61,9 +61,9 @@
</ng-template> </ng-template>
</td> </td>
</tr> </tr>
<tr *ngIf="tx.vin.length > tx['@vinLength']"> <tr *ngIf="tx.vin.length > 10 && tx['@vinLimit']">
<td colspan="3" class="text-center"> <td colspan="3" class="text-center">
<button class="btn btn-sm btn-primary mt-2" (click)="loadMoreVin(tx)">Load more ({{ tx.vin.length - tx['@vinLength'] }})</button> <button class="btn btn-sm btn-primary mt-2" (click)="tx['@vinLimit'] = false;">Load all ({{ tx.vin.length - 10 }})</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -73,7 +73,7 @@
<div class="col mobile-bottomcol"> <div class="col mobile-bottomcol">
<table class="table table-borderless smaller-text table-xs" style="margin: 0;"> <table class="table table-borderless smaller-text table-xs" style="margin: 0;">
<tbody> <tbody>
<tr *ngFor="let vout of getFilteredTxVout(tx); let vindex = index; trackBy: trackByIndexFn"> <tr *ngFor="let vout of (tx['@voutLimit'] ? tx.vout.slice(0, 10) : tx.vout); let vindex = index; trackBy: trackByIndexFn">
<td> <td>
<a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}"> <a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
<span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span> <span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span>
@ -111,9 +111,9 @@
</ng-template> </ng-template>
</td> </td>
</tr> </tr>
<tr *ngIf="tx.vout.length > tx['@voutLength']"> <tr *ngIf="tx.vout.length > 10 && tx['@voutLimit']">
<td colspan="3" class="text-center"> <td colspan="3" class="text-center">
<button class="btn btn-sm btn-primary mt-2" (click)="loadMoreVout(tx)">Load more ({{ tx.vout.length - tx['@voutLength'] }})</button> <button class="btn btn-sm btn-primary mt-2" (click)="tx['@voutLimit'] = false;">Load all ({{ tx.vout.length - 10 }})</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>

24
frontend/src/app/components/transactions-list/transactions-list.component.ts
View File

@ -51,8 +51,8 @@ export class TransactionsListComponent implements OnInit, OnChanges {
} }
const observableObject = {}; const observableObject = {};
this.transactions.forEach((tx, i) => { this.transactions.forEach((tx, i) => {
tx['@voutLength'] = 10; tx['@voutLimit'] = true;
tx['@vinLength'] = 10; tx['@vinLimit'] = true;
if (this.outspends[i]) { if (this.outspends[i]) {
return; return;
} }
@ -88,28 +88,10 @@ export class TransactionsListComponent implements OnInit, OnChanges {
this.stateService.viewFiat$.next(oldvalue); this.stateService.viewFiat$.next(oldvalue);
} }
trackByFn(index: number, tx: Transaction) { trackByFn(index: number, tx: Transaction): string {
return tx.txid + tx.status.confirmed; return tx.txid + tx.status.confirmed;
} }
loadMoreVin(tx: Transaction) {
tx['@vinLength'] += 10;
this.ref.markForCheck();
}
loadMoreVout(tx: Transaction) {
tx['@voutLength'] += 10;
this.ref.markForCheck();
}
getFilteredTxVin(tx: Transaction) {
return tx.vin.slice(0, tx['@vinLength']);
}
getFilteredTxVout(tx: Transaction) {
return tx.vout.slice(0, tx['@voutLength']);
}
trackByIndexFn(index: number) { trackByIndexFn(index: number) {
return index; return index;
} }