refactor: new modal VueX functionality is now more dynamic, dispatches init action and adds empty modules

frontend/src/pages/Admin/Users/index.vue

@@ -308,12 +308,7 @@ export default {
 	},
 	methods: {
 		edit(userId) {
-			this.openModal("editUser").then(({ uuid }) => {
-				this.$store.dispatch(
-					`modals/editUser/${uuid}/editUser`,
-					userId
-				);
-			});
+			this.openModal({ modal: "editUser", data: { userId } });
 		},
 		...mapActions("modalVisibility", ["openModal"])
 	}

frontend/src/store/index.js

@@ -15,12 +15,15 @@ import importAlbumModal from "./modules/modals/importAlbum";
 import importPlaylistModal from "./modules/modals/importPlaylist";
 import editPlaylistModal from "./modules/modals/editPlaylist";
 import manageStationModal from "./modules/modals/manageStation";
-import editUserModal from "./modules/modals/editUser";
 import viewPunishmentModal from "./modules/modals/viewPunishment";
 import viewReportModal from "./modules/modals/viewReport";
 import reportModal from "./modules/modals/report";
 import confirmModal from "./modules/modals/confirm";
 
+const emptyModule = {
+	namespaced: true
+};
+
 export default createStore({
 	modules: {
 		websockets,
@@ -38,7 +41,7 @@ export default createStore({
 				importPlaylist: importPlaylistModal,
 				editPlaylist: editPlaylistModal,
 				manageStation: manageStationModal,
-				editUser: editUserModal,
+				editUser: emptyModule,
 				viewPunishment: viewPunishmentModal,
 				report: reportModal,
 				viewReport: viewReportModal,

frontend/src/store/modules/modalVisibility.js

@@ -1,7 +1,7 @@
 /* eslint no-param-reassign: 0 */
 import ws from "@/ws";
 
-import editUserModal from "./modals/editUser";
+import editUser from "./modals/editUser";
 
 const state = {
 	modals: {
@@ -16,7 +16,6 @@ const state = {
 		report: false,
 		removeAccount: false,
 		editNews: false,
-		editUser: false,
 		editSong: false,
 		editSongs: false,
 		importAlbum: false,
@@ -34,7 +33,9 @@ const state = {
 	}
 };
 
-const migratedModals = ["editUser"];
+const modalModules = {
+	editUser
+};
 
 const getters = {};
 
@@ -47,7 +48,7 @@ const actions = {
 
 		commit("closeModal", modal);
 	},
-	openModal: ({ commit }, modal) =>
+	openModal: ({ commit }, data) =>
 		new Promise(resolve => {
 			const uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
 				/[xy]/g,
@@ -65,7 +66,7 @@ const actions = {
 				}
 			);
 
-			commit("openModal", { modal, uuid });
+			commit("openModal", { ...data, uuid });
 			resolve({ uuid });
 		}),
 	closeCurrentModal: ({ commit }) => {
@@ -75,14 +76,14 @@ const actions = {
 
 const mutations = {
 	closeModal(state, modal) {
-		if (migratedModals.indexOf(modal) === -1) {
+		if (!modalModules[modal]) {
 			state.modals[modal] = false;
 			const index = state.currentlyActive.indexOf(modal);
 			if (index > -1) state.currentlyActive.splice(index, 1);
 		}
 	},
-	openModal(state, { modal, uuid }) {
-		if (migratedModals.indexOf(modal) === -1) {
+	async openModal(state, { modal, uuid, data }) {
+		if (!modalModules[modal]) {
 			state.modals[modal] = true;
 			state.currentlyActive.push(modal);
 		} else {
@@ -90,7 +91,8 @@ const mutations = {
 			state.new.activeModals.push(uuid);
 			state.currentlyActive.push(`${modal}-${uuid}`);
 
-			this.registerModule(["modals", "editUser", uuid], editUserModal);
+			this.registerModule(["modals", modal, uuid], modalModules[modal]);
+			this.dispatch(`modals/${modal}/${uuid}/init`, data);
 		}
 	},
 	closeCurrentModal(state) {
@@ -101,12 +103,12 @@ const mutations = {
 		ws.destroyModalListeners(currentlyActiveModal);
 
 		if (
-			migratedModals.indexOf(
+			!modalModules[
 				currentlyActiveModal.substring(
 					0,
 					currentlyActiveModal.indexOf("-")
 				)
-			) === -1
+			]
 		) {
 			state.modals[currentlyActiveModal] = false;
 			state.currentlyActive.pop();

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

@@ -8,11 +8,11 @@ export default {
 	}),
 	getters: {},
 	actions: {
-		editUser: ({ commit }, userId) => commit("editUser", userId),
+		init: ({ commit }, data) => commit("init", data),
 		setUser: ({ commit }, user) => commit("setUser", user)
 	},
 	mutations: {
-		editUser(state, userId) {
+		init(state, { userId }) {
 			state.userId = userId;
 		},
 		setUser(state, user) {