fixed filters
This commit is contained in:
@@ -9,10 +9,7 @@ var React = require('react'),
|
|||||||
ItemStore = require('../../stores/itemStore'),
|
ItemStore = require('../../stores/itemStore'),
|
||||||
NavigationStore = require('../../stores/navigationStore'),
|
NavigationStore = require('../../stores/navigationStore'),
|
||||||
ItemList = require('../items/itemList'),
|
ItemList = require('../items/itemList'),
|
||||||
NavigationActions = require('../../actions/navigationActions'),
|
NavigationActions = require('../../actions/navigationActions');
|
||||||
|
|
||||||
FilterCriteriaStore = require('../../stores/filterCriteriaStore'),
|
|
||||||
FilterCriteriaActions = require('../../actions/filterCriteriaActions');
|
|
||||||
|
|
||||||
var ByCategory = React.createClass({
|
var ByCategory = React.createClass({
|
||||||
mixins: [Router.State],
|
mixins: [Router.State],
|
||||||
@@ -21,25 +18,25 @@ var ByCategory = React.createClass({
|
|||||||
var items = new ItemCollection();
|
var items = new ItemCollection();
|
||||||
return {
|
return {
|
||||||
category: category,
|
category: category,
|
||||||
items: items
|
items: items,
|
||||||
|
filter :{}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
filter: {},
|
||||||
onFCClick: function(fc, fcv) {
|
onFCClick: function(fc, fcv) {
|
||||||
var q = {};
|
var q = {};
|
||||||
q[fc.field_name] = fcv.filter_value;
|
q[fc.field_name] = fcv.filter_value;
|
||||||
var section = new Section(this.state.category.get('section'));
|
var section = new Section(this.state.category.get('section'));
|
||||||
var category = this.state.category;
|
var category = this.state.category;
|
||||||
|
|
||||||
FilterCriteriaActions.addAppliedCategoryFilter(fc.field_name, fcv.filter_value);
|
this.filter[fc.field_name] = fcv.filter_value;
|
||||||
//NavigationActions.goToCategory(category, section, q)
|
NavigationActions.goToCategory(category, section, this.filter);
|
||||||
},
|
},
|
||||||
removeAppliedFilter: function(name) {
|
removeAppliedFilter: function(name) {
|
||||||
FilterCriteriaActions.removeAppliedCategoryFilter(name);
|
delete this.filter[name];
|
||||||
//var section = new Section(this.state.category.get('section'));
|
var section = new Section(this.state.category.get('section'));
|
||||||
//var category = this.state.category;
|
var category = this.state.category;
|
||||||
//var q = {};
|
NavigationActions.goToCategory(category, section, this.filter);
|
||||||
//NavigationActions.goToCategory(category, section, q);
|
|
||||||
|
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
@@ -73,13 +70,12 @@ var ByCategory = React.createClass({
|
|||||||
|
|
||||||
<h3> Browse products by category : {this.state.category.get('name')}</h3>
|
<h3> Browse products by category : {this.state.category.get('name')}</h3>
|
||||||
Number of items in this category: {this.state.items.length}
|
Number of items in this category: {this.state.items.length}
|
||||||
<div>need to filter brand: {this.getQuery().brand}</div>
|
|
||||||
<div>
|
<div>
|
||||||
{this.appliedCategoryFiltersArray().map(function(acf) {
|
{this.appliedCategoryFiltersArray().map(function(acf) {
|
||||||
return (<div>
|
return (<span>
|
||||||
{acf.name} : {acf.value} <button onClick={self.removeAppliedFilter.bind(self, acf.name)}>X</button>
|
{acf.name} : {acf.value} <button onClick={self.removeAppliedFilter.bind(self, acf.name)}>X</button>
|
||||||
|
|
||||||
</div>)
|
</span>)
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -91,51 +87,39 @@ var ByCategory = React.createClass({
|
|||||||
},
|
},
|
||||||
appliedCategoryFiltersArray: function() {
|
appliedCategoryFiltersArray: function() {
|
||||||
var filters = [];
|
var filters = [];
|
||||||
for(var key in this.state.appliedCategoryFilters) {
|
for(var key in this.state.filter) {
|
||||||
if(this.state.appliedCategoryFilters.hasOwnProperty(key)) {
|
if(this.state.filter.hasOwnProperty(key)) {
|
||||||
filters.push({name: key, value: this.state.appliedCategoryFilters[key]});
|
filters.push({name: key, value: this.state.filter[key]});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return filters;
|
return filters;
|
||||||
},
|
},
|
||||||
componentWillReceiveProps: function() {
|
componentWillReceiveProps: function() {
|
||||||
var categoryId = this.getParams().id;
|
var categoryId = this.getParams().id;
|
||||||
ItemActions.loadByCategory(categoryId, FilterCriteriaStore.getAppliedCategoryFilters());
|
|
||||||
|
this.setState({
|
||||||
|
filter: this.filter
|
||||||
|
});
|
||||||
|
ItemActions.loadByCategory(categoryId, this.filter);
|
||||||
CategoryActions.loadCategoryDetails(categoryId);
|
CategoryActions.loadCategoryDetails(categoryId);
|
||||||
},
|
},
|
||||||
componentDidMount: function() {
|
componentDidMount: function() {
|
||||||
var categoryId = this.getParams().id;
|
var categoryId = this.getParams().id;
|
||||||
|
|
||||||
//var query = this.getQuery();
|
|
||||||
//FilterCriteriaActions.setAppliedCategoryFilters(query);
|
|
||||||
|
|
||||||
ItemActions.loadByCategory(categoryId, this.getQuery());
|
this.filter = this.getQuery();
|
||||||
|
this.setState({
|
||||||
|
filter: this.filter
|
||||||
|
});
|
||||||
|
|
||||||
|
ItemActions.loadByCategory(categoryId, this.getQuery());
|
||||||
CategoryActions.loadCategoryDetails(categoryId);
|
CategoryActions.loadCategoryDetails(categoryId);
|
||||||
|
|
||||||
ItemStore.addChangeListener(this._onChange);
|
ItemStore.addChangeListener(this._onChange);
|
||||||
CategoryStore.addChangeListener(this._onChange);
|
CategoryStore.addChangeListener(this._onChange);
|
||||||
FilterCriteriaStore.addChangeListener(this._onAppliedFiltersChange);
|
|
||||||
},
|
},
|
||||||
componentWillUnmount: function() {
|
componentWillUnmount: function() {
|
||||||
ItemStore.removeChangeListener(this._onChange);
|
ItemStore.removeChangeListener(this._onChange);
|
||||||
CategoryStore.removeChangeListener(this._onChange);
|
CategoryStore.removeChangeListener(this._onChange);
|
||||||
FilterCriteriaStore.removeChangeListener(this._onAppliedFiltersChange);
|
|
||||||
},
|
|
||||||
_onAppliedFiltersChange: function() {
|
|
||||||
if(this.isMounted()) {
|
|
||||||
this.setState({
|
|
||||||
appliedCategoryFilters: FilterCriteriaStore.getAppliedCategoryFilters()
|
|
||||||
});
|
|
||||||
|
|
||||||
var section = new Section(this.state.category.get('section'));
|
|
||||||
var category = this.state.category;
|
|
||||||
|
|
||||||
// TODO: investigate how to do this without setTimeout call
|
|
||||||
setTimeout(function(){
|
|
||||||
NavigationActions.goToCategory(category, section, this.state.appliedCategoryFilters);
|
|
||||||
}.bind(this),0);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
_onChange: function() {
|
_onChange: function() {
|
||||||
if(this.isMounted()) {
|
if(this.isMounted()) {
|
||||||
|
|||||||
Reference in New Issue
Block a user