status-im
/
fathom
mirror of https://github.com/status-im/fathom.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add limit choice to table overviews

This commit is contained in:
Danny van Kooten 2016-12-07 22:00:55 +01:00
parent c84f6edc30
commit 06e9c5fdfd
3 changed files with 29 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/countries.go
View File

@ -34,7 +34,7 @@ var GetCountriesHandler = http.HandlerFunc(func(w http.ResponseWriter, r *http.R
LIMIT ?`) LIMIT ?`)
checkError(err) checkError(err)
defer stmt.Close() defer stmt.Close()
rows, err := stmt.Query(before, after, defaultLimit) rows, err := stmt.Query(before, after, getRequestedLimit(r))
checkError(err) checkError(err)
defer rows.Close() defer rows.Close()

34
assets/js/components/Table.js
View File

@ -10,17 +10,19 @@ class Table extends Component {
super(props) super(props)
this.state = { this.state = {
records: [] records: [],
limit: 5
} }
this.tableHeaders = props.headers.map(heading => <th>{heading}</th>); this.tableHeaders = props.headers.map(heading => <th>{heading}</th>)
this.fetchRecords = this.fetchRecords.bind(this); this.fetchRecords = this.fetchRecords.bind(this)
this.fetchRecords(props.period); this.handleLimitChoice = this.handleLimitChoice.bind(this)
this.fetchRecords(props.period, this.state.limit)
} }
labelCell(p) { labelCell(p) {
if( this.props.labelCell ) { if( this.props.labelCell ) {
return this.props.labelCell(p); return this.props.labelCell(p)
} }
return ( return (
@ -30,15 +32,20 @@ class Table extends Component {
componentWillReceiveProps(newProps) { componentWillReceiveProps(newProps) {
if(this.props.period != newProps.period) { if(this.props.period != newProps.period) {
this.fetchRecords(newProps.period) this.fetchRecords(newProps.period, this.state.limit)
} }
} }
fetchRecords(period) { handleLimitChoice(e) {
this.setState({ limit: parseInt(e.target.value) })
this.fetchRecords(this.props.period, this.state.limit)
}
fetchRecords(period, limit) {
const before = Math.round((+new Date() ) / 1000); const before = Math.round((+new Date() ) / 1000);
const after = before - ( period * dayInSeconds ); const after = before - ( period * dayInSeconds );
return fetch(`/api/${this.props.endpoint}?before=${before}&after=${after}`, { return fetch(`/api/${this.props.endpoint}?before=${before}&after=${after}&limit=${limit}`, {
credentials: 'include' credentials: 'include'
}).then((r) => { }).then((r) => {
if( r.ok ) { if( r.ok ) {
@ -71,7 +78,16 @@ class Table extends Component {
return ( return (
<div class="block"> <div class="block">
<h3>{this.props.title}</h3> <div class="clearfix">
<h3 class="pull-left">{this.props.title}</h3>
<div class="pull-right">
<select onchange={this.handleLimitChoice}>
<option>5</option>
<option>20</option>
<option>100</option>
</select>
</div>
</div>
<table> <table>
<thead> <thead>
<tr>{this.tableHeaders}</tr> <tr>{this.tableHeaders}</tr>

3
assets/sass/_forms.scss
View File

@ -18,6 +18,9 @@ input {
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
min-width: auto; min-width: auto;
vertical-align: middle;
width: 16px;
height: 16px;
} }
button, button,