Skip to content

Instantly share code, notes, and snippets.

@junajan
Created January 7, 2016 13:30
Show Gist options
  • Save junajan/73fdc545bffb2f87946b to your computer and use it in GitHub Desktop.
Save junajan/73fdc545bffb2f87946b to your computer and use it in GitHub Desktop.
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