Commit c4991796 authored by Bat's avatar Bat
Browse files

Add some pagination to radio details

parent 85aef442
...@@ -45,12 +45,11 @@ class RadioViewSet( ...@@ -45,12 +45,11 @@ class RadioViewSet(
def tracks(self, request, *args, **kwargs): def tracks(self, request, *args, **kwargs):
radio = self.get_object() radio = self.get_object()
tracks = radio.get_candidates().for_nested_serialization() tracks = radio.get_candidates().for_nested_serialization()
serializer = TrackSerializerNested(tracks, many=True)
data = { page = self.paginate_queryset(tracks)
'count': len(tracks), if page is not None:
'results': serializer.data serializer = TrackSerializerNested(page, many=True)
} return self.get_paginated_response(serializer.data)
return Response(data, status=200)
@list_route(methods=['get']) @list_route(methods=['get'])
def filters(self, request, *args, **kwargs): def filters(self, request, *args, **kwargs):
......
...@@ -32,6 +32,15 @@ ...@@ -32,6 +32,15 @@
<div class="ui vertical stripe segment"> <div class="ui vertical stripe segment">
<h2>Tracks</h2> <h2>Tracks</h2>
<track-table :tracks="tracks"></track-table> <track-table :tracks="tracks"></track-table>
<div class="ui center aligned basic segment">
<pagination
v-if="totalTracks > 25"
@page-changed="selectPage"
:current="page"
:paginate-by="25"
:total="totalTracks"
></pagination>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -40,6 +49,7 @@ ...@@ -40,6 +49,7 @@
import axios from 'axios' import axios from 'axios'
import TrackTable from '@/components/audio/track/Table' import TrackTable from '@/components/audio/track/Table'
import RadioButton from '@/components/radios/Button' import RadioButton from '@/components/radios/Button'
import Pagination from '@/components/Pagination'
export default { export default {
props: { props: {
...@@ -47,26 +57,34 @@ export default { ...@@ -47,26 +57,34 @@ export default {
}, },
components: { components: {
TrackTable, TrackTable,
RadioButton RadioButton,
Pagination
}, },
data: function () { data: function () {
return { return {
isLoading: false, isLoading: false,
radio: null, radio: null,
tracks: [] tracks: [],
totalTracks: 0,
page: 1
} }
}, },
created: function () { created: function () {
this.fetch() this.fetch()
}, },
methods: { methods: {
selectPage: function (page) {
this.page = page
},
fetch: function () { fetch: function () {
let self = this let self = this
self.isLoading = true self.isLoading = true
let url = 'radios/radios/' + this.id + '/' let url = 'radios/radios/' + this.id + '/'
axios.get(url).then((response) => { axios.get(url).then((response) => {
self.radio = response.data self.radio = response.data
axios.get(url + 'tracks').then((response) => { axios.get(url + 'tracks', {params: {page: this.page}}).then((response) => {
console.log(response.data.count)
this.totalTracks = response.data.count
this.tracks = response.data.results this.tracks = response.data.results
}).then(() => { }).then(() => {
self.isLoading = false self.isLoading = false
...@@ -82,6 +100,11 @@ export default { ...@@ -82,6 +100,11 @@ export default {
}) })
}) })
} }
},
watch: {
page: function () {
this.fetch()
}
} }
} }
</script> </script>
Supports Markdown
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