From 0ebf5264208714122ca1fec308c6e6791f4d13f7 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 11 Dec 2023 23:59:57 -0800
Subject: [PATCH] Improve dashboard preview mouseover behavior

---
 .../saved-view-widget.component.html          |  6 ++---
 .../saved-view-widget.component.spec.ts       |  9 ++++---
 .../saved-view-widget.component.ts            | 27 ++++++++++++++-----
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
index b1c8515d5..5c1eb6864 100644
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
@@ -17,7 +17,7 @@
       </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let doc of documents" (mouseleave)="mouseLeaveCard()">
+      <tr *ngFor="let doc of documents" (mouseleave)="maybeClosePopover()">
         <td class="py-2 py-md-3"><a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.created_date | customDate}}</a></td>
         <td class="py-2 py-md-3">
           <a routerLink="/documents/{{doc.id}}" title="Edit" i18n-title class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.title | documentTitle}}</a>
@@ -30,13 +30,13 @@
           <div class="btn-group position-absolute top-50 end-0 translate-middle-y">
             <a [href]="getPreviewUrl(doc)" title="View Preview" i18n-title target="_blank" class="btn px-4 btn-dark border-dark-subtle"
             [ngbPopover]="previewContent" [popoverTitle]="doc.title | documentTitle"
-            autoClose="true" popoverClass="shadow popover-preview" container="body" (mouseenter)="mouseEnterPreview(doc)" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover">
+            autoClose="true" popoverClass="shadow popover-preview" container="body" (mouseenter)="mouseEnterPreviewButton(doc)" (mouseleave)="mouseLeavePreviewButton()" #popover="ngbPopover">
               <svg class="buttonicon-xs" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#eye"/>
               </svg>
             </a>
             <ng-template #previewContent>
-              <pngx-preview-popup [document]="doc"></pngx-preview-popup>
+              <pngx-preview-popup [document]="doc" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()"></pngx-preview-popup>
             </ng-template>
             <a [href]="getDownloadUrl(doc)" class="btn px-4 btn-dark border-dark-subtle" title="Download" i18n-title (click)="$event.stopPropagation()">
               <svg class="buttonicon-xs" fill="currentColor">
diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts
index 94434673e..84d1fb654 100644
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts
@@ -139,15 +139,18 @@ describe('SavedViewWidgetComponent', () => {
     )
     component.ngOnInit()
     fixture.detectChanges()
-    component.mouseEnterPreview(documentResults[0])
+    component.mouseEnterPreviewButton(documentResults[0])
     expect(component.popover.isOpen()).toBeTruthy()
     expect(component.popoverHidden).toBeTruthy()
     tick(600)
     expect(component.popoverHidden).toBeFalsy()
-    component.mouseLeaveCard()
+    component.maybeClosePopover()
 
-    component.mouseEnterPreview(documentResults[1])
+    component.mouseEnterPreviewButton(documentResults[1])
     tick(100)
+    component.mouseLeavePreviewButton()
+    component.mouseEnterPreview()
+    expect(component.popover.isOpen()).toBeTruthy()
     component.mouseLeavePreview()
     tick(600)
     expect(component.popover.isOpen()).toBeFalsy()
diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
index 39dec7e35..601d9384e 100644
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
@@ -118,8 +118,11 @@ export class SavedViewWidgetComponent
     return this.documentService.getDownloadUrl(document.id)
   }
 
-  mouseEnterPreview(doc: PaperlessDocument) {
-    this.popover = this.popovers.get(this.documents.indexOf(doc))
+  mouseEnterPreviewButton(doc: PaperlessDocument) {
+    const newPopover = this.popovers.get(this.documents.indexOf(doc))
+    if (this.popover !== newPopover && this.popover?.isOpen())
+      this.popover.close()
+    this.popover = newPopover
     this.mouseOnPreview = true
     if (!this.popover.isOpen()) {
       // we're going to open but hide to pre-load content during hover delay
@@ -136,14 +139,24 @@ export class SavedViewWidgetComponent
     }
   }
 
-  mouseLeavePreview() {
-    this.mouseOnPreview = false
+  mouseEnterPreview() {
+    this.mouseOnPreview = true
   }
 
-  mouseLeaveCard() {
-    console.log('leave card')
+  mouseLeavePreview() {
+    this.mouseOnPreview = false
+    this.maybeClosePopover()
+  }
 
-    this.popover?.close()
+  mouseLeavePreviewButton() {
+    this.mouseOnPreview = false
+    this.maybeClosePopover()
+  }
+
+  maybeClosePopover() {
+    setTimeout(() => {
+      if (!this.mouseOnPreview) this.popover?.close()
+    }, 300)
   }
 
   getCorrespondentQueryParams(correspondentId: number): Params {