Added track listing

src/App.vue

@@ -37,8 +37,12 @@ export default {
       this.$api.getMyInfo().then(({name}) => {
 
         this.$store.dispatch('storeUserData', name).then(() => {
-          this.$router.push({name: "Collections"}).catch(() => {});
+          if (this.$route.path === '/login') {
-            this.$store.dispatch('setAppReady');
+            // TODO: ez igy nagyon gagyi solution
+            this.$router.push({name: "Collections"}).catch(() => {
+            });
+          }
+          this.$store.dispatch('setAppReady');
 
         });
 

src/components/CollectionsListElement.vue

@@ -18,7 +18,7 @@ export default {
   },
   methods: {
     performClick() {
-      this.$emit('clicked');
+      this.$emit('click');
     }
   }
 }

src/router/index.js

@@ -74,6 +74,11 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
 
+  if (!store.state.appReady) {
+    next();
+    return;
+  }
+
   const authorized = store.getters.isLoggedIn;
 
   const visitAllowed = to.matched.some(record => record.meta.allowVisit(authorized))

src/views/Collection.vue

@@ -1,10 +1,77 @@
 <template>
-<div></div>
+  <b-container>
+    <b-row>
+      <b-col>
+        <h1>Collection: {{ collectionName }}</h1>
+      </b-col>
+    </b-row>
+    <big-chungus-loader text="Fetching track list..." v-if="processing"/>
+    <b-row v-else>
+      <b-col class="my-4">
+
+        <b-table :items="tracklist" :fields="fields" hover borderless>
+          <template #cell(cover_url)="data">
+            <b-img-lazy :src="data.cover_url" height="45px" blank-src="@/assets/music_placeholder.png"
+                        v-if="!!data.cover_url"/>
+            <b-img src="@/assets/music_placeholder.png" height="45px" v-else/>
+          </template>
+
+          <template #cell(id)="data">
+            <div class="text-right">
+              <b-button :asd="data">Open</b-button>&nbsp;
+              <b-button variant="success" :disabled="!data.spotify_id">Play</b-button>
+            </div>
+          </template>
+        </b-table>
+
+      </b-col>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
+import BigChungusLoader from "@/components/BigChungusLoader";
+
 export default {
-name: "Collection"
+  name: "Collection",
+  components: {
+    BigChungusLoader
+  },
+  data() {
+    return {
+      processing: true,
+      collectionName: "",
+      totalTracks: 0,
+      fields: [
+        {
+          key: "cover_url",
+          label: "Cover"
+        },
+        "artist",
+        "album",
+        "title",
+        {
+          key: "id",
+          label: ""
+        }
+      ],
+      tracklist: []
+    }
+  },
+  mounted() {
+    this.$api.getList(this.$route.params.id).then((data) => {
+      if (data) {
+        this.tracklist = data.itemlist;
+        this.collectionName = data.name;
+        this.totalTracks = data.element_count;
+        this.processing = false;
+      } else {
+        this.$showToast("Invalid response from server");
+      }
+    }).catch(({text}) => {
+      this.$showToast(text);
+    });
+  }
 }
 </script>
 

src/views/Collections.vue

@@ -27,7 +27,7 @@ export default {
   },
   methods: {
     openCollection(id) {
-      console.log(id);
+      this.$router.push({name: "Collection", params: {id}})
     }
   },
   mounted() {