Verified Commit 0dfb594b authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Shared playlist modal

parent f8b15a3f
...@@ -29,6 +29,8 @@ ...@@ -29,6 +29,8 @@
v-if="$store.state.instance.settings.raven.front_enabled.value" v-if="$store.state.instance.settings.raven.front_enabled.value"
:dsn="$store.state.instance.settings.raven.front_dsn.value"> :dsn="$store.state.instance.settings.raven.front_dsn.value">
</raven> </raven>
<playlist-modal v-if="$store.state.auth.authenticated"></playlist-modal>
</div> </div>
</template> </template>
...@@ -39,11 +41,14 @@ import logger from '@/logging' ...@@ -39,11 +41,14 @@ import logger from '@/logging'
import Sidebar from '@/components/Sidebar' import Sidebar from '@/components/Sidebar'
import Raven from '@/components/Raven' import Raven from '@/components/Raven'
import PlaylistModal from '@/components/playlists/PlaylistModal'
export default { export default {
name: 'app', name: 'app',
components: { components: {
Sidebar, Sidebar,
Raven Raven,
PlaylistModal
}, },
created () { created () {
this.$store.dispatch('instance/fetchSettings') this.$store.dispatch('instance/fetchSettings')
......
<template> <template>
<modal @update:show="update" :show="show"> <modal @update:show="update" :show="$store.state.playlists.showModal">
<div class="header"> <template v-if="track">
Add track "{{ track.title }}" by {{ track.artist.name }} to playlist <div class="header">
</div> Add "{{ track.title }}" by {{ track.artist.name }} to one of your playlists
<div class="content"> </div>
<div class="description"> <div class="scrolling content">
<playlist-form></playlist-form> <div class="description">
<div class="ui divider"></div> <playlist-form></playlist-form>
<div v-if="errors.length > 0" class="ui negative message"> <div class="ui divider"></div>
<div class="header">We cannot add the track to a playlist</div> <div v-if="errors.length > 0" class="ui negative message">
<ul class="list"> <div class="header">We cannot add the track to a playlist</div>
<li v-for="error in errors">{{ error }}</li> <ul class="list">
</ul> <li v-for="error in errors">{{ error }}</li>
</div> </ul>
<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"><i class="music icon"></i> {{ playlist.tracks_count }} tracks</span>
<span class="date"><i class="clock icon"></i> Last modification {{ playlist.modification_date | ago}}</span>
</div>
<div class="extra">
<div class="ui basic green button" @click="addToPlaylist(playlist.id)">
Add to this playlist
</div>
</div>
</div>
</div> </div>
<h4 class="ui header">Available playlists</h4>
<table class="ui single line unstackable very basic table">
<thead>
<tr>
<th>Name</th>
<th class="sorted descending">Last modification</th>
<th>Tracks</th>
<th>Visibility</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="playlist in sortedPlaylists">
<td><router-link :to="{name: 'library.playlists.detail', params: {id: playlist.id }}">{{ playlist.name }}</router-link></td>
<td><human-date :date="playlist.modification_date"></human-date></td>
<td>{{ playlist.tracks_count }}</td>
<td>{{ playlist.privacy_level }}</td>
<td>
<div
class="ui green icon right floated button"
title="Add to this playlist"
@click="addToPlaylist(playlist.id)">
<i class="plus icon"></i>
</div>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</div> <div class="actions">
<div class="ui cancel button">Cancel</div>
</div>
</template>
</modal> </modal>
</template> </template>
...@@ -48,10 +65,6 @@ export default { ...@@ -48,10 +65,6 @@ export default {
Modal, Modal,
PlaylistForm PlaylistForm
}, },
props: {
track: {type: Object},
show: {type: Boolean}
},
data () { data () {
return { return {
errors: [] errors: []
...@@ -59,7 +72,7 @@ export default { ...@@ -59,7 +72,7 @@ export default {
}, },
methods: { methods: {
update (v) { update (v) {
this.$emit('update:show', v) this.$store.commit('playlists/showModal', v)
}, },
addToPlaylist (playlistId) { addToPlaylist (playlistId) {
let self = this let self = this
...@@ -69,7 +82,7 @@ export default { ...@@ -69,7 +82,7 @@ export default {
} }
return axios.post('playlist-tracks/', payload).then(response => { return axios.post('playlist-tracks/', payload).then(response => {
logger.default.info('Successfully added track to playlist') logger.default.info('Successfully added track to playlist')
self.$emit('update:show', false) self.update(false)
self.$store.dispatch('playlists/fetchOwn') self.$store.dispatch('playlists/fetchOwn')
}, error => { }, error => {
logger.default.error('Error while adding track to playlist') logger.default.error('Error while adding track to playlist')
...@@ -79,7 +92,8 @@ export default { ...@@ -79,7 +92,8 @@ export default {
}, },
computed: { computed: {
...mapState({ ...mapState({
playlists: state => state.playlists.playlists playlists: state => state.playlists.playlists,
track: state => state.playlists.modalTrack
}), }),
sortedPlaylists () { sortedPlaylists () {
let p = _.sortBy(this.playlists, [(e) => { return e.modification_date }]) let p = _.sortBy(this.playlists, [(e) => { return e.modification_date }])
......
<template> <template>
<button <button
@click="showModal = true" @click="$store.commit('playlists/chooseTrack', track)"
v-if="button" v-if="button"
:class="['ui', 'button']"> :class="['ui', 'button']">
<i class="list icon"></i> <i class="list icon"></i>
Add to playlist... Add to playlist...
<playlist-modal :track="track" :show.sync="showModal"></playlist-modal>
</button> </button>
<i <i
v-else v-else
@click="showModal = true" @click="$store.commit('playlists/chooseTrack', track)"
:class="['favorite-icon', 'list', 'link', 'icon']" :class="['favorite-icon', 'list', 'link', 'icon']"
title="Add to playlist..."> title="Add to playlist...">
<playlist-modal :track="track" :show.sync="showModal"></playlist-modal>
</i> </i>
</template> </template>
<script> <script>
import PlaylistModal from '@/components/playlists/PlaylistModal'
export default { export default {
components: {
PlaylistModal
},
props: { props: {
track: {type: Object}, track: {type: Object},
button: {type: Boolean, default: false} button: {type: Boolean, default: false}
......
...@@ -3,11 +3,20 @@ import axios from 'axios' ...@@ -3,11 +3,20 @@ import axios from 'axios'
export default { export default {
namespaced: true, namespaced: true,
state: { state: {
playlists: [] playlists: [],
showModal: false,
modalTrack: null
}, },
mutations: { mutations: {
playlists (state, value) { playlists (state, value) {
state.playlists = value state.playlists = value
},
chooseTrack (state, value) {
state.showModal = true
state.modalTrack = value
},
showModal (state, value) {
state.showModal = value
} }
}, },
actions: { actions: {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment