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
|
import $ from 'jquery';
import React from 'react';
import RadioToggle from '../../components/shared/radio-toggle';
import {STATUSES, CURRENTS, DATE, DATE_FORMAT} from './constants';
export default React.createClass({
componentDidUpdate() {
this.attachDatePicker();
},
componentDidMount() {
this.attachDatePicker();
},
getCurrentsOptions() {
return [
{ value: CURRENTS.ALL, label: 'All' },
{ value: CURRENTS.ONLY_CURRENTS, label: 'Only Currents' }
];
},
getStatusOptions() {
return [
{ value: STATUSES.ALL, label: 'All' },
{ value: STATUSES.SUCCESS, label: 'Success' },
{ value: STATUSES.FAILED, label: 'Failed' },
{ value: STATUSES.CANCELED, label: 'Canceled' }
];
},
getDateOptions() {
return [
{ value: DATE.ANY, label: 'Any Date' },
{ value: DATE.TODAY, label: 'Today' },
{ value: DATE.CUSTOM, label: 'Custom' }
];
},
attachDatePicker() {
let opts = {
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
onSelect: this.onDateInputChange
};
$(React.findDOMNode(this.refs.minDate)).datepicker(opts);
$(React.findDOMNode(this.refs.maxDate)).datepicker(opts);
},
onDateChange(newDate) {
if (newDate === DATE.CUSTOM) {
let minDateRaw = React.findDOMNode(this.refs.minDate).value,
maxDateRaw = React.findDOMNode(this.refs.maxDate).value,
minDate = moment(minDateRaw, DATE_FORMAT, true),
maxDate = moment(maxDateRaw, DATE_FORMAT, true);
this.props.onDateChange(newDate,
minDate.isValid() ? minDate : null,
maxDate.isValid() ? maxDate : null);
} else {
this.props.onDateChange(newDate);
}
},
onDateInputChange() {
this.onDateChange(DATE.CUSTOM);
},
renderCustomDateInput() {
let shouldBeVisible = this.props.dateFilter === DATE.CUSTOM,
className = shouldBeVisible ? 'spacer-top' : 'spacer-top hidden';
return (
<div className={className}>
from
<input onChange={this.onDateInputChange} ref="minDate" type="text"/>
to
<input onChange={this.onDateInputChange} ref="maxDate" type="text"/>
</div>
);
},
render() {
return (
<section className="big-spacer-top big-spacer-bottom">
<ul className="list-inline">
<li>
<RadioToggle options={this.getStatusOptions()} value={this.props.statusFilter}
name="background-task-status" onCheck={this.props.onStatusChange}/>
</li>
<li>
<RadioToggle options={this.getCurrentsOptions()} value={this.props.currentsFilter}
name="background-task-currents" onCheck={this.props.onCurrentsChange}/>
</li>
<li>
<RadioToggle options={this.getDateOptions()} value={this.props.dateFilter}
name="background-task-date" onCheck={this.onDateChange}/>
{this.renderCustomDateInput()}
</li>
</ul>
</section>
);
}
});
|
