Added pagination to books overview

frontend/package.json

@@ -14,6 +14,7 @@
     "axios": "^0.17.0",
     "vue": "^2.5.2",
     "vue-awesome": "^2.3.4",
+    "vue-paginate": "^3.5.1",
     "vue-resource": "^1.3.4",
     "vue-router": "^3.0.1"
   },

frontend/src/auth/index.js

@@ -1,5 +1,5 @@
 import {HTTP} from '../http-common'
-import {router} from '../router'
+import router from '../router'
 // const API_URL = 'http://localhost:8082/api/v1/'
 // const LOGIN_URL = 'http://localhost:8082/login'
 

frontend/src/components/Books.vue

@@ -1,41 +1,43 @@
 <template>
   <div v-if="user.authenticated">
     <h1>{{ booksTitle }}</h1>
+    <div class="ui info message" v-if="loading">
+      <icon name="refresh" spin></icon>&nbsp;&nbsp;
+      Loading...
+    </div>
+    <div v-if="!loading">
       <form id="search">
         <div class="ui icon input">
           <input placeholder="Search..." type="text" v-model="searchQuery">
           <i class="search icon"></i>
         </div>
       </form>
+      <paginate
+        name="books"
+        :list="filteredData"
+        :per="25"
+        tag="div"
+      >
         <grid
-      :data="books"
+          :data="paginated('books')"
           :columns="gridColumns"
-      :filter-key="searchQuery">
+        >
         </grid>
-   <!-- <table class="ui celled table">
+      </paginate>
-      <thead>
+      <div class="pagination-container">
-        <tr>
+        <paginate-links
-          <th><a @click="sortBy('Title')">Title</a></th>
+          tag="div"
-          <th>ISBN</th>
+          for="books"
-          <th>Year</th>
+          :hide-single-page="true"
-          <th>Price</th>
+          :classes="{
-          <th>Status</th>
+            'ul': ['ui', 'pagination', 'menu'],
-          <th>Publisher</th>
+            'li': 'item',
-          <th>Actions</th>
+            'li a': 'pagination-link'
-        </tr>
+          }"
-      </thead>
+        >
-      <tbody>
+        </paginate-links>
-        <tr v-for="book in books">
+      </div>
-          <td>{{ book.Title }}</td>
+    </div>
-          <td>{{ book.Isbn }}</td>
-          <td>{{ book.Year }}</td>
-          <td>{{ book.Price }}€</td>
-          <td>{{ book.Status }}</td>
-          <td>{{ book.PublisherFull.Name }}</td>
-          <td><a class="button">Do</a> </td>
-        </tr>
-      </tbody>
-    </table>-->
   </div>
 </template>
 
@@ -51,20 +53,37 @@ export default {
       booksTitle: 'Books Overview',
       books: [],
       searchQuery: '',
-      gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Status', 'Publisher']
+      gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Status', 'Publisher'],
-    }
+      loading: false,
-  },
+      paginate: ['books']
-  methods: {
-    sortBy (sortKey) {
-      this.reverse = (this.sortKey === sortKey) ? !this.reverse : false
-
-      this.sortKey = sortKey
     }
   },
   created () {
+    this.loadBooks()
+  },
+  watch: {
+    // call again the method if the route changes
+    '$route': 'loadBooks'
+  },
+  computed: {
+    filteredData: function () {
+      var filterKey = this.searchQuery && this.searchQuery.toLowerCase()
+      var data = this.books
+      if (filterKey) {
+        data = data.filter(function (row) {
+          return Object.keys(row).some(function (key) {
+            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
+          })
+        })
+      }
+      return data
+    }
+  },
+  methods: {
+    loadBooks () {
+      this.loading = true
       HTTP.get(`books`)
         .then(response => {
-        // this.books = response.data
           let bs = response.data
           let i = 0
           for (const b in bs) {
@@ -78,10 +97,44 @@ export default {
             }
             i++
           }
+          this.loading = false
         })
         .catch(e => {
+          this.loading = false
           this.errors.push(e)
         })
     }
+  }
 }
 </script>
+
+<style>
+  a.pagination-link{
+    margin: -5px -1.14286em -18px;
+    display: block;
+    position: absolute;
+    cursor: pointer;
+    padding: 0.928571em 1.14286em;
+    color: rgba(0,0,0,.87);
+
+    -webkit-transition: background-color 200ms; /* Safari */
+    transition: background-color 200ms;
+  }
+
+  a.pagination-link:hover{
+    background: rgba(0,0,0,.02);
+  }
+
+  .pagination{
+    padding: 0;
+  }
+
+  .pagination-container{
+    margin-top: 1rem;
+    text-align: center;
+  }
+
+  #search{
+    margin-bottom: 1rem;
+  }
+</style>

frontend/src/main.js

@@ -11,6 +11,9 @@ import Grid from './components/Grid'
 import 'vue-awesome/icons'
 import Icon from 'vue-awesome/components/Icon'
 
+// Paginate import
+import VuePaginate from 'vue-paginate'
+
 // Icons setup
 Vue.component('icon', Icon)
 
@@ -20,6 +23,9 @@ auth.checkAuth()
 // Register Grid component
 Vue.component('grid', Grid)
 
+// Paginate setup
+Vue.use(VuePaginate)
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',