inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "AAE-34641 Fix form loading when tab is changed (#10843)" (#10862)

Browse Source 
This reverts commit 685bc387b5.
This commit is contained in:
Ehsan Rezaei
2025-05-15 12:07:07 +02:00
committed by GitHub
parent 81822a119d
commit 28137d8a09
3 changed files with 62 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html
View File

@@ -1,105 +1,91 @@
<div <div *ngIf="(viewerType === 'media' || viewerType === 'pdf' || viewerType === 'image') ? isLoading || !isContentReady : isLoading"
*ngIf="viewerType === 'media' || viewerType === 'pdf' || viewerType === 'image' ? (isLoading || !isContentReady) : isLoading" class="adf-viewer-render-main-loader">
class="adf-viewer-render-main-loader"
>
<div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container"> <div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
<div class="adf-viewer-render-content-container"> <div class="adf-viewer-render-content-container">
<div class="adf-viewer-render__loading-screen"> <div class="adf-viewer-render__loading-screen ">
<h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2> <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
<div> <div>
<mat-spinner class="adf-viewer-render__loading-screen__spinner" /> <mat-spinner class="adf-viewer-render__loading-screen__spinner"/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div <div *ngIf="!isLoading"
[hidden]="viewerType === 'media' || viewerType === 'pdf' || viewerType === 'image' ? (isLoading || !isContentReady) : isLoading" class="adf-viewer-render-main">
class="adf-viewer-render-main"
>
<div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container"> <div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
<div class="adf-viewer-render-content-container" [ngSwitch]="viewerType"> <div class="adf-viewer-render-content-container" [ngSwitch]="viewerType">
<ng-container *ngSwitchCase="'external'"> <ng-container *ngSwitchCase="'external'">
<adf-preview-extension <adf-preview-extension *ngIf="!!externalViewer"
*ngIf="!!externalViewer" [id]="externalViewer.component"
[id]="externalViewer.component" [url]="urlFile"
[url]="urlFile" [extension]="externalViewer.fileExtension"
[extension]="externalViewer.fileExtension" [nodeId]="nodeId"
[nodeId]="nodeId" [attr.data-automation-id]="externalViewer.component" />
[attr.data-automation-id]="externalViewer.component"
/>
</ng-container> </ng-container>
<ng-container *ngSwitchCase="'pdf'"> <ng-container *ngSwitchCase="'pdf'">
<adf-pdf-viewer <adf-pdf-viewer [thumbnailsTemplate]="thumbnailsTemplate"
[thumbnailsTemplate]="thumbnailsTemplate" [allowThumbnails]="allowThumbnails"
[allowThumbnails]="allowThumbnails" [blobFile]="blobFile"
[blobFile]="blobFile" [urlFile]="urlFile"
[urlFile]="urlFile" [fileName]="internalFileName"
[fileName]="internalFileName" [cacheType]="cacheTypeForContent"
[cacheType]="cacheTypeForContent" (pagesLoaded)="isContentReady = true"
(pagesLoaded)="isContentReady = true" (close)="onClose()"
(close)="onClose()" (error)="onUnsupportedFile()" />
(error)="onUnsupportedFile()"
/>
</ng-container> </ng-container>
<ng-container *ngSwitchCase="'image'"> <ng-container *ngSwitchCase="'image'">
<adf-img-viewer <adf-img-viewer [urlFile]="urlFile"
[urlFile]="urlFile" [readOnly]="readOnly"
[readOnly]="readOnly" [fileName]="internalFileName"
[fileName]="internalFileName" [allowedEditActions]="allowedEditActions"
[allowedEditActions]="allowedEditActions" [blobFile]="blobFile"
[blobFile]="blobFile" (error)="onUnsupportedFile()"
(error)="onUnsupportedFile()" (submit)="onSubmitFile($event)"
(submit)="onSubmitFile($event)" (imageLoaded)="isContentReady = true"
(imageLoaded)="isContentReady = true" (isSaving)="isSaving.emit($event)"
(isSaving)="isSaving.emit($event)"
/> />
</ng-container> </ng-container>
<ng-container *ngSwitchCase="'media'"> <ng-container *ngSwitchCase="'media'">
<adf-media-player <adf-media-player id="adf-mdedia-player"
id="adf-mdedia-player" [urlFile]="urlFile"
[urlFile]="urlFile" [tracks]="tracks"
[tracks]="tracks" [mimeType]="mimeType"
[mimeType]="mimeType" [blobFile]="blobFile"
[blobFile]="blobFile" [fileName]="internalFileName"
[fileName]="internalFileName" (error)="onUnsupportedFile()"
(error)="onUnsupportedFile()" (canPlay)="isContentReady = true"/>
(canPlay)="isContentReady = true"
/>
</ng-container> </ng-container>
<ng-container *ngSwitchCase="'text'"> <ng-container *ngSwitchCase="'text'">
<adf-txt-viewer [urlFile]="urlFile" [blobFile]="blobFile" /> <adf-txt-viewer [urlFile]="urlFile"
[blobFile]="blobFile" />
</ng-container> </ng-container>
<ng-container *ngSwitchCase="'custom'"> <ng-container *ngSwitchCase="'custom'">
<ng-container *ngFor="let ext of viewerExtensions"> <ng-container *ngFor="let ext of viewerExtensions">
<adf-preview-extension <adf-preview-extension *ngIf="checkExtensions(ext.fileExtension)"
*ngIf="checkExtensions(ext.fileExtension)" [id]="ext.component"
[id]="ext.component" [url]="urlFile"
[url]="urlFile" [extension]="extension"
[extension]="extension" [nodeId]="nodeId"
[nodeId]="nodeId" [attr.data-automation-id]="ext.component" />
[attr.data-automation-id]="ext.component"
/>
</ng-container> </ng-container>
<ng-container *ngFor="let extensionTemplate of extensionTemplates"> <ng-container *ngFor="let extensionTemplate of extensionTemplates">
<span *ngIf="extensionTemplate.isVisible" class="adf-viewer-render-custom-content"> <span *ngIf="extensionTemplate.isVisible" class="adf-viewer-render-custom-content">
<ng-template <ng-template [ngTemplateOutlet]="extensionTemplate.template"
[ngTemplateOutlet]="extensionTemplate.template" [ngTemplateOutletContext]="{ urlFile: urlFile, extension: extension }" />
[ngTemplateOutletContext]="{ urlFile: urlFile, extension: extension }"
/>
</span> </span>
</ng-container> </ng-container>
</ng-container> </ng-container>
<ng-container *ngSwitchDefault> <ng-container *ngSwitchDefault>
<adf-viewer-unknown-format [customError]="customError" /> <adf-viewer-unknown-format [customError]="customError"/>
</ng-container> </ng-container>
</div> </div>
</div> </div>

18
lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.spec.ts
View File

@@ -24,7 +24,7 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { NoopTranslateModule, UnitTestingUtils } from '../../../testing'; import { NoopTranslateModule, UnitTestingUtils } from '../../../testing';
import { RenderingQueueServices } from '../../services/rendering-queue.services'; import { RenderingQueueServices } from '../../services/rendering-queue.services';
import { ViewerRenderComponent } from './viewer-render.component'; import { ViewerRenderComponent } from './viewer-render.component';
import { ImgViewerComponent, MediaPlayerComponent, PdfViewerComponent, ViewerExtensionDirective } from '@alfresco/adf-core'; import { ImgViewerComponent, MediaPlayerComponent, ViewerExtensionDirective } from '@alfresco/adf-core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@Component({ @Component({
@@ -504,23 +504,22 @@ describe('ViewerComponent', () => {
expect(getMainLoader()).toBeNull(); expect(getMainLoader()).toBeNull();
expect(component.viewerType).toBe('media'); expect(component.viewerType).toBe('media');
expect(component.isContentReady).toBeTrue();
}); });
it('should show spinner until content is ready when viewerType is pdf', () => { // eslint-disable-next-line ban/ban
xit('should show spinner until content is ready when viewerType is pdf', () => {
component.isLoading = false; component.isLoading = false;
component.urlFile = 'some-url.pdf'; component.urlFile = 'some-url.pdf';
expect(getMainLoader()).toBeNull();
component.ngOnChanges(); component.ngOnChanges();
fixture.detectChanges(); fixture.detectChanges();
const imgViewer = testingUtils.getByDirective(PdfViewerComponent); expect(getMainLoader()).not.toBeNull();
imgViewer.triggerEventHandler('pagesLoaded', null);
fixture.detectChanges(); fixture.detectChanges();
expect(getMainLoader()).toBeNull();
expect(component.viewerType).toBe('pdf'); expect(component.viewerType).toBe('pdf');
expect(component.isContentReady).toBeTrue();
}); });
it('should show spinner until content is ready when viewerType is image', () => { it('should show spinner until content is ready when viewerType is image', () => {
@@ -537,10 +536,9 @@ describe('ViewerComponent', () => {
expect(getMainLoader()).toBeNull(); expect(getMainLoader()).toBeNull();
expect(component.viewerType).toBe('image'); expect(component.viewerType).toBe('image');
expect(component.isContentReady).toBeTrue();
}); });
it('should not show spinner and set isContentReady = true for other viewer types different than media/pdf/image', () => { it('should not show spinner when isLoading = false and isContentReady = false for other viewer types', () => {
component.isLoading = false; component.isLoading = false;
component.urlFile = 'some-url.txt'; component.urlFile = 'some-url.txt';
@@ -548,7 +546,7 @@ describe('ViewerComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
expect(getMainLoader()).toBeNull(); expect(getMainLoader()).toBeNull();
expect(component.isContentReady).toBeTrue(); expect(component.isContentReady).toBeFalse();
}); });
}); });
}); });

