Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<template>
<modal @update:show="update" :show="show">
<div class="header">
Add track "{{ track.title }}" by {{ track.artist.name }} to playlist
</div>
<div class="content">
<div class="description">
<playlist-form></playlist-form>
<div class="ui divider"></div>
<div v-if="errors.length > 0" class="ui negative message">
<div class="header">We cannot add the track to a playlist</div>
<ul class="list">
<li v-for="error in errors">{{ error }}</li>
</ul>
</div>
<div class="ui items">
<div class="item" v-for="playlist in sortedPlaylists">
<div class="content">
<div class="header">{{ playlist.name }}</div>
<div class="meta">
<span class="tracks">45 tracks</span>
</div>
<div class="extra">
<div class="ui basic green button" @click="addToPlaylist(playlist.id)">
Add to this playlist
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</modal>
</template>
<script>
import axios from 'axios'
import {mapState} from 'vuex'
import logger from '@/logging'
import Modal from '@/components/semantic/Modal'
import PlaylistForm from '@/components/playlists/Form'
export default {
components: {
Modal,
PlaylistForm
},
props: {
track: {type: Object},
show: {type: Boolean}
},
data () {
return {
errors: []
}
},
methods: {
update (v) {
this.$emit('update:show', v)
},
addToPlaylist (playlistId) {
let self = this
let payload = {
track: this.track.id,
playlist: playlistId
}
return axios.post('playlist-tracks/', payload).then(response => {
logger.default.info('Successfully added track to playlist')
self.$emit('update:show', false)
self.$store.dispatch('playlists/fetchOwn')
}, error => {
logger.default.error('Error while adding track to playlist')
self.errors = error.backendErrors
})
}
},
computed: {
...mapState({
playlists: state => state.playlists.playlists
}),
sortedPlaylists () {
return this.playlists
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>