refactor: Migrated Report and View Report to new modal system

frontend/src/components/ActivityItem.vue

@@ -61,14 +61,14 @@ export default {
 			if (reportId) {
 				message = message.replace(
 					/<reportId>(.*)<\/reportId>/g,
-					`<a href='#' class='activity-item-link' @click='showReport("${reportId}")'>report</a>`
+					`<a href='#' class='activity-item-link' @click='openModal({ modal: "viewReport", data: { reportId: "${reportId}" } })'>report</a>`
 				);
 			}
 
 			if (playlistId) {
 				message = message.replace(
 					/<playlistId>(.*)<\/playlistId>/g,
-					`<a href='#' class='activity-item-link' @click='openModal({modal:'editPlaylist', data: {"${playlistId}"}})'>$1</a>`
+					`<a href='#' class='activity-item-link' @click='openModal({ modal: "editPlaylist", data: { playlistId: "${playlistId}" } })'>$1</a>`
 				);
 			}
 
@@ -82,8 +82,7 @@ export default {
 			return {
 				template: `<p>${message}</p>`,
 				methods: {
-					openModal: this.openModal,
-					showReport: this.showReport
+					openModal: this.openModal
 				}
 			};
 		},
@@ -174,14 +173,9 @@ export default {
 
 			return icons[this.activity.type];
 		},
-		showReport(reportId) {
-			this.viewReport(reportId);
-			this.openModal("viewReport");
-		},
 		formatDistance,
 		parseISO,
-		...mapActions("modalVisibility", ["openModal"]),
-		...mapActions("modals/viewReport", ["viewReport"])
+		...mapActions("modalVisibility", ["openModal"])
 	}
 };
 </script>

frontend/src/components/ModalManager.vue

