All files / javascripts/explorev2/components Filter.jsx

64.29% Statements 18/28
25% Branches 4/16
100% Functions 3/3
64.29% Lines 18/28
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 1291x 1x 1x 1x   1x                   1x           6x   2x   2x         2x 2x                                                         2x                       2x                     2x               2x                       4x                                             1x 1x  
import React from 'react';
import Select from 'react-select';
import { Button } from 'react-bootstrap';
import SelectField from './SelectField';
 
const propTypes = {
  actions: React.PropTypes.object.isRequired,
  filterColumnOpts: React.PropTypes.array,
  prefix: React.PropTypes.string,
  filter: React.PropTypes.object.isRequired,
  renderFilterSelect: React.PropTypes.bool,
  datasource_type: React.PropTypes.string.isRequired,
  datasource_id: React.PropTypes.number.isRequired,
};
 
const defaultProps = {
  filterColumnOpts: [],
  prefix: 'flt',
};
 
export default class Filter extends React.Component {
  constructor(props) {
    super(props);
    const opChoices = this.props.prefix === 'flt' ?
      ['in', 'not in'] : ['==', '!=', '>', '<', '>=', '<='];
    this.state = {
      opChoices,
    };
  }
  componentWillMount() {
    Eif (this.props.filter.col) {
      this.props.actions.fetchFilterValues(
        this.props.datasource_type,
        this.props.datasource_id,
        this.props.filter,
        this.props.filter.col);
    }
  }
  changeCol(filter, colOpt) {
    const val = (colOpt) ? colOpt.value : null;
    this.props.actions.changeFilter(filter, 'col', val);
    if (val) {
      this.props.actions.fetchFilterValues(
        this.props.datasource_type, this.props.datasource_id, filter, val);
    }
  }
  changeOp(filter, opOpt) {
    const val = (opOpt) ? opOpt.value : null;
    this.props.actions.changeFilter(filter, 'op', val);
  }
  changeValue(filter, event) {
    this.props.actions.changeFilter(filter, 'value', event.target.value);
  }
  changeSelectValue(filter, name, value) {
    this.props.actions.changeFilter(filter, 'value', value);
  }
  removeFilter(filter) {
    this.props.actions.removeFilter(filter);
  }
  renderFilterFormField() {
    Iif (this.props.renderFilterSelect) {
      return (
        <SelectField
          multi
          freeForm
          name="filter-value"
          value={this.props.filter.value}
          choices={this.props.filter.choices ? this.props.filter.choices : []}
          onChange={this.changeSelectValue.bind(this, this.props.filter)}
        />
      );
    }
    return (
      <input
        type="text"
        onChange={this.changeValue.bind(this, this.props.filter)}
        value={this.props.filter.value}
        className="form-control input-sm"
        placeholder="Filter value"
      />
    );
  }
  render() {
    return (
      <div>
        <div className="row space-1">
          <Select
            className="col-lg-12"
            multi={false}
            name="select-column"
            placeholder="Select column"
            options={this.props.filterColumnOpts.map((o) => ({ value: o, label: o }))}
            value={this.props.filter.col}
            autosize={false}
            onChange={this.changeCol.bind(this, this.props.filter)}
          />
        </div>
        <div className="row space-1">
          <Select
            className="col-lg-4"
            multi={false}
            name="select-op"
            placeholder="Select operator"
            options={this.state.opChoices.map((o) => ({ value: o, label: o }))}
            value={this.props.filter.op}
            autosize={false}
            onChange={this.changeOp.bind(this, this.props.filter)}
          />
          <div className="col-lg-6">
            {this.renderFilterFormField()}
          </div>
          <div className="col-lg-2">
            <Button
              id="remove-button"
              bsSize="small"
              onClick={this.removeFilter.bind(this, this.props.filter)}
            >
              <i className="fa fa-minus" />
            </Button>
          </div>
        </div>
      </div>
    );
  }
}
 
Filter.propTypes = propTypes;
Filter.defaultProps = defaultProps;