136 lines
4.4 KiB
JavaScript
136 lines
4.4 KiB
JavaScript
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');
|
|
|
|
var ByCategory = React.createClass({
|
|
mixins: [Router.State],
|
|
getInitialState: function() {
|
|
var category = new Category();
|
|
var items = new ItemCollection();
|
|
return {
|
|
category: category,
|
|
items: items,
|
|
filter :{}
|
|
};
|
|
},
|
|
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);
|
|
},
|
|
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);
|
|
},
|
|
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'>{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> Browse products by category : {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>
|
|
|
|
|
|
<ItemList items={this.state.items} />
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
appliedCategoryFiltersArray: function() {
|
|
var filters = [];
|
|
for(var key in this.state.filter) {
|
|
if(this.state.filter.hasOwnProperty(key)) {
|
|
filters.push({name: key, value: this.state.filter[key]});
|
|
}
|
|
}
|
|
return filters;
|
|
},
|
|
componentWillReceiveProps: function() {
|
|
var categoryId = this.getParams().id;
|
|
|
|
this.setState({
|
|
filter: this.filter
|
|
});
|
|
ItemActions.loadByCategory(categoryId, this.filter);
|
|
CategoryActions.loadCategoryDetails(categoryId);
|
|
},
|
|
componentDidMount: function() {
|
|
var categoryId = this.getParams().id;
|
|
|
|
this.filter = this.getQuery();
|
|
this.setState({
|
|
filter: this.filter
|
|
});
|
|
|
|
ItemActions.loadByCategory(categoryId, this.getQuery());
|
|
CategoryActions.loadCategoryDetails(categoryId);
|
|
|
|
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;
|