refactor: Removed admin/test page and advanced table bulk actions right

frontend/src/components/AdvancedTable.vue

@@ -750,7 +750,6 @@
 			</button>
 			<slot name="bulk-actions" :item="selectedRows" />
 			<div class="right">
-				<slot name="bulk-actions-right" :item="selectedRows" />
 				<span
 					class="material-icons drag-icon"
 					@mousedown.left="onDragBox"
@@ -1633,10 +1632,7 @@ export default {
 			let noWidthCount = 0;
 			let calculatedWidth = 0;
 			this.orderedColumns.forEach(column => {
-				if (
-					this.shownColumns.indexOf(column.name) !== -1 &&
-					(column.name !== "select" || this.hasCheckboxes)
-				)
+				if (this.shownColumns.indexOf(column.name) !== -1)
 					if (
 						Number.isFinite(column.width) &&
 						!Number.isFinite(column.calculatedWidth)

frontend/src/pages/Admin/index.vue

@@ -3,16 +3,6 @@
 		<main-header />
 		<div class="tabs is-centered">
 			<ul>
-				<li
-					:class="{ 'is-active': currentTab == 'test' }"
-					ref="test-tab"
-					@click="showTab('test')"
-				>
-					<router-link class="tab test" to="/admin/test">
-						<i class="material-icons">music_note</i>
-						<span>&nbsp;Test</span>
-					</router-link>
-				</li>
 				<li
 					:class="{ 'is-active': currentTab == 'songs' }"
 					ref="songs-tab"
@@ -100,7 +90,6 @@
 		</div>
 
 		<div class="admin-container">
-			<test v-if="currentTab == 'test'" />
 			<songs v-if="currentTab == 'songs'" />
 			<stations v-if="currentTab == 'stations'" />
 			<playlists v-if="currentTab == 'playlists'" />
@@ -200,7 +189,6 @@ export default {
 		MainHeader,
 		MainFooter,
 		FloatingBox,
-		Test: defineAsyncComponent(() => import("./tabs/Test.vue")),
 		Songs: defineAsyncComponent(() => import("./tabs/Songs.vue")),
 		Stations: defineAsyncComponent(() => import("./tabs/Stations.vue")),
 		Playlists: defineAsyncComponent(() => import("./tabs/Playlists.vue")),
@@ -268,9 +256,6 @@ export default {
 	methods: {
 		changeTab(path) {
 			switch (path) {
-				case "/admin/test":
-					this.showTab("test");
-					break;
 				case "/admin/songs":
 					this.showTab("songs");
 					break;

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

@@ -1,386 +0,0 @@
-<template>
-	<div>
-		<page-metadata title="Admin | Test" />
-		<div class="admin-tab">
-			<advanced-table
-				:column-default="columnDefault"
-				:columns="columns"
-				:filters="filters"
-				data-action="songs.getData"
-				name="admin-test"
-			>
-				<template #column-thumbnailImage="slotProps">
-					<img
-						class="song-thumbnail"
-						:src="slotProps.item.thumbnail"
-						onerror="this.src='/assets/notes-transparent.png'"
-						loading="lazy"
-					/>
-				</template>
-				<template #column-thumbnailUrl="slotProps">
-					<a :href="slotProps.item.thumbnail" target="_blank">
-						{{ slotProps.item.thumbnail }}
-					</a>
-				</template>
-				<template #column-_id="slotProps">
-					<span :title="slotProps.item._id">{{
-						slotProps.item._id
-					}}</span>
-				</template>
-				<template #column-youtubeId="slotProps">
-					<a
-						:href="
-							'https://www.youtube.com/watch?v=' +
-							`${slotProps.item.youtubeId}`
-						"
-						target="_blank"
-					>
-						{{ slotProps.item.youtubeId }}
-					</a>
-				</template>
-				<template #column-title="slotProps">
-					<span :title="slotProps.item.title">{{
-						slotProps.item.title
-					}}</span>
-				</template>
-				<template #column-artists="slotProps">
-					<span :title="slotProps.item.artists.join(', ')">{{
-						slotProps.item.artists.join(", ")
-					}}</span>
-				</template>
-				<template #column-genres="slotProps">
-					<span :title="slotProps.item.genres.join(', ')">{{
-						slotProps.item.genres.join(", ")
-					}}</span>
-				</template>
-				<template #column-requestedBy="slotProps">
-					<user-id-to-username
-						:user-id="slotProps.item.requestedBy"
-						:link="true"
-					/>
-				</template>
-				<template #bulk-actions="slotProps">
-					<div class="song-bulk-actions">
-						<i
-							class="material-icons edit-songs-icon"
-							@click.prevent="editMany(slotProps.item)"
-							content="Edit Songs"
-							v-tippy
-						>
-							edit
-						</i>
-						<i
-							class="material-icons verify-songs-icon"
-							@click.prevent="verifyMany(slotProps.item)"
-							content="Verify Songs"
-							v-tippy
-						>
-							check_circle
-						</i>
-						<i
-							class="material-icons unverify-songs-icon"
-							@click.prevent="unverifyMany(slotProps.item)"
-							content="Unverify Songs"
-							v-tippy
-						>
-							cancel
-						</i>
-						<i
-							class="material-icons tag-songs-icon"
-							@click.prevent="tagMany(slotProps.item)"
-							content="Tag Songs"
-							v-tippy
-						>
-							local_offer
-						</i>
-						<i
-							class="material-icons artists-songs-icon"
-							@click.prevent="setArtists(slotProps.item)"
-							content="Set Artists"
-							v-tippy
-						>
-							group
-						</i>
-						<i
-							class="material-icons genres-songs-icon"
-							@click.prevent="setGenres(slotProps.item)"
-							content="Set Genres"
-							v-tippy
-						>
-							theater_comedy
-						</i>
-						<i
-							class="material-icons delete-songs-icon"
-							@click.prevent="
-								confirmAction({
-									message:
-										'Removing this song will remove it from all playlists and cause a ratings recalculation.',
-									action: 'deleteMany',
-									params: slotProps.item
-								})
-							"
-							content="Delete Songs"
-							v-tippy
-						>
-							delete_forever
-						</i>
-					</div>
-				</template>
-				<!-- <template #bulk-actions-right="slotProps">
-				</template> -->
-			</advanced-table>
-		</div>
-		<edit-song v-if="modals.editSong" song-type="songs" :key="song._id" />
-		<report v-if="modals.report" />
-		<confirm v-if="modals.confirm" @confirmed="handleConfirmed()" />
-	</div>
-</template>
-
-<script>
-import { mapState, mapActions } from "vuex";
-import { defineAsyncComponent } from "vue";
-
-import Toast from "toasters";
-import AdvancedTable from "@/components/AdvancedTable.vue";
-import UserIdToUsername from "@/components/UserIdToUsername.vue";
-
-export default {
-	components: {
-		AdvancedTable,
-		UserIdToUsername,
-		EditSong: defineAsyncComponent(() =>
-			import("@/components/modals/EditSong")
-		),
-		Report: defineAsyncComponent(() =>
-			import("@/components/modals/Report.vue")
-		),
-		Confirm: defineAsyncComponent(() =>
-			import("@/components/modals/Confirm.vue")
-		)
-	},
-	data() {
-		return {
-			columnDefault: {
-				sortable: true,
-				hidable: true,
-				defaultVisibility: "shown",
-				draggable: true,
-				resizable: true,
-				minWidth: 200,
-				maxWidth: 600
-			},
-			columns: [
-				{
-					name: "thumbnailImage",
-					displayName: "Thumb",
-					properties: ["thumbnail"],
-					sortable: false,
-					minWidth: 75,
-					defaultWidth: 75,
-					maxWidth: 75,
-					resizable: false
-				},
-				{
-					name: "_id",
-					displayName: "Musare ID",
-					properties: ["_id"],
-					sortProperty: "_id",
-					minWidth: 215,
-					defaultWidth: 215
-				},
-				{
-					name: "youtubeId",
-					displayName: "YouTube ID",
-					properties: ["youtubeId"],
-					sortProperty: "youtubeId",
-					minWidth: 120,
-					defaultWidth: 120
-				},
-				{
-					name: "title",
-					displayName: "Title",
-					properties: ["title"],
-					sortProperty: "title"
-				},
-				{
-					name: "artists",
-					displayName: "Artists",
-					properties: ["artists"],
-					sortable: false
-				},
-				{
-					name: "genres",
-					displayName: "Genres",
-					properties: ["genres"],
-					sortable: false
-				},
-				{
-					name: "thumbnailUrl",
-					displayName: "Thumbnail (URL)",
-					properties: ["thumbnail"],
-					sortProperty: "thumbnail",
-					defaultVisibility: "hidden"
-				},
-				{
-					name: "requestedBy",
-					displayName: "Requested By",
-					properties: ["requestedBy"],
-					sortProperty: "requestedBy",
-					defaultWidth: 200
-				}
-			],
-			filters: [
-				{
-					name: "_id",
-					displayName: "Musare ID",
-					property: "_id",
-					filterTypes: ["exact"],
-					defaultFilterType: "exact"
-				},
-				{
-					name: "youtubeId",
-					displayName: "YouTube ID",
-					property: "youtubeId",
-					filterTypes: ["contains", "exact", "regex"],
-					defaultFilterType: "contains"
-				},
-				{
-					name: "title",
-					displayName: "Title",
-					property: "title",
-					filterTypes: ["contains", "exact", "regex"],
-					defaultFilterType: "contains"
-				},
-				{
-					name: "artists",
-					displayName: "Artists",
-					property: "artists",
-					filterTypes: ["contains", "exact", "regex"],
-					defaultFilterType: "contains"
-				},
-				{
-					name: "genres",
-					displayName: "Genres",
-					property: "genres",
-					filterTypes: ["contains", "exact", "regex"],
-					defaultFilterType: "contains"
-				},
-				{
-					name: "thumbnail",
-					displayName: "Thumbnail",
-					property: "thumbnail",
-					filterTypes: ["contains", "exact", "regex"],
-					defaultFilterType: "contains"
-				},
-				{
-					name: "requestedBy",
-					displayName: "Requested By",
-					property: "requestedBy",
-					filterTypes: ["contains", "exact", "regex"],
-					defaultFilterType: "contains"
-				}
-			],
-			confirm: {
-				message: "",
-				action: "",
-				params: null
-			}
-		};
-	},
-	computed: {
-		...mapState("modalVisibility", {
-			modals: state => state.modals
-		}),
-		...mapState("modals/editSong", {
-			song: state => state.song
-		})
-	},
-	mounted() {},
-	beforeUnmount() {},
-	methods: {
-		editMany(selectedRows) {
-			if (selectedRows.length === 1) {
-				this.editSong(selectedRows[0]);
-				this.openModal("editSong");
-			} else {
-				new Toast("Bulk editing not yet implemented.");
-			}
-		},
-		verifyMany() {
-			new Toast("Bulk verifying not yet implemented.");
-		},
-		unverifyMany() {
-			new Toast("Bulk unverifying not yet implemented.");
-		},
-		tagMany() {
-			new Toast("Bulk tagging not yet implemented.");
-		},
-		setArtists() {
-			new Toast("Bulk setting artists not yet implemented.");
-		},
-		setGenres() {
-			new Toast("Bulk setting genres not yet implemented.");
-		},
-		deleteMany() {
-			new Toast("Bulk deleting not yet implemented.");
-		},
-		confirmAction(confirm) {
-			this.confirm = confirm;
-			this.updateConfirmMessage(confirm.message);
-			this.openModal("confirm");
-		},
-		handleConfirmed() {
-			const { action, params } = this.confirm;
-			if (typeof this[action] === "function") {
-				if (params) this[action](params);
-				else this[action]();
-			}
-			this.confirm = {
-				message: "",
-				action: "",
-				params: null
-			};
-		},
-		...mapActions("modals/editSong", ["editSong"]),
-		...mapActions("modals/confirm", ["updateConfirmMessage"]),
-		...mapActions("modalVisibility", ["openModal"])
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-.song-thumbnail {
-	display: block;
-	max-width: 50px;
-	margin: 0 auto;
-}
-
-.bulk-popup {
-	.song-bulk-actions {
-		display: flex;
-		flex-direction: row;
-		width: 100%;
-		justify-content: space-evenly;
-
-		.material-icons {
-			position: relative;
-			top: 6px;
-			margin-left: 5px;
-			cursor: pointer;
-			color: var(--primary-color);
-
-			&:hover,
-			&:focus {
-				filter: brightness(90%);
-			}
-		}
-		.verify-songs-icon {
-			color: var(--green);
-		}
-		.unverify-songs-icon,
-		.delete-songs-icon {
-			color: var(--dark-red);
-		}
-	}
-}
-</style>