Can now delete playlist

front/src/components/playlists/PlaylistModal.vue

@@ -1,11 +1,18 @@
 <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
+      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>
+          <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">
@@ -14,29 +21,36 @@
             <li v-for="error in errors">{{ error }}</li>
           </ul>
         </div>
+        </div>
         <h4 class="ui header">Available playlists</h4>
-          <table class="ui single line unstackable very basic table">
+        <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>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>
+                <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>{{ playlist.privacy_level }}</td>
               <td>
                 <div
-                    class="ui green icon right floated button"
+                  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>
+                  <i class="plus icon"></i> Add track
                 </div>
               </td>
             </tr>
@@ -47,7 +61,6 @@
     <div class="actions">
       <div class="ui cancel button">Cancel</div>
     </div>
-    </template>
   </modal>
 </template>
 
@@ -100,6 +113,11 @@ export default {
       p.reverse()
       return p
     }
+  },
+  watch: {
+    '$store.state.route.path' () {
+      this.$store.commit('playlists/showModal', false)
+    }
   }
 }
 </script>

front/src/views/playlists/Detail.vue

@@ -1,6 +1,9 @@
 <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">
         <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'
         })
       })
     }