feat: created simple ModalManager that right now only handles EditUser

frontend/src/components/ModalManager.vue

@@ -0,0 +1,29 @@
+<template>
+	<div>
+		<div v-for="activeModalUuid in activeModals" :key="activeModalUuid">
+			<edit-user
+				v-if="modalMap[activeModalUuid] === 'editUser'"
+				:modal-uuid="activeModalUuid"
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import { defineAsyncComponent } from "vue";
+
+export default {
+	components: {
+		EditUser: defineAsyncComponent(() =>
+			import("@/components/modals/EditUser.vue")
+		)
+	},
+	computed: {
+		...mapState("modalVisibility", {
+			activeModals: state => state.new.activeModals,
+			modalMap: state => state.new.modalMap
+		})
+	}
+};
+</script>

frontend/src/components/modals/EditUser.vue

@@ -106,7 +106,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters, mapActions } from "vuex";
+import { mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
 import validation from "@/validation";
@@ -114,8 +114,7 @@ import ws from "@/ws";
 
 export default {
 	props: {
-		userId: { type: String, default: "" },
-		sector: { type: String, default: "admin" }
+		modalUuid: { type: String, default: "" }
 	},
 	data() {
 		return {
@@ -125,13 +124,23 @@ export default {
 		};
 	},
 	computed: {
-		...mapState("modals/editUser", {
-			user: state => state.user
-		}),
+		userId() {
+			return this.$store.state.modals.editUser[this.modalUuid].userId;
+		},
+		user() {
+			return this.$store.state.modals.editUser[this.modalUuid].user;
+		},
 		...mapGetters({
 			socket: "websockets/getSocket"
 		})
 	},
+	watch: {
+		// When the userId changes, run init. There can be a delay between the modal opening and the required data (userId) being available
+		userId() {
+			// Note: is it possible for this to run before the socket is ready?
+			this.init();
+		}
+	},
 	mounted() {
 		ws.onConnect(this.init);
 	},
@@ -141,32 +150,42 @@ export default {
 			`edit-user.${this.userId}`,
 			() => {}
 		);
+		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+		this.$store.unregisterModule(["modals", "editUser", this.modalUuid]);
 	},
 	methods: {
 		init() {
-			this.socket.dispatch(`users.getUserFromId`, this.userId, res => {
-				if (res.status === "success") {
-					const user = res.data;
-					this.editUser(user);
+			if (this.userId)
+				this.socket.dispatch(
+					`users.getUserFromId`,
+					this.userId,
+					res => {
+						if (res.status === "success") {
+							const user = res.data;
+							this.$store.dispatch(
+								`modals/editUser/${this.modalUuid}/setUser`,
+								user
+							);
 
-					this.socket.dispatch(
-						"apis.joinRoom",
-						`edit-user.${this.userId}`
-					);
+							this.socket.dispatch(
+								"apis.joinRoom",
+								`edit-user.${this.userId}`
+							);
 
-					this.socket.on(
-						"event:user.removed",
-						res => {
-							if (res.data.userId === this.userId)
-								this.closeModal("editUser");
-						},
-						{ modal: "editUser" }
-					);
-				} else {
-					new Toast("User with that ID not found");
-					this.closeModal("editUser");
-				}
-			});
+							this.socket.on(
+								"event:user.removed",
+								res => {
+									if (res.data.userId === this.userId)
+										this.closeModal("editUser");
+								},
+								{ modal: "editUser" }
+							);
+						} else {
+							new Toast("User with that ID not found");
+							this.closeModal("editUser");
+						}
+					}
+				);
 		},
 		updateUsername() {
 			const { username } = this.user;
@@ -275,7 +294,6 @@ export default {
 				new Toast(res.message);
 			});
 		},
-		...mapActions("modals/editUser", ["editUser"]),
 		...mapActions("modalVisibility", ["closeModal"])
 	}
 };

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

@@ -93,11 +93,6 @@
 				</template>
 			</advanced-table>
 		</div>
-		<edit-user
-			v-if="modals.editUser"
-			:user-id="editingUserId"
-			sector="admin"
-		/>
 	</div>
 </template>
 
