Enhancement: preview button for document list and trash, refactor (#8384)

src-ui/src/app/components/common/preview-popup/preview-popup.component.html

@@ -1,30 +1,37 @@
-<div class="preview-popup-container">
-  @if (error) {
-    <div class="w-100 h-100 position-relative">
-      <p class="fst-italic position-absolute top-50 start-50 translate-middle" i18n>Error loading preview</p>
-    </div>
-  } @else {
-    @if (renderAsObject) {
-      @if (previewText) {
-        <div class="bg-light p-3 overflow-auto whitespace-preserve" width="100%">{{previewText}}</div>
-      } @else {
-        <object [data]="previewURL | safeUrl" width="100%" class="bg-light" [class.p-2]="!isPdf"></object>
-      }
+<a [href]="link ?? previewUrl" class="{{linkClasses}}" [target]="linkTarget" [title]="linkTitle"
+  [ngbPopover]="previewContent" [popoverTitle]="document.title | documentTitle" container="body"
+  autoClose="true" [popoverClass]="popoverClass" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover">
+  <ng-content></ng-content>
+</a>
+<ng-template #previewContent>
+  <div class="preview-popup-container">
+    @if (error) {
+      <div class="w-100 h-100 position-relative">
+        <p class="fst-italic position-absolute top-50 start-50 translate-middle" i18n>Error loading preview</p>
+      </div>
     } @else {
-      @if (requiresPassword) {
-        <div class="w-100 h-100 position-relative">
-          <i-bs width="2em" height="2em" class="position-absolute top-50 start-50 translate-middle" name="file-earmark-lock"></i-bs>
-        </div>
-      }
-      @if (!requiresPassword) {
-        <pdf-viewer
-          [src]="previewURL"
-          [original-size]="false"
-          [show-borders]="false"
-          [show-all]="true"
-          (error)="onError($event)">
-        </pdf-viewer>
+      @if (renderAsObject) {
+        @if (previewText) {
+          <div class="bg-light p-3 overflow-auto whitespace-preserve" width="100%">{{previewText}}</div>
+        } @else {
+          <object [data]="previewURL | safeUrl" width="100%" class="bg-light" [class.p-2]="!isPdf"></object>
+        }
+      } @else {
+        @if (requiresPassword) {
+          <div class="w-100 h-100 position-relative">
+            <i-bs width="2em" height="2em" class="position-absolute top-50 start-50 translate-middle" name="file-earmark-lock"></i-bs>
+          </div>
+        }
+        @if (!requiresPassword) {
+          <pdf-viewer
+            [src]="previewURL"
+            [original-size]="false"
+            [show-borders]="false"
+            [show-all]="true"
+            (error)="onError($event)">
+          </pdf-viewer>
+        }
       }
     }
-  }
-</div>
+  </div>
+</ng-template>

src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts

@@ -1,4 +1,9 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+} from '@angular/core/testing'
 
 import { PreviewPopupComponent } from './preview-popup.component'
 import { By } from '@angular/platform-browser'
@@ -15,6 +20,8 @@ import {
   withInterceptorsFromDi,
 } from '@angular/common/http'
 import { of, throwError } from 'rxjs'
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
+import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
 
 const doc = {
   id: 10,
@@ -34,8 +41,12 @@ describe('PreviewPopupComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [PreviewPopupComponent, SafeUrlPipe],
-      imports: [NgxBootstrapIconsModule.pick(allIcons), PdfViewerModule],
+      declarations: [PreviewPopupComponent, SafeUrlPipe, DocumentTitlePipe],
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        PdfViewerModule,
+        NgbPopoverModule,
+      ],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
@@ -70,12 +81,14 @@ describe('PreviewPopupComponent', () => {
 
   it('should render object if native PDF viewer enabled', () => {
     settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, true)
+    component.popover.open()
     fixture.detectChanges()
     expect(fixture.debugElement.query(By.css('object'))).not.toBeNull()
   })
 
   it('should render pngx viewer if native PDF viewer disabled', () => {
     settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
+    component.popover.open()
     fixture.detectChanges()
     expect(fixture.debugElement.query(By.css('object'))).toBeNull()
     expect(fixture.debugElement.query(By.css('pdf-viewer'))).not.toBeNull()
@@ -83,6 +96,7 @@ describe('PreviewPopupComponent', () => {
 
   it('should show lock icon on password error', () => {
     settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
+    component.popover.open()
     component.onError({ name: 'PasswordException' })
     fixture.detectChanges()
     expect(component.requiresPassword).toBeTruthy()
@@ -93,16 +107,18 @@ describe('PreviewPopupComponent', () => {
     component.document.original_file_name = 'sample.png'
     component.document.mime_type = 'image/png'
     component.document.archived_file_name = undefined
+    component.popover.open()
     fixture.detectChanges()
     expect(fixture.debugElement.query(By.css('object'))).not.toBeNull()
   })
 
   it('should show message on error', () => {
+    component.popover.open()
     component.onError({})
     fixture.detectChanges()
-    expect(fixture.debugElement.nativeElement.textContent).toContain(
-      'Error loading preview'
-    )
+    expect(
+      fixture.debugElement.query(By.css('.popover')).nativeElement.textContent
+    ).toContain('Error loading preview')
   })
 
   it('should get text content from http if appropriate', () => {
@@ -122,4 +138,17 @@ describe('PreviewPopupComponent', () => {
     component.init()
     expect(component.previewText).toEqual('Preview text')
   })
+
+  it('should show preview on mouseover after delay to preload content', fakeAsync(() => {
+    component.mouseEnterPreview()
+    expect(component.popover.isOpen()).toBeTruthy()
+    tick(600)
+    component.close()
+
+    component.mouseEnterPreview()
+    tick(100)
+    component.mouseLeavePreview()
+    tick(600)
+    expect(component.popover.isOpen()).toBeFalsy()
+  }))
 })

src-ui/src/app/components/common/preview-popup/preview-popup.component.ts

@@ -1,5 +1,6 @@
 import { HttpClient } from '@angular/common/http'
-import { Component, Input, OnDestroy } from '@angular/core'
+import { Component, Input, OnDestroy, ViewChild } from '@angular/core'
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { first, Subject, takeUntil } from 'rxjs'
 import { Document } from 'src/app/data/document'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
@@ -23,6 +24,18 @@ export class PreviewPopupComponent implements OnDestroy {
     return this._document
   }
 
+  @Input()
+  link: string
+
+  @Input()
+  linkClasses: string = 'btn btn-sm btn-outline-secondary'
+
+  @Input()
+  linkTarget: string = '_blank'
+
+  @Input()
+  linkTitle: string = $localize`Open preview`
+
   unsubscribeNotifier: Subject<any> = new Subject()
 
   error = false
@@ -31,6 +44,12 @@ export class PreviewPopupComponent implements OnDestroy {
 
   previewText: string
 
+  @ViewChild('popover') popover: NgbPopover
+
+  mouseOnPreview: boolean
+
+  popoverClass: string = 'shadow popover-preview'
+
   get renderAsObject(): boolean {
     return (this.isPdf && this.useNativePdfViewer) || !this.isPdf
   }
@@ -83,4 +102,33 @@ export class PreviewPopupComponent implements OnDestroy {
       this.error = true
     }
   }
+
+  get previewUrl() {
+    return this.documentService.getPreviewUrl(this.document.id)
+  }
+
+  mouseEnterPreview() {
+    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.popoverClass = 'shadow popover-preview pe-none opacity-0'
+      setTimeout(() => {
+        if (this.mouseOnPreview) {
+          // show popover
+          this.popoverClass = this.popoverClass.replace('pe-none opacity-0', '')
+        } else {
+          this.popover.close()
+        }
+      }, 600)
+    }
+  }
+
+  mouseLeavePreview() {
+    this.mouseOnPreview = false
+  }
+
+  public close() {
+    this.popover.close(false)
+  }
 }