fix the issue of the red cross icon appearing for PDF images in the d…

…ataset table
SciCatProject · Nov 20, 2024 · 24dd510 · 24dd510
1 parent deff61a
commit 24dd510
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git a/src/app/datasets/dataset-detail/dataset-detail.component.ts b/src/app/datasets/dataset-detail/dataset-detail.component.ts
@@ -4,7 +4,7 @@ import { ENTER, COMMA, SPACE } from "@angular/cdk/keycodes";
 import { MatChipInputEvent } from "@angular/material/chips";
 
 import { MatDialog } from "@angular/material/dialog";
-import { SampleEditComponent } from "datasets/sample-edit/sample-edit.component";
+// import { SampleEditComponent } from "datasets/sample-edit/sample-edit.component";
 import { DialogComponent } from "shared/modules/dialog/dialog.component";
 import { combineLatest, fromEvent, Observable, Subscription } from "rxjs";
 import { Store } from "@ngrx/store";
@@ -354,11 +354,7 @@ export class DatasetDetailComponent
   }
 
   getImageUrl(encoded: string) {
-    const mimeType = this.base64MimeType(encoded);
-    if (mimeType === "application/pdf") {
-      return "assets/images/pdf-icon.svg";
-    }
-    return encoded;
+    return this.attachmentService.getImageUrl(encoded);
   }
 
   openAttachment(encoded: string) {

diff --git a/src/app/shared/modules/file-uploader/file-uploader.component.ts b/src/app/shared/modules/file-uploader/file-uploader.component.ts
@@ -109,11 +109,7 @@ export class FileUploaderComponent {
   }
 
   getImageUrl(encoded: string) {
-    const mimeType = this.base64MimeType(encoded);
-    if (mimeType === "application/pdf") {
-      return "assets/images/pdf-icon.svg";
-    }
-    return encoded;
+    return this.attachmentService.getImageUrl(encoded);
   }
 
   openAttachment(encoded: string) {

diff --git a/src/app/shared/services/attachment.service.ts b/src/app/shared/services/attachment.service.ts
@@ -3,6 +3,8 @@ import { Injectable } from "@angular/core";
 @Injectable()
 export class AttachmentService {
   base64MimeType(encoded: string): string {
+    if (!encoded) return null;
+
     let result = null;
 
     if (typeof encoded !== "string") {
@@ -17,7 +19,20 @@ export class AttachmentService {
 
     return result;
   }
+
+  getImageUrl(encoded: string) {
+    if (!encoded) return null;
+
+    const mimeType = this.base64MimeType(encoded);
+    if (mimeType === "application/pdf") {
+      return "assets/images/pdf-icon.svg";
+    }
+    return encoded;
+  }
+
   openAttachment(encoded: string) {
+    if (!encoded) return null;
+
     const mimeType = this.base64MimeType(encoded);
     const strippedData = encoded.replace(
       new RegExp(`^data:${mimeType};base64,`),

diff --git a/src/app/shared/services/thumbnail.service.ts b/src/app/shared/services/thumbnail.service.ts
@@ -4,6 +4,7 @@ import { distinctUntilChanged, firstValueFrom } from "rxjs";
 import { DatasetApi } from "shared/sdk";
 import { selectDatasetsPerPage } from "state-management/selectors/datasets.selectors";
 import { AppConfigService } from "app-config.service";
+import { AttachmentService } from "./attachment.service";
 
 interface ThumbnailCache {
   [pid: string]: {
@@ -25,6 +26,7 @@ export class ThumbnailService {
   constructor(
     private datasetApi: DatasetApi,
     private store: Store,
+    private attachmentService: AttachmentService,
     private appConfigService: AppConfigService,
   ) {
     this.store
@@ -60,7 +62,7 @@ export class ThumbnailService {
     try {
       const encodedPid = encodeURIComponent(pid);
       const res = await firstValueFrom(this.datasetApi.thumbnail(encodedPid));
-      const thumbnail = res?.thumbnail || null;
+      const thumbnail = this.attachmentService.getImageUrl(res?.thumbnail);
 
       this.thumbnailCache[pid] = {
         value: thumbnail,