refactor(EditSong): migrated EditSong to the new modal system

frontend/src/components/ModalManager.vue

@@ -34,7 +34,8 @@ export default {
 			removeAccount: "RemoveAccount.vue",
 			importAlbum: "ImportAlbum.vue",
 			confirm: "Confirm.vue",
-			editSongs: "EditSongs.vue"
+			editSongs: "EditSongs.vue",
+			editSong: "EditSong/index.vue"
 		}),
 		...mapState("modalVisibility", {
 			activeModals: state => state.new.activeModals,

frontend/src/components/SongItem.vue

@@ -260,10 +260,11 @@ export default {
 		},
 		edit(song) {
 			this.hideTippyElements();
-			this.editSong({ songId: song._id });
-			this.openModal("editSong");
+			this.openModal({
+				modal: "editSong",
+				data: { song: { songId: song._id } }
+			});
 		},
-		...mapActions("modals/editSong", ["editSong"]),
 		...mapActions("modalVisibility", ["openModal"]),
 		formatDistance,
 		parseISO

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

@@ -151,14 +151,16 @@
 </template>
 
 <script>
-import { mapState, mapGetters, mapActions } from "vuex";
+import { mapGetters } from "vuex";
 
 import Toast from "toasters";
+import { mapModalState, mapModalActions } from "@/vuex_helpers";
 
 import keyboardShortcuts from "@/keyboardShortcuts";
 
 export default {
 	props: {
+		modalUuid: { type: String, default: "" },
 		bulk: { type: Boolean, default: false }
 	},
 	data() {
@@ -173,7 +175,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapState("modals/editSong", {
+		...mapModalState("modals/editSong/MODAL_UUID", {
 			song: state => state.song
 		}),
 		...mapGetters({
@@ -288,7 +290,7 @@ export default {
 
 			this.selectDiscogsInfo(apiResult);
 		},
-		...mapActions("modals/editSong", ["selectDiscogsInfo"])
+		...mapModalActions("modals/editSong/MODAL_UUID", ["selectDiscogsInfo"])
 	}
 };
 </script>

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

@@ -188,14 +188,18 @@
 </template>
 
 <script>
-import { mapState, mapGetters, mapActions } from "vuex";
+import { mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
+import { mapModalState, mapModalActions } from "@/vuex_helpers";
 
 import ReportInfoItem from "@/components/ReportInfoItem.vue";
 
 export default {
 	components: { ReportInfoItem },
+	props: {
+		modalUuid: { type: String, default: "" }
+	},
 	data() {
 		return {
 			tab: "sort-by-report",
@@ -210,7 +214,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapState("modals/editSong", {
+		...mapModalState("modals/editSong/MODAL_UUID", {
 			reports: state => state.reports
 		}),
 		...mapGetters({
@@ -287,7 +291,7 @@ export default {
 				}
 			);
 		},
-		...mapActions("modals/editSong", ["resolveReport"]),
+		...mapModalActions("modals/editSong/MODAL_UUID", ["resolveReport"]),
 		...mapActions("modalVisibility", ["closeModal"])
 	}
 };

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

@@ -37,7 +37,9 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from "vuex";
+import { mapGetters } from "vuex";
+
+import { mapModalState } from "@/vuex_helpers";
 
 import SearchMusare from "@/mixins/SearchMusare.vue";
 
@@ -48,13 +50,16 @@ export default {
 		SongItem
 	},
 	mixins: [SearchMusare],
+	props: {
+		modalUuid: { type: String, default: "" }
+	},
 	data() {
 		return {
 			sitename: "Musare"
 		};
 	},
 	computed: {
-		...mapState("modals/editSong", {
+		...mapModalState("modals/editSong/MODAL_UUID", {
 			song: state => state.song
 		}),
 		...mapGetters({

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

@@ -59,7 +59,9 @@
 </template>
 
 <script>
-import { mapGetters, mapState, mapActions } from "vuex";
+import { mapGetters } from "vuex";
+
+import { mapModalState, mapModalActions } from "@/vuex_helpers";
 
 import SearchYoutube from "@/mixins/SearchYoutube.vue";
 
@@ -68,11 +70,14 @@ import SearchQueryItem from "../../../SearchQueryItem.vue";
 export default {
 	components: { SearchQueryItem },
 	mixins: [SearchYoutube],
+	props: {
+		modalUuid: { type: String, default: "" }
+	},
 	data() {
 		return {};
 	},
 	computed: {
-		...mapState("modals/editSong", {
+		...mapModalState("modals/editSong/MODAL_UUID", {
 			song: state => state.song,
 			newSong: state => state.newSong
 		}),
@@ -89,7 +94,7 @@ export default {
 				this.updateThumbnail(result.thumbnail);
 			}
 		},
-		...mapActions("modals/editSong", [
+		...mapModalActions("modals/editSong/MODAL_UUID", [
 			"updateYoutubeId",
 			"updateTitle",
 			"updateThumbnail"

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

@@ -554,16 +554,23 @@
 							class="tab"
 							v-show="tab === 'discogs'"
 							:bulk="bulk"
+							:modal-uuid="modalUuid"
 						/>
 						<reports
 							v-if="!newSong"
 							class="tab"
 							v-show="tab === 'reports'"
+							:modal-uuid="modalUuid"
+						/>
+						<youtube
+							class="tab"
+							v-show="tab === 'youtube'"
+							:modal-uuid="modalUuid"
 						/>
-						<youtube class="tab" v-show="tab === 'youtube'" />
 						<musare-songs
 							class="tab"
 							v-show="tab === 'musare-songs'"
+							:modal-uuid="modalUuid"
 						/>
 					</div>
 				</div>
@@ -638,6 +645,8 @@
 import { mapState, mapGetters, mapActions } from "vuex";
 import Toast from "toasters";
 
+import { mapModalState, mapModalActions } from "@/vuex_helpers";
+
 import aw from "@/aw";
 import ws from "@/ws";
 import validation from "@/validation";
@@ -664,8 +673,8 @@ export default {
 	},
 	props: {
 		// songId: { type: String, default: null },
+		modalUuid: { type: String, default: "" },
 		discogsAlbum: { type: Object, default: null },
-		sector: { type: String, default: "admin" },
 		bulk: { type: Boolean, default: false },
 		flagged: { type: Boolean, default: false }
 	},
@@ -750,7 +759,7 @@ export default {
 				this.song.thumbnail.startsWith("https://i.ytimg.com/")
 			);
 		},
-		...mapState("modals/editSong", {
+		...mapModalState("modals/editSong/MODAL_UUID", {
 			tab: state => state.tab,
 			video: state => state.video,
 			song: state => state.song,
@@ -1003,6 +1012,9 @@ export default {
 		shortcutNames.forEach(shortcutName => {
 			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]);
 	},
 	methods: {
 		onThumbnailLoad() {
@@ -1807,10 +1819,13 @@ export default {
 					this.$refs[`${payload}-tab`].scrollIntoView({
 						block: "nearest"
 					});
-				return dispatch("modals/editSong/showTab", payload);
+				return dispatch(
+					`modals/editSong/${this.modalUuid}/showTab`,
+					payload
+				);
 			}
 		}),
-		...mapActions("modals/editSong", [
+		...mapModalActions("modals/editSong/MODAL_UUID", [
 			"stopVideo",
 			"hardStopVideo",
 			"loadVideoById",

frontend/src/components/modals/ViewReport.vue

@@ -244,15 +244,16 @@ export default {
 			);
 		},
 		openSong() {
-			this.editSong({ songId: this.report.song._id });
-			this.openModal("editSong");
+			this.openModal({
+				modal: "editSong",
+				data: { song: { songId: this.report.song._id } }
+			});
 		},
 		...mapActions("admin/reports", [
 			"indexReports",
 			"resolveReport",
 			"removeReport"
 		]),
-		...mapActions("modals/editSong", ["editSong"]),
 		...mapActions("modalVisibility", ["closeModal", "openModal"])
 	}
 };

frontend/src/pages/Admin/Playlists.vue

@@ -83,14 +83,11 @@
 				</template>
 			</advanced-table>
 		</div>
-
-		<edit-song v-if="modals.editSong" song-type="songs" />
 	</div>
 </template>
 
 <script>
 import { mapState, mapActions } from "vuex";
-import { defineAsyncComponent } from "vue";
 
 import AdvancedTable from "@/components/AdvancedTable.vue";
 import RunJobDropdown from "@/components/RunJobDropdown.vue";
@@ -99,9 +96,6 @@ import utils from "../../../js/utils";
 
 export default {
 	components: {
-		EditSong: defineAsyncComponent(() =>
-			import("@/components/modals/EditSong")
-		),
 		AdvancedTable,
 		RunJobDropdown
 	},

frontend/src/pages/Admin/Reports.vue

@@ -106,14 +106,11 @@
 				</template>
 			</advanced-table>
 		</div>
-
-		<edit-song v-if="modals.editSong" song-type="songs" />
 	</div>
 </template>
 
 <script>
 import { mapState, mapActions } from "vuex";
-import { defineAsyncComponent } from "vue";
 
 import Toast from "toasters";
 
@@ -121,9 +118,6 @@ import AdvancedTable from "@/components/AdvancedTable.vue";
 
 export default {
 	components: {
-		EditSong: defineAsyncComponent(() =>
-			import("@/components/modals/EditSong/index.vue")
-		),
 		AdvancedTable
 	},
 	data() {

frontend/src/pages/Admin/Songs.vue

@@ -256,13 +256,11 @@
 				</template>
 			</advanced-table>
 		</div>
-		<edit-song v-if="modals.editSong" song-type="songs" />
 	</div>
 </template>
 
 <script>
 import { mapState, mapActions, mapGetters } from "vuex";
-import { defineAsyncComponent } from "vue";
 
 import Toast from "toasters";
 
@@ -271,9 +269,6 @@ import RunJobDropdown from "@/components/RunJobDropdown.vue";
 
 export default {
 	components: {
-		EditSong: defineAsyncComponent(() =>
-			import("@/components/modals/EditSong")
-		),
 		AdvancedTable,
 		RunJobDropdown
 	},
@@ -625,12 +620,16 @@ export default {
 	},
 	methods: {
 		create() {
-			this.editSong({ newSong: true });
-			this.openModal("editSong");
+			this.openModal({
+				modal: "editSong",
+				data: { song: { newSong: true } }
+			});
 		},
 		editOne(song) {
-			this.editSong({ songId: song._id });
-			this.openModal("editSong");
+			this.openModal({
+				modal: "editSong",
+				data: { song: { songId: song._id } }
+			});
 		},
 		editMany(selectedRows) {
 			if (selectedRows.length === 1) this.editOne(selectedRows[0]);
@@ -754,8 +753,6 @@ export default {
 				else this[action]();
 			}
 		},
-		...mapActions("modals/editSong", ["editSong"]),
-		...mapActions("modals/confirm", ["updateConfirmMessage"]),
 		...mapActions("modalVisibility", ["openModal"])
 	}
 };

frontend/src/pages/Admin/Stations.vue

@@ -144,14 +144,11 @@
 				</template>
 			</advanced-table>
 		</div>
-
-		<edit-song v-if="modals.editSong" song-type="songs" sector="admin" />
 	</div>
 </template>
 
 <script>
 import { mapState, mapActions, mapGetters } from "vuex";
-import { defineAsyncComponent } from "vue";
 
 import Toast from "toasters";
 
@@ -160,9 +157,6 @@ import RunJobDropdown from "@/components/RunJobDropdown.vue";
 
 export default {
 	components: {
-		EditSong: defineAsyncComponent(() =>
-			import("@/components/modals/EditSong")
-		),
 		AdvancedTable,
 		RunJobDropdown
 	},

frontend/src/pages/Home.vue

@@ -513,13 +513,11 @@
 			</div>
 			<main-footer />
 		</div>
-		<edit-song v-if="modals.editSong" song-type="songs" sector="home" />
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters, mapActions } from "vuex";
-import { defineAsyncComponent } from "vue";
 import draggable from "vuedraggable";
 import Toast from "toasters";
 
@@ -530,9 +528,6 @@ import ws from "@/ws";
 export default {
 	components: {
 		SongThumbnail,
-		EditSong: defineAsyncComponent(() =>
-			import("@/components/modals/EditSong")
-		),
 		draggable
 	},
 	data() {

frontend/src/pages/Profile/index.vue

@@ -1,7 +1,5 @@
 <template>
 	<div v-if="isUser">
-		<edit-song v-if="modals.editSong" song-type="songs" />
-
 		<page-metadata :title="`Profile | ${user.username}`" />
 		<main-header />
 		<div class="container">
@@ -105,7 +103,6 @@
 <script>
 import { mapState, mapGetters } from "vuex";
 import { format, parseISO } from "date-fns";
-import { defineAsyncComponent } from "vue";
 import ws from "@/ws";
 
 import TabQueryHandler from "@/mixins/TabQueryHandler.vue";
@@ -119,10 +116,7 @@ export default {
 	components: {
 		ProfilePicture,
 		RecentActivity,
-		Playlists,
-		EditSong: defineAsyncComponent(() =>
-			import("@/components/modals/EditSong")
-		)
+		Playlists
 	},
 	mixins: [TabQueryHandler],
 	data() {

frontend/src/pages/Station/index.vue

@@ -637,12 +637,6 @@
 						</div>
 					</div>
 				</div>
-
-				<edit-song
-					v-if="modals.editSong"
-					song-type="songs"
-					sector="station"
-				/>
 			</div>
 
 			<main-footer />
@@ -778,7 +772,6 @@
 
 <script>
 import { mapState, mapActions, mapGetters } from "vuex";
-import { defineAsyncComponent } from "vue";
 import Toast from "toasters";
 import { ContentLoader } from "vue-content-loader";
 import canAutoPlay from "can-autoplay";
@@ -804,9 +797,6 @@ export default {
 		FloatingBox,
 		StationSidebar,
 		AddToPlaylistDropdown,
-		EditSong: defineAsyncComponent(() =>
-			import("@/components/modals/EditSong")
-		),
 		SongItem
 	},
 	data() {

frontend/src/store/index.js

@@ -9,8 +9,6 @@ import modalVisibility from "./modules/modalVisibility";
 import station from "./modules/station";
 import admin from "./modules/admin";
 
-import editSongModal from "./modules/modals/editSong";
-
 const emptyModule = {
 	namespaced: true
 };
@@ -26,7 +24,7 @@ export default createStore({
 		modals: {
 			namespaced: true,
 			modules: {
-				editSong: editSongModal,
+				editSong: emptyModule,
 				editSongs: emptyModule,
 				importAlbum: emptyModule,
 				importPlaylist: emptyModule,

frontend/src/store/modules/modalVisibility.js

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

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

@@ -20,6 +20,7 @@ export default {
 	},
 	getters: {},
 	actions: {
+		init: ({ commit }, { song }) => commit("editSong", song),
 		showTab: ({ commit }, tab) => commit("showTab", tab),
 		editSong: ({ commit }, song) => commit("editSong", song),
 		setSong: ({ commit }, song) => commit("setSong", song),