refactor(EditSong/EditSongs): migrated EditSong in EditSongs with the new modal system

frontend/src/components/modals/EditSong/Tabs/Discogs.vue

@@ -161,6 +161,10 @@ import keyboardShortcuts from "@/keyboardShortcuts";
 export default {
 	props: {
 		modalUuid: { type: String, default: "" },
+		modalModulePath: {
+			type: String,
+			default: "modals/editSong/MODAL_UUID"
+		},
 		bulk: { type: Boolean, default: false }
 	},
 	data() {
@@ -175,7 +179,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapModalState("modals/editSong/MODAL_UUID", {
+		...mapModalState("MODAL_MODULE_PATH", {
 			song: state => state.song
 		}),
 		...mapGetters({
@@ -290,7 +294,7 @@ export default {
 
 			this.selectDiscogsInfo(apiResult);
 		},
-		...mapModalActions("modals/editSong/MODAL_UUID", ["selectDiscogsInfo"])
+		...mapModalActions("MODAL_MODULE_PATH", ["selectDiscogsInfo"])
 	}
 };
 </script>

frontend/src/components/modals/EditSong/Tabs/Reports.vue

@@ -198,7 +198,8 @@ import ReportInfoItem from "@/components/ReportInfoItem.vue";
 export default {
 	components: { ReportInfoItem },
 	props: {
-		modalUuid: { type: String, default: "" }
+		modalUuid: { type: String, default: "" },
+		modalModulePath: { type: String, default: "modals/editSong/MODAL_UUID" }
 	},
 	data() {
 		return {
@@ -214,7 +215,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapModalState("modals/editSong/MODAL_UUID", {
+		...mapModalState("MODAL_MODULE_PATH", {
 			reports: state => state.reports
 		}),
 		...mapGetters({
@@ -291,7 +292,7 @@ export default {
 				}
 			);
 		},
-		...mapModalActions("modals/editSong/MODAL_UUID", ["resolveReport"]),
+		...mapModalActions("MODAL_MODULE_PATH", ["resolveReport"]),
 		...mapActions("modalVisibility", ["closeModal"])
 	}
 };

frontend/src/components/modals/EditSong/Tabs/Songs.vue

@@ -51,7 +51,8 @@ export default {
 	},
 	mixins: [SearchMusare],
 	props: {
-		modalUuid: { type: String, default: "" }
+		modalUuid: { type: String, default: "" },
+		modalModulePath: { type: String, default: "modals/editSong/MODAL_UUID" }
 	},
 	data() {
 		return {
@@ -59,7 +60,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapModalState("modals/editSong/MODAL_UUID", {
+		...mapModalState("MODAL_MODULE_PATH", {
 			song: state => state.song
 		}),
 		...mapGetters({

frontend/src/components/modals/EditSong/Tabs/Youtube.vue

@@ -71,13 +71,14 @@ export default {
 	components: { SearchQueryItem },
 	mixins: [SearchYoutube],
 	props: {
-		modalUuid: { type: String, default: "" }
+		modalUuid: { type: String, default: "" },
+		modalModulePath: { type: String, default: "modals/editSong/MODAL_UUID" }
 	},
 	data() {
 		return {};
 	},
 	computed: {
-		...mapModalState("modals/editSong/MODAL_UUID", {
+		...mapModalState("MODAL_MODULE_PATH", {
 			song: state => state.song,
 			newSong: state => state.newSong
 		}),
@@ -94,7 +95,7 @@ export default {
 				this.updateThumbnail(result.thumbnail);
 			}
 		},
-		...mapModalActions("modals/editSong/MODAL_UUID", [
+		...mapModalActions("MODAL_MODULE_PATH", [
 			"updateYoutubeId",
 			"updateTitle",
 			"updateThumbnail"

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

@@ -555,22 +555,26 @@
 							v-show="tab === 'discogs'"
 							:bulk="bulk"
 							:modal-uuid="modalUuid"
+							:modal-module-path="modalModulePath"
 						/>
 						<reports
 							v-if="!newSong"
 							class="tab"
 							v-show="tab === 'reports'"
 							:modal-uuid="modalUuid"
+							:modal-module-path="modalModulePath"
 						/>
 						<youtube
 							class="tab"
 							v-show="tab === 'youtube'"
 							:modal-uuid="modalUuid"
+							:modal-module-path="modalModulePath"
 						/>
 						<musare-songs
 							class="tab"
 							v-show="tab === 'musare-songs'"
 							:modal-uuid="modalUuid"
+							:modal-module-path="modalModulePath"
 						/>
 					</div>
 				</div>
@@ -674,6 +678,10 @@ export default {
 	props: {
 		// songId: { type: String, default: null },
 		modalUuid: { type: String, default: "" },
+		modalModulePath: {
+			type: String,
+			default: "modals/editSong/MODAL_UUID"
+		},
 		discogsAlbum: { type: Object, default: null },
 		bulk: { type: Boolean, default: false },
 		flagged: { type: Boolean, default: false }
@@ -759,7 +767,7 @@ export default {
 				this.song.thumbnail.startsWith("https://i.ytimg.com/")
 			);
 		},
-		...mapModalState("modals/editSong/MODAL_UUID", {
+		...mapModalState("MODAL_MODULE_PATH", {
 			tab: state => state.tab,
 			video: state => state.video,
 			song: state => state.song,
@@ -1013,8 +1021,14 @@ export default {
 			keyboardShortcuts.unregisterShortcut(shortcutName);
 		});
 
-		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
-		this.$store.unregisterModule(["modals", "editSong", this.modalUuid]);
+		if (!this.bulk) {
+			// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+			this.$store.unregisterModule([
+				"modals",
+				"editSong",
+				this.modalUuid
+			]);
+		}
 	},
 	methods: {
 		onThumbnailLoad() {
@@ -1820,12 +1834,15 @@ export default {
 						block: "nearest"
 					});
 				return dispatch(
-					`modals/editSong/${this.modalUuid}/showTab`,
+					`${this.modalModulePath.replace(
+						"MODAL_UUID",
+						this.modalUuid
+					)}/showTab`,
 					payload
 				);
 			}
 		}),
-		...mapModalActions("modals/editSong/MODAL_UUID", [
+		...mapModalActions("MODAL_MODULE_PATH", [
 			"stopVideo",
 			"hardStopVideo",
 			"loadVideoById",

frontend/src/components/modals/EditSongs.vue

@@ -1,6 +1,7 @@
 <template>
 	<div>
 		<edit-song
+			:modal-module-path="`modals/editSongs/${this.modalUuid}/editSong`"
 			:bulk="true"
 			:flagged="currentSongFlagged"
 			v-if="currentSong"
@@ -176,6 +177,8 @@ import { mapModalState, mapModalActions } from "@/vuex_helpers";
 
 import SongItem from "@/components/SongItem.vue";
 
+import editSong from "@/store/modules/modals/editSong";
+
 export default {
 	components: {
 		EditSong: defineAsyncComponent(() =>
@@ -237,6 +240,11 @@ export default {
 	async mounted() {
 		this.socket.dispatch("apis.joinRoom", "edit-songs");
 
+		this.$store.registerModule(
+			["modals", "editSongs", this.modalUuid, "editSong"],
+			editSong
+		);
+
 		this.socket.dispatch("songs.getSongsFromSongIds", this.songIds, res => {
 			res.data.songs.forEach(song => {
 				this.items.push({
@@ -272,7 +280,8 @@ export default {
 	},
 	beforeUnmount() {
 		this.socket.dispatch("apis.leaveRoom", "edit-songs");
-		// this.resetSongs();
+	},
+	unmounted() {
 		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
 		this.$store.unregisterModule(["modals", "editSongs", this.modalUuid]);
 	},
@@ -412,7 +421,9 @@ export default {
 			this.closeCurrentModal();
 		},
 		...mapActions("modalVisibility", ["openModal", "closeCurrentModal"]),
-		...mapActions("modals/editSong", ["editSong"]),
+		...mapModalActions("modals/editSongs/MODAL_UUID/editSong", [
+			"editSong"
+		]),
 		...mapModalActions("modals/editSongs/MODAL_UUID", ["resetSongs"])
 	}
 };

frontend/src/vuex_helpers.js

@@ -6,6 +6,7 @@ const mapModalState = (namespace, map) => {
 		modalState[mapKey] = function func() {
 			return mapValue(
 				namespace
+					.replace("MODAL_MODULE_PATH", this.modalModulePath)
 					.replace("MODAL_UUID", this.modalUuid)
 					.split("/")
 					.reduce((a, b) => a[b], this.$store.state)
@@ -20,10 +21,9 @@ const mapModalActions = (namespace, map) => {
 	map.forEach(mapValue => {
 		modalState[mapValue] = function func(value) {
 			return this.$store.dispatch(
-				`${namespace.replace(
-					"MODAL_UUID",
-					this.modalUuid
-				)}/${mapValue}`,
+				`${namespace
+					.replace("MODAL_MODULE_PATH", this.modalModulePath)
+					.replace("MODAL_UUID", this.modalUuid)}/${mapValue}`,
 				value
 			);
 		};