refactor: replaced ImportAlbum edit songs with the new EditSongs

frontend/src/components/SongItem.vue

@@ -270,7 +270,7 @@ export default {
 		},
 		edit(song) {
 			this.hideTippyElements();
-			this.editSong(song._id);
+			this.editSong({ songId: song._id });
 			this.openModal("editSong");
 		},
 		...mapActions("modals/editSong", ["editSong"]),

frontend/src/components/modals/EditSong/index.vue

@@ -453,14 +453,6 @@
 						@click="save(song, true, true)"
 					/>
 
-					<button
-						class="button is-danger"
-						@click="stopEditingSongs()"
-						v-if="modals.importAlbum && editingSongs"
-					>
-						Stop editing songs
-					</button>
-
 					<div class="right">
 						<button
 							v-if="!song.verified"
@@ -604,12 +596,10 @@ export default {
 			video: state => state.video,
 			song: state => state.song,
 			songId: state => state.songId,
+			prefillData: state => state.prefillData,
 			originalSong: state => state.originalSong,
 			reports: state => state.reports
 		}),
-		...mapState("modals/importAlbum", {
-			editingSongs: state => state.editingSongs
-		}),
 		...mapState("modalVisibility", {
 			modals: state => state.modals
 		}),
@@ -1071,21 +1061,12 @@ export default {
 				songId, // Was this.song._id
 				res => {
 					if (res.status === "success") {
-						const { song } = res.data;
+						let { song } = res.data;
 
-						// if (this.song.prefill)
-						// 	song = Object.assign(song, this.song.prefill);
-
-						// if (this.song.discogs)
-						// 	song = {
-						// 		...song,
-						// 		discogs: this.song.discogs
-						// 	};
+						song = Object.assign(song, this.prefillData);
 
 						this.setSong(song);
 
-						console.log(321);
-
 						this.songDataLoaded = true;
 
 						this.socket.dispatch(
@@ -1129,10 +1110,6 @@ export default {
 				}
 			);
 		},
-		stopEditingSongs() {
-			this.updateEditingSongs(false);
-			this.closeModal("editSong");
-		},
 		importAlbum(result) {
 			this.selectDiscogsAlbum(result);
 			this.openModal("importAlbum");
@@ -1614,10 +1591,7 @@ export default {
 				params: null
 			};
 		},
-		...mapActions("modals/importAlbum", [
-			"selectDiscogsAlbum",
-			"updateEditingSongs"
-		]),
+		...mapActions("modals/importAlbum", ["selectDiscogsAlbum"]),
 		...mapActions({
 			showTab(dispatch, payload) {
 				this.$refs[`${payload}-tab`].scrollIntoView({

frontend/src/components/modals/EditSongs.vue

@@ -153,7 +153,8 @@ export default {
 			);
 		},
 		...mapState("modals/editSongs", {
-			songIds: state => state.songIds
+			songIds: state => state.songIds,
+			songPrefillData: state => state.songPrefillData
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -195,7 +196,10 @@ export default {
 	},
 	methods: {
 		pickSong(song) {
-			this.editSong(song._id);
+			this.editSong({
+				songId: song._id,
+				prefill: this.songPrefillData[song._id]
+			});
 			this.currentSong = song;
 			// this.items[
 			// 	this.items.findIndex(item => item.song._id === song._id)

frontend/src/components/modals/ImportAlbum.vue

@@ -305,7 +305,7 @@
 				<button class="button is-primary" @click="tryToAutoMove()">
 					Try to auto move
 				</button>
-				<button class="button is-primary" @click="editSongs()">
+				<button class="button is-primary" @click="startEditingSongs()">
 					Edit songs
 				</button>
 				<p class="is-expanded checkbox-control">
@@ -348,7 +348,7 @@ export default {
 			isImportingPlaylist: false,
 			trackSongs: [],
 			songsToEdit: [],
-			currentEditSongIndex: 0,
+			// currentEditSongIndex: 0,
 			search: {
 				playlist: {
 					query: ""
@@ -399,13 +399,6 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
-	watch: {
-		/* eslint-disable */
-		"modals.editSong": function (value) {
-			if (!value) this.editNextSong();
-		}
-		/* eslint-enable */
-	},
 	mounted() {
 		ws.onConnect(this.init);
 
@@ -423,8 +416,7 @@ export default {
 		init() {
 			this.socket.dispatch("apis.joinRoom", "import-album");
 		},
-		editSongs() {
-			this.updateEditingSongs(true);
+		startEditingSongs() {
 			this.songsToEdit = [];
 			this.trackSongs.forEach((songs, index) => {
 				songs.forEach(song => {
@@ -436,39 +428,31 @@ export default {
 					delete discogsAlbum.expanded;
 					delete discogsAlbum.gotMoreInfo;
 
-					this.songsToEdit.push({
+					const songToEdit = {
 						songId: song._id,
-						discogs: discogsAlbum
-					});
+						prefill: {
+							discogs: discogsAlbum
+						}
+					};
+
+					if (this.prefillDiscogs) {
+						songToEdit.prefill.title = discogsAlbum.track.title;
+						songToEdit.prefill.thumbnail =
+							discogsAlbum.album.albumArt;
+						songToEdit.prefill.genres = JSON.parse(
+							JSON.stringify(discogsAlbum.album.genres)
+						);
+						songToEdit.prefill.artists = JSON.parse(
+							JSON.stringify(discogsAlbum.album.artists)
+						);
+					}
+
+					this.songsToEdit.push(songToEdit);
 				});
 			});
-			this.editNextSong();
-		},
-		editNextSong() {
-			if (this.editingSongs) {
-				setTimeout(() => {
-					const song = {
-						_id: this.songsToEdit[this.currentEditSongIndex].songId,
-						discogs:
-							this.songsToEdit[this.currentEditSongIndex].discogs
-					};
-					if (song.discogs && this.prefillDiscogs)
-						song.prefill = {
-							title: song.discogs.track.title,
-							thumbnail: song.discogs.album.albumArt,
-							genres: JSON.parse(
-								JSON.stringify(song.discogs.album.genres)
-							),
-							artists: JSON.parse(
-								JSON.stringify(song.discogs.album.artists)
-							)
-						};
-					console.log(song);
-					this.editSong(song._id);
-					this.currentEditSongIndex += 1;
-					this.openModal("editSong");
-				}, 500);
-			}
+
+			this.editSongs(this.songsToEdit);
+			this.openModal("editSongs");
 		},
 		log(evt) {
 			window.console.log(evt);
@@ -682,7 +666,7 @@ export default {
 			"togglePrefillDiscogs",
 			"updatePlaylistSong"
 		]),
-		...mapActions("modals/editSong", ["editSong"]),
+		...mapActions("modals/editSongs", ["editSongs"]),
 		...mapActions("modalVisibility", ["closeModal", "openModal"])
 	}
 };

frontend/src/components/modals/ViewReport.vue

@@ -217,7 +217,7 @@ export default {
 			);
 		},
 		openSong() {
-			this.editSong(this.report.song._id);
+			this.editSong({ songId: this.report.song._id });
 			this.openModal("editSong");
 		},
 		...mapActions("admin/reports", ["indexReports", "resolveReport"]),

frontend/src/pages/Admin/tabs/Songs.vue

@@ -676,12 +676,14 @@ export default {
 	},
 	methods: {
 		editOne(song) {
-			this.editSong(song._id);
+			this.editSong({ songId: song._id });
 			this.openModal("editSong");
 		},
 		editMany(selectedRows) {
-			const songIds = selectedRows.map(row => row._id);
-			this.editSongs(songIds);
+			const songs = selectedRows.map(row => ({
+				songId: row._id
+			}));
+			this.editSongs(songs);
 			this.openModal("editSongs");
 		},
 		verifyOne(songId) {

frontend/src/store/modules/modals/editSong.js

@@ -19,7 +19,7 @@ export default {
 	getters: {},
 	actions: {
 		showTab: ({ commit }, tab) => commit("showTab", tab),
-		editSong: ({ commit }, songId) => commit("editSong", songId),
+		editSong: ({ commit }, song) => commit("editSong", song),
 		setSong: ({ commit }, song) => commit("setSong", song),
 		resetSong: ({ commit }, songId) => commit("resetSong", songId),
 		stopVideo: ({ commit }) => commit("stopVideo"),
@@ -47,8 +47,9 @@ export default {
 		showTab(state, tab) {
 			state.tab = tab;
 		},
-		editSong(state, songId) {
-			state.songId = songId;
+		editSong(state, song) {
+			state.songId = song.songId;
+			state.prefillData = song.prefill ? song.prefill : {};
 		},
 		setSong(state, song) {
 			if (song.discogs === undefined) song.discogs = null;

frontend/src/store/modules/modals/editSongs.js

@@ -3,15 +3,22 @@
 export default {
 	namespaced: true,
 	state: {
-		songIds: []
+		songIds: [],
+		songPrefillData: {}
 	},
 	getters: {},
 	actions: {
-		editSongs: ({ commit }, songIds) => commit("editSongs", songIds)
+		editSongs: ({ commit }, songs) => commit("editSongs", songs)
 	},
 	mutations: {
-		editSongs(state, songIds) {
-			state.songIds = songIds;
+		editSongs(state, songs) {
+			state.songIds = songs.map(song => song.songId);
+			state.songPrefillData = Object.fromEntries(
+				songs.map(song => [
+					song.songId,
+					song.prefill ? song.prefill : {}
+				])
+			);
 		}
 	}
 };