Made edit news modal independent

backend/logic/actions/news.js

@@ -66,6 +66,32 @@ export default {
 		);
 	},
 
+	/**
+	 * Gets a news item by id
+	 *
+	 * @param {object} session - the session object automatically added by socket.io
+	 * @param {string} newsId - the news id
+	 * @param {Function} cb - gets called with the result
+	 */
+	async getNewsFromId(session, newsId, cb) {
+		const newsModel = await DBModule.runJob("GET_MODEL", { modelName: "news" }, this);
+		async.waterfall(
+			[
+				next => {
+					newsModel.findOne({ _id: newsId }, next);
+				}
+			],
+			async (err, news) => {
+				if (err) {
+					err = await UtilsModule.runJob("GET_ERROR", { error: err }, this);
+					this.log("ERROR", "GET_NEWS_FROM_ID", `Getting news failed. "${err}"`);
+					return cb({ status: "failure", message: err });
+				}
+				this.log("SUCCESS", "GET_NEWS_FROM_ID", `Got news successful.`, false);
+				return cb({ status: "success", data: news });
+			}
+		);
+	},
 	/**
 	 * Creates a news item
 	 *

frontend/src/pages/Admin/EditNews.vue

@@ -1,10 +1,10 @@
 <template>
 	<modal title="Edit News">
-		<div slot="body">
+		<div slot="body" v-if="news && news._id">
 			<label class="label">Title</label>
 			<p class="control">
 				<input
-					v-model="editing.title"
+					v-model="news.title"
 					class="input"
 					type="text"
 					placeholder="News Title"
@@ -14,7 +14,7 @@
 			<label class="label">Description</label>
 			<p class="control">
 				<input
-					v-model="editing.description"
+					v-model="news.description"
 					class="input"
 					type="text"
 					placeholder="News Description"
@@ -39,7 +39,7 @@
 						>
 					</p>
 					<span
-						v-for="(bug, index) in editing.bugs"
+						v-for="(bug, index) in news.bugs"
 						class="tag is-info"
 						:key="index"
 					>
@@ -68,7 +68,7 @@
 						>
 					</p>
 					<span
-						v-for="(feature, index) in editing.features"
+						v-for="(feature, index) in news.features"
 						class="tag is-info"
 						:key="index"
 					>
@@ -100,7 +100,7 @@
 						>
 					</p>
 					<span
-						v-for="(improvement, index) in editing.improvements"
+						v-for="(improvement, index) in news.improvements"
 						class="tag is-info"
 						:key="index"
 					>
@@ -129,7 +129,7 @@
 						>
 					</p>
 					<span
-						v-for="(upcoming, index) in editing.upcoming"
+						v-for="(upcoming, index) in news.upcoming"
 						class="tag is-info"
 						:key="index"
 					>
@@ -155,7 +155,7 @@
 				class="button is-danger"
 				@click="
 					closeModal({
-						sector: 'admin',
+						sector,
 						modal: 'editNews'
 					})
 				"
@@ -176,21 +176,41 @@ import Modal from "../../components/Modal.vue";
 
 export default {
 	components: { Modal },
+	props: {
+		newsId: { type: String, default: "" },
+		sector: { type: String, default: "admin" }
+	},
 	computed: {
-		...mapState("admin/news", {
-			editing: state => state.editing
+		...mapState("editNewsModal", {
+			news: state => state.news
 		})
 	},
 	mounted() {
 		io.getSocket(socket => {
 			this.socket = socket;
+
+			this.socket.emit(`news.getNewsFromId`, this.newsId, res => {
+				if (res.status === "success") {
+					const news = res.data;
+					this.editNews(news);
+				} else {
+					new Toast({
+						content: "News with that ID not found",
+						timeout: 3000
+					});
+					this.closeModal({
+						sector: this.sector,
+						modal: "editNews"
+					});
+				}
+			});
 		});
 	},
 	methods: {
 		addChange(type) {
 			const change = document.getElementById(`edit-${type}`).value.trim();
 
-			if (this.editing[type].indexOf(change) !== -1)
+			if (this.news[type].indexOf(change) !== -1)
 				return new Toast({
 					content: `Tag already exists`,
 					timeout: 3000
@@ -210,24 +230,23 @@ export default {
 			this.removeChange({ type, index });
 		},
 		updateNews(close) {
-			this.socket.emit(
-				"news.update",
-				this.editing._id,
-				this.editing,
-				res => {
-					new Toast({ content: res.message, timeout: 4000 });
-					if (res.status === "success") {
-						if (close)
-							this.closeModal({
-								sector: "admin",
-								modal: "editNews"
-							});
-					}
+			this.socket.emit("news.update", this.news._id, this.news, res => {
+				new Toast({ content: res.message, timeout: 4000 });
+				if (res.status === "success") {
+					if (close)
+						this.closeModal({
+							sector: this.sector,
+							modal: "editNews"
+						});
 				}
-			);
+			});
 		},
 		...mapActions("modals", ["closeModal"]),
-		...mapActions("admin/news", ["addChange", "removeChange"])
+		...mapActions("editNewsModal", [
+			"editNews",
+			"addChange",
+			"removeChange"
+		])
 	}
 };
 </script>

frontend/src/pages/Admin/EditUser.vue

@@ -75,7 +75,7 @@
 					class="button is-danger"
 					@click="
 						closeModal({
-							sector: this.sector,
+							sector,
 							modal: 'editUser'
 						})
 					"
@@ -121,6 +121,15 @@ export default {
 				if (res.status === "success") {
 					const user = res.data;
 					this.editUser(user);
+				} else {
+					new Toast({
+						content: "User with that ID not found",
+						timeout: 3000
+					});
+					this.closeModal({
+						sector: this.sector,
+						modal: "editUser"
+					});
 				}
 			});
 

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

@@ -206,7 +206,11 @@
 			</div>
 		</div>
 
-		<edit-news v-if="modals.editNews" />
+		<edit-news
+			v-if="modals.editNews"
+			:news-id="editingNewsId"
+			sector="admin"
+		/>
 	</div>
 </template>
 
@@ -222,6 +226,7 @@ export default {
 	components: { EditNews },
 	data() {
 		return {
+			editingNewsId: "",
 			creating: {
 				title: "",
 				description: "",
@@ -237,7 +242,6 @@ export default {
 			modals: state => state.modals.admin
 		}),
 		...mapState("admin/news", {
-			editing: state => state.editing,
 			news: state => state.news
 		})
 	},
@@ -310,7 +314,7 @@ export default {
 			);
 		},
 		editNewsClick(news) {
-			this.editNews(news);
+			this.editingNewsId = news._id;
 			this.openModal({ sector: "admin", modal: "editNews" });
 		},
 		addChange(type) {

frontend/src/store/index.js

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

frontend/src/store/modules/admin.js

@@ -120,29 +120,16 @@ const modules = {
 	news: {
 		namespaced: true,
 		state: {
-			editing: {},
 			news: []
 		},
 		getters: {},
 		actions: {
-			editNews: ({ commit }, news) => commit("editNews", news),
-			addChange: ({ commit }, data) => commit("addChange", data),
-			removeChange: ({ commit }, data) => commit("removeChange", data),
 			addNews: ({ commit }, news) => commit("addNews", news),
 			removeNews: ({ commit }, newsId) => commit("removeNews", newsId),
 			updateNews: ({ commit }, updatedNews) =>
 				commit("updateNews", updatedNews)
 		},
 		mutations: {
-			editNews(state, news) {
-				state.editing = news;
-			},
-			addChange(state, data) {
-				state.editing[data.type].push(data.change);
-			},
-			removeChange(state, data) {
-				state.editing[data.type].splice(data.index, 1);
-			},
 			addNews(state, news) {
 				state.news.push(news);
 			},

frontend/src/store/modules/editNewsModal.js

@@ -0,0 +1,25 @@
+/* eslint no-param-reassign: 0 */
+
+export default {
+	namespaced: true,
+	state: {
+		news: {}
+	},
+	getters: {},
+	actions: {
+		editNews: ({ commit }, news) => commit("editNews", news),
+		addChange: ({ commit }, data) => commit("addChange", data),
+		removeChange: ({ commit }, data) => commit("removeChange", data)
+	},
+	mutations: {
+		editNews(state, news) {
+			state.news = news;
+		},
+		addChange(state, data) {
+			state.news[data.type].push(data.change);
+		},
+		removeChange(state, data) {
+			state.news[data.type].splice(data.index, 1);
+		}
+	}
+};