Use api per-page respond parameters for pagination

app/api/chemotion/reaction_api.rb

@@ -26,7 +26,7 @@ module Chemotion
       params do
         optional :collection_id, type: Integer, desc: "Collection id"
       end
-      paginate per_page: 5, max_per_page: 25, offset: 0
+      paginate per_page: 7, max_per_page: 25, offset: 0
 
       get do
         scope = if params[:collection_id]

app/api/chemotion/sample_api.rb

@@ -46,7 +46,7 @@ module Chemotion
       params do
         optional :collection_id, type: Integer, desc: "Collection id"
       end
-      paginate per_page: 5, max_per_page: 25, offset: 0
+      paginate per_page: 7, max_per_page: 25, offset: 0
 
       get do
         scope = if params[:collection_id]

app/assets/javascripts/components/ElementsTable.js

@@ -37,14 +37,19 @@ export default class ElementsTable extends React.Component {
   }
 
   onChangeUI(state) {
-    let type = this.props.type;
-    let page = state.pagination && state.pagination[type] && state.pagination[type].page;
-    if (page) {
-      this.setState({
-        activePage: parseInt(page)
-      });
+    const type = this.props.type;
+    const pagination = state.pagination && state.pagination[type];
+    if(pagination) {
+      const {page, perPage} = pagination;
+      if (page) {
+        this.setState({
+          activePage: parseInt(page),
+          pageSize: parseInt(perPage)
+        });
+      }
     }
 
+
     //console.log('ElementsType: ' + type + '#activePage ' + page);
 
     let {checkedIds, uncheckedIds, checkedAll} = state[this.props.type];

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

@@ -30,7 +30,8 @@ export default class ReactionsFetcher {
             elements: json.reactions.map((r) => new Reaction(r)),
             totalElements: response.headers.get('X-Total'),
             page: response.headers.get('X-Page'),
-            pages: response.headers.get('X-Total-Pages')
+            pages: response.headers.get('X-Total-Pages'),
+            perPage: response.headers.get('X-Per-Page')
           }
         })
       }).catch((errorMessage) => {

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

@@ -30,7 +30,8 @@ export default class SamplesFetcher {
             elements: json.samples.map((s) => new Sample(s)),
             totalElements: response.headers.get('X-Total'),
             page: response.headers.get('X-Page'),
-            pages: response.headers.get('X-Total-Pages')
+            pages: response.headers.get('X-Total-Pages'),
+            perPage: response.headers.get('X-Per-Page')
           }
         })
       }).catch((errorMessage) => {

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

@@ -28,7 +28,8 @@ export default class ScreensFetcher {
             elements: json.screens.map (s => new Screen(s)),
             totalElements: response.headers.get('X-Total'),
             page: response.headers.get('X-Page'),
-            pages: response.headers.get('X-Total-Pages')
+            pages: response.headers.get('X-Total-Pages'),
+            perPage: response.headers.get('X-Per-Page')
           }
         })
       }).catch((errorMessage) => {

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

@@ -28,7 +28,8 @@ export default class WellplatesFetcher {
             elements: json.wellplates.map((w) => new Wellplate(w)),
             totalElements: response.headers.get('X-Total'),
             page: response.headers.get('X-Page'),
-            pages: response.headers.get('X-Total-Pages')
+            pages: response.headers.get('X-Total-Pages'),
+            perPage: response.headers.get('X-Per-Page')
           }
         })
       }).catch((errorMessage) => {