feat: ✨ Added "Sort" feature. It allows sorting by track name, artist…

… name, duration and popularity.

This feature also introduces some refactoring to the whole modal/rearrangement system

src/components/_base/Modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <portal to="modals" v-if="show">
+  <portal v-if="show" to="modals">
     <transition
       :duration="300"
       name="modal"
@@ -38,8 +38,8 @@ export default {
     },
     modalStyles: {
       type: Object,
-      default: {},
-    }
+      default: () => {},
+    },
   },
 };
 </script>

src/components/_base/RadioButtonGroup.vue

@@ -1,16 +1,25 @@
 <template>
-  <div class="button-group">
-    <label v-for="key in optionKeys" :class="{ button: true, checked: value === key }">
-      {{options[key]}}
-      <input
-        type="radio"
-        class="input"
-        :value="key"
-        :name="name"
-        :checked="value === key"
-        @click="$emit('change', key)"
-      />
-    </label>
+  <div>
+    <p v-if="label" class="label">
+      {{ label }}
+    </p>
+    <div class="button-group">
+      <label
+        v-for="key in optionKeys"
+        :key="key"
+        :class="{ button: true, checked: value === key }"
+      >
+        {{ options[key] }}
+        <input
+          type="radio"
+          class="input"
+          :value="key"
+          :name="name"
+          :checked="value === key"
+          @click="$emit('change', key)"
+        >
+      </label>
+    </div>
   </div>
 </template>
 
