refactor: worked more on EditSong functionality

frontend/src/components/AdvancedTable.vue

@@ -1341,7 +1341,6 @@ export default {
 				})),
 				this.appliedFilterOperator,
 				res => {
-					console.log(111, res);
 					if (res.status === "success") {
 						const { data, count } = res.data;
 						this.rows = data.map(row => ({

frontend/src/components/SongItem.vue

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

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

@@ -559,7 +559,7 @@ export default {
 		)
 	},
 	props: {
-		songId: { type: String, default: null },
+		// songId: { type: String, default: null },
 		discogsAlbum: { type: Object, default: null },
 		sector: { type: String, default: "admin" },
 		bulk: { type: Boolean, default: false }
@@ -603,6 +603,7 @@ export default {
 			tab: state => state.tab,
 			video: state => state.video,
 			song: state => state.song,
+			songId: state => state.songId,
 			originalSong: state => state.originalSong,
 			reports: state => state.reports
 		}),
@@ -625,9 +626,9 @@ export default {
 			this.drawCanvas();
 		},
 		/* eslint-enable */
-		songId(songId) {
+		songId(songId, oldSongId) {
 			console.log("NEW SONG ID", songId);
-			this.unloadSong();
+			this.unloadSong(oldSongId);
 			this.loadSong(songId);
 		}
 	},
@@ -807,7 +808,7 @@ export default {
 		});
 
 		/*
-		
+
 		editSong.pauseResume - Num 5 - Pause/resume song
 		editSong.stopVideo - Ctrl - Num 5 - Stop
 		editSong.skipToLast10Secs - Num 6 - Skip to last 10 seconds
@@ -832,7 +833,7 @@ export default {
 		*/
 	},
 	beforeUnmount() {
-		this.unloadSong();
+		this.unloadSong(this.songId);
 
 		// this.video.player.stopVideo();
 		this.playerReady = false;
@@ -863,8 +864,12 @@ export default {
 		});
 	},
 	methods: {
-		init() {
+		init(why) {
 			if (this.songId) this.loadSong(this.songId);
+			else if (!this.bulk) {
+				new Toast("You can't open EditSong without editing a song");
+				return this.closeModal("editSong");
+			}
 
 			this.interval = setInterval(() => {
 				if (
@@ -884,7 +889,8 @@ export default {
 				}
 				if (
 					this.playerReady &&
-					this.video.player.getVideoData()?.video_id ===
+					this.video.player.getVideoData &&
+					this.video.player.getVideoData().video_id ===
 						this.song.youtubeId
 				) {
 					const currentTime = this.video.player.getCurrentTime();
@@ -1048,18 +1054,15 @@ export default {
 				);
 			});
 		},
-		unloadSong() {
+		unloadSong(songId) {
 			this.songDataLoaded = false;
 			if (this.video.player && this.video.player.stopVideo)
 				this.video.player.stopVideo();
-			this.resetSong();
+			// this.resetSong(songId);
 			this.youtubeVideoCurrentTime = "0.000";
 			this.youtubeVideoDuration = "0.000";
-			this.socket.dispatch(
-				"apis.leaveRoom",
-				`edit-song.${this.song._id}`
-			);
-			this.saveButtonRef.status = "default";
+			this.socket.dispatch("apis.leaveRoom", `edit-song.${songId}`);
+			if (this.$refs.saveButton) this.$refs.saveButton.status = "default";
 		},
 		loadSong(songId) {
 			console.log(`LOAD SONG ${songId}`);
@@ -1079,7 +1082,7 @@ export default {
 						// 		discogs: this.song.discogs
 						// 	};
 
-						this.editSong(song);
+						this.setSong(song);
 
 						console.log(321);
 
@@ -1113,7 +1116,7 @@ export default {
 						}
 					} else {
 						new Toast("Song with that ID not found");
-						// this.closeModal("editSong");
+						if (!this.bulk) this.closeModal("editSong");
 					}
 				}
 			);
@@ -1481,7 +1484,6 @@ export default {
 		},
 		drawCanvas() {
 			if (!this.songDataLoaded) return;
-			console.log(111, this.songDataLoaded);
 			const canvasElement = this.$refs.durationCanvas;
 			const ctx = canvasElement.getContext("2d");
 
@@ -1629,7 +1631,7 @@ export default {
 			"loadVideoById",
 			"pauseVideo",
 			"getCurrentTime",
-			"editSong",
+			"setSong",
 			"resetSong",
 			"updateSongField",
 			"updateReports"

frontend/src/components/modals/EditSongs.vue

@@ -1,9 +1,7 @@
 <template>
 	<edit-song
-		:song-id="currentSong._id"
 		:bulk="true"
-		v-if="currentSong"
-		v-show="!closed"
+		v-if="!closed && currentSong"
 		@savedSuccess="onSavedSuccess"
 		@savedError="onSavedError"
 		@saving="onSaving"
@@ -144,6 +142,7 @@ export default {
 	},
 	methods: {
 		pickSong(song) {
+			this.editSong(song._id);
 			this.currentSong = song;
 			// this.items[
 			// 	this.items.findIndex(item => item.song._id === song._id)

frontend/src/components/modals/ImportAlbum.vue

@@ -464,7 +464,7 @@ export default {
 							)
 						};
 					console.log(song);
-					this.editSong(song);
+					this.editSong(song._id);
 					this.currentEditSongIndex += 1;
 					this.openModal("editSong");
 				}, 500);

frontend/src/components/modals/ViewReport.vue

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

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

@@ -676,12 +676,12 @@ export default {
 	},
 	methods: {
 		editOne(song) {
-			this.editSong(song);
+			this.editSong(song._id);
 			this.openModal("editSong");
 		},
 		editMany(selectedRows) {
 			if (selectedRows.length === 1) {
-				this.editSong(selectedRows[0]);
+				this.editSong(selectedRows[0]._id);
 				this.openModal("editSong");
 			} else {
 				new Toast("Bulk editing not yet implemented.");

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

@@ -10,6 +10,7 @@ export default {
 			autoPlayed: false,
 			currentTime: 0
 		},
+		songId: "",
 		song: {},
 		originalSong: {},
 		reports: [],
@@ -18,8 +19,9 @@ export default {
 	getters: {},
 	actions: {
 		showTab: ({ commit }, tab) => commit("showTab", tab),
-		editSong: ({ commit }, song) => commit("editSong", song),
-		unloadSong: ({ commit }) => commit("unloadSong"),
+		editSong: ({ commit }, songId) => commit("editSong", songId),
+		setSong: ({ commit }, song) => commit("setSong", song),
+		resetSong: ({ commit }, songId) => commit("resetSong", songId),
 		stopVideo: ({ commit }) => commit("stopVideo"),
 		loadVideoById: ({ commit }, id, skipDuration) =>
 			commit("loadVideoById", id, skipDuration),
@@ -45,14 +47,22 @@ export default {
 		showTab(state, tab) {
 			state.tab = tab;
 		},
-		editSong(state, song) {
+		editSong(state, songId) {
+			state.songId = songId;
+		},
+		setSong(state, song) {
 			if (song.discogs === undefined) song.discogs = null;
 			state.originalSong = JSON.parse(JSON.stringify(song));
 			state.song = { ...song };
 		},
-		unloadSong(state) {
+		resetSong(state, songId) {
 			state.originalSong = {};
 			state.song = {};
+			if (state.songId === songId) this.songId = "";
+
+			// if (state.originalSong._id === songId) state.originalSong = {};
+			// if (state.song._id === songId) state.song = {};
+			// if (state.songId === songId) this.songId = "";
 		},
 		stopVideo(state) {
 			state.video.player.stopVideo();