onspot/onspot-frontend
2
0
Fork 0
Code Pull Requests Releases Activity

Implemented item view

Browse Source
This commit is contained in:
Pünkösd Marcell
2020-11-26 19:48:43 +01:00
parent 6a63392b09
commit 60f026b6d9
8 changed files with 103 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/Collection.vue
View File

@ -9,17 +9,16 @@
<b-row v-else>
<b-col class="my-4">
<b-table :items="tracklist" :fields="fields" hover borderless>
<b-table :items="tracklist" :fields="fields" hover borderless @row-clicked="rowClicked" tbody-tr-class="clickable-table-row-thing">
<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-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 :asd="data">Open</b-button>&nbsp;
<b-button variant="success" :disabled="!data.spotify_id">Play</b-button>
<b-button variant="success" :disabled="!data.item.spotify_id">Play</b-button>
</div>
</template>
</b-table>
@ -58,6 +57,11 @@ export default {
tracklist: []
}
},
methods: {
rowClicked(data) {
this.$router.push({name: 'Item', params: {id: data.id}});
}
},
mounted() {
this.$api.getList(this.$route.params.id).then((data) => {
if (data) {
@ -75,6 +79,9 @@ export default {
}
</script>
<style scoped>
<style>
/* Should be scoped, but that could not change row style*/
.clickable-table-row-thing {
cursor: pointer;
}
</style>