UFAL/Preview - fixed loading files

src/app/item-page/simple/field-components/preview-section/file-description/file-description.component.html

@@ -60,18 +60,30 @@
         </a>
       </div>
       <div [style]="'max-height: 500px; padding: 0px; overflow: scroll'" class="panel-body">
-        <ul class="treeview in collapse show">
-          <ng-container *ngIf="fileInput.format === 'application/zip' || fileInput.format === 'application/x-tar'">
-            <ds-file-tree-view
-              *ngFor="let node of fileInput.fileInfo"
-              [node]="node">
-            </ds-file-tree-view>
-          </ng-container>
-          <ng-container *ngIf="isTxt()">
-            <pre>{{ fileInput.fileInfo[0]?.content }}</pre>
-          </ng-container>
-          <ng-container *ngIf="fileInput.format === 'text/html'">
-            <div [innerHTML]="fileInput.fileInfo[0]?.content"></div>
+        <ul class="treeview collapse show">
+          <!-- Loading Spinner -->
+          <div *ngIf="fileInput.fileInfo.length === 0" class="d-flex justify-content-center align-items-center my-3">
+            <div>{{'item.preview.no-preview' | translate}}
+              <a *ngIf="emailToContact" [href]="'mailto:' + emailToContact" class="email-text">{{ emailToContact }}</a>
+            </div>
+          </div>
+
+          <!-- File Content -->
+          <ng-container *ngIf="fileInput.fileInfo.length !== 0">
+            <!-- ZIP or TAR File Format -->
+            <ng-container *ngIf="isArchive(fileInput.format)">
+              <ds-file-tree-view *ngFor="let node of fileInput.fileInfo" [node]="node"></ds-file-tree-view>
+            </ng-container>
+
+            <!-- TXT Format -->
+            <ng-container *ngIf="isTxt()">
+              <pre>{{ fileInput.fileInfo[0]?.content }}</pre>
+            </ng-container>
+
+            <!-- HTML Format -->
+            <ng-container *ngIf="fileInput.format === 'text/html'">
+              <div [innerHTML]="fileInput.fileInfo[0]?.content"></div>
+            </ng-container>
           </ng-container>
         </ul>
       </div>

src/app/item-page/simple/field-components/preview-section/file-description/file-description.component.ts

@@ -1,22 +1,33 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { MetadataBitstream } from 'src/app/core/metadata/metadata-bitstream.model';
 import { HALEndpointService } from '../../../../../core/shared/hal-endpoint.service';
-import {Router} from '@angular/router';
+import { Router } from '@angular/router';
+import { ConfigurationDataService } from '../../../../../core/data/configuration-data.service';
 
 const allowedPreviewFormats = ['text/plain', 'text/html', 'application/zip', 'application/x-tar'];
 @Component({
   selector: 'ds-file-description',
   templateUrl: './file-description.component.html',
   styleUrls: ['./file-description.component.scss'],
 })
-export class FileDescriptionComponent {
+export class FileDescriptionComponent implements OnInit {
   MIME_TYPE_IMAGES_PATH = './assets/images/mime/';
   MIME_TYPE_DEFAULT_IMAGE_NAME = 'application-octet-stream.png';
 
   @Input()
   fileInput: MetadataBitstream;
 
-  constructor(protected halService: HALEndpointService, private router: Router) { }
+  emailToContact: string;
+
+  constructor(protected halService: HALEndpointService,
+              private router: Router,
+              private configService: ConfigurationDataService) { }
+
+  ngOnInit(): void {
+    this.configService.findByPropertyName('lr.help.mail').subscribe(remoteData => {
+      this.emailToContact = remoteData.payload.values[0];
+    });
+  }
 
   public downloadFile() {
     void this.router.navigateByUrl('bitstreams/' + this.fileInput.id + '/download');
@@ -45,4 +56,9 @@ export class FileDescriptionComponent {
     const imgElement = event.target as HTMLImageElement;
     imgElement.src = this.MIME_TYPE_IMAGES_PATH + this.MIME_TYPE_DEFAULT_IMAGE_NAME;
   }
+
+  isArchive(format: string): boolean {
+    return format === 'application/zip' || format === 'application/x-tar';
+  }
+
 }

src/app/item-page/simple/field-components/preview-section/preview-section.component.html

@@ -1,3 +1,10 @@
+<!-- Loading Spinner -->
+<div *ngIf="(listOfFiles | async)?.length === 0" class="d-flex flex-column justify-content-center align-items-center my-3">
+  <div class="spinner-border text-primary" role="status"></div>
+  <div class="px-4 pt-2">{{'item.preview.loading-files' | translate}}
+    <a *ngIf="emailToContact" [href]="'mailto:' + emailToContact" class="email-text">{{ emailToContact }}</a>
+  </div>
+</div>
 <div *ngFor="let file of (listOfFiles | async)">
   <ds-file-description [fileInput] = 'file'></ds-file-description>
 </div>

src/app/item-page/simple/field-components/preview-section/preview-section.component.spec.ts

@@ -7,20 +7,33 @@ import { PreviewSectionComponent } from './preview-section.component';
 import { ResourceType } from 'src/app/core/shared/resource-type';
 import { HALLink } from 'src/app/core/shared/hal-link.model';
 import { Item } from 'src/app/core/shared/item.model';
+import { ConfigurationDataService } from '../../../../core/data/configuration-data.service';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../../../shared/mocks/translate-loader.mock';
 
 describe('PreviewSectionComponent', () => {
   let component: PreviewSectionComponent;
   let fixture: ComponentFixture<PreviewSectionComponent>;
   let mockRegistryService: any;
+  let mockConfigService: any;
 
   beforeEach(async () => {
+    mockConfigService = jasmine.createSpyObj(['findByPropertyName']);
     mockRegistryService = jasmine.createSpyObj('RegistryService', [
       'getMetadataBitstream',
     ]);
 
     await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useClass: TranslateLoaderMock
+        }
+      })],
       declarations: [PreviewSectionComponent],
-      providers: [{ provide: RegistryService, useValue: mockRegistryService }],
+      providers: [
+        { provide: RegistryService, useValue: mockRegistryService },
+        { provide: ConfigurationDataService, useValue: mockConfigService }],
     }).compileComponents();
   });
 

