Commit 1e98c4b3 authored by Marco Sehrer's avatar Marco Sehrer
Browse files

Merge pull request #43 from ninjaconcept/43-pagination

Pagination
parents f3297ee7 98f5ecdb
......@@ -33,6 +33,9 @@ gem 'grape'
gem 'hashie-forbidden_attributes'
gem 'grape-active_model_serializers'
gem 'kaminari'
gem 'grape-kaminari'
gem 'awesome_print'
group :development, :test do
......
......@@ -101,6 +101,9 @@ GEM
grape-active_model_serializers (1.3.2)
active_model_serializers (>= 0.9.0)
grape
grape-kaminari (0.1.8)
grape
kaminari
haml (4.0.6)
tilt
haml-rails (0.9.0)
......@@ -127,6 +130,9 @@ GEM
railties (>= 4.2.0)
thor (>= 0.14, < 2.0)
json (1.8.3)
kaminari (0.16.3)
actionpack (>= 3.0.0)
activesupport (>= 3.0.0)
loofah (2.0.2)
nokogiri (>= 1.5.9)
mail (2.6.3)
......@@ -252,10 +258,12 @@ DEPENDENCIES
factory_girl_rails
grape
grape-active_model_serializers
grape-kaminari
haml-rails (~> 0.9)
hashie-forbidden_attributes
jbuilder (~> 2.0)
jquery-rails
kaminari
pg
rails (= 4.2.0)
rspec-rails
......
......@@ -2,6 +2,8 @@ module Chemotion
class SampleAPI < Grape::API
# TODO ensure user is authenticated
include Grape::Kaminari
resource :samples do
#todo: more general search api
......@@ -9,12 +11,15 @@ module Chemotion
params do
optional :collection_id, type: Integer, desc: "Collection id"
end
paginate per_page: 5, max_per_page: 25, offset: 0
get do
if(params[:collection_id])
scope = if params[:collection_id]
Collection.where("user_id = ? OR shared_by_id = ?", current_user.id, current_user.id).find(params[:collection_id]).samples
else
Sample.all
Sample
end
paginate(scope)
end
desc "Return serialized sample by id"
......
......@@ -44,7 +44,11 @@ export default class ElementsTable extends React.Component {
}
onChange(state) {
const elements = state.samples;
console.log("onChange")
console.log(state.elements.samples)
const elements = state.elements.samples.elements;
const totalElements = state.elements.samples.totalElements;
let currentElement;
if(state.currentElement && state.currentElement.type == this.props.type) {
......@@ -56,7 +60,7 @@ export default class ElementsTable extends React.Component {
let pagination = UIStore.getState().pagination;
let page = pagination.page && parseInt(pagination.page) || 1;
let numberOfPages = Math.ceil(elements.length / this.state.pageSize);
let numberOfPages = Math.ceil(totalElements / this.state.pageSize);
if(page > numberOfPages) {
page = 1
}
......@@ -81,11 +85,9 @@ export default class ElementsTable extends React.Component {
// Pagination: startAt...Arrayindex to start with...
// TODO Move to PaginationUtils?
let pageSize = this.state.pageSize;
let startAt = (this.state.activePage - 1) * pageSize;
let endAt = startAt + pageSize;
let elementsOnActivePage = this.state.elements.slice(startAt, endAt);
let elements = this.state.elements;
return elementsOnActivePage.map((element, index) => {
return elements.map((element, index) => {
let optionalLabelColumn
let optionalMoleculeColumn
......
......@@ -12,10 +12,10 @@ class ElementActions {
});
}
fetchSamplesByCollectionId(id) {
SamplesFetcher.fetchByCollectionId(id)
fetchSamplesByCollectionId(id, queryParams={}) {
SamplesFetcher.fetchByCollectionId(id, queryParams)
.then((result) => {
this.dispatch(result['samples']);
this.dispatch(result);
}).catch((errorMessage) => {
console.log(errorMessage);
});
......
......@@ -17,15 +17,21 @@ export default class SamplesFetcher {
return promise;
}
static fetchByCollectionId(id) {
let api = id == 'all' ? '/api/v1/samples.json' : '/api/v1/samples.json?collection_id=' + id
static fetchByCollectionId(id, queryParams={}) {
let page = queryParams.page || 1
let api = id == 'all' ? `/api/v1/samples.json?page=${page}` : `/api/v1/samples.json?collection_id=${id}&page=${page}`
let promise = fetch(api, {
credentials: 'same-origin'
})
.then((response) => {
return response.json()
}).then((json) => {
return json;
return response.json().then((json) => {
return {
elements: json.samples,
totalElements: response.headers.get('X-Total'),
page: response.headers.get('X-Page'),
pages: response.headers.get('X-Total-Pages')
}
})
}).catch((errorMessage) => {
console.log(errorMessage);
});
......
......@@ -6,7 +6,15 @@ import UIStore from './UIStore';
class ElementStore {
constructor() {
this.state = {
samples: [],
elements: {
samples: {
elements: [],
totalElements: [],
page: null,
pages: null,
per_page: null
}
},
currentElement: null
};
......@@ -23,7 +31,7 @@ class ElementStore {
}
handleFetchSamplesByCollectionId(result) {
this.state.samples = result;
this.state.elements.samples = result;
}
// update stored sample if it has been updated
......
......@@ -28,11 +28,11 @@ class UIStore {
}
handleCheckAllElements(type) {
let elements = ElementStore.getState();
let {elements} = ElementStore.getState();
switch(type) {
case 'sample':
let sampleIds = elements.samples.map(sample => sample.id);
let sampleIds = elements.samples.elements.map(sample => sample.id);
this.state.checkedSampleIds = this.state.checkedSampleIds.concat(sampleIds);
break;
}
......@@ -83,7 +83,7 @@ class UIStore {
handleSelectCollection(collection) {
this.state.currentCollectionId = collection.id;
// TODO also for reactions and so on
ElementActions.fetchSamplesByCollectionId(collection.id)
ElementActions.fetchSamplesByCollectionId(collection.id, this.state.pagination)
}
handleSetPagination(pagination) {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment