feat(report modal): user can go return to editsong modal

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

backend/logic/actions/songs.js

@@ -111,6 +111,32 @@ module.exports = {
 		});
 	}),
 
+	/**
+	 * Gets a song
+	 *
+	 * @param session
+	 * @param songId - the song id
+	 * @param cb
+	 */
+	getSong: hooks.adminRequired((session, songId, cb) => {
+		console.log(songId);
+
+		async.waterfall([
+			(next) => {
+				db.models.song.findOne({ songId }).exec(next);
+			}
+		], (err, song) => {
+			if (err) {
+				err = utils.getError(err);
+				logger.error("SONGS_GET_SONG", `Failed to get song ${songId}. "${err}"`);
+				return cb({ status: 'failure', message: err });
+			} else {
+				logger.success("SONGS_GET_SONG", `Got song ${songId} successfully.`);
+				cb({ status: "success", data: song });
+			}
+		});
+	}),
+
 	/**
 	 * Updates a song
 	 *

frontend/components/Admin/Reports.vue

@@ -32,8 +32,8 @@
 							<a
 								class="button is-warning"
 								href="#"
-								@click="toggleModal(report)"
-								>Issues Modal</a
+								@click="view(report)"
+								>View</a
 							>
 							<a
 								class="button is-primary"
@@ -47,11 +47,13 @@
 			</table>
 		</div>
 
-		<issues-modal v-if="modals.report" />
+		<issues-modal v-if="modals.viewReport" />
 	</div>
 </template>
 
 <script>
+import { mapState, mapActions } from "vuex";
+
 import { Toast } from "vue-roaster";
 import io from "../../io";
 
@@ -62,10 +64,7 @@ export default {
 	components: { IssuesModal, UserIdToUsername },
 	data() {
 		return {
-			reports: [],
-			modals: {
-				report: false
-			}
+			reports: []
 		};
 	},
 	mounted: function() {
@@ -88,9 +87,10 @@ export default {
 				_this.init();
 			});
 		});
+
 		if (this.$route.query.id) {
 			this.socket.emit("reports.findOne", this.$route.query.id, res => {
-				if (res.status === "success") _this.toggleModal(res.data);
+				if (res.status === "success") _this.view(res.data);
 				else
 					Toast.methods.addToast(
 						"Report with that ID not found",
@@ -99,22 +99,32 @@ export default {
 			});
 		}
 	},
+	computed: {
+		...mapState("modals", {
+			modals: state => state.modals.admin
+		})
+	},
 	methods: {
 		init: function() {
 			this.socket.emit("apis.joinAdminRoom", "reports", () => {});
 		},
-		toggleModal: function(report) {
-			this.modals.report = !this.modals.report;
-			if (this.modals.report) this.editing = report;
+		view: function(report) {
+			this.viewReport(report);
+			this.openModal({ sector: "admin", modal: "viewReport" });
 		},
 		resolve: function(reportId) {
 			let _this = this;
 			this.socket.emit("reports.resolve", reportId, res => {
 				Toast.methods.addToast(res.message, 3000);
-				if (res.status === "success" && this.modals.report)
-					_this.toggleModal();
+				if (res.status === "success" && this.modals.viewReport)
+					_this.closeModal({
+						sector: "admin",
+						modal: "viewReport"
+					});
 			});
-		}
+		},
+		...mapActions("modals", ["openModal", "closeModal"]),
+		...mapActions("admin/reports", ["viewReport"])
 	}
 };
 </script>

frontend/components/Admin/Songs.vue

@@ -45,7 +45,7 @@
 						<td>
 							<button
 								class="button is-primary"
-								@click="edit(song, index)"
+								@click="edit(song)"
 							>
 								Edit
 							</button>
@@ -103,9 +103,9 @@ export default {
 		}
 	},
 	methods: {
-		edit: function(song, index) {
-			this.editSong({ song, index, type: "songs" });
-			this.toggleModal({ sector: "admin", modal: "editSong" });
+		edit: function(song) {
+			this.editSong({ song, type: "songs" });
+			this.openModal({ sector: "admin", modal: "editSong" });
 		},
 		remove: function(id) {
 			this.socket.emit("songs.remove", id, res => {
@@ -134,7 +134,7 @@ export default {
 			_this.socket.emit("apis.joinAdminRoom", "songs", () => {});
 		},
 		...mapActions("admin/songs", ["stopVideo", "editSong"]),
-		...mapActions("modals", ["toggleModal"])
+		...mapActions("modals", ["openModal", "closeModal"])
 	},
 	mounted: function() {
 		let _this = this;
@@ -163,6 +163,16 @@ export default {
 				_this.init();
 			});
 		});
+
+		if (this.$route.query.id) {
+			this.socket.emit("songs.getSong", this.$route.query.id, res => {
+				if (res.status === "success") {
+					this.edit(res.data);
+					this.closeModal({ sector: "admin", modal: "viewReport" });
+				} else
+					Toast.methods.addToast("Song with that ID not found", 3000);
+			});
+		}
 	}
 };
 </script>

frontend/components/Modals/EditSong.vue

@@ -200,7 +200,7 @@
 							<router-link
 								:to="{
 									path: '/admin/reports',
-									query: { id: report }
+									query: { id: report, returnToSong: true }
 								}"
 								class="report-link"
 							>

frontend/components/Modals/IssuesModal.vue

@@ -1,27 +1,35 @@
 <template>
 	<modal title="Report">
 		<div slot="body">
+			<router-link
+				v-if="$route.query.returnToSong"
+				class="button is-dark back-to-song"
+				:to="{
+					path: '/admin/songs',
+					query: { id: report.songId }
+				}"
+			>
+				<i class="material-icons">keyboard_return</i> &nbsp; Edit Song
+			</router-link>
+
 			<article class="message">
 				<div class="message-body">
 					<strong>Song ID:</strong>
-					{{ $parent.editing.songId }}
+					{{ report.songId }}
 					<br />
 					<strong>Created By:</strong>
-					{{ $parent.editing.createdBy }}
+					{{ report.createdBy }}
 					<br />
 					<strong>Created At:</strong>
-					{{ $parent.editing.createdAt }}
+					{{ report.createdAt }}
 					<br />
-					<span v-if="$parent.editing.description">
+					<span v-if="report.description">
 						<strong>Description:</strong>
-						{{ $parent.editing.description }}
+						{{ report.description }}
 					</span>
 				</div>
 			</article>
-			<table
-				v-if="$parent.editing.issues.length > 0"
-				class="table is-narrow"
-			>
+			<table v-if="report.issues.length > 0" class="table is-narrow">
 				<thead>
 					<tr>
 						<td>Issue</td>
@@ -29,10 +37,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<tr
-						v-for="(issue, index) in $parent.editing.issues"
-						:key="index"
-					>
+					<tr v-for="(issue, index) in report.issues" :key="index">
 						<td>
 							<span>{{ issue.name }}</span>
 						</td>
@@ -47,11 +52,20 @@
 			<a
 				class="button is-primary"
 				href="#"
-				@click="$parent.resolve($parent.editing._id)"
+				@click="$parent.resolve(report._id)"
 			>
 				<span>Resolve</span>
 			</a>
-			<a class="button is-danger" @click="$parent.toggleModal()" href="#">
+			<a
+				class="button is-danger"
+				@click="
+					closeModal({
+						sector: 'admin',
+						modal: 'viewReport'
+					})
+				"
+				href="#"
+			>
 				<span>Cancel</span>
 			</a>
 		</div>
@@ -59,14 +73,31 @@
 </template>
 
 <script>
+import { mapActions, mapState } from "vuex";
+
 import Modal from "./Modal.vue";
 
 export default {
-	components: { Modal },
-	events: {
-		closeModal: function() {
-			this.$parent.modals.report = false;
+	computed: {
+		...mapState("admin/reports", {
+			report: state => state.report
+		})
+	},
+	mounted: function() {
+		if (this.$route.query.returnToSong) {
+			this.closeModal({ sector: "admin", modal: "editSong" });
 		}
-	}
+	},
+	methods: {
+		...mapActions("modals", ["toggleModal", "closeModal"])
+	},
+	components: { Modal }
 };
 </script>
+
+<style lang="scss">
+.back-to-song {
+	display: flex;
+	margin-bottom: 20px;
+}
+</style>

frontend/store/modules/admin.js

@@ -76,6 +76,21 @@ const modules = {
 			}
 		}
 	},
+	reports: {
+		namespaced: true,
+		state: {
+			report: {}
+		},
+		getters: {},
+		actions: {
+			viewReport: ({ commit }, report) => commit("viewReport", report)
+		},
+		mutations: {
+			viewReport(state, report) {
+				state.report = report;
+			}
+		}
+	},
 	punishments: {
 		namespaced: true,
 		state: {

frontend/store/modules/modals.js

@@ -19,6 +19,7 @@ const state = {
 			editNews: false,
 			editUser: false,
 			editSong: false,
+			viewReport: false,
 			viewPunishment: false
 		}
 	},
@@ -28,6 +29,12 @@ const state = {
 const getters = {};
 
 const actions = {
+	closeModal: ({ commit }, data) => {
+		commit("closeModal", data);
+	},
+	openModal: ({ commit }, data) => {
+		commit("openModal", data);
+	},
 	toggleModal: ({ commit }, data) => {
 		commit("toggleModal", data);
 	},
@@ -37,6 +44,15 @@ const actions = {
 };
 
 const mutations = {
+	closeModal(state, data) {
+		const { sector, modal } = data;
+		state.modals[sector][modal] = false;
+	},
+	openModal(state, data) {
+		const { sector, modal } = data;
+		state.modals[sector][modal] = true;
+		state.currentlyActive = { sector, modal };
+	},
 	toggleModal(state, data) {
 		const { sector, modal } = data;
 		state.modals[sector][modal] = !state.modals[sector][modal];