Resolve "No tracks appear on library tracks page"

changes/changelog.d/1683.bugfix

@@ -0,0 +1 @@
+Fix an issue where the tracks tab in a library doesn't show any tracks (#1683)

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>

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)
+      }
     }
   }
 }

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 }
   }
 }