fix(podcasts): make pagination reactive

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2552>

front/src/components/audio/ChannelEntries.vue

@@ -62,46 +62,17 @@ watch(page, fetchData, { immediate: true })
   <div>
     <slot />
     <div class="ui hidden divider" />
-    <div
+    <div v-if="isLoading" class="ui inverted active dimmer">
-      v-if="isLoading"
-      class="ui inverted active dimmer"
-    >
       <div class="ui loader" />
     </div>
-    <podcast-table
+    <podcast-table v-if="isPodcast" v-model:page="page" :paginate-by="limit" :default-cover="defaultCover"
-      v-if="isPodcast"
+      :is-podcast="isPodcast" :show-art="true" :show-position="false" :tracks="channels" :show-artist="false"
-      v-model:page="page"
+      :show-album="false" :paginate-results="true" :total="count" />
-      :default-cover="defaultCover"
+    <track-table v-else v-model:page="page" :default-cover="defaultCover" :is-podcast="isPodcast" :show-art="true"
-      :is-podcast="isPodcast"
+      :show-position="false" :tracks="channels" :show-artist="false" :show-album="false" :paginate-results="true"
-      :show-art="true"
+      :total="count" :paginate-by="limit" :filters="filters" />
-      :show-position="false"
-      :tracks="channels"
-      :show-artist="false"
-      :show-album="false"
-      :paginate-results="true"
-      :total="count"
-      :paginate-by="limit"
-    />
-    <track-table
-      v-else
-      v-model:page="page"
-      :default-cover="defaultCover"
-      :is-podcast="isPodcast"
-      :show-art="true"
-      :show-position="false"
-      :tracks="channels"
-      :show-artist="false"
-      :show-album="false"
-      :paginate-results="true"
-      :total="count"
-      :paginate-by="limit"
-      :filters="filters"
-    />
     <template v-if="!isLoading && channels.length === 0">
-      <empty-state
+      <empty-state :refresh="true" @refresh="fetchData()">
-        :refresh="true"
-        @refresh="fetchData()"
-      >
         <p>
           {{ $t('components.audio.ChannelEntries.help.subscribe') }}
         </p>

front/src/components/audio/podcast/Table.vue

@@ -16,7 +16,6 @@ interface Props {
   isPodcast?: boolean
   paginateResults?: boolean
   paginateBy?: number
-  page?: number
   total?: number
 }
 
@@ -30,9 +29,10 @@ withDefaults(defineProps<Props>(), {
   isPodcast: true,
   paginateResults: true,
   paginateBy: 25,
-  page: 1,
   total: 0
 })
+
+const { page } = defineModels<{ page: number, }>()
 </script>
 
 <template>
@@ -44,61 +44,24 @@ withDefaults(defineProps<Props>(), {
     <slot name="header" />
 
     <div>
-      <div
+      <div :class="['track-table', 'ui', 'unstackable', 'grid', 'tablet-and-up']">
-        :class="['track-table', 'ui', 'unstackable', 'grid', 'tablet-and-up']"
-      >
         <!-- For each item, build a row -->
-        <podcast-row
+        <podcast-row v-for="(track, index) in tracks" :key="track.id" :track="track" :index="index" :tracks="tracks"
-          v-for="(track, index) in tracks"
+          :display-actions="displayActions" :show-duration="showDuration" :is-podcast="isPodcast" />
-          :key="track.id"
-          :track="track"
-          :index="index"
-          :tracks="tracks"
-          :display-actions="displayActions"
-          :show-duration="showDuration"
-          :is-podcast="isPodcast"
-        />
       </div>
-      <div
+      <div v-if="paginateResults" class="ui center aligned basic segment desktop-and-up">
-        v-if="paginateResults"
+        <pagination v-bind="$attrs" :total="total" v-model:current="page" :paginate-by="paginateBy" />
-        class="ui center aligned basic segment desktop-and-up"
-      >
-        <pagination
-          v-bind="$attrs"
-          :total="total"
-          :current="page"
-          :paginate-by="paginateBy"
-        />
       </div>
     </div>
 
     <div :class="['track-table', 'ui', 'unstackable', 'grid', 'tablet-and-below']">
       <!-- For each item, build a row -->
 
-      <track-mobile-row
+      <track-mobile-row v-for="(track, index) in tracks" :key="track.id" :track="track" :index="index" :tracks="tracks"
-        v-for="(track, index) in tracks"
+        :show-position="showPosition" :show-art="showArt" :show-duration="showDuration" :is-artist="isArtist"
-        :key="track.id"
+        :is-album="isAlbum" :is-podcast="isPodcast" />
-        :track="track"
+      <div v-if="paginateResults" class="ui center aligned basic segment tablet-and-below">
-        :index="index"
+        <pagination v-if="paginateResults" v-bind="$attrs" :total="total" v-model:current="page" :compact="true" />
-        :tracks="tracks"
-        :show-position="showPosition"
-        :show-art="showArt"
-        :show-duration="showDuration"
-        :is-artist="isArtist"
-        :is-album="isAlbum"
-        :is-podcast="isPodcast"
-      />
-      <div
-        v-if="paginateResults"
-        class="ui center aligned basic segment tablet-and-below"
-      >
-        <pagination
-          v-if="paginateResults"
-          v-bind="$attrs"
-          :total="total"
-          :current="page"
-          :compact="true"
-        />
       </div>
     </div>
   </div>