refactor(editNews): Migrated to new modal system

frontend/src/components/ModalManager.vue

@@ -21,7 +21,8 @@ export default {
 			login: "Login.vue",
 			register: "Register.vue",
 			whatIsNew: "WhatIsNew.vue",
-			createStation: "CreateStation.vue"
+			createStation: "CreateStation.vue",
+			editNews: "EditNews.vue"
 		}),
 		...mapState("modalVisibility", {
 			activeModals: state => state.new.activeModals,

frontend/src/components/modals/EditNews.vue

@@ -1,7 +1,7 @@
 <template>
 	<modal
 		class="edit-news-modal"
-		:title="newsId ? 'Edit News' : 'Create News'"
+		:title="createNews ? 'Create News' : 'Edit News'"
 		:size="'wide'"
 		:split="true"
 	>
@@ -45,14 +45,14 @@
 
 				<save-button
 					ref="saveButton"
-					v-if="newsId"
-					@clicked="newsId ? update(false) : create(false)"
+					v-if="createNews"
+					@clicked="createNews ? create(false) : update(false)"
 				/>
 
 				<save-button
 					ref="saveAndCloseButton"
 					default-message="Save and close"
-					@clicked="newsId ? update(true) : create(true)"
+					@clicked="createNews ? create(true) : update(true)"
 				/>
 				<div class="right" v-if="createdAt > 0">
 					<span>
@@ -76,7 +76,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters, mapState } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 import { marked } from "marked";
 import { sanitize } from "dompurify";
 import Toast from "toasters";
@@ -85,11 +85,12 @@ import { formatDistance } from "date-fns";
 import ws from "@/ws";
 import SaveButton from "../SaveButton.vue";
 
+import { mapModalState } from "@/vuex_helpers";
+
 export default {
 	components: { SaveButton },
 	props: {
-		newsId: { type: String, default: "" },
-		sector: { type: String, default: "admin" }
+		modalUuid: { type: String, default: "" }
 	},
 	data() {
 		return {
@@ -102,7 +103,11 @@ export default {
 		};
 	},
 	computed: {
-		...mapState("modals/editNews", { news: state => state.news }),
+		...mapModalState("modals/editNews/MODAL_UUID", {
+			createNews: state => state.createNews,
+			newsId: state => state.newsId,
+			sector: state => state.sector
+		}),
 		...mapGetters({ socket: "websockets/getSocket" })
 	},
 	mounted() {
@@ -119,9 +124,13 @@ export default {
 
 		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", "editNews", this.modalUuid]);
+	},
 	methods: {
 		init() {
-			if (this.newsId) {
+			if (this.newsId && !this.createNews) {
 				this.socket.dispatch(`news.getNewsFromId`, this.newsId, res => {
 					if (res.status === "success") {
 						const {
@@ -222,12 +231,7 @@ export default {
 			);
 		},
 		formatDistance,
-		...mapActions("modalVisibility", ["closeModal"]),
-		...mapActions("modals/editNews", [
-			"editNews",
-			"addChange",
-			"removeChange"
-		])
+		...mapActions("modalVisibility", ["closeModal"])
 	}
 };
 </script>

frontend/src/pages/Admin/News.vue

@@ -3,7 +3,15 @@
 		<page-metadata title="Admin | News" />
 		<div class="container">
 			<div class="button-row">
-				<button class="is-primary button" @click="edit()">
+				<button
+					class="is-primary button"
+					@click="
+						openModal({
+							modal: 'editNews',
+							data: { createNews: true }
+						})
+					"
+				>
 					Create News Item
 				</button>
 			</div>
@@ -20,7 +28,12 @@
 					<div class="row-options">
 						<button
 							class="button is-primary icon-with-button material-icons"
-							@click="edit(slotProps.item._id)"
+							@click="
+								openModal({
+									modal: 'editNews',
+									data: { newsId: slotProps.item._id }
+								})
+							"
 							content="Edit News"
 							v-tippy
 						>
@@ -69,28 +82,18 @@
 				</template>
 			</advanced-table>
 		</div>
-
-		<edit-news
-			v-if="modals.editNews"
-			:news-id="editingNewsId"
-			sector="admin"
-		/>
 	</div>
 </template>
 
 <script>
-import { mapActions, mapState, mapGetters } from "vuex";
-import { defineAsyncComponent } from "vue";
+import { mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 
 import AdvancedTable from "@/components/AdvancedTable.vue";
 
 export default {
 	components: {
-		AdvancedTable,
-		EditNews: defineAsyncComponent(() =>
-			import("@/components/modals/EditNews.vue")
-		)
+		AdvancedTable
 	},
 	data() {
 		return {
@@ -201,19 +204,11 @@ export default {
 		};
 	},
 	computed: {
-		...mapState("modalVisibility", {
-			modals: state => state.modals
-		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
 		})
 	},
 	methods: {
-		edit(id) {
-			if (id) this.editingNewsId = id;
-			else this.editingNewsId = "";
-			this.openModal("editNews");
-		},
 		remove(id) {
 			this.socket.dispatch(
 				"news.remove",

frontend/src/store/index.js

@@ -44,6 +44,7 @@ export default createStore({
 				editUser: emptyModule,
 				whatIsNew: emptyModule,
 				createStation: emptyModule,
+				editNews: emptyModule,
 				viewPunishment: viewPunishmentModal,
 				report: reportModal,
 				viewReport: viewReportModal,

frontend/src/store/modules/modalVisibility.js

@@ -4,6 +4,7 @@ import ws from "@/ws";
 import editUser from "./modals/editUser";
 import whatIsNew from "./modals/whatIsNew";
 import createStation from "./modals/createStation";
+import editNews from "./modals/editNews";
 
 const state = {
 	modals: {
@@ -13,7 +14,6 @@ const state = {
 		createPlaylist: false,
 		report: false,
 		removeAccount: false,
-		editNews: false,
 		editSong: false,
 		editSongs: false,
 		importAlbum: false,
@@ -34,7 +34,8 @@ const state = {
 const modalModules = {
 	editUser,
 	whatIsNew,
-	createStation
+	createStation,
+	editNews
 };
 
 const migratedModules = {
@@ -48,7 +49,7 @@ const migratedModules = {
 	createPlaylist: false,
 	report: false,
 	removeAccount: false,
-	editNews: false,
+	editNews: true,
 	editSong: false,
 	editSongs: false,
 	editUser: true,

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

@@ -0,0 +1,21 @@
+/* eslint no-param-reassign: 0 */
+
+export default {
+	namespaced: true,
+	state: () => ({
+		createNews: false,
+		newsId: null,
+		sector: "admin"
+	}),
+	getters: {},
+	actions: {
+		init: ({ commit }, data) => commit("init", data)
+	},
+	mutations: {
+		init(state, { createNews, newsId, sector }) {
+			state.createNews = createNews;
+			state.newsId = newsId;
+			state.sector = sector;
+		}
+	}
+};