added pagination

src/views/Collection.vue

@@ -3,7 +3,9 @@
     <b-row>
       <b-col>
         <h1>
-          <b-button variant="transparent" class="m-1" :to="{name : 'Collections'}"><b-icon icon="arrow-left-circle-fill"/></b-button>
+          <b-button variant="transparent" class="m-1" :to="{name : 'Collections'}">
+            <b-icon icon="arrow-left-circle-fill"/>
+          </b-button>
           Collection: {{ collectionName }}
         </h1>
       </b-col>
@@ -23,12 +25,17 @@
           <template #cell(id)="data">
             <div class="text-right">
               <b-button variant="success" :disabled="!data.item.spotify_id" @click="startPlayer(data.item.spotify_id)">
-                <b-icon icon="play-fill"/> Play
+                <b-icon icon="play-fill"/>
+                Play
               </b-button>
             </div>
           </template>
         </b-table>
 
+        <div v-if="totalPages > 1">
+          <b-pagination-nav :number-of-pages="totalPages" use-router align="center" :link-gen="paginateLinkGenerator"/>
+        </div>
+
       </b-col>
     </b-row>
   </b-container>
@@ -46,7 +53,8 @@ export default {
     return {
       processing: true,
       collectionName: "",
-      totalTracks: 0,
+      totalItems: 0,
+      itemsPerPage: 10,
       fields: [
         {
           key: "cover_url",
@@ -69,14 +77,24 @@ export default {
     },
     startPlayer(spotify_id) {
       this.$store.dispatch('openPlayer', spotify_id);
+    },
+    paginateLinkGenerator(pageNum) {
+      if (pageNum === 1) {
+        return {query: {}};
+      } else {
+        return {query: {p: pageNum}};
+      }
     }
   },
   mounted() {
-    this.$api.getList(this.$route.params.id).then((data) => {
+    const page = this.$route.query.p || 1;
+    const offset = (page - 1) * this.itemsPerPage;
+
+    this.$api.getList(this.$route.params.id, offset, this.itemsPerPage).then((data) => {
       if (data) {
         this.tracklist = data.itemlist;
         this.collectionName = data.name;
-        this.totalTracks = data.element_count;
+        this.totalItems = data.element_count;
         this.processing = false;
       } else {
         this.$showToast("Invalid response from server");
@@ -84,6 +102,11 @@ export default {
     }).catch(({text}) => {
       this.$showToast(text);
     });
+  },
+  computed: {
+    totalPages() {
+      return Math.ceil(this.totalItems / this.itemsPerPage);
+    }
   }
 }
 </script>