better pagination on favorites

front/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "dateformat": "^2.0.0",
     "js-logger": "^1.3.0",
+    "lodash": "^4.17.4",
     "semantic-ui-css": "^2.2.10",
     "vue": "^2.3.3",
     "vue-resource": "^1.3.4",

front/src/components/Pagination.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="ui pagination borderless menu">
+    <a
+      @click="selectPage(1)"
+      :class="[{'disabled': current === 1}, 'item']"><i class="angle double left icon"></i></a>
+    <a
+      @click="selectPage(current - 1)"
+      :class="[{'disabled': current - 1 < 1}, 'item']"><i class="angle left icon"></i></a>
+    <a
+      v-for="page in pages"
+      @click="selectPage(page)"
+      :class="[{'active': page === current}, 'item']">
+      {{ page }}
+    </a>
+    <a
+      @click="selectPage(current + 1)"
+      :class="[{'disabled': current + 1 > maxPage}, 'item']"><i class="angle right icon"></i></a>
+      <a
+        @click="selectPage(maxPage)"
+        :class="[{'disabled': current === maxPage}, 'item']"><i class="angle double right icon"></i></a>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+
+export default {
+  props: {
+    current: {type: Number, default: 1},
+    paginateBy: {type: Number, default: 25},
+    total: {type: Number}
+  },
+  computed: {
+    pages: function () {
+      return _.range(1, this.maxPage + 1)
+    },
+    maxPage: function () {
+      return Math.ceil(this.total / this.paginateBy)
+    }
+  },
+  methods: {
+    selectPage: function (page) {
+      if (this.current !== page) {
+        this.$emit('page-changed', page)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

front/src/components/favorites/List.vue

@@ -12,11 +12,14 @@
 
     </div>
     <div class="ui vertical stripe segment">
-      <button class="ui left floated labeled icon button" @click="fetchFavorites(previousLink)" :disabled="!previousLink"><i class="left arrow icon"></i> Previous</button>
-      <button class="ui right floated right labeled icon button" @click="fetchFavorites(nextLink)" :disabled="!nextLink">Next <i class="right arrow icon"></i></button>
-      <div class="ui hidden clearing divider"></div>
-      <div class="ui hidden clearing divider"></div>
       <track-table v-if="results" :tracks="results.results"></track-table>
+      <div class="ui center aligned basic segment">
+        <pagination
+          @page-changed="selectPage"
+          :current="page"
+          :total="results.count"
+          ></pagination>
+      </div>
     </div>
   </div>
 </template>
@@ -28,13 +31,15 @@ import config from '@/config'
 import favoriteTracks from '@/favorites/tracks'
 import TrackTable from '@/components/audio/track/Table'
 import RadioButton from '@/components/radios/Button'
+import Pagination from '@/components/Pagination'
 
 const FAVORITES_URL = config.API_URL + 'tracks/'
 
 export default {
   components: {
     TrackTable,
-    RadioButton
+    RadioButton,
+    Pagination
   },
   data () {
     return {
@@ -42,6 +47,7 @@ export default {
       isLoading: false,
       nextLink: null,
       previousLink: null,
+      page: 1,
       favoriteTracks
     }
   },
@@ -53,7 +59,8 @@ export default {
       var self = this
       this.isLoading = true
       let params = {
-        favorites: 'true'
+        favorites: 'true',
+        page: this.page
       }
       logger.default.time('Loading user favorites')
       this.$http.get(url, {params: params}).then((response) => {
@@ -68,6 +75,14 @@ export default {
         logger.default.timeEnd('Loading user favorites')
         self.isLoading = false
       })
+    },
+    selectPage: function (page) {
+      this.page = page
+    }
+  },
+  watch: {
+    page: function () {
+      this.fetchFavorites(FAVORITES_URL)
     }
   }
 }