refactor(EditSongs): migrated EditSongs modal to new modal system

frontend/src/components/ModalManager.vue

@@ -33,7 +33,8 @@ export default {
 			viewPunishment: "ViewPunishment.vue",
 			removeAccount: "RemoveAccount.vue",
 			importAlbum: "ImportAlbum.vue",
-			confirm: "Confirm.vue"
+			confirm: "Confirm.vue",
+			editSongs: "EditSongs.vue"
 		}),
 		...mapState("modalVisibility", {
 			activeModals: state => state.new.activeModals,

frontend/src/components/modals/EditSongs.vue

@@ -172,6 +172,7 @@ import { mapState, mapActions, mapGetters } from "vuex";
 import { defineAsyncComponent } from "vue";
 
 import Toast from "toasters";
+import { mapModalState, mapModalActions } from "@/vuex_helpers";
 
 import SongItem from "@/components/SongItem.vue";
 
@@ -182,7 +183,9 @@ export default {
 		),
 		SongItem
 	},
-	props: {},
+	props: {
+		modalUuid: { type: String, default: "" }
+	},
 	data() {
 		return {
 			items: [],
@@ -220,7 +223,7 @@ export default {
 				item => item.song._id === this.currentSong._id
 			)?.flagged;
 		},
-		...mapState("modals/editSongs", {
+		...mapModalState("modals/editSongs/MODAL_UUID", {
 			songIds: state => state.songIds,
 			songPrefillData: state => state.songPrefillData
 		}),
@@ -269,7 +272,9 @@ export default {
 	},
 	beforeUnmount() {
 		this.socket.dispatch("apis.leaveRoom", "edit-songs");
-		this.resetSongs();
+		// this.resetSongs();
+		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+		this.$store.unregisterModule(["modals", "editSongs", this.modalUuid]);
 	},
 	methods: {
 		pickSong(song) {
@@ -404,11 +409,11 @@ export default {
 			else this.closeThisModal();
 		},
 		closeThisModal() {
-			this.closeModal("editSongs");
+			this.closeCurrentModal();
 		},
-		...mapActions("modalVisibility", ["openModal", "closeModal"]),
+		...mapActions("modalVisibility", ["openModal", "closeCurrentModal"]),
 		...mapActions("modals/editSong", ["editSong"]),
-		...mapActions("modals/editSongs", ["resetSongs"])
+		...mapModalActions("modals/editSongs/MODAL_UUID", ["resetSongs"])
 	}
 };
 </script>

frontend/src/components/modals/ImportAlbum.vue

@@ -453,8 +453,10 @@ export default {
 			if (this.songsToEdit.length === 0)
 				new Toast("You can't edit 0 songs.");
 			else {
-				this.editSongs(this.songsToEdit);
-				this.openModal("editSongs");
+				this.openModal({
+					modal: "editSongs",
+					data: { songs: this.songsToEdit }
+				});
 			}
 		},
 		log(evt) {

frontend/src/components/modals/ImportPlaylist.vue

@@ -139,13 +139,15 @@ export default {
 						res.songs &&
 						res.songs.length > 0
 					) {
-						this.editSongs(
-							res.songs.map(song => ({
-								...song,
-								songId: song._id
-							}))
-						);
-						this.openModal("editSongs");
+						this.openModal({
+							modal: "editSongs",
+							data: {
+								songs: res.songs.map(song => ({
+									...song,
+									songId: song._id
+								}))
+							}
+						});
 					}
 
 					this.closeCurrentModal();
@@ -156,7 +158,6 @@ export default {
 				}
 			);
 		},
-		...mapActions("modals/editSongs", ["editSongs"]),
 		...mapActions("modalVisibility", ["openModal", "closeCurrentModal"])
 	}
 };

frontend/src/pages/Admin/Songs.vue

@@ -257,7 +257,6 @@
 			</advanced-table>
 		</div>
 		<edit-song v-if="modals.editSong" song-type="songs" />
-		<edit-songs v-if="modals.editSongs" />
 	</div>
 </template>
 
@@ -275,9 +274,6 @@ export default {
 		EditSong: defineAsyncComponent(() =>
 			import("@/components/modals/EditSong")
 		),
-		EditSongs: defineAsyncComponent(() =>
-			import("@/components/modals/EditSongs.vue")
-		),
 		AdvancedTable,
 		RunJobDropdown
 	},
@@ -642,8 +638,7 @@ export default {
 				const songs = selectedRows.map(row => ({
 					songId: row._id
 				}));
-				this.editSongs(songs);
-				this.openModal("editSongs");
+				this.openModal({ modal: "editSongs", data: { songs } });
 			}
 		},
 		verifyOne(songId) {
@@ -760,7 +755,6 @@ export default {
 			}
 		},
 		...mapActions("modals/editSong", ["editSong"]),
-		...mapActions("modals/editSongs", ["editSongs"]),
 		...mapActions("modals/confirm", ["updateConfirmMessage"]),
 		...mapActions("modalVisibility", ["openModal"])
 	}

frontend/src/store/index.js

@@ -10,7 +10,6 @@ import station from "./modules/station";
 import admin from "./modules/admin";
 
 import editSongModal from "./modules/modals/editSong";
-import editSongsModal from "./modules/modals/editSongs";
 
 const emptyModule = {
 	namespaced: true
@@ -28,7 +27,7 @@ export default createStore({
 			namespaced: true,
 			modules: {
 				editSong: editSongModal,
-				editSongs: editSongsModal,
+				editSongs: emptyModule,
 				importAlbum: emptyModule,
 				importPlaylist: emptyModule,
 				editPlaylist: emptyModule,

frontend/src/store/modules/modalVisibility.js

@@ -14,11 +14,11 @@ import bulkActions from "./modals/bulkActions";
 import viewPunishment from "./modals/viewPunishment";
 import importAlbum from "./modals/importAlbum";
 import confirm from "./modals/confirm";
+import editSongs from "./modals/editSongs";
 
 const state = {
 	modals: {
-		editSong: false,
-		editSongs: false
+		editSong: false
 	},
 	currentlyActive: [],
 	new: {
@@ -40,7 +40,8 @@ const modalModules = {
 	bulkActions,
 	viewPunishment,
 	importAlbum,
-	confirm
+	confirm,
+	editSongs
 };
 
 const migratedModules = {
@@ -56,7 +57,7 @@ const migratedModules = {
 	removeAccount: true,
 	editNews: true,
 	editSong: false,
-	editSongs: false,
+	editSongs: true,
 	editUser: true,
 	importAlbum: true,
 	viewReport: true,

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

@@ -8,11 +8,11 @@ export default {
 	},
 	getters: {},
 	actions: {
-		editSongs: ({ commit }, songs) => commit("editSongs", songs),
-		resetSongs: ({ commit }) => commit("resetSongs")
+		init: ({ commit }, data) => commit("init", data)
+		// resetSongs: ({ commit }) => commit("resetSongs")
 	},
 	mutations: {
-		editSongs(state, songs) {
+		init(state, { songs }) {
 			state.songIds = songs.map(song => song.songId);
 			state.songPrefillData = Object.fromEntries(
 				songs.map(song => [
@@ -20,10 +20,10 @@ export default {
 					song.prefill ? song.prefill : {}
 				])
 			);
-		},
-		resetSongs(state) {
-			state.songIds = [];
-			state.songPrefillData = {};
 		}
+		// resetSongs(state) {
+		// 	state.songIds = [];
+		// 	state.songPrefillData = {};
+		// }
 	}
 };