From 62154bcd44a6959612e4c8297dde0f2ef04a3dd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Ainsworth?= <sporiff@funkwhale.audio>
Date: Mon, 24 Jan 2022 16:28:46 +0000
Subject: [PATCH] Resolve "No tracks appear on library tracks page"

---
 changes/changelog.d/1683.bugfix              |  1 +
 front/src/components/audio/podcast/Table.vue |  5 --
 front/src/components/audio/track/Table.vue   | 48 ++++++++++++--------
 front/src/views/library/DetailTracks.vue     |  2 +-
 4 files changed, 30 insertions(+), 26 deletions(-)
 create mode 100644 changes/changelog.d/1683.bugfix

diff --git a/changes/changelog.d/1683.bugfix b/changes/changelog.d/1683.bugfix
new file mode 100644
index 000000000..3475fee3d
--- /dev/null
+++ b/changes/changelog.d/1683.bugfix
@@ -0,0 +1 @@
+Fix an issue where the tracks tab in a library doesn't show any tracks (#1683)
diff --git a/front/src/components/audio/podcast/Table.vue b/front/src/components/audio/podcast/Table.vue
index 2f03f1f97..a2407801f 100644
--- a/front/src/components/audio/podcast/Table.vue
+++ b/front/src/components/audio/podcast/Table.vue
@@ -123,11 +123,6 @@ export default {
         artist: this.$pgettext('*/*/*/Noun', 'Artist')
       }
     }
-  },
-  methods: {
-    updatePage: function (page) {
-      this.$emit('page-changed', page)
-    }
   }
 }
 </script>
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index f5b82f34d..5b612c6df 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -5,8 +5,9 @@
       v-if="search"
       v-model="query"
       @search="
+        currentPage = 1;
         additionalTracks = [];
-        fetchData();
+        fetchData('tracks/');
       "
     />
 
@@ -106,10 +107,10 @@
         class="ui center aligned basic segment desktop-and-up"
       >
         <pagination
-          :total="total"
-          :current="page"
+          :total="totalTracks"
+          :current=" tracks.length > 0 ? page : {currentPage}"
           :paginate-by="paginateBy"
-          v-on="$listeners"
+          @page-changed="updatePage"
         />
       </div>
     </div>
@@ -140,15 +141,16 @@
         :is-podcast="isPodcast"
       />
       <div
-        v-if="paginateResults"
+        v-if="paginateResults && totalTracks > paginateBy"
         class="ui center aligned basic segment tablet-and-below"
       >
         <pagination
-          v-if="paginateResults"
-          :total="total"
-          :current="page"
+          v-if="paginateResults && totalTracks > paginateBy"
+          :paginate-by="paginateBy"
+          :total="totalTracks"
+          :current="tracks.length > 0 ? page : {currentPage}"
           :compact="true"
-          v-on="$listeners"
+          @page-changed="updatePage"
         />
       </div>
     </div>
@@ -194,10 +196,11 @@ export default {
       fetchDataUrl: this.nextUrl,
       isLoading: false,
       additionalTracks: [],
-      query: ''
+      query: '',
+      totalTracks: this.total,
+      currentPage: this.page,
     }
   },
-
   computed: {
     allTracks () {
       return (this.tracks || []).concat(this.additionalTracks)
@@ -212,7 +215,7 @@ export default {
     }
   },
   created () {
-    if (!this.tracks) {
+    if (this.tracks.length === 0) {
       this.fetchData('tracks/')
     }
   },
@@ -224,15 +227,15 @@ export default {
       this.isLoading = true
       const self = this
       const params = _.clone(this.filters)
-      const tracksPromise = axios.get(url, { params: params })
-      params.page_size = this.limit
-      params.page = this.page
+      params.page_size = this.paginateBy
+      params.page = this.currentPage
       params.include_channels = true
+      params.q = this.query
+      const tracksPromise = await axios.get(url, { params: params })
       try {
-        await tracksPromise
-        self.nextPage = tracksPromise.data.next
-        self.objects = tracksPromise.data.results
-        self.count = tracksPromise.data.count
+        self.fetchDataUrl = tracksPromise.data.next
+        self.additionalTracks = tracksPromise.data.results
+        self.totalTracks = tracksPromise.data.count
         self.$emit('fetched', tracksPromise.data)
         self.isLoading = false
       } catch (e) {
@@ -241,7 +244,12 @@ export default {
       }
     },
     updatePage: function (page) {
-      this.$emit('page-changed', page)
+      if (this.tracks.length === 0) {
+        this.currentPage = page
+        this.fetchData('tracks/')
+      } else {
+        this.$emit('page-changed', page)
+      }
     }
   }
 }
diff --git a/front/src/views/library/DetailTracks.vue b/front/src/views/library/DetailTracks.vue
index c9dd17bb7..45f55addd 100644
--- a/front/src/views/library/DetailTracks.vue
+++ b/front/src/views/library/DetailTracks.vue
@@ -36,7 +36,7 @@ export default {
     TrackTable
   },
   props: {
-    object: { type: String, required: true },
+    object: { type: [Object, String], required: true },
     isOwner: { type: Boolean, required: true }
   }
 }