refactor(ImportAlbum): Migrated to new modal system

frontend/src/components/ModalManager.vue

@@ -31,7 +31,8 @@ export default {
 			viewReport: "ViewReport.vue",
 			bulkActions: "BulkActions.vue",
 			viewPunishment: "ViewPunishment.vue",
-			removeAccount: "RemoveAccount.vue"
+			removeAccount: "RemoveAccount.vue",
+			importAlbum: "ImportAlbum.vue"
 		}),
 		...mapState("modalVisibility", {
 			activeModals: state => state.new.activeModals,

frontend/src/components/modals/ImportAlbum.vue

@@ -329,13 +329,14 @@ import { mapState, mapGetters, mapActions } from "vuex";
 import draggable from "vuedraggable";
 import Toast from "toasters";
 import ws from "@/ws";
+import { mapModalState, mapModalActions } from "@/vuex_helpers";
 
 import SongItem from "../SongItem.vue";
 
 export default {
 	components: { SongItem, draggable },
 	props: {
-		sector: { type: String, default: "admin" }
+		modalUuid: { type: String, default: "" }
 	},
 	data() {
 		return {
@@ -360,27 +361,29 @@ export default {
 	computed: {
 		playlistSongs: {
 			get() {
-				return this.$store.state.modals.importAlbum.playlistSongs;
+				return this.$store.state.modals.importAlbum[this.modalUuid]
+					.playlistSongs;
 			},
 			set(playlistSongs) {
 				this.$store.commit(
-					"modals/importAlbum/updatePlaylistSongs",
+					`modals/importAlbum/${this.modalUuid}/updatePlaylistSongs`,
 					playlistSongs
 				);
 			}
 		},
 		localPrefillDiscogs: {
 			get() {
-				return this.$store.state.modals.importAlbum.prefillDiscogs;
+				return this.$store.state.modals.importAlbum[this.modalUuid]
+					.prefillDiscogs;
 			},
 			set(prefillDiscogs) {
 				this.$store.commit(
-					"modals/importAlbum/updatePrefillDiscogs",
+					`modals/importAlbum/${this.modalUuid}/updatePrefillDiscogs`,
 					prefillDiscogs
 				);
 			}
 		},
-		...mapState("modals/importAlbum", {
+		...mapModalState("modals/importAlbum/MODAL_UUID", {
 			discogsTab: state => state.discogsTab,
 			discogsAlbum: state => state.discogsAlbum,
 			editingSongs: state => state.editingSongs,
@@ -405,6 +408,8 @@ export default {
 		this.setPlaylistSongs([]);
 		this.showDiscogsTab("search");
 		this.socket.dispatch("apis.leaveRoom", "import-album");
+		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+		this.$store.unregisterModule(["modals", "importAlbum", this.modalUuid]);
 	},
 	methods: {
 		init() {
@@ -651,10 +656,13 @@ export default {
 					this.$refs[`discogs-${payload}-tab`].scrollIntoView({
 						block: "nearest"
 					});
-				return dispatch("modals/importAlbum/showDiscogsTab", payload);
+				return dispatch(
+					`modals/importAlbum/${this.modalUuid}/showDiscogsTab`,
+					payload
+				);
 			}
 		}),
-		...mapActions("modals/importAlbum", [
+		...mapModalActions("modals/importAlbum/MODAL_UUID", [
 			"toggleDiscogsAlbum",
 			"setPlaylistSongs",
 			"updatePlaylistSongs",

frontend/src/pages/Admin/Songs.vue

@@ -256,10 +256,8 @@
 				</template>
 			</advanced-table>
 		</div>
-		<import-album v-if="modals.importAlbum" />
 		<edit-song v-if="modals.editSong" song-type="songs" />
 		<edit-songs v-if="modals.editSongs" />
-		<report v-if="modals.report" />
 		<confirm v-if="modals.confirm" @confirmed="handleConfirmed()" />
 	</div>
 </template>
@@ -281,12 +279,6 @@ export default {
 		EditSongs: defineAsyncComponent(() =>
 			import("@/components/modals/EditSongs.vue")
 		),
-		Report: defineAsyncComponent(() =>
-			import("@/components/modals/Report.vue")
-		),
-		ImportAlbum: defineAsyncComponent(() =>
-			import("@/components/modals/ImportAlbum.vue")
-		),
 		Confirm: defineAsyncComponent(() =>
 			import("@/components/modals/Confirm.vue")
 		),

frontend/src/store/index.js

@@ -11,7 +11,6 @@ import admin from "./modules/admin";
 
 import editSongModal from "./modules/modals/editSong";
 import editSongsModal from "./modules/modals/editSongs";
-import importAlbumModal from "./modules/modals/importAlbum";
 import confirmModal from "./modules/modals/confirm";
 
 const emptyModule = {
@@ -31,7 +30,7 @@ export default createStore({
 			modules: {
 				editSong: editSongModal,
 				editSongs: editSongsModal,
-				importAlbum: importAlbumModal,
+				importAlbum: emptyModule,
 				importPlaylist: emptyModule,
 				editPlaylist: emptyModule,
 				manageStation: emptyModule,

frontend/src/store/modules/modalVisibility.js

@@ -12,12 +12,12 @@ import report from "./modals/report";
 import viewReport from "./modals/viewReport";
 import bulkActions from "./modals/bulkActions";
 import viewPunishment from "./modals/viewPunishment";
+import importAlbum from "./modals/importAlbum";
 
 const state = {
 	modals: {
 		editSong: false,
 		editSongs: false,
-		importAlbum: false,
 		confirm: false,
 		editSongConfirm: false,
 		editSongsConfirm: false
@@ -40,7 +40,8 @@ const modalModules = {
 	report,
 	viewReport,
 	bulkActions,
-	viewPunishment
+	viewPunishment,
+	importAlbum
 };
 
 const migratedModules = {
@@ -58,7 +59,7 @@ const migratedModules = {
 	editSong: false,
 	editSongs: false,
 	editUser: true,
-	importAlbum: false,
+	importAlbum: true,
 	viewReport: true,
 	viewPunishment: true,
 	confirm: false,