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;