Fixed #26: can now reorder tracks in queue using drag and drop

front/package.json

@@ -19,7 +19,8 @@
     "semantic-ui-css": "^2.2.10",
     "vue": "^2.3.3",
     "vue-resource": "^1.3.4",
-    "vue-router": "^2.3.1"
+    "vue-router": "^2.3.1",
+    "vuedraggable": "^2.14.1"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",

front/src/audio/queue.js

@@ -92,6 +92,24 @@ class Queue {
     }
     cache.set('volume', newValue)
   }
+
+  reorder (oldIndex, newIndex) {
+    // called when the user uses drag / drop to reorder
+    // tracks in queue
+    if (oldIndex === this.currentIndex) {
+      this.currentIndex = newIndex
+      return
+    }
+    if (oldIndex < this.currentIndex && newIndex >= this.currentIndex) {
+      // item before was moved after
+      this.currentIndex -= 1
+    }
+    if (oldIndex > this.currentIndex && newIndex <= this.currentIndex) {
+      // item after was moved before
+      this.currentIndex += 1
+    }
+  }
+
   append (track, index) {
     this.previousQueue = null
     index = index || this.tracks.length

front/src/components/Sidebar.vue

@@ -50,27 +50,27 @@
     </div>
     <div class="ui bottom attached tab" data-tab="queue">
       <table class="ui compact inverted very basic fixed single line table">
-        <tbody>
-          <tr @click="queue.play(index)" v-for="(track, index) in queue.tracks" :class="[{'active': index === queue.currentIndex}]">
-            <td class="right aligned">{{ index + 1}}</td>
-            <td class="center aligned">
-              <img class="ui mini image" v-if="track.album.cover" :src="backend.absoluteUrl(track.album.cover)">
-              <img class="ui mini image" v-else src="../assets/audio/default-cover.png">
-            </td>
-            <td colspan="4">
-              <strong>{{ track.title }}</strong><br />
-              {{ track.artist.name }}
-            </td>
-            <td>
-              <template v-if="favoriteTracks.objects[track.id]">
-                <i @click.stop="queue.cleanTrack(index)" class="pink heart icon"></i>
-              </template
-            </td>
-            <td>
-              <i @click.stop="queue.cleanTrack(index)" class="circular trash icon"></i>
-            </td>
-          </tr>
-        </tbody>
+        <draggable v-model="queue.tracks" element="tbody" @update="reorder">
+          <tr @click="queue.play(index)" v-for="(track, index) in queue.tracks" :key="index" :class="[{'active': index === queue.currentIndex}]">
+              <td class="right aligned">{{ index + 1}}</td>
+              <td class="center aligned">
+                  <img class="ui mini image" v-if="track.album.cover" :src="backend.absoluteUrl(track.album.cover)">
+                  <img class="ui mini image" v-else src="../assets/audio/default-cover.png">
+              </td>
+              <td colspan="4">
+                  <strong>{{ track.title }}</strong><br />
+                  {{ track.artist.name }}
+              </td>
+              <td>
+                <template v-if="favoriteTracks.objects[track.id]">
+                  <i @click.stop="queue.cleanTrack(index)" class="pink heart icon"></i>
+                  </template
+              </td>
+              <td>
+                  <i @click.stop="queue.cleanTrack(index)" class="circular trash icon"></i>
+              </td>
+            </tr>
+          </draggable>
       </table>
       <div v-if="radios.running" class="ui black message">
 
@@ -98,6 +98,7 @@ import SearchBar from '@/components/audio/SearchBar'
 import auth from '@/auth'
 import queue from '@/audio/queue'
 import backend from '@/audio/backend'
+import draggable from 'vuedraggable'
 import radios from '@/radios'
 
 import $ from 'jquery'
@@ -107,7 +108,8 @@ export default {
   components: {
     Player,
     SearchBar,
-    Logo
+    Logo,
+    draggable
   },
   data () {
     return {
@@ -120,6 +122,11 @@ export default {
   },
   mounted () {
     $(this.$el).find('.menu .item').tab()
+  },
+  methods: {
+    reorder (e) {
+      this.queue.reorder(e.oldIndex, e.newIndex)
+    }
   }
 }
 </script>