Feature: loading preview, better text popup preview (#8011)

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<any> = new Subject()
 
   error = false
 
   requiresPassword: boolean = false
 
+  previewText: string
+
   get renderAsObject(): boolean {
     return (this.isPdf && this.useNativePdfViewer) || !this.isPdf
   }
@@ -30,18 +44,38 @@ export class PreviewPopupComponent {
   }
 
   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')
+      this.document?.archived_file_name?.length > 0 ||
+      this.document?.mime_type?.includes('pdf')
     )
   }
 
   constructor(
     private settingsService: SettingsService,
-    private documentService: DocumentService
+    private documentService: DocumentService,
+    private http: HttpClient
   ) {}
 
+  ngOnDestroy(): void {
+    this.unsubscribeNotifier.next(this)
+  }
+
+  init() {
+    if (this.document.mime_type?.includes('text')) {
+      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