102 lines
2.7 KiB
JavaScript
102 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import { Alert, Button, ButtonGroup } from 'react-bootstrap';
|
|
import { Table } from 'reactable';
|
|
|
|
import VisualizeModal from './VisualizeModal';
|
|
|
|
|
|
class ResultSet extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
searchText: '',
|
|
showModal: false,
|
|
};
|
|
}
|
|
shouldComponentUpdate(nextProps, nextState) {
|
|
return (
|
|
this.state.searchText !== nextState.searchText ||
|
|
this.state.showModal !== nextState.showModal
|
|
);
|
|
}
|
|
changeSearch(event) {
|
|
this.setState({ searchText: event.target.value });
|
|
}
|
|
showModal() {
|
|
this.setState({ showModal: true });
|
|
}
|
|
hideModal() {
|
|
this.setState({ showModal: false });
|
|
}
|
|
render() {
|
|
const results = this.props.query.results;
|
|
let controls = <div className="noControls" />;
|
|
if (this.props.showControls) {
|
|
controls = (
|
|
<div className="ResultSetControls">
|
|
<div className="clearfix">
|
|
<div className="pull-left">
|
|
<ButtonGroup>
|
|
<Button
|
|
bsSize="small"
|
|
onClick={this.showModal.bind(this)}
|
|
>
|
|
<i className="fa fa-line-chart m-l-1" /> Visualize
|
|
</Button>
|
|
<Button bsSize="small">
|
|
<i className="fa fa-file-text-o" /> .CSV
|
|
</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
<div className="pull-right">
|
|
<input
|
|
type="text"
|
|
onChange={this.changeSearch.bind(this)}
|
|
className="form-control input-sm"
|
|
placeholder="Search Results"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
if (results && results.data.length > 0) {
|
|
return (
|
|
<div>
|
|
<VisualizeModal
|
|
show={this.state.showModal}
|
|
query={this.props.query}
|
|
onHide={this.hideModal.bind(this)}
|
|
/>
|
|
{controls}
|
|
<div className="ResultSet">
|
|
<Table
|
|
data={results.data}
|
|
columns={results.columns}
|
|
sortable
|
|
className="table table-condensed table-bordered"
|
|
filterBy={this.state.searchText}
|
|
filterable={results.columns}
|
|
hideFilterInput
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return (<Alert bsStyle="warning">The query returned no data</Alert>);
|
|
}
|
|
}
|
|
ResultSet.propTypes = {
|
|
query: React.PropTypes.object,
|
|
showControls: React.PropTypes.boolean,
|
|
search: React.PropTypes.boolean,
|
|
searchText: React.PropTypes.string,
|
|
};
|
|
ResultSet.defaultProps = {
|
|
showControls: true,
|
|
search: true,
|
|
searchText: '',
|
|
};
|
|
|
|
export default ResultSet;
|