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

"show more" instead of "show all" txos in lists

Browse Source
This commit is contained in:
Mononaut 2022-11-07 20:02:59 -06:00
parent 37bf67aa38
commit 330ab9682b
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 23 additions and 6 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

@ -20,7 +20,7 @@
<div class="col">
<table class="table table-borderless smaller-text table-sm table-tx-vin">
<tbody>
<ng-template ngFor let-vin let-vindex="index" [ngForOf]="tx['@vinLimit'] ? ((tx.vin.length > inputRowLimit) ? tx.vin.slice(0, inputRowLimit - 2) : tx.vin.slice(0, inputRowLimit)) : tx.vin" [ngForTrackBy]="trackByIndexFn">
<ng-template ngFor let-vin let-vindex="index" [ngForOf]="tx.vin.slice(0, getVinLimit(tx))" [ngForTrackBy]="trackByIndexFn">
<tr [ngClass]="{
'assetBox': (assetsMinimal && vin.prevout && assetsMinimal[vin.prevout.asset] && !vin.is_coinbase && vin.prevout.scriptpubkey_address && tx._unblinded) || inputIndex === vindex,
'highlight': vin.prevout?.scriptpubkey_address === this.address && this.address !== ''
@ -146,9 +146,9 @@
</td>
</tr>
</ng-template>
<tr *ngIf="tx.vin.length > inputRowLimit && tx['@vinLimit']">
<tr *ngIf="tx.vin.length > getVinLimit(tx)">
<td colspan="3" class="text-center">
<button class="btn btn-sm btn-primary mt-2" (click)="loadMoreInputs(tx);"><span i18n="show-all">Show all</span> ({{ tx.vin.length }})</button>
<button class="btn btn-sm btn-primary mt-2" (click)="showMoreInputs(tx)"><span i18n="show-more">Show more</span> ({{ getVinLimit(tx, true) }} / {{ tx.vin.length }})</button>
</td>
</tr>
</tbody>
@ -158,7 +158,7 @@
<div class="col mobile-bottomcol">
<table class="table table-borderless smaller-text table-sm table-tx-vout">
<tbody>
<ng-template ngFor let-vout let-vindex="index" [ngForOf]="tx['@voutLimit'] ? ((tx.vout.length > outputRowLimit) ? tx.vout.slice(0, outputRowLimit - 2) : tx.vout.slice(0, outputRowLimit)) : tx.vout" [ngForTrackBy]="trackByIndexFn">
<ng-template ngFor let-vout let-vindex="index" [ngForOf]="tx.vout.slice(0, getVoutLimit(tx))" [ngForTrackBy]="trackByIndexFn">
<tr [ngClass]="{
'assetBox': assetsMinimal && assetsMinimal[vout.asset] && vout.scriptpubkey_address && tx.vin && !tx.vin[0].is_coinbase && tx._unblinded || outputIndex === vindex,
'highlight': vout.scriptpubkey_address === this.address && this.address !== ''
@ -257,9 +257,9 @@
</td>
</tr>
</ng-template>
<tr *ngIf="tx.vout.length > outputRowLimit && tx['@voutLimit']">
<tr *ngIf="tx.vout.length > getVoutLimit(tx)">
<td colspan="3" class="text-center">
<button class="btn btn-sm btn-primary mt-2" (click)="tx['@voutLimit'] = false;"><span i18n="show-all">Show all</span> ({{ tx.vout.length }})</button>
<button class="btn btn-sm btn-primary mt-2" (click)="showMoreOutputs(tx)"><span i18n="show-more">Show more</span> ({{ getVoutLimit(tx, true) }} / {{ tx.vout.length }})</button>
</td>
</tr>
</tbody>

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

@ -18,6 +18,7 @@ import { ApiService } from '../../services/api.service';
export class TransactionsListComponent implements OnInit, OnChanges {
network = '';
nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId;
showMoreIncrement = 40;
@Input() transactions: Transaction[];
@Input() showConfirmations = false;
@ -218,6 +219,22 @@ export class TransactionsListComponent implements OnInit, OnChanges {
});
}
showMoreInputs(tx: Transaction): void {
tx['@vinLimit'] = this.getVinLimit(tx, true);
}
showMoreOutputs(tx: Transaction): void {
tx['@voutLimit'] = this.getVoutLimit(tx, true);
}
getVinLimit(tx: Transaction, next = false): number {
return Math.min(Math.max(tx['@vinLimit'] || 0, this.inputRowLimit) + (next ? this.showMoreIncrement : 0), tx.vin.length);
}
getVoutLimit(tx: Transaction, next = false): number {
return Math.min(Math.max(tx['@voutLimit'] || 0, this.outputRowLimit) + (next ? this.showMoreIncrement : 0), tx.vout.length);
}
ngOnDestroy(): void {
this.outspendsSubscription.unsubscribe();
}