Small fixes for pagination.

frontend/src/js/component/wb-app.js

@@ -5,15 +5,16 @@ import WBPagination from 'wb-pagination';
 import WBProjectListing from 'wb-project-listing';
 
 class WBApp extends Component {
-  render() {
+  render({}, { activePage }) {
     return (
       <div>
         <h1>WBApp</h1>
         <WBProjectListing arvHost="api.arkau.roche.com"
-          arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9" />
+          arvToken="v2/arkau-gj3su-uf4hnu2o2qkvm8j/15kla38mafzq6b31d5t74ynhk6iuy32v1ticslodr0obvvhde9"
+          itemsPerPage="5" />
         <WBPagination numPages={ 0 } activePage={ 0 } />
-        <WBPagination numPages={ 100 } activePage={ 0 }
-          onPageChanged={ idx => alert(idx) } />
+        <WBPagination numPages={ 100 } activePage={ activePage || 0 }
+          onPageChanged={ i => this.setState({ 'activePage': i }) } />
         <WBTable
           columns={ [ 'Name', 'Description', 'Size' ] }
           rows={ [

frontend/src/js/widget/wb-pagination.js

@@ -16,7 +16,7 @@ class WBPagination extends Component {
       visible[i] = true;
 
     visible = Object.keys(visible).map(n => Number(n));
-    visible.sort();
+    visible.sort((a, b) => (a - b));
 
     let res = [];
     let prev = 0;
@@ -24,7 +24,7 @@ class WBPagination extends Component {
     res.push((
       <li class={ activePage === 0 ? "page-item disabled" : "page-item" }>
         <a class="page-link" href="#"
-          onclick={ () => onPageChanged(activePage - 1) }>Previous</a>
+          onclick={ e => { e.preventDefault(); onPageChanged(activePage - 1); } }>Previous</a>
       </li>
     ));
 
@@ -34,7 +34,7 @@ class WBPagination extends Component {
         res.push((
           <li class="page-item">
             <a class="page-link" href="#"
-              onclick={ () => onPageChanged(i - 1) }>...</a>
+              onclick={ e => { e.preventDefault(); onPageChanged(i - 1); } }>...</a>
           </li>
         ));
       prev = i;
@@ -42,7 +42,7 @@ class WBPagination extends Component {
       res.push((
         <li class={ i === activePage ? "page-item active" : "page-item" }>
           <a class="page-link" href="#"
-            onclick={ () => onPageChanged(i) }>{ i + 1 }</a>
+            onclick={ e => { e.preventDefault(); onPageChanged(i); } }>{ i + 1 }</a>
         </li>
       ));
     }
@@ -50,7 +50,7 @@ class WBPagination extends Component {
     res.push((
       <li class={ activePage >= numPages - 1 ? "page-item disabled" : "page-item" }>
         <a class="page-link" href="#"
-          onclick={ () => onPageChanged(activePage + 1) }>Next</a>
+          onclick={ e => { e.preventDefault(); onPageChanged(activePage + 1); } }>Next</a>
       </li>
     ));