2020-11-26 04:44:55 +01:00
|
|
|
<template>
|
2020-11-26 06:42:04 +01:00
|
|
|
<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>
|
|
|
|
<b-button variant="success" :disabled="!data.spotify_id">Play</b-button>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</b-table>
|
|
|
|
|
|
|
|
</b-col>
|
|
|
|
</b-row>
|
|
|
|
</b-container>
|
2020-11-26 04:44:55 +01:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-11-26 06:42:04 +01:00
|
|
|
import BigChungusLoader from "@/components/BigChungusLoader";
|
|
|
|
|
2020-11-26 04:44:55 +01:00
|
|
|
export default {
|
2020-11-26 06:42:04 +01:00
|
|
|
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);
|
|
|
|
});
|
|
|
|
}
|
2020-11-26 04:44:55 +01:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
|
|
</style>
|