Update vuedraggable

front/package.json

@@ -43,7 +43,7 @@
     "vue-upload-component": "2.8.22",
     "vue3-gettext": "2.2.0-alpha.1",
     "vue3-lazyload": "0.2.5-beta",
-    "vuedraggable": "2.24.3",
+    "vuedraggable": "4.1.0",
     "vuex": "4.0.2",
     "vuex-persistedstate": "4.1.0",
     "vuex-router-sync": "5.0.0"

front/src/components/Queue.vue

@@ -156,7 +156,7 @@
                     :title="labels.previousTrack"
                     :aria-label="labels.previousTrack"
                     class="control"
-                    :disabled="emptyQueue"
+                    :disabled="emptyQueue ? true : null"
                     @click.prevent.stop="$store.dispatch('queue/previous')"
                   >
                     <i :class="['ui', 'backward step', {'disabled': emptyQueue}, 'icon']" />
@@ -187,7 +187,7 @@
                     :title="labels.next"
                     :aria-label="labels.next"
                     class="control"
-                    :disabled="!hasNext"
+                    :disabled="hasNext ? true : null"
                     @click.prevent.stop="$store.dispatch('queue/next')"
                   >
                     <i :class="['ui', {'disabled': !hasNext}, 'forward step', 'icon']" />
@@ -237,14 +237,15 @@
             </div>
             <table class="ui compact very basic fixed single line selectable unstackable table">
               <draggable
-                v-model="tracks"
+                v-model:list="tracks"
                 tag="tbody"
                 handle=".handle"
                 @update="reorder"
+                item-key="id"
               >
+                <template #item="{ element: track, index }">
                   <tr
-                  v-for="(track, index) in tracks"
+                    :key="track.id"
-                  :key="index"
                     :class="['queue-item', {'active': index === queue.currentIndex}]"
                   >
                     <td class="handle">
@@ -307,6 +308,7 @@
                       </button>
                     </td>
                   </tr>
+                </template>
               </draggable>
             </table>
 
@@ -450,7 +452,8 @@ export default {
           this.$store.commit('ui/queueFocused', null)
         }
       },
-      immediate: true
+      immediate: true,
+      deep: true
     },
     '$route.fullPath' () {
       this.$store.commit('ui/queueFocused', null)

front/src/components/audio/track/Table.vue

@@ -163,7 +163,6 @@ import axios from 'axios'
 import TrackRow from '~/components/audio/track/Row.vue'
 import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
 import Pagination from '~/components/Pagination.vue'
-import { unique } from '~/utils/filters'
 
 export default {
   components: {

front/src/components/playlists/Editor.vue

@@ -127,14 +127,13 @@
         <div class="table-wrapper">
           <table class="ui compact very basic unstackable table">
             <draggable
-              v-model="plts"
+              v-model:list="plts"
               tag="tbody"
               @update="reorder"
+              item-key="_id"
             >
-              <tr
+              <template #item="{ element: plt, index }">
-                v-for="(plt, index) in plts"
+                <tr>
-                :key="`${index}-${plt.track.id}`"
-              >
                   <td class="left aligned">
                     {{ plt.index + 1 }}
                   </td>
@@ -167,6 +166,7 @@
                     </button>
                   </td>
                 </tr>
+              </template>
             </draggable>
           </table>
         </div>
@@ -177,6 +177,7 @@
 
 <script>
 import { mapState } from 'vuex'
+import { computed } from 'vue'
 import axios from 'axios'
 import PlaylistForm from '~/components/playlists/Form.vue'
 
@@ -191,9 +192,15 @@ export default {
     playlist: { type: Object, required: true },
     playlistTracks: { type: Array, required: true }
   },
+  setup (props) {
+    const plts = computed(() => {
+      return props.playlistTracks.map((plt, index) => ({ ...plt, _id: `${index}-${plt.track.id}` }))
+    })
+
+    return { plts }
+  },
   data () {
     return {
-      plts: this.playlistTracks,
       isLoading: false,
       errors: [],
       duplicateTrackAddInfo: {},

front/yarn.lock

@@ -6119,10 +6119,10 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-sortablejs@1.10.2:
+sortablejs@1.14.0:
-  version "1.10.2"
+  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
-  integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
+  integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
 
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
@@ -6809,12 +6809,12 @@ vue@^2.6.12:
     "@vue/compiler-sfc" "2.7.10"
     csstype "^3.1.0"
 
-vuedraggable@2.24.3:
+vuedraggable@^4.1.0:
-  version "2.24.3"
+  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
-  integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
+  integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
   dependencies:
-    sortablejs "1.10.2"
+    sortablejs "1.14.0"
 
 vuex-persistedstate@4.1.0:
   version "4.1.0"