web-ui: Add pagination to the richest addresses view

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

@@ -1,9 +1,4 @@
 <div>
-  <div [hidden]="balances != null">
-    <alert>{{'message.loadingRichestAddresses' | translate}}</alert>
-  </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>
@@ -21,7 +16,7 @@
         </thead>
 
         <tbody>
-            <tr *ngFor="let item of balances">
+          <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>
@@ -31,6 +26,9 @@
           </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);
   }
 }