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

paging done, needs some additional refactoring

Browse Source
This commit is contained in:
Edin Dazdarevic
2015-02-15 14:21:50 +01:00
parent ba22ea8bd7
commit f675f8b024
11 changed files with 136 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,8 @@ var ByCategory = React.createClass({
return {
category: category,
items: items,
filter :{}
filter :{},
pagination: {}
};
},
filter: {},
@@ -30,16 +31,24 @@ var ByCategory = React.createClass({
var category = this.state.category;
this.filter[fc.field_name] = fcv.filter_value;
NavigationActions.goToCategory(category, section, this.filter);
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);
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'>
@@ -54,7 +63,7 @@ var ByCategory = React.createClass({
{this.state.category.get('filter_criterias').map(function(fc) {
return (<div>
<div className='h4'>{fc.title}</div>
<div className='h4' style={{color: '#cd3071'}}>{fc.title}</div>
<ul>
{fc.filter_criteria_values.map(function(fcv) {
return (<li>
@@ -68,7 +77,7 @@ var ByCategory = React.createClass({
<div className='col-md-10'>
<h3> Browse products by category : {this.state.category.get('name')}</h3>
<h3> Kategorija - {this.state.category.get('name')}</h3>
Number of items in this category: {this.state.items.length}
<div>
{this.appliedCategoryFiltersArray().map(function(acf) {
@@ -80,7 +89,8 @@ var ByCategory = React.createClass({
</div>
<ItemList items={this.state.items} />
<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>
);
@@ -88,7 +98,7 @@ var ByCategory = React.createClass({
appliedCategoryFiltersArray: function() {
var filters = [];
for(var key in this.state.filter) {
if(this.state.filter.hasOwnProperty(key)) {
if(this.state.filter.hasOwnProperty(key) && key !== 'limit' && key !== 'offset') {
filters.push({name: key, value: this.state.filter[key]});
}
}
@@ -98,21 +108,36 @@ var ByCategory = React.createClass({
var categoryId = this.getParams().id;
this.filter = this.getQuery();
var offset = this.filter.offset || 0;
var limit = this.filter.limit || 30;
this.setState({
filter: this.filter
filter: this.filter,
pagination: {
offset: offset,
limit: limit
}
});
ItemActions.loadByCategory(categoryId, this.filter);
ItemActions.loadByCategory(categoryId, offset, limit, this.filter);
CategoryActions.loadCategoryDetails(categoryId);
},
componentDidMount: function() {
var categoryId = this.getParams().id;
this.filter = this.getQuery();
var offset = this.filter.offset || 0;
var limit = this.filter.limit || 30;
this.setState({
filter: this.filter
filter: this.filter,
pagination: {
offset: offset,
limit: limit
}
});
ItemActions.loadByCategory(categoryId, this.getQuery());
ItemActions.loadByCategory(categoryId, offset, limit, this.getQuery());
CategoryActions.loadCategoryDetails(categoryId);
ItemStore.addChangeListener(this._onChange);

49
front-ui/app/components/items/itemList.js
View File

@@ -3,7 +3,12 @@ var SingleItem = require('./singleItem');
var ItemCollection = require('../../models/itemCollection.js');
var ItemList = React.createClass({
changePage: function(page, e) {
e.preventDefault();
if(this.props.onPageChange) {
this.props.onPageChange(page);
}
},
render: function() {
var items = this.props.items.models.map( function(item) {
@@ -18,10 +23,50 @@ var ItemList = React.createClass({
<ul className="item_list">
{items}
</ul>
{this.getPages()}
</div>
</div>
);
}
},
getPages: function() {
if (!this.props.paginationEnabled) {
return "";
}
var nrOfPages = Math.ceil(this.props.total/ this.props.limit);
if (nrOfPages === 1) {
return "";
}
var maxSlots = 3;
var selectedIndex = Math.floor(this.props.currentOffset / this.props.limit);
var start, end;
start = selectedIndex - Math.floor(maxSlots / 2);
end = selectedIndex + Math.floor(maxSlots / 2 ) + 1;
if (start < 0) start = 0;
if (end > nrOfPages) end = nrOfPages;
if ((end - start) < maxSlots) {
start = Math.max(0, end - maxSlots);
end = Math.min(nrOfPages, start + maxSlots);
}
var pages = [];
for(var i = start; i < end; i++) {
var cn = i === selectedIndex ? "active": "";
pages.push(<li className={cn}><a onClick={this.changePage.bind(this, i)}href="#">{i + 1}</a></li>)
}
return (
<nav>
<ul className="pagination">
{pages}
</ul>
</nav>)
}
});