refactor: started working on admin/AdvancedTable keyboard shortcuts

frontend/src/components/AdvancedTable.vue

@@ -758,6 +758,7 @@ import draggable from "vuedraggable";
 
 import Toast from "toasters";
 
+import keyboardShortcuts from "@/keyboardShortcuts";
 import ws from "@/ws";
 
 export default {
@@ -787,6 +788,7 @@ export default {
 		name: { type: String, default: null },
 		maxWidth: { type: Number, default: 1880 },
 		query: { type: Boolean, default: true },
+		keyboardShortcuts: { type: Boolean, default: true },
 		events: { type: Object, default: () => {} }
 	},
 	data() {
@@ -1125,11 +1127,127 @@ export default {
 					);
 				this.removeData(index);
 			});
+
+		if (this.keyboardShortcuts) {
+			// Navigation section
+
+			// Page navigation section
+			keyboardShortcuts.registerShortcut("advancedTable.previousPage", {
+				keyCode: 37, // 'Left arrow' key
+				ctrl: true,
+				preventDefault: true,
+				handler: () => {
+					// Previous page
+					console.log("Previous page");
+				}
+			});
+
+			keyboardShortcuts.registerShortcut("advancedTable.nextPage", {
+				keyCode: 39, // 'Right arrow' key
+				ctrl: true,
+				preventDefault: true,
+				handler: () => {
+					// Next page
+					console.log("Next page");
+				}
+			});
+
+			keyboardShortcuts.registerShortcut("advancedTable.firstPage", {
+				keyCode: 37, // 'Left arrow' key
+				ctrl: true,
+				shift: true,
+				preventDefault: true,
+				handler: () => {
+					// First page
+					console.log("First page");
+				}
+			});
+
+			keyboardShortcuts.registerShortcut("advancedTable.lastPage", {
+				keyCode: 39, // 'Right arrow' key
+				ctrl: true,
+				shift: true,
+				preventDefault: true,
+				handler: () => {
+					// Last page
+					console.log("Last page");
+				}
+			});
+
+			// Reset localStorage section
+			keyboardShortcuts.registerShortcut(
+				"advancedTable.resetLocalStorage",
+				{
+					keyCode: 116, // 'F5' key
+					ctrl: true,
+					preventDefault: true,
+					handler: () => {
+						// Reset local storage
+						console.log("Reset local storage");
+					}
+				}
+			);
+
+			// Selecting section
+
+			// Popup actions section
+			for (let i = 1; i <= 9; i += 1) {
+				keyboardShortcuts.registerShortcut(
+					`advancedTable.executePopupAction${i}`,
+					{
+						keyCode: 48 + i, // '1-9' keys, where 49 is 1 and 57 is 9
+						ctrl: true,
+						preventDefault: true,
+						handler: () => {
+							// Execute popup action 1-9
+							console.log(`Execute popup action ${i}`);
+						}
+					}
+				);
+			}
+
+			keyboardShortcuts.registerShortcut(
+				`advancedTable.selectPopupAction1`,
+				{
+					keyCode: 48, // '0' key
+					ctrl: true,
+					preventDefault: true,
+					handler: () => {
+						// Select popup action 0
+						console.log(`Select popup action`);
+					}
+				}
+			);
+		}
 	},
 	unmounted() {
 		window.removeEventListener("resize", this.onWindowResize);
 		if (this.storeTableSettingsDebounceTimeout)
 			clearTimeout(this.storeTableSettingsDebounceTimeout);
+
+		if (this.keyboardShortcuts) {
+			const shortcutNames = [
+				"advancedTable.previousPage",
+				"advancedTable.nextPage",
+				"advancedTable.firstPage",
+				"advancedTable.lastPage",
+				"advancedTable.resetLocalStorage",
+				"advancedTable.executePopupAction1",
+				"advancedTable.executePopupAction2",
+				"advancedTable.executePopupAction3",
+				"advancedTable.executePopupAction4",
+				"advancedTable.executePopupAction5",
+				"advancedTable.executePopupAction6",
+				"advancedTable.executePopupAction7",
+				"advancedTable.executePopupAction8",
+				"advancedTable.executePopupAction9",
+				"advancedTable.selectPopupAction1"
+			];
+
+			shortcutNames.forEach(shortcutName => {
+				keyboardShortcuts.unregisterShortcut(shortcutName);
+			});
+		}
 	},
 	methods: {
 		init() {

frontend/src/pages/Admin/index.vue

@@ -111,6 +111,76 @@
 			<punishments v-if="currentTab == 'punishments'" />
 		</div>
 
+		<floating-box
+			id="keyboardShortcutsHelper"
+			ref="keyboardShortcutsHelper"
+		>
+			<template #body>
+				<div>
+					<div>
+						<span class="biggest"
+							><b>Keyboard shortcuts helper</b></span
+						>
+						<span
+							><b>Ctrl + /</b> - Toggles this keyboard shortcuts
+							helper</span
+						>
+						<span
+							><b>Ctrl + Shift + /</b> - Resets the position of
+							this keyboard shortcuts helper</span
+						>
+						<hr />
+					</div>
+					<div>
+						<span class="biggest"><b>Table</b></span>
+						<span class="bigger"><b>Navigation</b></span>
+						<span
+							><b>Up / Down arrow keys</b> - Move between
+							rows</span
+						>
+						<hr />
+					</div>
+					<div>
+						<span class="bigger"><b>Page navigation</b></span>
+						<span
+							><b>Ctrl + Left/Right arrow keys</b> - Previous/next
+							page</span
+						>
+						<span
+							><b>Ctrl + Shift + Left/Right arrow keys</b> -
+							First/last page</span
+						>
+						<hr />
+					</div>
+					<div>
+						<span class="bigger"><b>Reset localStorage</b></span>
+						<span><b>Ctrl + F5</b> - Resets localStorage</span>
+						<hr />
+					</div>
+					<div>
+						<span class="bigger"><b>Selecting</b></span>
+						<span><b>Space</b> - Selects/unselects a row</span>
+						<span><b>Ctrl + A</b> - Selects all rows</span>
+						<span
+							><b>Shift + Up/Down arrow keys</b> - Selects all
+							rows in between</span
+						>
+						<span
+							><b>Ctrl + Up/Down arrow keys</b> - Unselects all
+							rows in between</span
+						>
+						<hr />
+					</div>
+					<div>
+						<span class="bigger"><b>Popup actions</b></span>
+						<span><b>Ctrl + 1-9</b> - Execute action 1-9</span>
+						<span><b>Ctrl + 0</b> - Select action 1</span>
+						<hr />
+					</div>
+				</div>
+			</template>
+		</floating-box>
+
 		<main-footer />
 	</div>
 </template>
@@ -119,13 +189,17 @@
 import { mapGetters } from "vuex";
 import { defineAsyncComponent } from "vue";
 
+import keyboardShortcuts from "@/keyboardShortcuts";
+
 import MainHeader from "@/components/layout/MainHeader.vue";
 import MainFooter from "@/components/layout/MainFooter.vue";
+import FloatingBox from "@/components/FloatingBox.vue";
 
 export default {
 	components: {
 		MainHeader,
 		MainFooter,
+		FloatingBox,
 		Test: defineAsyncComponent(() => import("./tabs/Test.vue")),
 		Songs: defineAsyncComponent(() => import("./tabs/Songs.vue")),
 		Stations: defineAsyncComponent(() => import("./tabs/Stations.vue")),
@@ -153,9 +227,43 @@ export default {
 	},
 	mounted() {
 		this.changeTab(this.$route.path);
+
+		keyboardShortcuts.registerShortcut(
+			"admin.toggleKeyboardShortcutsHelper",
+			{
+				keyCode: 191, // '/' key
+				ctrl: true,
+				preventDefault: true,
+				handler: () => {
+					this.toggleKeyboardShortcutsHelper();
+				}
+			}
+		);
+
+		keyboardShortcuts.registerShortcut(
+			"admin.resetKeyboardShortcutsHelper",
+			{
+				keyCode: 191, // '/' key
+				ctrl: true,
+				shift: true,
+				preventDefault: true,
+				handler: () => {
+					this.resetKeyboardShortcutsHelper();
+				}
+			}
+		);
 	},
 	beforeUnmount() {
 		this.socket.dispatch("apis.leaveRooms");
+
+		const shortcutNames = [
+			"admin.toggleKeyboardShortcutsHelper",
+			"admin.resetKeyboardShortcutsHelper"
+		];
+
+		shortcutNames.forEach(shortcutName => {
+			keyboardShortcuts.unregisterShortcut(shortcutName);
+		});
 	},
 	methods: {
 		changeTab(path) {
@@ -209,6 +317,12 @@ export default {
 				});
 			this.currentTab = tab;
 			localStorage.setItem("lastAdminPage", tab);
+		},
+		toggleKeyboardShortcutsHelper() {
+			this.$refs.keyboardShortcutsHelper.toggleBox();
+		},
+		resetKeyboardShortcutsHelper() {
+			this.$refs.keyboardShortcutsHelper.resetBox();
 		}
 	}
 };
@@ -351,6 +465,22 @@ export default {
 	}
 }
 
+#keyboardShortcutsHelper {
+	.box-body {
+		.biggest {
+			font-size: 18px;
+		}
+
+		.bigger {
+			font-size: 16px;
+		}
+
+		span {
+			display: block;
+		}
+	}
+}
+
 @media screen and (min-width: 980px) {
 	/deep/ .container {
 		margin: 0 auto;

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

@@ -3,13 +3,6 @@
 		<page-metadata title="Admin | Songs" />
 		<div class="admin-tab">
 			<div class="button-row">
-				<button
-					class="button is-primary"
-					@click="toggleKeyboardShortcutsHelper"
-					@dblclick="resetKeyboardShortcutsHelper"
-				>
-					Keyboard shortcuts helper
-				</button>
 				<button
 					class="button is-primary"
 					@click="openModal('requestSong')"
@@ -272,80 +265,6 @@
 		<report v-if="modals.report" />
 		<request-song v-if="modals.requestSong" />
 		<confirm v-if="modals.confirm" @confirmed="handleConfirmed()" />
-		<floating-box
-			id="keyboardShortcutsHelper"
-			ref="keyboardShortcutsHelper"
-		>
-			<template #body>
-				<div>
-					<div>
-						<span class="biggest"
-							><b>Keyboard shortcuts helper</b></span
-						>
-						<span
-							><b>Ctrl + /</b> - Toggles this keyboard shortcuts
-							helper</span
-						>
-						<span
-							><b>Ctrl + Shift + /</b> - Resets the position of
-							this keyboard shortcuts helper</span
-						>
-						<hr />
-					</div>
-					<div>
-						<span class="biggest"><b>Edit song modal</b></span>
-						<span class="bigger"><b>Navigation</b></span>
-						<span><b>Home</b> - Edit</span>
-						<span><b>End</b> - Edit</span>
-						<hr />
-					</div>
-					<div>
-						<span class="bigger"><b>Player controls</b></span>
-						<span class="bigger"
-							><i>Don't forget to turn off numlock!</i></span
-						>
-						<span><b>Numpad up/down</b> - Volume up/down 10%</span>
-						<span
-							><b>Ctrl + Numpad up/down</b> - Volume up/down
-							1%</span
-						>
-						<span><b>Numpad center</b> - Pause/resume</span>
-						<span><b>Ctrl + Numpad center</b> - Stop</span>
-						<span
-							><b>Numpad Right</b> - Skip to last 10 seconds</span
-						>
-						<hr />
-					</div>
-					<div>
-						<span class="bigger"><b>Form control</b></span>
-						<span
-							><b>Enter</b> - Executes blue button in that
-							input</span
-						>
-						<span
-							><b>Shift + Enter</b> - Executes purple/red button
-							in that input</span
-						>
-						<span
-							><b>Ctrl + Alt + D</b> - Fill in all Discogs
-							fields</span
-						>
-						<hr />
-					</div>
-					<div>
-						<span class="bigger"><b>Modal control</b></span>
-						<span><b>Ctrl + S</b> - Save</span>
-						<span><b>Ctrl + Alt + S</b> - Save and close</span>
-						<span
-							><b>Ctrl + Alt + V</b> - Save, verify and
-							close</span
-						>
-						<span><b>F4</b> - Close without saving</span>
-						<hr />
-					</div>
-				</div>
-			</template>
-		</floating-box>
 	</div>
 </template>
 
@@ -355,11 +274,8 @@ import { defineAsyncComponent } from "vue";
 
 import Toast from "toasters";
 
-import keyboardShortcuts from "@/keyboardShortcuts";
-
 import AdvancedTable from "@/components/AdvancedTable.vue";
 import UserIdToUsername from "@/components/UserIdToUsername.vue";
-import FloatingBox from "@/components/FloatingBox.vue";
 import QuickConfirm from "@/components/QuickConfirm.vue";
 import RunJobDropdown from "@/components/RunJobDropdown.vue";
 
@@ -382,7 +298,6 @@ export default {
 		),
 		AdvancedTable,
 		UserIdToUsername,
-		FloatingBox,
 		QuickConfirm,
 		RunJobDropdown
 	},
@@ -731,41 +646,6 @@ export default {
 				}
 			);
 		}
