Added nav buttons in the document detail view

Sometimes, when you are looking for a document, you need to go into the document-detail view
to read the pdf. To view the next document in the detail view, normally you would go back and
then click on the next.

Here I added two buttons to the toolbar to traverse throught the documents easily.

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -34,11 +34,25 @@
         </svg>&nbsp;<span class="d-none d-lg-inline" i18n>More like this</span>
     </button>
 
-    <button type="button" class="btn btn-sm btn-outline-primary" (click)="close()">
+    <button type="button" class="btn btn-sm btn-outline-primary me-2" (click)="close()">
         <svg class="buttonicon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#x" />
         </svg>&nbsp;<span class="d-none d-lg-inline" i18n>Close</span>
     </button>
+
+    <div class="button-group">
+        <button type="button" class="btn btn-sm btn-outline-primary me-2" (click)="previousDoc()" [disabled]="!hasPrevious()">
+            <svg class="buttonicon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#arrow-left" />
+            </svg>&nbsp;
+        </button>
+        <button type="button" class="btn btn-sm btn-outline-primary" (click)="nextDoc()"  [disabled]="!hasNext()">
+            <svg class="buttonicon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
+            </svg>&nbsp;
+        </button>
+    </div>
+
 </app-page-header>
 
 

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -292,6 +292,24 @@ export class DocumentDetailComponent implements OnInit, OnDestroy, DirtyComponen
     return this.documentListViewService.hasNext(this.documentId)
   }
 
+  hasPrevious() {
+    return this.documentListViewService.hasPrevious(this.documentId)
+  }
+
+  nextDoc() {
+    this.documentListViewService.getNext(this.document.id).subscribe((nextDocId: number) => {
+      this.router.navigate(['documents', nextDocId])
+      this.titleInput?.focus()
+    })
+  }
+  
+  previousDoc () {
+    this.documentListViewService.getPrevious(this.document.id).subscribe((prevDocId: number) => {
+      this.router.navigate(['documents', prevDocId])
+      this.titleInput?.focus()
+    })
+  }
+
   pdfPreviewLoaded(pdf: PDFDocumentProxy) {
     this.previewNumPages = pdf.numPages
   }

src-ui/src/app/services/document-list-view.service.ts

@@ -262,6 +262,13 @@ export class DocumentListViewService {
     }
   }
 
+  hasPrevious(doc: number) {
+    if (this.documents) {
+      let index = this.documents.findIndex(d => d.id == doc)
+      return !(index == 0 && this.currentPage == 1)
+    }
+  }
+
   getNext(currentDocId: number): Observable<number> {
     return new Observable(nextDocId => {
       if (this.documents != null) {
@@ -286,6 +293,30 @@ export class DocumentListViewService {
     })
   }
 
+  getPrevious(currentDocId: number): Observable<number> {
+    return new Observable(prevDocId => {
+      if (this.documents != null) {
+
+        let index = this.documents.findIndex(d => d.id == currentDocId)
+
+        if (index != 0) {
+          prevDocId.next(this.documents[index-1].id)
+          prevDocId.complete()
+        } else if (this.currentPage > 1) {
+          this.currentPage -= 1
+          this.reload(() => {
+            prevDocId.next(this.documents[this.documents.length - 1].id)
+            prevDocId.complete()
+          })
+        } else {
+          prevDocId.complete()
+        }
+      } else {
+        prevDocId.complete()
+      }
+    })
+  }
+
   updatePageSize() {
     let newPageSize = this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE)
     if (newPageSize != this.currentPageSize) {