Merge branch 'feature/50-browsing' into 'develop'

Feature/50 browsing

Closes #50

See merge request funkwhale/funkwhale!32

CHANGELOG

@@ -10,6 +10,8 @@ Changelog
 - Shortcuts: avoid collisions between shortcuts by using the exact modifier (#53)
 - Player: Added looping controls and shortcuts (#52)
 - Player: Added shuffling controls and shortcuts (#52)
+- Favorites: can now modify the ordering of track list (#50)
+- Library: can now search/reorder results on artist browsing view (#50)
 
 
 0.2.6 (2017-12-15)

api/config/urls.py

@@ -31,3 +31,9 @@ if settings.DEBUG:
         url(r'^404/$', default_views.page_not_found),
         url(r'^500/$', default_views.server_error),
     ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+
+    if 'debug_toolbar' in settings.INSTALLED_APPS:
+        import debug_toolbar
+        urlpatterns += [
+            url(r'^__debug__/', include(debug_toolbar.urls)),
+        ]

api/funkwhale_api/music/filters.py

@@ -8,5 +8,5 @@ class ArtistFilter(django_filters.FilterSet):
     class Meta:
         model = models.Artist
         fields = {
-            'name': ['exact', 'iexact', 'startswith']
+            'name': ['exact', 'iexact', 'startswith', 'icontains']
         }

api/funkwhale_api/music/serializers.py

@@ -13,14 +13,14 @@ class TagSerializer(serializers.ModelSerializer):
 class SimpleArtistSerializer(serializers.ModelSerializer):
     class Meta:
         model = models.Artist
-        fields = ('id', 'mbid', 'name')
+        fields = ('id', 'mbid', 'name', 'creation_date')
 
 
 class ArtistSerializer(serializers.ModelSerializer):
     tags = TagSerializer(many=True, read_only=True)
     class Meta:
         model = models.Artist
-        fields = ('id', 'mbid', 'name', 'tags')
+        fields = ('id', 'mbid', 'name', 'tags', 'creation_date')
 
 
 class TrackFileSerializer(serializers.ModelSerializer):

api/funkwhale_api/music/views.py

@@ -47,16 +47,15 @@ class TagViewSetMixin(object):
 class ArtistViewSet(SearchMixin, viewsets.ReadOnlyModelViewSet):
     queryset = (
         models.Artist.objects.all()
-                             .order_by('name')
                              .prefetch_related(
                                 'albums__tracks__files',
+                                'albums__tracks__artist',
                                 'albums__tracks__tags'))
     serializer_class = serializers.ArtistSerializerNested
     permission_classes = [ConditionalAuthentication]
     search_fields = ['name']
-    ordering_fields = ('creation_date', 'name')
     filter_class = filters.ArtistFilter
-
+    ordering_fields = ('id', 'name', 'creation_date')
 
 class AlbumViewSet(SearchMixin, viewsets.ReadOnlyModelViewSet):
     queryset = (
@@ -96,7 +95,12 @@ class TrackViewSet(TagViewSetMixin, SearchMixin, viewsets.ReadOnlyModelViewSet):
     serializer_class = serializers.TrackSerializerNested
     permission_classes = [ConditionalAuthentication]
     search_fields = ['title', 'artist__name']
-    ordering_fields = ('creation_date',)
+    ordering_fields = (
+        'creation_date',
+        'title',
+        'album__title',
+        'artist__name',
+    )
 
     def get_queryset(self):
         queryset = super().get_queryset()

front/src/App.vue

 <template>
   <div id="app">
     <sidebar></sidebar>
-    <router-view></router-view>
+    <router-view :key="$route.fullPath"></router-view>
     <div class="ui divider"></div>
     <div id="footer" class="ui vertical footer segment">
       <div class="ui container">

front/src/components/favorites/List.vue

@@ -9,9 +9,36 @@
         {{ favoriteTracks.count }} favorites
       </h2>
       <radio-button type="favorites"></radio-button>
-
     </div>
     <div class="ui vertical stripe segment">
+      <div :class="['ui', {'loading': isLoading}, 'form']">
+        <div class="fields">
+          <div class="field">
+            <label>Ordering</label>
+            <select class="ui dropdown" v-model="ordering">
+              <option v-for="option in orderingOptions" :value="option[0]">
+                {{ option[1] }}
+              </option>
+            </select>
+          </div>
+          <div class="field">
+            <label>Ordering direction</label>
+            <select class="ui dropdown" v-model="orderingDirection">
+              <option value="">Ascending</option>
+              <option value="-">Descending</option>
+            </select>
+          </div>
+          <div class="field">
+            <label>Results per page</label>
+            <select class="ui dropdown" v-model="paginateBy">
+              <option :value="parseInt(12)">12</option>
+              <option :value="parseInt(25)">25</option>
+              <option :value="parseInt(50)">50</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
       <track-table v-if="results" :tracks="results.results"></track-table>
       <div class="ui center aligned basic segment">
         <pagination
@@ -27,6 +54,7 @@
 </template>
 
 <script>
+import $ from 'jquery'
 import Vue from 'vue'
 import logger from '@/logging'
 import config from '@/config'
@@ -34,37 +62,60 @@ import favoriteTracks from '@/favorites/tracks'
 import TrackTable from '@/components/audio/track/Table'
 import RadioButton from '@/components/radios/Button'
 import Pagination from '@/components/Pagination'
-
+import OrderingMixin from '@/components/mixins/Ordering'
+import PaginationMixin from '@/components/mixins/Pagination'
 const FAVORITES_URL = config.API_URL + 'tracks/'
 
 export default {
+  mixins: [OrderingMixin, PaginationMixin],
   components: {
     TrackTable,
     RadioButton,
     Pagination
   },
   data () {
+    let defaultOrdering = this.getOrderingFromString(this.defaultOrdering || 'artist__name')
     return {
       results: null,
       isLoading: false,
       nextLink: null,
       previousLink: null,
-      page: 1,
-      paginateBy: 25,
-      favoriteTracks
+      favoriteTracks,
+      page: parseInt(this.defaultPage),
+      paginateBy: parseInt(this.defaultPaginateBy || 25),
+      orderingDirection: defaultOrdering.direction,
+      ordering: defaultOrdering.field,
+      orderingOptions: [
+        ['title', 'Track name'],
+        ['album__title', 'Album name'],
+        ['artist__name', 'Artist name']
+      ]
     }
   },
   created () {
     this.fetchFavorites(FAVORITES_URL)
   },
+  mounted () {
+    $('.ui.dropdown').dropdown()
+  },
   methods: {
+    updateQueryString: function () {
+      this.$router.replace({
+        query: {
+          page: this.page,
+          paginateBy: this.paginateBy,
+          ordering: this.getOrderingAsString()
+        }
+      })
+    },
     fetchFavorites (url) {
       var self = this
       this.isLoading = true
       let params = {
         favorites: 'true',
         page: this.page,
-        page_size: this.paginateBy
+        page_size: this.paginateBy,
+        ordering: this.getOrderingAsString()
       }
       logger.default.time('Loading user favorites')
       this.$http.get(url, {params: params}).then((response) => {
@@ -86,6 +137,19 @@ export default {
   },
   watch: {
     page: function () {
+      this.updateQueryString()
+      this.fetchFavorites(FAVORITES_URL)
+    },
+    paginateBy: function () {
+      this.updateQueryString()
+      this.fetchFavorites(FAVORITES_URL)
+    },
+    orderingDirection: function () {
+      this.updateQueryString()
+      this.fetchFavorites(FAVORITES_URL)
+    },
+    ordering: function () {
+      this.updateQueryString()
       this.fetchFavorites(FAVORITES_URL)
     }
   }

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">
+    <div class="ui vertical stripe segment">
       <h2 class="ui header">Browsing artists</h2>
-      <div class="ui stackable three column grid">
+      <div :class="['ui', {'loading': isLoading}, 'form']">
+        <div class="fields">
+          <div class="field">
+            <label>Search</label>
+            <input type="text" v-model="query" placeholder="Enter an artist name..."/>
+          </div>
+          <div class="field">
+            <label>Ordering</label>
+            <select class="ui dropdown" v-model="ordering">
+              <option v-for="option in orderingOptions" :value="option[0]">
+                {{ option[1] }}
+              </option>
+            </select>
+          </div>
+          <div class="field">
+            <label>Ordering direction</label>
+            <select class="ui dropdown" v-model="orderingDirection">
+              <option value="">Ascending</option>
+              <option value="-">Descending</option>
+            </select>
+          </div>
+          <div class="field">
+            <label>Results per page</label>
+            <select class="ui dropdown" v-model="paginateBy">
+              <option :value="parseInt(12)">12</option>
+              <option :value="parseInt(25)">25</option>
+              <option :value="parseInt(50)">50</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="ui hidden divider"></div>
+      <div v-if="result" class="ui stackable three column grid">
         <div
           v-if="result.results.length > 0"
           v-for="artist in result.results"
@@ -28,41 +57,71 @@
 </template>
 
 <script>
+import _ from 'lodash'
+import $ from 'jquery'
 
 import config from '@/config'
 import backend from '@/audio/backend'
 import logger from '@/logging'
+
+import OrderingMixin from '@/components/mixins/Ordering'
+import PaginationMixin from '@/components/mixins/Pagination'
 import ArtistCard from '@/components/audio/artist/Card'
 import Pagination from '@/components/Pagination'
 
 const FETCH_URL = config.API_URL + 'artists/'
 
 export default {
+  mixins: [OrderingMixin, PaginationMixin],
+  props: {
+    defaultQuery: {type: String, required: false, default: ''}
+  },
   components: {
     ArtistCard,
     Pagination
   },
   data () {
+    let defaultOrdering = this.getOrderingFromString(this.defaultOrdering || '-creation_date')
     return {
       isLoading: true,
       result: null,
-      page: 1,
-      orderBy: 'name',
-      paginateBy: 12
+      page: parseInt(this.defaultPage),
+      query: this.defaultQuery,
+      paginateBy: parseInt(this.defaultPaginateBy || 12),
+      orderingDirection: defaultOrdering.direction,
+      ordering: defaultOrdering.field,
+      orderingOptions: [
+        ['creation_date', 'Creation date'],
+        ['name', 'Name']
+      ]
     }
   },
   created () {
     this.fetchData()
   },
+  mounted () {
+    $('.ui.dropdown').dropdown()
+  },
   methods: {
-    fetchData () {
+    updateQueryString: function () {
+      this.$router.replace({
+        query: {
+          query: this.query,
+          page: this.page,
+          paginateBy: this.paginateBy,
+          ordering: this.getOrderingAsString()
+        }
+      })
+    },
+    fetchData: _.debounce(function () {
       var self = this
       this.isLoading = true
       let url = FETCH_URL
       let params = {
         page: this.page,
         page_size: this.paginateBy,
-        order_by: 'name'
+        name__icontains: this.query,
+        ordering: this.getOrderingAsString()
       }
       logger.default.debug('Fetching artists')
       this.$http.get(url, {params: params}).then((response) => {
@@ -76,13 +135,30 @@ export default {
         })
         self.isLoading = false
       })
-    },
+    }, 500),
     selectPage: function (page) {
       this.page = page
     }
   },
   watch: {
     page () {
+      this.updateQueryString()
+      this.fetchData()
+    },
+    paginateBy () {
+      this.updateQueryString()
+      this.fetchData()
+    },
+    ordering () {
+      this.updateQueryString()
+      this.fetchData()
+    },
+    orderingDirection () {
+      this.updateQueryString()
+      this.fetchData()
+    },
+    query () {
+      this.updateQueryString()
       this.fetchData()
     }
   }

front/src/components/library/Library.vue

@@ -8,7 +8,7 @@
         <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>
+    <router-view :key="$route.fullPath"></router-view>
   </div>
 </template>
 

front/src/components/mixins/Ordering.vue

+<script>
+export default {
+  props: {
+    defaultOrdering: {type: String, required: false}
+  },
+  methods: {
+    getOrderingFromString (s) {
+      let parts = s.split('-')
+      if (parts.length > 1) {
+        return {
+          direction: '-',
+          field: parts.slice(1).join('-')
+        }
+      } else {
+        return {
+          direction: '',
+          field: s
+        }
+      }
+    },
+    getOrderingAsString () {
+      return [this.orderingDirection, this.ordering].join('')
+    }
+  }
+}
+</script>

front/src/components/mixins/Pagination.vue

+<script>
+export default {
+  props: {
+    defaultPage: {required: false, default: 1},
+    defaultPaginateBy: {required: false}
+  }
+}
+</script>

front/src/router/index.js

@@ -47,14 +47,28 @@ export default new Router({
     },
     {
       path: '/favorites',
-      component: Favorites
+      component: Favorites,
+      props: (route) => ({
+        defaultOrdering: route.query.ordering,
+        defaultPage: route.query.page
+      })
     },
     {
       path: '/library',
       component: Library,
       children: [
         { path: '', component: LibraryHome },
-        { path: 'artists/', name: 'library.artists.browse', component: LibraryArtists },
+        {
+          path: 'artists/',
+          name: 'library.artists.browse',
+          component: LibraryArtists,
+          props: (route) => ({
+            defaultOrdering: route.query.ordering,
+            defaultQuery: route.query.query,
+            defaultPaginateBy: route.query.paginateBy,
+            defaultPage: route.query.page
+          })
+        },
         { 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 },