Useful buttons for saved view widgets

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts

@@ -1,4 +1,12 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import {
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+} from '@angular/core'
 import { Router } from '@angular/router'
 import { Subscription } from 'rxjs'
 import { PaperlessDocument } from 'src/app/data/paperless-document'
@@ -10,11 +18,15 @@ import { FILTER_HAS_TAGS_ALL } from 'src/app/data/filter-rule-type'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { ComponentWithPermissions } from 'src/app/components/with-permissions/with-permissions.component'
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 
 @Component({
   selector: 'app-saved-view-widget',
   templateUrl: './saved-view-widget.component.html',
-  styleUrls: ['./saved-view-widget.component.scss'],
+  styleUrls: [
+    './saved-view-widget.component.scss',
+    '../../../document-list/popover-preview/popover-preview.scss',
+  ],
 })
 export class SavedViewWidgetComponent
   extends ComponentWithPermissions
@@ -39,6 +51,12 @@ export class SavedViewWidgetComponent
 
   subscription: Subscription
 
+  @ViewChildren('popover') popovers: QueryList<NgbPopover>
+  popover: NgbPopover
+
+  mouseOnPreview = false
+  popoverHidden = true
+
   ngOnInit(): void {
     this.reload()
     this.subscription = this.consumerStatusService
@@ -87,4 +105,38 @@ export class SavedViewWidgetComponent
       { rule_type: FILTER_HAS_TAGS_ALL, value: tag.id.toString() },
     ])
   }
+
+  getPreviewUrl(document: PaperlessDocument): string {
+    return this.documentService.getPreviewUrl(document.id)
+  }
+
+  getDownloadUrl(document: PaperlessDocument): string {
+    return this.documentService.getDownloadUrl(document.id)
+  }
+
+  mouseEnterPreview(doc: PaperlessDocument) {
+    this.popover = this.popovers.get(this.documents.indexOf(doc))
+    this.mouseOnPreview = true
+    if (!this.popover.isOpen()) {
+      // we're going to open but hide to pre-load content during hover delay
+      this.popover.open()
+      this.popoverHidden = true
+      setTimeout(() => {
+        if (this.mouseOnPreview) {
+          // show popover
+          this.popoverHidden = false
+        } else {
+          this.popover.close()
+        }
+      }, 600)
+    }
+  }
+
+  mouseLeavePreview() {
+    this.mouseOnPreview = false
+  }
+
+  mouseLeaveCard() {
+    this.popover?.close()
+  }
 }