Fixed issues with punishments and made view punishment modal independent

backend/logic/actions/punishments.js

@@ -58,6 +58,43 @@ export default {
 		);
 	}),
 
+	/**
+	 * Gets a punishment by id
+	 *
+	 * @param {object} session - the session object automatically added by socket.io
+	 * @param {string} punishmentId - the punishment id
+	 * @param {Function} cb - gets called with the result
+	 */
+	getPunishmentById: isAdminRequired(async function index(session, punishmentId, cb) {
+		const punishmentModel = await DBModule.runJob(
+			"GET_MODEL",
+			{
+				modelName: "punishment"
+			},
+			this
+		);
+		async.waterfall(
+			[
+				next => {
+					punishmentModel.findOne({ _id: punishmentId }, next);
+				}
+			],
+			async (err, punishment) => {
+				if (err) {
+					err = await UtilsModule.runJob("GET_ERROR", { error: err }, this);
+					this.log(
+						"ERROR",
+						"GET_PUNISHMENT_BY_ID",
+						`Getting punishment with id ${punishmentId} failed. "${err}"`
+					);
+					return cb({ status: "failure", message: err });
+				}
+				this.log("SUCCESS", "GET_PUNISHMENT_BY_ID", `Got punishment with id ${punishmentId} successful.`);
+				return cb({ status: "success", data: punishment });
+			}
+		);
+	}),
+
 	/**
 	 * Bans an IP address
 	 *

backend/logic/punishments.js

@@ -28,7 +28,7 @@ class _PunishmentsModule extends CoreClass {
 		UtilsModule = this.moduleManager.modules.utils;
 
 		this.punishmentModel = this.PunishmentModel = await DBModule.runJob("GET_MODEL", { modelName: "punishment" });
-		this.punishmentSchemaCache = await DBModule.runJob("GET_SCHEMA", { schemaName: "punishment" });
+		this.punishmentSchemaCache = await CacheModule.runJob("GET_SCHEMA", { schemaName: "punishment" });
 
 		return new Promise((resolve, reject) =>
 			async.waterfall(
@@ -120,16 +120,14 @@ class _PunishmentsModule extends CoreClass {
 							.catch(next);
 					},
 
-					(punishments, next) => {
-						let filteredPunishments = [];
-
-						Object.keys(punishments).forEach(punishmentKey => {
-							const punishment = punishments[punishmentKey];
+					(punishmentsObj, next) => {
+						const punishments = Object.keys(punishmentsObj).map(punishmentKey => {
+							const punishment = punishmentsObj[punishmentKey];
 							punishment.punishmentId = punishmentKey;
-							punishments.push(punishment);
+							return punishment;
 						});
 
-						filteredPunishments = punishments.filter(punishment => {
+						const filteredPunishments = punishments.filter(punishment => {
 							if (punishment.expiresAt < Date.now()) punishmentsToRemove.push(punishment);
 							return punishment.expiresAt > Date.now();
 						});
@@ -294,13 +292,8 @@ class _PunishmentsModule extends CoreClass {
 							},
 							this
 						)
-							.then(() => next())
+							.then(() => next(null, punishment))
 							.catch(next);
-					},
-
-					(punishment, next) => {
-						// DISCORD MESSAGE
-						next(null, punishment);
 					}
 				],
 				(err, punishment) => {

frontend/src/pages/Admin/ViewPunishment.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<modal title="View Punishment">
-			<div slot="body">
+			<div slot="body" v-if="punishment && punishment._id">
 				<article class="message">
 					<div class="message-body">
 						<strong>Type:</strong>
@@ -60,7 +60,7 @@
 					class="button is-danger"
 					@click="
 						closeModal({
-							sector: 'admin',
+							sector,
 							modal: 'viewPunishment'
 						})
 					"
@@ -76,30 +76,57 @@
 import { mapState, mapActions } from "vuex";
 import { format, formatDistance, parseISO } from "date-fns"; // eslint-disable-line no-unused-vars
 
+import Toast from "toasters";
 import io from "../../io";
 import Modal from "../../components/Modal.vue";
 import UserIdToUsername from "../../components/common/UserIdToUsername.vue";
 
 export default {
 	components: { Modal, UserIdToUsername },
+	props: {
+		punishmentId: { type: String, default: "" },
+		sector: { type: String, default: "admin" }
+	},
 	data() {
 		return {
 			ban: {}
 		};
 	},
 	computed: {
-		...mapState("admin/punishments", {
+		...mapState("viewPunishmentModal", {
 			punishment: state => state.punishment
 		})
 	},
 	mounted() {
 		io.getSocket(socket => {
 			this.socket = socket;
+
+			this.socket.emit(
+				`punishments.getPunishmentById`,
+				this.punishmentId,
+				res => {
+					if (res.status === "success") {
+						const punishment = res.data;
+						this.viewPunishment(punishment);
+					} else {
+						new Toast({
+							content: "Punishment with that ID not found",
+							timeout: 3000
+						});
+						this.closeModal({
+							sector: this.sector,
+							modal: "viewPunishment"
+						});
+					}
+				}
+			);
+
 			return socket;
 		});
 	},
 	methods: {
 		...mapActions("modals", ["closeModal"]),
+		...mapActions("viewPunishmentModal", ["viewPunishment"]),
 		format,
 		formatDistance,
 		parseISO

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

@@ -85,7 +85,11 @@
 				</footer>
 			</div>
 		</div>
-		<view-punishment v-if="modals.viewPunishment" />
+		<view-punishment
+			v-if="modals.viewPunishment"
+			:punishment-id="viewingPunishmentId"
+			sector="admin"
+		/>
 	</div>
 </template>
 
@@ -100,6 +104,7 @@ export default {
 	components: { ViewPunishment },
 	data() {
 		return {
+			viewingPunishmentId: "",
 			punishments: [],
 			ipBan: {
 				expiresAt: "1h"
@@ -127,7 +132,8 @@ export default {
 	},
 	methods: {
 		view(punishment) {
-			this.viewPunishment(punishment);
+			// this.viewPunishment(punishment);
+			this.viewingPunishmentId = punishment._id;
 			this.openModal({ sector: "admin", modal: "viewPunishment" });
 		},
 		banIP() {

frontend/src/pages/Station/components/Sidebar/Queue/QueueItem.vue

@@ -148,7 +148,7 @@ export default {
 	#duration-and-actions {
 		margin-left: 5px;
 	}
-	
+
 	#queue-item-buttons {
 		display: flex;
 		flex-direction: row;

frontend/src/store/index.js

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

frontend/src/store/modules/admin.js

@@ -94,22 +94,6 @@ const modules = {
 			}
 		}
 	},
-	punishments: {
-		namespaced: true,
-		state: {
-			punishment: {}
-		},
-		getters: {},
-		actions: {
-			viewPunishment: ({ commit }, punishment) =>
-				commit("viewPunishment", punishment)
-		},
-		mutations: {
-			viewPunishment(state, punishment) {
-				state.punishment = punishment;
-			}
-		}
-	},
 	users: {
 		namespaced: true,
 		state: {},

frontend/src/store/modules/viewPunishmentModal.js

@@ -0,0 +1,18 @@
+/* eslint no-param-reassign: 0 */
+
+export default {
+	namespaced: true,
+	state: {
+		punishment: {}
+	},
+	getters: {},
+	actions: {
+		viewPunishment: ({ commit }, punishment) =>
+			commit("viewPunishment", punishment)
+	},
+	mutations: {
+		viewPunishment(state, punishment) {
+			state.punishment = punishment;
+		}
+	}
+};