refactor(ViewPunishment): Migrated to new modal system

frontend/src/components/ModalManager.vue

@@ -29,7 +29,8 @@ export default {
 			createPlaylist: "CreatePlaylist.vue",
 			report: "Report.vue",
 			viewReport: "ViewReport.vue",
-			bulkActions: "BulkActions.vue"
+			bulkActions: "BulkActions.vue",
+			viewPunishment: "ViewPunishment.vue"
 		}),
 		...mapState("modalVisibility", {
 			activeModals: state => state.new.activeModals,

frontend/src/components/modals/ViewPunishment.vue

@@ -9,19 +9,19 @@
 </template>
 
 <script>
-import { mapState, mapGetters, mapActions } from "vuex";
+import { mapGetters, mapActions } from "vuex";
 import { format, formatDistance, parseISO } from "date-fns";
 
 import Toast from "toasters";
 import ws from "@/ws";
+import { mapModalState, mapModalActions } from "@/vuex_helpers";
 
 import PunishmentItem from "../PunishmentItem.vue";
 
 export default {
 	components: { PunishmentItem },
 	props: {
-		punishmentId: { type: String, default: "" },
-		sector: { type: String, default: "admin" }
+		modalUuid: { type: String, default: "" }
 	},
 	data() {
 		return {
@@ -29,7 +29,8 @@ export default {
 		};
 	},
 	computed: {
-		...mapState("modals/viewPunishment", {
+		...mapModalState("modals/viewPunishment/MODAL_UUID", {
+			punishmentId: state => state.punishmentId,
 			punishment: state => state.punishment
 		}),
 		...mapGetters({
@@ -39,6 +40,14 @@ export default {
 	mounted() {
 		ws.onConnect(this.init);
 	},
+	beforeUnmount() {
+		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+		this.$store.unregisterModule([
+			"modals",
+			"viewPunishment",
+			this.modalUuid
+		]);
+	},
 	methods: {
 		init() {
 			this.socket.dispatch(
@@ -56,7 +65,9 @@ export default {
 			);
 		},
 		...mapActions("modalVisibility", ["closeModal"]),
-		...mapActions("modals/viewPunishment", ["viewPunishment"]),
+		...mapModalActions("modals/viewPunishment/MODAL_UUID", [
+			"viewPunishment"
+		]),
 		format,
 		formatDistance,
 		parseISO

frontend/src/pages/Admin/Punishments.vue

@@ -14,7 +14,12 @@
 					<div class="row-options">
 						<button
 							class="button is-primary icon-with-button material-icons"
-							@click="view(slotProps.item._id)"
+							@click="
+								openModal({
+									modal: 'viewPunishment',
+									data: { punishmentId: slotProps.item._id }
+								})
+							"
 							:disabled="slotProps.item.removed"
 							content="View Punishment"
 							v-tippy
@@ -115,31 +120,21 @@
 				</div>
 			</div>
 		</div>
-		<view-punishment
-			v-if="modals.viewPunishment"
-			:punishment-id="viewingPunishmentId"
-			sector="admin"
-		/>
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters, mapActions } from "vuex";
 import Toast from "toasters";
-import { defineAsyncComponent } from "vue";
 
 import AdvancedTable from "@/components/AdvancedTable.vue";
 
 export default {
 	components: {
-		ViewPunishment: defineAsyncComponent(() =>
-			import("@/components/modals/ViewPunishment.vue")
-		),
 		AdvancedTable
 	},
 	data() {
 		return {
-			viewingPunishmentId: "",
 			ipBan: {
 				expiresAt: "1h"
 			},
@@ -284,10 +279,6 @@ export default {
 		})
 	},
 	methods: {
-		view(punishmentId) {
-			this.viewingPunishmentId = punishmentId;
-			this.openModal("viewPunishment");
-		},
 		banIP() {
 			this.socket.dispatch(
 				"punishments.banIP",
@@ -308,8 +299,7 @@ export default {
 			const minute = `${date.getMinutes()}`.padStart(2, 0);
 			return `${year}-${month}-${day} ${hour}:${minute}`;
 		},
-		...mapActions("modalVisibility", ["openModal"]),
-		...mapActions("admin/punishments", ["viewPunishment"])
+		...mapActions("modalVisibility", ["openModal"])
 	}
 };
 </script>

frontend/src/store/index.js

@@ -12,7 +12,6 @@ import admin from "./modules/admin";
 import editSongModal from "./modules/modals/editSong";
 import editSongsModal from "./modules/modals/editSongs";
 import importAlbumModal from "./modules/modals/importAlbum";
-import viewPunishmentModal from "./modules/modals/viewPunishment";
 import confirmModal from "./modules/modals/confirm";
 
 const emptyModule = {
@@ -40,7 +39,7 @@ export default createStore({
 				whatIsNew: emptyModule,
 				createStation: emptyModule,
 				editNews: emptyModule,
-				viewPunishment: viewPunishmentModal,
+				viewPunishment: emptyModule,
 				report: emptyModule,
 				viewReport: emptyModule,
 				confirm: confirmModal,

frontend/src/store/modules/modalVisibility.js

@@ -11,6 +11,7 @@ import editPlaylist from "./modals/editPlaylist";
 import report from "./modals/report";
 import viewReport from "./modals/viewReport";
 import bulkActions from "./modals/bulkActions";
+import viewPunishment from "./modals/viewPunishment";
 
 const state = {
 	modals: {
@@ -18,7 +19,6 @@ const state = {
 		editSong: false,
 		editSongs: false,
 		importAlbum: false,
-		viewPunishment: false,
 		confirm: false,
 		editSongConfirm: false,
 		editSongsConfirm: false
@@ -40,7 +40,8 @@ const modalModules = {
 	editPlaylist,
 	report,
 	viewReport,
-	bulkActions
+	bulkActions,
+	viewPunishment
 };
 
 const migratedModules = {
@@ -60,7 +61,7 @@ const migratedModules = {
 	editUser: true,
 	importAlbum: false,
 	viewReport: true,
-	viewPunishment: false,
+	viewPunishment: true,
 	confirm: false,
 	editSongConfirm: false,
 	editSongsConfirm: false,

frontend/src/store/modules/modals/viewPunishment.js

@@ -3,14 +3,19 @@
 export default {
 	namespaced: true,
 	state: {
+		punishmentId: null,
 		punishment: {}
 	},
 	getters: {},
 	actions: {
+		init: ({ commit }, data) => commit("init", data),
 		viewPunishment: ({ commit }, punishment) =>
 			commit("viewPunishment", punishment)
 	},
 	mutations: {
+		init(state, { punishmentId }) {
+			state.punishmentId = punishmentId;
+		},
 		viewPunishment(state, punishment) {
 			state.punishment = punishment;
 		}