Merge branch 'feature/browse-40' into 'develop'

Feature/browse 40 Closes #40 See merge request funkwhale/funkwhale!18
2017-12-12 22:41:50 +00:00 · 2017-12-12 22:41:50 +00:00 · 160437efa5
commit 160437efa5
--- 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': (
@ -309,6 +310,7 @@ REST_FRAMEWORK = {
    ),
    'DEFAULT_FILTER_BACKENDS': (
        'rest_framework.filters.OrderingFilter',
+        'django_filters.rest_framework.DjangoFilterBackend',
    )
 }

--- a/api/funkwhale_api/common/pagination.py
+++ 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
--- a/api/funkwhale_api/music/filters.py
+++ b/api/funkwhale_api/music/filters.py
@ -0,0 +1,12 @@
+import django_filters
+
+from . import models
+
+
+class ArtistFilter(django_filters.FilterSet):
+
+    class Meta:
+        model = models.Artist
+        fields = {
+            'name': ['exact', 'iexact', 'startswith']
+        }
--- a/api/funkwhale_api/music/tests/test_api.py
+++ b/api/funkwhale_api/music/tests/test_api.py
@ -182,6 +182,21 @@ class TestAPI(TMPDirTestCaseMixin, TestCase):

        self.assertJSONEqual(expected, json.loads(response.content.decode('utf-8')))

+    def test_can_search_artist_by_name_start(self):
+        artist1 = factories.ArtistFactory(name='alpha')
+        artist2 = factories.ArtistFactory(name='beta')
+        results = {
+            'next': None,
+            'previous': None,
+            'count': 1,
+            'results': [serializers.ArtistSerializerNested(artist1).data]
+        }
+        expected = json.dumps(results)
+        url = self.reverse('api:v1:artists-list')
+        response = self.client.get(url, {'name__startswith': 'a'})
+
+        self.assertJSONEqual(expected, json.loads(response.content.decode('utf-8')))
+
    def test_can_search_tracks(self):
        artist1 = models.Artist.objects.create(name='Test1')
        artist2 = models.Artist.objects.create(name='Test2')
--- a/api/funkwhale_api/music/views.py
+++ b/api/funkwhale_api/music/views.py
@ -21,8 +21,10 @@ from taggit.models import Tag
 from . import models
 from . import serializers
 from . import importers
+from . import filters
 from . import utils

+
 class SearchMixin(object):
    search_fields = []

@ -52,7 +54,8 @@ class ArtistViewSet(SearchMixin, viewsets.ReadOnlyModelViewSet):
    serializer_class = serializers.ArtistSerializerNested
    permission_classes = [ConditionalAuthentication]
    search_fields = ['name']
-    ordering_fields = ('creation_date',)
+    ordering_fields = ('creation_date', 'name')
+    filter_class = filters.ArtistFilter


 class AlbumViewSet(SearchMixin, viewsets.ReadOnlyModelViewSet):
--- a/api/requirements/base.txt
+++ b/api/requirements/base.txt
@ -45,6 +45,7 @@ django-taggit==0.22.1
 persisting-theory==0.2.1
 django-versatileimagefield==1.7.1
 django-cachalot==1.5.0
+django-filter==1.1
 django-rest-auth==0.9.1
 beautifulsoup4==4.6.0
 Markdown==2.6.8
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@ -7,14 +7,14 @@
          <img v-else src="../../assets/audio/default-cover.png">
        </div>
        <div class="middle aligned content">
-          <router-link class="small header discrete link track" :to="{name: 'library.track', params: {id: queue.currentTrack.id }}">
+          <router-link class="small header discrete link track" :to="{name: 'library.tracks.detail', params: {id: queue.currentTrack.id }}">
            {{ queue.currentTrack.title }}
          </router-link>
          <div class="meta">
-            <router-link class="artist" :to="{name: 'library.artist', params: {id: queue.currentTrack.artist.id }}">
+            <router-link class="artist" :to="{name: 'library.artists.detail', params: {id: queue.currentTrack.artist.id }}">
              {{ queue.currentTrack.artist.name }}
            </router-link> /
-            <router-link class="album" :to="{name: 'library.album', params: {id: queue.currentTrack.album.id }}">
+            <router-link class="album" :to="{name: 'library.albums.detail', params: {id: queue.currentTrack.album.id }}">
              {{ queue.currentTrack.album.title }}
            </router-link>
          </div>
