minor refactoring of filters
This commit is contained in:
21
front-ui/app/components/browsing/appliedFiltersList.js
Normal file
21
front-ui/app/components/browsing/appliedFiltersList.js
Normal file
@@ -0,0 +1,21 @@
|
||||
var React = require('react'),
|
||||
Router = require('react-router');
|
||||
|
||||
var AppliedFiltersList = React.createClass({
|
||||
render : function() {
|
||||
var self = this;
|
||||
return (<div>
|
||||
|
||||
{this.props.filters.map(function(acf) {
|
||||
return (<span>
|
||||
{acf.name} : {acf.value} <button onClick={self.props.onRemove.bind(self, acf.name)}>X</button>
|
||||
|
||||
</span>)
|
||||
})}
|
||||
|
||||
</div>)
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = AppliedFiltersList;
|
||||
@@ -13,8 +13,11 @@ var React = require('react'),
|
||||
LinkBanner = require('../linkBanner/linkBanner'),
|
||||
Globals = require('../../globals');
|
||||
|
||||
var FilterCriteriaSelector = require('./filterCriteriaSelector');
|
||||
var AppliedFiltersList = require('./appliedFiltersList');
|
||||
|
||||
var ByCategory = React.createClass({
|
||||
mixins: [Router.State],
|
||||
mixins: [Router.State],
|
||||
getInitialState: function() {
|
||||
var category = new Category();
|
||||
var items = new ItemCollection();
|
||||
@@ -50,11 +53,6 @@ var ByCategory = React.createClass({
|
||||
},
|
||||
render: function() {
|
||||
var self = this;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='col-md-2'>
|
||||
@@ -66,19 +64,8 @@ var ByCategory = React.createClass({
|
||||
})}
|
||||
</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>)
|
||||
})}
|
||||
<FilterCriteriaSelector filterCriterias={this.state.category.get('filter_criterias')} onFCClick={this.onFCClick} />
|
||||
|
||||
</div>
|
||||
|
||||
<div className='col-md-10'>
|
||||
@@ -88,12 +75,8 @@ var ByCategory = React.createClass({
|
||||
<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>)
|
||||
})}
|
||||
<AppliedFiltersList filters={this.appliedCategoryFiltersArray()} onRemove={self.removeAppliedFilter} />
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
28
front-ui/app/components/browsing/filterCriteriaSelector.js
Normal file
28
front-ui/app/components/browsing/filterCriteriaSelector.js
Normal file
@@ -0,0 +1,28 @@
|
||||
var React = require('react'),
|
||||
Router = require('react-router');
|
||||
|
||||
var FilterCriteriaSelector = React.createClass({
|
||||
render : function() {
|
||||
var self = this;
|
||||
return (<div>
|
||||
|
||||
{this.props.filterCriterias.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.props.onFCClick.bind(self,fc, fcv)}>{fcv.filter_text}</a>
|
||||
</li>)
|
||||
})}
|
||||
</ul>
|
||||
</div>)
|
||||
})}
|
||||
|
||||
</div>)
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = FilterCriteriaSelector;
|
||||
Reference in New Issue
Block a user