MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Feature/50 browsing

Closes #50

See merge request funkwhale/funkwhale!32
This commit is contained in:
Eliot Berriot 2017-12-17 19:09:49 +00:00
parent 860b6b1e1f f3c914779d
commit e1817cc5c2
12 changed files with 228 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG
View File

@ -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)

6
api/config/urls.py
View File

@ -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)),
]

2
api/funkwhale_api/music/filters.py
View File

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

4
api/funkwhale_api/music/serializers.py
View File

@ -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):

12
api/funkwhale_api/music/views.py
View File

@ -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()

2
front/src/App.vue
View File

@ -1,7 +1,7 @@
<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">

76
front/src/components/favorites/List.vue
View File

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

98
front/src/components/library/Artists.vue
View File

@ -1,11 +1,40 @@
<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()
}
}

2
front/src/components/library/Library.vue
View File

@ -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>

26
front/src/components/mixins/Ordering.vue Normal file
View File

@ -0,0 +1,26 @@
<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>

8
front/src/components/mixins/Pagination.vue Normal file
View File

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

18
front/src/router/index.js
View File

@ -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 },