[web] Fix playlist page displaying one ghost entry when no playlist are present

When there are no playlists or all of them are filtered out, the list of playlists is now completely empty.

web-src/src/components/ListPlaylists.vue

@@ -3,7 +3,6 @@
     v-for="playlist in playlists"
     :key="playlist.itemId"
     class="media is-align-items-center"
-    :playlist="playlist"
     @click="open_playlist(playlist.item)"
   >
     <figure class="media-left is-clickable">
@@ -45,13 +44,16 @@ export default {
 
   methods: {
     open_playlist(playlist) {
-      if (playlist.type !== 'folder') {
+      if (playlist.type === 'folder') {
         this.$router.push({
-          name: 'playlist-tracks',
+          name: 'playlist-folder',
           params: { id: playlist.id }
         })
       } else {
-        this.$router.push({ name: 'playlist', params: { id: playlist.id } })
+        this.$router.push({
+          name: 'playlist',
+          params: { id: playlist.id }
+        })
       }
     },
 

web-src/src/components/ModalDialogPlaylist.vue

@@ -90,7 +90,7 @@ export default {
     open_playlist() {
       this.$emit('close')
       this.$router.push({
-        name: 'playlist-tracks',
+        name: 'playlist',
         params: { id: this.playlist.id }
       })
     }

web-src/src/locales/de.json

@@ -380,6 +380,7 @@
       "track-count": "{count} Track|{count} Tracks"
     },
     "playlists": {
+      "title": "Playlisten",
       "count": "{count} Playlist|{count} Playlisten"
     },
     "podcast": {

web-src/src/locales/en.json

@@ -380,6 +380,7 @@
       "track-count": "{count} track|{count} track|{count} tracks"
     },
     "playlists": {
+      "title": "Playlists",
       "count": "{count} playlist|{count} playlist|{count} playlists"
     },
     "podcast": {

web-src/src/locales/fr.json

@@ -380,6 +380,7 @@
       "track-count": "{count} piste|{count} piste|{count} pistes"
     },
     "playlists": {
+      "title": "Listes de lecture",
       "count": "{count} liste de lecture|{count} liste de lecture|{count} listes de lecture"
     },
     "podcast": {

web-src/src/locales/zh.json

@@ -380,6 +380,7 @@
       "track-count": "{count} 只曲目|{count} 只曲目"
     },
     "playlists": {
+      "title": "播放列表",
       "count": "{count} 个播放列表|{count} 个播放列表"
     },
     "podcast": {

web-src/src/pages/PagePlaylistFolder.vue

@@ -2,14 +2,19 @@
   <div class="fd-page">
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="playlist.name" />
+        <p
+          class="title is-4"
+          v-text="
+            playlist.id === 0 ? $t('page.playlists.title') : playlist.name
+          "
+        />
         <p
           class="heading"
           v-text="$t('page.playlists.count', { count: playlists.count })"
         />
       </template>
       <template #content>
-        <list-playlists :playlists="playlists" />
+        <list-playlists v-if="has_playlists" :playlists="playlists" />
       </template>
     </content-with-heading>
   </div>
@@ -36,7 +41,7 @@ const dataObject = {
 }
 
 export default {
-  name: 'PagePlaylists',
+  name: 'PagePlaylistFolder',
   components: { ContentWithHeading, ListPlaylists },
 
   beforeRouteEnter(to, from, next) {
@@ -60,10 +65,9 @@ export default {
   },
 
   computed: {
-    radio_playlists() {
-      return this.$store.state.config.radio_playlists
+    has_playlists() {
+      return Object.keys(this.playlists_list.itemsByGroup).length > 0
     },
-
     playlists() {
       this.playlists_list.group(noop(), [
         (playlist) =>
@@ -72,8 +76,10 @@ export default {
           playlist.stream_count === 0 ||
           playlist.item_count > playlist.stream_count
       ])
-
       return this.playlists_list
+    },
+    radio_playlists() {
+      return this.$store.state.config.radio_playlists
     }
   }
 }

web-src/src/pages/PagePlaylistTracks.vue

@@ -57,7 +57,7 @@ const dataObject = {
 }
 
 export default {
-  name: 'PagePlaylist',
+  name: 'PagePlaylistTracks',
   components: { ContentWithHeading, ListTracks, ModalDialogPlaylist },
 
   beforeRouteEnter(to, from, next) {

web-src/src/pages/PagePlaylistTracksSpotify.vue

@@ -66,10 +66,10 @@ import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
 import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue'
 import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
-import store from '@/store'
-import webapi from '@/webapi'
 import SpotifyWebApi from 'spotify-web-api-js'
+import store from '@/store'
 import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
+import webapi from '@/webapi'
 
 const PAGE_SIZE = 50
 
@@ -97,7 +97,7 @@ const dataObject = {
 }
 
 export default {
-  name: 'PagePlaylistSpotify',
+  name: 'PagePlaylistTracksSpotify',
   components: {
     ContentWithHeading,
     ModalDialogPlaylistSpotify,

web-src/src/router/index.js

@@ -25,9 +25,9 @@ import PageFiles from '@/pages/PageFiles.vue'
 import PageGenreAlbum from '@/pages/PageGenreAlbum.vue'
 import PageGenreTracks from '@/pages/PageGenreTracks.vue'
 import PageGenres from '@/pages/PageGenres.vue'
-import PagePlaylist from '@/pages/PagePlaylist.vue'
-import PagePlaylistSpotify from '@/pages/PagePlaylistSpotify.vue'
+import PagePlaylistFolder from '@/pages/PagePlaylistFolder.vue'
 import PagePlaylistTracks from '@/pages/PagePlaylistTracks.vue'
+import PagePlaylistTracksSpotify from '@/pages/PagePlaylistTracksSpotify.vue'
 import PagePodcast from '@/pages/PagePodcast.vue'
 import PagePodcasts from '@/pages/PagePodcasts.vue'
 import PageNowPlaying from '@/pages/PageNowPlaying.vue'
@@ -211,26 +211,26 @@ export const router = createRouter({
     {
       name: 'playlists',
       path: '/playlists',
-      redirect: { name: 'playlist', params: { id: 0 } }
+      redirect: { name: 'playlist-folder', params: { id: 0 } }
     },
     {
-      component: PagePlaylist,
+      component: PagePlaylistFolder,
       meta: { show_progress: true },
-      name: 'playlist',
+      name: 'playlist-folder',
       path: '/playlists/:id'
     },
-    {
-      component: PagePlaylistSpotify,
-      meta: { show_progress: true },
-      name: 'playlist-spotify',
-      path: '/playlists/spotify/:id'
-    },
     {
       component: PagePlaylistTracks,
       meta: { show_progress: true },
-      name: 'playlist-tracks',
+      name: 'playlist',
       path: '/playlists/:id/tracks'
     },
+    {
+      component: PagePlaylistTracksSpotify,
+      meta: { show_progress: true },
+      name: 'playlist-spotify',
+      path: '/playlists/spotify/:id/tracks'
+    },
     {
       component: PagePodcast,
       meta: { show_progress: true },