@@ -29,23 +38,34 @@ export default {
     name: {
       type: String,
       required: true,
-    }
+    },
+    label: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     optionKeys() {
       return Object.keys(this.options);
-    }
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+  .label {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--color-default);
+    margin-bottom: 5px;
+  }
+
   .button {
     display: inline-flex;
     align-items: center;
     padding: 6px 10px 7px;
 
-    border: 1px solid var(--color-grey);
+    border: 1px solid #CCC;
     border-left-width: 0;
     outline: 0;
 
@@ -70,7 +90,7 @@ export default {
       border-radius: 0 3px 3px 0;
     }
 
-    &:checked {
+    &.checked {
       background-color: var(--spotify-green);
       border-color: var(--spotify-green);
       color: white;

src/components/core/ChangelogModal.vue

@@ -1,6 +1,6 @@
 <template>
   <b-modal :show="show" :modal-styles="{ maxHeight: '75vh', overflowY: 'scroll' }">
-    <div v-html="html" class="changelog-saljhd98a2ebhs"/>
+    <div class="changelog-saljhd98a2ebhs" v-html="html" />
     <div slot="footer">
       <b-button @click="$emit('close')">
         Close
@@ -15,17 +15,17 @@ import changelog from '../../../CHANGELOG.md';
 
 export default {
   name: 'ChangelogModal',
-  computed: {
-    html() {
-      return changelog.replace(/All[\s\S]*guidelines./g, '');
-    },
-  },
   props: {
     show: {
       type: Boolean,
       required: true,
     },
   },
+  computed: {
+    html() {
+      return changelog.replace(/All[\s\S]*guidelines./g, '');
+    },
+  },
   methods: {
     ...mapActions('app', [
       'closeModal',

src/components/core/MainWindowFooter.vue

@@ -28,7 +28,7 @@ export default {
     },
     closeChangelog() {
       this.showChangelog = false;
-    }
+    },
   },
 };
 </script>

src/components/core/ModalManager.vue

@@ -5,7 +5,7 @@
     <confirmation-modal />
 
     <!-- dynamic modals live here... -->
-    <portal-target name="modals"></portal-target>
+    <portal-target name="modals" />
   </div>
 </template>
 

src/components/editor/EditorOperationPanel.vue

@@ -11,14 +11,7 @@
             />
             Shuffle
           </b-button>
-          <b-button tertiary @click="onClickSort">
-            <v-icon
-              slot="icon"
-              name="sort"
-              label="sort"
-            />
-            Sort
-          </b-button>
+          <sort-configuration-modal />
           <b-button tertiary @click="onClickStatistics">
             <v-icon
               slot="icon"
@@ -44,11 +37,12 @@ import { mapActions, mapState } from 'vuex';
 
 import TimeOfDaySwitch from './TimeOfDaySwitch';
 import RandomShuffle from '../../playlist-modifications/RandomShuffle';
-import SortByTrackProperty from '../../playlist-modifications/SortByTrackProperty';
+import SortConfigurationModal from './SortConfigurationModal';
 
 export default {
   name: 'EditorOperationPanel',
   components: {
+    SortConfigurationModal,
     TimeOfDaySwitch,
   },
   computed: {
@@ -76,29 +70,6 @@ export default {
         });
       }
     },
-    async onClickSort() {
-      try {
-        await this.askForConfirmation({
-          headline: 'Sort',
-          question: 'Are you sure you want to sort your playlist?',
-          positive: 'Sort',
-          negative: 'Cancel',
-        });
-        await this.rearrangePlaylistWith({
-          rearranger: SortByTrackProperty,
-          options: {
-            order: 'ASC',
-            sortBy: 'artists.0.name',
-          },
-        });
-      } catch (e) {
-        this.addToast({
-          message: e.message,
-          type: 'error',
-          dismissible: false,
-        });
-      }
-    },
     async onClickStatistics() {
       if (this.showStatistics) {
         this.closePlaylistStatistics();
@@ -119,6 +90,7 @@ export default {
     ...mapActions('app', [
       'askForConfirmation',
       'addToast',
+      'openModal',
     ]),
     ...mapActions('editor', [
       'rearrangePlaylistWith',

src/components/editor/EditorTrackAdder.vue

@@ -5,17 +5,17 @@
         Add track
       </b-text>
     </div>
-    <add-track-modal :show="showModal" @close="closeModal"/>
+    <add-track-modal :show="showModal" @close="closeModal" />
   </b-container>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import AddTrackModal from "./AddTrackModal";
+import AddTrackModal from './AddTrackModal';
 
 export default {
   name: 'EditorTrackAdder',
-  components: {AddTrackModal},
+  components: { AddTrackModal },
   data() {
     return {
       showModal: false,
@@ -32,7 +32,7 @@ export default {
     },
     closeModal() {
       this.showModal = false;
-    }
+    },
   },
 };
 </script>

src/components/editor/SortConfigurationModal.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="container">
+    <b-button
+      tertiary
+      class="toggle"
+      @click="openModal"
+    >
+      <v-icon
+        slot="icon"
+        name="sort"
+        label="sort"
+      />
+      Sort
+    </b-button>
+    <b-modal headline="Sort settings" :show="showModal">
+      <b-radio-button-group
+        name="order"
+        label="Order"
+        class="button-group"
+        :options="orderOptions"
+        :value="order"
+        @change="onOrderChange"
+      />
+      <b-radio-button-group
+        name="sortBy"
+        label="Sort by"
+        class="button-group"
+        :options="sortByOptions"
+        :value="sortBy"
+        @change="onSortByChange"
+      />
+      <div slot="footer">
+        <b-button tertiary @click="closeModal">
+          Close
+        </b-button>
+        <b-button primary @click="sort">
+          Sort
+        </b-button>
+      </div>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import 'vue-awesome/icons/sort';
+import { mapActions } from 'vuex';
+
+import SortByTrackProperty from '../../playlist-modifications/SortByTrackProperty';
+
+export default {
+  name: 'SortConfigurationModal',
+  data() {
+    return {
+      showModal: false,
+      order: 'ASC',
+      orderOptions: {
+        ASC: 'ASC',
+        DESC: 'DESC',
+      },
+      sortBy: 'artists.0.name',
+      sortByOptions: {
+        'artists.0.name': 'Artist name',
+        name: 'Track name',
+        popularity: 'Popularity',
+        duration_ms: 'Duration',
+      },
+    };
+  },
+  methods: {
+    openModal() {
+      this.showModal = true;
+    },
+    closeModal() {
+      this.showModal = false;
+    },
+    onSortByChange(value) {
+      this.sortBy = value;
+    },
+    onOrderChange(value) {
+      this.order = value;
+    },
+    async sort() {
+      this.showModal = false;
+      await this.askForConfirmation({
+        headline: 'Sort',
+        question: 'Are you sure you want to sort your playlist?',
+        positive: 'Sort',
+        negative: 'Cancel',
+      });
+      await this.rearrangePlaylistWith({
+        rearranger: SortByTrackProperty,
+        options: {
+          sortBy: this.sortBy,
+          order: this.order,
+        },
+      });
+    },
+    ...mapActions('app', [
+      'askForConfirmation',
+    ]),
+    ...mapActions('editor', [
+      'rearrangePlaylistWith',
+    ]),
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    display: inline-block;
+  }
+
+  .button-group {
+    margin-bottom: 10px;
+  }
+
+  .toggle {
+    margin: 0;
+  }
+
+  .fa-icon {
+    color: var(--spotify-green);
+    font-size: 18px;
+  }
+</style>

src/main.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import Icon from 'vue-awesome/components/Icon';
-import PortalVue from 'portal-vue'
+import PortalVue from 'portal-vue';
 
 import App from './App';
 import store from './store';