diff --git a/front-ui/app/actions/filterCriteriaActions.js b/front-ui/app/actions/filterCriteriaActions.js new file mode 100644 index 0000000..9594254 --- /dev/null +++ b/front-ui/app/actions/filterCriteriaActions.js @@ -0,0 +1,27 @@ +var AppDispatcher = require('../dispatcher/appDispatcher'); +var FilterCriteriaConstants = require('../constants/filterCriteriaConstants'); + +var FilterCriteriaActions = { + clearCategoryFilters : function() { + AppDispatcher.handleAction({ + actionType: FilterCriteriaConstants.CLEAR_CATEGORY_FILTERS + }); + }, + addAppliedCategoryFilter: function(name, value) { + AppDispatcher.handleAction({ + actionType: FilterCriteriaConstants.ADD_APPLIED_CATEGORY_FILTER, + filter: { + name: name, + value: value + } + }); + }, + removeAppliedCategoryFilter: function(name) { + AppDispatcher.handleAction({ + actionType: FilterCriteriaConstants.REMOVE_APPLIED_CATEGORY_FILTER, + name: name + }); + } +}; + +module.exports = FilterCriteriaActions; diff --git a/front-ui/app/components/browsing/byCategory.js b/front-ui/app/components/browsing/byCategory.js index f6f2c24..1dd2766 100644 --- a/front-ui/app/components/browsing/byCategory.js +++ b/front-ui/app/components/browsing/byCategory.js @@ -9,7 +9,10 @@ var React = require('react'), ItemStore = require('../../stores/itemStore'), NavigationStore = require('../../stores/navigationStore'), ItemList = require('../items/itemList'), - NavigationActions = require('../../actions/navigationActions'); + NavigationActions = require('../../actions/navigationActions'), + + FilterCriteriaStore = require('../../stores/filterCriteriaStore'), + FilterCriteriaActions = require('../../actions/filterCriteriaActions'); var ByCategory = React.createClass({ mixins: [Router.State], @@ -22,13 +25,24 @@ var ByCategory = React.createClass({ }; }, onFCClick: function(fc, fcv) { - var q = {}; q[fc.field_name] = fcv.filter_value; var section = new Section(this.state.category.get('section')); var category = this.state.category; + + FilterCriteriaActions.addAppliedCategoryFilter(fc.field_name, fcv.filter_value); NavigationActions.goToCategory(category, section, q) }, + removeAppliedFilter: function(name) { + FilterCriteriaActions.removeAppliedCategoryFilter(name); + var section = new Section(this.state.category.get('section')); + var category = this.state.category; + var q = {}; + NavigationActions.goToCategory(category, section, q); + + var categoryId = this.getParams().id; + ItemActions.loadByCategory(categoryId, this.getQuery()); + }, render: function() { var self = this; return ( @@ -62,11 +76,30 @@ var ByCategory = React.createClass({

Browse products by category : {this.state.category.get('name')}

Number of items in this category: {this.state.items.length}
need to filter brand: {this.getQuery().brand}
+
+ {this.appliedCategoryFiltersArray().map(function(acf) { + return (
+ {acf.name} : {acf.value} + +
) + })} +
+ + ); }, + appliedCategoryFiltersArray: function() { + var filters = []; + for(var key in this.state.appliedCategoryFilters) { + if(this.state.appliedCategoryFilters.hasOwnProperty(key)) { + filters.push({name: key, value: this.state.appliedCategoryFilters[key]}); + } + } + return filters; + }, componentWillReceiveProps: function() { var categoryId = this.getParams().id; ItemActions.loadByCategory(categoryId, this.getQuery()); @@ -80,10 +113,20 @@ var ByCategory = React.createClass({ ItemStore.addChangeListener(this._onChange); CategoryStore.addChangeListener(this._onChange); + FilterCriteriaStore.addChangeListener(this._onAppliedFiltersChange); }, componentWillUnmount: function() { ItemStore.removeChangeListener(this._onChange); CategoryStore.removeChangeListener(this._onChange); + FilterCriteriaStore.removeChangeListener(this._onAppliedFiltersChange); + }, + _onAppliedFiltersChange: function() { + if(this.isMounted()) { + console.log('FILTERS CHANGING: ', FilterCriteriaStore.getAppliedCategoryFilters()); + this.setState({ + appliedCategoryFilters: FilterCriteriaStore.getAppliedCategoryFilters() + }); + } }, _onChange: function() { if(this.isMounted()) { diff --git a/front-ui/app/constants/filterCriteriaConstants.js b/front-ui/app/constants/filterCriteriaConstants.js new file mode 100644 index 0000000..5c69495 --- /dev/null +++ b/front-ui/app/constants/filterCriteriaConstants.js @@ -0,0 +1,8 @@ +var keyMirror = require('react/lib/keyMirror'); + +// Define action constants +module.exports = keyMirror({ + CLEAR_CATEGORY_FILTERS: null, + ADD_APPLIED_CATEGORY_FILTER: null, + REMOVE_APPLIED_CATEGORY_FILTER: null +}); diff --git a/front-ui/app/stores/filterCriteriaStore.js b/front-ui/app/stores/filterCriteriaStore.js new file mode 100644 index 0000000..2ea81fb --- /dev/null +++ b/front-ui/app/stores/filterCriteriaStore.js @@ -0,0 +1,83 @@ +var AppDispatcher = require('../dispatcher/appDispatcher'); +var EventEmitter = require('events').EventEmitter; + +var FilterCriteriaConstants = require('../constants/filterCriteriaConstants'); +var _ = require('underscore'); + + +var _appliedCategoryFilters = {}; + +var clearCategoryFilters = function() { + _appliedCategoryFilters = {}; +}; + +var addAppliedCategoryFilter = function(name, value) { + _appliedCategoryFilters[name] = value; +}; + +var removeAppliedCategoryFilter = function(name) { + delete _appliedCategoryFilters[name]; +}; +//var loadCategoryDetails = function(categoryId) { + //var category = new Category({id : categoryId}); + //category.fetch({ + //success: function() { + //_categoryDetails = category; + //CategoryStore.emitChange(); + //} + //}); +//}; + +// Extend SectionStore with EventEmitter to add eventing capabilities +var FilterCriteriaStore = _.extend({}, EventEmitter.prototype, { + + //getCategoryDetails: function() { + //return _categoryDetails; + //}, + getAppliedCategoryFilters: function() { + return _appliedCategoryFilters; + }, + // Emit Change event + emitChange: function() { + this.emit('change'); + }, + + // Add change listener + addChangeListener: function(callback) { + this.on('change', callback); + }, + + // Remove change listener + removeChangeListener: function(callback) { + this.removeListener('change', callback); + } +}); + + +// Register callback with AppDispatcher +AppDispatcher.register(function(payload) { + var action = payload.action; + var text; + + switch(action.actionType) { + + case FilterCriteriaConstants.CLEAR_CATEGORY_FILTERS: + clearCategoryFilters(); + break; + case FilterCriteriaConstants.ADD_APPLIED_CATEGORY_FILTER: + addAppliedCategoryFilter(action.filter.name, action.filter.value); + break; + case FilterCriteriaConstants.REMOVE_APPLIED_CATEGORY_FILTER: + removeAppliedCategoryFilter(action.name); + break; + default: + return true; + } + + // If action was responded to, emit change event + FilterCriteriaStore.emitChange(); + return true; + +}); + +module.exports = FilterCriteriaStore;