fixed filters

This commit is contained in:
Edin Dazdarevic
2015-02-12 18:59:49 +01:00
parent 2dc5572cb1
commit f34e9d0838

View File

@@ -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(); this.filter = this.getQuery();
//FilterCriteriaActions.setAppliedCategoryFilters(query); this.setState({
filter: this.filter
});
ItemActions.loadByCategory(categoryId, this.getQuery()); 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()) {