started to work on filters on the frontend
This commit is contained in:
@@ -1,10 +1,11 @@
|
|||||||
|
|
||||||
|
|
||||||
get '/category' do
|
get '/category' do
|
||||||
Category.order(:name).all.to_json(include: :sub_categories)
|
Category.order(:name).all.to_json(:include => [:sub_categories, :filter_criterias =>{:include => :filter_criteria_values} ])
|
||||||
|
|
||||||
end
|
end
|
||||||
|
|
||||||
get '/category/:id' do
|
get '/category/:id' do
|
||||||
id = params[:id].to_i
|
id = params[:id].to_i
|
||||||
Category.find(id).to_json(include: :sub_categories)
|
Category.find(id).to_json(:include => [:sub_categories, :filter_criterias =>{:include => :filter_criteria_values} ])
|
||||||
end
|
end
|
||||||
|
|||||||
@@ -21,11 +21,21 @@ var NavigationActions = {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
goToCategory: function(category,section) {
|
goToCategory: function(category,section, query) {
|
||||||
console.log("Going to item details");
|
console.log("Going to item details");
|
||||||
|
var url ='/sekcija/' + section.get('name') +'/kategorija/'+ category.id + '/' + category.name;
|
||||||
|
|
||||||
|
var q = '?';
|
||||||
|
if(query) {
|
||||||
|
for(var key in query) {
|
||||||
|
if (query.hasOwnProperty(key)) {
|
||||||
|
q += "&" + key + '=' + query[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
AppDispatcher.handleAction({
|
AppDispatcher.handleAction({
|
||||||
actionType: NavigationConstants.CHANGE_URL,
|
actionType: NavigationConstants.CHANGE_URL,
|
||||||
url: '/sekcija/' + section.get('name') +'/kategorija/'+ category.id + '/' + category.name
|
url: (url + q)
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -40,4 +50,4 @@ var NavigationActions = {
|
|||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = NavigationActions;
|
module.exports = NavigationActions;
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
var React = require('react'),
|
var React = require('react'),
|
||||||
Router = require('react-router'),
|
Router = require('react-router'),
|
||||||
Category = require('../../models/category'),
|
Category = require('../../models/category'),
|
||||||
|
Section = require('../../models/section'),
|
||||||
ItemCollection = require('../../models/itemCollection'),
|
ItemCollection = require('../../models/itemCollection'),
|
||||||
ItemActions = require('../../actions/itemActions.js'),
|
ItemActions = require('../../actions/itemActions.js'),
|
||||||
CategoryActions = require('../../actions/categoryActions.js'),
|
CategoryActions = require('../../actions/categoryActions.js'),
|
||||||
@@ -20,17 +21,49 @@ var ByCategory = React.createClass({
|
|||||||
items: items
|
items: items
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
onFCClick: function(fc, fcv) {
|
||||||
|
|
||||||
|
alert(fc.field_name);
|
||||||
|
var q = {};
|
||||||
|
q[fc.field_name] = fcv.filter_value;
|
||||||
|
// TODO: fix this, clean this up
|
||||||
|
var s = new Section({name: 'meho'});
|
||||||
|
var c = this.state.category;
|
||||||
|
NavigationActions.goToCategory({id: c.get('id'), name: c.get('name')}, s, q)
|
||||||
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
|
var self = this;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className='col-md-2'>
|
<div className='col-md-2'>
|
||||||
Here goes section for refining search, by section
|
<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>
|
||||||
|
|
||||||
<div className='col-md-10'>
|
<div className='col-md-10'>
|
||||||
|
|
||||||
<h3> Browse products by category : {this.state.category.get('name')}</h3>
|
<h3> Browse products by category : {this.state.category.get('name')}</h3>
|
||||||
Number of items in this category: {this.state.items.length}
|
Number of items in this category: {this.state.items.length}
|
||||||
|
<div>need to filter brand: {this.getQuery().brand}</div>
|
||||||
<ItemList items={this.state.items} />
|
<ItemList items={this.state.items} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,7 +4,9 @@ var Globals = require('../globals');
|
|||||||
var Category = Backbone.Model.extend({
|
var Category = Backbone.Model.extend({
|
||||||
urlRoot : Globals.ApiUrl + '/category',
|
urlRoot : Globals.ApiUrl + '/category',
|
||||||
defaults : {
|
defaults : {
|
||||||
name: ''
|
name: '',
|
||||||
|
filter_criterias: [],
|
||||||
|
sub_categories: []
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user