lgcosta/paperless-ngx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved popup preview with embedded viewer, plaintext, error handling

Browse Source
This commit is contained in:
shamoon 2023-12-11 15:58:49 -08:00
parent 829836ddf6
commit 0af4638676
16 changed files with 240 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/src/app/app.module.ts
View File

@ -107,6 +107,7 @@ import { CustomFieldsDropdownComponent } from './components/common/custom-fields
import { ProfileEditDialogComponent } from './components/common/profile-edit-dialog/profile-edit-dialog.component'
import { PdfViewerComponent } from './components/common/pdf-viewer/pdf-viewer.component'
import { DocumentLinkComponent } from './components/common/input/document-link/document-link.component'
import { PreviewPopupComponent } from './components/common/preview-popup/preview-popup.component'
import localeAf from '@angular/common/locales/af'
import localeAr from '@angular/common/locales/ar'
@ -261,6 +262,7 @@ function initializeApp(settings: SettingsService) {
ProfileEditDialogComponent,
PdfViewerComponent,
DocumentLinkComponent,
PreviewPopupComponent,
],
imports: [
BrowserModule,

27
src-ui/src/app/components/common/preview-popup/preview-popup.component.html Normal file
View File

@ -0,0 +1,27 @@
<div class="preview-popup-container">
<div *ngIf="error; else noError" 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>
<ng-template #noError>
<ng-container *ngIf="renderAsPlainText; else renderAsObject">
<div class="preview-sticky bg-light p-3 overflow-auto" width="100%">{{previewText}}</div>
</ng-container>
<ng-template #renderAsObject>
<object *ngIf="useNativePdfViewer; else pngxViewer" [data]="previewURL | safeUrl" width="100%"></object>
<ng-template #pngxViewer>
<div *ngIf="requiresPassword" class="w-100 h-100 position-relative">
<svg width="2em" height="2em" fill="currentColor" class="position-absolute top-50 start-50 translate-middle">
<use xlink:href="assets/bootstrap-icons.svg#file-earmark-lock"/>
</svg>
</div>
<pngx-pdf-viewer *ngIf="!requiresPassword"
[src]="previewURL"
[original-size]="false"
[show-borders]="true"
[show-all]="false"
(error)="onError($event)">
</pngx-pdf-viewer>
</ng-template>
</ng-template>
</ng-template>
</div>

9
src-ui/src/app/components/common/preview-popup/preview-popup.component.scss Normal file
View File

@ -0,0 +1,9 @@
.preview-popup-container > * {
width: 30rem !important;
height: 22rem !important;
overflow-y: scroll;
}
::ng-deep .popover.popover-preview {
max-width: 32rem;
}

60
src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts Normal file
View File

@ -0,0 +1,60 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'
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'
describe('PreviewPopupComponent', () => {
let component: PreviewPopupComponent
let fixture: ComponentFixture<PreviewPopupComponent>
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [PreviewPopupComponent, PdfViewerComponent, SafeUrlPipe],
})
fixture = TestBed.createComponent(PreviewPopupComponent)
component = fixture.componentInstance
fixture.detectChanges()
})
it('should render object if use native PDF viewer', () => {
component.useNativePdfViewer = true
component.previewURL = 'sample.pdf'
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'
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', () => {
component.onError({ name: 'PasswordException' })
fixture.detectChanges()
expect(fixture.debugElement.query(By.css('svg'))).not.toBeNull()
})
it('should show message on error', () => {
component.onError({})
fixture.detectChanges()
expect(fixture.debugElement.nativeElement.textContent).toContain(
'Error loading preview'
)
})
})

31
src-ui/src/app/components/common/preview-popup/preview-popup.component.ts Normal file
View File

@ -0,0 +1,31 @@
import { Component, Input } from '@angular/core'
@Component({
selector: 'pngx-preview-popup',
templateUrl: './preview-popup.component.html',
styleUrls: ['./preview-popup.component.scss'],
})
export class PreviewPopupComponent {
@Input()
renderAsPlainText: boolean = false
@Input()
previewText: string
@Input()
previewURL: string
@Input()
useNativePdfViewer: boolean = false
error = false
requiresPassword: boolean = false
onError(event) {
if (event.name == 'PasswordException') {
this.requiresPassword = true
} else {
this.error = true
}
}
}

7
src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
View File

@ -36,7 +36,12 @@
</svg>
</a>
<ng-template #previewContent>
<object [data]="getPreviewUrl(doc) | safeUrl" class="preview" width="100%"></object>
<pngx-preview-popup
[previewURL]="getPreviewUrl(doc)"
[useNativePdfViewer]="useNativePdfViewer"
[previewText]="doc.content"
[renderAsPlainText]="!isPdf(doc)">
</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">

