Skip to content

Commit 37b8d05

Browse files
author
Sergei Aksiutin
committed
[NEP-12629] WIP
1 parent 54c646c commit 37b8d05

File tree

10 files changed

+2838
-3970
lines changed

10 files changed

+2838
-3970
lines changed

‎docs/react-components-structure.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
React Components Structure
2+
--------------------------
3+
4+
FilterBar
5+
-> FilterList
6+
-> FilterListOption
7+
-> ApplyFiltersButton
8+
-> ClearFiltersButton
9+
-> SaveFiltersButton
10+
-> SavedSearchesList
11+
-> ConfigurationButton *
12+
-> ExportResultsButton *
13+
-> BatchActionsList
14+
-> FilterDisplay
15+
-> FilterGroup
16+
-> FilterItem
17+
-> FilterButton
18+
-> FilterButton
19+
20+
21+
{} - available filters
22+
[] - default filters
23+
[
24+
[filter1] -> when adding new add new filter1
25+
]
26+
27+
[
28+
[filter1, filter2] -> when adding "ADD" button and add new filter2
29+
]

‎example/public/js/react-filterbar.js

+2,584-3,950
Large diffs are not rendered by default.

‎src/actors/FilterBarActor.js

+4
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ export class FilterBarActor {
4141
this.filterBarStore.updateFilter(filterUid, propKey, propValue);
4242
}
4343

