refactor(ImportPlaylist): Migrate to new modal system

frontend/src/components/ModalManager.vue

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

frontend/src/components/modals/ImportPlaylist.vue

@@ -67,22 +67,24 @@ import SearchYoutube from "@/mixins/SearchYoutube.vue";
 
 export default {
 	mixins: [SearchYoutube],
+	props: {
+		modalUuid: { type: String, default: "" }
+	},
 	computed: {
 		localEditSongs: {
 			get() {
-				return this.$store.state.modals.importPlaylist
+				return this.$store.state.modals.importPlaylist[this.modalUuid]
 					.editImportedSongs;
 			},
 			set(editImportedSongs) {
 				this.$store.commit(
-					"modals/importPlaylist/updateEditImportedSongs",
+					`modals/importPlaylist/${this.modalUuid}/updateEditImportedSongs`,
 					editImportedSongs
 				);
 			}
 		},
 		...mapState({
-			loggedIn: state => state.user.auth.loggedIn,
-			station: state => state.station.station
+			loggedIn: state => state.user.auth.loggedIn
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -138,7 +140,7 @@ export default {
 						this.openModal("editSongs");
 					}
 
-					this.closeModal("importPlaylist");
+					this.closeCurrentModal();
 					return new Toast({
 						content: res.message,
 						timeout: 20000
@@ -147,7 +149,7 @@ export default {
 			);
 		},
 		...mapActions("modals/editSongs", ["editSongs"]),
-		...mapActions("modalVisibility", ["openModal", "closeModal"])
+		...mapActions("modalVisibility", ["openModal", "closeCurrentModal"])
 	}
 };
 </script>

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" />
-		<import-playlist v-if="modals.importPlaylist" />
 		<bulk-actions v-if="modals.bulkActions" :type="bulkActionsType" />
 		<confirm v-if="modals.confirm" @confirmed="handleConfirmed()" />
 	</div>
@@ -289,9 +288,6 @@ export default {
 		ImportAlbum: defineAsyncComponent(() =>
 			import("@/components/modals/ImportAlbum.vue")
 		),
-		ImportPlaylist: defineAsyncComponent(() =>
-			import("@/components/modals/ImportPlaylist.vue")
-		),
 		BulkActions: defineAsyncComponent(() =>
 			import("@/components/modals/BulkActions.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 importPlaylistModal from "./modules/modals/importPlaylist";
 import editPlaylistModal from "./modules/modals/editPlaylist";
 import viewPunishmentModal from "./modules/modals/viewPunishment";
 import viewReportModal from "./modules/modals/viewReport";
@@ -37,7 +36,7 @@ export default createStore({
 				editSong: editSongModal,
 				editSongs: editSongsModal,
 				importAlbum: importAlbumModal,
-				importPlaylist: importPlaylistModal,
+				importPlaylist: emptyModule,
 				editPlaylist: editPlaylistModal,
 				manageStation: emptyModule,
 				editUser: emptyModule,

frontend/src/store/modules/modalVisibility.js

@@ -6,10 +6,10 @@ import whatIsNew from "./modals/whatIsNew";
 import createStation from "./modals/createStation";
 import editNews from "./modals/editNews";
 import manageStation from "./modals/manageStation";
+import importPlaylist from "./modals/importPlaylist";
 
 const state = {
 	modals: {
-		importPlaylist: false,
 		editPlaylist: false,
 		createPlaylist: false,
 		report: false,
@@ -36,7 +36,8 @@ const modalModules = {
 	whatIsNew,
 	createStation,
 	editNews,
-	manageStation
+	manageStation,
+	importPlaylist
 };
 
 const migratedModules = {
@@ -45,7 +46,7 @@ const migratedModules = {
 	login: true,
 	register: true,
 	createStation: true,
-	importPlaylist: false,
+	importPlaylist: true,
 	editPlaylist: false,
 	createPlaylist: false,
 	report: false,
@@ -136,7 +137,7 @@ const mutations = {
 					["modals", modal, uuid],
 					modalModules[modal]
 				);
-				this.dispatch(`modals/${modal}/${uuid}/init`, data);
+				if (data) this.dispatch(`modals/${modal}/${uuid}/init`, data);
 			}
 
 			state.new.activeModals.push(uuid);