diff --git a/CHANGELOG.md b/CHANGELOG.md index c9157338..f4218960 100644 --- 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 index 2b228bdf..349d71b5 100644 --- 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]