feat(ViewReport): song can be edited within same page instead of opening new tab

Signed-off-by: Jonathan <theflametrooper@gmail.com>

backend/logic/actions/reports.js

@@ -39,8 +39,6 @@ CacheModule.runJob("SUB", {
 			args: ["event:admin.report.resolved", { data: { reportId } }]
 		});
 
-		console.log(`view-report.${reportId}`);
-
 		WSModule.runJob("EMIT_TO_ROOM", {
 			room: `view-report.${reportId}`,
 			args: ["event:admin.report.resolved", { data: { reportId } }]

frontend/src/components/modals/EditSong/Tabs/Reports.vue

@@ -280,25 +280,34 @@ export default {
 		}
 	},
 	mounted() {
-		this.socket.on("event:admin.report.created", res =>
-			this.reports.unshift(res.data.report)
+		this.socket.on(
+			"event:admin.report.created",
+			res => this.reports.unshift(res.data.report),
+			{ modal: "editSong" }
 		);
 
-		this.socket.on("event:admin.report.resolved", res =>
-			this.resolveReport(res.data.reportId)
+		this.socket.on(
+			"event:admin.report.resolved",
+			res => this.resolveReport(res.data.reportId),
+			{ modal: "editSong" }
 		);
 
-		this.socket.on("event:admin.report.issue.toggled", res => {
-			this.reports.forEach((report, index) => {
-				if (report._id === res.data.reportId) {
-					const issue = this.reports[index].issues.find(
-						issue => issue._id.toString() === res.data.issueId
-					);
-
-					issue.resolved = !issue.resolved;
-				}
-			});
-		});
+		this.socket.on(
+			"event:admin.report.issue.toggled",
+			res => {
+				console.log("being toggled twice?");
+				this.reports.forEach((report, index) => {
+					if (report._id === res.data.reportId) {
+						const issue = this.reports[index].issues.find(
+							issue => issue._id.toString() === res.data.issueId
+						);
+
+						issue.resolved = !issue.resolved;
+					}
+				});
+			},
+			{ modal: "editSong" }
+		);
 	},
 	methods: {
 		showTab(tab) {

frontend/src/components/modals/ViewReport.vue

@@ -110,19 +110,15 @@
 			</div>
 		</template>
 		<template #footer v-if="report && report._id">
-			<a
-				class="button is-primary"
-				:href="`/admin/songs?songId=${report.song._id}`"
-				target="_blank"
-			>
+			<a class="button is-primary" @click="openSong()">
 				<i
 					class="material-icons icon-with-button"
-					content="Open Song in New Tab"
+					content="Edit Song"
 					v-tippy
 				>
-					open_in_new
+					edit
 				</i>
-				Open Song
+				Edit Song
 			</a>
 			<a class="button is-success" href="#" @click="resolve(report._id)">
 				<i
@@ -229,8 +225,13 @@ export default {
 				}
 			);
 		},
+		openSong() {
+			this.editSong({ _id: this.report.song._id });
+			this.openModal("editSong");
+		},
 		...mapActions("admin/reports", ["indexReports", "resolveReport"]),
-		...mapActions("modalVisibility", ["closeModal"])
+		...mapActions("modals/editSong", ["editSong"]),
+		...mapActions("modalVisibility", ["closeModal", "openModal"])
 	}
 };
 </script>

frontend/src/pages/Admin/tabs/Reports.vue

@@ -5,29 +5,14 @@
 			<table class="table is-striped">
 				<thead>
 					<tr>
-						<td>Song ID</td>
 						<td>Summary</td>
+						<td>YouTube / Song ID</td>
 						<td>Categories Included</td>
 						<td>Options</td>
 					</tr>
 				</thead>
 				<tbody>
 					<tr v-for="report in reports" :key="report._id">
-						<td>
-							<span>
-								<a
-									:href="
-										'https://www.youtube.com/watch?v=' +
-											`${report.song.youtubeId}`
-									"
-									target="_blank"
-								>
-									{{ report.song.youtubeId }}</a
-								>
-								<br />
-								{{ report.song._id }}
-							</span>
-						</td>
 						<td>
 							<div class="report-item-header">
 								<div class="report-item-info">
@@ -71,6 +56,22 @@
 								</div>
 							</div>
 						</td>
+						<td>
+							<span>
+								<a
+									:href="
+										'https://www.youtube.com/watch?v=' +
+											`${report.song.youtubeId}`
+									"
+									target="_blank"
+								>
+									{{ report.song.youtubeId }}</a
+								>
+								<br />
+								{{ report.song._id }}
+							</span>
+						</td>
+
 						<td id="categories-column">
 							<ul>
 								<li
@@ -119,6 +120,8 @@
 			:report-id="viewingReportId"
 			sector="admin"
 		/>
+
+		<edit-song v-if="modals.editSong" song-type="songs" />
 	</div>
 </template>
 
@@ -136,6 +139,9 @@ export default {
 		ViewReport: defineAsyncComponent(() =>
 			import("@/components/modals/ViewReport.vue")
 		),
+		EditSong: defineAsyncComponent(() =>
+			import("@/components/modals/EditSong/index.vue")
+		),
 		ProfilePicture
 	},
 	data() {