better pagination on favorites

api/funkwhale_api/music/fake_data.py

+"""
+Populates the database with fake data
+"""
+import random
+
+from funkwhale_api.music import models
+from funkwhale_api.music.tests import factories
+
+
+def create_data(count=25):
+    artists = factories.ArtistFactory.create_batch(size=count)
+    for artist in artists:
+        print('Creating data for', artist)
+        albums = factories.AlbumFactory.create_batch(
+            artist=artist, size=random.randint(1, 5))
+        for album in albums:
+            factories.TrackFileFactory.create_batch(
+                track__album=album, size=random.randint(3, 18))
+
+
+if __name__ == '__main__':
+    main()

api/funkwhale_api/music/tests/factories.py

@@ -5,7 +5,7 @@ SAMPLES_PATH = os.path.dirname(os.path.abspath(__file__))
 
 
 class ArtistFactory(factory.django.DjangoModelFactory):
-    name = factory.Sequence(lambda n: 'artist-{0}'.format(n))
+    name = factory.Faker('name')
     mbid = factory.Faker('uuid4')
 
     class Meta:
@@ -13,7 +13,7 @@ class ArtistFactory(factory.django.DjangoModelFactory):
 
 
 class AlbumFactory(factory.django.DjangoModelFactory):
-    title = factory.Sequence(lambda n: 'album-{0}'.format(n))
+    title = factory.Faker('sentence', nb_words=3)
     mbid = factory.Faker('uuid4')
     release_date = factory.Faker('date')
     cover = factory.django.ImageField()
@@ -24,7 +24,7 @@ class AlbumFactory(factory.django.DjangoModelFactory):
 
 
 class TrackFactory(factory.django.DjangoModelFactory):
-    title = factory.Sequence(lambda n: 'track-{0}'.format(n))
+    title = factory.Faker('sentence', nb_words=3)
     mbid = factory.Faker('uuid4')
     album = factory.SubFactory(AlbumFactory)
     artist = factory.SelfAttribute('album.artist')

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

+<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)
     }
   }
 }