From 685bc387b585db77694355378309213cfde356e3 Mon Sep 17 00:00:00 2001 From: Tomasz Nastaly Date: Tue, 13 May 2025 12:55:45 +0200 Subject: [PATCH] AAE-34641 Fix form loading when tab is changed (#10843) --- .../viewer-render.component.html | 112 ++++++++++-------- .../viewer-render.component.spec.ts | 18 +-- .../viewer-render/viewer-render.component.ts | 18 ++- 3 files changed, 86 insertions(+), 62 deletions(-) diff --git a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html index 0e09172cf9..61deb391d8 100644 --- a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html +++ b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html @@ -1,91 +1,105 @@ -
+
-
+

{{ 'ADF_VIEWER.LOADING' | translate }}

-
-
+
- + - + - - + - + - + - + - +
diff --git a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.spec.ts b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.spec.ts index f8b3aef4e0..1cd331ab72 100644 --- a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.spec.ts +++ b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.spec.ts @@ -24,7 +24,7 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog'; import { NoopTranslateModule, UnitTestingUtils } from '../../../testing'; import { RenderingQueueServices } from '../../services/rendering-queue.services'; import { ViewerRenderComponent } from './viewer-render.component'; -import { ImgViewerComponent, MediaPlayerComponent, ViewerExtensionDirective } from '@alfresco/adf-core'; +import { ImgViewerComponent, MediaPlayerComponent, PdfViewerComponent, ViewerExtensionDirective } from '@alfresco/adf-core'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @Component({ @@ -504,22 +504,23 @@ describe('ViewerComponent', () => { expect(getMainLoader()).toBeNull(); expect(component.viewerType).toBe('media'); + expect(component.isContentReady).toBeTrue(); }); - // eslint-disable-next-line ban/ban - xit('should show spinner until content is ready when viewerType is pdf', () => { + it('should show spinner until content is ready when viewerType is pdf', () => { component.isLoading = false; component.urlFile = 'some-url.pdf'; + expect(getMainLoader()).toBeNull(); component.ngOnChanges(); fixture.detectChanges(); - expect(getMainLoader()).not.toBeNull(); - + const imgViewer = testingUtils.getByDirective(PdfViewerComponent); + imgViewer.triggerEventHandler('pagesLoaded', null); fixture.detectChanges(); - expect(getMainLoader()).toBeNull(); expect(component.viewerType).toBe('pdf'); + expect(component.isContentReady).toBeTrue(); }); it('should show spinner until content is ready when viewerType is image', () => { @@ -536,9 +537,10 @@ describe('ViewerComponent', () => { expect(getMainLoader()).toBeNull(); expect(component.viewerType).toBe('image'); + expect(component.isContentReady).toBeTrue(); }); - it('should not show spinner when isLoading = false and isContentReady = false for other viewer types', () => { + it('should not show spinner and set isContentReady = true for other viewer types different than media/pdf/image', () => { component.isLoading = false; component.urlFile = 'some-url.txt'; @@ -546,7 +548,7 @@ describe('ViewerComponent', () => { fixture.detectChanges(); expect(getMainLoader()).toBeNull(); - expect(component.isContentReady).toBeFalse(); + expect(component.isContentReady).toBeTrue(); }); }); }); diff --git a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.ts b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.ts index 61b41fef69..725159123f 100644 --- a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.ts +++ b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.ts @@ -29,6 +29,8 @@ import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component'; import { TxtViewerComponent } from '../txt-viewer/txt-viewer.component'; import { UnknownFormatComponent } from '../unknown-format/unknown-format.component'; +type ViewerType = 'media' | 'image' | 'pdf' | 'unknown'; + @Component({ selector: 'adf-viewer-render', standalone: true, @@ -141,7 +143,7 @@ export class ViewerRenderComponent implements OnChanges, OnInit { extensionsSupportedByTemplates: string[] = []; extension: string; internalFileName: string; - viewerType: string = 'unknown'; + viewerType: ViewerType = 'unknown'; isContentReady = false; /** @@ -185,19 +187,25 @@ export class ViewerRenderComponent implements OnChanges, OnInit { } ngOnChanges() { - this.isContentReady = false; - this.isLoading = !this.blobFile && !this.urlFile; + this.updateLoadingState(); if (this.blobFile) { this.setUpBlobData(); } else if (this.urlFile) { this.setUpUrlFile(); } + + this.updateLoadingState(); + } + + private updateLoadingState() { + this.isContentReady = !(this.viewerType === 'media' || this.viewerType === 'pdf' || this.viewerType === 'image'); + this.isLoading = !this.blobFile && !this.urlFile; } private setUpBlobData() { this.internalFileName = this.fileName; - this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type); + this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type) as ViewerType; this.extensionChange.emit(this.blobFile.type); this.scrollTop(); @@ -206,7 +214,7 @@ export class ViewerRenderComponent implements OnChanges, OnInit { private setUpUrlFile() { this.internalFileName = this.fileName ? this.fileName : this.viewUtilService.getFilenameFromUrl(this.urlFile); this.extension = this.viewUtilService.getFileExtension(this.internalFileName); - this.viewerType = this.viewUtilService.getViewerType(this.extension, this.mimeType, this.extensionsSupportedByTemplates); + this.viewerType = this.viewUtilService.getViewerType(this.extension, this.mimeType, this.extensionsSupportedByTemplates) as ViewerType; this.extensionChange.emit(this.extension); this.scrollTop();