refactor(ManageStation): Started migrating to new modal system

frontend/src/components/ModalManager.vue

@@ -22,7 +22,8 @@ export default {
 			register: "Register.vue",
 			whatIsNew: "WhatIsNew.vue",
 			createStation: "CreateStation.vue",
-			editNews: "EditNews.vue"
+			editNews: "EditNews.vue",
+			manageStation: "ManageStation/index.vue"
 		}),
 		...mapState("modalVisibility", {
 			activeModals: state => state.new.activeModals,

frontend/src/components/PlaylistTabBase.vue

@@ -654,6 +654,7 @@ export default {
 	},
 	mixins: [SortablePlaylists],
 	props: {
+		modalUuid: { type: String, default: "" },
 		type: {
 			type: String,
 			default: ""
@@ -682,13 +683,15 @@ export default {
 		station: {
 			get() {
 				if (this.sector === "manageStation")
-					return this.$store.state.modals.manageStation.station;
+					return this.$store.state.modals.manageStation[
+						this.modalUuid
+					].station;
 				return this.$store.state.station.station;
 			},
 			set(station) {
 				if (this.sector === "manageStation")
 					this.$store.commit(
-						"modals/manageStation/updateStation",
+						`modals/manageStation/${this.modalUuid}/updateStation`,
 						station
 					);
 				else this.$store.commit("station/updateStation", station);
@@ -697,13 +700,15 @@ export default {
 		blacklist: {
 			get() {
 				if (this.sector === "manageStation")
-					return this.$store.state.modals.manageStation.blacklist;
+					return this.$store.state.modals.manageStation[
+						this.modalUuid
+					].blacklist;
 				return this.$store.state.station.blacklist;
 			},
 			set(blacklist) {
 				if (this.sector === "manageStation")
 					this.$store.commit(
-						"modals/manageStation/setBlacklist",
+						`modals/manageStation/${this.modalUuid}/setBlacklist`,
 						blacklist
 					);
 				else this.$store.commit("station/setBlacklist", blacklist);

frontend/src/components/Queue.vue

@@ -82,6 +82,7 @@ import SongItem from "@/components/SongItem.vue";
 export default {
 	components: { draggable, SongItem },
 	props: {
+		modalUuid: { type: String, default: "" },
 		sector: {
 			type: String,
 			default: "station"
@@ -94,16 +95,35 @@ export default {
 		};
 	},
 	computed: {
+		station: {
+			get() {
+				if (this.sector === "manageStation")
+					return this.$store.state.modals.manageStation[
+						this.modalUuid
+					].station;
+				return this.$store.state.station.station;
+			},
+			set(station) {
+				if (this.sector === "manageStation")
+					this.$store.commit(
+						`modals/manageStation/${this.modalUuid}/updateStation`,
+						station
+					);
+				else this.$store.commit("station/updateStation", station);
+			}
+		},
 		queue: {
 			get() {
 				if (this.sector === "manageStation")
-					return this.$store.state.modals.manageStation.songsList;
+					return this.$store.state.modals.manageStation[
+						this.modalUuid
+					].songsList;
 				return this.$store.state.station.songsList;
 			},
 			set(queue) {
 				if (this.sector === "manageStation")
 					this.$store.commit(
-						"modals/manageStation/updateSongsList",
+						`modals/manageStation/${this.modalUuid}/updateSongsList`,
 						queue
 					);
 				else this.$store.commit("station/updateSongsList", queue);
@@ -121,16 +141,6 @@ export default {
 			loggedIn: state => state.user.auth.loggedIn,
 			userId: state => state.user.auth.userId,
 			userRole: state => state.user.auth.role,
-			station(state) {
-				return this.sector === "station"
-					? state.station.station
-					: state.modals.manageStation.station;
-			},
-			songsList(state) {
-				return this.sector === "station"
-					? state.station.songsList
-					: state.modals.manageStation.songsList;
-			},
 			noSong: state => state.station.noSong
 		}),
 		...mapGetters({
@@ -206,7 +216,7 @@ export default {
 				moved: {
 					element: song,
 					oldIndex: index,
-					newIndex: this.songsList.length
+					newIndex: this.queue.length
 				}
 			});
 		},

frontend/src/components/Request.vue

@@ -177,6 +177,7 @@
 				:type="'autorequest'"
 				:sector="sector"
 				@selected="autoRequestSong()"
+				:modal-uuid="modalUuid"
 			/>
 		</div>
 	</div>
@@ -201,6 +202,7 @@ export default {
 	},
 	mixins: [SearchYoutube, SearchMusare],
 	props: {
+		modalUuid: { type: String, default: "" },
 		sector: { type: String, default: "station" },
 		disableAutoRequest: { type: Boolean, default: false }
 	},
@@ -213,13 +215,15 @@ export default {
 		station: {
 			get() {
 				if (this.sector === "manageStation")
-					return this.$store.state.modals.manageStation.station;
+					return this.$store.state.modals.manageStation[
+						this.modalUuid
+					].station;
 				return this.$store.state.station.station;
 			},
 			set(station) {
 				if (this.sector === "manageStation")
 					this.$store.commit(
-						"modals/manageStation/updateStation",
+						`modals/manageStation/${this.modalUuid}/updateStation`,
 						station
 					);
 				else this.$store.commit("station/updateStation", station);
@@ -228,13 +232,15 @@ export default {
 		blacklist: {
 			get() {
 				if (this.sector === "manageStation")
-					return this.$store.state.modals.manageStation.blacklist;
+					return this.$store.state.modals.manageStation[
+						this.modalUuid
+					].blacklist;
 				return this.$store.state.station.blacklist;
 			},
 			set(blacklist) {
 				if (this.sector === "manageStation")
 					this.$store.commit(
-						"modals/manageStation/setBlacklist",
+						`modals/manageStation/${this.modalUuid}/setBlacklist`,
 						blacklist
 					);
 				else this.$store.commit("station/setBlacklist", blacklist);
@@ -243,13 +249,15 @@ export default {
 		songsList: {
 			get() {
 				if (this.sector === "manageStation")
-					return this.$store.state.modals.manageStation.songsList;
+					return this.$store.state.modals.manageStation[
+						this.modalUuid
+					].songsList;
 				return this.$store.state.station.songsList;
 			},
 			set(songsList) {
 				if (this.sector === "manageStation")
 					this.$store.commit(
-						"modals/manageStation/updateSongsList",
+						`modals/manageStation/${this.modalUuid}/updateSongsList`,
 						songsList
 					);
 				else this.$store.commit("station/updateSongsList", songsList);

frontend/src/components/modals/ManageStation/Settings.vue

@@ -170,13 +170,17 @@
 </template>
 
 <script>
-import { mapState, mapGetters, mapActions } from "vuex";
+import { mapGetters } from "vuex";
 
 import Toast from "toasters";
 
+import { mapModalState, mapModalActions } from "@/vuex_helpers";
 import validation from "@/validation";
 
 export default {
+	props: {
+		modalUuid: { type: String, default: "" }
+	},
 	data() {
 		return {
 			localStation: {
@@ -199,7 +203,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapState("modals/manageStation", {
+		...mapModalState("modals/manageStation/MODAL_UUID", {
 			station: state => state.station
 		}),
 		...mapGetters({
@@ -291,7 +295,7 @@ export default {
 				new Toast("Please make a change before saving.");
 			}
 		},
-		...mapActions("modals/manageStation", ["editStation"])
+		...mapModalActions("modals/manageStation/MODAL_UUID", ["editStation"])
 	}
 };
 </script>

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

@@ -124,12 +124,14 @@
 							v-if="isOwnerOrAdmin()"
 							class="tab"
 							v-show="tab === 'settings'"
+							:modal-uuid="modalUuid"
 						/>
 						<playlist-tab-base
 							v-if="isOwnerOrAdmin() && station.autofill.enabled"
 							class="tab"
 							v-show="tab === 'autofill'"
 							:type="'autofill'"
+							:modal-uuid="modalUuid"
 						>
 							<template #info>
 								<p>
@@ -144,12 +146,14 @@
 							v-show="tab === 'request'"
 							:sector="'manageStation'"
 							:disable-auto-request="sector !== 'station'"
+							:modal-uuid="modalUuid"
 						/>
 						<playlist-tab-base
 							v-if="isOwnerOrAdmin()"
 							class="tab"
 							v-show="tab === 'blacklist'"
 							:type="'blacklist'"
+							:modal-uuid="modalUuid"
 						>
 							<template #info>
 								<p>
@@ -174,7 +178,7 @@
 						header="Currently Playing.."
 						class="currently-playing"
 					/>
-					<queue sector="manageStation" />
+					<queue :modal-uuid="modalUuid" sector="manageStation" />
 				</div>
 			</div>
 		</template>
@@ -196,6 +200,8 @@ import { mapState, mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
 
+import { mapModalState, mapModalActions } from "@/vuex_helpers";
+
 import Queue from "@/components/Queue.vue";
 import SongItem from "@/components/SongItem.vue";
 
@@ -212,8 +218,7 @@ export default {
 		Request
 	},
 	props: {
-		stationId: { type: String, default: "" },
-		sector: { type: String, default: "admin" }
+		modalUuid: { type: String, default: "" }
 	},
 	computed: {
 		...mapState({
@@ -221,7 +226,9 @@ export default {
 			userId: state => state.user.auth.userId,
 			role: state => state.user.auth.role
 		}),
-		...mapState("modals/manageStation", {
+		...mapModalState("modals/manageStation/MODAL_UUID", {
+			stationId: state => state.stationId,
+			sector: state => state.sector,
 			tab: state => state.tab,
 			station: state => state.station,
 			songsList: state => state.songsList,
@@ -504,6 +511,13 @@ export default {
 
 		if (this.isOwnerOrAdmin()) this.showTab("settings");
 		this.clearStation();
+
+		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+		this.$store.unregisterModule([
+			"modals",
+			"manageStation",
+			this.modalUuid
+		]);
 	},
 	methods: {
 		isOwner() {
@@ -577,7 +591,7 @@ export default {
 				}
 			);
 		},
-		...mapActions("modals/manageStation", [
+		...mapModalActions("modals/manageStation/MODAL_UUID", [
 			"editStation",
 			"setAutofillPlaylists",
 			"setBlacklist",
@@ -595,7 +609,10 @@ export default {
 					this.$refs[`${payload}-tab`].scrollIntoView({
 						block: "nearest"
 					}); // Only works if the ref exists, which it doesn't always
-				return dispatch("modals/manageStation/showTab", payload);
+				return dispatch(
+					`modals/manageStation/${this.modalUuid}/showTab`,
+					payload
+				);
 			}
 		}),
 		...mapActions("modalVisibility", ["openModal", "closeModal"]),

frontend/src/pages/Admin/Stations.vue

@@ -28,7 +28,15 @@
 					<div class="row-options">
 						<button
 							class="button is-primary icon-with-button material-icons"
-							@click="edit(slotProps.item._id)"
+							@click="
+								openModal({
+									modal: 'manageStation',
+									data: {
+										stationId: slotProps.item._id,
+										sector: 'admin'
+									}
+								})
+							"
 							:disabled="slotProps.item.removed"
 							content="Manage Station"
 							v-tippy
@@ -138,11 +146,6 @@
 		</div>
 
 		<create-playlist v-if="modals.createPlaylist" />
-		<manage-station
-			v-if="modals.manageStation"
-			:station-id="editingStationId"
-			sector="admin"
-		/>
 		<edit-playlist v-if="modals.editPlaylist" />
 		<edit-song v-if="modals.editSong" song-type="songs" sector="admin" />
 		<report v-if="modals.report" />
@@ -166,9 +169,6 @@ export default {
 		CreatePlaylist: defineAsyncComponent(() =>
 			import("@/components/modals/CreatePlaylist.vue")
 		),
-		ManageStation: defineAsyncComponent(() =>
-			import("@/components/modals/ManageStation/index.vue")
-		),
 		Report: defineAsyncComponent(() =>
 			import("@/components/modals/Report.vue")
 		),
@@ -474,10 +474,6 @@ export default {
 		})
 	},
 	methods: {
-		edit(stationId) {
-			this.editingStationId = stationId;
-			this.openModal("manageStation");
-		},
 		remove(stationId) {
 			this.socket.dispatch(
 				"stations.remove",

frontend/src/store/index.js

@@ -14,7 +14,6 @@ import editSongsModal from "./modules/modals/editSongs";
 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 viewPunishmentModal from "./modules/modals/viewPunishment";
 import viewReportModal from "./modules/modals/viewReport";
 import reportModal from "./modules/modals/report";
@@ -40,7 +39,7 @@ export default createStore({
 				importAlbum: importAlbumModal,
 				importPlaylist: importPlaylistModal,
 				editPlaylist: editPlaylistModal,
-				manageStation: manageStationModal,
+				manageStation: emptyModule,
 				editUser: emptyModule,
 				whatIsNew: emptyModule,
 				createStation: emptyModule,

frontend/src/store/modules/modalVisibility.js

@@ -5,10 +5,10 @@ import editUser from "./modals/editUser";
 import whatIsNew from "./modals/whatIsNew";
 import createStation from "./modals/createStation";
 import editNews from "./modals/editNews";
+import manageStation from "./modals/manageStation";
 
 const state = {
 	modals: {
-		manageStation: false,
 		importPlaylist: false,
 		editPlaylist: false,
 		createPlaylist: false,
@@ -35,12 +35,13 @@ const modalModules = {
 	editUser,
 	whatIsNew,
 	createStation,
-	editNews
+	editNews,
+	manageStation
 };
 
 const migratedModules = {
 	whatIsNew: true,
-	manageStation: false,
+	manageStation: true,
 	login: true,
 	register: true,
 	createStation: true,

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

@@ -13,9 +13,9 @@ export default {
 	},
 	mutations: {
 		init(state, { createNews, newsId, sector }) {
-			state.createNews = createNews;
-			state.newsId = newsId;
-			state.sector = sector;
+			if (createNews) state.createNews = createNews;
+			if (newsId) state.newsId = newsId;
+			if (sector) state.sector = sector;
 		}
 	}
 };

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

@@ -3,6 +3,8 @@
 export default {
 	namespaced: true,
 	state: {
+		stationId: null,
+		sector: "admin",
 		tab: "settings",
 		station: {},
 		stationPlaylist: { songs: [] },
@@ -14,6 +16,7 @@ export default {
 	},
 	getters: {},
 	actions: {
+		init: ({ commit }, data) => commit("init", data),
 		showTab: ({ commit }, tab) => commit("showTab", tab),
 		editStation: ({ commit }, station) => commit("editStation", station),
 		setAutofillPlaylists: ({ commit }, autofillPlaylists) =>
@@ -34,6 +37,10 @@ export default {
 		updateStation: ({ commit }, station) => commit("updateStation", station)
 	},
 	mutations: {
+		init(state, { stationId, sector }) {
+			state.stationId = stationId;
+			if (sector) state.sector = sector;
+		},
 		showTab(state, tab) {
 			state.tab = tab;
 		},