lukechilds
/
EasyDEX-GUI
mirror of https://github.com/lukechilds/EasyDEX-GUI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

full mode tx history pagination

all-modes
pbca26 8 years ago
parent
e6a0fef921
commit
2e11f0618e
4 changed files with 145 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      react/src/actions/actionCreators.js
  2. 4
      react/src/components/dashboard/walletsBalance.js
  3. 169
      react/src/components/dashboard/walletsData.js
  4. 2
      react/src/components/dashboard/walletsNativeTxHistory.js

3
react/src/actions/actionCreators.js
View File

@ -852,9 +852,6 @@ export function getSyncInfo(coin) {
dispatch(getSyncInfoState(json, dispatch));
}
})
.catch(function(error) {
console.log('getSyncInfo', error);
})
}
}

4
react/src/components/dashboard/walletsBalance.js
View File

@ -3,7 +3,7 @@ import { translate } from '../../translate/translate';
class WalletsBalance extends React.Component {
render() {
if (this.props && this.props.coin && this.props.mode !== 'native' && !this.props.send && !this.props.receive) {
if (this.props && this.props.coin && this.props.mode !== 'native' && this.props.balance && !this.props.send && !this.props.receive) {
return (
<div id="wallet-widgets" data-plugin="masonry" data-edexcoin="COIN">
<div className="col-xs-12">
@ -65,7 +65,7 @@ class WalletsBalance extends React.Component {
<div className={this.props.coin.mode === 'native' ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide'} data-edexcoin="COIN" id="edexcoin_getbalance_total_interest">
<div className="widget widget-shadow" id="widgetLineareaOne">
<div className="widget-content">
<div className={this.props.progress ? 'padding-20 margin-top-20' : 'padding-20'}>
<div className="padding-20 padding-top-10">
<div className="clearfix">
<div className="pull-left padding-vertical-10">
<i className="icon fa-bullseye font-size-24 vertical-align-bottom margin-right-5"></i>{translate('INDEX.TOTAL_BALANCE')}

169
react/src/components/dashboard/walletsData.js
View File

@ -9,7 +9,11 @@ class WalletsData extends React.Component {
super(props);
this.state = {
basiliskActionsMenu: false,
itemsPerPage: 10,
activePage: 1,
itemsList: null,
};
this.updateInput = this.updateInput.bind(this);
this.toggleBasiliskActionsMenu = this.toggleBasiliskActionsMenu.bind(this);
this.basiliskRefreshAction = this.basiliskRefreshAction.bind(this);
this.basiliskConnectionAction = this.basiliskConnectionAction.bind(this);
@ -38,6 +42,102 @@ class WalletsData extends React.Component {
Store.dispatch(getDexNotaries(this.props.ActiveCoin.coin));
}
updateInput(e) {
let historyToSplit = this.props.ActiveCoin.txhistory;
historyToSplit = historyToSplit.slice(0, e.target.value);
this.setState({
[e.target.name]: e.target.value,
activePage: 1,
itemsList: historyToSplit,
});
}
componentWillReceiveProps(props) {
if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length) {
if (!this.state.itemsList || (this.state.itemsList && !this.state.itemsList.length) || (props.ActiveCoin.txhistory !== this.props.ActiveCoin.txhistory)) {
let historyToSplit = this.props.ActiveCoin.txhistory;
historyToSplit = historyToSplit.slice((this.state.activePage - 1) * this.state.itemsPerPage, this.state.activePage * this.state.itemsPerPage);
this.setState(Object.assign({}, this.state, {
itemsList: historyToSplit,
}));
}
}
}
updateCurrentPage(page) {
let historyToSplit = this.props.ActiveCoin.txhistory;
historyToSplit = historyToSplit.slice((page - 1) * this.state.itemsPerPage, page * this.state.itemsPerPage);
this.setState(Object.assign({}, this.state, {
activePage: page,
itemsList: historyToSplit,
}));
}
renderPaginationItems() {
let items = [];
for (let i=0; i <= Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage); i++) {
items.push(
<li className={this.state.activePage === i + 1 ? 'paginate_button active' : 'paginate_button'}>
<a aria-controls="kmd-tx-history-tbl" data-dt-idx="1" tabIndex="0" key={i + '-pagination'} onClick={this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null}>{i + 1}</a>
</li>
);
}
return items;
}
renderPaginationItemsPerPageSelector() {
if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length > 10) {
return (
<div className="dataTables_length" id="kmd-tx-history-tbl_length">
<label>
Show&nbsp;
<select name="itemsPerPage" aria-controls="kmd-tx-history-tbl" className="form-control input-sm" onChange={this.updateInput}>
<option value="1">10</option>
<option value="2">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>&nbsp;
entries
</label>
</div>
);
} else {
return null;
}
}
renderPagination() {
if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length > 10) {
return (
<div className="row unselectable">
<div className="col-sm-5">
<div className="dataTables_info" id="kmd-tx-history-tbl_info" role="status" aria-live="polite">Showing {((this.state.activePage - 1) * this.state.itemsPerPage) + 1} to {this.state.activePage * this.state.itemsPerPage} of {this.props.ActiveCoin.txhistory.length} entries</div>
</div>
<div className="col-sm-7">
<div className="dataTables_paginate paging_simple_numbers" id="kmd-tx-history-tbl_paginate">
<ul className="pagination">
<li className={this.state.activePage === 1 ? 'paginate_button previous disabled' : 'paginate_button previous'} id="kmd-tx-history-tbl_previous">
<a aria-controls="kmd-tx-history-tbl" data-dt-idx="0" tabIndex="0" onClick={() => this.updateCurrentPage(this.state.activePage - 1)}>Previous</a>
</li>
{this.renderPaginationItems()}
<li className={this.state.activePage === Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage) ? 'paginate_button next disabled' : 'paginate_button next'} id="kmd-tx-history-tbl_next">
<a aria-controls="kmd-tx-history-tbl" data-dt-idx="2" tabIndex="0" onClick={() => this.updateCurrentPage(this.state.activePage + 1)}>Next</a>
</li>
</ul>
</div>
</div>
</div>
);
} else {
return null;
}
}
renderTxType(category) {
if ( category === 'send' ) {
return (
@ -70,8 +170,8 @@ class WalletsData extends React.Component {
}
renderTxHistoryList() {
if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length) {
return this.props.ActiveCoin.txhistory.map((tx, index) =>
if (this.state.itemsList && this.state.itemsList.length) {
return this.state.itemsList.map((tx, index) =>
<tr key={tx.txid + tx.amount}>
<td>{this.renderTxType(tx.category)}</td>
<td>{tx.confirmations}</td>
@ -135,31 +235,46 @@ class WalletsData extends React.Component {
<h4 className="panel-title">{translate('INDEX.TRANSACTION_HISTORY')}</h4>
</header>
<div className="panel-body">
<table className="table table-hover dataTable table-striped" data-edexcoin="COIN" id="edex-tx-history-tbl" width="100%">
<thead>
<tr>
<th>{translate('INDEX.DIRECTION')}</th>
<th className="hidden-xs hidden-sm">{translate('INDEX.CONFIRMATIONS')}</th>
<th>{translate('INDEX.AMOUNT')}</th>
<th>{translate('INDEX.TIME')}</th>
<th>{translate('INDEX.DEST_ADDRESS')}</th>
<th className="hidden-xs hidden-sm">{translate('INDEX.TX_DETAIL')}</th>
</tr>
</thead>
<tbody>
{this.renderTxHistoryList()}
</tbody>
<tfoot>
<tr>
<th>{translate('INDEX.DIRECTION')}</th>
<th>{translate('INDEX.CONFIRMATIONS')}</th>
<th>{translate('INDEX.AMOUNT')}</th>
<th>{translate('INDEX.TIME')}</th>
<th>{translate('INDEX.DEST_ADDRESS')}</th>
<th className="hidden-xs hidden-sm">{translate('INDEX.TX_DETAIL')}</th>
</tr>
</tfoot>
</table>
<div className="row">
<div className="col-sm-6">
{this.renderPaginationItemsPerPageSelector()}
</div>
<div className="col-sm-6">
<div id="kmd-tx-history-tbl_filter" className="dataTables_filter">
<label>
Search: <input type="search" className="form-control input-sm" placeholder="" aria-controls="kmd-tx-history-tbl" disabled="true" />
</label>
</div>
</div>
</div>
<div className="row">
<table className="table table-hover dataTable table-striped" data-edexcoin="COIN" id="edex-tx-history-tbl" width="100%">
<thead>
<tr>
<th>{translate('INDEX.DIRECTION')}</th>
<th className="hidden-xs hidden-sm">{translate('INDEX.CONFIRMATIONS')}</th>
<th>{translate('INDEX.AMOUNT')}</th>
<th>{translate('INDEX.TIME')}</th>
<th>{translate('INDEX.DEST_ADDRESS')}</th>
<th className="hidden-xs hidden-sm">{translate('INDEX.TX_DETAIL')}</th>
</tr>
</thead>
<tbody>
{this.renderTxHistoryList()}
</tbody>
<tfoot>
<tr>
<th>{translate('INDEX.DIRECTION')}</th>
<th>{translate('INDEX.CONFIRMATIONS')}</th>
<th>{translate('INDEX.AMOUNT')}</th>
<th>{translate('INDEX.TIME')}</th>
<th>{translate('INDEX.DEST_ADDRESS')}</th>
<th className="hidden-xs hidden-sm">{translate('INDEX.TX_DETAIL')}</th>
</tr>
</tfoot>
</table>
</div>
{this.renderPagination()}
</div>
</div>
</div>

2
react/src/components/dashboard/walletsNativeTxHistory.js
View File

@ -79,7 +79,7 @@ class WalletsNativeTxHistory extends React.Component {
}
componentWillReceiveProps(props) {
if (!this.state.itemsList || (this.state.itemsList && !this.state.itemsList.length)) {
if (!this.state.itemsList || (this.state.itemsList && !this.state.itemsList.length) || (props.ActiveCoin.txhistory !== this.props.ActiveCoin.txhistory)) {
let historyToSplit = this.props.ActiveCoin.txhistory;
historyToSplit = historyToSplit.slice((this.state.activePage - 1) * this.state.itemsPerPage, this.state.activePage * this.state.itemsPerPage);

Write Preview
Loading…
Cancel
Save