feat: ✨ Added ability to re-order tracks!

#5

src/components/EditorPlaylist.vue

@@ -1,6 +1,6 @@
 <template>
   <b-list class="playlist" ordered>
-    <template v-for="(item, index) in playlistItems">
+    <template v-for="(item, index) in displayItems">
       <b-list-item
         v-if="index === 0 || item.track.first_of_hour"
         v-show="showStartingTime"
@@ -13,13 +13,17 @@
         :item="item"
         :position="index+1"
         :key="item.track.id"
+        draggable="true"
+        @dragstart.native="onDragStart(index)"
+        @dragend.native="onDragEnd(index)"
+        @dragenter.native="onDragEnter(index)"
       />
     </template>
   </b-list>
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex';
+import { mapGetters, mapState, mapActions } from 'vuex';
 import EditorPlaylistItem from './EditorPlaylistItem.vue';
 import formatTime from '../utils/formatTime';
 
@@ -31,13 +35,70 @@ export default {
       return formatTime(milliseconds, format);
     },
   },
+  data() {
+    return {
+      temporaryPlaylistItems: null,
+      dragging: false,
+      draggedFrom: null,
+      draggedFromOriginally: null,
+      draggedTo: null,
+    };
+  },
   computed: {
     ...mapState('editor', {
       showStartingTime: state => state.displayOptions.showStartingTime,
     }),
     ...mapGetters({
       playlistItems: 'editor/playlistItems',
     }),
+    displayItems() {
+      // Return the temporary items if they exists, otherwise the "real" ones
+      return this.temporaryPlaylistItems || this.playlistItems;
+    },
+  },
+  methods: {
+    ...mapActions('editor', [
+      'reorderTracks',
+    ]),
+    onDragStart(index) {
+      this.dragging = true;
+      this.draggedFrom = index;
+      this.draggedTo = null;
+      this.draggedFromOriginally = index;
+      this.temporaryPlaylistItems = [...this.playlistItems];
+    },
+    onDragEnter(index) {
+      if (this.draggedTo !== index) {
+        this.draggedTo = index;
+        this.moveElement(this.draggedFrom, this.draggedTo);
+        this.draggedFrom = this.draggedTo;
+      }
+    },
+    onDragEnd() {
+      // Dispatch actual reordering action
+      const insertBefore = this.draggedFromOriginally < this.draggedTo
+        ? this.draggedTo + 1
+        : this.draggedTo;
+
+      this.reorderTracks({
+        rangeStart: this.draggedFromOriginally,
+        insertBefore,
+      });
+
+      // cleanup
+      this.dragging = false;
+      this.draggedFrom = null;
+      this.draggedTo = null;
+      this.temporaryPlaylistItems = null; 
+      // TODO: Keep temp items, but only show them when "dragging = true"
+    },
+    moveElement(from, to) {
+      this.temporaryPlaylistItems.splice(
+        to, 
+        0, 
+        this.temporaryPlaylistItems.splice(from, 1)[0],
+      );
+    },
   },
 };
 </script>

src/store/editor/actions.js

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import Spotify from '../../utils/Spotify';
+import Spotify, { api } from '../../utils/Spotify';
 import 'moment-duration-format';
 
 export default {
@@ -29,6 +29,15 @@ export default {
     }
   },
 
+  async reorderTracks({ dispatch, state }, { rangeStart, insertBefore }) {
+    try {
+      await api.reorderTracksInPlaylist(state.playlist.id, rangeStart, insertBefore);
+      dispatch('fetchPlaylist', state.playlist.id);
+    } catch (err) {
+      Spotify.handleApiError(dispatch, err);
+    }
+  },
+
   setError({ commit }, errorMessage) {
     if (errorMessage === 'Token expired') {
       commit('user/setAccessToken', null, { root: true });

src/utils/Spotify.js

@@ -1,6 +1,6 @@
 import SpotifyWebApi from 'spotify-web-api-js';
 
-const api = new SpotifyWebApi();
+export const api = new SpotifyWebApi();
 
 /**
  * This is a collection of (mostly) functions that use the spotify-web-api.