Added track listing

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>