web-ui: Improve the block details component (#25)

- A message is displayed when the transaction list is not available.
- The transaction list is loaded after the block data.
- When the paginated transactions aren't available, the transaction
  list from the block data is displayed.

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

@@ -48,6 +48,7 @@ export class AppComponent {
       'message.masternodeNotFound': 'Masternode not found',
       'message.loadingLatestBlocks': 'Loading latest blocks...',
       'message.loadingRichestAddresses': 'Loading richest addresses...',
+      'message.transactionsNotAvailable': 'The transactions are not available, please try again in some minutes',
 
       // error messages
       'error.nothingFound': 'That doesn\'t seem to be a valid address, nor valid block, neither a valid transaction or ip address',

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

@@ -252,7 +252,13 @@ <h2 class="col-xs-12">{{'label.block' | translate}} #{{blockDetails.block.height
       </div>
 
       <!-- transactions -->
-      <div class="col-xs-12 col-md-offset-2 col-md-8">
+      <!-- still no transactions -->
+      <div *ngIf="transactions == null" class="col-xs-12 col-md-offset-2 col-md-8">
+        <alert>{{'message.transactionsNotAvailable' | translate}}</alert>
+      </div>
+
+      <!-- paginated transactions -->
+      <div *ngIf="transactions != null && transactions.length != 0" class="col-xs-12 col-md-offset-2 col-md-8">
         <div class="table-responsive">
           <table class="table table-condensed table-bordered table-striped table-hover">
             <thead>
@@ -266,7 +272,7 @@ <h2 class="col-xs-12">{{'label.block' | translate}} #{{blockDetails.block.height
             </thead>
 
             <tbody>
-              <tr *ngFor="let index = index; let item of asyncItems | async | paginate: { id: 'transactions', itemsPerPage: pageSize, currentPage: currentPage, totalItems: total }">
+              <tr *ngFor="let index = index; let item of transactions | 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:35}}...</a>
@@ -281,11 +287,34 @@ <h2 class="col-xs-12">{{'label.block' | translate}} #{{blockDetails.block.height
 
         <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 (pageChange)="loadPage($event)" id="transactions" previousLabel="" nextLabel="">
             </pagination-controls>
           </div>
         </div>
       </div>
+
+      <!-- transaction list only -->
+      <div *ngIf="transactions != null && transactions.length == 0" class="col-xs-12 col-md-offset-2 col-md-8">
+        <div class="table-responsive">
+          <table class="table table-condensed table-bordered table-striped table-hover">
+            <thead>
+              <tr>
+                <th class="col-xs-1">#</th>
+                <th class="col-xs-4">{{'label.transaction' | translate}}</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr *ngFor="let index = index; let item of blockDetails.block.transactions">
+                <td>{{index + 1}}</td>
+                <td>
+                  <a routerLink="/transactions/{{item}}">{{item | slice:0:35}}...</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
     </div>
   </div>
 </div>

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

@@ -1,14 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-
-import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute } from '@angular/router';
 
 import { BlockDetails } from '../../models/block';
 import { Transaction } from '../../models/transaction';
 
 import { BlocksService } from '../../services/blocks.service';
 import { ErrorService } from '../../services/error.service';
-import { NavigatorService } from '../../services/navigator.service';
+import { PaginatedResult } from '../../models/paginated-result';
 
 @Component({
   selector: 'app-block-details',
@@ -24,27 +22,23 @@ export class BlockDetailsComponent implements OnInit {
   total = 0;
   currentPage = 1;
   pageSize = 10;
-  asyncItems: Observable<Transaction[]>;
+  transactions: Transaction[] = null;
 
   constructor(
     private route: ActivatedRoute,
-    private router: Router,
-    private navigatorService: NavigatorService,
     private blocksService: BlocksService,
     private errorService: ErrorService) { }
 
   ngOnInit() {
-    this.route.params.forEach(params => this.onBlockhash(params['query']));
+    this.route.params.forEach(params => this.onQuery(params['query']));
   }
 
-  private onBlockhash(blockhash: string) {
+  private onQuery(query: string) {
     this.clearCurrentValues();
-    this.blockhash = blockhash;
-    this.blocksService.get(blockhash).subscribe(
+    this.blocksService.get(query).subscribe(
       response => this.onBlockRetrieved(response),
       response => this.onError(response)
     );
-    this.getPage(this.currentPage);
   }
 
   private clearCurrentValues() {
@@ -53,23 +47,29 @@ export class BlockDetailsComponent implements OnInit {
     this.total = 0;
     this.currentPage = 1;
     this.pageSize = 10;
-    this.asyncItems = null;
+    this.transactions = null;
   }
 
   private onBlockRetrieved(response: BlockDetails) {
     this.blockDetails = response;
+    this.blockhash = response.block.hash;
+    this.loadPage(this.currentPage);
   }
 
-  getPage(page: number) {
+  loadPage(page: number) {
     const offset = (page - 1) * this.pageSize;
     const limit = this.pageSize;
     const order = 'time:desc';
 
-    this.asyncItems = this.blocksService
+    this.blocksService
       .getTransactions(this.blockhash, offset, limit, order)
-      .do(response => this.total = response.total)
-      .do(response => this.currentPage = 1 + (response.offset / this.pageSize))
-      .map(response => response.data)
+      .subscribe(response => this.onTransactionsResponse(response));
+  }
+
+  private onTransactionsResponse(response: PaginatedResult<Transaction>) {
+    this.total = response.total;
+    this.currentPage = 1 + (response.offset / this.pageSize);
+    this.transactions = response.data;
   }
 
   private onError(response: any) {