From 30af7047c7a962c0d142db1ff811b0231a82d7ff Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 25 Nov 2023 01:42:01 -0800
Subject: [PATCH] Move print button, close loading dialog earlier

---
 .../document-detail.component.html              | 17 ++++++++---------
 .../document-detail.component.scss              |  4 ++++
 .../document-detail.component.spec.ts           |  1 +
 .../document-detail.component.ts                |  3 ++-
 4 files changed, 15 insertions(+), 10 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 8d31f8f8e..331cdd7a0 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,22 +5,15 @@
             <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-2 d-none d-md-flex">
+        <div class="input-group input-group-sm me-5 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">
+                <option *ngFor="let setting of zoomSettings" [value]="setting" [selected]="previewZoomSetting === setting">
                     {{ getZoomSettingTitle(setting) }}
                 </option>
             </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()" [disabled]="printLoadingModal">
-                <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 }">
@@ -44,6 +37,12 @@
         </div>
     </div>
 
+    <button class="btn btn-sm btn-outline-primary me-2" (click)="print()" [disabled]="printLoadingModal">
+        <svg class="buttonicon-sm" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#printer" />
+        </svg><span class="ps-2" i18n>Print</span>
+    </button>
+
     <div class="ms-auto" ngbDropdown>
         <button class="btn btn-sm btn-outline-primary me-2" id="actionsDropdown" ngbDropdownToggle>
           <svg class="toolbaricon" fill="currentColor">
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.scss b/src-ui/src/app/components/document-detail/document-detail.component.scss
index 467e8941f..74e46d89e 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.scss
+++ b/src-ui/src/app/components/document-detail/document-detail.component.scss
@@ -45,3 +45,7 @@
 textarea.rtl {
   direction: rtl;
 }
+
+.form-select {
+  padding-right: 2.5em;
+}
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 81630fe3b..eec79b6c0 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
@@ -749,6 +749,7 @@ describe('DocumentDetailComponent', () => {
     expect(openModal.componentInstance.verb).toEqual('Processing page')
     expect(openModal.componentInstance.current).toEqual(10)
     expect(openModal.componentInstance.total).toEqual(100)
+    component.onProgress({ type: 'print', total: 100, page: 100 } as any)
     component.onAfterPrint()
     expect(openModal.closed).toBeTruthy()
   })
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 7fd77f8bc..f2fd7f0b8 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
@@ -853,10 +853,11 @@ export class DocumentDetailComponent
       loadingDialog.current = event.page ?? 0
       loadingDialog.total = event.total
     }
+    if (event.total === event.page) this.onAfterPrint()
   }
 
   onAfterPrint(): void {
-    this.printLoadingModal.close()
+    this.printLoadingModal?.close()
     this.printLoadingModal = null
   }