diff --git a/api/funkwhale_api/radios/views.py b/api/funkwhale_api/radios/views.py
index 371ba973e..ffd1d1659 100644
--- a/api/funkwhale_api/radios/views.py
+++ b/api/funkwhale_api/radios/views.py
@@ -45,12 +45,11 @@ class RadioViewSet(
def tracks(self, request, *args, **kwargs):
radio = self.get_object()
tracks = radio.get_candidates().for_nested_serialization()
- serializer = TrackSerializerNested(tracks, many=True)
- data = {
- 'count': len(tracks),
- 'results': serializer.data
- }
- return Response(data, status=200)
+
+ page = self.paginate_queryset(tracks)
+ if page is not None:
+ serializer = TrackSerializerNested(page, many=True)
+ return self.get_paginated_response(serializer.data)
@list_route(methods=['get'])
def filters(self, request, *args, **kwargs):
diff --git a/front/src/views/radios/Detail.vue b/front/src/views/radios/Detail.vue
index a35f0db00..397dcb49e 100644
--- a/front/src/views/radios/Detail.vue
+++ b/front/src/views/radios/Detail.vue
@@ -32,6 +32,15 @@
@@ -40,6 +49,7 @@
import axios from 'axios'
import TrackTable from '@/components/audio/track/Table'
import RadioButton from '@/components/radios/Button'
+import Pagination from '@/components/Pagination'
export default {
props: {
@@ -47,26 +57,34 @@ export default {
},
components: {
TrackTable,
- RadioButton
+ RadioButton,
+ Pagination
},
data: function () {
return {
isLoading: false,
radio: null,
- tracks: []
+ tracks: [],
+ totalTracks: 0,
+ page: 1
}
},
created: function () {
this.fetch()
},
methods: {
+ selectPage: function (page) {
+ this.page = page
+ },
fetch: function () {
let self = this
self.isLoading = true
let url = 'radios/radios/' + this.id + '/'
axios.get(url).then((response) => {
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
}).then(() => {
self.isLoading = false
@@ -82,6 +100,11 @@ export default {
})
})
}
+ },
+ watch: {
+ page: function () {
+ this.fetch()
+ }
}
}