web-ui: Update the finder to allow searching for several values

Now you can find transactions, blocks or addresses.

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

@@ -40,11 +40,15 @@ export class AppComponent {
       'message.addressNotFound': 'Address not found',
       'message.blockNotFound': 'Block not found',
 
+      // error messages
+      'error.nothingFound': 'That doesn\'t seem to be a valid address, nor valid block, neither a valid transaction',
+
       // actions
       'action.find': 'Find',
 
       // labels
       'label.coinName': 'XSN',
+      'label.searchField': 'Transaction id or Blockhash or Address',
       'label.transactionId': 'Transaction Id',
       'label.confirmations': 'Confirmations',
       'label.blockhash': 'Block Hash',

web-ui/src/app/components/finder/finder.component.html

@@ -1,17 +1,17 @@
 <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate role="form" class="form-horizontal">
 
-  <div [ngClass]="{ 'has-success': errorService.hasCorrectValue(form, 'transactionId'), 'has-error': errorService.hasWrongValue(form,
-  'transactionId') }" class="form-group" >
+  <div [ngClass]="{ 'has-success': errorService.hasCorrectValue(form, 'searchField'), 'has-error': errorService.hasWrongValue(form,
+  'searchField') }" class="form-group" >
 
     <div class="col-xs-10 col-sm-10 col-md-offset-3 col-md-6 col-lg-offset-3 col-lg-6">
-      <input maxlength="64" formControlName="transactionId" type="text" id="transactionId" class="form-control" placeholder="{{ 'label.transactionId' | translate }}">
+      <input maxlength="64" formControlName="searchField" type="text" id="searchField" class="form-control" placeholder="{{ 'label.searchField' | translate }}">
     </div>
     
     <div class="text-left col-sm-offset-2">
       <input type="submit" [disabled]="!form.valid" value="{{ 'action.find' | translate }}" class="btn btn-primary">
     </div>
-    <div [hidden]="!errorService.hasWrongValue(form, 'transactionId')" class="col-xs-10 col-sm-10 col-md-offset-3 col-md-6 col-lg-offset-3 col-lg-6">
-      <span class="help-block">{{ errorService.getFieldError(form, 'transactionId') | translate }}</span>
+    <div [hidden]="!errorService.hasWrongValue(form, 'searchField')" class="col-xs-10 col-sm-10 col-md-offset-3 col-md-6 col-lg-offset-3 col-lg-6">
+      <span class="help-block">{{ errorService.getFieldError(form, 'searchField') | translate }}</span>
     </div>
   </div>
 </form>

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

@@ -2,10 +2,17 @@ import { Component, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Observable } from 'rxjs/Observable';
 
+import { TranslateService } from '@ngx-translate/core';
+
 import { ErrorService } from '../../services/error.service';
 import { NavigatorService } from '../../services/navigator.service';
+import { AddressesService } from '../../services/addresses.service';
+import { BlocksService } from '../../services/blocks.service';
 import { TransactionsService } from '../../services/transactions.service';
 
+const BLOCK_REGEX = '^[A-Fa-f0-9]{64}$';
+const ADDRESS_REGEX = '^[a-zA-Z0-9]{34}$';
+
 @Component({
   selector: 'app-finder',
   templateUrl: './finder.component.html',
@@ -18,7 +25,10 @@ export class FinderComponent implements OnInit {
   constructor(
     private formBuilder: FormBuilder,
     private navigatorService: NavigatorService,
+    private addressesService: AddressesService,
+    private blocksService: BlocksService,
     private transactionsService: TransactionsService,
+    private translateService: TranslateService,
     public errorService: ErrorService) {
 
     this.createForm();
@@ -29,18 +39,40 @@ export class FinderComponent implements OnInit {
 
   private createForm() {
     this.form = this.formBuilder.group({
-      transactionId: [null, [Validators.required, Validators.pattern('^[A-Fa-f0-9]{64}$')]],
+      searchField: [null, [Validators.required, Validators.pattern(`(${ADDRESS_REGEX})|(${BLOCK_REGEX})`)]],
     });
   }
 
   onSubmit() {
-    const txid = this.form.get('transactionId').value;
+    const searchField = this.form.get('searchField').value;
+
+    if (new RegExp(ADDRESS_REGEX).test(searchField)) {
+      // address
+      this.addressesService.get(searchField)
+        .subscribe(
+          response => this.navigatorService.addressDetails(searchField),
+          response => this.errorService.renderServerErrors(this.form, response)
+        );
+    } else {
+      // block or transaction
+      this.transactionsService.get(searchField)
+        .subscribe(
+          response => this.navigatorService.transactionDetails(searchField),
+          response => this.lookForBlock(searchField)
+        );
+    }
+  }
 
-    // instead of redirecting, we check if the transaction is valid.
-    this.transactionsService.get(txid)
+  private lookForBlock(blockhash: string) {
+    this.blocksService.get(blockhash)
       .subscribe(
-        response => this.navigatorService.transactionDetails(txid),
-        response => this.errorService.renderServerErrors(this.form, response)
+        response => this.navigatorService.blockDetails(blockhash),
+        response => this.onNothingFound()
       );
   }
+
+  private onNothingFound() {
+    this.translateService.get('error.nothingFound')
+      .subscribe(msg => this.errorService.setFieldError(this.form, 'searchField', msg));
+  }
 }

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

@@ -80,7 +80,7 @@ export class ErrorService {
     return control != null;
   }
 
-  private setFieldError(form: FormGroup, fieldName: string, message: string) {
+  setFieldError(form: FormGroup, fieldName: string, message: string) {
     const control = this.findFieldControl(form, fieldName);
     const errors = { [message]: true };
     control.setErrors(errors);

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

@@ -11,6 +11,14 @@ export class NavigatorService {
     this.router.navigate([path]);
   }
 
+  addressDetails(address: string) {
+    this.go('/addresses/' + address);
+  }
+
+  blockDetails(blockhash: string) {
+    this.go('/blocks/' + blockhash);
+  }
+
   transactionDetails(txid: string) {
     this.go('/transactions/' + txid);
   }