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>
-    <form id="search">
-      <div class="ui icon input">
-        <input placeholder="Search..." type="text" v-model="searchQuery">
-        <i class="search icon"></i>
+    <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="paginated('books')"
+          :columns="gridColumns"
+        >
+        </grid>
+      </paginate>
+      <div class="pagination-container">
+        <paginate-links
+          tag="div"
+          for="books"
+          :hide-single-page="true"
+          :classes="{
+            'ul': ['ui', 'pagination', 'menu'],
+            'li': 'item',
+            'li a': 'pagination-link'
+          }"
+        >
+        </paginate-links>
       </div>
-    </form>
-    <grid
-      :data="books"
-      :columns="gridColumns"
-      :filter-key="searchQuery">
-    </grid>
-   <!-- <table class="ui celled table">
-      <thead>
-        <tr>
-          <th><a @click="sortBy('Title')">Title</a></th>
-          <th>ISBN</th>
-          <th>Year</th>
-          <th>Price</th>
-          <th>Status</th>
-          <th>Publisher</th>
-          <th>Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="book in books">
-          <td>{{ book.Title }}</td>
-          <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>
   </div>
 </template>
 
@@ -51,37 +53,88 @@ export default {
       booksTitle: 'Books Overview',
       books: [],
       searchQuery: '',
-      gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Status', 'Publisher']
-    }
-  },
-  methods: {
-    sortBy (sortKey) {
-      this.reverse = (this.sortKey === sortKey) ? !this.reverse : false
-
-      this.sortKey = sortKey
+      gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Status', 'Publisher'],
+      loading: false,
+      paginate: ['books']
     }
   },
   created () {
-    HTTP.get(`books`)
-      .then(response => {
-        // this.books = response.data
-        let bs = response.data
-        let i = 0
-        for (const b in bs) {
-          this.books[i] = {
-            Title: bs[b].Title,
-            ISBN: bs[b].Isbn,
-            Year: bs[b].Year,
-            Price: bs[b].Price + '€',
-            Status: bs[b].Status,
-            Publisher: bs[b].PublisherFull.Name
+    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 => {
+          let bs = response.data
+          let i = 0
+          for (const b in bs) {
+            this.books[i] = {
+              Title: bs[b].Title,
+              ISBN: bs[b].Isbn,
+              Year: bs[b].Year,
+              Price: bs[b].Price + '€',
+              Status: bs[b].Status,
+              Publisher: bs[b].PublisherFull.Name
+            }
+            i++
           }
-          i++
-        }
-      })
-      .catch(e => {
-        this.errors.push(e)
-      })
+          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',