feat: ✨ Added shuffle operation

src/components/EditorOperationPanel.vue

@@ -5,8 +5,10 @@
         <b-column>
           <start-time-settings/>
         </b-column>
-        <b-column>
-          <b-button @click="shuffle">Shuffle</b-button>
+        <b-column class="right">
+          <b-button tertiary @click="onClickShuffle">
+            <shuffle-icon class="icon"/>
+          </b-button>
         </b-column>
       </b-row>
     </b-grid>
@@ -15,24 +17,40 @@
 
 <script>
 import { mapActions } from 'vuex';
+import { Shuffle } from 'vue-feather-icon';
 import StartTimeSettings from './StartTimeSettings.vue';
+import shuffle from '../editor-operations/shuffle';
 
 export default {
   name: 'EditorOperationPanel',
   components: {
     StartTimeSettings,
+    ShuffleIcon: Shuffle.default,
   },
   methods: {
-    async shuffle() {
+    async onClickShuffle() {
       try {
-        await this.askForConfirmation();
-        console.log('Shuffle');
+        await this.askForConfirmation({
+          headline: 'Shuffle',
+          question: 'Are you sure you want to shuffle your playlist?',
+          positive: 'Shuffle',
+          negative: 'Cancel',
+        });
+        await this.rearrangePlaylistWith(shuffle);
       } catch (e) {
-        // do nothing
+        this.addToast({
+          message: e.message,
+          type: 'error',
+          dismissible: false,
+        });
       }
     },
     ...mapActions('app', [
       'askForConfirmation',
+      'addToast',
+    ]),
+    ...mapActions('editor', [
+      'rearrangePlaylistWith',
     ]),
   },
 };
@@ -44,4 +62,14 @@ export default {
     box-shadow: 0 2px 2px 0px rgba(0,0,0,0.1);
     background-color: var(--color-light-grey);
   }
+
+  .icon, .icon > * {
+    color: green;
+    fill: red;
+    stroke: blue;
+  }
+
+  .right {
+    margin-left: auto;
+  }
 </style>

src/components/LoggedOutWindow.vue

@@ -12,7 +12,7 @@
 import SquareImage from './SquareImage.vue';
 import config from '../config';
 
-const scopes = ['playlist-modify-public'];
+const scopes = config.spotify.scopes;
 const getScopes = () => scopes.map(scope => encodeURIComponent(scope)).join(' ');
 
 export default {
@@ -23,7 +23,7 @@ export default {
   computed: {
     loginURI() {
       return `${'https://accounts.spotify.com/authorize?'
-        + 'client_id='}${config.client_id}&`
+        + 'client_id='}${config.spotify.client_id}&`
         + 'response_type=token&'
         + `scope=${getScopes()}&`
         + `redirect_uri=${encodeURIComponent(`${window.location.protocol}//${window.location.host}${window.location.pathname}`)}`;

src/components/modals/ConfirmationModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-modal headline="Please confirm">
+  <b-modal :headline="pendingConfirmation.headline">
     <b-text>{{ pendingConfirmation.question }}</b-text>
     <div slot="footer">
       <b-button tertiary @click="declineConfirmation">{{ pendingConfirmation.negative }}</b-button>

src/config.js

@@ -1,5 +1,12 @@
 const config = {
-  client_id: 'dc57243b2f564609beb31f87954380b6',
+  spotify: {
+    client_id: 'dc57243b2f564609beb31f87954380b6',
+    scopes: [
+      'playlist-read-private',
+      'playlist-modify-public',
+      'playlist-modify-private',
+    ],
+  },
 };
 
 export default config;

src/editor-operations/shuffle.js

@@ -0,0 +1,25 @@
+export default {
+  rearrange(playlist) {
+    let uris = playlist.tracks.items.map(item => item.track.uri);
+    uris = this.shuffleArray(uris);
+    return uris;
+  },
+
+  /**
+   * Shuffles array in place. (Fisher-Yates-Shuffle)
+   * @param {Array} a items An array containing the items.
+   */
+
+  shuffleArray(a) {
+    /* eslint-disable */
+    var j, x, i;
+    for (i = a.length - 1; i > 0; i--) {
+      j = Math.floor(Math.random() * (i + 1));
+      x = a[i];
+      a[i] = a[j];
+      a[j] = x;
+    }
+    return a;
+    /* eslint-enable */
+  },
+};

src/store/app/actions.js

@@ -39,16 +39,18 @@ export default {
     }
   },
 
-  askForConfirmation({ commit }, confirmation) {
+  askForConfirmation({ commit }, confirmation = {}) {
     const promise = new Promise((resolve, reject) => {
       commit('setOnConfirmationAccept', resolve);
       commit('setOnConfirmationDecline', reject);
     });
-    // TODO make customizable
-    commit('setPendingConfirmation', confirmation || {
+
+    commit('setPendingConfirmation', {
+      headline: 'Please confirm',
       question: 'Are you sure you want to proceed?',
       positive: 'Yes',
       negative: 'No',
+      ...confirmation,
     });
     return promise;
   },

src/store/editor/actions.js

@@ -81,4 +81,19 @@ export default {
       Spotify.handleApiError(dispatch, err);
     }
   },
+
+  async replaceTracks({ dispatch, state }, uris) {
+    try {
+      await api.replaceTracksInPlaylist(state.playlist.id, uris);
+      await dispatch('fetchPlaylist', state.playlist.id);
+    } catch (err) {
+      Spotify.handleApiError(dispatch, err);
+    }
+  },
+
+  async rearrangePlaylistWith({ dispatch, state }, rearranger) {
+    const { playlist } = state;
+    const uris = rearranger.rearrange(playlist);
+    return dispatch('replaceTracks', uris);
+  },
 };

src/store/editor/getters.js

@@ -4,6 +4,7 @@ export default {
     href: '',
     images: [],
     public: false,
+    id: null,
     tracks: {
       items: [],
       total: 0,