Tx list - add a global filter

react/src/components/dashboard/walletsData/walletsData.js

@@ -46,6 +46,7 @@ class WalletsData extends React.Component {
     this.state = {
       basiliskActionsMenu: false,
       itemsList: [],
+      filteredItemsList: [],
       currentAddress: null,
       addressSelectorOpen: false,
       currentStackLength: 0,
@@ -53,7 +54,8 @@ class WalletsData extends React.Component {
       useCache: true,
       itemsListColumns: this.generateItemsListColumns(),
       pageSize: 20,
-      showPagination: false
+      showPagination: false,
+      searchTerm: null
     };
 
     this.toggleBasiliskActionsMenu = this.toggleBasiliskActionsMenu.bind(this);
@@ -318,8 +320,10 @@ class WalletsData extends React.Component {
       if (!this.state.itemsList ||
           (this.state.itemsList && !this.state.itemsList.length) ||
           (props.ActiveCoin.txhistory !== this.props.ActiveCoin.txhistory)) {
-        this.setState(Object.assign({}, this.state, {
-          itemsList: sortByDate(this.props.ActiveCoin.txhistory.slice(0, 30)),
+          const sortedItemsList = sortByDate(this.props.ActiveCoin.txhistory);
+          this.setState(Object.assign({}, this.state, {
+          itemsList: sortedItemsList,
+          filteredItemsList: this.filterTransactions(sortedItemsList, this.state.searchTerm),
           showPagination: this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length >= this.state.pageSize
         }));
       }
@@ -502,16 +506,47 @@ class WalletsData extends React.Component {
     }
   }
 
-  renderAddressList() {
-    if (this.props.Dashboard &&
+  shouldDisplayAddressList() {
+    return this.props.Dashboard &&
         this.props.Dashboard.activeHandle &&
-        this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]) {
+        this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin];
+  }
+
+  renderAddressList() {
+    if (this.shouldDisplayAddressList()) {
       return AddressListRender.call(this);
     } else {
       return null;
     }
   }
 
+  onSearchTermChange(newSearchTerm) {
+    this.setState(Object.assign({}, this.state, {
+      searchTerm: newSearchTerm,
+      filteredItemsList: this.filterTransactions(this.state.itemsList, newSearchTerm)
+    }));
+  }
+
+  filterTransactions(txList, searchTerm) {
+    return txList.filter(tx => this.filterTransaction(tx, searchTerm));
+  }
+
+  filterTransaction(tx, term) {
+    if (!term) {
+      return true;
+    }
+
+    return this.contains(tx.address, term)
+      || this.contains(tx.confirmations, term)
+      || this.contains(tx.amount, term)
+      || this.contains(tx.type, term)
+      || this.contains(secondsToString(tx.blocktime || tx.timestamp || tx.time), term);
+  }
+
+  contains(value, property) {
+    return (value + "").indexOf(property) !== -1;
+  }
+
   isActiveCoinMode(coinMode) {
     return this.props.ActiveCoin.mode === coinMode;
   }

react/src/components/dashboard/walletsData/walletsData.render.js

@@ -147,7 +147,7 @@ export const TxAmountRender = function (tx) {
 export const TxHistoryListRender = function() {
   return (
     <ReactTable
-      data={this.state.itemsList}
+      data={this.state.filteredItemsList}
       columns={this.state.itemsListColumns}
       sortable={true}
       className='-striped -highlight'
@@ -239,15 +239,22 @@ export const WalletsDataRender = function() {
                         null
                       }
                     </div>
-                    <h4 className="panel-title">{ translate('INDEX.TRANSACTION_HISTORY') }</h4>
+                    <h4 className='panel-title'>{ translate('INDEX.TRANSACTION_HISTORY') }</h4>
                   </header>
-                  <div className="panel-body">
-                    <div className="row">
-                      <div className="col-sm-8 padding-bottom-20">
-                        { this.renderAddressList() }
+                  <div className='panel-body'>
+                    <div className='row padding-bottom-20'>
+                      {this.shouldDisplayAddressList() &&
+                        <div className='col-sm-8'>
+                          {this.renderAddressList()}
+                        </div>
+                      }
+                      <div className='col-sm-4'>
+                        <input className="form-control"
+                               onChange={e => this.onSearchTermChange(e.target.value)}
+                               placeholder='Search' />
                       </div>
                     </div>
-                    <div className="row">
+                    <div className='row'>
                       { this.renderTxHistoryList() }
                     </div>
                   </div>

react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js

@@ -95,7 +95,7 @@ const WalletsTxInfoRender = function(txInfo) {
                           <tr>
                             <td>walletconflicts</td>
                             <td>
-                              { txInfo.walletconflicts.length }
+                              { txInfo.walletconflicts ? txInfo.walletconflicts.length : null }
                             </td>
                           </tr>
                         }