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) { +
{{previewText}}
+ } @else { + + } } @else { @if (requiresPassword) {
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);