[web-src] Show playlist folders

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) {