Verified Commit a38f6485 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Can now delete playlist

parent 053fc117
<template> <template>
<modal @update:show="update" :show="$store.state.playlists.showModal"> <modal @update:show="update" :show="$store.state.playlists.showModal">
<template v-if="track"> <div class="header">
<div class="header"> Manage playlists
Add "{{ track.title }}" by {{ track.artist.name }} to one of your playlists </div>
</div> <div class="scrolling content">
<div class="scrolling content"> <div class="description">
<div class="description"> <template v-if="track">
<playlist-form></playlist-form> <h4 class="ui header">Current track</h4>
<div class="ui divider"></div> <div>
<div v-if="errors.length > 0" class="ui negative message"> "{{ track.title }}" by {{ track.artist.name }}
<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>
<h4 class="ui header">Available playlists</h4> <div class="ui divider"></div>
<table class="ui single line unstackable very basic table"> </template>
<thead>
<tr> <playlist-form></playlist-form>
<th>Name</th> <div class="ui divider"></div>
<th class="sorted descending">Last modification</th> <div v-if="errors.length > 0" class="ui negative message">
<th>Tracks</th> <div class="header">We cannot add the track to a playlist</div>
<th>Visibility</th> <ul class="list">
<th></th> <li v-for="error in errors">{{ error }}</li>
</tr> </ul>
</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>
<h4 class="ui header">Available playlists</h4>
<table class="ui unstackable very basic table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th class="sorted descending">Last modification</th>
<th>Tracks</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="playlist in sortedPlaylists">
<td>
<router-link
class="ui icon basic small button"
:to="{name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}}"><i class="ui pencil icon"></i></router-link>
</td>
<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>
<div
v-if="track"
class="ui green icon basic small right floated button"
title="Add to this playlist"
@click="addToPlaylist(playlist.id)">
<i class="plus icon"></i> Add track
</div>
</td>
</tr>
</tbody>
</table>
</div> </div>
<div class="actions"> </div>
<div class="ui cancel button">Cancel</div> <div class="actions">
</div> <div class="ui cancel button">Cancel</div>
</template> </div>
</modal> </modal>
</template> </template>
...@@ -100,6 +113,11 @@ export default { ...@@ -100,6 +113,11 @@ export default {
p.reverse() p.reverse()
return p return p
} }
},
watch: {
'$store.state.route.path' () {
this.$store.commit('playlists/showModal', false)
}
} }
} }
</script> </script>
......
<template> <template>
<div v-if="playlist"> <div>
<div class="ui head vertical center aligned stripe segment"> <div v-if="isLoading" class="ui vertical segment">
<div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
</div>
<div v-if="!isLoading && playlist" class="ui head vertical center aligned stripe segment">
<div class="segment-content"> <div class="segment-content">
<h2 class="ui center aligned icon header"> <h2 class="ui center aligned icon header">
<i class="circular inverted list yellow icon"></i> <i class="circular inverted list yellow icon"></i>
...@@ -23,6 +26,12 @@ ...@@ -23,6 +26,12 @@
<template v-if="edit">End edition</template> <template v-if="edit">End edition</template>
<template v-else>Edit...</template> <template v-else>Edit...</template>
</button> </button>
<dangerous-button class="labeled icon" :action="deletePlaylist">
<i class="trash icon"></i> Delete
<p slot="modal-header">Do you want to delete the playlist "{{ playlist.name }}"?</p>
<p slot="modal-content">This will completely delete this playlist and cannot be undone.</p>
<p slot="modal-confirm">Delete playlist</p>
</dangerous-button>
</div> </div>
</div> </div>
<div v-if="tracks.length > 0" class="ui vertical stripe segment"> <div v-if="tracks.length > 0" class="ui vertical stripe segment">
...@@ -45,7 +54,8 @@ import PlaylistEditor from '@/components/playlists/Editor' ...@@ -45,7 +54,8 @@ import PlaylistEditor from '@/components/playlists/Editor'
export default { export default {
props: { props: {
id: {required: true} id: {required: true},
defaultEdit: {type: Boolean, default: false}
}, },
components: { components: {
PlaylistEditor, PlaylistEditor,
...@@ -55,7 +65,8 @@ export default { ...@@ -55,7 +65,8 @@ export default {
}, },
data: function () { data: function () {
return { return {
edit: false, edit: this.defaultEdit,
isLoading: false,
playlist: null, playlist: null,
tracks: [], tracks: [],
playlistTracks: [] playlistTracks: []
...@@ -75,11 +86,24 @@ export default { ...@@ -75,11 +86,24 @@ export default {
}, },
fetch: function () { fetch: function () {
let self = this let self = this
self.isLoading = true
let url = 'playlists/' + this.id + '/' let url = 'playlists/' + this.id + '/'
axios.get(url).then((response) => { axios.get(url).then((response) => {
self.playlist = response.data self.playlist = response.data
axios.get(url + 'tracks').then((response) => { axios.get(url + 'tracks').then((response) => {
self.updatePlts(response.data.results) self.updatePlts(response.data.results)
}).then(() => {
self.isLoading = false
})
})
},
deletePlaylist () {
let self = this
let url = 'playlists/' + this.id + '/'
axios.delete(url).then((response) => {
self.$store.dispatch('playlists/fetchOwn')
self.$router.push({
path: '/library'
}) })
}) })
} }
......
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