feat(ViewReport): improved layout of modal, added associated SongItem

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

backend/logic/actions/songs.js

@@ -343,38 +343,6 @@ export default {
 		);
 	}),
 
-	/**
-	 * Gets a song from the YouTube song id
-	 *
-	 * @param {object} session - the session object automatically added by the websocket
-	 * @param {string} youtubeId - the YouTube song id
-	 * @param {Function} cb
-	 */
-	getSong: isAdminRequired(function getSong(session, youtubeId, cb) {
-		async.waterfall(
-			[
-				next => {
-					SongsModule.runJob("GET_SONG_FROM_YOUTUBE_ID", { youtubeId }, this)
-						.then(song => {
-							next(null, song);
-						})
-						.catch(err => {
-							next(err);
-						});
-				}
-			],
-			async (err, song) => {
-				if (err) {
-					err = await UtilsModule.runJob("GET_ERROR", { error: err }, this);
-					this.log("ERROR", "SONGS_GET_SONG", `Failed to get song ${youtubeId}. "${err}"`);
-					return cb({ status: "error", message: err });
-				}
-				this.log("SUCCESS", "SONGS_GET_SONG", `Got song ${youtubeId} successfully.`);
-				return cb({ status: "success", data: { song } });
-			}
-		);
-	}),
-
 	/**
 	 * Gets a song from the Musare song id
 	 *
@@ -403,62 +371,6 @@ export default {
 		);
 	}),
 
-	/**
-	 * Obtains basic metadata of a song in order to format an activity
-	 *
-	 * @param {object} session - the session object automatically added by the websocket
-	 * @param {string} youtubeId - the youtube song id
-	 * @param {Function} cb - callback
-	 */
-	getSongForActivity(session, youtubeId, cb) {
-		async.waterfall(
-			[
-				next => {
-					SongsModule.runJob("GET_SONG_FROM_YOUTUBE_ID", { youtubeId }, this)
-						.then(response => next(null, response.song))
-						.catch(next);
-				}
-			],
-			async (err, song) => {
-				if (err) {
-					err = await UtilsModule.runJob("GET_ERROR", { error: err }, this);
-
-					this.log(
-						"ERROR",
-						"SONGS_GET_SONG_FOR_ACTIVITY",
-						`Failed to obtain metadata of song ${youtubeId} for activity formatting. "${err}"`
-					);
-
-					return cb({ status: "error", message: err });
-				}
-
-				if (song) {
-					this.log(
-						"SUCCESS",
-						"SONGS_GET_SONG_FOR_ACTIVITY",
-						`Obtained metadata of song ${youtubeId} for activity formatting successfully.`
-					);
-
-					return cb({
-						status: "success",
-						data: {
-							title: song.title,
-							thumbnail: song.thumbnail
-						}
-					});
-				}
-
-				this.log(
-					"ERROR",
-					"SONGS_GET_SONG_FOR_ACTIVITY",
-					`Song ${youtubeId} does not exist so failed to obtain for activity formatting.`
-				);
-
-				return cb({ status: "error" });
-			}
-		);
-	},
-
 	/**
 	 * Updates a song
 	 *

frontend/src/App.vue

@@ -542,10 +542,6 @@ a {
 		width: 146px;
 	}
 
-	.addToPlaylistDropdown .tippy-popper {
-		max-width: unset;
-	}
-
 	i,
 	a {
 		display: inline-block;

frontend/src/components/AddToPlaylistDropdown.vue

@@ -177,5 +177,9 @@ export default {
 
 #create-playlist {
 	margin-top: 10px;
+
+	i {
+		color: #fff;
+	}
 }
 </style>

frontend/src/components/ReportInfoItem.vue

@@ -10,7 +10,7 @@
 		</div>
 
 		<div class="item-title-description">
-			<p class="item-title">
+			<h2 class="item-title">
 				Reported by
 				<router-link
 					v-if="createdBy.username"
@@ -22,14 +22,14 @@
 					{{ createdBy.username }}
 				</router-link>
 				<span v-else :title="createdBy._id">Deleted User</span>
-			</p>
-			<p class="item-description">
+			</h2>
+			<h5 class="item-description">
 				{{
 					formatDistance(new Date(createdAt), new Date(), {
 						addSuffix: true
 					})
 				}}
-			</p>
+			</h5>
 		</div>
 
 		<div class="universal-item-actions">
@@ -55,6 +55,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.night-mode {
+	.report-info-item {
+		background-color: var(--dark-grey-2) !important;
+		border: 0 !important;
+	}
+}
+
 .report-info-item {
 	.item-icon {
 		min-width: 45px;
@@ -78,10 +85,13 @@ export default {
 
 	.item-title {
 		font-size: 14px;
+		margin: 0;
 	}
 
 	.item-description {
 		font-size: 12px;
+		text-transform: capitalize;
+		margin: 0;
 	}
 }
 </style>

frontend/src/components/modals/ViewReport.vue

@@ -2,10 +2,19 @@
 	<modal class="view-report-modal" title="View Report">
 		<template #body v-if="report && report._id">
 			<div class="report-item">
-				<report-info-item
-					:created-at="report.createdAt"
-					:created-by="report.createdBy"
-				/>
+				<div id="song-and-report-item">
+					<report-info-item
+						:created-at="report.createdAt"
+						:created-by="report.createdBy"
+					/>
+
+					<song-item
+						:song="song"
+						:duration="false"
+						:disabled-actions="['report']"
+					/>
+				</div>
+
 				<div class="report-sub-items">
 					<div
 						class="report-sub-item report-sub-item-unresolved"
@@ -93,10 +102,11 @@ import { mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 
 import Modal from "@/components/Modal.vue";
+import SongItem from "@/components/SongItem.vue";
 import ReportInfoItem from "@/components/ReportInfoItem.vue";
 
 export default {
-	components: { Modal, ReportInfoItem },
+	components: { Modal, SongItem, ReportInfoItem },
 	props: {
 		reportId: { type: String, default: "" },
 		sector: { type: String, default: "admin" }
@@ -111,7 +121,8 @@ export default {
 				title: "title",
 				custom: "lightbulb"
 			},
-			report: {}
+			report: {},
+			song: null
 		};
 	},
 	computed: {
@@ -130,6 +141,23 @@ export default {
 				);
 
 				this.report = report;
+
+				this.socket.dispatch(
+					"songs.getSongFromSongId",
+					this.report.song._id,
+					res => {
+						console.log("res", res);
+						if (res.status === "success") this.song = res.data.song;
+						else {
+							new Toast(
+								"Cannot find the report's associated song"
+							);
+							this.closeModal("viewReport");
+						}
+
+						console.log(this.song);
+					}
+				);
 			} else {
 				new Toast("Report with that ID not found");
 				this.closeModal("viewReport");
@@ -188,36 +216,49 @@ export default {
 };
 </script>
 
-<style lang="scss">
-.view-report-modal .modal-card {
-	width: auto;
-
-	.modal-card-body {
-		display: flex;
-		justify-content: center;
-	}
-}
-</style>
-
 <style lang="scss" scoped>
 .night-mode {
-	.report-item {
+	.report-sub-items {
 		background-color: var(--dark-grey-2) !important;
-	}
 
-	.report-item-header {
-		background-color: var(--dark-grey-3) !important;
+		.report-sub-item {
+			border: 0.5px solid #fff !important;
+		}
 	}
 }
 
 .report-item {
-	background-color: var(--white);
-	border: 0.5px solid var(--primary-color);
-	border-radius: 5px;
-	padding: 8px;
+	#song-and-report-item {
+		display: flex;
+		margin-bottom: 20px;
+
+		.universal-item {
+			width: 50%;
+		}
+
+		.song-item {
+			margin-left: 5px;
+		}
 
-	&:not(:first-of-type) {
-		margin-bottom: 16px;
+		.report-info-item {
+			margin-right: 5px;
+		}
+	}
+
+	/deep/ .report-info-item {
+		justify-content: flex-start;
+
+		.item-title-description {
+			.item-title {
+				font-size: 20px;
+				font-family: Karla, Arial, sans-serif;
+			}
+
+			.item-description {
+				font-size: 14px;
+				font-family: Karla, Arial, sans-serif;
+			}
+		}
 	}
 
 	.report-sub-items {

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

@@ -206,10 +206,6 @@ export default {
 			color: var(--light-grey-2);
 		}
 	}
-
-	.report-item-header {
-		background-color: var(--dark-grey-4) !important;
-	}
 }
 
 #options-column {