Can now delete playlist
This commit is contained in:
Eliot Berriot
parent
053fc1171b
commit
a38f64852f
|
|
@ -1,53 +1,66 @@
|
|||
<template>
|
||||
<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 class="header">
|
||||
Manage playlists
|
||||
</div>
|
||||
<div class="scrolling content">
|
||||
<div class="description">
|
||||
<template v-if="track">
|
||||
<h4 class="ui header">Current track</h4>
|
||||
<div>
|
||||
"{{ track.title }}" by {{ track.artist.name }}
|
||||
</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 class="ui divider"></div>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
<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 class="actions">
|
||||
<div class="ui cancel button">Cancel</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui cancel button">Cancel</div>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
|
|
@ -100,6 +113,11 @@ export default {
|
|||
p.reverse()
|
||||
return p
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.route.path' () {
|
||||
this.$store.commit('playlists/showModal', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<div v-if="playlist">
|
||||
<div class="ui head vertical center aligned stripe segment">
|
||||
<div>
|
||||
<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">
|
||||
<h2 class="ui center aligned icon header">
|
||||
<i class="circular inverted list yellow icon"></i>
|
||||
|
|
@ -23,6 +26,12 @@
|
|||
<template v-if="edit">End edition</template>
|
||||
<template v-else>Edit...</template>
|
||||
</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 v-if="tracks.length > 0" class="ui vertical stripe segment">
|
||||
|
|
@ -45,7 +54,8 @@ import PlaylistEditor from '@/components/playlists/Editor'
|
|||
|
||||
export default {
|
||||
props: {
|
||||
id: {required: true}
|
||||
id: {required: true},
|
||||
defaultEdit: {type: Boolean, default: false}
|
||||
},
|
||||
components: {
|
||||
PlaylistEditor,
|
||||
|
|
@ -55,7 +65,8 @@ export default {
|
|||
},
|
||||
data: function () {
|
||||
return {
|
||||
edit: false,
|
||||
edit: this.defaultEdit,
|
||||
isLoading: false,
|
||||
playlist: null,
|
||||
tracks: [],
|
||||
playlistTracks: []
|
||||
|
|
@ -75,11 +86,24 @@ export default {
|
|||
},
|
||||
fetch: function () {
|
||||
let self = this
|
||||
self.isLoading = true
|
||||
let url = 'playlists/' + this.id + '/'
|
||||
axios.get(url).then((response) => {
|
||||
self.playlist = response.data
|
||||
axios.get(url + 'tracks').then((response) => {
|
||||
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'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue