From a38f64852fdf0c37017674684ff6fb5c4b94e2ff Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Tue, 20 Mar 2018 23:41:15 +0100
Subject: [PATCH] Can now delete playlist
---
.../components/playlists/PlaylistModal.vue | 108 ++++++++++--------
front/src/views/playlists/Detail.vue | 32 +++++-
2 files changed, 91 insertions(+), 49 deletions(-)
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index b470eb5ce0..5fdf585dfb 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -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>
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index fc27b7126e..1f3caa4942 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -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'
})
})
}
--
GitLab