44+
updateFilter2(groupKey, inputKey, value) {
45+
this.filterBarStore.updateFilter2(groupKey, inputKey, value);
46+
}
47+
4448
applyFilters() {
4549
var url = URLHelper.updateUrlSearch(
4650
this.filterBarStore.getSearchUrl(), "q", this.filterBarStore.getQuery()

‎src/components/FilterBar/FilterBar.react.js

-4
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,6 @@ export class FilterBar extends React.Component {
1818
<div>
1919
<div>
2020
<div className="btn-group margin-bottom-sm">
21-
<FilterList
22-
disabledFilters={this.context.filterBarStore.getDisabled()}
23-
/>
24-
2521
<ApplyFiltersButton
2622
filterBarActor={this.context.filterBarActor}
2723
/>

‎src/components/FilterBar/FilterDisplay/FilterButton.react.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { FilterListOption } from "../FilterList/FilterListOption.react";
2+
export class FilterButton extends React.Component {
3+
constructor(props) {
4+
super(props);
5+
6+
this.state = { filters: props.filters };
7+
}
8+
9+
componentDidMount() {
10+
this.context.filterBarStore.addChangeListener(this.onChange.bind(this));
11+
}
12+
13+
onChange() {
14+
this.setState(this.getStateFromStores());
15+
}
16+
17+
getStateFromStores() {
18+
return {
19+
filters: this.context.filterBarStore.getFilters()
20+
};
21+
}
22+
23+
render() {
24+
var optionKey = "";
25+
var filterOptions = Object.keys(this.state.filters).map(function(filterUid) {
26+
optionKey = "option-" + filterUid;
27+
return (
28+
<FilterListOption
29+
filterUid={filterUid}
30+
key={optionKey}
31+
label={this.state.filters[filterUid].label}
32+
/>
33+
);
34+
}, this);
35+
return (
36+
<div className='btn-group'>
37+
<button className='btn btn-default dropdown-toggle' data-toggle='dropdown' type='button'>
38+
<span>{ this.props.title }</span>
39+
<i className='icon icon-add'></i>
40+
</button>
41+
<div className='dropdown-menu' role='menu'>
42+
<ul className='filter-options'>
43+
{filterOptions}
44+
</ul>
45+
</div>
46+
</div>
47+
)
48+
}
49+
}
50+
51+
FilterButton.contextTypes = {
52+
filterBarActor: React.PropTypes.object,
53+
filterBarStore: React.PropTypes.object
54+
};
55+
56+
FilterButton.propTypes = {
57+
disabledFilters: React.PropTypes.object.isRequired
58+
};

‎src/components/FilterBar/FilterDisplay/FilterDisplay.react.js

+50-15
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import {FilterInput} from "./FilterInput.react";
2-
2+
import {FilterButton} from "./FilterButton.react";
3+
import {FilterGroup} from "./FilterGroup.react";
4+
import { FilterList } from "../FilterList/FilterList.react";
35
export class FilterDisplay extends React.Component {
46
constructor(props) {
57
super(props);
@@ -35,35 +37,68 @@ export class FilterDisplay extends React.Component {
3537
}
3638

3739
getStateFromStores() {
40+
console.log("FilterDisplay", this.context.filterBarStore);
3841
return {
3942
filters: this.context.filterBarStore.getEnabled()
4043
};
4144
}
4245

46+
getActiveFilters() {
47+
return this.context.filterBarStore.getActiveFilters();
48+
}
49+
50+
getFilters() {
51+
return this.context.filterBarStore.getFilters();
52+
}
53+
4354
render() {
44-
var filters = Object.keys(this.state.filters).map(function(filterUid) {
45-
var filter = this.state.filters[filterUid];
55+
var filters = [];
56+
this.getActiveFilters().map(function(groupFilters, idx) {
57+
if (idx > 0) {
58+
filters.push(
59+
(
60+
<div style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }>OR</div>
61+
)
62+
)
63+
}
4664

47-
return (
48-
<FilterInput
49-
filterUid={filterUid}
50-
key={filterUid}
51-
label={filter.label}
52-
type={filter.type}
53-
value={filter.value}
54-
operator={filter.operator}
55-
/>
65+
filters.push(
66+
(<FilterGroup
67+
key={ idx }
68+
groupKey={ idx }
69+
filters={ groupFilters }
70+
/>)
5671
);
57-
}, this);
72+
73+
})
5874

5975
if (filters.length === 0) {
60-
filters = (<div>No Filters Enabled!</div>);
76+
filters.push((
77+
<div style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }>
78+
<FilterButton
79+
filters={ this.getFilters() }
80+
title="ADD FILTER"
81+
/>
82+
</div>)
83+
);
84+
} else {
85+
filters.push(
86+
(
87+
<div style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }>
88+
<FilterButton
89+
filters={ this.getFilters() }
90+
title="OR"
91+
/>
92+
</div>
93+
));
6194
}
6295

6396
return (
6497
<div className="navbar filterbar">
6598
<div className="panel panel-default">
66-
{filters}
99+
<div style={ { display: 'flex', float: 'left'} }>
100+
{filters}
101+
</div>
67102
</div>
68103
</div>
69104
);

‎src/components/FilterBar/FilterDisplay/FilterGroup.react.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { FilterInput } from "./FilterInput.react"
2+
import { FilterButton } from "./FilterButton.react"
3+
4+
export class FilterGroup extends React.Component {
5+
constructor(props) {
6+
super(props);
7+
8+
this.state = { filters: props.filters };
9+
}
10+
11+
getFilters() {
12+
return this.context.filterBarStore.getFilters();
13+
}
14+
15+
render() {
16+
console.log("FilterGroupKey: ", this.props);
17+
const { groupKey } = this.props;
18+
var filters = [];
19+
this.state.filters.map(function(filter, idx) {
20+
if (idx > 0) {
21+
filters.push(
22+
(
23+
<div style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }>AND</div>
24+
)
25+
);
26+
}
27+
28+
filters.push(
29+
(
30+
<div style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }>
31+
<FilterInput
32+
groupKey={ groupKey }
33+
inputKey={ idx }
34+
filterUid={filter.uid}
35+
key={filter.uid}
36+
label={filter.label}
37+
type={filter.type}
38+
value={filter.value}
39+
operator={filter.operator}
40+
/>
41+
</div>)
42+
);
43+
});
44+
45+
filters.push(
46+
(
47+
<div style={ { marginTop: 'auto', marginBottom: 'auto', padding: '10px'} }>
48+
<FilterButton
49+
filters={ this.getFilters() }
50+
title="ADD"
51+
/>
52+
</div>
53+
)
54+
);
55+
56+
return (
57+
<div style={ { display: 'flex', borderRadius: '5px', border: '1px solid #c0c0c0', backgroundColor: '#eee'} }>
58+
{filters}
59+
</div>
60+
)
61+
}
62+
}
63+
64+
FilterGroup.contextTypes = {
65+
filterBarActor: React.PropTypes.object,
66+
filterBarStore: React.PropTypes.object
67+
};

‎src/components/FilterBar/FilterDisplay/FilterInput.react.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export class FilterInput extends React.Component {
66
}
77

88
onClick() {
9+
console.log("KEY", this.props.groupKey);
910
this.context.filterBarActor.disableFilter(this.props.filterUid);
1011
}
1112

@@ -14,6 +15,8 @@ export class FilterInput extends React.Component {
1415
return(
1516
{
1617
filterUid: this.props.filterUid,
18+
groupKey: this.props.groupKey,
19+
inputKey: this.props.inputKey,
1720
key: key,
1821
value: this.props.value,
1922
type: this.props.type,
@@ -26,7 +29,7 @@ export class FilterInput extends React.Component {
2629
var propObject = this.objectProperties();
2730
var inputs = new FilterInputFactory(propObject);
2831
return (
29-
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12 filter">
32+
<div className="filter">
3033
<ul className={this.filterKey}>
3134
<li>
3235
<i

‎src/components/FilterBar/FilterDisplay/Inputs/TextInput.react.js

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export class TextInput extends React.Component {
2525
// lose focus on every keystroke.
2626
onBlur() {
2727
this.context.filterBarActor.updateFilter(this.props.filterUid, "value", this.state.value);
28+
this.context.filterBarActor.updateFilter2(this.props.groupKey, this.props.inputKey, this.state.value);
2829
}
2930

3031
render() {

‎src/stores/FilterBarStore.js

+41
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,35 @@ export class FilterBarStore {
1717
this.exportPageLimit = configuration.exportPageLimit;
1818
this.exportPageLimitExceededMessage = configuration.exportPageLimitExceededMessage;
1919
this.filters = configuration.filters;
20+
this.activeFilters = [
21+
[
22+
{
23+
"uid": "author",
24+
"type": "select",
25+
"field": "author",
26+
"value": "Author 31",
27+
label: "TEST1"
28+
},
29+
{
30+
"uid": "title",
31+
"type": "text",
32+
"field": "title",
33+
"value": "",
34+
label: "TEST2"
35+
}
36+
],
37+
[
38+
{
39+
"uid": "id",
40+
"type": "id",
41+
"field": "id",
42+
"value": "",
43+
label: "TEST3"
44+
}
45+
]
46+
]
47+
48+
this.filtersValues = {}
2049
this.quickFilters = configuration.quickFilters || {};
2150

2251
if (this.savedSearchesUrl !== undefined) {
@@ -122,7 +151,13 @@ export class FilterBarStore {
122151
return enabledFilters;
123152
}
124153

154+
getActiveFilters() {
155+
return this.activeFilters;
156+
}
157+
125158
getQuery() {
159+
console.log("AvailableFilters: ", this.filters);
160+
console.log("GetEnabled: ", this.getEnabled());
126161
var enabledFilters = Object.keys(this.getEnabled()).map(function(filterUid) {
127162
var filter = this.getFilter(filterUid);
128163
return {
@@ -133,6 +168,7 @@ export class FilterBarStore {
133168
operator: filter.operator,
134169
};
135170
}, this);
171+
console.log("EnabledFilters: ", enabledFilters);
136172
return enabledFilters.length > 0 ? JSON.stringify(enabledFilters) : "";
137173
}
138174

@@ -198,6 +234,11 @@ export class FilterBarStore {
198234
this.emitChange();
199235
}
200236

237+
updateFilter2(groupKey, inputKey, value) {
238+
this.filtersValues[`${groupKey}-${inputKey}`] = value;
239+
console.log(this.filtersValues);
240+
}
241+
201242
deactivateQuickFiltersBasedOnRemovedFilter(filterName, quickFilters) {
202243
var self = this;
203244
for (var outcome of self.quickFiltersGenerator(quickFilters)) {

0 commit comments

Comments
 (0)