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

var React = require('react'),
    Router = require('react-router'),
    Category = require('../../models/category'),
    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'),
    Globals = require('../../globals');

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

    },
    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>{sc.name}</a></li>)
                                                                              })}
          </ul>

          {this.state.category.get('filter_criterias').map(function(fc) {
                                                                          return (<div>

                                                                            <div className='h4' style={{color: '#cd3071'}}>{fc.title}</div>
                                                                            <ul>
                                                                            {fc.filter_criteria_values.map(function(fcv) {
                                                                                                                           return (<li>
                                                                                                                             <a onClick={self.onFCClick.bind(self,fc, fcv)}>{fcv.filter_text}</a>
                                                                                                                             </li>)
                                                                                                                         })}
                                                                            </ul>
                                                                            </div>)
                                                                        })}
      </div>

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

        <h3> Kategorija - {this.state.category.get('name')}</h3>
        Number of items in this category: {this.state.items.length}
      <div>
      {this.appliedCategoryFiltersArray().map(function(acf) {
                                                              return (<span>
                                                                {acf.name} : {acf.value} <button onClick={self.removeAppliedFilter.bind(self, acf.name)}>X</button>

                                                                </span>)
                                                            })} 
      </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;