refactor: Started migrating editPlaylist to new modal system

frontend/src/components/ActivityItem.vue

@@ -68,7 +68,7 @@ export default {
 			if (playlistId) {
 				message = message.replace(
 					/<playlistId>(.*)<\/playlistId>/g,
-					`<a href='#' class='activity-item-link' @click='showPlaylist("${playlistId}")'>$1</a>`
+					`<a href='#' class='activity-item-link' @click='openModal({modal:'editPlaylist', data: {"${playlistId}"}})'>$1</a>`
 				);
 			}
 
@@ -82,7 +82,7 @@ export default {
 			return {
 				template: `<p>${message}</p>`,
 				methods: {
-					showPlaylist: this.showPlaylist,
+					openModal: this.openModal,
 					showReport: this.showReport
 				}
 			};
@@ -178,11 +178,6 @@ export default {
 			this.viewReport(reportId);
 			this.openModal("viewReport");
 		},
-		showPlaylist(playlistId) {
-			this.editPlaylist(playlistId);
-			this.openModal("editPlaylist");
-		},
-		...mapActions("user/playlists", ["editPlaylist"]),
 		formatDistance,
 		parseISO,
 		...mapActions("modalVisibility", ["openModal"]),

frontend/src/components/ModalManager.vue

@@ -24,7 +24,8 @@ export default {
 			createStation: "CreateStation.vue",
 			editNews: "EditNews.vue",
 			manageStation: "ManageStation/index.vue",
-			importPlaylist: "ImportPlaylist.vue"
+			importPlaylist: "ImportPlaylist.vue",
+			editPlaylist: "EditPlaylist/index.vue"
 		}),
 		...mapState("modalVisibility", {
 			activeModals: state => state.new.activeModals,

frontend/src/components/PlaylistTabBase.vue

@@ -190,7 +190,14 @@
 							</quick-confirm>
 							<i
 								v-if="featuredPlaylist.createdBy === myUserId"
-								@click="showPlaylist(featuredPlaylist._id)"
+								@click="
+									openModal({
+										modal: 'editPlaylist',
+										data: {
+											playlistId: featuredPlaylist._id
+										}
+									})
+								"
 								class="material-icons edit-icon"
 								content="Edit Playlist"
 								v-tippy
@@ -202,7 +209,14 @@
 									(featuredPlaylist.privacy === 'public' ||
 										isAdmin())
 								"
-								@click="showPlaylist(featuredPlaylist._id)"
+								@click="
+									openModal({
+										modal: 'editPlaylist',
+										data: {
+											playlistId: featuredPlaylist._id
+										}
+									})
+								"
 								class="material-icons edit-icon"
 								content="View Playlist"
 								v-tippy
@@ -360,7 +374,12 @@
 							</quick-confirm>
 							<i
 								v-if="playlist.createdBy === myUserId"
-								@click="showPlaylist(playlist._id)"
+								@click="
+									openModal({
+										modal: 'editPlaylist',
+										data: { playlistId: playlist._id }
+									})
+								"
 								class="material-icons edit-icon"
 								content="Edit Playlist"
 								v-tippy
@@ -371,7 +390,12 @@
 									playlist.createdBy !== myUserId &&
 									(playlist.privacy === 'public' || isAdmin())
 								"
-								@click="showPlaylist(playlist._id)"
+								@click="
+									openModal({
+										modal: 'editPlaylist',
+										data: { playlistId: playlist._id }
+									})
+								"
 								class="material-icons edit-icon"
 								content="View Playlist"
 								v-tippy
@@ -432,7 +456,12 @@
 							</quick-confirm>
 							<i
 								v-if="playlist.createdBy === myUserId"
-								@click="showPlaylist(playlist._id)"
+								@click="
+									openModal({
+										modal: 'editPlaylist',
+										data: { playlistId: playlist._id }
+									})
+								"
 								class="material-icons edit-icon"
 								content="Edit Playlist"
 								v-tippy
@@ -443,7 +472,12 @@
 									playlist.createdBy !== myUserId &&
 									(playlist.privacy === 'public' || isAdmin())
 								"
-								@click="showPlaylist(playlist._id)"
+								@click="
+									openModal({
+										modal: 'editPlaylist',
+										data: { playlistId: playlist._id }
+									})
+								"
 								class="material-icons edit-icon"
 								content="View Playlist"
 								v-tippy
@@ -620,7 +654,14 @@
 										</i>
 									</quick-confirm>
 									<i
-										@click="showPlaylist(element._id)"
+										@click="
+											openModal({
+												modal: 'editPlaylist',
+												data: {
+													playlistId: element._id
+												}
+											})
+										"
 										class="material-icons edit-icon"
 										content="Edit Playlist"
 										v-tippy
@@ -792,10 +833,6 @@ export default {
 		isOwnerOrAdmin() {
 			return this.isOwner() || this.isAdmin();
 		},
-		showPlaylist(playlistId) {
-			this.editPlaylist(playlistId);
-			this.openModal("editPlaylist");
-		},
 		label(tense = "future", typeOverwrite = null, capitalize = false) {
 			let label = typeOverwrite || this.type;
 
@@ -962,7 +999,7 @@ export default {
 			});
 		},
 		...mapActions("modalVisibility", ["openModal"]),
-		...mapActions("user/playlists", ["editPlaylist", "setPlaylists"])
+		...mapActions("user/playlists", ["setPlaylists"])
 	}
 };
 </script>

frontend/src/components/modals/CreatePlaylist.vue

@@ -83,15 +83,16 @@ export default {
 						this.closeModal("createPlaylist");
 
 						if (!window.addToPlaylistDropdown) {
-							this.editPlaylist(res.data.playlistId);
-							this.openModal("editPlaylist");
+							this.openModal({
+								modal: "editPlaylist",
+								data: { playlistId: res.data.playlistId }
+							});
 						}
 					}
 				}
 			);
 		},
