-
Notifications
You must be signed in to change notification settings - Fork 12.9k
/
Filter.jsx
140 lines (136 loc) · 3.73 KB
/
Filter.jsx
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
129
130
131
132
133
134
135
136
137
138
139
140
const $ = window.$ = require('jquery');
import React, { PropTypes } from 'react';
import Select from 'react-select';
import { Button, Row, Col } from 'react-bootstrap';
import SelectControl from './SelectControl';
const propTypes = {
choices: PropTypes.array,
changeFilter: PropTypes.func,
removeFilter: PropTypes.func,
filter: PropTypes.object.isRequired,
datasource: PropTypes.object,
having: PropTypes.bool,
};
const defaultProps = {
having: false,
changeFilter: () => {},
removeFilter: () => {},
choices: [],
datasource: null,
};
export default class Filter extends React.Component {
constructor(props) {
super(props);
const filterOps = props.datasource.type === 'table' ?
['in', 'not in'] : ['==', '!=', 'in', 'not in', 'regex'];
this.opChoices = this.props.having ? ['==', '!=', '>', '<', '>=', '<=']
: filterOps;
}
fetchFilterValues(col) {
if (!this.props.datasource) {
return;
}
const datasource = this.props.datasource;
let choices = [];
if (col) {
$.ajax({
type: 'GET',
url: `/superset/filter/${datasource.type}/${datasource.id}/${col}/`,
success: (data) => {
choices = Object.keys(data).map((k) =>
([`'${data[k]}'`, `'${data[k]}'`]));
this.props.changeFilter('choices', choices);
},
});
}
}
changeFilter(control, event) {
let value = event;
if (event && event.target) {
value = event.target.value;
}
if (event && event.value) {
value = event.value;
}
this.props.changeFilter(control, value);
if (control === 'col' && value !== null && this.props.datasource.filter_select) {
this.fetchFilterValues(value);
}
}
removeFilter(filter) {
this.props.removeFilter(filter);
}
renderFilterFormControl(filter) {
const datasource = this.props.datasource;
if (datasource && datasource.filter_select) {
if (!filter.choices) {
this.fetchFilterValues(filter.col);
}
}
if (this.props.having) {
// druid having filter
return (
<input
type="text"
onChange={this.changeFilter.bind(this, 'val')}
value={filter.value}
className="form-control input-sm"
placeholder="Filter value"
/>
);
}
return (
<SelectControl
multi
freeForm
name="filter-value"
value={filter.val}
choices={filter.choices || []}
onChange={this.changeFilter.bind(this, 'val')}
/>
);
}
render() {
const filter = this.props.filter;
return (
<div>
<Row className="space-1">
<Col md={12}>
<Select
id="select-col"
placeholder="Select column"
options={this.props.choices.map((c) => ({ value: c[0], label: c[1] }))}
value={filter.col}
onChange={this.changeFilter.bind(this, 'col')}
/>
</Col>
</Row>
<Row className="space-1">
<Col md={3}>
<Select
id="select-op"
placeholder="Select operator"
options={this.opChoices.map((o) => ({ value: o, label: o }))}
value={filter.op}
onChange={this.changeFilter.bind(this, 'op')}
/>
</Col>
<Col md={7}>
{this.renderFilterFormControl(filter)}
</Col>
<Col md={2}>
<Button
id="remove-button"
bsSize="small"
onClick={this.removeFilter.bind(this)}
>
<i className="fa fa-minus" />
</Button>
</Col>
</Row>
</div>
);
}
}
Filter.propTypes = propTypes;
Filter.defaultProps = defaultProps;