Made view report modal independent

frontend/src/pages/Admin/IssuesModal.vue → frontend/src/pages/Admin/ViewReport.vue

@@ -1,6 +1,6 @@
 <template>
-	<modal title="Report">
-		<div slot="body">
+	<modal title="View Report">
+		<div slot="body" v-if="report && report._id">
 			<router-link
 				v-if="$route.query.returnToSong"
 				class="button is-dark back-to-song"
@@ -61,7 +61,7 @@
 				</tbody>
 			</table>
 		</div>
-		<div slot="footer">
+		<div slot="footer" v-if="report && report._id">
 			<a class="button is-primary" href="#" @click="resolve(report._id)">
 				<span>Resolve</span>
 			</a>
@@ -76,7 +76,7 @@
 				class="button is-danger"
 				@click="
 					closeModal({
-						sector: 'admin',
+						sector,
 						modal: 'viewReport'
 					})
 				"
@@ -93,20 +93,48 @@ import { mapActions, mapState } from "vuex";
 import { formatDistance } from "date-fns";
 import Toast from "toasters";
 
+import io from "../../io";
+
 import UserIdToUsername from "../../components/common/UserIdToUsername.vue";
 import Modal from "../../components/Modal.vue";
 
 export default {
 	components: { Modal, UserIdToUsername },
+	props: {
+		reportId: { type: String, default: "" },
+		sector: { type: String, default: "admin" }
+	},
 	computed: {
-		...mapState("admin/reports", {
+		...mapState("viewReportModal", {
 			report: state => state.report
 		})
 	},
 	mounted() {
 		if (this.$route.query.returnToSong) {
-			this.closeModal({ sector: "admin", modal: "editSong" });
+			this.closeModal({ sector: this.sector, modal: "editSong" });
 		}
+
+		io.getSocket(socket => {
+			this.socket = socket;
+
+			this.socket.emit(`reports.findOne`, this.reportId, res => {
+				if (res.status === "success") {
+					const report = res.data;
+					this.viewReport(report);
+				} else {
+					new Toast({
+						content: "Report with that ID not found",
+						timeout: 3000
+					});
+					this.closeModal({
+						sector: this.sector,
+						modal: "viewReport"
+					});
+				}
+			});
+
+			return socket;
+		});
 	},
 	methods: {
 		formatDistance,
@@ -115,7 +143,7 @@ export default {
 				.then(res => {
 					if (res.status === "success")
 						this.closeModal({
-							sector: "admin",
+							sector: this.sector,
 							modal: "viewReport"
 						});
 				})
@@ -123,7 +151,7 @@ export default {
 					err => new Toast({ content: err.message, timeout: 5000 })
 				);
 		},
-		...mapActions("admin/reports", ["resolveReport"]),
+		...mapActions("viewReportModal", ["viewReport", "resolveReport"]),
 		...mapActions("modals", ["closeModal"])
 	}
 };

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

@@ -58,7 +58,11 @@
 			</table>
 		</div>
 
-		<issues-modal v-if="modals.viewReport" />
+		<view-report
+			v-if="modals.viewReport"
+			:report-id="viewingReportId"
+			sector="admin"
+		/>
 	</div>
 </template>
 
@@ -69,13 +73,14 @@ import { formatDistance } from "date-fns";
 import Toast from "toasters";
 import io from "../../../io";
 
-import IssuesModal from "../IssuesModal.vue";
+import ViewReport from "../ViewReport.vue";
 import UserIdToUsername from "../../../components/common/UserIdToUsername.vue";
 
 export default {
-	components: { IssuesModal, UserIdToUsername },
+	components: { ViewReport, UserIdToUsername },
 	data() {
 		return {
+			viewingReportId: "",
 			reports: []
 		};
 	},
@@ -125,7 +130,8 @@ export default {
 			this.socket.emit("apis.joinAdminRoom", "reports", () => {});
 		},
 		view(report) {
-			this.viewReport(report);
+			// this.viewReport(report);
+			this.viewingReportId = report._id;
 			this.openModal({ sector: "admin", modal: "viewReport" });
 		},
 		resolve(reportId) {
@@ -142,7 +148,7 @@ export default {
 				);
 		},
 		...mapActions("modals", ["openModal", "closeModal"]),
-		...mapActions("admin/reports", ["viewReport", "resolveReport"])
+		...mapActions("admin/reports", ["resolveReport"])
 	}
 };
 </script>

frontend/src/store/index.js

@@ -11,6 +11,7 @@ import editStationModal from "./modules/editStationModal";
 import editUserModal from "./modules/editUserModal";
 import editNewsModal from "./modules/editNewsModal";
 import viewPunishmentModal from "./modules/viewPunishmentModal";
+import viewReportModal from "./modules/viewReportModal";
 
 Vue.use(Vuex);
 
@@ -25,7 +26,8 @@ export default new Vuex.Store({
 		editStationModal,
 		editUserModal,
 		editNewsModal,
-		viewPunishmentModal
+		viewPunishmentModal,
+		viewReportModal
 	},
 	strict: false
 });

frontend/src/store/modules/admin.js

@@ -68,12 +68,9 @@ const modules = {
 	},
 	reports: {
 		namespaced: true,
-		state: {
-			report: {}
-		},
+		state: {},
 		getters: {},
 		actions: {
-			viewReport: ({ commit }, report) => commit("viewReport", report),
 			/* eslint-disable-next-line no-unused-vars */
 			resolveReport: ({ commit }, reportId) => {
 				return new Promise((resolve, reject) => {
@@ -88,11 +85,7 @@ const modules = {
 				});
 			}
 		},
-		mutations: {
-			viewReport(state, report) {
-				state.report = report;
-			}
-		}
+		mutations: {}
 	},
 	users: {
 		namespaced: true,

frontend/src/store/modules/viewReportModal.js

@@ -0,0 +1,32 @@
+/* eslint no-param-reassign: 0 */
+
+import admin from "../../api/admin/index";
+
+export default {
+	namespaced: true,
+	state: {
+		report: {}
+	},
+	getters: {},
+	actions: {
+		viewReport: ({ commit }, report) => commit("viewReport", report),
+		/* eslint-disable-next-line no-unused-vars */
+		resolveReport: ({ commit }, reportId) => {
+			return new Promise((resolve, reject) => {
+				return admin.reports
+					.resolve(reportId)
+					.then(res => {
+						return resolve(res);
+					})
+					.catch(err => {
+						return reject(new Error(err.message));
+					});
+			});
+		}
+	},
+	mutations: {
+		viewReport(state, report) {
+			state.report = report;
+		}
+	}
+};