- browsing by subcategory

front-ui/app/components/browsing/byCategory.js

@@ -1,6 +1,7 @@
 var React = require('react'),
     Router = require('react-router'),
     Category = require('../../models/category'),
+    SubCategory = require('../../models/subCategory'),
     Section = require('../../models/section'),
     ItemCollection = require('../../models/itemCollection'),
     ItemActions = require('../../actions/itemActions.js'),
@@ -10,7 +11,7 @@ var React = require('react'),
     NavigationStore = require('../../stores/navigationStore'),
     ItemList = require('../items/itemList'),
     NavigationActions = require('../../actions/navigationActions'),
-     LinkBanner = require('../linkBanner/linkBanner'),
+    LinkBanner = require('../linkBanner/linkBanner'),
     Globals = require('../../globals');
 
 var FilterCriteriaSelector = require('./filterCriteriaSelector');
@@ -45,6 +46,11 @@ var ByCategory = React.createClass({
       NavigationActions.goToCategory(category, section, this.filter, 0, this.state.pagination.limit);
 
     },
+    onSCClick: function(sc) {
+        var subCategory = new SubCategory(sc);
+        NavigationActions.goToSubCategory(subCategory, 0, Globals.defaultLimit);
+        event.preventDefault();
+    },
     changePage: function(page) {
       var section = new Section(this.state.category.get('section'));
       var category = this.state.category;
@@ -60,7 +66,7 @@ var ByCategory = React.createClass({
           <div>Podkategorije</div>
           <ul>
           {(this.state.category.get('sub_categories') || []).map(function(sc) {
-                                                                                return (<li> <a>{sc.name}</a></li>)
+                                                                                return (<li> <a onClick={self.onSCClick.bind(self, sc)}>{sc.name}</a></li>)
                                                                               })}
           </ul>
 

front-ui/app/components/browsing/bySubCategory.js

@@ -0,0 +1,80 @@
+var React = require('react'),
+    Router = require('react-router');
+
+var BySubCategoryActions = require('../../actions/bySubCategoryActions');
+var BySubCategoryStore = require('../../stores/bySubCategoryStore');
+var ItemStore = require('../../stores/itemStore');
+var CategoryStore = require('../../stores/categoryStore');
+
+var Globals = require('../../globals');
+var FilterCriteriaSelector = require('./filterCriteriaSelector');
+var AppliedFiltersList = require('./appliedFiltersList');
+
+var NavigationActions = require('../../actions/navigationActions');
+var ItemList = require('../items/itemList');
+var BySubCategory = React.createClass({
+    mixins: [Router.State],
+    getInitialState : function() {
+        return BySubCategoryStore.getState();
+    },
+    onFCClick: function(fc, fcv) {
+        BySubCategoryActions.filterCriteriaClick(fc, fcv);
+    },
+    removeAppliedFilter: function(name) {
+        BySubCategoryActions.removeAppliedFilter(name);
+    },
+    render : function() {
+
+        return (<div> 
+            <div className='col-md-2'>
+            
+          <FilterCriteriaSelector filterCriterias={this.state.subCategory.get('filter_criterias')} onFCClick={this.onFCClick} />
+            </div>
+            <div classname='col-md-10'>
+            
+            Podkategorija {this.state.subCategory.get('name')}
+            
+        Number of items in this subcategory: {this.state.items.length}
+    <div>
+          <AppliedFiltersList filters={this.appliedSubCategoryFiltersArray()} onRemove={this.removeAppliedFilter} />
+       
+      </div>
+        <ItemList items={this.state.items} paginationEnabled={true} total={this.state.items.totalCount} limit={this.state.pagination.limit} onPageChange={this.changePage} currentOffset={this.state.pagination.offset} />
+            </div>
+            </div>)
+    },
+    appliedSubCategoryFiltersArray: function() {
+      var filters = [];
+      for(var key in this.state.filter) {
+        if(this.state.filter.hasOwnProperty(key) && key !== 'limit' && key !== 'offset') {
+          filters.push({name: key, value: this.state.filter[key]});
+        }
+      }
+      return filters;
+    },
+    update: function() {
+      var subCategoryId = this.getParams().id;
+      var filter = this.getQuery();
+      var offset = filter.offset || 0;
+      var limit = filter.limit || Globals.DefaultPageSize;
+
+      BySubCategoryActions.load(subCategoryId, offset, limit, filter);
+    },
+    componentWillReceiveProps: function() {
+      this.update();
+    },
+    componentDidMount: function() {
+      BySubCategoryStore.addChangeListener(this._onChange);
+      this.update();
+    },
+    componentWillUnmount: function() {
+      BySubCategoryStore.removeChangeListener(this._onChange);
+    },
+    _onChange: function() {
+      if(this.isMounted()) {
+          this.setState(BySubCategoryStore.getState());
+      }
+    }
+});
+
+module.exports = BySubCategory;