From 926db0f366576235d0d967ebd7bfb2ff7e61e31a Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Tue, 12 Dec 2017 23:41:47 +0100
Subject: [PATCH] Fixed #40: added artist browsing view
---
api/config/settings/common.py | 3 +-
api/funkwhale_api/common/pagination.py | 6 ++
front/src/components/favorites/List.vue | 5 +-
front/src/components/library/Artists.vue | 86 ++++++++++++++++++++++++
front/src/components/library/Library.vue | 7 +-
front/src/router/index.js | 2 +
6 files changed, 105 insertions(+), 4 deletions(-)
create mode 100644 api/funkwhale_api/common/pagination.py
create mode 100644 front/src/components/library/Artists.vue
diff --git a/api/config/settings/common.py b/api/config/settings/common.py
index 87740e81..6a2299bb 100644
--- a/api/config/settings/common.py
+++ b/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': (
diff --git a/api/funkwhale_api/common/pagination.py b/api/funkwhale_api/common/pagination.py
new file mode 100644
index 00000000..224c470d
--- /dev/null
+++ b/api/funkwhale_api/common/pagination.py
@@ -0,0 +1,6 @@
+from rest_framework.pagination import PageNumberPagination
+
+
+class FunkwhalePagination(PageNumberPagination):
+ page_size_query_param = 'page_size'
+ max_page_size = 25
diff --git a/front/src/components/favorites/List.vue b/front/src/components/favorites/List.vue
index 053f62bc..7e3e2350 100644
--- a/front/src/components/favorites/List.vue
+++ b/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) => {
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
new file mode 100644
index 00000000..a9890dad
--- /dev/null
+++ b/front/src/components/library/Artists.vue
@@ -0,0 +1,86 @@
+<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>
diff --git a/front/src/components/library/Library.vue b/front/src/components/library/Library.vue
index 56b750a4..da9ac19b 100644
--- a/front/src/components/library/Library.vue
+++ b/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>
diff --git a/front/src/router/index.js b/front/src/router/index.js
index cb8f9c1b..e546172b 100644
--- a/front/src/router/index.js
+++ b/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 },
--
GitLab