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

refactored transactions history table

all-modes
pbca26 8 years ago
parent
0f180d57eb
commit
0ad219fd13
6 changed files with 153 additions and 60 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. 11
      react/src/components/dashboard/walletsData/pagination.render.js
  2. 40
      react/src/components/dashboard/walletsData/walletsData.js
  3. 69
      react/src/components/dashboard/walletsData/walletsData.render.js
  4. 2
      react/src/components/dashboard/walletsNative/walletsNative.render.js
  5. 2
      react/src/components/dashboard/walletsNav/walletsNav.render.js
  6. 89
      react/src/components/overrides.scss

11
react/src/components/dashboard/walletsData/pagination.render.js
View File

@ -2,7 +2,10 @@ import React from 'react';
import classnames from 'classnames';
const defaultButton = props =>
<button type='button' {...props} className='-btn'>
<button
type="button"
className="-btn"
{...props}>
{props.children}
</button>
@ -72,7 +75,9 @@ const PaginationRender = function() {
value={pageSize}>
{ pageSizeOptions.map((option, i) => {
return (
<option key={i} value={option}>
<option
key={i}
value={option}>
{option} {this.props.rowsText}
</option>
);
@ -85,7 +90,7 @@ const PaginationRender = function() {
<NextComponent
onClick={e => {
if (!canNext) return;
this.changePage(page + 1)
this.changePage(page + 1);
}}
disabled={!canNext}>
{this.props.nextText}

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

@ -53,8 +53,9 @@ class WalletsData extends React.Component {
totalStackLength: 0,
useCache: true,
itemsListColumns: this.generateItemsListColumns(),
defaultPageSize: 10,
pageSize: 10,
showPagination: false,
showPagination: true,
searchTerm: null,
coin: null,
txhistory: null
@ -108,6 +109,9 @@ class WalletsData extends React.Component {
columns.push({
Header: translate('INDEX.TYPE'),
Footer: translate('INDEX.TYPE'),
className: 'colum--type',
headerClassName: 'colum--type',
footerClassName: 'colum--type',
Cell: AddressTypeRender()
});
}
@ -329,7 +333,7 @@ class WalletsData extends React.Component {
indexTxHistory(txhistoryArr) {
if (txhistoryArr.length > 1) {
for (let i = 0; i < txhistoryArr.length; i++) {
this.props.ActiveCoin.txhistory[i]['index'] = i + 1;
this.props.ActiveCoin.txhistory[i].index = i + 1;
}
}
@ -338,7 +342,8 @@ class WalletsData extends React.Component {
componentWillReceiveProps(props) {
if (!this.state.currentAddress &&
this.props.ActiveCoin.activeAddress) {
this.props.ActiveCoin.activeAddress &&
this.props.ActiveCoin.mode === 'basilisk') {
this.setState(Object.assign({}, this.state, {
currentAddress: this.props.ActiveCoin.activeAddress,
}));
@ -357,7 +362,7 @@ class WalletsData extends React.Component {
itemsList: sortedItemsList,
filteredItemsList: this.filterTransactions(sortedItemsList, this.state.searchTerm),
txhistory: this.props.ActiveCoin.txhistory,
showPagination: this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length >= this.state.pageSize
showPagination: this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length >= this.state.defaultPageSize
}));
}
}
@ -392,7 +397,8 @@ class WalletsData extends React.Component {
// TODO: add basilisk first run check, display no data if second run
renderTxHistoryList() {
if (this.state.itemsList === 'loading' || this.state.itemsList.length == 0) {
if (this.state.itemsList === 'loading' ||
this.state.itemsList.length == 0) {
if (this.isFullySynced()) {
return (
<tr className="hover--none">
@ -422,7 +428,7 @@ class WalletsData extends React.Component {
onPageSizeChange(pageSize, pageIndex) {
this.setState(Object.assign({}, this.state, {
pageSize: pageSize,
showPagination: this.state.itemsList && this.state.itemsList.length >= pageSize,
showPagination: this.state.itemsList && this.state.itemsList.length >= defaultPageSize,
}))
}
@ -473,7 +479,7 @@ class WalletsData extends React.Component {
for (let i = 0; i < _addresses[type].length; i++) {
const address = _addresses[type][i].address;
let _amount = address.amount;
let _amount = _addresses[type][i].amount;
if (this.props.ActiveCoin.mode === 'basilisk') {
_amount = _cache && _cache[_coin] && _cache[_coin][address] && _cache[_coin][address].getbalance && _cache[_coin][address].getbalance.data && _cache[_coin][address].getbalance.data.balance ? _cache[_coin][address].getbalance.data.balance : 'N/A';
@ -489,8 +495,9 @@ class WalletsData extends React.Component {
}
return items;
} else if (this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]) {
} else if (this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] && this.props.ActiveCoin.mode === 'basilisk') {
const address = this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin];
return AddressItemRender.call(this, address, type, null, _coin);
}
@ -522,7 +529,13 @@ class WalletsData extends React.Component {
return _amount;
} else {
const address = _addresses.public[i].address;
let _amount = _cache && _cache[_coin] && _cache[_coin][address] && _cache[_coin][address].getbalance.data && _cache[_coin][address].getbalance.data.balance ? _cache[_coin][address].getbalance.data.balance : 'N/A';
let _amount;
if (this.props.ActiveCoin.mode === 'basilisk') {
_amount = _cache && _cache[_coin] && _cache[_coin][address] && _cache[_coin][address].getbalance.data && _cache[_coin][address].getbalance.data.balance ? _cache[_coin][address].getbalance.data.balance : 'N/A';
} else {
_amount = _addresses.public[i].amount;
}
if (_amount !== 'N/A') {
_amount = formatValue('round', _amount, -6);
@ -550,16 +563,17 @@ class WalletsData extends React.Component {
);
} else {
return (
<span>- { translate('KMD_NATIVE.SELECT_ADDRESS') } -</span>
<span>Filter by address</span>
);
}
}
shouldDisplayAddressList() {
//return true;
return this.props.Dashboard &&
if (this.props.ActiveCoin.mode === 'basilisk') {
return this.props.Dashboard &&
this.props.Dashboard.activeHandle &&
this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin];
}
}
renderAddressList() {
@ -594,7 +608,7 @@ class WalletsData extends React.Component {
}
contains(value, property) {
return (value + "").indexOf(property) !== -1;
return (value + '').indexOf(property) !== -1;
}
isActiveCoinMode(coinMode) {

69
react/src/components/dashboard/walletsData/walletsData.render.js
View File

@ -9,8 +9,6 @@ import TablePaginationRenderer from './pagination';
import { formatValue } from '../../../util/formatValue';
import Config from '../../../config';
// TODO: clean basilisk dropdown menu
export const AddressTypeRender = function() {
return (
<span>
@ -72,7 +70,7 @@ export const AddressListRender = function() {
<button
type="button"
className="btn dropdown-toggle btn-info"
title={ `-${translate('KMD_NATIVE.SELECT_ADDRESS')}-` }
title={ `${translate('KMD_NATIVE.SELECT_ADDRESS')}` }
onClick={ this.openDropMenu }>
<span className="filter-option pull-left">{ this.renderSelectorCurrentLabel() } </span>&nbsp;
<span className="bs-caret">
@ -81,9 +79,17 @@ export const AddressListRender = function() {
</button>
<div className="dropdown-menu open">
<ul className="dropdown-menu inner">
<li className="selected">
<a><span className="text"> - { translate('KMD_NATIVE.SELECT_ADDRESS') } - </span></a>
<li className="no--hover">
<a><span className="text">{ this.props.ActiveCoin.mode === 'basilisk' ? 'Filter by address' : translate('KMD_NATIVE.SELECT_ADDRESS') }</span></a>
</li>
{ this.props.ActiveCoin.mode === 'native' &&
<li className={ !this.state.currentAddress ? 'selected' : '' }>
<a onClick={ () => this.updateAddressSelection('') }>
<span className="text">All</span>
<span className="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
}
{ this.renderAddressByType('public') }
</ul>
</div>
@ -96,7 +102,7 @@ export const AddressListRender = function() {
export const TxTypeRender = function(category) {
if (category === 'send' ||
category === 'sent') {
category === 'sent') {
return (
<span className="label label-danger">
<i className="icon fa-arrow-circle-left"></i> <span>{ translate('DASHBOARD.OUT') }</span>
@ -104,10 +110,10 @@ export const TxTypeRender = function(category) {
);
}
if (category === 'receive' ||
category === 'received') {
category === 'received') {
return (
<span className="label label-success">
<i className="icon fa-arrow-circle-right"></i> <span>{ translate('DASHBOARD.IN') }</span>
<i className="icon fa-arrow-circle-right"></i> <span>{ translate('DASHBOARD.IN') } &nbsp; &nbsp;</span>
</span>
);
}
@ -134,32 +140,43 @@ export const TxTypeRender = function(category) {
}
};
export const TxAmountRender = function (tx) {
export const TxAmountRender = function(tx) {
let _amountNegative;
if ((tx.category === 'send' ||
tx.category === 'sent') ||
(tx.type === 'send' ||
tx.type === 'sent')) {
_amountNegative = -1;
} else {
_amountNegative = 1;
}
if (Config.roundValues) {
return (
<span title={ tx.amount }>{ formatValue('round', tx.amount, -6) || translate('DASHBOARD.UNKNOWN') }</span>
<span title={ tx.amount * _amountNegative }>{ formatValue('round', tx.amount, -6) * _amountNegative || translate('DASHBOARD.UNKNOWN') }</span>
);
}
return (
<span>{ tx.amount || translate('DASHBOARD.UNKNOWN') }</span>
<span>{ tx.amount * _amountNegative || translate('DASHBOARD.UNKNOWN') }</span>
);
};
export const TxHistoryListRender = function() {
return (
<ReactTable
data={this.state.filteredItemsList}
columns={this.state.itemsListColumns}
sortable={true}
data={ this.state.filteredItemsList }
columns={ this.state.itemsListColumns }
minRows="0"
sortable={ true }
className="-striped -highlight"
PaginationComponent={TablePaginationRenderer}
nextText={translate('INDEX.NEXT_PAGE')}
previousText={translate('INDEX.PREVIOUS_PAGE')}
showPaginationBottom={this.state.showPagination}
showPaginationTop={this.state.showPagination}
pageSize={this.pageSize}
onPageSizeChange={(pageSize, pageIndex) => this.onPageSizeChange(pageSize, pageIndex)} />
PaginationComponent={ TablePaginationRenderer }
nextText={ translate('INDEX.NEXT_PAGE') }
previousText={ translate('INDEX.PREVIOUS_PAGE') }
showPaginationBottom={ this.state.showPagination }
pageSize={ this.pageSize }
onPageSizeChange={ (pageSize, pageIndex) => this.onPageSizeChange(pageSize, pageIndex) } />
);
};
@ -245,16 +262,16 @@ export const WalletsDataRender = function() {
<h4 className="panel-title">{ translate('INDEX.TRANSACTION_HISTORY') }</h4>
</header>
<div className="panel-body">
<div className="row padding-bottom-20">
<div className="row padding-bottom-30 padding-top-10">
{ this.shouldDisplayAddressList() &&
<div className="col-sm-8">
{this.renderAddressList()}
<div className="col-sm-8 no-padding-left">
{ this.renderAddressList() }
</div>
}
<div className="col-sm-4">
<div className="col-sm-4 search-box">
<input
className="form-control"
onChange={e => this.onSearchTermChange(e.target.value)}
onChange={ e => this.onSearchTermChange(e.target.value) }
placeholder="Search" />
</div>
</div>

2
react/src/components/dashboard/walletsNative/walletsNative.render.js
View File

@ -14,7 +14,7 @@ const WalletsNativeRender = function() {
id="easydex-header-div"
className="background-color-white"
style={ this.getCoinStyle('transparent') }>
<ol className={ (!this.state.nativeOnly ? 'breadcrumb breadcrumb--normal' : 'breadcrumb') + (this.props.ActiveCoin.coin === 'KMD' || this.props.ActiveCoin.coin === 'JUMBLR' || this.props.ActiveCoin.coin === 'MESH' || this.props.ActiveCoin.coin === 'MVP' ? ' coin-logo-wide' : '') + (this.state.nativeOnly ? ' native-coin-logo' : '') }>
<ol className={ 'coin-logo ' + (!this.state.nativeOnly ? 'breadcrumb breadcrumb--normal' : 'breadcrumb') + (this.props.ActiveCoin.coin === 'KMD' || this.props.ActiveCoin.coin === 'JUMBLR' || this.props.ActiveCoin.coin === 'MESH' || this.props.ActiveCoin.coin === 'MVP' ? ' coin-logo-wide' : '') + (this.state.nativeOnly ? ' native-coin-logo' : '') }>
<li className="header-easydex-section">
{ this.getCoinStyle('title') &&
<img src={ this.getCoinStyle('title') } />

2
react/src/components/dashboard/walletsNav/walletsNav.render.js
View File

@ -27,7 +27,7 @@ export const WalletsNavWithWalletRender = function() {
className={ 'page-header page-header-bordered header-easydex padding-bottom-' + (this.state.nativeOnly ? '40 page-header--native' : '20') }
id="header-dashboard"
style={{ marginBottom: this.props.ActiveCoin.mode === 'basilisk' ? '30px' : (this.state.nativeOnly ? '30px' : '0') }}>
<ol className={ this.state.nativeOnly ? 'hide' : 'breadcrumb' + (this.props.ActiveCoin.mode === 'basilisk' ? ' breadcrumb--basilisk' : '') }>
<ol className={ this.state.nativeOnly ? 'hide' : 'breadcrumb' + (this.props.ActiveCoin.mode === 'basilisk' ? ' breadcrumb--basilisk' : ' breadcrumb--native') }>
<strong>{ translate('INDEX.MY') } { this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-' } { translate('INDEX.ADDRESS') }: </strong>
{ this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-' }
<button

89
react/src/components/overrides.scss
View File

@ -373,6 +373,9 @@ input:checked + .slider:before {
text-align: center;
}
.coin-logo.breadcrumb {
z-index: 100;
}
.breadcrumb > li + li:before {
display: none;
}
@ -754,6 +757,10 @@ select{
}
}
.toggle-filters:hover {
background-color: #f3f1f1;
}
/* jumblr */
.jumblr {
p {
@ -894,49 +901,99 @@ select{
}
}
.search-box {
float: right;
padding-right: 0;
}
.no-padding-left {
padding-left: 0;
}
.basilisk-progress-bar {
position: absolute;
width: calc(100% - 100px);
width: 100%;
}
.breadcrumb--basilisk {
.breadcrumb--basilisk,
.breadcrumb--native {
top: 0;
}
.dropdown-menu {
.no--hover {
pointer-events: none;
}
}
.ReactTable {
border: none;
.pagination-top {
display: none;
.pagination-bottom {
margin-top: 35px;
}
.rt-td {
text-align: center;
}
.ReactTable .rt-thead .rt-th,
.ReactTable .rt-thead .rt-td {
padding: 10px 5px;
}
.rt-table {
border: 1px solid rgba(0, 0, 0, 0.1);
}
.rt-tfoot {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.rt-thead {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.rt-thead .rt-th,
.rt-thead .rt-td {
padding: 10px 5px;
}
.rt-tr.-odd div,
.rt-tr.-even div {
padding-top: 7px;
padding-bottom: 7px;
padding-top: 10px;
padding-bottom: 10px;
}
.-pagination,
.rt-thead,
.rt-tfoot {
border: none;
}
.rt-tfoot {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.rt-thead {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.colum--direction {
width: 40px !important;
flex: 40 0 auto !important;
padding-right: 10px;
}
.colum--txinfo {
width: 40px !important;
flex: 40 0 auto !important;
}
.colum--type {
width: 40px !important;
flex: 40 0 auto !important;
}
.-pagination {
.-pageJump {
margin-right: 5px;
margin-left: 5px;
}
.-btn {
color: #757575;
background-color: #efefef;
border: 1px solid #e0e0e0;
}
.-btn:hover {
color: #fff;
}
.-btn[disabled]:hover {
color: #757575;
}
}
.rt-noData {
top: 46px;
width: 100%;
text-align: center;
height: 98px;
padding: 38px;
background: rgba(255, 255, 255, 0.85);
}
}
Write Preview
Loading…
Cancel
Save