-		...mapActions("modalVisibility", ["closeModal", "openModal"]),
-		...mapActions("user/playlists", ["editPlaylist"])
+		...mapActions("modalVisibility", ["closeModal", "openModal"])
 	}
 };
 </script>

frontend/src/components/modals/EditPlaylist/Tabs/AddSongs.vue

@@ -140,7 +140,9 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapGetters } from "vuex";
+
+import { mapModalState } from "@/vuex_helpers";
 
 import SearchYoutube from "@/mixins/SearchYoutube.vue";
 import SearchMusare from "@/mixins/SearchMusare.vue";
@@ -151,13 +153,16 @@ import SearchQueryItem from "@/components/SearchQueryItem.vue";
 export default {
 	components: { SearchQueryItem, SongItem },
 	mixins: [SearchYoutube, SearchMusare],
+	props: {
+		modalUuid: { type: String, default: "" }
+	},
 	data() {
 		return {
 			sitename: "Musare"
 		};
 	},
 	computed: {
-		...mapState("modals/editPlaylist", {
+		...mapModalState("modals/editPlaylist/MODAL_UUID", {
 			playlist: state => state.playlist
 		}),
 		...mapGetters({

frontend/src/components/modals/EditPlaylist/Tabs/ImportPlaylists.vue

@@ -32,18 +32,22 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapGetters } from "vuex";
 import Toast from "toasters";
 
+import { mapModalState } from "@/vuex_helpers";
 import SearchYoutube from "@/mixins/SearchYoutube.vue";
 
 export default {
 	mixins: [SearchYoutube],
+	props: {
+		modalUuid: { type: String, default: "" }
+	},
 	data() {
 		return {};
 	},
 	computed: {
-		...mapState("modals/editPlaylist", {
+		...mapModalState("modals/editPlaylist/MODAL_UUID", {
 			playlist: state => state.playlist
 		}),
 		...mapGetters({

frontend/src/components/modals/EditPlaylist/Tabs/Settings.vue

@@ -58,14 +58,18 @@
 import { mapState, mapGetters /* , mapActions */ } from "vuex";
 import Toast from "toasters";
 
+import { mapModalState } from "@/vuex_helpers";
 import validation from "@/validation";
 
 export default {
+	props: {
+		modalUuid: { type: String, default: "" }
+	},
 	data() {
 		return {};
 	},
 	computed: {
-		...mapState("modals/editPlaylist", {
+		...mapModalState("modals/editPlaylist/MODAL_UUID", {
 			playlist: state => state.playlist
 		}),
 		...mapGetters({

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

@@ -62,16 +62,19 @@
 							isEditable() ||
 							(playlist.type === 'genre' && isAdmin())
 						"
+						:modal-uuid="modalUuid"
 					/>
 					<add-songs
 						class="tab"
 						v-show="tab === 'add-songs'"
 						v-if="isEditable()"
+						:modal-uuid="modalUuid"
 					/>
 					<import-playlists
 						class="tab"
 						v-show="tab === 'import-playlists'"
 						v-if="isEditable()"
+						:modal-uuid="modalUuid"
 					/>
 				</div>
 			</div>
@@ -247,6 +250,7 @@ import { mapState, mapGetters, mapActions } from "vuex";
 import draggable from "vuedraggable";
 import Toast from "toasters";
 
+import { mapModalState, mapModalActions } from "@/vuex_helpers";
 import ws from "@/ws";
 import SongItem from "../../SongItem.vue";
 
@@ -264,6 +268,9 @@ export default {
 		AddSongs,
 		ImportPlaylists
 	},
+	props: {
+		modalUuid: { type: String, default: "" }
+	},
 	data() {
 		return {
 			utils,
@@ -276,20 +283,19 @@ export default {
 		...mapState("station", {
 			station: state => state.station
 		}),
-		...mapState("user/playlists", {
-			editing: state => state.editing
-		}),
-		...mapState("modals/editPlaylist", {
+		...mapModalState("modals/editPlaylist/MODAL_UUID", {
+			playlistId: state => state.playlistId,
 			tab: state => state.tab,
 			playlist: state => state.playlist
 		}),
 		playlistSongs: {
 			get() {
-				return this.$store.state.modals.editPlaylist.playlist.songs;
+				return this.$store.state.modals.editPlaylist[this.modalUuid]
+					.playlist.songs;
 			},
 			set(value) {
 				this.$store.commit(
-					"modals/editPlaylist/updatePlaylistSongs",
+					`modals/editPlaylist/${this.modalUuid}/updatePlaylistSongs`,
 					value
 				);
 			}
@@ -364,16 +370,26 @@ export default {
 	},
 	beforeUnmount() {
 		this.clearPlaylist();
+		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+		this.$store.unregisterModule([
+			"modals",
+			"editPlaylist",
+			this.modalUuid
+		]);
 	},
 	methods: {
 		init() {
 			this.gettingSongs = true;
-			this.socket.dispatch("playlists.getPlaylist", this.editing, res => {
-				if (res.status === "success") {
-					this.setPlaylist(res.data.playlist);
-				} else new Toast(res.message);
-				this.gettingSongs = false;
-			});
+			this.socket.dispatch(
+				"playlists.getPlaylist",
+				this.playlistId,
+				res => {
+					if (res.status === "success") {
+						this.setPlaylist(res.data.playlist);
+					} else new Toast(res.message);
+					this.gettingSongs = false;
+				}
+			);
 		},
 		isEditable() {
 			return (
@@ -566,10 +582,13 @@ export default {
 				this.$refs[`${payload}-tab`].scrollIntoView({
 					block: "nearest"
 				});
-				return dispatch("modals/editPlaylist/showTab", payload);
+				return dispatch(
+					`modals/editPlaylist/${this.modalUuid}/showTab`,
+					payload
+				);
 			}
 		}),
-		...mapActions("modals/editPlaylist", [
+		...mapModalActions("modals/editPlaylist/MODAL_UUID", [
 			"setPlaylist",
 			"clearPlaylist",
 			"addSong",

frontend/src/components/modals/ImportPlaylist.vue

@@ -90,6 +90,14 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
+	beforeUnmount() {
+		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+		this.$store.unregisterModule([
+			"modals",
+			"importPlaylist",
+			this.modalUuid
+		]);
+	},
 	methods: {
 		importPlaylist() {
 			let isImportingPlaylist = true;

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

@@ -615,8 +615,7 @@ export default {
 				);
 			}
 		}),
-		...mapActions("modalVisibility", ["openModal", "closeModal"]),
-		...mapActions("user/playlists", ["editPlaylist"])
+		...mapActions("modalVisibility", ["openModal", "closeModal"])
 	}
 };
 </script>

frontend/src/pages/Admin/Playlists.vue

@@ -17,7 +17,12 @@
 					<div class="row-options">
 						<button
 							class="button is-primary icon-with-button material-icons"
-							@click="edit(slotProps.item._id)"
+							@click="
+								openModal({
+									modal: 'editPlaylist',
+									data: { playlistId: slotProps.item._id }
+								})
+							"
 							:disabled="slotProps.item.removed"
 							content="Edit Playlist"
 							v-tippy
@@ -79,7 +84,6 @@
 			</advanced-table>
 		</div>
 
-		<edit-playlist v-if="modals.editPlaylist" sector="admin" />
 		<edit-song v-if="modals.editSong" song-type="songs" />
 		<report v-if="modals.report" />
 	</div>
@@ -96,9 +100,6 @@ import utils from "../../../js/utils";
 
 export default {
 	components: {
-		EditPlaylist: defineAsyncComponent(() =>
-			import("@/components/modals/EditPlaylist")
-		),
 		Report: defineAsyncComponent(() =>
 			import("@/components/modals/Report.vue")
 		),
@@ -330,10 +331,6 @@ export default {
 		})
 	},
 	methods: {
-		edit(playlistId) {
-			this.editPlaylist(playlistId);
-			this.openModal("editPlaylist");
-		},
 		getDateFormatted(createdAt) {
 			const date = new Date(createdAt);
 			const year = date.getFullYear();
@@ -346,8 +343,7 @@ export default {
 		formatTimeLong(length) {
 			return this.utils.formatTimeLong(length);
 		},
-		...mapActions("modalVisibility", ["openModal"]),
-		...mapActions("user/playlists", ["editPlaylist"])
+		...mapActions("modalVisibility", ["openModal"])
 	}
 };
 </script>

frontend/src/pages/Admin/Stations.vue

@@ -146,7 +146,6 @@
 		</div>
 
 		<create-playlist v-if="modals.createPlaylist" />
-		<edit-playlist v-if="modals.editPlaylist" />
 		<edit-song v-if="modals.editSong" song-type="songs" sector="admin" />
 		<report v-if="modals.report" />
 	</div>
@@ -163,9 +162,6 @@ import RunJobDropdown from "@/components/RunJobDropdown.vue";
 
 export default {
 	components: {
-		EditPlaylist: defineAsyncComponent(() =>
-			import("@/components/modals/EditPlaylist")
-		),
 		CreatePlaylist: defineAsyncComponent(() =>
 			import("@/components/modals/CreatePlaylist.vue")
 		),

frontend/src/pages/Home.vue

@@ -493,7 +493,6 @@
 			sector="home"
 		/>
 		<create-playlist v-if="modals.createPlaylist" />
-		<edit-playlist v-if="modals.editPlaylist" />
 		<edit-song v-if="modals.editSong" song-type="songs" sector="home" />
 		<report v-if="modals.report" />
 		<modal-manager />
@@ -519,9 +518,6 @@ export default {
 		ManageStation: defineAsyncComponent(() =>
 			import("@/components/modals/ManageStation/index.vue")
 		),
-		EditPlaylist: defineAsyncComponent(() =>
-			import("@/components/modals/EditPlaylist")
-		),
 		CreatePlaylist: defineAsyncComponent(() =>
 			import("@/components/modals/CreatePlaylist.vue")
 		),

frontend/src/pages/Profile/Tabs/Playlists.vue

@@ -49,7 +49,12 @@
 						<template #actions>
 							<i
 								v-if="myUserId === userId"
-								@click="showPlaylist(element._id)"
+								@click="
+									openModal({
+										modal: 'editPlaylist',
+										data: { playlistId: element._id }
+									})
+								"
 								class="material-icons edit-icon"
 								content="Edit Playlist"
 								v-tippy
@@ -57,7 +62,12 @@
 							>
 							<i
 								v-else
-								@click="showPlaylist(element._id)"
+								@click="
+									openModal({
+										modal: 'editPlaylist',
+										data: { playlistId: element._id }
+									})
+								"
 								class="material-icons view-icon"
 								content="View Playlist"
 								v-tippy
@@ -152,12 +162,8 @@ export default {
 		);
 	},
 	methods: {
-		showPlaylist(playlistId) {
-			this.editPlaylist(playlistId);
-			this.openModal("editPlaylist");
-		},
 		...mapActions("modalVisibility", ["openModal"]),
-		...mapActions("user/playlists", ["editPlaylist", "setPlaylists"])
+		...mapActions("user/playlists", ["setPlaylists"])
 	}
 };
 </script>

frontend/src/pages/Profile/index.vue

@@ -1,6 +1,5 @@
 <template>
 	<div v-if="isUser">
-		<edit-playlist v-if="modals.editPlaylist" />
 		<view-report v-if="modals.viewReport" />
 		<edit-song v-if="modals.editSong" song-type="songs" />
 		<report v-if="modals.report" />
@@ -123,9 +122,6 @@ export default {
 		ProfilePicture,
 		RecentActivity,
 		Playlists,
-		EditPlaylist: defineAsyncComponent(() =>
-			import("@/components/modals/EditPlaylist")
-		),
 		Report: defineAsyncComponent(() =>
 			import("@/components/modals/Report.vue")
 		),

frontend/src/pages/Station/Sidebar/Playlists.vue

@@ -67,7 +67,12 @@
 								>
 							</quick-confirm>
 							<i
-								@click="edit(element._id)"
+								@click="
+									openModal({
+										modal: 'editPlaylist',
+										data: { playlistId: element._id }
+									})
+								"
 								class="material-icons edit-icon"
 								content="Edit Playlist"
 								v-tippy
@@ -177,10 +182,6 @@ export default {
 		isOwnerOrAdmin() {
 			return this.isOwner() || this.isAdmin();
 		},
-		edit(id) {
-			this.editPlaylist(id);
-			this.openModal("editPlaylist");
-		},
 		selectPlaylist(playlist) {
 			if (this.station.type === "community") {
 				if (!this.isSelected(playlist.id)) {
@@ -259,7 +260,7 @@ export default {
 			);
 		},
 		...mapActions("modalVisibility", ["openModal"]),
-		...mapActions("user/playlists", ["editPlaylist", "setPlaylists"])
+		...mapActions("user/playlists", ["setPlaylists"])
 	}
 };
 </script>

frontend/src/pages/Station/index.vue

@@ -636,7 +636,6 @@
 					:station-id="station._id"
 					sector="station"
 				/>
-				<edit-playlist v-if="modals.editPlaylist" />
 				<edit-song
 					v-if="modals.editSong"
 					song-type="songs"
@@ -800,9 +799,6 @@ import StationSidebar from "./Sidebar/index.vue";
 export default {
 	components: {
 		ContentLoader,
-		EditPlaylist: defineAsyncComponent(() =>
-			import("@/components/modals/EditPlaylist")
-		),
 		CreatePlaylist: defineAsyncComponent(() =>
 			import("@/components/modals/CreatePlaylist.vue")
 		),

frontend/src/store/index.js

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

frontend/src/store/modules/modalVisibility.js

@@ -7,10 +7,10 @@ import createStation from "./modals/createStation";
 import editNews from "./modals/editNews";
 import manageStation from "./modals/manageStation";
 import importPlaylist from "./modals/importPlaylist";
+import editPlaylist from "./modals/editPlaylist";
 
 const state = {
 	modals: {
-		editPlaylist: false,
 		createPlaylist: false,
 		report: false,
 		removeAccount: false,
@@ -37,7 +37,8 @@ const modalModules = {
 	createStation,
 	editNews,
 	manageStation,
-	importPlaylist
+	importPlaylist,
+	editPlaylist
 };
 
 const migratedModules = {
@@ -47,7 +48,7 @@ const migratedModules = {
 	register: true,
 	createStation: true,
 	importPlaylist: true,
-	editPlaylist: false,
+	editPlaylist: true,
 	createPlaylist: false,
 	report: false,
 	removeAccount: false,

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

@@ -3,11 +3,13 @@
 export default {
 	namespaced: true,
 	state: {
+		playlistId: null,
 		tab: "settings",
 		playlist: { songs: [] }
 	},
 	getters: {},
 	actions: {
+		init: ({ commit }, data) => commit("init", data),
 		showTab: ({ commit }, tab) => commit("showTab", tab),
 		setPlaylist: ({ commit }, playlist) => commit("setPlaylist", playlist),
 		clearPlaylist: ({ commit }) => commit("clearPlaylist"),
@@ -18,6 +20,9 @@ export default {
 		repositionedSong: ({ commit }, song) => commit("repositionedSong", song)
 	},
 	mutations: {
+		init(state, { playlistId }) {
+			state.playlistId = playlistId;
+		},
 		showTab(state, tab) {
 			state.tab = tab;
 		},

frontend/src/store/modules/user.js

@@ -191,12 +191,10 @@ const modules = {
 	playlists: {
 		namespaced: true,
 		state: {
-			editing: "",
 			playlists: [],
 			fetchedPlaylists: false
 		},
 		actions: {
-			editPlaylist: ({ commit }, id) => commit("editPlaylist", id),
 			setPlaylists: ({ commit }, playlists) =>
 				commit("setPlaylists", playlists),
 			updatePlaylists: ({ commit }, playlists) =>
@@ -207,9 +205,6 @@ const modules = {
 				commit("removePlaylist", playlistId)
 		},
 		mutations: {
-			editPlaylist(state, id) {
-				state.editing = id;
-			},
 			setPlaylists(state, playlists) {
 				state.fetchedPlaylists = true;
 				state.playlists = playlists;