Created
January 7, 2016 13:30
-
-
Save junajan/73fdc545bffb2f87946b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import Select from './select/Select.jsx'; | |
import FilterStore from './../../stores/FilterStore'; | |
import FilterActions from '../../actions/FilterActions'; | |
import StatisticActions from '../../actions/StatisticActions'; | |
import {Grid, Row, Col, Button, Glyphicon} from 'react-bootstrap'; | |
import {statisticsById, statisticsByPath} from '../../libs/statistics'; | |
import styles from './filters.scss'; | |
const default_persistent_data = { | |
collapsed: false | |
} | |
function setPersistenetState (new_data = {}) { | |
const existing_data = getPersistentState(); | |
const updated_data = Object.assign({}, existing_data, new_data); | |
localStorage.setItem('filter-state', JSON.stringify(updated_data)); | |
return updated_data; | |
} | |
function getPersistentState () { | |
const persistent_data = localStorage.getItem('filter-state'); | |
if (persistent_data !== null) { | |
return JSON.parse(persistent_data); | |
} | |
return default_persistent_data; | |
} | |
function getState() { | |
return Object.assign({}, getPersistentState(), { | |
projects: FilterStore.getProjects(), | |
companies: FilterStore.getCompanies(), | |
filters: FilterStore.getFilters() | |
}); | |
} | |
function getObjectByPropValue (custom_options = {}) { | |
const default_options = { | |
list: [], | |
lookup_prop: null, | |
lookup_value: null, | |
target_prop: null, | |
default_value: 'n/a' | |
} | |
const options = Object.assign({}, default_options, custom_options); | |
if (options.lookup_value !== null) { | |
for (let item of options.list) { | |
if (item[options.lookup_prop] === options.lookup_value) { | |
return options.target_prop === null ? item : item[options.target_prop]; | |
} | |
} | |
} | |
return options.default_value; | |
} | |
export default class Filters extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = getState(); | |
this.state.disableApplyButton = true; | |
this.state.collapsed = false; | |
this._onChange = this._onChange.bind(this); | |
this.includeTestChange = this.includeTestChange.bind(this); | |
this.onChangeFilter= this.onChangeFilter.bind(this); | |
this.filterIt = this.filterIt.bind(this); | |
this.resetFilters = this.resetFilters.bind(this); | |
} | |
_onChange() { | |
this.setState(getState()); | |
} | |
componentDidMount() { | |
FilterStore.addChangeListener(this._onChange); | |
} | |
componentWillUnmount() { | |
FilterStore.removeChangeListener(this._onChange); | |
} | |
includeTestChange(e) { | |
let value = e.target.checked; | |
this.onChangeFilter(value, 'include_test'); | |
} | |
onChangeFilter(value, name) { | |
let {filters} = this.state; | |
FilterActions.changeFilter(value, name, filters); | |
this.setState({ | |
disableApplyButton: false | |
}); | |
} | |
filterIt() { | |
let {filters} = this.state; | |
let {location} = this.props, | |
path = location.pathname.replace('/statistic/',''), | |
routeName = statisticsByPath[path]; | |
if (path && routeName) { | |
StatisticActions[statisticsById[routeName].get](filters); | |
}else { | |
StatisticActions.getFilteredCollection(filters, true); | |
} | |
this.setState({ | |
disableApplyButton: true | |
}); | |
} | |
resetFilters() { | |
let {filters} = this.state; | |
FilterActions.resetFilters(filters); | |
this.setState({ | |
disableApplyButton: false | |
}); | |
} | |
toggleCollapsed() { | |
const new_collapsed_state = !this.state.collapsed; | |
setPersistenetState({collapsed: new_collapsed_state}); | |
this.setState({collapsed: new_collapsed_state}); | |
} | |
render() {{} | |
let {projects, filters, companies, disableApplyButton} = this.state; | |
let datePeriods = []; | |
return ( | |
<div className='bom-filters-wrapper'> | |
<div className='bom-filters-recap'> | |
{ | |
this.state.collapsed && | |
<span className='bom-filters-recap-content'> | |
Account: {getObjectByPropValue({ | |
list: companies, | |
lookup_prop: 'id', | |
lookup_value: parseInt(filters.company), | |
target_prop: 'name', | |
default_value: 'All' | |
})} | |
</span> | |
} | |
<Button | |
onClick={() => {this.toggleCollapsed();}} | |
bsStyle={this.state.collapsed ? 'link' : 'primary'} | |
> | |
<Glyphicon glyph='filter' /> | |
</Button> | |
</div> | |
{ | |
!this.state.collapsed && | |
<Row className='bom-filters'> | |
<Col sm={4} className='bom-filter'> | |
<Select | |
options={companies} | |
selected={filters.company} | |
name='company' | |
onChange={this.onChangeFilter} | |
label='Account' | |
/> | |
<div className='form-group checkbox'> | |
<label> | |
<input | |
type='checkbox' | |
name='include_test' | |
value={filters.include_test} | |
onChange={this.includeTestChange} | |
/> | |
Include Test accounts | |
</label> | |
</div> | |
</Col> | |
<Col sm={4} className='bom-filter'> | |
<Select | |
disabled={!filters.company} | |
options={projects} | |
selected={filters.project} | |
name='project' | |
onChange={this.onChangeFilter} | |
label='Projects' | |
/> | |
</Col> | |
{/* | |
<Col sm={3} className='bom-filter'> | |
<Select | |
options={datePeriods} | |
selected={filters.datePeriod} | |
name='datePeriod' | |
onChange={this.onChangeFilter} | |
label='Date period' | |
/> | |
</Col> | |
*/} | |
<Col sm={4} className={'bom-filter-actions'}> | |
<Button onClick={this.resetFilters} bsStyle='link'>Clear filter</Button> | |
<Button disabled={disableApplyButton} onClick={this.filterIt} bsStyle='primary'>Apply</Button> | |
</Col> | |
</Row> | |
} | |
</div> | |
); | |
} | |
} | |
/** WEBPACK FOOTER ** | |
** ./src/js/components/filters/Filters.jsx | |
**/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment