[web-src] Refactor track and playlis listings

web-src/src/components/ListPlaylists.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <list-item-playlist v-for="playlist in playlists" :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-rss': playlist.type === 'rss', '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>
+        </a>
+      </template>
+    </list-item-playlist>
+    <modal-dialog-playlist :show="show_details_modal" :playlist="selected_playlist" @close="show_details_modal = false" />
+  </div>
+</template>
+
+<script>
+import ListItemPlaylist from '@/components/ListItemPlaylist'
+import ModalDialogPlaylist from '@/components/ModalDialogPlaylist'
+
+export default {
+  name: 'ListPlaylists',
+  components: { ListItemPlaylist, ModalDialogPlaylist },
+
+  props: ['playlists'],
+
+  data () {
+    return {
+      show_details_modal: false,
+      selected_playlist: {}
+    }
+  },
+
+  methods: {
+    open_playlist: function (playlist) {
+      if (playlist.type !== 'folder') {
+        this.$router.push({ path: '/playlists/' + playlist.id + '/tracks' })
+      } else {
+        this.$router.push({ path: '/playlists/' + playlist.id })
+      }
+    },
+
+    open_dialog: function (playlist) {
+      this.selected_playlist = playlist
+      this.show_details_modal = true
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/ListTracks.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" @click="play_track(index, track)">
+      <template slot="actions">
+        <a @click="open_dialog(track)">
+          <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+        </a>
+      </template>
+    </list-item-track>
+    <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
+  </div>
+</template>
+
+<script>
+import ListItemTrack from '@/components/ListItemTrack'
+import ModalDialogTrack from '@/components/ModalDialogTrack'
+import webapi from '@/webapi'
+
+export default {
+  name: 'ListTracks',
+  components: { ListItemTrack, ModalDialogTrack },
+
+  props: ['tracks', 'uris', 'expression'],
+
+  data () {
+    return {
+      show_details_modal: false,
+      selected_track: {}
+    }
+  },
+
+  methods: {
+    play_track: function (position, track) {
+      if (this.uris) {
+        webapi.player_play_uri(this.uris, false, position)
+      } else if (this.expression) {
+        webapi.player_play_expression(this.expression, false, position)
+      } else {
+        webapi.player_play_uri(track.uri, false)
+      }
+    },
+
+    open_dialog: function (track) {
+      this.selected_track = track
+      this.show_details_modal = true
+    }
+  }
+}
+</script>
+
+<style>
+</style>