feat(Admin/Playlists): added live updating of playlists

backend/logic/actions/apis.js

@@ -187,6 +187,7 @@ export default {
 			page === "stations" ||
 			page === "reports" ||
 			page === "news" ||
+			page === "playlists" ||
 			page === "users" ||
 			page === "statistics" ||
 			page === "punishments"

backend/logic/actions/playlists.js

@@ -26,6 +26,11 @@ CacheModule.runJob("SUB", {
 				room: `profile.${playlist.createdBy}.playlists`,
 				args: ["event:playlist.created", { data: { playlist } }]
 			});
+
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: "admin.playlists",
+			args: ["event:admin.playlist.created", { data: { playlist } }]
+		});
 	}
 });
 
@@ -42,6 +47,11 @@ CacheModule.runJob("SUB", {
 			room: `profile.${res.userId}.playlists`,
 			args: ["event:playlist.deleted", { data: { playlistId: res.playlistId } }]
 		});
+
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: "admin.playlists",
+			args: ["event:admin.playlist.deleted", { data: { playlistId: res.playlistId } }]
+		});
 	}
 });
 
@@ -87,6 +97,11 @@ CacheModule.runJob("SUB", {
 					}
 				]
 			});
+
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: "admin.playlists",
+			args: ["event:admin.playlist.song.added", { data: { playlistId: res.playlistId, song: res.song } }]
+		});
 	}
 });
 
@@ -117,6 +132,14 @@ CacheModule.runJob("SUB", {
 					}
 				]
 			});
+
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: "admin.playlists",
+			args: [
+				"event:admin.playlist.song.removed",
+				{ data: { playlistId: res.playlistId, youtubeId: res.youtubeId } }
+			]
+		});
 	}
 });
 
@@ -147,6 +170,14 @@ CacheModule.runJob("SUB", {
 					}
 				]
 			});
+
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: "admin.playlists",
+			args: [
+				"event:admin.playlist.displayName.updated",
+				{ data: { playlistId: res.playlistId, displayName: res.displayName } }
+			]
+		});
 	}
 });
 
@@ -163,6 +194,14 @@ CacheModule.runJob("SUB", {
 			});
 		});
 
+		WSModule.runJob("EMIT_TO_ROOM", {
+			room: "admin.playlists",
+			args: [
+				"event:admin.playlist.privacy.updated",
+				{ data: { playlistId: res.playlist._id, privacy: res.playlist.privacy } }
+			]
+		});
+
 		if (res.playlist.privacy === "public")
 			return WSModule.runJob("EMIT_TO_ROOM", {
 				room: `profile.${res.userId}.playlists`,

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

@@ -115,19 +115,57 @@ export default {
 	},
 	data() {
 		return {
-			utils,
-			playlists: []
+			utils
 		};
 	},
 	computed: {
 		...mapState("modalVisibility", {
 			modals: state => state.modals
 		}),
+		...mapState("admin/playlists", {
+			playlists: state => state.playlists
+		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
+		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,
+				song: res.data.song
+			})
+		);
+
+		this.socket.on("event:admin.playlist.song.removed", res =>
+			this.removePlaylistSong({
+				playlistId: res.data.playlistId,
+				youtubeId: res.data.youtubeId
+			})
+		);
+
+		this.socket.on("event:admin.playlist.displayName.updated", res =>
+			this.updatePlaylistDisplayName({
+				playlistId: res.data.playlistId,
+				displayName: res.data.displayName
+			})
+		);
+
+		this.socket.on("event:admin.playlist.privacy.updated", res =>
+			this.updatePlaylistPrivacy({
+				playlistId: res.data.playlistId,
+				privacy: res.data.privacy
+			})
+		);
+
 		ws.onConnect(this.init);
 	},
 	methods: {
@@ -138,7 +176,7 @@ export default {
 		init() {
 			this.socket.dispatch("playlists.index", res => {
 				if (res.status === "success") {
-					this.playlists = res.data.playlists;
+					this.setPlaylists(res.data.playlists);
 					// if (this.$route.query.userId) {
 					// 	const user = this.users.find(
 					// 		user => user._id === this.$route.query.userId
@@ -221,7 +259,16 @@ export default {
 			);
 		},
 		...mapActions("modalVisibility", ["openModal"]),
-		...mapActions("user/playlists", ["editPlaylist"])
+		...mapActions("user/playlists", ["editPlaylist"]),
+		...mapActions("admin/playlists", [
+			"addPlaylist",
+			"setPlaylists",
+			"removePlaylist",
+			"addPlaylistSong",
+			"removePlaylistSong",
+			"updatePlaylistDisplayName",
+			"updatePlaylistPrivacy"
+		])
 	}
 };
 </script>

frontend/src/store/modules/admin.js

@@ -188,6 +188,80 @@ const modules = {
 				});
 			}
 		}
+	},
+	playlists: {
+		namespaced: true,
+		state: {
+			playlists: []
+		},
+		getters: {},
+		actions: {
+			setPlaylists: ({ commit }, playlists) =>
+				commit("setPlaylists", playlists),
+			addPlaylist: ({ commit }, playlist) =>
+				commit("addPlaylist", playlist),
+			removePlaylist: ({ commit }, playlistId) =>
+				commit("removePlaylist", playlistId),
+			addPlaylistSong: ({ commit }, { playlistId, song }) =>
+				commit("addPlaylistSong", { playlistId, song }),
+			removePlaylistSong: ({ commit }, { playlistId, youtubeId }) =>
+				commit("removePlaylistSong", { playlistId, youtubeId }),
+			updatePlaylistDisplayName: (
+				{ commit },
+				{ playlistId, displayName }
+			) =>
+				commit("updatePlaylistDisplayName", {
+					playlistId,
+					displayName
+				}),
+			updatePlaylistPrivacy: ({ commit }, { playlistId, privacy }) =>
+				commit("updatePlaylistPrivacy", { playlistId, privacy })
+		},
+		mutations: {
+			setPlaylists(state, playlists) {
+				state.playlists = playlists;
+			},
+			addPlaylist(state, playlist) {
+				state.playlists.unshift(playlist);
+			},
+			removePlaylist(state, playlistId) {
+				state.playlists = state.playlists.filter(
+					playlist => playlist._id !== playlistId
+				);
+			},
+			addPlaylistSong(state, { playlistId, song }) {
+				state.playlists[
+					state.playlists.findIndex(
+						playlist => playlist._id === playlistId
+					)
+				].songs.push(song);
+			},
+			removePlaylistSong(state, { playlistId, youtubeId }) {
+				const playlistIndex = state.playlists.findIndex(
+					playlist => playlist._id === playlistId
+				);
+				state.playlists[playlistIndex].songs.splice(
+					state.playlists[playlistIndex].songs.findIndex(
+						song => song.youtubeId === youtubeId
+					),
+					1
+				);
+			},
+			updatePlaylistDisplayName(state, { playlistId, displayName }) {
+				state.playlists[
+					state.playlists.findIndex(
+						playlist => playlist._id === playlistId
+					)
+				].displayName = displayName;
+			},
+			updatePlaylistPrivacy(state, { playlistId, privacy }) {
+				state.playlists[
+					state.playlists.findIndex(
+						playlist => playlist._id === playlistId
+					)
+				].privacy = privacy;
+			}
+		}
 	}
 };