filtering work in progress

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;

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({
         <h3> Browse products by category  : {this.state.category.get('name')}</h3>
         Number of items in this category: {this.state.items.length}
         <div>need to filter brand: {this.getQuery().brand}</div>
+        <div>
+        {this.appliedCategoryFiltersArray().map(function(acf) {
+            return (<div>
+              {acf.name} : {acf.value} <button onClick={self.removeAppliedFilter.bind(self, acf.name)}>X</button>
+              
+              </div>)
+                                                              })} 
+        </div>
+
+          
         <ItemList items={this.state.items} />
         </div>
         </div>
         );
     },
+    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()) {

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
+});

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;