2
src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts
View File

@ -29,6 +29,7 @@ import { SavedViewWidgetComponent } from './saved-view-widget.component'
import { By } from '@angular/platform-browser'
import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
import { DragDropModule } from '@angular/cdk/drag-drop'
import { PreviewPopupComponent } from 'src/app/components/common/preview-popup/preview-popup.component'
const savedView: PaperlessSavedView = {
id: 1,
@ -74,6 +75,7 @@ describe('SavedViewWidgetComponent', () => {
CustomDatePipe,
DocumentTitlePipe,
SafeUrlPipe,
PreviewPopupComponent,
],
providers: [
PermissionsGuard,

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

@ -22,14 +22,13 @@ import { DocumentListViewService } from 'src/app/services/document-list-view.ser
import { ComponentWithPermissions } from 'src/app/components/with-permissions/with-permissions.component'
import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
import { queryParamsFromFilterRules } from 'src/app/utils/query-params'
import { SettingsService } from 'src/app/services/settings.service'
import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
@Component({
selector: 'pngx-saved-view-widget',
templateUrl: './saved-view-widget.component.html',
styleUrls: [
'./saved-view-widget.component.scss',
'../../../document-list/popover-preview/popover-preview.scss',
],
styleUrls: ['./saved-view-widget.component.scss'],
})
export class SavedViewWidgetComponent
extends ComponentWithPermissions
@ -43,7 +42,8 @@ export class SavedViewWidgetComponent
private list: DocumentListViewService,
private consumerStatusService: ConsumerStatusService,
public openDocumentsService: OpenDocumentsService,
public documentListViewService: DocumentListViewService
public documentListViewService: DocumentListViewService,
private settingsService: SettingsService
) {
super()
}
@ -113,6 +113,10 @@ export class SavedViewWidgetComponent
])
}
get useNativePdfViewer(): boolean {
return this.settingsService.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)
}
getPreviewUrl(document: PaperlessDocument): string {
return this.documentService.getPreviewUrl(document.id)
}
@ -121,6 +125,13 @@ export class SavedViewWidgetComponent
return this.documentService.getDownloadUrl(document.id)
}
isPdf(document: PaperlessDocument) {
return (
document.original_file_name?.endsWith('.pdf') ||
document.archived_file_name?.endsWith('.pdf')
)
}
mouseEnterPreview(doc: PaperlessDocument) {
this.popover = this.popovers.get(this.documents.indexOf(doc))
this.mouseOnPreview = true

7
src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
View File

@ -56,7 +56,12 @@
</svg>&nbsp;<span class="d-none d-md-inline" i18n>View</span>
</a>
<ng-template #previewContent>
<object [data]="previewUrl | safeUrl" class="preview" width="100%"></object>
<pngx-preview-popup
[previewURL]="previewUrl"
[useNativePdfViewer]="useNativePdfViewer"
[previewText]="document.content"
[renderAsPlainText]="!isPdf">
</pngx-preview-popup>
</ng-template>
<a class="btn btn-sm btn-outline-secondary" [href]="getDownloadUrl()">
<svg class="sidebaricon" fill="currentColor" class="sidebaricon">

23
src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
View File

@ -19,6 +19,9 @@ import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
import { DocumentCardLargeComponent } from './document-card-large.component'
import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
import { SettingsService } from 'src/app/services/settings.service'
import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
const doc = {
id: 10,
@ -40,6 +43,7 @@ const doc = {
describe('DocumentCardLargeComponent', () => {
let component: DocumentCardLargeComponent
let fixture: ComponentFixture<DocumentCardLargeComponent>
let settingsService: SettingsService
beforeEach(async () => {
TestBed.configureTestingModule({
@ -50,6 +54,7 @@ describe('DocumentCardLargeComponent', () => {
IfPermissionsDirective,
SafeUrlPipe,
IsNumberPipe,
PreviewPopupComponent,
],
providers: [DatePipe],
imports: [
@ -62,6 +67,7 @@ describe('DocumentCardLargeComponent', () => {
}).compileComponents()
fixture = TestBed.createComponent(DocumentCardLargeComponent)
settingsService = TestBed.inject(SettingsService)
component = fixture.componentInstance
component.document = doc
fixture.detectChanges()
@ -87,6 +93,23 @@ describe('DocumentCardLargeComponent', () => {
expect(component.popover.isOpen()).toBeFalsy()
}))
it('should guess if file is pdf by file name', () => {
component.document.original_file_name = 'sample.pdf'
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()
})
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 trim content', () => {
expect(component.contentTrimmed).toHaveLength(503) // includes ...
})

16
src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
View File

@ -15,10 +15,7 @@ import { ComponentWithPermissions } from '../../with-permissions/with-permission
@Component({
selector: 'pngx-document-card-large',
templateUrl: './document-card-large.component.html',
styleUrls: [
'./document-card-large.component.scss',
'../popover-preview/popover-preview.scss',
],
styleUrls: ['./document-card-large.component.scss'],
})
export class DocumentCardLargeComponent extends ComponentWithPermissions {
constructor(
@ -106,6 +103,17 @@ export class DocumentCardLargeComponent extends ComponentWithPermissions {
return this.documentService.getPreviewUrl(this.document.id)
}
get useNativePdfViewer(): boolean {
return this.settingsService.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)
}
get isPdf(): boolean {
return (
this.document?.original_file_name?.endsWith('.pdf') ||
this.document?.archived_file_name?.endsWith('.pdf')
)
}
mouseEnterPreview() {
this.mouseOnPreview = true
if (!this.popover.isOpen()) {

7
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
View File

@ -94,7 +94,12 @@
</svg>
</a>
<ng-template #previewContent>
<object [data]="previewUrl | safeUrl" class="preview" width="100%"></object>
<pngx-preview-popup
[previewURL]="previewUrl"
[useNativePdfViewer]="useNativePdfViewer"
[previewText]="document.content"
[renderAsPlainText]="!isPdf">
</pngx-preview-popup>
</ng-template>
<a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary" title="Download" i18n-title (click)="$event.stopPropagation()">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

23
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts
View File

@ -22,6 +22,9 @@ import { By } from '@angular/platform-browser'
import { TagComponent } from '../../common/tag/tag.component'
import { PaperlessTag } from 'src/app/data/paperless-tag'
import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
import { SettingsService } from 'src/app/services/settings.service'
import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
const doc = {
id: 10,
@ -53,6 +56,7 @@ const doc = {
describe('DocumentCardSmallComponent', () => {
let component: DocumentCardSmallComponent
let fixture: ComponentFixture<DocumentCardSmallComponent>
let settingsService: SettingsService
beforeEach(async () => {
TestBed.configureTestingModule({
@ -64,6 +68,7 @@ describe('DocumentCardSmallComponent', () => {
SafeUrlPipe,
TagComponent,
IsNumberPipe,
PreviewPopupComponent,
],
providers: [DatePipe],
imports: [
@ -76,6 +81,7 @@ describe('DocumentCardSmallComponent', () => {
}).compileComponents()
fixture = TestBed.createComponent(DocumentCardSmallComponent)
settingsService = TestBed.inject(SettingsService)
component = fixture.componentInstance
component.document = Object.assign({}, doc)
fixture.detectChanges()
@ -105,6 +111,23 @@ describe('DocumentCardSmallComponent', () => {
).toHaveLength(6)
})
it('should guess if file is pdf by file name', () => {
component.document.original_file_name = 'sample.pdf'
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()
})
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 show preview on mouseover after delay to preload content', fakeAsync(() => {
component.mouseEnterPreview()
expect(component.popover.isOpen()).toBeTruthy()

16
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
View File

@ -16,10 +16,7 @@ import { ComponentWithPermissions } from '../../with-permissions/with-permission
@Component({
selector: 'pngx-document-card-small',
templateUrl: './document-card-small.component.html',
styleUrls: [
'./document-card-small.component.scss',
'../popover-preview/popover-preview.scss',
],
styleUrls: ['./document-card-small.component.scss'],
})
export class DocumentCardSmallComponent extends ComponentWithPermissions {
constructor(
@ -80,6 +77,17 @@ export class DocumentCardSmallComponent extends ComponentWithPermissions {
return $localize`Private`
}
get useNativePdfViewer(): boolean {
return this.settingsService.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)
}
get isPdf(): boolean {
return (
this.document?.original_file_name?.endsWith('.pdf') ||
this.document?.archived_file_name?.endsWith('.pdf')
)
}
getTagsLimited$() {
const limit = this.document.notes.length > 0 ? 6 : 7
return this.document.tags$.pipe(

22
src-ui/src/app/components/document-list/popover-preview/popover-preview.scss
View File

@ -1,22 +0,0 @@
::ng-deep .popover.popover-preview {
max-width: 40rem;
.preview {
min-width: 30rem;
min-height: 18rem;
max-height: 35rem;
overflow-y: scroll;
}
.spinner-border {
position: absolute;
top: 4rem;
left: calc(50% - 0.5rem);
z-index: 0;
}
}
::ng-deep .popover-hidden .popover {
opacity: 0;
pointer-events: none;
}

5
src-ui/src/styles.scss
View File

@ -555,6 +555,11 @@ table.table {
}
}
.popover-hidden .popover {
opacity: 0;
pointer-events: none;
}
// Tour
.tour-active .popover {
min-width: 360px;