From 2d1efd0b4e5f9ef6597bc739a2a94bbf8b63de13 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 24 Nov 2023 14:04:04 -0800
Subject: [PATCH] Print

---
 .../document-detail/document-detail.component.html    | 11 +++++++++--
 .../document-detail/document-detail.component.ts      |  8 +++++++-
 2 files changed, 16 insertions(+), 3 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 86647338b..468c42514 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
@@ -5,15 +5,22 @@
             <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewNumPages" [(ngModel)]="previewCurrentPage" />
             <div class="input-group-text" i18n>of {{previewNumPages}}</div>
         </div>
-        <div class="input-group input-group-sm me-5 d-none d-md-flex">
+        <div class="input-group input-group-sm me-2 d-none d-md-flex">
             <button class="btn btn-outline-secondary" (click)="decreaseZoom()" i18n>-</button>
             <select class="form-select" (change)="onZoomSelect($event)">
                 <option *ngFor="let setting of zoomSettings" [value]="setting" [selected]="previewZoomSetting == setting">
                     {{ getZoomSettingTitle(setting) }}
                 </option>
-              </select>
+            </select>
             <button class="btn btn-outline-secondary" (click)="increaseZoom()" i18n>+</button>
         </div>
+        <div class="input-group input-group-sm me-5 d-none d-md-flex">
+            <button class="btn btn-sm btn-outline-secondary me-5" (click)="print()">
+                <svg class="buttonicon-sm" fill="currentColor">
+                    <use xlink:href="assets/bootstrap-icons.svg#printer" />
+                </svg><span class="ps-2" i18n>Print</span>
+            </button>
+        </div>
     </ng-container>
 
     <button type="button" class="btn btn-sm btn-outline-danger me-4" (click)="delete()" [disabled]="!userIsOwner" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
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 d8c892e80..5bc0c03e5 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
@@ -76,6 +76,7 @@ import { PaperlessCustomFieldInstance } from 'src/app/data/paperless-custom-fiel
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { InvalidPDFException } from 'ngx-extended-pdf-viewer/lib/events/invalid-pdf-exception'
 import { PagesLoadedEvent } from 'ngx-extended-pdf-viewer/lib/events/pages-loaded-event'
+import { NgxExtendedPdfViewerService } from 'ngx-extended-pdf-viewer'
 import { pdfDefaultOptions } from 'ngx-extended-pdf-viewer'
 
 enum DocumentDetailNavIDs {
@@ -201,7 +202,8 @@ export class DocumentDetailComponent
     private userService: UserService,
     private customFieldsService: CustomFieldsService,
     private http: HttpClient,
-    private ref: ChangeDetectorRef
+    private ref: ChangeDetectorRef,
+    private printService: NgxExtendedPdfViewerService
   ) {
     super()
     pdfDefaultOptions.passwordPrompt = {
@@ -979,4 +981,8 @@ export class DocumentDetailComponent
     this.previewZoomSetting =
       Object.values(ZoomSetting)[Math.max(4, currentIndex - 1)]
   }
+
+  print(): void {
+    this.printService.print()
+  }
 }