18
lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.ts
View File

@@ -29,8 +29,6 @@ import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component';
import { TxtViewerComponent } from '../txt-viewer/txt-viewer.component'; import { TxtViewerComponent } from '../txt-viewer/txt-viewer.component';
import { UnknownFormatComponent } from '../unknown-format/unknown-format.component'; import { UnknownFormatComponent } from '../unknown-format/unknown-format.component';
type ViewerType = 'media' | 'image' | 'pdf' | 'unknown';
@Component({ @Component({
selector: 'adf-viewer-render', selector: 'adf-viewer-render',
standalone: true, standalone: true,
@@ -143,7 +141,7 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
extensionsSupportedByTemplates: string[] = []; extensionsSupportedByTemplates: string[] = [];
extension: string; extension: string;
internalFileName: string; internalFileName: string;
viewerType: ViewerType = 'unknown'; viewerType: string = 'unknown';
isContentReady = false; isContentReady = false;
/** /**
@@ -187,25 +185,19 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
} }
ngOnChanges() { ngOnChanges() {
this.updateLoadingState(); this.isContentReady = false;
this.isLoading = !this.blobFile && !this.urlFile;
if (this.blobFile) { if (this.blobFile) {
this.setUpBlobData(); this.setUpBlobData();
} else if (this.urlFile) { } else if (this.urlFile) {
this.setUpUrlFile(); 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() { private setUpBlobData() {
this.internalFileName = this.fileName; this.internalFileName = this.fileName;
this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type) as ViewerType; this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.blobFile.type);
this.extensionChange.emit(this.blobFile.type); this.extensionChange.emit(this.blobFile.type);
this.scrollTop(); this.scrollTop();
@@ -214,7 +206,7 @@ export class ViewerRenderComponent implements OnChanges, OnInit {
private setUpUrlFile() { private setUpUrlFile() {
this.internalFileName = this.fileName ? this.fileName : this.viewUtilService.getFilenameFromUrl(this.urlFile); this.internalFileName = this.fileName ? this.fileName : this.viewUtilService.getFilenameFromUrl(this.urlFile);
this.extension = this.viewUtilService.getFileExtension(this.internalFileName); this.extension = this.viewUtilService.getFileExtension(this.internalFileName);
this.viewerType = this.viewUtilService.getViewerType(this.extension, this.mimeType, this.extensionsSupportedByTemplates) as ViewerType; this.viewerType = this.viewUtilService.getViewerType(this.extension, this.mimeType, this.extensionsSupportedByTemplates);
this.extensionChange.emit(this.extension); this.extensionChange.emit(this.extension);
this.scrollTop(); this.scrollTop();