refactor(BulkActions): Migrated to new modal system

frontend/src/components/ModalManager.vue

@@ -28,7 +28,8 @@ export default {
 			editPlaylist: "EditPlaylist/index.vue",
 			createPlaylist: "CreatePlaylist.vue",
 			report: "Report.vue",
-			viewReport: "ViewReport.vue"
+			viewReport: "ViewReport.vue",
+			bulkActions: "BulkActions.vue"
 		}),
 		...mapState("modalVisibility", {
 			activeModals: state => state.new.activeModals,

frontend/src/components/modals/BulkActions.vue

@@ -72,14 +72,12 @@ import Toast from "toasters";
 import AutoSuggest from "@/components/AutoSuggest.vue";
 
 import ws from "@/ws";
+import { mapModalState } from "@/vuex_helpers";
 
 export default {
 	components: { AutoSuggest },
 	props: {
-		type: {
-			type: Object,
-			default: () => {}
-		}
+		modalUuid: { type: String, default: "" }
 	},
 	data() {
 		return {
@@ -90,6 +88,9 @@ export default {
 		};
 	},
 	computed: {
+		...mapModalState("modals/bulkActions/MODAL_UUID", {
+			type: state => state.type
+		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
 		})
@@ -97,6 +98,8 @@ export default {
 	beforeUnmount() {
 		this.itemInput = null;
 		this.items = [];
+		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+		this.$store.unregisterModule(["modals", "bulkActions", this.modalUuid]);
 	},
 	mounted() {
 		ws.onConnect(this.init);

frontend/src/pages/Admin/Songs.vue

@@ -260,7 +260,6 @@
 		<edit-song v-if="modals.editSong" song-type="songs" />
 		<edit-songs v-if="modals.editSongs" />
 		<report v-if="modals.report" />
-		<bulk-actions v-if="modals.bulkActions" :type="bulkActionsType" />
 		<confirm v-if="modals.confirm" @confirmed="handleConfirmed()" />
 	</div>
 </template>
@@ -288,9 +287,6 @@ export default {
 		ImportAlbum: defineAsyncComponent(() =>
 			import("@/components/modals/ImportAlbum.vue")
 		),
-		BulkActions: defineAsyncComponent(() =>
-			import("@/components/modals/BulkActions.vue")
-		),
 		Confirm: defineAsyncComponent(() =>
 			import("@/components/modals/Confirm.vue")
 		),
@@ -621,8 +617,7 @@ export default {
 				message: "",
 				action: "",
 				params: null
-			},
-			bulkActionsType: null
+			}
 		};
 	},
 	computed: {
@@ -697,37 +692,49 @@ export default {
 			);
 		},
 		setTags(selectedRows) {
-			this.bulkActionsType = {
-				name: "tags",
-				action: "songs.editTags",
-				items: selectedRows.map(row => row._id),
-				regex: /^[a-zA-Z0-9_]{1,64}$|^[a-zA-Z0-9_]{1,64}\[[a-zA-Z0-9_]{1,64}\]$/,
-				autosuggest: true,
-				autosuggestDataAction: "songs.getTags"
-			};
-			this.openModal("bulkActions");
+			this.openModal({
+				modal: "bulkActions",
+				data: {
+					type: {
+						name: "tags",
+						action: "songs.editTags",
+						items: selectedRows.map(row => row._id),
+						regex: /^[a-zA-Z0-9_]{1,64}$|^[a-zA-Z0-9_]{1,64}\[[a-zA-Z0-9_]{1,64}\]$/,
+						autosuggest: true,
+						autosuggestDataAction: "songs.getTags"
+					}
+				}
+			});
 		},
 		setArtists(selectedRows) {
-			this.bulkActionsType = {
-				name: "artists",
-				action: "songs.editArtists",
-				items: selectedRows.map(row => row._id),
-				regex: /^(?=.{1,64}$).*$/,
-				autosuggest: true,
-				autosuggestDataAction: "songs.getArtists"
-			};
-			this.openModal("bulkActions");
+			this.openModal({
+				modal: "bulkActions",
+				data: {
+					type: {
+						name: "artists",
+						action: "songs.editArtists",
+						items: selectedRows.map(row => row._id),
+						regex: /^(?=.{1,64}$).*$/,
+						autosuggest: true,
+						autosuggestDataAction: "songs.getArtists"
+					}
+				}
+			});
 		},
 		setGenres(selectedRows) {
-			this.bulkActionsType = {
-				name: "genres",
-				action: "songs.editGenres",
-				items: selectedRows.map(row => row._id),
-				regex: /^[\x00-\x7F]{1,32}$/,
-				autosuggest: true,
-				autosuggestDataAction: "songs.getGenres"
-			};
-			this.openModal("bulkActions");
+			this.openModal({
+				modal: "bulkActions",
+				data: {
+					type: {
+						name: "genres",
+						action: "songs.editGenres",
+						items: selectedRows.map(row => row._id),
+						regex: /^[\x00-\x7F]{1,32}$/,
+						autosuggest: true,
+						autosuggestDataAction: "songs.getGenres"
+					}
+				}
+			});
 		},
 		deleteOne(songId) {
 			this.socket.dispatch("songs.remove", songId, res => {

frontend/src/store/index.js

@@ -43,7 +43,8 @@ export default createStore({
 				viewPunishment: viewPunishmentModal,
 				report: emptyModule,
 				viewReport: emptyModule,
-				confirm: confirmModal
+				confirm: confirmModal,
+				bulkActions: emptyModule
 			}
 		}
 	},

frontend/src/store/modules/modalVisibility.js

@@ -10,6 +10,7 @@ import importPlaylist from "./modals/importPlaylist";
 import editPlaylist from "./modals/editPlaylist";
 import report from "./modals/report";
 import viewReport from "./modals/viewReport";
+import bulkActions from "./modals/bulkActions";
 
 const state = {
 	modals: {
@@ -20,8 +21,7 @@ const state = {
 		viewPunishment: false,
 		confirm: false,
 		editSongConfirm: false,
-		editSongsConfirm: false,
-		bulkActions: false
+		editSongsConfirm: false
 	},
 	currentlyActive: [],
 	new: {
@@ -39,7 +39,8 @@ const modalModules = {
 	importPlaylist,
 	editPlaylist,
 	report,
-	viewReport
+	viewReport,
+	bulkActions
 };
 
 const migratedModules = {
@@ -63,7 +64,7 @@ const migratedModules = {
 	confirm: false,
 	editSongConfirm: false,
 	editSongsConfirm: false,
-	bulkActions: false
+	bulkActions: true
 };
 
 const getters = {};

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

@@ -0,0 +1,16 @@
+/* eslint no-param-reassign: 0 */
+
+export default {
+	namespaced: true,
+	state: {
+		type: null
+	},
+	actions: {
+		init: ({ commit }, data) => commit("init", data)
+	},
+	mutations: {
+		init(state, { type }) {
+			state.type = type;
+		}
+	}
+};