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

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'),
    CategoryActions = require('../../actions/categoryActions.js'),
    CategoryStore = require('../../stores/categoryStore'),
    ItemStore = require('../../stores/itemStore'),
    NavigationStore = require('../../stores/navigationStore'),
    ItemList = require('../items/itemList'),
    NavigationActions = require('../../actions/navigationActions'),
    LinkBanner = require('../linkBanner/linkBanner'),
    Globals = require('../../globals');

var FilterCriteriaSelector = require('./filterCriteriaSelector');
var AppliedFiltersList = require('./appliedFiltersList');

var ByCategory = React.createClass({
    mixins: [Router.State],
    getInitialState: function() {
      var category = new Category();
      var items = new ItemCollection();
      return {
        category: category,
        items: items,
        filter :{},
        pagination: {}
      };
    },
    filter: {},
    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;

      this.filter[fc.field_name] = fcv.filter_value;
      NavigationActions.goToCategory(category, section, this.filter, 0, this.state.pagination.limit);
    },
    removeAppliedFilter: function(name) {
      delete this.filter[name];
      var section = new Section(this.state.category.get('section'));
      var category = this.state.category;
      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;

      NavigationActions.goToCategory(category, section, this.filter, parseInt(page) * this.state.pagination.limit, this.state.pagination.limit);
    },
    render: function() {
      var self = this;
      return (
          <div>
          <div className='col-md-2'> 
          <div className='h4'>{this.state.category.get('name')}</div>
          <div>Podkategorije</div>
          <ul>
          {(this.state.category.get('sub_categories') || []).map(function(sc) {
                                                                                return (<li> <a onClick={self.onSCClick.bind(self, sc)}>{sc.name}</a></li>)
                                                                              })}
          </ul>

          <FilterCriteriaSelector filterCriterias={this.state.category.get('filter_criterias')} onFCClick={this.onFCClick} />
          
      </div>

        <div className='col-md-10'>

          <LinkBanner locationName="category" locationId={Number(this.getParams().id)} />

        <h3> Kategorija - {this.state.category.get('name')}</h3>
        Number of items in this category: {this.state.items.length}
      <div>
          <AppliedFiltersList filters={this.appliedCategoryFiltersArray()} onRemove={self.removeAppliedFilter} />
       
      </div>


        <div> total count is : {this.state.items.totalCount}</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>
        );
    },
    appliedCategoryFiltersArray: 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 categoryId = this.getParams().id;

      this.filter = this.getQuery();
      var offset = this.filter.offset || 0;
      var limit = this.filter.limit || Globals.DefaultPageSize;

      this.setState({
        filter: this.filter,
        pagination: {
          offset: offset,
          limit: limit
        }
      });
      ItemActions.loadByCategory(categoryId, offset, limit, this.filter);
      CategoryActions.loadCategoryDetails(categoryId);
    },
    componentWillReceiveProps: function() {
      this.update();
    },
    componentDidMount: function() {
      this.update();

      ItemStore.addChangeListener(this._onChange);
      CategoryStore.addChangeListener(this._onChange);
    },
    componentWillUnmount: function() {
      ItemStore.removeChangeListener(this._onChange);
      CategoryStore.removeChangeListener(this._onChange);
    },
    _onChange: function() {
      if(this.isMounted()) {
        this.setState({
          items: ItemStore.getItemsForCategory(),
          category: CategoryStore.getCategoryDetails()
        });
      }
    }

});

module.exports = ByCategory;