feat(Admin): Configured more table events

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

@@ -14,6 +14,7 @@
 				data-action="news.getData"
 				name="admin-news"
 				max-width="1200"
+				:events="events"
 			>
 				<template #column-options="slotProps">
 					<div class="row-options">
@@ -87,8 +88,6 @@ import { mapActions, mapState, mapGetters } from "vuex";
 import { defineAsyncComponent } from "vue";
 import Toast from "toasters";
 
-// import ws from "@/ws";
-
 import AdvancedTable from "@/components/AdvancedTable.vue";
 import QuickConfirm from "@/components/QuickConfirm.vue";
 import UserIdToUsername from "@/components/UserIdToUsername.vue";
@@ -181,7 +180,19 @@ export default {
 					filterTypes: ["contains", "exact", "regex"],
 					defaultFilterType: "contains"
 				}
-			]
+			],
+			events: {
+				adminRoom: "news",
+				updated: {
+					event: "admin.news.updated",
+					id: "news._id",
+					item: "news"
+				},
+				removed: {
+					event: "admin.news.deleted",
+					id: "newsId"
+				}
+			}
 		};
 	},
 	computed: {
@@ -195,18 +206,6 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
-	mounted() {
-		// this.socket.on("event:admin.news.created", res =>
-		// 	this.addNews(res.data.news)
-		// );
-		// this.socket.on("event:admin.news.updated", res =>
-		// 	this.updateNews(res.data.news)
-		// );
-		// this.socket.on("event:admin.news.deleted", res =>
-		// 	this.removeNews(res.data.newsId)
-		// );
-		// ws.onConnect(this.init);
-	},
 	methods: {
 		edit(id) {
 			if (id) this.editingNewsId = id;
@@ -220,17 +219,7 @@ export default {
 				res => new Toast(res.message)
 			);
 		},
-		// init() {
-		// 	this.socket.dispatch("apis.joinAdminRoom", "news");
-		// },
-		...mapActions("modalVisibility", ["openModal", "closeModal"]),
-		...mapActions("admin/news", [
-			"editNews",
-			"addNews",
-			"setNews",
-			"removeNews",
-			"updateNews"
-		])
+		...mapActions("modalVisibility", ["openModal", "closeModal"])
 	}
 };
 </script>

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

@@ -11,6 +11,7 @@
 				:filters="filters"
 				data-action="playlists.getData"
 				name="admin-playlists"
+				:events="events"
 			>
 				<template #column-options="slotProps">
 					<div class="row-options">
@@ -257,6 +258,13 @@ export default {
 					defaultFilterType: "contains"
 				}
 			],
+			events: {
+				adminRoom: "playlists",
+				removed: {
+					event: "admin.playlist.deleted",
+					id: "playlistId"
+				}
+			},
 			jobs: [
 				{
 					name: "Delete orphaned station playlists",
@@ -295,12 +303,6 @@ export default {
 	},
 	mounted() {
 		// TODO
-		// this.socket.on("event:admin.playlist.created", res =>
-		// 	this.addPlaylist(res.data.playlist)
-		// );
-		// this.socket.on("event:admin.playlist.deleted", res =>
-		// 	this.removePlaylist(res.data.playlistId)
-		// );
 		// this.socket.on("event:admin.playlist.song.added", res =>
 		// 	this.addPlaylistSong({
 		// 		playlistId: res.data.playlistId,

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

@@ -9,6 +9,7 @@
 				data-action="reports.getData"
 				name="admin-reports"
 				max-width="1200"
+				:events="events"
 			>
 				<template #column-options="slotProps">
 					<div class="row-options">
@@ -234,7 +235,14 @@ export default {
 					filterTypes: ["datetimeBefore", "datetimeAfter"],
 					defaultFilterType: "datetimeBefore"
 				}
-			]
+			],
+			events: {
+				adminRoom: "reports",
+				removed: {
+					event: "admin.report.resolved",
+					id: "reportId"
+				}
+			}
 		};
 	},
 	computed: {
@@ -245,21 +253,7 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
-	mounted() {
-		// ws.onConnect(this.init);
-		// this.socket.on("event:admin.report.resolved", res => {
-		// 	this.reports = this.reports.filter(
-		// 		report => report._id !== res.data.reportId
-		// 	);
-		// });
-		// this.socket.on("event:admin.report.created", res =>
-		// 	this.reports.unshift(res.data.report)
-		// );
-	},
 	methods: {
-		// init() {
-		// 	this.socket.dispatch("apis.joinAdminRoom", "reports", () => {});
-		// },
 		view(reportId) {
 			this.viewReport(reportId);
 			this.openModal("viewReport");

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

@@ -17,6 +17,7 @@
 				:filters="filters"
 				data-action="stations.getData"
 				name="admin-stations"
+				:events="events"
 			>
 				<template #column-options="slotProps">
 					<div class="row-options">
@@ -305,6 +306,13 @@ export default {
 					defaultFilterType: "contains"
 				}
 			],
+			events: {
+				adminRoom: "stations",
+				removed: {
+					event: "admin.station.deleted",
+					id: "stationId"
+				}
+			},
 			jobs: [
 				{
 					name: "Clear every station queue",

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

@@ -12,6 +12,7 @@
 				name="admin-data-requests"
 				max-width="1200"
 				:query="false"
+				:events="dataRequests.events"
 			>
 				<template #column-options="slotProps">
 					<div class="row-options">
@@ -70,6 +71,7 @@
 				data-action="users.getData"
 				name="admin-users"
 				max-width="1200"
+				:events="users.events"
 			>
 				<template #column-options="slotProps">
 					<div class="row-options">
@@ -240,7 +242,14 @@ export default {
 						filterTypes: ["contains", "exact", "regex"],
 						defaultFilterType: "contains"
 					}
-				]
+				],
+				events: {
+					adminRoom: "users",
+					removed: {
+						event: "admin.dataRequests.resolved",
+						id: "dataRequestId"
+					}
+				}
 			},
 			users: {
 				columnDefault: {
@@ -410,7 +419,14 @@ export default {
 						],
 						defaultFilterType: "numberLesser"
 					}
-				]
+				],
+				events: {
+					adminRoom: "users",
+					removed: {
+						event: "user.removed",
+						id: "userId"
+					}
+				}
 			}
 		};
 	},
@@ -424,29 +440,12 @@ export default {
 	},
 	mounted() {
 		if (this.$route.query.userId) this.edit(this.$route.query.userId);
-		// ws.onConnect(this.init);
-		// this.socket.on("event:admin.dataRequests.created", res =>
-		// 	this.dataRequests.push(res.data.request)
-		// );
-		// this.socket.on("event:admin.dataRequests.resolved", res => {
-		// 	this.dataRequests = this.dataRequests.filter(
-		// 		request => request._id !== res.data.dataRequestId
-		// 	);
-		// });
-		// this.socket.on("event:user.removed", res => {
-		// 	this.users = this.users.filter(
-		// 		user => user._id !== res.data.userId
-		// 	);
-		// });
 	},
 	methods: {
 		edit(userId) {
 			this.editingUserId = userId;
 			this.openModal("editUser");
 		},
-		// init() {
-		// 	this.socket.dispatch("apis.joinAdminRoom", "users", () => {});
-		// },
 		resolveDataRequest(id) {
 			this.socket.dispatch("dataRequests.resolve", id, res => {
 				if (res.status === "success") new Toast(res.message);