From 79207a41fe741b6c81b08f549fa8275adf36d024 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 11 Dec 2023 23:36:55 -0800
Subject: [PATCH] Consolidate preview components
---
.../preview-popup.component.html | 33 ++++------
.../preview-popup.component.spec.ts | 66 ++++++++++++++-----
.../preview-popup/preview-popup.component.ts | 43 ++++++++----
.../saved-view-widget.component.html | 7 +-
.../saved-view-widget.component.ts | 18 +----
.../document-card-large.component.html | 7 +-
.../document-card-large.component.spec.ts | 21 ------
.../document-card-large.component.ts | 11 ----
.../document-card-small.component.html | 7 +-
.../document-card-small.component.spec.ts | 21 ------
.../document-card-small.component.ts | 11 ----
11 files changed, 101 insertions(+), 144 deletions(-)
diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
index e81ff9a40..71c3faf1b 100644
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
@@ -3,25 +3,20 @@
Error loading preview
-
- {{previewText}}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts b/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
index 945ed1572..edcf63f51 100644
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
@@ -4,52 +4,84 @@ import { PreviewPopupComponent } from './preview-popup.component'
import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component'
import { By } from '@angular/platform-browser'
import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
+import { SettingsService } from 'src/app/services/settings.service'
+import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { DocumentService } from 'src/app/services/rest/document.service'
+
+const doc = {
+ id: 10,
+ title: 'Document 10',
+ content: 'Cupcake ipsum dolor sit amet ice cream.',
+ original_file_name: 'sample.pdf',
+}
describe('PreviewPopupComponent', () => {
let component: PreviewPopupComponent
let fixture: ComponentFixture
+ let settingsService: SettingsService
+ let documentService: DocumentService
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [PreviewPopupComponent, PdfViewerComponent, SafeUrlPipe],
+ imports: [HttpClientTestingModule],
})
+ settingsService = TestBed.inject(SettingsService)
+ documentService = TestBed.inject(DocumentService)
+ jest
+ .spyOn(documentService, 'getPreviewUrl')
+ .mockImplementation((id) => doc.original_file_name)
fixture = TestBed.createComponent(PreviewPopupComponent)
component = fixture.componentInstance
+ component.document = doc
fixture.detectChanges()
})
- it('should render object if use native PDF viewer', () => {
- component.useNativePdfViewer = true
- component.previewURL = 'sample.pdf'
+ it('should guess if file is pdf by file name', () => {
+ expect(component.isPdf).toBeTruthy()
+ component.document.archived_file_name = 'sample.pdf'
+ expect(component.isPdf).toBeTruthy()
+ component.document.archived_file_name = undefined
+ component.document.original_file_name = 'sample.txt'
+ expect(component.isPdf).toBeFalsy()
+ component.document.original_file_name = 'sample.pdf'
+ })
+
+ it('should return settings for native PDF viewer', () => {
+ settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
+ expect(component.useNativePdfViewer).toBeFalsy()
+ settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, true)
+ expect(component.useNativePdfViewer).toBeTruthy()
+ })
+
+ it('should render object if native PDF viewer enabled', () => {
+ settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, true)
fixture.detectChanges()
expect(fixture.debugElement.query(By.css('object'))).not.toBeNull()
})
- it('should render pngx viewer if not use native PDF viewer', () => {
- component.useNativePdfViewer = false
- component.previewURL = 'sample.pdf'
+ it('should render pngx viewer if native PDF viewer disabled', () => {
+ settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
fixture.detectChanges()
expect(fixture.debugElement.query(By.css('object'))).toBeNull()
expect(fixture.debugElement.query(By.css('pngx-pdf-viewer'))).not.toBeNull()
})
- it('should render plain text if needed', () => {
- component.renderAsPlainText = true
- component.previewText = 'Hello world'
- fixture.detectChanges()
- expect(fixture.debugElement.query(By.css('object'))).toBeNull()
- expect(fixture.debugElement.query(By.css('pngx-pdf-viewer'))).toBeNull()
- expect(fixture.debugElement.nativeElement.textContent).toContain(
- 'Hello world'
- )
- })
-
it('should show lock icon on password error', () => {
+ settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
component.onError({ name: 'PasswordException' })
fixture.detectChanges()
+ expect(component.requiresPassword).toBeTruthy()
expect(fixture.debugElement.query(By.css('svg'))).not.toBeNull()
})
+ it('should fall back to object for non-pdf', () => {
+ component.document.original_file_name = 'sample.png'
+ fixture.detectChanges()
+ expect(fixture.debugElement.query(By.css('object'))).not.toBeNull()
+ })
+
it('should show message on error', () => {
component.onError({})
fixture.detectChanges()
diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts b/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
index ef34db9f2..014e31e8b 100644
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
@@ -1,4 +1,8 @@
import { Component, Input } from '@angular/core'
+import { PaperlessDocument } from 'src/app/data/paperless-document'
+import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { SettingsService } from 'src/app/services/settings.service'
@Component({
selector: 'pngx-preview-popup',
@@ -7,21 +11,38 @@ import { Component, Input } from '@angular/core'
})
export class PreviewPopupComponent {
@Input()
- renderAsPlainText: boolean = false
-
- @Input()
- previewText: string
-
- @Input()
- previewURL: string
-
- @Input()
- useNativePdfViewer: boolean = false
+ document: PaperlessDocument
error = false
+
requiresPassword: boolean = false
- onError(event) {
+ get renderAsObject(): boolean {
+ return (this.isPdf && this.useNativePdfViewer) || !this.isPdf
+ }
+
+ get previewURL() {
+ return this.documentService.getPreviewUrl(this.document.id)
+ }
+
+ get useNativePdfViewer(): boolean {
+ return this.settingsService.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)
+ }
+
+ get isPdf(): boolean {
+ // We dont have time to retrieve metadata, make a best guess by file name
+ return (
+ this.document?.original_file_name?.endsWith('.pdf') ||
+ this.document?.archived_file_name?.endsWith('.pdf')
+ )
+ }
+
+ constructor(
+ private settingsService: SettingsService,
+ private documentService: DocumentService
+ ) {}
+
+ onError(event: any) {
if (event.name == 'PasswordException') {
this.requiresPassword = true
} else {
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 695936ad9..b1c8515d5 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
@@ -36,12 +36,7 @@
-
-
+
View
-
-
+
-
-
+