diff --git a/front/src/App.vue b/front/src/App.vue
index 347f19e30ebbf071bb4c5014649d81650942c84b..d15eebdba69db25580d2d86a055819439a7c113a 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -29,6 +29,8 @@
v-if="$store.state.instance.settings.raven.front_enabled.value"
:dsn="$store.state.instance.settings.raven.front_dsn.value">
</raven>
+ <playlist-modal v-if="$store.state.auth.authenticated"></playlist-modal>
+
</div>
</template>
@@ -39,11 +41,14 @@ import logger from '@/logging'
import Sidebar from '@/components/Sidebar'
import Raven from '@/components/Raven'
+import PlaylistModal from '@/components/playlists/PlaylistModal'
+
export default {
name: 'app',
components: {
Sidebar,
- Raven
+ Raven,
+ PlaylistModal
},
created () {
this.$store.dispatch('instance/fetchSettings')
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index 7bf027db7fdceb0d31f2e08b00f0868472b0de4d..b470eb5ce06e37194ef5279fd8562ab33868b0d3 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -1,36 +1,53 @@
<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"><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>
+ <modal @update:show="update" :show="$store.state.playlists.showModal">
+ <template v-if="track">
+ <div class="header">
+ Add "{{ track.title }}" by {{ track.artist.name }} to one of your playlists
+ </div>
+ <div class="scrolling 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>
+ <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 class="actions">
+ <div class="ui cancel button">Cancel</div>
+ </div>
+ </template>
</modal>
</template>
@@ -48,10 +65,6 @@ export default {
Modal,
PlaylistForm
},
- props: {
- track: {type: Object},
- show: {type: Boolean}
- },
data () {
return {
errors: []
@@ -59,7 +72,7 @@ export default {
},
methods: {
update (v) {
- this.$emit('update:show', v)
+ this.$store.commit('playlists/showModal', v)
},
addToPlaylist (playlistId) {
let self = this
@@ -69,7 +82,7 @@ export default {
}
return axios.post('playlist-tracks/', payload).then(response => {
logger.default.info('Successfully added track to playlist')
- self.$emit('update:show', false)
+ self.update(false)
self.$store.dispatch('playlists/fetchOwn')
}, error => {
logger.default.error('Error while adding track to playlist')
@@ -79,7 +92,8 @@ export default {
},
computed: {
...mapState({
- playlists: state => state.playlists.playlists
+ playlists: state => state.playlists.playlists,
+ track: state => state.playlists.modalTrack
}),
sortedPlaylists () {
let p = _.sortBy(this.playlists, [(e) => { return e.modification_date }])
diff --git a/front/src/components/playlists/TrackPlaylistIcon.vue b/front/src/components/playlists/TrackPlaylistIcon.vue
index 2684f7cb63fa8078674d72511469516387e5f728..843d1539214a67530882a6eb360d4b1dfded3f40 100644
--- a/front/src/components/playlists/TrackPlaylistIcon.vue
+++ b/front/src/components/playlists/TrackPlaylistIcon.vue
@@ -1,28 +1,22 @@
<template>
<button
- @click="showModal = true"
+ @click="$store.commit('playlists/chooseTrack', track)"
v-if="button"
:class="['ui', 'button']">
<i class="list icon"></i>
Add to playlist...
- <playlist-modal :track="track" :show.sync="showModal"></playlist-modal>
</button>
<i
v-else
- @click="showModal = true"
+ @click="$store.commit('playlists/chooseTrack', track)"
:class="['favorite-icon', 'list', 'link', 'icon']"
title="Add to playlist...">
- <playlist-modal :track="track" :show.sync="showModal"></playlist-modal>
</i>
</template>
<script>
-import PlaylistModal from '@/components/playlists/PlaylistModal'
export default {
- components: {
- PlaylistModal
- },
props: {
track: {type: Object},
button: {type: Boolean, default: false}
diff --git a/front/src/store/playlists.js b/front/src/store/playlists.js
index 75cac87ba42c48555f6ad3d30632a4fd70b67c16..b3ed3ab235bf09456a4b7cc9d7129963443488ca 100644
--- a/front/src/store/playlists.js
+++ b/front/src/store/playlists.js
@@ -3,11 +3,20 @@ import axios from 'axios'
export default {
namespaced: true,
state: {
- playlists: []
+ playlists: [],
+ showModal: false,
+ modalTrack: null
},
mutations: {
playlists (state, value) {
state.playlists = value
+ },
+ chooseTrack (state, value) {
+ state.showModal = true
+ state.modalTrack = value
+ },
+ showModal (state, value) {
+ state.showModal = value
}
},
actions: {