diff --git a/api/funkwhale_api/radios/views.py b/api/funkwhale_api/radios/views.py index 371ba973e7e54e8e499821ed909919aa426591eb..ffd1d16593ddc2648ec2748dc3b4174afe41f7ed 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 a35f0db00803bec2e9b3af8e8649760eea5ba319..397dcb49ec3fbd7e05fa45007f38418712a2d3b7 100644 --- a/front/src/views/radios/Detail.vue +++ b/front/src/views/radios/Detail.vue @@ -32,6 +32,15 @@ <div class="ui vertical stripe segment"> <h2>Tracks</h2> <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> </template> @@ -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() + } } } </script>