web-ui: Add infinite scroll to Address screen

wiringbits · Jan 17, 2019 · 870f2c7 · 870f2c7
1 parent 28a8a25
commit 870f2c7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/web-ui/src/app/components/address-details/address-details.component.html b/web-ui/src/app/components/address-details/address-details.component.html
@@ -56,7 +56,12 @@ <h2 class="col-xs-12">{{'label.transactions' | translate}}</h2>
           </tr>
         </thead>
 
-        <tbody>
+        <tbody
+        infiniteScroll
+        [infiniteScrollDistance]="1"
+        [infiniteScrollThrottle]="300"
+        (scrolled)="load()"
+        [scrollWindow]="true">
           <tr *ngFor="let index = index; let item of items">
             <td>{{index + 1}}</td>
             <td>
@@ -72,11 +77,5 @@ <h2 class="col-xs-12">{{'label.transactions' | translate}}</h2>
         </tbody>
       </table>
     </div>
-
-    <div class="row">
-      <div class="col-xs-11 col-xs-offset-1 col-sm-5 col-sm-offset-4">
-        <button (click)="load()">{{'label.more' | translate}}</button>
-      </div>
-    </div>
   </div>
 </div>
diff --git a/web-ui/src/app/components/address-details/address-details.component.ts b/web-ui/src/app/components/address-details/address-details.component.ts
@@ -1,11 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { Balance } from '../../models/balance';
 import { AddressesService } from '../../services/addresses.service';
 import { ErrorService } from '../../services/error.service';
 import { LightWalletTransaction } from '../..//models/light-wallet-transaction';
 
+import { getNumberOfRowsForScreen } from '../../utils';
+
 @Component({
   selector: 'app-address-details',
   templateUrl: './address-details.component.html',
@@ -17,7 +19,7 @@ export class AddressDetailsComponent implements OnInit {
   addressString: string;
 
   // pagination
-  limit = 10;
+  limit = 30;
   items: LightWalletTransaction[] = [];
 
   constructor(
@@ -26,6 +28,8 @@ export class AddressDetailsComponent implements OnInit {
     private errorService: ErrorService) { }
 
   ngOnInit() {
+    const height = this.getScreenSize();
+    this.limit = getNumberOfRowsForScreen(height);
     this.addressString = this.route.snapshot.paramMap.get('address');
     this.addressesService.get(this.addressString).subscribe(
       response => this.onAddressRetrieved(response),
@@ -47,10 +51,15 @@ export class AddressDetailsComponent implements OnInit {
 
     this.addressesService
       .getTransactionsV2(this.addressString, this.limit, lastSeenTxid, order)
-      .do(response => this.items = this.items.concat(response.data))
+      .do(response => this.items.push(...response.data))
       .subscribe();
   }
 
+  @HostListener('window:resize', ['$event'])
+  private getScreenSize(_?): number {
+    return window.innerHeight;
+  }
+
   private onError(response: any) {
     this.errorService.renderServerErrors(null, response);
   }