--- a/front/src/components/audio/SearchBar.vue
+++ b/front/src/components/audio/SearchBar.vue
@ -35,7 +35,7 @@ export default {
          let categories = [
            {
              code: 'artists',
-              route: 'library.artist',
+              route: 'library.artists.detail',
              name: 'Artist',
              getTitle (r) {
                return r.name
@ -46,7 +46,7 @@ export default {
            },
            {
              code: 'albums',
-              route: 'library.album',
+              route: 'library.albums.detail',
              name: 'Album',
              getTitle (r) {
                return r.title
@ -57,7 +57,7 @@ export default {
            },
            {
              code: 'tracks',
-              route: 'library.track',
+              route: 'library.tracks.detail',
              name: 'Track',
              getTitle (r) {
                return r.title
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@ -6,10 +6,10 @@
          <img v-else src="../../../assets/audio/default-cover.png">
        </div>
        <div class="header">
-          <router-link class="discrete link" :to="{name: 'library.album', params: {id: album.id }}">{{ album.title }}</router-link>
+          <router-link class="discrete link" :to="{name: 'library.albums.detail', params: {id: album.id }}">{{ album.title }}</router-link>
        </div>
        <div class="meta">
-          By <router-link :to="{name: 'library.artist', params: {id: album.artist.id }}">
+          By <router-link :to="{name: 'library.artists.detail', params: {id: album.artist.id }}">
            {{ album.artist.name }}
          </router-link>
        </div>
@ -21,7 +21,7 @@
                  <play-button class="basic icon" :track="track" :discrete="true"></play-button>
                </td>
                <td colspan="6">
-                  <router-link class="track discrete link" :to="{name: 'library.track', params: {id: track.id }}">
+                  <router-link class="track discrete link" :to="{name: 'library.tracks.detail', params: {id: track.id }}">
                    <template v-if="track.position">
                      {{ track.position }}.
                    </template>
--- a/front/src/components/audio/artist/Card.vue
+++ b/front/src/components/audio/artist/Card.vue
@ -2,7 +2,7 @@
  <div class="ui card">
    <div class="content">
        <div class="header">
-          <router-link class="discrete link" :to="{name: 'library.artist', params: {id: artist.id }}">
+          <router-link class="discrete link" :to="{name: 'library.artists.detail', params: {id: artist.id }}">
            {{ artist.name }}
          </router-link>
        </div>
@ -15,7 +15,7 @@
                  <img class="ui mini image" v-else src="../../../assets/audio/default-cover.png">
                </td>
                <td colspan="4">
-                  <router-link class="discrete link":to="{name: 'library.album', params: {id: album.id }}">
+                  <router-link class="discrete link":to="{name: 'library.albums.detail', params: {id: album.id }}">
                    <strong>{{ album.title }}</strong>
                  </router-link><br />
                  {{ album.tracks.length }} tracks
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@ -20,7 +20,7 @@
          <img class="ui mini image" v-else src="../../..//assets/audio/default-cover.png">
        </td>
        <td colspan="6">
-          <router-link class="track" :to="{name: 'library.track', params: {id: track.id }}">
+          <router-link class="track" :to="{name: 'library.tracks.detail', params: {id: track.id }}">
            <template v-if="displayPosition && track.position">
              {{ track.position }}.
            </template>
@ -28,12 +28,12 @@
          </router-link>
        </td>
        <td colspan="6">
-          <router-link class="artist discrete link" :to="{name: 'library.artist', params: {id: track.artist.id }}">
+          <router-link class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
            {{ track.artist.name }}
          </router-link>
        </td>
        <td colspan="6">
-          <router-link class="album discrete link" :to="{name: 'library.album', params: {id: track.album.id }}">
+          <router-link class="album discrete link" :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
            {{ track.album.title }}
          </router-link>
        </td>
--- 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) => {
--- a/front/src/components/library/Album.vue
+++ b/front/src/components/library/Album.vue
@ -12,7 +12,7 @@
              {{ album.title }}
              <div class="sub header">
                Album containing {{ album.tracks.length }} tracks,
-                by <router-link :to="{name: 'library.artist', params: {id: album.artist.id }}">
+                by <router-link :to="{name: 'library.artists.detail', params: {id: album.artist.id }}">
                  {{ album.artist.name }}
                </router-link>
              </div>
--- a/front/src/components/library/Artists.vue
+++ 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>
--- 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>
--- a/front/src/components/library/Track.vue
+++ b/front/src/components/library/Track.vue
@ -12,10 +12,10 @@
              {{ track.title }}
              <div class="sub header">
                From album
-                <router-link :to="{name: 'library.album', params: {id: track.album.id }}">
+                <router-link :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
                  {{ track.album.title }}
                </router-link>
-                by <router-link :to="{name: 'library.artist', params: {id: track.artist.id }}">
+                by <router-link :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
                  {{ track.artist.name }}
                </router-link>
              </div>
--- 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,9 +52,10 @@ export default new Router({
      component: Library,
      children: [
        { path: '', component: LibraryHome },
-        { path: 'artist/:id', name: 'library.artist', component: LibraryArtist, props: true },
-        { path: 'album/:id', name: 'library.album', component: LibraryAlbum, props: true },
-        { path: 'track/:id', name: 'library.track', component: LibraryTrack, props: true },
+        { 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 },
        {
          path: 'import/launch',
          name: 'library.import.launch',