Browse Source

fix: draggable list items sometimes had wrong key, leading to issues like requested by being wrong

Kristian Vos 1 year ago
parent
commit
c8ad6167ad

+ 2 - 1
frontend/src/components/Queue.vue

@@ -141,7 +141,7 @@ onUpdated(() => {
 		>
 			<draggable-list
 				v-model:list="queue"
-				item-key="_id"
+				item-key="youtubeId"
 				@start="drag = true"
 				@end="drag = false"
 				@update="repositionSongInQueue"
@@ -153,6 +153,7 @@ onUpdated(() => {
 						:requested-by="true"
 						:disabled-actions="[]"
 						:ref="el => (songItems[`song-item-${index}`] = el)"
+						:key="`queue-song-item-${element.youtubeId}`"
 					>
 						<template
 							v-if="hasPermission('stations.queue.reposition')"

+ 2 - 1
frontend/src/components/modals/EditPlaylist/index.vue

@@ -404,7 +404,7 @@ onBeforeUnmount(() => {
 						<draggable-list
 							v-if="playlistSongs.length > 0"
 							v-model:list="playlistSongs"
-							item-key="_id"
+							item-key="youtubeId"
 							@start="drag = true"
 							@end="drag = false"
 							@update="repositionSong"
@@ -420,6 +420,7 @@ onBeforeUnmount(() => {
 											(songItems[`song-item-${index}`] =
 												el)
 									"
+									:key="`playlist-song-${element.youtubeId}`"
 								>
 									<template #tippyActions>
 										<i

+ 4 - 4
frontend/src/components/modals/ImportAlbum.vue

@@ -628,12 +628,12 @@ onBeforeUnmount(() => {
 					<draggable-list
 						v-if="playlistSongs.length > 0"
 						v-model:list="playlistSongs"
-						item-key="_id"
+						item-key="youtubeId"
 						:group="`import-album-${modalUuid}-songs`"
 					>
 						<template #item="{ element }">
 							<song-item
-								:key="`playlist-song-${element._id}`"
+								:key="`playlist-song-${element.youtubeId}`"
 								:song="element"
 							>
 							</song-item>
@@ -657,12 +657,12 @@ onBeforeUnmount(() => {
 						<div class="track-box-songs-drag-area">
 							<draggable-list
 								v-model:list="trackSongs[index]"
-								item-key="_id"
+								item-key="youtubeId"
 								:group="`import-album-${modalUuid}-songs`"
 							>
 								<template #item="{ element }">
 									<song-item
-										:key="`track-song-${element._id}`"
+										:key="`track-song-${element.youtubeId}`"
 										:song="element"
 									>
 									</song-item>