src/app/item-page/simple/field-components/preview-section/preview-section.component.ts

@@ -4,6 +4,7 @@ import { MetadataBitstream } from 'src/app/core/metadata/metadata-bitstream.mode
 import { RegistryService } from 'src/app/core/registry/registry.service';
 import { Item } from 'src/app/core/shared/item.model';
 import { getAllSucceededRemoteListPayload } from 'src/app/core/shared/operators';
+import { ConfigurationDataService } from '../../../../core/data/configuration-data.service';
 
 @Component({
   selector: 'ds-preview-section',
@@ -14,8 +15,10 @@ export class PreviewSectionComponent implements OnInit {
   @Input() item: Item;
 
   listOfFiles: BehaviorSubject<MetadataBitstream[]> = new BehaviorSubject<MetadataBitstream[]>([] as any);
+  emailToContact: string;
 
-  constructor(protected registryService: RegistryService) {} // Modified
+  constructor(protected registryService: RegistryService,
+              private configService: ConfigurationDataService) {} // Modified
 
   ngOnInit(): void {
     this.registryService
@@ -24,5 +27,10 @@ export class PreviewSectionComponent implements OnInit {
       .subscribe((data: MetadataBitstream[]) => {
         this.listOfFiles.next(data);
       });
+    this.configService.findByPropertyName('lr.help.mail')?.subscribe(remoteData => {
+      this.emailToContact = remoteData.payload.values[0];
+    });
   }
+
+
 }

src/assets/i18n/cs.json5

@@ -3380,6 +3380,10 @@
   "item.preview.authors.show.everyone": "Zobraz všechny autory",
   // "item.preview.authors.et.al": " ; et al.",
   "item.preview.authors.et.al": "; et al.",
+  // "item.preview.loading-files": "Loading files... This may take a few seconds as file previews are being generated. If the process takes too long, please contact the system administrator",
+  "item.preview.loading-files": "Načítání souborů... Může to trvat několik sekund, protože se generují náhledy souborů. Pokud proces trvá příliš dlouho, kontaktujte prosím správce systému",
+  // "item.preview.no-preview": "The file preview wasn't successfully generated, please contact the system administrator",
+  "item.preview.no-preview": "Náhled souboru nebyl úspěšně vygenerován, kontaktujte prosím správce systému",
   // "item.refbox.modal.copy.instruction": ["Press", "ctrl + c", "to copy"],
   "item.refbox.modal.copy.instruction": ["Stiskněte", "ctrl + c", "pro kopírování"],
   // "item.refbox.modal.submit": "Ok",

src/assets/i18n/en.json5

@@ -2832,6 +2832,10 @@
 
   "item.preview.authors.et.al": " ; et al.",
 
+  "item.preview.loading-files": "Loading files... This may take a few seconds as file previews are being generated. If the process takes too long, please contact the system administrator",
+
+  "item.preview.no-preview": "The file preview wasn't successfully generated, please contact the system administrator",
+
   "item.refbox.modal.copy.instruction": ["Press", "ctrl + c", "to copy"],
 
   "item.refbox.modal.submit": "Ok",