Merge pull request #43 from ninjaconcept/43-pagination

Pagination

Gemfile

@@ -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

Gemfile.lock

@@ -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

app/api/chemotion/sample_api.rb

@@ -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"

app/assets/javascripts/components/ElementsTable.js

@@ -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
 

app/assets/javascripts/components/actions/ElementActions.js

@@ -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);
       });

app/assets/javascripts/components/fetchers/SamplesFetcher.js

@@ -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);
       });

app/assets/javascripts/components/stores/ElementStore.js

@@ -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

app/assets/javascripts/components/stores/UIStore.js

@@ -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) {