From 635efdbd7bc785da57bca239a8a45baff72332dc Mon Sep 17 00:00:00 2001
From: Panagiotis Doulgeris <45369229+Pantastisch@users.noreply.github.com>
Date: Sun, 27 Aug 2023 22:06:49 +0200
Subject: [PATCH] Enhancement: Add support for arrow key navigation in
 document-detail view

---
 .../document-detail.component.html            |  4 +-
 .../document-detail.component.spec.ts         | 68 +++++++++++++++++++
 .../document-detail.component.ts              | 12 ++++
 3 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index 41e7a78d1..907dff856 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -47,12 +47,12 @@
     </button>
 
     <div class="button-group">
-        <button type="button" class="btn btn-sm btn-outline-primary me-2" i18n-title title="Previous" (click)="previousDoc()" [disabled]="!hasPrevious()">
+        <button type="button" class="btn btn-sm btn-outline-primary me-2" i18n-title title="Previous" (click)="previousDoc()" [disabled]="!hasPrevious()" (keyup)="onLeftArrowKeyUp($event)">
             <svg class="buttonicon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#arrow-left" />
             </svg>
         </button>
-        <button type="button" class="btn btn-sm btn-outline-primary"  i18n-title title="Next" (click)="nextDoc()" [disabled]="!hasNext()">
+        <button type="button" class="btn btn-sm btn-outline-primary"  i18n-title title="Next" (click)="nextDoc()" [disabled]="!hasNext()" (keyup)="onRightArrowKeyUp($event)">
             <svg class="buttonicon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
             </svg>
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
index bbee477cc..19d6692c1 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
@@ -643,6 +643,74 @@ describe('DocumentDetailComponent', () => {
     expect(component.password).toEqual('foobar')
   })
 
+  it('should support Left Arrow key for previous page', () => {
+    initNormally()
+    const previousMock = jest.spyOn(component, "hasPrevious")
+    previousMock.mockReturnValue(true)
+    const previousSpy = jest.spyOn(documentListViewService, 'getPrevious')
+    previousSpy.mockReturnValue(of(100))
+    fixture.detectChanges()
+    const prevBtn = fixture.debugElement.query(
+      By.css('button[title="Previous"]')
+    )
+    expect(prevBtn).toBeDefined()
+    prevBtn.nativeElement.dispatchEvent(
+      new KeyboardEvent('keyup', { code: 'ArrowLeft' })
+    )
+    expect(previousSpy).toHaveBeenCalled()
+  })
+
+  it('should not support Left Arrow key for previous page if no page exists', () => {
+    initNormally()
+    const previousMock = jest.spyOn(component, "hasPrevious")
+    previousMock.mockReturnValue(false)
+    const previousSpy = jest.spyOn(documentListViewService, 'getPrevious')
+    previousSpy.mockReturnValue(of(100))
+    fixture.detectChanges()
+    const prevBtn = fixture.debugElement.query(
+      By.css('button[title="Previous"]')
+    )
+    expect(prevBtn).toBeDefined()
+    prevBtn.nativeElement.dispatchEvent(
+      new KeyboardEvent('keyup', { code: 'ArrowLeft' })
+    )
+    expect(previousSpy).not.toHaveBeenCalled()
+  })
+
+  it('should support Right Arrow key for next page', () => {
+    initNormally()
+    const nextMock = jest.spyOn(component, "hasNext")
+    nextMock.mockReturnValue(true)
+    const nextSpy = jest.spyOn(documentListViewService, 'getNext')
+    nextSpy.mockReturnValue(of(100))
+    fixture.detectChanges()
+    const nextBtn = fixture.debugElement.query(
+      By.css('button[title="Next"]')
+    )
+    expect(nextBtn).toBeDefined()
+    nextBtn.nativeElement.dispatchEvent(
+      new KeyboardEvent('keyup', { code: 'ArrowRight' })
+    )
+    expect(nextSpy).toHaveBeenCalled()
+  })
+
+  it('should not support Right Arrow key for next page if no page exists', () => {
+    initNormally()
+    const nextMock = jest.spyOn(component, "hasNext")
+    nextMock.mockReturnValue(false)
+    const nextSpy = jest.spyOn(documentListViewService, 'getNext')
+    nextSpy.mockReturnValue(of(100))
+    fixture.detectChanges()
+    const nextBtn = fixture.debugElement.query(
+      By.css('button[title="Next"]')
+    )
+    expect(nextBtn).toBeDefined()
+    nextBtn.nativeElement.dispatchEvent(
+      new KeyboardEvent('keyup', { code: 'ArrowRight' })
+    )
+    expect(nextSpy).not.toHaveBeenCalled()
+  })
+
   it('should update n pages after pdf loaded', () => {
     initNormally()
     component.pdfPreviewLoaded({ numPages: 1000 } as any)
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index 7337028da..20fc4975c 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -731,6 +731,18 @@ export class DocumentDetailComponent
     }
   }
 
+  onLeftArrowKeyUp(event: KeyboardEvent) {
+    if ('ArrowLeft' == event.code && this.hasPrevious()) {
+      this.previousDoc()
+    }
+  }
+
+  onRightArrowKeyUp(event: KeyboardEvent) {
+    if ('ArrowRight' == event.code && this.hasNext()) {
+      this.nextDoc()
+    }
+  }
+
   onPasswordKeyUp(event: KeyboardEvent) {
     if ('Enter' == event.key) {
       this.password = (event.target as HTMLInputElement).value