Fixed #40: added artist browsing view

api/config/settings/common.py

@@ -54,6 +54,7 @@ THIRD_PARTY_APPS = (
     'rest_auth.registration',
     'mptt',
     'dynamic_preferences',
+    'django_filters',
 )
 
 # Apps specific for this project go here.
@@ -298,7 +299,7 @@ REST_FRAMEWORK = {
     'DEFAULT_PERMISSION_CLASSES': (
         'rest_framework.permissions.IsAuthenticated',
     ),
-    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
+    'DEFAULT_PAGINATION_CLASS': 'funkwhale_api.common.pagination.FunkwhalePagination',
     'PAGE_SIZE': 25,
 
     'DEFAULT_AUTHENTICATION_CLASSES': (

api/funkwhale_api/common/pagination.py

+from rest_framework.pagination import PageNumberPagination
+
+
+class FunkwhalePagination(PageNumberPagination):
+    page_size_query_param = 'page_size'
+    max_page_size = 25

front/src/components/favorites/List.vue

@@ -17,6 +17,7 @@
         <pagination
           @page-changed="selectPage"
           :current="page"
+          :paginate-by="paginateBy"
           :total="results.count"
           ></pagination>
       </div>
@@ -48,6 +49,7 @@ export default {
       nextLink: null,
       previousLink: null,
       page: 1,
+      paginateBy: 25,
       favoriteTracks
     }
   },
@@ -60,7 +62,8 @@ export default {
       this.isLoading = true
       let params = {
         favorites: 'true',
-        page: this.page
+        page: this.page,
+        page_size: this.paginateBy
       }
       logger.default.time('Loading user favorites')
       this.$http.get(url, {params: params}).then((response) => {

front/src/components/library/Artists.vue

+<template>
+  <div>
+    <div v-if="isLoading" class="ui vertical segment">
+      <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
+    </div>
+    <div v-if="result" class="ui vertical stripe segment">
+      <h2 class="ui header">Browsing artists</h2>
+      <div class="ui stackable three column grid">
+        <div
+          v-if="result.results.length > 0"
+          v-for="artist in result.results"
+          :key="artist"
+          class="column">
+          <artist-card class="fluid" :artist="artist"></artist-card>
+        </div>
+      </div>
+      <div class="ui center aligned basic segment">
+        <pagination
+          v-if="result && result.results.length > 0"
+          @page-changed="selectPage"
+          :current="page"
+          :paginate-by="paginateBy"
+          :total="result.count"
+          ></pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import config from '@/config'
+import logger from '@/logging'
+import ArtistCard from '@/components/audio/artist/Card'
+import Pagination from '@/components/Pagination'
+
+const FETCH_URL = config.API_URL + 'artists/'
+
+export default {
+  components: {
+    ArtistCard,
+    Pagination
+  },
+  data () {
+    return {
+      isLoading: true,
+      result: null,
+      page: 1,
+      orderBy: 'name',
+      paginateBy: 12
+    }
+  },
+  created () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      var self = this
+      this.isLoading = true
+      let url = FETCH_URL
+      let params = {
+        page: this.page,
+        page_size: this.paginateBy,
+        order_by: 'name'
+      }
+      logger.default.debug('Fetching artists')
+      this.$http.get(url, {params: params}).then((response) => {
+        self.result = response.data
+        self.isLoading = false
+      })
+    },
+    selectPage: function (page) {
+      this.page = page
+    }
+  },
+  watch: {
+    page () {
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

front/src/components/library/Library.vue

@@ -2,8 +2,11 @@
   <div class="main library pusher">
     <div class="ui secondary pointing menu">
       <router-link class="ui item" to="/library" exact>Browse</router-link>
-      <router-link v-if="auth.user.availablePermissions['import.launch']" class="ui item" to="/library/import/launch" exact>Import</router-link>
-      <router-link v-if="auth.user.availablePermissions['import.launch']" class="ui item" to="/library/import/batches">Import batches</router-link>
+      <router-link class="ui item" to="/library/artists" exact>Artists</router-link>
+      <div class="ui secondary right menu">
+        <router-link v-if="auth.user.availablePermissions['import.launch']" class="ui item" to="/library/import/launch" exact>Import</router-link>
+        <router-link v-if="auth.user.availablePermissions['import.launch']" class="ui item" to="/library/import/batches">Import batches</router-link>
+      </div>
     </div>
     <router-view></router-view>
   </div>

front/src/router/index.js

@@ -7,6 +7,7 @@ import Logout from '@/components/auth/Logout'
 import Library from '@/components/library/Library'
 import LibraryHome from '@/components/library/Home'
 import LibraryArtist from '@/components/library/Artist'
+import LibraryArtists from '@/components/library/Artists'
 import LibraryAlbum from '@/components/library/Album'
 import LibraryTrack from '@/components/library/Track'
 import LibraryImport from '@/components/library/import/Main'
@@ -51,6 +52,7 @@ export default new Router({
       component: Library,
       children: [
         { path: '', component: LibraryHome },
+        { path: 'artists/', name: 'library.artists.browse', component: LibraryArtists },
         { path: 'artists/:id', name: 'library.artists.detail', component: LibraryArtist, props: true },
         { path: 'albums/:id', name: 'library.albums.detail', component: LibraryAlbum, props: true },
         { path: 'tracks/:id', name: 'library.tracks.detail', component: LibraryTrack, props: true },