Shared playlist modal

front/src/App.vue

@@ -29,6 +29,8 @@
       v-if="$store.state.instance.settings.raven.front_enabled.value"
       :dsn="$store.state.instance.settings.raven.front_dsn.value">
     </raven>
+    <playlist-modal v-if="$store.state.auth.authenticated"></playlist-modal>
+
   </div>
 </template>
 
@@ -39,11 +41,14 @@ import logger from '@/logging'
 import Sidebar from '@/components/Sidebar'
 import Raven from '@/components/Raven'
 
+import PlaylistModal from '@/components/playlists/PlaylistModal'
+
 export default {
   name: 'app',
   components: {
     Sidebar,
-    Raven
+    Raven,
+    PlaylistModal
   },
   created () {
     this.$store.dispatch('instance/fetchSettings')

front/src/components/playlists/PlaylistModal.vue

@@ -1,9 +1,10 @@
 <template>
-  <modal @update:show="update" :show="show">
+  <modal @update:show="update" :show="$store.state.playlists.showModal">
+    <template v-if="track">
       <div class="header">
-      Add track "{{ track.title }}" by {{ track.artist.name }} to playlist
+        Add "{{ track.title }}" by {{ track.artist.name }} to one of your playlists
       </div>
-    <div class="content">
+      <div class="scrolling content">
         <div class="description">
           <playlist-form></playlist-form>
           <div class="ui divider"></div>
@@ -13,24 +14,40 @@
               <li v-for="error in errors">{{ error }}</li>
             </ul>
           </div>
-        <div class="ui items">
+          <h4 class="ui header">Available playlists</h4>
-          <div class="item" v-for="playlist in sortedPlaylists">
+          <table class="ui single line unstackable very basic table">
-            <div class="content">
+            <thead>
-              <div class="header">{{ playlist.name }}</div>
+              <tr>
-              <div class="meta">
+                <th>Name</th>
-                <span class="tracks"><i class="music icon"></i> {{ playlist.tracks_count }} tracks</span>
+                <th class="sorted descending">Last modification</th>
-                <span class="date"><i class="clock icon"></i> Last modification {{ playlist.modification_date | ago}}</span>
+                <th>Tracks</th>
-              </div>
+                <th>Visibility</th>
-              <div class="extra">
+                <th></th>
-                <div class="ui basic green button" @click="addToPlaylist(playlist.id)">
+              </tr>
-                  Add to this playlist
+            </thead>
-                </div>
+            <tbody>
-              </div>
+              <tr v-for="playlist in sortedPlaylists">
-            </div>
+                <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"
+                    title="Add to this playlist"
+                    @click="addToPlaylist(playlist.id)">
+                  <i class="plus icon"></i>
                   </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
+      <div class="actions">
+        <div class="ui cancel button">Cancel</div>
       </div>
+    </template>
   </modal>
 </template>
 
@@ -48,10 +65,6 @@ export default {
     Modal,
     PlaylistForm
   },
-  props: {
-    track: {type: Object},
-    show: {type: Boolean}
-  },
   data () {
     return {
       errors: []
@@ -59,7 +72,7 @@ export default {
   },
   methods: {
     update (v) {
-      this.$emit('update:show', v)
+      this.$store.commit('playlists/showModal', v)
     },
     addToPlaylist (playlistId) {
       let self = this
@@ -69,7 +82,7 @@ export default {
       }
       return axios.post('playlist-tracks/', payload).then(response => {
         logger.default.info('Successfully added track to playlist')
-        self.$emit('update:show', false)
+        self.update(false)
         self.$store.dispatch('playlists/fetchOwn')
       }, error => {
         logger.default.error('Error while adding track to playlist')
@@ -79,7 +92,8 @@ export default {
   },
   computed: {
     ...mapState({
-      playlists: state => state.playlists.playlists
+      playlists: state => state.playlists.playlists,
+      track: state => state.playlists.modalTrack
     }),
     sortedPlaylists () {
       let p = _.sortBy(this.playlists, [(e) => { return e.modification_date }])

front/src/components/playlists/TrackPlaylistIcon.vue

@@ -1,28 +1,22 @@
 <template>
   <button
-    @click="showModal = true"
+    @click="$store.commit('playlists/chooseTrack', track)"
     v-if="button"
     :class="['ui', 'button']">
     <i class="list icon"></i>
     Add to playlist...
-    <playlist-modal :track="track" :show.sync="showModal"></playlist-modal>
   </button>
   <i
     v-else
-    @click="showModal = true"
+    @click="$store.commit('playlists/chooseTrack', track)"
     :class="['favorite-icon', 'list', 'link', 'icon']"
     title="Add to playlist...">
-    <playlist-modal :track="track" :show.sync="showModal"></playlist-modal>
   </i>
 </template>
 
 <script>
-import PlaylistModal from '@/components/playlists/PlaylistModal'
 
 export default {
-  components: {
-    PlaylistModal
-  },
   props: {
     track: {type: Object},
     button: {type: Boolean, default: false}

front/src/store/playlists.js

@@ -3,11 +3,20 @@ import axios from 'axios'
 export default {
   namespaced: true,
   state: {
-    playlists: []
+    playlists: [],
+    showModal: false,
+    modalTrack: null
   },
   mutations: {
     playlists (state, value) {
       state.playlists = value
+    },
+    chooseTrack (state, value) {
+      state.showModal = true
+      state.modalTrack = value
+    },
+    showModal (state, value) {
+      state.showModal = value
     }
   },
   actions: {