From 1cbc7e49519f8bf87a08c6c575e0c691657bc45e Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Mon, 14 Aug 2023 16:25:58 +0200
Subject: [PATCH] fix(podcasts): make pagination reactive

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2552>
---
 front/src/components/audio/ChannelEntries.vue | 45 +++-----------
 front/src/components/audio/podcast/Table.vue  | 61 ++++---------------
 2 files changed, 20 insertions(+), 86 deletions(-)

diff --git a/front/src/components/audio/ChannelEntries.vue b/front/src/components/audio/ChannelEntries.vue
index 2336e3592..1feefde84 100644
--- a/front/src/components/audio/ChannelEntries.vue
+++ b/front/src/components/audio/ChannelEntries.vue
@@ -62,46 +62,17 @@ watch(page, fetchData, { immediate: true })
   <div>
     <slot />
     <div class="ui hidden divider" />
-    <div
-      v-if="isLoading"
-      class="ui inverted active dimmer"
-    >
+    <div v-if="isLoading" class="ui inverted active dimmer">
       <div class="ui loader" />
     </div>
-    <podcast-table
-      v-if="isPodcast"
-      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"
-    />
-    <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"
-    />
+    <podcast-table v-if="isPodcast" v-model:page="page" :paginate-by="limit" :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" />
+    <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
-        :refresh="true"
-        @refresh="fetchData()"
-      >
+      <empty-state :refresh="true" @refresh="fetchData()">
         <p>
           {{ $t('components.audio.ChannelEntries.help.subscribe') }}
         </p>
diff --git a/front/src/components/audio/podcast/Table.vue b/front/src/components/audio/podcast/Table.vue
index 9153d39a4..d8042a35d 100644
--- a/front/src/components/audio/podcast/Table.vue
+++ b/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
-        :class="['track-table', 'ui', 'unstackable', 'grid', 'tablet-and-up']"
-      >
+      <div :class="['track-table', 'ui', 'unstackable', 'grid', 'tablet-and-up']">
         <!-- For each item, build a row -->
-        <podcast-row
-          v-for="(track, index) in tracks"
-          :key="track.id"
-          :track="track"
-          :index="index"
-          :tracks="tracks"
-          :display-actions="displayActions"
-          :show-duration="showDuration"
-          :is-podcast="isPodcast"
-        />
+        <podcast-row v-for="(track, index) in tracks" :key="track.id" :track="track" :index="index" :tracks="tracks"
+          :display-actions="displayActions" :show-duration="showDuration" :is-podcast="isPodcast" />
       </div>
-      <div
-        v-if="paginateResults"
-        class="ui center aligned basic segment desktop-and-up"
-      >
-        <pagination
-          v-bind="$attrs"
-          :total="total"
-          :current="page"
-          :paginate-by="paginateBy"
-        />
+      <div v-if="paginateResults" class="ui center aligned basic segment desktop-and-up">
+        <pagination v-bind="$attrs" :total="total" v-model: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
-        v-for="(track, index) in tracks"
-        :key="track.id"
-        :track="track"
-        :index="index"
-        :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"
-        />
+      <track-mobile-row v-for="(track, index) in tracks" :key="track.id" :track="track" :index="index" :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" v-model:current="page" :compact="true" />
       </div>
     </div>
   </div>