@@ -118,7 +113,6 @@ export default {
 	},
 	data() {
 		return {
-			editingUserId: "",
 			columnDefault: {
 				sortable: true,
 				hidable: true,
@@ -314,8 +308,12 @@ export default {
 	},
 	methods: {
 		edit(userId) {
-			this.editingUserId = userId;
-			this.openModal("editUser");
+			this.openModal("editUser").then(({ uuid }) => {
+				this.$store.dispatch(
+					`modals/editUser/${uuid}/editUser`,
+					userId
+				);
+			});
 		},
 		...mapActions("modalVisibility", ["openModal"])
 	}

frontend/src/pages/Admin/index.vue

@@ -238,6 +238,7 @@
 				</div>
 			</template>
 		</floating-box>
+		<modal-manager />
 	</div>
 </template>
 
@@ -248,9 +249,12 @@ import keyboardShortcuts from "@/keyboardShortcuts";
 
 import FloatingBox from "@/components/FloatingBox.vue";
 
+import ModalManager from "@/components/ModalManager.vue";
+
 export default {
 	components: {
-		FloatingBox
+		FloatingBox,
+		ModalManager
 	},
 	data() {
 		return {

frontend/src/pages/Home.vue

@@ -497,6 +497,7 @@
 		<edit-playlist v-if="modals.editPlaylist" />
 		<edit-song v-if="modals.editSong" song-type="songs" sector="home" />
 		<report v-if="modals.report" />
+		<modal-manager />
 	</div>
 </template>
 
@@ -508,10 +509,13 @@ import Toast from "toasters";
 
 import SongThumbnail from "@/components/SongThumbnail.vue";
 
+import ModalManager from "@/components/ModalManager.vue";
+
 import ws from "@/ws";
 
 export default {
 	components: {
+		ModalManager,
 		SongThumbnail,
 		CreateStation: defineAsyncComponent(() =>
 			import("@/components/modals/CreateStation.vue")

frontend/src/store/modules/modalVisibility.js

@@ -1,6 +1,8 @@
 /* eslint no-param-reassign: 0 */
 import ws from "@/ws";
 
+import editUserModal from "./modals/editUser";
+
 const state = {
 	modals: {
 		whatIsNew: false,
@@ -25,9 +27,15 @@ const state = {
 		editSongsConfirm: false,
 		bulkActions: false
 	},
-	currentlyActive: []
+	currentlyActive: [],
+	new: {
+		activeModals: [],
+		modalMap: {}
+	}
 };
 
+const migratedModals = ["editUser"];
+
 const getters = {};
 
 const actions = {
@@ -39,9 +47,27 @@ const actions = {
 
 		commit("closeModal", modal);
 	},
-	openModal: ({ commit }, modal) => {
-		commit("openModal", modal);
-	},
+	openModal: ({ commit }, modal) =>
+		new Promise(resolve => {
+			const uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+				/[xy]/g,
+				symbol => {
+					let array;
+
+					if (symbol === "y") {
+						array = ["8", "9", "a", "b"];
+						return array[Math.floor(Math.random() * array.length)];
+					}
+
+					array = new Uint8Array(1);
+					window.crypto.getRandomValues(array);
+					return (array[0] % 16).toString(16);
+				}
+			);
+
+			commit("openModal", { modal, uuid });
+			resolve({ uuid });
+		}),
 	closeCurrentModal: ({ commit }) => {
 		commit("closeCurrentModal");
 	}
@@ -49,20 +75,53 @@ const actions = {
 
 const mutations = {
 	closeModal(state, modal) {
-		state.modals[modal] = false;
-		const index = state.currentlyActive.indexOf(modal);
-		if (index > -1) state.currentlyActive.splice(index, 1);
+		if (migratedModals.indexOf(modal) === -1) {
+			state.modals[modal] = false;
+			const index = state.currentlyActive.indexOf(modal);
+			if (index > -1) state.currentlyActive.splice(index, 1);
+		}
 	},
-	openModal(state, modal) {
-		state.modals[modal] = true;
-		state.currentlyActive.unshift(modal);
+	openModal(state, { modal, uuid }) {
+		if (migratedModals.indexOf(modal) === -1) {
+			state.modals[modal] = true;
+			state.currentlyActive.push(modal);
+		} else {
+			state.new.modalMap[uuid] = modal;
+			state.new.activeModals.push(uuid);
+			state.currentlyActive.push(`${modal}-${uuid}`);
+
+			this.registerModule(["modals", "editUser", uuid], editUserModal);
+		}
 	},
 	closeCurrentModal(state) {
+		const currentlyActiveModal =
+			state.currentlyActive[state.currentlyActive.length - 1];
+		// TODO: make sure to only destroy/register modal listeners for a unique modal
 		// remove any websocket listeners for the modal
-		ws.destroyModalListeners(state.currentlyActive[0]);
+		ws.destroyModalListeners(currentlyActiveModal);
 
-		state.modals[state.currentlyActive[0]] = false;
-		state.currentlyActive.shift();
+		if (
+			migratedModals.indexOf(
+				currentlyActiveModal.substring(
+					0,
+					currentlyActiveModal.indexOf("-")
+				)
+			) === -1
+		) {
+			state.modals[currentlyActiveModal] = false;
+			state.currentlyActive.pop();
+		} else {
+			state.currentlyActive.pop();
+			state.new.activeModals.pop();
+			// const modal = currentlyActiveModal.substring(
+			// 	0,
+			// 	currentlyActiveModal.indexOf("-")
+			// );
+			const uuid = currentlyActiveModal.substring(
+				currentlyActiveModal.indexOf("-") + 1
+			);
+			delete state.new.modalMap[uuid];
+		}
 	}
 };
 

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

@@ -2,15 +2,20 @@
 
 export default {
 	namespaced: true,
-	state: {
+	state: () => ({
+		userId: null,
 		user: {}
-	},
+	}),
 	getters: {},
 	actions: {
-		editUser: ({ commit }, user) => commit("editUser", user)
+		editUser: ({ commit }, userId) => commit("editUser", userId),
+		setUser: ({ commit }, user) => commit("setUser", user)
 	},
 	mutations: {
-		editUser(state, user) {
+		editUser(state, userId) {
+			state.userId = userId;
+		},
+		setUser(state, user) {
 			state.user = user;
 		}
 	}