feat(Admin): Started integrating advanced table into admin/playlists

backend/logic/actions/playlists.js

@@ -258,6 +258,54 @@ export default {
 		);
 	}),
 
+	/**
+	 * Gets playlists, used in the admin playlists page by the AdvancedTable component
+	 *
+	 * @param {object} session - the session object automatically added by the websocket
+	 * @param page - the page
+	 * @param pageSize - the size per page
+	 * @param properties - the properties to return for each playlist
+	 * @param sort - the sort object
+	 * @param queries - the queries array
+	 * @param operator - the operator for queries
+	 * @param cb
+	 */
+	getData: isAdminRequired(async function getSet(session, page, pageSize, properties, sort, queries, operator, cb) {
+		async.waterfall(
+			[
+				next => {
+					PlaylistsModule.runJob(
+						"GET_DATA",
+						{
+							page,
+							pageSize,
+							properties,
+							sort,
+							queries,
+							operator
+						},
+						this
+					)
+						.then(response => {
+							next(null, response);
+						})
+						.catch(err => {
+							next(err);
+						});
+				}
+			],
+			async (err, response) => {
+				if (err) {
+					err = await UtilsModule.runJob("GET_ERROR", { error: err }, this);
+					this.log("ERROR", "PLAYLISTS_GET_DATA", `Failed to get data from playlists. "${err}"`);
+					return cb({ status: "error", message: err });
+				}
+				this.log("SUCCESS", "PLAYLISTS_GET_DATA", `Got data from playlists successfully.`);
+				return cb({ status: "success", message: "Successfully got data from playlists.", data: response });
+			}
+		);
+	}),
+
 	/**
 	 * Searches through all playlists that can be included in a community station
 	 *

backend/logic/playlists.js

@@ -868,6 +868,72 @@ class _PlaylistsModule extends CoreClass {
 		);
 	}
 
+	/**
+	 * Gets playlists data
+	 *
+	 * @param {object} payload - object containing the payload
+	 * @param {string} payload.page - the page
+	 * @param {string} payload.pageSize - the page size
+	 * @param {string} payload.properties - the properties to return for each playlist
+	 * @param {string} payload.sort - the sort object
+	 * @param {string} payload.queries - the queries array
+	 * @param {string} payload.operator - the operator for queries
+	 * @returns {Promise} - returns a promise (resolve, reject)
+	 */
+	GET_DATA(payload) {
+		return new Promise((resolve, reject) => {
+			const { page, pageSize, properties, sort, queries, operator } = payload;
+
+			console.log("GET_DATA", payload);
+
+			const newQueries = queries.map(query => {
+				const { data, filter, filterType } = query;
+				const newQuery = {};
+				if (filterType === "regex") {
+					newQuery[filter.property] = new RegExp(`${data.slice(1, data.length - 1)}`, "i");
+				} else if (filterType === "contains") {
+					newQuery[filter.property] = new RegExp(`${data.replaceAll(/[.*+?^${}()|[\]\\]/g, "\\$&")}`, "i");
+				} else if (filterType === "exact") {
+					newQuery[filter.property] = data.toString();
+				}
+				return newQuery;
+			});
+
+			const queryObject = {};
+			if (newQueries.length > 0) {
+				if (operator === "and") queryObject.$and = newQueries;
+				else if (operator === "or") queryObject.$or = newQueries;
+				else if (operator === "nor") queryObject.$nor = newQueries;
+			}
+
+			async.waterfall(
+				[
+					next => {
+						PlaylistsModule.playlistModel.find(queryObject).count((err, count) => {
+							next(err, count);
+						});
+					},
+
+					(count, next) => {
+						PlaylistsModule.playlistModel
+							.find(queryObject)
+							.sort(sort)
+							.skip(pageSize * (page - 1))
+							.limit(pageSize)
+							.select(properties.join(" "))
+							.exec((err, playlists) => {
+								next(err, count, playlists);
+							});
+					}
+				],
+				(err, count, playlists) => {
+					if (err && err !== true) return reject(new Error(err));
+					return resolve({ data: playlists, count });
+				}
+			);
+		});
+	}
+
 	/**
 	 * Gets a playlist from id from Mongo and updates the cache with it
 	 *

frontend/src/components/modals/EditPlaylist/index.vue

@@ -228,7 +228,7 @@
 						isEditable() &&
 						!(
 							playlist.type === 'user-liked' ||
-							playlist.type === 'user-liked'
+							playlist.type === 'user-disliked'
 						)
 					"
 					@confirm="removePlaylist()"

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

@@ -1,55 +1,95 @@
 <template>
 	<div>
 		<page-metadata title="Admin | Playlists" />
-		<div class="container">
+		<div class="admin-tab">
 			<div class="button-row">
 				<run-job-dropdown :jobs="jobs" />
 			</div>
-			<table class="table">
-				<thead>
-					<tr>
-						<td>Display name</td>
-						<td>Type</td>
-						<td>Privacy</td>
-						<td>Songs #</td>
-						<td>Playlist length</td>
-						<td>Created by</td>
-						<td>Created at</td>
-						<td>Created for</td>
-						<td>Playlist id</td>
-						<td>Options</td>
-					</tr>
-				</thead>
-				<tbody>
-					<tr v-for="playlist in playlists" :key="playlist._id">
-						<td>{{ playlist.displayName }}</td>
-						<td>{{ playlist.type }}</td>
-						<td>{{ playlist.privacy }}</td>
-						<td>{{ playlist.songs.length }}</td>
-						<td>{{ totalLengthForPlaylist(playlist.songs) }}</td>
-						<td v-if="playlist.createdBy === 'Musare'">Musare</td>
-						<td v-else>
-							<user-id-to-username
-								:user-id="playlist.createdBy"
-								:link="true"
-							/>
-						</td>
-						<td :title="new Date(playlist.createdAt)">
-							{{ getDateFormatted(playlist.createdAt) }}
-						</td>
-						<td>{{ playlist.createdFor }}</td>
-						<td>{{ playlist._id }}</td>
-						<td>
-							<button
-								class="button is-primary"
-								@click="edit(playlist._id)"
+			<advanced-table
+				:column-default="columnDefault"
+				:columns="columns"
+				:filters="filters"
+				data-action="playlists.getData"
+				name="admin-playlists"
+			>
+				<template #column-displayName="slotProps">
+					<span :title="slotProps.item.displayName">{{
+						slotProps.item.displayName
+					}}</span>
+				</template>
+				<template #column-type="slotProps">
+					<span :title="slotProps.item.type">{{
+						slotProps.item.type
+					}}</span>
+				</template>
+				<template #column-privacy="slotProps">
+					<span :title="slotProps.item.privacy">{{
+						slotProps.item.privacy
+					}}</span>
+				</template>
+				<template #column-songsCount="slotProps">
+					<span :title="slotProps.item.songs.length">{{
+						slotProps.item.songs.length
+					}}</span>
+				</template>
+				<template #column-totalLength="slotProps">
+					<span
+						:title="totalLengthForPlaylist(slotProps.item.songs)"
+						>{{
+							totalLengthForPlaylist(slotProps.item.songs)
+						}}</span
+					>
+				</template>
+				<template #column-createdBy="slotProps">
+					<span v-if="slotProps.item.createdBy === 'Musare'"
+						>Musare</span
+					>
+					<user-id-to-username
+						v-else
+						:user-id="slotProps.item.createdBy"
+						:link="true"
+					/>
+				</template>
+				<template #column-createdAt="slotProps">
+					<span :title="new Date(slotProps.item.createdAt)">{{
+						getDateFormatted(slotProps.item.createdAt)
+					}}</span>
+				</template>
+				<template #column-createdFor="slotProps">
+					<span :title="slotProps.item.createdFor">{{
+						slotProps.item.createdFor
+					}}</span>
+				</template>
+				<template #column-_id="slotProps">
+					<span :title="slotProps.item._id">{{
+						slotProps.item._id
+					}}</span>
+				</template>
+				<template #bulk-actions="slotProps">
+					<div class="playlist-bulk-actions">
+						<i
+							class="material-icons edit-playlists-icon"
+							@click.prevent="editMany(slotProps.item)"
+							content="Edit Playlists"
+							v-tippy
+						>
+							edit
+						</i>
+						<quick-confirm
+							placement="left"
+							@confirm="deleteMany(slotProps.item)"
+						>
+							<i
+								class="material-icons delete-playlists-icon"
+								content="Delete Playlists"
+								v-tippy
 							>
-								View
-							</button>
-						</td>
-					</tr>
-				</tbody>
-			</table>
+								delete_forever
+							</i>
+						</quick-confirm>
+					</div>
+				</template>
+			</advanced-table>
 		</div>
 
 		<edit-playlist v-if="modals.editPlaylist" sector="admin" />
@@ -62,11 +102,13 @@
 import { mapState, mapActions, mapGetters } from "vuex";
 import { defineAsyncComponent } from "vue";
 
-import RunJobDropdown from "@/components/RunJobDropdown.vue";
+import Toast from "toasters";
 
+import AdvancedTable from "@/components/AdvancedTable.vue";
+import RunJobDropdown from "@/components/RunJobDropdown.vue";
 import UserIdToUsername from "@/components/UserIdToUsername.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 
-import ws from "@/ws";
 import utils from "../../../../js/utils";
 
 export default {
@@ -74,18 +116,146 @@ export default {
 		EditPlaylist: defineAsyncComponent(() =>
 			import("@/components/modals/EditPlaylist")
 		),
-		UserIdToUsername,
 		Report: defineAsyncComponent(() =>
 			import("@/components/modals/Report.vue")
 		),
 		EditSong: defineAsyncComponent(() =>
 			import("@/components/modals/EditSong")
 		),
-		RunJobDropdown
+		AdvancedTable,
+		RunJobDropdown,
+		UserIdToUsername,
+		QuickConfirm
 	},
 	data() {
 		return {
 			utils,
+			columnDefault: {
+				sortable: true,
+				hidable: true,
+				defaultVisibility: "shown",
+				draggable: true,
+				resizable: true,
+				minWidth: 150,
+				maxWidth: 600
+			},
+			columns: [
+				{
+					name: "displayName",
+					displayName: "Display Name",
+					properties: ["displayName"],
+					sortProperty: "displayName"
+				},
+				{
+					name: "type",
+					displayName: "Type",
+					properties: ["type"],
+					sortProperty: "type"
+				},
+				{
+					name: "privacy",
+					displayName: "Privacy",
+					properties: ["privacy"],
+					sortProperty: "privacy"
+				},
+				{
+					name: "songsCount",
+					displayName: "Songs #",
+					properties: ["songs"],
+					sortable: false,
+					minWidth: 80,
+					defaultWidth: 80
+				},
+				{
+					name: "totalLength",
+					displayName: "Total Length",
+					properties: ["songs"],
+					sortable: false,
+					minWidth: 250,
+					defaultWidth: 250
+				},
+				{
+					name: "createdBy",
+					displayName: "Created By",
+					properties: ["createdBy"],
+					sortProperty: "createdBy",
+					defaultWidth: 150
+				},
+				{
+					name: "createdAt",
+					displayName: "Created At",
+					properties: ["createdAt"],
+					sortProperty: "createdAt",
+					defaultWidth: 150
+				},
+				{
+					name: "createdFor",
+					displayName: "Created For",
+					properties: ["createdFor"],
+					sortProperty: "createdFor",
+					minWidth: 230,
+					defaultWidth: 230
+				},
+				{
+					name: "_id",
+					displayName: "ID",
+					properties: ["_id"],
+					sortProperty: "_id",
+					minWidth: 230,
+					defaultWidth: 230
+				}
+			],
+			filters: [
+				{
+					name: "_id",
+					displayName: "ID",
+					property: "_id",
+					filterTypes: ["exact"],
+					defaultFilterType: "exact"
+				},
+				{
+					name: "displayName",
+					displayName: "Display Name",
+					property: "displayName",
+					filterTypes: ["contains", "exact", "regex"],
+					defaultFilterType: "contains"
+				},
+				{
+					name: "type",
+					displayName: "Type",
+					property: "type",
+					filterTypes: ["contains", "exact", "regex"],
+					defaultFilterType: "contains"
+				},
+				{
+					name: "privacy",
+					displayName: "Privacy",
+					property: "privacy",
+					filterTypes: ["contains", "exact", "regex"],
+					defaultFilterType: "contains"
+				},
+				{
+					name: "createdBy",
+					displayName: "Created By",
+					property: "createdBy",
+					filterTypes: ["contains", "exact", "regex"],
+					defaultFilterType: "contains"
+				},
+				{
+					name: "createdAt",
+					displayName: "Created At",
+					property: "createdAt",
+					filterTypes: ["contains", "exact", "regex"],
+					defaultFilterType: "contains"
+				},
+				{
+					name: "createdFor",
+					displayName: "Created For",
+					property: "createdFor",
+					filterTypes: ["contains", "exact", "regex"],
+					defaultFilterType: "contains"
+				}
+			],
 			jobs: [
 				{
 					name: "Delete orphaned station playlists",
@@ -118,71 +288,54 @@ export default {
 		...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);
+		// 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,
+		// 		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
+		// 	})
+		// );
 	},
 	methods: {
-		edit(playlistId) {
-			this.editPlaylist(playlistId);
-			this.openModal("editPlaylist");
+		editMany(selectedRows) {
+			if (selectedRows.length === 1) {
+				this.editPlaylist(selectedRows[0]._id);
+				this.openModal("editPlaylist");
+			} else {
+				new Toast("Bulk editing not yet implemented.");
+			}
 		},
-		init() {
-			this.socket.dispatch("playlists.index", res => {
-				if (res.status === "success") {
-					this.setPlaylists(res.data.playlists);
-					if (this.$route.query.playlistId) {
-						const playlist = this.playlists.find(
-							playlist =>
-								playlist._id === this.$route.query.playlistId
-						);
-						if (playlist) this.edit(playlist._id);
-					}
-				}
-			});
-			this.socket.dispatch("apis.joinAdminRoom", "playlists", () => {});
+		deleteMany() {
+			new Toast("Bulk deleting not yet implemented.");
 		},
 		getDateFormatted(createdAt) {
 			const date = new Date(createdAt);
@@ -201,52 +354,34 @@ export default {
 			return this.utils.formatTimeLong(length);
 		},
 		...mapActions("modalVisibility", ["openModal"]),
-		...mapActions("user/playlists", ["editPlaylist"]),
-		...mapActions("admin/playlists", [
-			"addPlaylist",
-			"setPlaylists",
-			"removePlaylist",
-			"addPlaylistSong",
-			"removePlaylistSong",
-			"updatePlaylistDisplayName",
-			"updatePlaylistPrivacy"
-		])
+		...mapActions("user/playlists", ["editPlaylist"])
 	}
 };
 </script>
 
 <style lang="scss" scoped>
-.night-mode {
-	.table {
-		color: var(--light-grey-2);
-		background-color: var(--dark-grey-3);
-
-		thead tr {
-			background: var(--dark-grey-3);
-			td {
-				color: var(--white);
-			}
-		}
+.bulk-popup {
+	.playlist-bulk-actions {
+		display: flex;
+		flex-direction: row;
+		width: 100%;
+		justify-content: space-evenly;
 
-		tbody tr:hover {
-			background-color: var(--dark-grey-4) !important;
-		}
+		.material-icons {
+			position: relative;
+			top: 6px;
+			margin-left: 5px;
+			cursor: pointer;
+			color: var(--primary-color);
 
-		tbody tr:nth-child(even) {
-			background-color: var(--dark-grey-2);
+			&:hover,
+			&:focus {
+				filter: brightness(90%);
+			}
 		}
-
-		strong {
-			color: var(--light-grey-2);
+		.delete-playlists-icon {
+			color: var(--dark-red);
 		}
 	}
 }
-
-td {
-	vertical-align: middle;
-}
-
-.is-primary:focus {
-	background-color: var(--primary-color) !important;
-}
 </style>