@@ -26,7 +26,9 @@ export default {
 			manageStation: "ManageStation/index.vue",
 			importPlaylist: "ImportPlaylist.vue",
 			editPlaylist: "EditPlaylist/index.vue",
-			createPlaylist: "CreatePlaylist.vue"
+			createPlaylist: "CreatePlaylist.vue",
+			report: "Report.vue",
+			viewReport: "ViewReport.vue"
 		}),
 		...mapState("modalVisibility", {
 			activeModals: state => state.new.activeModals,

frontend/src/components/SongItem.vue

@@ -256,8 +256,7 @@ export default {
 		},
 		report(song) {
 			this.hideTippyElements();
-			this.reportSong(song);
-			this.openModal("report");
+			this.openModal({ modal: "report", data: { song } });
 		},
 		edit(song) {
 			this.hideTippyElements();
@@ -265,7 +264,6 @@ export default {
 			this.openModal("editSong");
 		},
 		...mapActions("modals/editSong", ["editSong"]),
-		...mapActions("modals/report", ["reportSong"]),
 		...mapActions("modalVisibility", ["openModal"]),
 		formatDistance,
 		parseISO

frontend/src/components/modals/CreatePlaylist.vue

@@ -54,14 +54,6 @@ export default {
 	computed: mapGetters({
 		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",
-			"createPlaylist",
-			this.modalUuid
-		]);
-	},
 	unmounted() {
 		if (window.addToPlaylistDropdown)
 			window.addToPlaylistDropdown.tippy.setProps({

frontend/src/components/modals/Report.vue

@@ -171,7 +171,14 @@
 											class="material-icons"
 											content="View Report"
 											v-tippy
-											@click="view(report._id)"
+											@click="
+												openModal({
+													modal: 'viewReport',
+													data: {
+														reportId: report._id
+													}
+												})
+											"
 										>
 											open_in_full
 										</i>
@@ -192,7 +199,6 @@
 				</a>
 			</template>
 		</modal>
-		<view-report v-if="modals.viewReport" />
 	</div>
 </template>
 
@@ -200,13 +206,16 @@
 import { mapState, mapGetters, mapActions } from "vuex";
 import Toast from "toasters";
 import ws from "@/ws";
+import { mapModalState } from "@/vuex_helpers";
 
-import ViewReport from "@/components/modals/ViewReport.vue";
 import SongItem from "@/components/SongItem.vue";
 import ReportInfoItem from "@/components/ReportInfoItem.vue";
 
 export default {
-	components: { ViewReport, SongItem, ReportInfoItem },
+	components: { SongItem, ReportInfoItem },
+	props: {
+		modalUuid: { type: String, default: "" }
+	},
 	data() {
 		return {
 			icons: {
@@ -339,8 +348,8 @@ export default {
 		};
 	},
 	computed: {
-		...mapState({
-			song: state => state.modals.report.song
+		...mapModalState("modals/report/MODAL_UUID", {
+			song: state => state.song
 		}),
 		...mapState("modalVisibility", {
 			modals: state => state.modals
@@ -362,6 +371,10 @@ export default {
 			{ modal: "report" }
 		);
 	},
+	beforeUnmount() {
+		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+		this.$store.unregisterModule(["modals", "report", this.modalUuid]);
+	},
 	methods: {
 		init() {
 			this.socket.dispatch(
@@ -380,10 +393,6 @@ export default {
 				}
 			);
 		},
-		view(reportId) {
-			this.viewReport(reportId);
-			this.openModal("viewReport");
-		},
 		create() {
 			const issues = [];
 
@@ -419,8 +428,7 @@ export default {
 				}
 			);
 		},
-		...mapActions("modalVisibility", ["openModal", "closeModal"]),
-		...mapActions("modals/viewReport", ["viewReport"])
+		...mapActions("modalVisibility", ["openModal", "closeModal"])
 	}
 };
 </script>

frontend/src/components/modals/ViewReport.vue

@@ -115,9 +115,10 @@
 </template>
 
 <script>
-import { mapActions, mapGetters, mapState } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 import ws from "@/ws";
+import { mapModalState } from "@/vuex_helpers";
 
 import SongItem from "@/components/SongItem.vue";
 import ReportInfoItem from "@/components/ReportInfoItem.vue";
@@ -125,7 +126,7 @@ import ReportInfoItem from "@/components/ReportInfoItem.vue";
 export default {
 	components: { SongItem, ReportInfoItem },
 	props: {
-		sector: { type: String, default: "admin" }
+		modalUuid: { type: String, default: "" }
 	},
 	data() {
 		return {
@@ -142,8 +143,8 @@ export default {
 		};
 	},
 	computed: {
-		...mapState("modals/viewReport", {
-			reportId: state => state.viewingReportId
+		...mapModalState("modals/viewReport/MODAL_UUID", {
+			reportId: state => state.reportId
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -182,6 +183,8 @@ export default {
 	},
 	beforeUnmount() {
 		this.socket.dispatch("apis.leaveRoom", `view-report.${this.reportId}`);
+		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+		this.$store.unregisterModule(["modals", "viewReport", this.modalUuid]);
 	},
 	methods: {
 		init() {

frontend/src/pages/Admin/Reports.vue

@@ -15,7 +15,12 @@
 					<div class="row-options">
 						<button
 							class="button is-primary icon-with-button material-icons"
-							@click="view(slotProps.item._id)"
+							@click="
+								openModal({
+									modal: 'viewReport',
+									data: { reportId: slotProps.item._id }
+								})
+							"
 							:disabled="slotProps.item.removed"
 							content="View Report"
 							v-tippy
@@ -102,7 +107,6 @@
 			</advanced-table>
 		</div>
 
-		<view-report v-if="modals.viewReport" sector="admin" />
 		<edit-song v-if="modals.editSong" song-type="songs" />
 		<report v-if="modals.report" />
 	</div>
@@ -118,9 +122,6 @@ import AdvancedTable from "@/components/AdvancedTable.vue";
 
 export default {
 	components: {
-		ViewReport: defineAsyncComponent(() =>
-			import("@/components/modals/ViewReport.vue")
-		),
 		Report: defineAsyncComponent(() =>
 			import("@/components/modals/Report.vue")
 		),
@@ -273,10 +274,6 @@ export default {
 		})
 	},
 	methods: {
-		view(reportId) {
-			this.viewReport(reportId);
-			this.openModal("viewReport");
-		},
 		resolve(reportId, value) {
 			return this.resolveReport({ reportId, value })
 				.then(res => {
@@ -294,8 +291,7 @@ export default {
 			return `${year}-${month}-${day} ${hour}:${minute}`;
 		},
 		...mapActions("modalVisibility", ["openModal", "closeModal"]),
-		...mapActions("admin/reports", ["resolveReport"]),
-		...mapActions("modals/viewReport", ["viewReport"])
+		...mapActions("admin/reports", ["resolveReport"])
 	}
 };
 </script>

frontend/src/pages/Profile/index.vue

@@ -1,6 +1,5 @@
 <template>
 	<div v-if="isUser">
-		<view-report v-if="modals.viewReport" />
 		<edit-song v-if="modals.editSong" song-type="songs" />
 		<report v-if="modals.report" />
 
@@ -125,9 +124,6 @@ export default {
 		Report: defineAsyncComponent(() =>
 			import("@/components/modals/Report.vue")
 		),
-		ViewReport: defineAsyncComponent(() =>
-			import("@/components/modals/ViewReport.vue")
-		),
 		EditSong: defineAsyncComponent(() =>
 			import("@/components/modals/EditSong")
 		)

frontend/src/store/index.js

@@ -13,8 +13,6 @@ import editSongModal from "./modules/modals/editSong";
 import editSongsModal from "./modules/modals/editSongs";
 import importAlbumModal from "./modules/modals/importAlbum";
 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 = {
@@ -37,15 +35,14 @@ export default createStore({
 				importAlbum: importAlbumModal,
 				importPlaylist: emptyModule,
 				editPlaylist: emptyModule,
-				createPlaylist: emptyModule,
 				manageStation: emptyModule,
 				editUser: emptyModule,
 				whatIsNew: emptyModule,
 				createStation: emptyModule,
 				editNews: emptyModule,
 				viewPunishment: viewPunishmentModal,
-				report: reportModal,
-				viewReport: viewReportModal,
+				report: emptyModule,
+				viewReport: emptyModule,
 				confirm: confirmModal
 			}
 		}

frontend/src/store/modules/modalVisibility.js

@@ -8,15 +8,15 @@ import editNews from "./modals/editNews";
 import manageStation from "./modals/manageStation";
 import importPlaylist from "./modals/importPlaylist";
 import editPlaylist from "./modals/editPlaylist";
+import report from "./modals/report";
+import viewReport from "./modals/viewReport";
 
 const state = {
 	modals: {
-		report: false,
 		removeAccount: false,
 		editSong: false,
 		editSongs: false,
 		importAlbum: false,
-		viewReport: false,
 		viewPunishment: false,
 		confirm: false,
 		editSongConfirm: false,
@@ -37,7 +37,9 @@ const modalModules = {
 	editNews,
 	manageStation,
 	importPlaylist,
-	editPlaylist
+	editPlaylist,
+	report,
+	viewReport
 };
 
 const migratedModules = {
@@ -49,14 +51,14 @@ const migratedModules = {
 	importPlaylist: true,
 	editPlaylist: true,
 	createPlaylist: true,
-	report: false,
+	report: true,
 	removeAccount: false,
 	editNews: true,
 	editSong: false,
 	editSongs: false,
 	editUser: true,
 	importAlbum: false,
-	viewReport: false,
+	viewReport: true,
 	viewPunishment: false,
 	confirm: false,
 	editSongConfirm: false,

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

@@ -6,10 +6,10 @@ export default {
 		song: {}
 	},
 	actions: {
-		reportSong: ({ commit }, song) => commit("reportSong", song)
+		init: ({ commit }, data) => commit("init", data)
 	},
 	mutations: {
-		reportSong(state, song) {
+		init(state, { song }) {
 			state.song = song;
 		}
 	}

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

@@ -3,14 +3,14 @@
 export default {
 	namespaced: true,
 	state: {
-		viewingReportId: ""
+		reportId: ""
 	},
 	actions: {
-		viewReport: ({ commit }, reportId) => commit("viewReport", reportId)
+		init: ({ commit }, data) => commit("init", data)
 	},
 	mutations: {
-		viewReport(state, reportId) {
-			state.viewingReportId = reportId;
+		init(state, { reportId }) {
+			state.reportId = reportId;
 		}
 	}
 };