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 096dcf04d..6ab15f251 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
@@ -5,7 +5,11 @@
} @else {
@if (renderAsObject) {
-
+ @if (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 c23cb6124..4e67fd239 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
@@ -9,7 +9,12 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'
import { DocumentService } from 'src/app/services/rest/document.service'
import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
import { PdfViewerModule } from 'ng2-pdf-viewer'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import {
+ HttpClient,
+ provideHttpClient,
+ withInterceptorsFromDi,
+} from '@angular/common/http'
+import { of, throwError } from 'rxjs'
const doc = {
id: 10,
@@ -23,6 +28,7 @@ describe('PreviewPopupComponent', () => {
let fixture: ComponentFixture
let settingsService: SettingsService
let documentService: DocumentService
+ let http: HttpClient
beforeEach(() => {
TestBed.configureTestingModule({
@@ -35,6 +41,7 @@ describe('PreviewPopupComponent', () => {
})
settingsService = TestBed.inject(SettingsService)
documentService = TestBed.inject(DocumentService)
+ http = TestBed.inject(HttpClient)
jest
.spyOn(documentService, 'getPreviewUrl')
.mockImplementation((id) => doc.original_file_name)
@@ -95,4 +102,17 @@ describe('PreviewPopupComponent', () => {
'Error loading preview'
)
})
+
+ it('should get text content from http if appropriate', () => {
+ const httpSpy = jest.spyOn(http, 'get')
+ httpSpy.mockReturnValueOnce(
+ throwError(() => new Error('Error getting preview'))
+ )
+ component.init()
+ expect(httpSpy).toHaveBeenCalled()
+ expect(component.error).toBeTruthy()
+ httpSpy.mockReturnValueOnce(of('Preview text'))
+ component.init()
+ expect(component.previewText).toEqual('Preview text')
+ })
})
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 c3d2987d3..0302619aa 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,6 @@
-import { Component, Input } from '@angular/core'
+import { HttpClient } from '@angular/common/http'
+import { Component, Input, OnDestroy } from '@angular/core'
+import { first, Subject, takeUntil } from 'rxjs'
import { Document } from 'src/app/data/document'
import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
import { DocumentService } from 'src/app/services/rest/document.service'
@@ -9,14 +11,26 @@ import { SettingsService } from 'src/app/services/settings.service'
templateUrl: './preview-popup.component.html',
styleUrls: ['./preview-popup.component.scss'],
})
-export class PreviewPopupComponent {
+export class PreviewPopupComponent implements OnDestroy {
+ private _document: Document
@Input()
- document: Document
+ set document(document: Document) {
+ this._document = document
+ this.init()
+ }
+
+ get document(): Document {
+ return this._document
+ }
+
+ unsubscribeNotifier: Subject = new Subject()
error = false
requiresPassword: boolean = false
+ previewText: string
+
get renderAsObject(): boolean {
return (this.isPdf && this.useNativePdfViewer) || !this.isPdf
}
@@ -39,9 +53,28 @@ export class PreviewPopupComponent {
constructor(
private settingsService: SettingsService,
- private documentService: DocumentService
+ private documentService: DocumentService,
+ private http: HttpClient
) {}
+ ngOnDestroy(): void {
+ this.unsubscribeNotifier.next(this)
+ }
+
+ init() {
+ this.http
+ .get(this.previewURL, { responseType: 'text' })
+ .pipe(first(), takeUntil(this.unsubscribeNotifier))
+ .subscribe({
+ next: (res) => {
+ this.previewText = res.toString()
+ },
+ error: (err) => {
+ this.error = err
+ },
+ })
+ }
+
onError(event: any) {
if (event.name == 'PasswordException') {
this.requiresPassword = true
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.scss b/src-ui/src/app/components/document-detail/document-detail.component.scss
index c6e3b7448..860c5722c 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.scss
+++ b/src-ui/src/app/components/document-detail/document-detail.component.scss
@@ -62,7 +62,3 @@ textarea.rtl {
height: 100%;
object-fit: contain;
}
-
-.whitespace-preserve {
- white-space: preserve;
-}
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index eafb3be90..331f6e6d8 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -680,6 +680,10 @@ code {
opacity: .5;
}
+.whitespace-preserve {
+ white-space: preserve;
+}
+
/* Animate items as they're being sorted. */
.cdk-drop-list-dragging .cdk-drag {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);