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

native tx history pagination

all-modes
pbca26 8 years ago
parent
bf7bbdb8c2
commit
47cd8224b7
3 changed files with 153 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 176
      react/src/components/dashboard/walletsNativeTxHistory.js
  2. 7
      react/src/styles/index.scss
  3. 2
      react/src/util/time.js

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

@ -7,9 +7,16 @@ import Store from '../../store';
class WalletsNativeTxHistory extends React.Component { class WalletsNativeTxHistory extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {
itemsPerPage: 10,
activePage: 1,
itemsList: null,
};
this.updateInput = this.updateInput.bind(this);
} }
// TODO: implement sorting and pagination // TODO: implement sorting
// implement pagination past X items should call listtransactions to get new chunk of data
// z transactions // z transactions
// filter based on addr // filter based on addr
@ -17,6 +24,17 @@ class WalletsNativeTxHistory extends React.Component {
Store.dispatch(toggleDashboardTxInfoModal(display, txIndex)); Store.dispatch(toggleDashboardTxInfoModal(display, txIndex));
} }
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,
});
}
renderTxType(category) { renderTxType(category) {
if ( category === 'send' ) { if ( category === 'send' ) {
return ( return (
@ -60,9 +78,92 @@ class WalletsNativeTxHistory extends React.Component {
} }
} }
componentWillReceiveProps(props) {
if (!this.state.itemsList || (this.state.itemsList && !this.state.itemsList.length)) {
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.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="10">10</option>
<option value="25">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.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;
}
}
renderTxHistoryList() { renderTxHistoryList() {
if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length && this.props.ActiveCoin.nativeActiveSection === 'default') { if (this.state.itemsList && this.state.itemsList.length && this.props.ActiveCoin.nativeActiveSection === 'default') {
return this.props.ActiveCoin.txhistory.map((tx, index) => return this.state.itemsList.map((tx, index) =>
<tr key={tx.txid + tx.amount}> <tr key={tx.txid + tx.amount}>
<td> <td>
<span className="label label-default"> <span className="label label-default">
@ -98,33 +199,48 @@ class WalletsNativeTxHistory extends React.Component {
<h3 className="panel-title">{translate('INDEX.TRANSACTION_HISTORY')}</h3> <h3 className="panel-title">{translate('INDEX.TRANSACTION_HISTORY')}</h3>
</header> </header>
<div className="panel-body"> <div className="panel-body">
<table className="table table-hover dataTable table-striped" data-extcoin="COIN" id="kmd-tx-history-tbl" width="100%"> <div className="row">
<thead> <div className="col-sm-6">
<tr> {this.renderPaginationItemsPerPageSelector()}
<th>{translate('INDEX.TYPE')}</th> </div>
<th>{translate('INDEX.DIRECTION')}</th> <div className="col-sm-6">
<th>{translate('INDEX.CONFIRMATIONS')}</th> <div id="kmd-tx-history-tbl_filter" className="dataTables_filter">
<th>{translate('INDEX.AMOUNT')}</th> <label>
<th>{translate('INDEX.TIME')}</th> Search: <input type="search" className="form-control input-sm" placeholder="" aria-controls="kmd-tx-history-tbl" disabled="true" />
<th>{translate('INDEX.DEST_ADDRESS')}</th> </label>
<th>{translate('INDEX.TX_DETAIL')}</th> </div>
</tr> </div>
</thead> </div>
<tbody> <div className="row">
{this.renderTxHistoryList()} <table className="table table-hover dataTable table-striped" data-extcoin="COIN" id="kmd-tx-history-tbl" width="100%">
</tbody> <thead>
<tfoot> <tr>
<tr> <th>{translate('INDEX.TYPE')}</th>
<th>{translate('INDEX.TYPE')}</th> <th>{translate('INDEX.DIRECTION')}</th>
<th>{translate('INDEX.DIRECTION')}</th> <th>{translate('INDEX.CONFIRMATIONS')}</th>
<th>{translate('INDEX.CONFIRMATIONS')}</th> <th>{translate('INDEX.AMOUNT')}</th>
<th>{translate('INDEX.AMOUNT')}</th> <th>{translate('INDEX.TIME')}</th>
<th>{translate('INDEX.TIME')}</th> <th>{translate('INDEX.DEST_ADDRESS')}</th>
<th>{translate('INDEX.DEST_ADDRESS')}</th> <th>{translate('INDEX.TX_DETAIL')}</th>
<th>{translate('INDEX.TX_DETAIL')}</th> </tr>
</tr> </thead>
</tfoot> <tbody>
</table> {this.renderTxHistoryList()}
</tbody>
<tfoot>
<tr>
<th>{translate('INDEX.TYPE')}</th>
<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>{translate('INDEX.TX_DETAIL')}</th>
</tr>
</tfoot>
</table>
</div>
{this.renderPagination()}
</div> </div>
</div> </div>
</div> </div>

7
react/src/styles/index.scss
View File

@ -78,7 +78,8 @@ body {
#edexcoin_dashboardinfo a, #edexcoin_dashboardinfo a,
.nav-top-menu, .nav-top-menu,
#kmd_txid_info_mdl .nav-tabs li { #kmd_txid_info_mdl .nav-tabs li,
.pagination a {
cursor: pointer; cursor: pointer;
cursor: hand; cursor: hand;
} }
@ -88,6 +89,10 @@ body {
background-size: 100%; background-size: 100%;
} }
.unselectable {
user-select: none;
}
/*.toaster .single-toast:nth-child(0) { /*.toaster .single-toast:nth-child(0) {
bottom: 12px; bottom: 12px;
} }

2
react/src/util/time.js
View File

@ -20,7 +20,7 @@ export function secondsToString(seconds) {
hour = a.getHours() < 10 ? '0' + a.getHours() : a.getHours(), hour = a.getHours() < 10 ? '0' + a.getHours() : a.getHours(),
min = a.getMinutes() < 10 ? '0' + a.getMinutes() : a.getMinutes(), min = a.getMinutes() < 10 ? '0' + a.getMinutes() : a.getMinutes(),
sec = a.getSeconds(), sec = a.getSeconds(),
time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec; time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min; // + ':' + sec;
return time; return time;
} }
Write Preview
Loading…
Cancel
Save