-
-		keyboardShortcuts.registerShortcut(
-			"songs.toggleKeyboardShortcutsHelper",
-			{
-				keyCode: 191, // '/' key
-				ctrl: true,
-				preventDefault: true,
-				handler: () => {
-					this.toggleKeyboardShortcutsHelper();
-				}
-			}
-		);
-
-		keyboardShortcuts.registerShortcut(
-			"songs.resetKeyboardShortcutsHelper",
-			{
-				keyCode: 191, // '/' key
-				ctrl: true,
-				shift: true,
-				preventDefault: true,
-				handler: () => {
-					this.resetKeyboardShortcutsHelper();
-				}
-			}
-		);
-	},
-	beforeUnmount() {
-		const shortcutNames = [
-			"songs.toggleKeyboardShortcutsHelper",
-			"songs.resetKeyboardShortcutsHelper"
-		];
-
-		shortcutNames.forEach(shortcutName => {
-			keyboardShortcuts.unregisterShortcut(shortcutName);
-		});
 	},
 	methods: {
 		editOne(song) {
@@ -831,12 +711,6 @@ export default {
 				}
 			);
 		},
-		toggleKeyboardShortcutsHelper() {
-			this.$refs.keyboardShortcutsHelper.toggleBox();
-		},
-		resetKeyboardShortcutsHelper() {
-			this.$refs.keyboardShortcutsHelper.resetBox();
-		},
 		getDateFormatted(createdAt) {
 			const date = new Date(createdAt);
 			const year = date.getFullYear();
@@ -871,22 +745,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#keyboardShortcutsHelper {
-	.box-body {
-		.biggest {
-			font-size: 18px;
-		}
-
-		.bigger {
-			font-size: 16px;
-		}
-
-		span {
-			display: block;
-		}
-	}
-}
-
 .song-thumbnail {
 	display: block;
 	max-width: 50px;