feat(Playlists/Admin Page): added option to view playlists as admin

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

backend/logic/actions/playlists.js

@@ -477,8 +477,17 @@ export default {
 
 				(playlist, next) => {
 					if (!playlist) return next("Playlist not found");
-					if (playlist.privacy !== "public" && playlist.createdBy !== session.userId)
+					if (playlist.privacy !== "public" && playlist.createdBy !== session.userId) {
+						if (session)
+							// check if user requested to get a playlist is an admin
+							return DBModule.runJob("GET_MODEL", { modelName: "user" }, this).then(userModel => {
+								userModel.findOne({ _id: session.userId }, (err, user) => {
+									if (user && user.role === "admin") return next(null, playlist);
+									return next("User unauthorised to view playlist.");
+								});
+							});
 						return next("User unauthorised to view playlist.");
+					}
 
 					return next(null, playlist);
 				}

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

@@ -426,9 +426,12 @@ export default {
 			if (res.status === "success") {
 				this.playlist = res.data;
 				this.playlist.songs.sort((a, b) => a.position - b.position);
-			}
-
-			this.playlist.oldId = res.data._id;
+				this.playlist.oldId = res.data._id;
+			} else
+				new Toast({
+					content: res.message,
+					timeout: 4000
+				});
 		});
 
 		this.socket.on("event:playlist.addSong", data => {
@@ -485,7 +488,7 @@ export default {
 	methods: {
 		editSongInPlaylist(song) {
 			this.$parent.editingSongId = song._id;
-			this.openModal({ sector: "station", modal: "editSong" });
+			this.openModal({ sector: "admin", modal: "editSong" });
 		},
 		reportSongInPlaylist(song) {
 			this.reportSong(song);

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

@@ -22,7 +22,7 @@
 						<td>Created at</td>
 						<td>Created for</td>
 						<td>Playlist id</td>
-						<!-- <td>Options</td> -->
+						<td>Options</td>
 					</tr>
 				</thead>
 				<tbody>
@@ -44,23 +44,26 @@
 						</td>
 						<td>{{ playlist.createdFor }}</td>
 						<td>{{ playlist._id }}</td>
-						<!-- <td>
+						<td>
 							<button
 								class="button is-primary"
-								@click="edit(playlist)"
+								@click="edit(playlist._id)"
 							>
-								Edit
+								View
 							</button>
-						</td> -->
+						</td>
 					</tr>
 				</tbody>
 			</table>
 		</div>
-		<!-- <edit-playlist
-			v-if="modals.editPlaylist"
-			:user-id="editingPlaylistId"
-			sector="admin"
-		/> -->
+
+		<edit-playlist v-if="modals.admin.editPlaylist" sector="admin" />
+		<report v-if="modals.station.report" />
+		<edit-song
+			v-if="modals.admin.editSong"
+			:song-id="editingSongId"
+			song-type="songs"
+		/>
 	</div>
 </template>
 
@@ -69,24 +72,29 @@ import { mapState, mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 
-// import EditPlaylist from "../../../components/modals/EditPlaylist/index.vue";
+import EditPlaylist from "../../../components/modals/EditPlaylist/index.vue";
 import UserIdToUsername from "../../../components/common/UserIdToUsername.vue";
 
 import ws from "../../../ws";
 import utils from "../../../../js/utils";
 
 export default {
-	components: { /* EditPlaylist, */ UserIdToUsername },
+	components: {
+		EditPlaylist,
+		UserIdToUsername,
+		Report: () => import("../../../components/modals/Report.vue"),
+		EditSong: () => import("../../../components/modals/EditSong.vue")
+	},
 	data() {
 		return {
 			utils,
-			// editingPlaylistId: "",
-			playlists: []
+			playlists: [],
+			editingSongId: ""
 		};
 	},
 	computed: {
 		...mapState("modalVisibility", {
-			modals: state => state.modals.admin
+			modals: state => state.modals
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -97,13 +105,12 @@ export default {
 		ws.onConnect(() => this.init());
 	},
 	methods: {
-		// edit(playlist) {
-		// 	this.editingPlaylistId = playlist._id;
-		// 	this.openModal({ sector: "admin", modal: "editPlaylist" });
-		// },
+		edit(playlistId) {
+			this.editPlaylist(playlistId);
+			this.openModal({ sector: "admin", modal: "editPlaylist" });
+		},
 		init() {
 			this.socket.dispatch("playlists.index", res => {
-				console.log(res);
 				if (res.status === "success") {
 					this.playlists = res.data;
 					// if (this.$route.query.userId) {
@@ -150,7 +157,8 @@ export default {
 				}
 			);
 		},
-		...mapActions("modalVisibility", ["openModal"])
+		...mapActions("modalVisibility", ["openModal"]),
+		...mapActions("user/playlists", ["editPlaylist"])
 	}
 };
 </script>

frontend/src/pages/Profile/index.vue

@@ -1,6 +1,12 @@
 <template>
 	<div v-if="isUser">
-		<edit-playlist v-if="modals.editPlaylist" />
+		<edit-playlist v-if="modals.station.editPlaylist" />
+		<report v-if="modals.station.report" />
+		<edit-song
+			v-if="modals.admin.editSong"
+			:song-id="editingSongId"
+			song-type="songs"
+		/>
 
 		<metadata :title="`Profile | ${user.username}`" />
 		<main-header />
@@ -104,7 +110,9 @@ export default {
 		RecentActivity,
 		Playlists,
 		EditPlaylist: () =>
-			import("../../components/modals/EditPlaylist/index.vue")
+			import("../../components/modals/EditPlaylist/index.vue"),
+		Report: () => import("../../components/modals/Report.vue"),
+		EditSong: () => import("../../components/modals/EditSong.vue")
 	},
 	mixins: [TabQueryHandler],
 	data() {
@@ -112,7 +120,8 @@ export default {
 			user: {},
 			userId: "",
 			isUser: false,
-			tab: "recent-activity"
+			tab: "recent-activity",
+			editingSongId: ""
 		};
 	},
 	computed: {
@@ -120,7 +129,7 @@ export default {
 			role: state => state.user.auth.role,
 			myUserId: state => state.user.auth.userId,
 			...mapState("modalVisibility", {
-				modals: state => state.modals.station
+				modals: state => state.modals
 			})
 		}),
 		...mapGetters({

frontend/src/pages/Station/index.vue

@@ -435,22 +435,22 @@
 					</div>
 				</div>
 
-				<song-queue v-if="modals.addSongToQueue" />
-				<edit-playlist v-if="modals.editPlaylist" />
-				<create-playlist v-if="modals.createPlaylist" />
+				<song-queue v-if="modals.station.addSongToQueue" />
+				<edit-playlist v-if="modals.station.editPlaylist" />
+				<create-playlist v-if="modals.station.createPlaylist" />
 				<edit-station
-					v-if="modals.editStation"
+					v-if="modals.station.editStation"
 					:station-id="station._id"
 					sector="station"
 				/>
-				<report v-if="modals.report" />
+				<report v-if="modals.station.report" />
 			</div>
 
 			<main-footer v-if="exists" />
 		</div>
 
 		<edit-song
-			v-if="modals.editSong"
+			v-if="modals.admin.editSong"
 			:song-id="editingSongId"
 			song-type="songs"
 			sector="station"
@@ -574,7 +574,7 @@ export default {
 	},
 	computed: {
 		...mapState("modalVisibility", {
-			modals: state => state.modals.station
+			modals: state => state.modals
 		}),
 		...mapState("station", {
 			station: state => state.station,