senaduka/old-ribica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

byCategory component small refactoring

Browse Source
This commit is contained in:
Edin Dazdarevic
2015-02-15 14:50:31 +01:00
parent e902b27986
commit f5254cd316
2 changed files with 56 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
front-ui/app/components/browsing/byCategory.js
View File

@@ -9,20 +9,21 @@ var React = require('react'),
ItemStore = require('../../stores/itemStore'), ItemStore = require('../../stores/itemStore'),
NavigationStore = require('../../stores/navigationStore'), NavigationStore = require('../../stores/navigationStore'),
ItemList = require('../items/itemList'), ItemList = require('../items/itemList'),
NavigationActions = require('../../actions/navigationActions'); NavigationActions = require('../../actions/navigationActions'),
Globals = require('../../globals');
var ByCategory = React.createClass({ var ByCategory = React.createClass({
mixins: [Router.State], mixins: [Router.State],
getInitialState: function() { getInitialState: function() {
var category = new Category(); var category = new Category();
var items = new ItemCollection(); var items = new ItemCollection();
return { return {
category: category, category: category,
items: items, items: items,
filter :{}, filter :{},
pagination: {} pagination: {}
}; };
}, },
filter: {}, filter: {},
onFCClick: function(fc, fcv) { onFCClick: function(fc, fcv) {
var q = {}; var q = {};
@@ -50,46 +51,46 @@ var ByCategory = React.createClass({
var self = this; var self = this;
return ( return (
<div> <div>
<div className='col-md-2'> <div className='col-md-2'>
<div className='h4'>{this.state.category.get('name')}</div> <div className='h4'>{this.state.category.get('name')}</div>
<div>Podkategorije</div> <div>Podkategorije</div>
<ul> <ul>
{(this.state.category.get('sub_categories') || []).map(function(sc) { {(this.state.category.get('sub_categories') || []).map(function(sc) {
return (<li> <a>{sc.name}</a></li>) return (<li> <a>{sc.name}</a></li>)
})} })}
</ul> </ul>
{this.state.category.get('filter_criterias').map(function(fc) { {this.state.category.get('filter_criterias').map(function(fc) {
return (<div> return (<div>
<div className='h4' style={{color: '#cd3071'}}>{fc.title}</div> <div className='h4' style={{color: '#cd3071'}}>{fc.title}</div>
<ul> <ul>
{fc.filter_criteria_values.map(function(fcv) { {fc.filter_criteria_values.map(function(fcv) {
return (<li> return (<li>
<a onClick={self.onFCClick.bind(self,fc, fcv)}>{fcv.filter_text}</a> <a onClick={self.onFCClick.bind(self,fc, fcv)}>{fcv.filter_text}</a>
</li>) </li>)
})} })}
</ul> </ul>
</div>) </div>)
})} })}
</div> </div>
<div className='col-md-10'> <div className='col-md-10'>
<h3> Kategorija - {this.state.category.get('name')}</h3> <h3> Kategorija - {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> <div>
{this.appliedCategoryFiltersArray().map(function(acf) { {this.appliedCategoryFiltersArray().map(function(acf) {
return (<span> return (<span>
{acf.name} : {acf.value} <button onClick={self.removeAppliedFilter.bind(self, acf.name)}>X</button> {acf.name} : {acf.value} <button onClick={self.removeAppliedFilter.bind(self, acf.name)}>X</button>
</span>) </span>)
})} })}
</div> </div>
<div> total count is : {this.state.items.totalCount}</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} /> <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>
</div> </div>
@@ -104,13 +105,12 @@ var ByCategory = React.createClass({
} }
return filters; return filters;
}, },
componentWillReceiveProps: function() { update: function() {
var categoryId = this.getParams().id; var categoryId = this.getParams().id;
this.filter = this.getQuery(); this.filter = this.getQuery();
var offset = this.filter.offset || 0; var offset = this.filter.offset || 0;
var limit = this.filter.limit || 30; var limit = this.filter.limit || Globals.DefaultPageSize;
this.setState({ this.setState({
filter: this.filter, filter: this.filter,
@@ -122,23 +122,11 @@ var ByCategory = React.createClass({
ItemActions.loadByCategory(categoryId, offset, limit, this.filter); ItemActions.loadByCategory(categoryId, offset, limit, this.filter);
CategoryActions.loadCategoryDetails(categoryId); CategoryActions.loadCategoryDetails(categoryId);
}, },
componentWillReceiveProps: function() {
this.update();
},
componentDidMount: function() { componentDidMount: function() {
var categoryId = this.getParams().id; this.update();
this.filter = this.getQuery();
var offset = this.filter.offset || 0;
var limit = this.filter.limit || 30;
this.setState({
filter: this.filter,
pagination: {
offset: offset,
limit: limit
}
});
ItemActions.loadByCategory(categoryId, offset, limit, this.getQuery());
CategoryActions.loadCategoryDetails(categoryId);
ItemStore.addChangeListener(this._onChange); ItemStore.addChangeListener(this._onChange);
CategoryStore.addChangeListener(this._onChange); CategoryStore.addChangeListener(this._onChange);

1
front-ui/app/globals.js
View File

@@ -1,5 +1,6 @@
module.exports = { module.exports = {
ApiUrl: 'http://localhost:4567', ApiUrl: 'http://localhost:4567',
DefaultPageSize: 18,
FormatCurrency: function(amount_s) { FormatCurrency: function(amount_s) {
var amount = parseFloat(amount_s); var amount = parseFloat(amount_s);
return ( amount.toFixed(2) + " KM" ) return ( amount.toFixed(2) + " KM" )