diff --git a/react/src/components/dashboard/walletsData/walletsData.js b/react/src/components/dashboard/walletsData/walletsData.js index d311c4f..71c7b7e 100644 --- a/react/src/components/dashboard/walletsData/walletsData.js +++ b/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; } diff --git a/react/src/components/dashboard/walletsData/walletsData.render.js b/react/src/components/dashboard/walletsData/walletsData.render.js index 3b05f0f..cca31dd 100644 --- a/react/src/components/dashboard/walletsData/walletsData.render.js +++ b/react/src/components/dashboard/walletsData/walletsData.render.js @@ -147,7 +147,7 @@ export const TxAmountRender = function (tx) { export const TxHistoryListRender = function() { return ( -

{ translate('INDEX.TRANSACTION_HISTORY') }

+

{ translate('INDEX.TRANSACTION_HISTORY') }

-
-
-
- { this.renderAddressList() } +
+
+ {this.shouldDisplayAddressList() && +
+ {this.renderAddressList()} +
+ } +
+ this.onSearchTermChange(e.target.value)} + placeholder='Search' />
-
+
{ this.renderTxHistoryList() }
diff --git a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js index 7b9643b..955d324 100644 --- a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js +++ b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js @@ -95,7 +95,7 @@ const WalletsTxInfoRender = function(txInfo) { walletconflicts - { txInfo.walletconflicts.length } + { txInfo.walletconflicts ? txInfo.walletconflicts.length : null } }