162 lines
4.1 KiB
Vue
162 lines
4.1 KiB
Vue
<template>
|
|
<b-container>
|
|
<b-row>
|
|
<b-col>
|
|
<h1>
|
|
<b-button variant="transparent" class="m-1" :to="{name : 'Collections'}">
|
|
<b-icon icon="arrow-left-circle-fill"/>
|
|
</b-button>
|
|
Collection: {{ collectionName }}
|
|
</h1>
|
|
</b-col>
|
|
</b-row>
|
|
<big-chungus-loader text="Fetching track list..." v-if="processing"/>
|
|
<div class="my-4" v-else>
|
|
<b-row>
|
|
<b-col cols="12" sm="6" lg="3" class="ml-auto">
|
|
<div>
|
|
<b-input v-model="searchTerm" placeholder="Filter"></b-input>
|
|
</div>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row>
|
|
<b-col>
|
|
|
|
<b-table :items="filteredList" :fields="fields" hover borderless @row-clicked="rowClicked"
|
|
tbody-tr-class="clickable-table-row-thing" responsive="md">
|
|
<template #cell(cover_url)="data">
|
|
<b-img-lazy :src="data.item.cover_url_small" height="45px" blank-src="@/assets/music_placeholder.png"
|
|
v-if="!!data.item.cover_url_small"/>
|
|
<b-img src="@/assets/music_placeholder.png" height="45px" v-else/>
|
|
</template>
|
|
|
|
<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-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>
|
|
</div>
|
|
</b-container>
|
|
</template>
|
|
|
|
<script>
|
|
import BigChungusLoader from "@/components/BigChungusLoader";
|
|
|
|
export default {
|
|
name: "Collection",
|
|
components: {
|
|
BigChungusLoader
|
|
},
|
|
data() {
|
|
return {
|
|
processing: true,
|
|
collectionName: "",
|
|
totalItems: 0,
|
|
itemsPerPage: 10,
|
|
searchTerm: "",
|
|
fields: [
|
|
{
|
|
key: "cover_url",
|
|
label: "Cover"
|
|
},
|
|
"artist",
|
|
"album",
|
|
"title",
|
|
{
|
|
key: "id",
|
|
label: ""
|
|
}
|
|
],
|
|
tracklist: []
|
|
}
|
|
},
|
|
methods: {
|
|
rowClicked(data) {
|
|
this.$router.push(
|
|
{
|
|
name: 'Item',
|
|
params: {
|
|
id: data.id
|
|
},
|
|
query: {
|
|
collection: this.$route.params.id,
|
|
srcpage: this.$route.query.p
|
|
}
|
|
}
|
|
);
|
|
},
|
|
startPlayer(spotify_id) {
|
|
this.$store.dispatch('openPlayer', spotify_id);
|
|
},
|
|
paginateLinkGenerator(pageNum) {
|
|
if (pageNum === 1) {
|
|
return {query: {}};
|
|
} else {
|
|
return {query: {p: pageNum}};
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
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.totalItems = data.element_count;
|
|
this.processing = false;
|
|
} else {
|
|
this.$showToast("Invalid response from server");
|
|
}
|
|
}).catch(({text}) => {
|
|
this.$showToast(text);
|
|
});
|
|
},
|
|
computed: {
|
|
totalPages() {
|
|
return Math.ceil(this.totalItems / this.itemsPerPage);
|
|
},
|
|
filteredList() {
|
|
|
|
if (!this.searchTerm) {
|
|
return this.tracklist;
|
|
}
|
|
|
|
return this.tracklist.filter(item => {
|
|
if (item.title.toLowerCase().includes(this.searchTerm.toLowerCase())) {
|
|
return true;
|
|
}
|
|
if (item.album.toLowerCase().includes(this.searchTerm.toLowerCase())) {
|
|
return true;
|
|
}
|
|
if (item.artist.toLowerCase().includes(this.searchTerm.toLowerCase())) {
|
|
return true;
|
|
}
|
|
return false;
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style>
|
|
/* Should be scoped, but that could not change row style*/
|
|
.clickable-table-row-thing {
|
|
cursor: pointer;
|
|
}
|
|
</style> |