[ADF-3332][ADF-3352] Add property e2e test and leftsidebar viewer (#3814)

* new viewer test left sidebar fix height width no overlay viewer * fix lint and failing e2e * missing semi column * fix test * fix template * documentation
2025-07-24 17:32:15 +00:00 · 2018-09-21 11:37:40 +01:00
parent cfbe3cfd86
commit 897a557afa
13 changed files with 870 additions and 72 deletions
--- a/lib/core/viewer/components/viewer.component.html
+++ b/lib/core/viewer/components/viewer.component.html
@@ -1,20 +1,32 @@
 <div *ngIf="showViewer"
-    class="adf-viewer-container"
-    [class.adf-viewer-overlay-container]="overlayMode"
-    [class.adf-viewer-inline-container]="!overlayMode">
+     class="adf-viewer-container"
+     [class.adf-viewer-overlay-container]="overlayMode"
+     [class.adf-viewer-inline-container]="!overlayMode">

    <div class="adf-viewer-content" fxLayout="column">
        <ng-content select="adf-viewer-toolbar"></ng-content>
        <ng-container *ngIf="showToolbar && !toolbar">
-            <adf-toolbar color="default" class="adf-viewer-toolbar">
+            <adf-toolbar color="default" id="adf-viewer-toolbar" class="adf-viewer-toolbar">

                <adf-toolbar-title>
+
+                    <ng-container *ngIf="allowSidebar">
+                        <button
+                            mat-icon-button
+                            title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
+                            data-automation-id="adf-toolbar-left-sidebar"
+                            [color]="showLeftSidebar ? 'accent' : 'default'"
+                            (click)="toggleLeftSidebar()">
+                            <mat-icon>info_outline</mat-icon>
+                        </button>
+                    </ng-container>
+
                    <button *ngIf="allowGoBack"
-                        class="adf-viewer-close-button"
-                        data-automation-id="adf-toolbar-back"
-                        mat-icon-button
-                        title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
-                        (click)="onBackButtonClick()">
+                            class="adf-viewer-close-button"
+                            data-automation-id="adf-toolbar-back"
+                            mat-icon-button
+                            title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
+                            (click)="onBackButtonClick()">
                        <mat-icon>close</mat-icon>
                    </button>
                </adf-toolbar-title>
@@ -44,6 +56,7 @@

                <ng-container *ngIf="mnuOpenWith" data-automation-id='adf-toolbar-custom-btn'>
                    <button
+                        id="adf-viewer-openwith"
                        mat-button
                        [matMenuTriggerFor]="mnuOpenWith"
                        data-automation-id="adf-toolbar-open-with">
@@ -58,6 +71,7 @@
                <adf-toolbar-divider></adf-toolbar-divider>

                <button
+                    id="adf-viewer-download"
                    *ngIf="allowDownload"
                    mat-icon-button
                    title="{{ 'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate }}"
@@ -67,6 +81,7 @@
                </button>

                <button
+                    id="adf-viewer-print"
                    *ngIf="allowPrint"
                    mat-icon-button
                    title="{{ 'ADF_VIEWER.ACTIONS.PRINT' | translate }}"
@@ -76,6 +91,7 @@
                </button>

                <button
+                    id="adf-viewer-share"
                    *ngIf="allowShare"
                    mat-icon-button
                    title="{{ 'ADF_VIEWER.ACTIONS.SHARE' | translate }}"
@@ -85,6 +101,7 @@
                </button>

                <button
+                    id="adf-viewer-fullscreen"
                    *ngIf="viewerType !== 'media' && allowFullScreen"
                    mat-icon-button
                    title="{{ 'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate }}"
@@ -95,6 +112,7 @@

                <ng-container *ngIf="mnuMoreActions">
                    <button
+                        id="adf-viewer-moreactions"
                        mat-icon-button
                        [matMenuTriggerFor]="mnuMoreActions"
                        title="{{ 'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate }}"
@@ -117,15 +135,18 @@
                        (click)="toggleSidebar()">
                        <mat-icon>info_outline</mat-icon>
                    </button>
+
                </ng-container>

            </adf-toolbar>
        </ng-container>

        <div fxLayout="row" fxFlex="1 1 auto">
+            showSidebar 1 {{showSidebar}}

            <ng-container *ngIf="allowSidebar && showSidebar">
-                <div class="adf-viewer__sidebar" [ngClass]="getSideBarStyle()" fxFlexOrder="{{sidebarPosition === 'left'? 1 : 4 }}">
+                showSidebar {{showSidebar}}
+                <div class="adf-viewer__sidebar" [ngClass]="'adf-viewer__sidebar__right'" fxFlexOrder="4"  id="adf-right-sidebar" >
                    <ng-container *ngIf="sidebarTemplate">
                        <ng-container *ngTemplateOutlet="sidebarTemplate;context:sidebarTemplateContext"></ng-container>
                    </ng-container>
@@ -133,6 +154,15 @@
                </div>
            </ng-container>

+            <ng-container *ngIf="allowSidebar && showLeftSidebar">
+                <div class="adf-viewer__sidebar" [ngClass]="'adf-viewer__sidebar__left'" fxFlexOrder="1"  id="adf-left-sidebar" >
+                    <ng-container *ngIf="sidebarLeftTemplate">
+                        <ng-container *ngTemplateOutlet="sidebarLeftTemplate;context:sidebarLeftTemplateContext"></ng-container>
+                    </ng-container>
+                    <ng-content *ngIf="!sidebarLeftTemplate" select="adf-viewer-sidebar"></ng-content>
+                </div>
+            </ng-container>
+
            <div  *ngIf="isLoading"  class="adf-viewer-main" fxFlexOrder="{{sidebarPosition !== 'left'? 1 : 4}}" fxFlex="1 1 auto">
                <div class="adf-viewer-layout-content adf-viewer__fullscreen-container">
                    <div class="adf-viewer-content-container">
@@ -169,12 +199,12 @@
                        </ng-container>

                        <ng-container *ngSwitchCase="'in_creation'">
-                                    <div class="adf-viewer__loading-screen" fxFlex="1 1 auto">
-                                        <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
-                                        <div>
-                                            <mat-spinner></mat-spinner>
-                                        </div>
-                                    </div>
+                            <div class="adf-viewer__loading-screen" fxFlex="1 1 auto">
+                                <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
+                                <div>
+                                    <mat-spinner></mat-spinner>
+                                </div>
+                            </div>
                        </ng-container>

                        <ng-container *ngSwitchCase="'custom'">
--- a/lib/core/viewer/components/viewer.component.scss
+++ b/lib/core/viewer/components/viewer.component.scss
@@ -11,6 +11,10 @@

    .adf-viewer {

+        position: absolute;
+        width: 100%;
+        height: 100%;
+
        .mat-toolbar {
            color: mat-color($foreground, text, 0.54);
        }
--- a/lib/core/viewer/components/viewer.component.spec.ts
+++ b/lib/core/viewer/components/viewer.component.spec.ts
@@ -141,10 +141,10 @@ describe('ViewerComponent', () => {
            { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
            {
                provide: RenditionsService, useValue: {
-                getRendition: () => {
-                    return throwError('throwed');
+                    getRendition: () => {
+                        return throwError('throwed');
+                    }
                }
-            }
            },
            RenderingQueueServices,
            { provide: Location, useClass: SpyLocation }
@@ -178,14 +178,14 @@ describe('ViewerComponent', () => {
        component.ngOnChanges({});
        tick();

-        expect(alfrescoApiService.nodesApi.getNodeInfo).toHaveBeenCalledWith('id1', {include: [ 'allowableOperations' ]});
+        expect(alfrescoApiService.nodesApi.getNodeInfo).toHaveBeenCalledWith('id1', { include: ['allowableOperations'] });
        expect(component.fileTitle).toBe('file1');

        component.fileNodeId = 'id2';
        component.ngOnChanges({});
        tick();

-        expect(alfrescoApiService.nodesApi.getNodeInfo).toHaveBeenCalledWith('id2', {include: [ 'allowableOperations' ]});
+        expect(alfrescoApiService.nodesApi.getNodeInfo).toHaveBeenCalledWith('id2', { include: ['allowableOperations'] });
        expect(component.fileTitle).toBe('file2');
    }));

@@ -251,37 +251,44 @@ describe('ViewerComponent', () => {
            it('should NOT display sidebar if is not allowed', () => {
                component.showSidebar = true;
                component.allowSidebar = false;
-                component.sidebarPosition = 'left';
                fixture.detectChanges();
-                let sidebar = element.querySelector('.adf-viewer__sidebar');
-                expect(sidebar).toBeNull();
-            });

-            it('should display sidebar on the left side', () => {
-                component.showSidebar = true;
-                component.allowSidebar = true;
-                component.sidebarPosition = 'left';
-                fixture.detectChanges();
-                let sidebar = element.querySelector('.adf-viewer__sidebar');
-                expect(getComputedStyle(sidebar).order).toEqual('1');
+                fixture.whenStable().then(() => {
+                    let sidebar = element.querySelector('#adf-right-sidebar');
+                    expect(sidebar).toBeNull();
+                });
            });

            it('should display sidebar on the right side', () => {
                component.showSidebar = true;
-                component.allowSidebar = true;
-                component.sidebarPosition = 'right';
                fixture.detectChanges();
-                let sidebar = element.querySelector('.adf-viewer__sidebar');
-                expect(getComputedStyle(sidebar).order).toEqual('4');
+
+                fixture.whenStable().then(() => {
+                    let sidebar = element.querySelector('#adf-right-sidebar');
+                    expect(getComputedStyle(sidebar).order).toEqual('4');
+                });
            });

-            it('should display sidebar on the right side as fallback', () => {
-                component.showSidebar = true;
-                component.allowSidebar = true;
-                component.sidebarPosition = 'unknown-value';
+            it('should NOT display left sidebar if is not allowed', () => {
+                component.showLeftSidebar = true;
+                component.allowSidebar = false;
                fixture.detectChanges();
-                let sidebar = element.querySelector('.adf-viewer__sidebar');
-                expect(getComputedStyle(sidebar).order).toEqual('4');
+
+                fixture.whenStable().then(() => {
+                    let sidebar = element.querySelector('#adf-left-sidebar');
+                    expect(sidebar).toBeNull();
+                });
+
+            });
+
+            it('should display sidebar on the left side', () => {
+                component.showLeftSidebar = true;
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    let sidebar = element.querySelector('#adf-left-sidebar');
+                    expect(getComputedStyle(sidebar).order).toEqual('4');
+                });
            });
        });

--- a/lib/core/viewer/components/viewer.component.ts
+++ b/lib/core/viewer/components/viewer.component.ts
@@ -114,6 +114,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
    @Input()
    allowPrint = false;

+    /**  @deprecated 2.5.0 inkect the share button directive as custom button */
    /** Toggles sharing. */
    @Input()
    allowShare = false;
@@ -144,18 +145,29 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
    @Input()
    allowThumbnails = true;

+    /** @deprecated 2.5.0 will be renamed showRightSidebar in 3.0.0  */
    /** Toggles sidebar visibility. Requires `allowSidebar` to be set to `true`. */
    @Input()
    showSidebar = false;

+    /** Toggles left sidebar visibility. Requires `allowSidebar` to be set to `true`. */
+    @Input()
+    showLeftSidebar = false;
+
+    /** @deprecated 2.5.0 use sidebarTemplateLeft */
    /** The position of the sidebar. Can be `left` or `right`. */
    @Input()
    sidebarPosition = 'right';

+    /**  @deprecated 2.5.0 rename sidebarRight */
    /** The template for the sidebar. The template context contains the loaded node data. */
    @Input()
    sidebarTemplate: TemplateRef<any> = null;

+    /** The template for the left sidebar. The template context contains the loaded node data. */
+    @Input()
+    sidebarLeftTemplate: TemplateRef<any> = null;
+
    /** The template for the pdf thumbnails. */
    @Input()
    thumbnailsTemplate: TemplateRef<any> = null;
@@ -224,6 +236,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
    otherMenu: any;
    extension: string;
    sidebarTemplateContext: { node: MinimalNodeEntryEntity } = { node: null };
+    sidebarLeftTemplateContext: { node: MinimalNodeEntryEntity } = { node: null };
    fileTitle: string;

    private cacheBusterNumber;
@@ -377,6 +390,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {

        this.extensionChange.emit(this.extension);
        this.sidebarTemplateContext.node = data;
+        this.sidebarLeftTemplateContext.node = data;
        this.scrollTop();

        return setupNode;
@@ -413,6 +427,16 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
        }
    }

+    toggleLeftSidebar() {
+        this.showLeftSidebar = !this.showLeftSidebar;
+        if (this.showSidebar && this.nodeId) {
+            this.apiService.getInstance().nodes.getNodeInfo(this.nodeId, { include: ['allowableOperations'] })
+                .then((data: MinimalNodeEntryEntity) => {
+                    this.sidebarLeftTemplateContext.node = data;
+                });
+        }
+    }
+
    private getDisplayName(name) {
        return this.displayName || name ;
    }
@@ -724,10 +748,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
        });
    }

-    getSideBarStyle(): string {
-        return this.sidebarPosition === 'left' ? 'adf-viewer__sidebar__left' : 'adf-viewer__sidebar__right';
-    }
-
    private generateCacheBusterNumber() {
        this.cacheBusterNumber = Date.now();
    }