added pagination

src/App.vue

@@ -4,7 +4,7 @@
     <navbar/>
 
     <div id="content">
-      <router-view/>
+      <router-view :key="$route.fullPath"/>
     </div>
 
     <div id="footer">

src/api/index.js

@@ -22,7 +22,7 @@ export default new class {
 
         this.http = axios.create({
             baseURL: API_BASE_URL,
-            timeout: 15000, // 15 sec, mert szar a mobilnet
+            timeout: 600000, // 10 min lol
             headers: headers
         })
     }
@@ -127,8 +127,8 @@ export default new class {
         return this._performApiCall('get', '/lists', null, true, 200);
     }
 
-    getList(id) {
-        return this._performApiCall('get', `/lists/${id}`, null, true, 200);
+    getList(id, offset = 0, limit = 10) {
+        return this._performApiCall('get', `/lists/${id}?offset=${offset}&limit=${limit}`, null, true, 200);
     }
 
     getItem(id) {

src/components/SpotifyPlayer.vue

@@ -28,6 +28,7 @@ export default {
   bottom: 0;
   height: 80px;
   background-color: black;
+  z-index: 10;
 }
 
 #player-close-btn {

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>

src/views/Collections.vue

@@ -7,8 +7,13 @@
     </b-row>
     <big-chungus-loader text="Fetching collections..." v-if="processing"/>
     <b-row v-else>
-      <collections-list-element :title="c.name" :count="c.element_count" :type="c.type" @click="openCollection(c.id)"
-                                :key="c.id" v-for="c in collections"/>
+      <collections-list-element
+          :title="c.name"
+          :count="c.element_count"
+          :type="c.type"
+          @click="openCollection(c.id)"
+          :key="c.id"
+          v-for="c in collections"/>
     </b-row>
   </b-container>
 </template>