[web-src] Show playlist folders

web-src/src/components/ModalDialogPlaylist.vue

@@ -14,9 +14,13 @@
                   <span class="heading">Path</span>
                   <span class="title is-6">{{ playlist.path }}</span>
                 </p>
+                <p>
+                  <span class="heading">Type</span>
+                  <span class="title is-6">{{ playlist.type }}</span>
+                </p>
               </div>
             </div>
-            <footer class="card-footer">
+            <footer class="card-footer" v-if="!playlist.folder">
               <a class="card-footer-item has-text-dark" @click="queue_add">
                 <span class="icon"><i class="mdi mdi-playlist-plus"></i></span> <span class="is-size-7">Add</span>
               </a>
@@ -60,7 +64,7 @@ export default {
 
     open_playlist: function () {
       this.$emit('close')
-      this.$router.push({ path: '/playlists/' + this.playlist.id })
+      this.$router.push({ path: '/playlists/' + this.playlist.id + '/tracks' })
     }
   }
 }

web-src/src/pages/PageFiles.vue

@@ -166,7 +166,7 @@ export default {
     },
 
     open_playlist: function (playlist) {
-      this.$router.push({ path: '/playlists/' + playlist.id })
+      this.$router.push({ path: '/playlists/' + playlist.id + '/tracks' })
     },
 
     open_playlist_dialog: function (playlist) {

web-src/src/pages/PagePlaylists.vue

@@ -1,11 +1,16 @@
 <template>
   <content-with-heading>
     <template slot="heading-left">
-      <p class="title is-4">Playlists</p>
+      <p class="title is-4">{{ playlist.name }}</p>
       <p class="heading">{{ playlists.total }} playlists</p>
     </template>
     <template slot="content">
       <list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist" @click="open_playlist(playlist)">
+        <template slot="icon">
+          <span class="icon">
+            <i class="mdi" :class="{ 'mdi-library-music': playlist.type !== 'folder', 'mdi-folder': playlist.type === 'folder' }"></i>
+          </span>
+        </template>
         <template slot="actions">
           <a @click="open_dialog(playlist)">
             <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@@ -27,11 +32,15 @@ import webapi from '@/webapi'
 
 const playlistsData = {
   load: function (to) {
-    return webapi.library_playlists()
+    return Promise.all([
+      webapi.library_playlist(to.params.playlist_id),
+      webapi.library_playlist_folder(to.params.playlist_id)
+    ])
   },
 
   set: function (vm, response) {
-    vm.playlists = response.data
+    vm.playlist = response[0].data
+    vm.playlists = response[1].data
   }
 }
 
@@ -42,6 +51,7 @@ export default {
 
   data () {
     return {
+      playlist: {},
       playlists: {},
 
       show_details_modal: false,
@@ -51,7 +61,11 @@ export default {
 
   methods: {
     open_playlist: function (playlist) {
-      this.$router.push({ path: '/playlists/' + playlist.id })
+      if (playlist.type !== 'folder') {
+        this.$router.push({ path: '/playlists/' + playlist.id + '/tracks' })
+      } else {
+        this.$router.push({ path: '/playlists/' + playlist.id })
+      }
     },
 
     open_dialog: function (playlist) {

web-src/src/pages/PageSearch.vue

@@ -295,7 +295,7 @@ export default {
     },
 
     open_playlist: function (playlist) {
-      this.$router.push({ path: '/playlists/' + playlist.id })
+      this.$router.push({ path: '/playlists/' + playlist.id + '/tracks' })
     },
 
     open_recent_search: function (query) {

web-src/src/router/index.js

@@ -156,12 +156,16 @@ export const router = new VueRouter({
     },
     {
       path: '/playlists',
+      redirect: '/playlists/0'
+    },
+    {
+      path: '/playlists/:playlist_id',
       name: 'Playlists',
       component: PagePlaylists,
       meta: { show_progress: true }
     },
     {
-      path: '/playlists/:playlist_id',
+      path: '/playlists/:playlist_id/tracks',
       name: 'Playlist',
       component: PagePlaylist,
       meta: { show_progress: true }

web-src/src/webapi/index.js

@@ -287,6 +287,10 @@ export default {
     return axios.get('/api/library/playlists')
   },
 
+  library_playlist_folder (playlistId = 0) {
+    return axios.get('/api/library/playlists/' + playlistId + '/playlists')
+  },
+
   library_playlist (playlistId) {
     return axios.get('/api/library/playlists/' + playlistId)
   },