feat(Admin): Run job dropdown to replace buttons

frontend/src/App.vue

@@ -340,6 +340,15 @@ export default {
 		}
 	}
 
+	.control.has-addons .button {
+		background-color: var(--dark-grey-2);
+		border: 0;
+
+		i {
+			color: var(--white);
+		}
+	}
+
 	h1,
 	h2,
 	h3,

frontend/src/components/RunJobDropdown.vue

@@ -0,0 +1,113 @@
+<template>
+	<tippy
+		class="runJobDropdown"
+		:touch="true"
+		:interactive="true"
+		placement="bottom-start"
+		theme="dropdown"
+		ref="dropdown"
+		trigger="click"
+		append-to="parent"
+		@show="
+			() => {
+				showJobDropdown = true;
+			}
+		"
+		@hide="
+			() => {
+				showJobDropdown = false;
+			}
+		"
+	>
+		<div class="control has-addons" ref="trigger">
+			<button class="button is-primary">Run Job</button>
+			<button class="button">
+				<i class="material-icons">
+					{{ showJobDropdown ? "expand_more" : "expand_less" }}
+				</i>
+			</button>
+		</div>
+
+		<template #content>
+			<div class="nav-dropdown-items" v-if="jobs.length > 0">
+				<confirm
+					v-for="(job, index) in jobs"
+					:key="`job-${index}`"
+					placement="top"
+					@confirm="runJob(job)"
+				>
+					<button class="nav-item button" :title="job.name">
+						<i
+							@click="runJob(job)"
+							class="material-icons icon-with-button"
+							content="Run Job"
+							v-tippy
+							>play_arrow</i
+						>
+						<p>{{ job.name }}</p>
+					</button>
+				</confirm>
+			</div>
+			<p v-else class="no-jobs">No jobs available.</p>
+		</template>
+	</tippy>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+import Toast from "toasters";
+import Confirm from "@/components/Confirm.vue";
+
+export default {
+	components: {
+		Confirm
+	},
+	props: {
+		jobs: {
+			type: Array,
+			default: () => []
+		}
+	},
+	data() {
+		return {
+			showJobDropdown: false
+		};
+	},
+	computed: {
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
+	methods: {
+		runJob(job) {
+			new Toast(`Running job: ${job.name}`);
+			this.socket.dispatch(job.socket, data => {
+				if (data.status !== "success")
+					new Toast({
+						content: `Error: ${data.message}`,
+						timeout: 8000
+					});
+				else new Toast({ content: data.message, timeout: 4000 });
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.nav-dropdown-items {
+	& > span:not(:last-child) .nav-item.button {
+		margin-bottom: 10px !important;
+	}
+	.nav-item.button .icon-with-button {
+		font-size: 22px;
+		color: var(--primary-color);
+	}
+}
+
+.no-jobs {
+	text-align: center;
+	margin: 10px 0;
+}
+</style>

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

@@ -3,54 +3,7 @@
 		<page-metadata title="Admin | Playlists" />
 		<div class="container">
 			<div class="button-row">
-				<confirm
-					placement="bottom"
-					@confirm="deleteOrphanedStationPlaylists()"
-				>
-					<button class="button is-danger">
-						Delete orphaned station playlists
-					</button>
-				</confirm>
-				<confirm
-					placement="bottom"
-					@confirm="deleteOrphanedGenrePlaylists()"
-				>
-					<button class="button is-danger">
-						Delete orphaned genre playlists
-					</button>
-				</confirm>
-				<confirm
-					placement="bottom"
-					@confirm="requestOrphanedPlaylistSongs()"
-				>
-					<button class="button is-danger">
-						Request orphaned playlist songs
-					</button>
-				</confirm>
-				<confirm
-					placement="bottom"
-					@confirm="clearAndRefillAllStationPlaylists()"
-				>
-					<button class="button is-danger">
-						Clear and refill all station playlists
-					</button>
-				</confirm>
-				<confirm
-					placement="bottom"
-					@confirm="clearAndRefillAllGenrePlaylists()"
-				>
-					<button class="button is-danger">
-						Clear and refill all genre playlists
-					</button>
-				</confirm>
-				<confirm
-					placement="bottom"
-					@confirm="createMissingGenrePlaylists()"
-				>
-					<button class="button is-danger">
-						Create missing genre playlists
-					</button>
-				</confirm>
+				<run-job-dropdown :jobs="jobs" />
 			</div>
 			<table class="table">
 				<thead>
@@ -109,8 +62,7 @@
 import { mapState, mapActions, mapGetters } from "vuex";
 import { defineAsyncComponent } from "vue";
 
-import Toast from "toasters";
-import Confirm from "@/components/Confirm.vue";
+import RunJobDropdown from "@/components/RunJobDropdown.vue";
 
 import UserIdToUsername from "@/components/UserIdToUsername.vue";
 
@@ -129,11 +81,37 @@ export default {
 		EditSong: defineAsyncComponent(() =>
 			import("@/components/modals/EditSong")
 		),
-		Confirm
+		RunJobDropdown
 	},
 	data() {
 		return {
-			utils
+			utils,
+			jobs: [
+				{
+					name: "Delete orphaned station playlists",
+					socket: "playlists.deleteOrphanedStationPlaylists"
+				},
+				{
+					name: "Delete orphaned genre playlists",
+					socket: "playlists.deleteOrphanedGenrePlaylists"
+				},
+				{
+					name: "Request orphaned playlist songs",
+					socket: "playlists.requestOrphanedPlaylistSongs"
+				},
+				{
+					name: "Clear and refill all station playlists",
+					socket: "playlists.clearAndRefillAllStationPlaylists"
+				},
+				{
+					name: "Clear and refill all genre playlists",
+					socket: "playlists.clearAndRefillAllGenrePlaylists"
+				},
+				{
+					name: "Create missing genre playlists",
+					socket: "playlists.createMissingGenrePlaylists"
+				}
+			]
 		};
 	},
 	computed: {
@@ -222,74 +200,6 @@ export default {
 			});
 			return this.utils.formatTimeLong(length);
 		},
-		deleteOrphanedStationPlaylists() {
-			this.socket.dispatch(
-				"playlists.deleteOrphanedStationPlaylists",
-				res => {
-					if (res.status === "success") new Toast(res.message);
-					else new Toast(`Error: ${res.message}`);
-				}
-			);
-		},
-		deleteOrphanedGenrePlaylists() {
-			this.socket.dispatch(
-				"playlists.deleteOrphanedGenrePlaylists",
-				res => {
-					if (res.status === "success") new Toast(res.message);
-					else new Toast(`Error: ${res.message}`);
-				}
-			);
-		},
-		requestOrphanedPlaylistSongs() {
-			this.socket.dispatch(
-				"playlists.requestOrphanedPlaylistSongs",
-				res => {
-					if (res.status === "success") new Toast(res.message);
-					else new Toast(`Error: ${res.message}`);
-				}
-			);
-		},
-		clearAndRefillAllStationPlaylists() {
-			this.socket.dispatch(
-				"playlists.clearAndRefillAllStationPlaylists",
-				res => {
-					if (res.status === "success")
-						new Toast({ content: res.message, timeout: 4000 });
-					else
-						new Toast({
-							content: `Error: ${res.message}`,
-							timeout: 4000
-						});
-				}
-			);
-		},
-		clearAndRefillAllGenrePlaylists() {
-			this.socket.dispatch(
-				"playlists.clearAndRefillAllGenrePlaylists",
-				res => {
-					if (res.status === "success")
-						new Toast({ content: res.message, timeout: 4000 });
-					else
-						new Toast({
-							content: `Error: ${res.message}`,
-							timeout: 4000
-						});
-				}
-			);
-		},
-		createMissingGenrePlaylists() {
-			this.socket.dispatch(
-				"playlists.createMissingGenrePlaylists",
-				data => {
-					if (data.status !== "success")
-						new Toast({
-							content: `Error: ${data.message}`,
-							timeout: 8000
-						});
-					else new Toast({ content: data.message, timeout: 4000 });
-				}
-			);
-		},
 		...mapActions("modalVisibility", ["openModal"]),
 		...mapActions("user/playlists", ["editPlaylist"]),
 		...mapActions("admin/playlists", [

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

@@ -29,17 +29,7 @@
 				>
 					Import album
 				</button>
-				<confirm placement="bottom" @confirm="updateAllSongs()">
-					<button class="button is-danger">Update all songs</button>
-				</confirm>
-				<confirm
-					placement="bottom"
-					@confirm="recalculateAllSongRatings()"
-				>
-					<button class="button is-danger">
-						Recalculate all song ratings
-					</button>
-				</confirm>
+				<run-job-dropdown :jobs="jobs" />
 			</div>
 			<br />
 			<div class="box">
@@ -337,6 +327,7 @@ import keyboardShortcuts from "@/keyboardShortcuts";
 import UserIdToUsername from "@/components/UserIdToUsername.vue";
 import FloatingBox from "@/components/FloatingBox.vue";
 import Confirm from "@/components/Confirm.vue";
+import RunJobDropdown from "@/components/RunJobDropdown.vue";
 
 import ScrollAndFetchHandler from "@/mixins/ScrollAndFetchHandler.vue";
 
@@ -358,7 +349,8 @@ export default {
 		),
 		UserIdToUsername,
 		FloatingBox,
-		Confirm
+		Confirm,
+		RunJobDropdown
 	},
 	mixins: [ScrollAndFetchHandler],
 	data() {
@@ -374,7 +366,17 @@ export default {
 			},
 			searchBoxShown: true,
 			filterArtistBoxShown: false,
-			filterGenreBoxShown: false
+			filterGenreBoxShown: false,
+			jobs: [
+				{
+					name: "Update all songs",
+					socket: "songs.updateAll"
+				},
+				{
+					name: "Recalculate all song ratings",
+					socket: "songs.recalculateAllRatings"
+				}
+			]
 		};
 	},
 	computed: {
@@ -547,22 +549,6 @@ export default {
 				new Toast(res.message);
 			});
 		},
-		updateAllSongs() {
-			new Toast("Updating all songs, this could take a very long time.");
-			this.socket.dispatch("songs.updateAll", res => {
-				if (res.status === "success") new Toast(res.message);
-				else new Toast(res.message);
-			});
-		},
-		recalculateAllSongRatings() {
-			new Toast(
-				"Recalculating all song ratings, this could take a bit of time."
-			);
-			this.socket.dispatch("songs.recalculateAllRatings", res => {
-				if (res.status === "success") new Toast(res.message);
-				else new Toast(res.message);
-			});
-		},
 		getSet() {
 			if (this.isGettingSet) return;
 			if (this.position >= this.maxPosition) return;

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

@@ -9,11 +9,7 @@
 				>
 					Create Station
 				</button>
-				<confirm placement="bottom" @confirm="clearEveryStationQueue()">
-					<button class="button is-danger">
-						Clear every station queue
-					</button>
-				</confirm>
+				<run-job-dropdown :jobs="jobs" />
 			</div>
 			<table class="table">
 				<thead>
@@ -99,6 +95,7 @@ import { defineAsyncComponent } from "vue";
 import Toast from "toasters";
 import UserIdToUsername from "@/components/UserIdToUsername.vue";
 import Confirm from "@/components/Confirm.vue";
+import RunJobDropdown from "@/components/RunJobDropdown.vue";
 import ws from "@/ws";
 
 export default {
@@ -125,11 +122,18 @@ export default {
 			import("@/components/modals/CreateStation.vue")
 		),
 		UserIdToUsername,
-		Confirm
+		Confirm,
+		RunJobDropdown
 	},
 	data() {
 		return {
-			editingStationId: ""
+			editingStationId: "",
+			jobs: [
+				{
+					name: "Clear every station queue",
+					socket: "stations.clearEveryStationQueue"
+				}
+			]
 		};
 	},
 	computed: {
@@ -166,12 +170,6 @@ export default {
 			this.editingStationId = station._id;
 			this.openModal("manageStation");
 		},
-		clearEveryStationQueue() {
-			this.socket.dispatch("stations.clearEveryStationQueue", res => {
-				if (res.status === "success") new Toast(res.message);
-				else new Toast(`Error: ${res.message}`);
-			});
-		},
 		init() {
 			this.socket.dispatch("stations.index", res => {
 				if (res.status === "success")