From 0f72030d5e56164f15e109931ecf94dcc8a38a96 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Tue, 29 Sep 2020 15:05:52 +0700
Subject: [PATCH] Enhancement: "Load more" is now "Load all" fixes #117

---
 .../transactions-list.component.html          | 12 +++++-----
 .../transactions-list.component.ts            | 24 +++----------------
 2 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html
index 833eb014a..5a5fbac13 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -17,7 +17,7 @@
       <div class="col">
         <table class="table table-borderless smaller-text table-xs" style="margin: 0;">
           <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">
                 <ng-template [ngIf]="vin.prevout === null && !vin.is_pegin" [ngIfElse]="hasPrevout">
                   <i class="arrow grey"></i>
@@ -61,9 +61,9 @@
                 </ng-template>
               </td>
             </tr>
-            <tr *ngIf="tx.vin.length > tx['@vinLength']">
+            <tr *ngIf="tx.vin.length > 10 && tx['@vinLimit']">
               <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>
             </tr>
           </tbody>
@@ -73,7 +73,7 @@
       <div class="col mobile-bottomcol">
         <table class="table table-borderless smaller-text table-xs"  style="margin: 0;">
           <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>
                 <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>
@@ -111,9 +111,9 @@
                 </ng-template>
               </td>
             </tr>
-            <tr *ngIf="tx.vout.length > tx['@voutLength']">
+            <tr *ngIf="tx.vout.length > 10 && tx['@voutLimit']">
               <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>
             </tr>
           </tbody>
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.ts b/frontend/src/app/components/transactions-list/transactions-list.component.ts
index 9c1cf454b..adc33e8b4 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.ts
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts
@@ -51,8 +51,8 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     }
     const observableObject = {};
     this.transactions.forEach((tx, i) => {
-      tx['@voutLength'] = 10;
-      tx['@vinLength'] = 10;
+      tx['@voutLimit'] = true;
+      tx['@vinLimit'] = true;
       if (this.outspends[i]) {
         return;
       }
@@ -88,28 +88,10 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     this.stateService.viewFiat$.next(oldvalue);
   }
 
-  trackByFn(index: number, tx: Transaction) {
+  trackByFn(index: number, tx: Transaction): string {
     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) {
     return index;
   }