web-ui: improvements on address details view (#18)

transactions from the address are now retrieved separately, the address
model was chaged for the balance model, the transactions table now is
paginated and shows more info and now the view is mobile friendly

web-ui/src/app/app.component.ts

@@ -117,7 +117,8 @@ export class AppComponent {
       'label.payee': 'Payee',
       'label.active': 'Active',
       'label.details': 'Details',
-      'label.raw': 'Raw'
+      'label.raw': 'Raw',
+      'label.date': 'Date'
     };
   }
 }

web-ui/src/app/components/address-details/address-details.component.html

@@ -4,10 +4,11 @@
   </div>
   <div *ngIf="address != null">
     <div class="row">
-      <h2 class="col-xs-12 col-sm-12 col-md-12 col-lg-12">{{'label.address' | translate}}</h2>
+      <h2 class="col-xs-12">{{'label.address' | translate}}</h2>
     </div>
     <div class="row">
-      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
+      <div class="col-xs-12 col-md-4">
+        <div class="table-responsive">
           <table class="table table-condensed table-bordered table-striped table-hover">
             <thead>
               <tr>
@@ -23,7 +24,7 @@
               </tr>
               <tr>
                 <td>{{'label.balance' | translate}}</td>
-              <td>{{address.balance}} {{'label.coinName' | translate}}</td>
+                <td>{{address.available}} {{'label.coinName' | translate}}</td>
               </tr>
               <tr>
                 <td>{{'label.received' | translate}}</td>
@@ -37,25 +38,46 @@
           </table>
         </div>
       </div>
+    </div>
 
     <div class="row">
-      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
+      <h2 class="col-xs-12">{{'label.transactions' | translate}}</h2>
+    </div>
+    <div class="table-responsive">
       <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.transactions' | translate}} ({{address.transactions.length}})</th>
+            <th class="col-xs-1">#</th>
+            <th class="col-xs-2">{{'label.transaction' | translate}}</th>
+            <th class="col-xs-2">{{'label.blockhash' | translate}}</th>
+            <th class="col-xs-2">{{'label.date' | translate}}</th>
+            <th class="col-xs-3">{{'label.value' | translate}}</th>
+            <th class="col-xs-2">{{'label.size' | translate}}</th>
           </tr>
         </thead>
 
         <tbody>
-            <tr *ngFor="let item of address.transactions">
+          <tr *ngFor="let index = index; let item of asyncItems | async | paginate: { id: 'transactions', itemsPerPage: pageSize, currentPage: currentPage, totalItems: total }">
+            <td>{{(currentPage - 1) * pageSize + index + 1}}</td>
+            <td>
+              <a routerLink="/transactions/{{item.id}}">{{item.id | slice:0:15}}...</a>
+            </td>
             <td>
-                <a routerLink="/transactions/{{item}}">{{item}}</a>
+              <a routerLink="/blocks/{{item.blockhash}}">{{item.blockhash | slice:0:15}}...</a>
             </td>
+            <td>{{item.time * 1000 | date:'MMMM d, y, h:mm:ss a'}}</td>
+            <td>{{item.received >= item.sent ? '+' : ''}}{{item.received - item.sent}} {{'label.coinName' | translate}}</td>
+            <td>{{item.size}}</td>
           </tr>
         </tbody>
       </table>
     </div>
+
+    <div class="row">
+      <div class="col-xs-11 col-xs-offset-1 col-sm-5 col-sm-offset-4">
+        <pagination-controls (pageChange)="getPage($event)" id="transactions" previousLabel="" nextLabel="">
+        </pagination-controls>
+      </div>
     </div>
   </div>
 </div>

web-ui/src/app/components/address-details/address-details.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs/Observable';
 
-import { Address } from '../../models/address';
+import { Balance } from '../../models/balance';
+import { Transaction } from '../../models/transaction';
 
 import { AddressesService } from '../../services/addresses.service';
 import { ErrorService } from '../../services/error.service';
@@ -16,9 +17,15 @@ import { NavigatorService } from '../../services/navigator.service';
 })
 export class AddressDetailsComponent implements OnInit {
 
-  address: Address;
+  address: Balance;
   addressString: string;
 
+  // pagination
+  total = 0;
+  currentPage = 1;
+  pageSize = 10;
+  asyncItems: Observable<Transaction[]>;
+
   constructor(
     private route: ActivatedRoute,
     private router: Router,
@@ -32,17 +39,30 @@ export class AddressDetailsComponent implements OnInit {
       response => this.onAddressRetrieved(response),
       response => this.onError(response)
     );
+    this.getPage(this.currentPage);
   }
 
-  private onAddressRetrieved(response: Address) {
+  private onAddressRetrieved(response: Balance) {
     this.address = response;
   }
 
+  getPage(page: number) {
+    const offset = (page - 1) * this.pageSize;
+    const limit = this.pageSize;
+    const order = 'time:desc';
+
+    this.asyncItems = this.addressesService
+      .getTransactions(this.addressString, offset, limit, order)
+      .do(response => this.total = response.total)
+      .do(response => this.currentPage = 1 + (response.offset / this.pageSize))
+      .map(response => response.data);
+  }
+
   private onError(response: any) {
     this.errorService.renderServerErrors(null, response);
   }
 
-  getSent(address: Address): number {
+  getSent(address: Balance): number {
-    return address.received - address.balance;
+    return address.received - address.available;
   }
 }

web-ui/src/app/models/address.ts

@@ -1,6 +0,0 @@
-
-export class Address {
-  balance: number;
-  received: number;
-  transactions: string[];
-}

web-ui/src/app/services/addresses.service.ts

@@ -4,7 +4,9 @@ import { Observable } from 'rxjs/Observable';
 
 import { environment } from '../../environments/environment';
 
-import { Address } from '../models/address';
+import { Balance } from '../models/balance';
+import { PaginatedResult } from '../models/paginated-result';
+import { Transaction } from '../models/transaction';
 
 const httpOptions = {
   headers: new HttpHeaders({ 'Content-Type': 'application/json' })
@@ -17,8 +19,13 @@ export class AddressesService {
 
   constructor(private http: HttpClient) { }
 
-  get(address: string): Observable<Address> {
+  get(address: string): Observable<Balance> {
     const url = `${this.baseUrl}/${address}`;
-    return this.http.get<Address>(url);
+    return this.http.get<Balance>(url);
+  }
+
+  getTransactions(address: string, offset: number = 0, limit: number = 10, orderBy: string = ''): Observable<PaginatedResult<Transaction>> {
+    const url = `${this.baseUrl}/${address}/transactions?offset=${offset}&limit=${limit}&orderBy=${orderBy}`;
+    return this.http.get<PaginatedResult<Transaction>>(url);
   }
 }