web-ui: Add pagination to the richest addresses view

web-ui/src/app/components/richest-addresses/richest-addresses.component.html

@@ -1,36 +1,34 @@
 <div>
-  <div [hidden]="balances != null">
-    <alert>{{'message.loadingRichestAddresses' | translate}}</alert>
+  <div class="row">
+    <h2 class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-1'">{{'label.richestAddresses' | translate}}</h2>
   </div>
 
-  <div *ngIf="balances != null">
-    <div class="row">
-      <h2 class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-1'">{{'label.richestAddresses' | translate}}</h2>
-    </div>
+  <div class="row">
+    <div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10">
+      <table class="table table-condensed table-bordered table-striped table-hover">
+        <thead>
+          <tr>
+            <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.address' | translate}}</th>
+            <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.available' | translate}}</th>
+            <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.received' | translate}}</th>
+            <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.spent' | translate}}</th>
+          </tr>
+        </thead>
 
-    <div class="row">
-      <div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10">
-        <table class="table table-condensed table-bordered table-striped table-hover">
-          <thead>
-            <tr>
-              <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.address' | translate}}</th>
-              <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.available' | translate}}</th>
-              <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.received' | translate}}</th>
-              <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.spent' | translate}}</th>
-            </tr>
-          </thead>
+        <tbody>
+          <tr *ngFor="let item of asyncItems | async | paginate: { id: 'richestAddresses', itemsPerPage: pageSize, currentPage: currentPage, totalItems: total }">
+            <td>
+              <a routerLink="/addresses/{{item.address}}">{{item.address}}</a>
+            </td>
+            <td>{{item.available}} {{'label.coinName' | translate}}</td>
+            <td>{{item.received}} {{'label.coinName' | translate}}</td>
+            <td>{{item.spent}} {{'label.coinName' | translate}}</td>
+          </tr>
+        </tbody>
+      </table>
 
-          <tbody>
-            <tr *ngFor="let item of balances">
-              <td>
-                <a routerLink="/addresses/{{item.address}}">{{item.address}}</a>
-              </td>
-              <td>{{item.available}} {{'label.coinName' | translate}}</td>
-              <td>{{item.received}} {{'label.coinName' | translate}}</td>
-              <td>{{item.spent}} {{'label.coinName' | translate}}</td>
-            </tr>
-          </tbody>
-        </table>
+      <div class="has-text-centered">
+        <pagination-controls (pageChange)="getPage($event)" id="richestAddresses"></pagination-controls>
       </div>
     </div>
   </div>

web-ui/src/app/components/richest-addresses/richest-addresses.component.ts

@@ -1,10 +1,14 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/map';
+
 import { Balance } from '../../models/balance';
 
 import { BalancesService } from '../../services/balances.service';
 import { ErrorService } from '../../services/error.service';
-import { PaginatedResult } from '../../models/paginated-result';
 
 @Component({
   selector: 'app-richest-addresses',
@@ -13,31 +17,28 @@ import { PaginatedResult } from '../../models/paginated-result';
 })
 export class RichestAddressesComponent implements OnInit {
 
-  balances: Balance[];
+  // pagination
+  total = 0;
+  currentPage = 1;
+  pageSize = 10;
+  asyncItems: Observable<Balance[]>;
 
   constructor(
     private balancesService: BalancesService,
     private errorService: ErrorService) { }
 
   ngOnInit() {
-    this.balances = [];
-    this.updateBalances();
+    this.getPage(this.currentPage);
   }
 
-  private updateBalances() {
-    this.balancesService
-      .getRichest()
-      .subscribe(
-        response => this.onBalancesRetrieved(response),
-        response => this.onError(response)
-      );
-  }
-
-  private onBalancesRetrieved(response: PaginatedResult<Balance>) {
-    this.balances = response.data;
-  }
+  getPage(page: number) {
+    const offset = (page - 1) * this.pageSize;
+    const limit = this.pageSize;
 
-  private onError(response: any) {
-    this.errorService.renderServerErrors(null, response);
+    this.asyncItems = this.balancesService
+      .getRichest(offset, limit)
+      .do(response => this.total = response.total)
+      .do(response => this.currentPage = 1 + (response.offset / this.pageSize))
+      .map(response => response.data);
   }
 }