Requests navigation hotkeys

tarampampam · Nov 16, 2022 · 43c99f1 · 43c99f1
1 parent 023aaba
commit 43c99f1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,11 +9,14 @@ The format is based on [Keep a Changelog][keepachangelog] and this project adher
 ### Added
 
 - Environment variable `PORT` support (is an alias for `LISTEN_PORT`)
+- Requests navigation hotkeys (up/left and down/right) [#203]
 
 ### Fixed
 
 - HEX view improved
 
+[#203]:https://github.com/tarampampam/webhook-tester/issues/203
+
 ## v1.0.0
 
 ### Added

diff --git a/web/src/views/components/requests-navigator.vue b/web/src/views/components/requests-navigator.vue
@@ -82,6 +82,14 @@ export default defineComponent({
     },
   },
 
+  mounted() {
+    window.addEventListener('keydown', this.arrowKeysHandler)
+  },
+
+  unmounted() {
+    window.removeEventListener('keydown', this.arrowKeysHandler)
+  },
+
   computed: {
     isFirstRequest(): boolean {
       return this.requests.length > 0 && this.requests[0].UUID === this.requestUUID
@@ -105,6 +113,14 @@ export default defineComponent({
       return undefined
     },
 
+    arrowKeysHandler(e: KeyboardEvent): void {
+      if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
+        this.navigateNextRequest()
+      } else if (e.code === 'ArrowUp' || e.code === 'ArrowLeft') {
+        this.navigatePreviousRequest()
+      }
+    },
+
     navigateFirstRequest(): void {
       const first = this.requests[0]