Commit 7a34c297 authored by jake's avatar jake Committed by Eliot Berriot

Resolve "add a view to list albums"

parent 92f7339c
......@@ -87,7 +87,7 @@ class UploadFilter(filters.FilterSet):
class AlbumFilter(filters.FilterSet):
playable = filters.BooleanFilter(field_name="_", method="filter_playable")
q = fields.SearchFilter(search_fields=["title", "artist__name" "source"])
q = fields.SearchFilter(search_fields=["title", "artist__name"])
class Meta:
model = models.Album
......
......@@ -108,6 +108,27 @@ def test_album_view_filter_playable(param, expected, factories, api_request):
assert list(queryset) == expected
@pytest.mark.parametrize(
"param", [("I've Got"), ("Français"), ("I've Got Everything : Spoken Word Poetry")]
)
def test_album_view_filter_query(param, factories, api_request):
# Test both partial and full search.
factories["music.Album"](title="I've Got Nothing : Original Soundtrack")
factories["music.Album"](title="I've Got Cake : Remix")
factories["music.Album"](title="Français Et Tu")
factories["music.Album"](title="I've Got Everything : Spoken Word Poetry")
request = api_request.get("/", {"q": param})
view = views.AlbumViewSet()
view.action_map = {"get": "list"}
view.request = view.initialize_request(request)
queryset = view.filter_queryset(view.get_queryset())
# Loop through our "expected list", and assert some string finds against our param.
for val in list(queryset):
assert val.title.find(param) != -1
def test_can_serve_upload_as_remote_library(
factories, authenticated_actor, logged_in_api_client, settings, preferences
):
......
Fixed issue with querying the albums api endpoint (#356)
\ No newline at end of file
Added albums view. Similar to artists view, it's viewable by clicking on the "Albums" link on the top bar. (#356)
\ No newline at end of file
<template>
<main v-title="labels.title">
<section class="ui vertical stripe segment">
<h2 class="ui header">
<translate>Browsing albums</translate>
</h2>
<div :class="['ui', {'loading': isLoading}, 'form']">
<div class="fields">
<div class="field">
<label>
<translate>Search</translate>
</label>
<input type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
</div>
<div class="field">
<label><translate>Ordering</translate></label>
<select class="ui dropdown" v-model="ordering">
<option v-for="option in orderingOptions" :value="option[0]">
{{ sharedLabels.filters[option[1]] }}
</option>
</select>
</div>
<div class="field">
<label><translate>Ordering direction</translate></label>
<select class="ui dropdown" v-model="orderingDirection">
<option value="+"><translate>Ascending</translate></option>
<option value="-"><translate>Descending</translate></option>
</select>
</div>
<div class="field">
<label><translate>Results per page</translate></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"
transition-duration="0"
item-selector=".column"
percent-position="true"
stagger="0"
class="ui stackable three column doubling grid">
<div
v-if="result.results.length > 0"
class="ui cards">
<album-card
:mode="'simple'"
v-masonry-tile
v-for="album in result.results"
:key="album.id"
:album="album"></album-card>
</div>
</div>
<div class="ui center aligned basic segment">
<pagination
v-if="result && result.count > paginateBy"
@page-changed="selectPage"
:current="page"
:paginate-by="paginateBy"
:total="result.count"
></pagination>
</div>
</section>
</main>
</template>
<script>
import axios from "axios"
import _ from "@/lodash"
import $ from "jquery"
import logger from "@/logging"
import OrderingMixin from "@/components/mixins/Ordering"
import PaginationMixin from "@/components/mixins/Pagination"
import TranslationsMixin from "@/components/mixins/Translations"
import AlbumCard from "@/components/audio/album/Card"
import Pagination from "@/components/Pagination"
const FETCH_URL = "albums/"
export default {
mixins: [OrderingMixin, PaginationMixin, TranslationsMixin],
props: {
defaultQuery: { type: String, required: false, default: "" }
},
components: {
AlbumCard,
Pagination
},
data() {
let defaultOrdering = this.getOrderingFromString(
this.defaultOrdering || "-creation_date"
)
return {
isLoading: true,
result: null,
page: parseInt(this.defaultPage),
query: this.defaultQuery,
paginateBy: parseInt(this.defaultPaginateBy || 25),
orderingDirection: defaultOrdering.direction || "+",
ordering: defaultOrdering.field,
orderingOptions: [["creation_date", "creation_date"], ["title", "title"]]
}
},
created() {
this.fetchData()
},
mounted() {
$(".ui.dropdown").dropdown()
},
computed: {
labels() {
let searchPlaceholder = this.$gettext("Enter album title...")
let title = this.$gettext("Albums")
return {
searchPlaceholder,
title
}
}
},
methods: {
updateQueryString: _.debounce(function() {
this.$router.replace({
query: {
query: this.query,
page: this.page,
paginateBy: this.paginateBy,
ordering: this.getOrderingAsString()
}
})
}, 500),
fetchData: _.debounce(function() {
var self = this
this.isLoading = true
let url = FETCH_URL
let params = {
page: this.page,
page_size: this.paginateBy,
q: this.query,
ordering: this.getOrderingAsString(),
playable: "true"
}
logger.default.debug("Fetching albums")
axios.get(url, { params: params }).then(response => {
self.result = response.data
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()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
......@@ -4,6 +4,9 @@
<router-link class="ui item" to="/library" exact>
<translate>Browse</translate>
</router-link>
<router-link class="ui item" to="/library/albums" exact>
<translate>Albums</translate>
</router-link>
<router-link class="ui item" to="/library/artists" exact>
<translate>Artists</translate>
</router-link>
......
......@@ -15,6 +15,7 @@ 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 LibraryAlbums from '@/components/library/Albums'
import LibraryAlbum from '@/components/library/Album'
import LibraryTrack from '@/components/library/Track'
import LibraryRadios from '@/components/library/Radios'
......@@ -277,6 +278,17 @@ export default new Router({
defaultPage: route.query.page
})
},
{
path: 'albums/',
name: 'library.albums.browse',
component: LibraryAlbums,
props: (route) => ({
defaultOrdering: route.query.ordering,
defaultQuery: route.query.query,
defaultPaginateBy: route.query.paginateBy,
defaultPage: route.query.page
})
},
{
path: 'radios/',
name: 'library.radios.browse',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment