mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
[AAE-11496] Publish aca-viewer and aca-preview (#2945)
* [AAE-11496] Publish aca-viewer and aca-preview * fix tests
This commit is contained in:
Bartosz Sekula
GitHub
@@ -104,7 +104,7 @@ import { CommentsTabComponent } from './components/info-drawer/comments-tab/comm
|
||||
import { LibraryMetadataTabComponent } from './components/info-drawer/library-metadata-tab/library-metadata-tab.component';
|
||||
import { MetadataTabComponent } from './components/info-drawer/metadata-tab/metadata-tab.component';
|
||||
import { VersionsTabComponent } from './components/info-drawer/versions-tab/versions-tab.component';
|
||||
import { PreviewComponent } from './components/preview/preview.component';
|
||||
import { PreviewComponent } from '@alfresco/aca-preview';
|
||||
import { DocumentDisplayModeComponent } from './components/toolbar/document-display-mode/document-display-mode.component';
|
||||
import { ToggleEditOfflineComponent } from './components/toolbar/toggle-edit-offline/toggle-edit-offline.component';
|
||||
import { ToggleFavoriteLibraryComponent } from './components/toolbar/toggle-favorite-library/toggle-favorite-library.component';
|
||||
|
||||
@@ -67,7 +67,7 @@ export const CONTENT_ROUTES: ExtensionRoute[] = [
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -123,7 +123,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
// deprecated, backwards compatibility with ACA 1.8
|
||||
{
|
||||
path: 'preview/:nodeId',
|
||||
loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
|
||||
loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
|
||||
data: {
|
||||
navigateSource: 'personal-files'
|
||||
}
|
||||
@@ -137,7 +137,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'personal-files'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -150,7 +150,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'personal-files'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -176,14 +176,14 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'personal-files'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
},
|
||||
// deprecated, backwards compatibility with ACA 1.8
|
||||
{
|
||||
path: 'preview/:nodeId',
|
||||
loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
|
||||
loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
|
||||
data: {
|
||||
navigateSource: 'personal-files'
|
||||
}
|
||||
@@ -191,7 +191,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
// deprecated, backwards compatibility with ACA 1.8
|
||||
{
|
||||
path: ':folderId/preview/:nodeId',
|
||||
loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
|
||||
loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
|
||||
data: {
|
||||
navigateSource: 'personal-files'
|
||||
}
|
||||
@@ -205,7 +205,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'personal-files'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -238,7 +238,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
// deprecated, backwards compatibility with ACA 1.8
|
||||
{
|
||||
path: 'preview/:nodeId',
|
||||
loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
|
||||
loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
|
||||
data: {
|
||||
navigateSource: 'libraries'
|
||||
}
|
||||
@@ -252,9 +252,12 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'libraries'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
],
|
||||
data: {
|
||||
navigateSource: 'libraries'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'view/:nodeId/:versionId',
|
||||
@@ -265,7 +268,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'libraries'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -309,7 +312,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'libraries'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -322,7 +325,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'libraries'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -347,7 +350,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
// deprecated, backwards compatibility with ACA 1.8
|
||||
{
|
||||
path: 'preview/:nodeId',
|
||||
loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
|
||||
loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
|
||||
data: {
|
||||
navigateSource: 'favorites'
|
||||
}
|
||||
@@ -361,7 +364,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'favorites'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -374,7 +377,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'favorites'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -398,7 +401,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
// deprecated, backwards compatibility with ACA 1.8
|
||||
{
|
||||
path: 'preview/:nodeId',
|
||||
loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
|
||||
loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
|
||||
data: {
|
||||
navigateSource: 'recent-files'
|
||||
}
|
||||
@@ -412,7 +415,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'recent-files'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -425,7 +428,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'recent-files'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -447,7 +450,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
// deprecated, backwards compatibility with ACA 1.8
|
||||
{
|
||||
path: 'preview/:nodeId',
|
||||
loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
|
||||
loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
|
||||
data: {
|
||||
navigateSource: 'shared'
|
||||
}
|
||||
@@ -461,7 +464,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'shared'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -474,7 +477,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'shared'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -499,7 +502,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
// deprecated, backwards compatibility with ACA 1.8
|
||||
{
|
||||
path: 'preview/:nodeId',
|
||||
loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
|
||||
loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
|
||||
data: {
|
||||
navigateSource: 'search'
|
||||
}
|
||||
@@ -513,7 +516,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'search'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -526,7 +529,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'search'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -551,7 +554,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
|
||||
data: {
|
||||
navigateSource: 'search'
|
||||
},
|
||||
loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
|
||||
loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
<ng-container *ngIf="nodeId">
|
||||
<adf-viewer
|
||||
[ngClass]="{
|
||||
'right_side--hide': !showRightSide
|
||||
}"
|
||||
[nodeId]="nodeId"
|
||||
[allowNavigate]="navigateMultiple"
|
||||
[allowRightSidebar]="true"
|
||||
[allowPrint]="false"
|
||||
[showRightSidebar]="true"
|
||||
[allowDownload]="false"
|
||||
[allowFullScreen]="false"
|
||||
[canNavigateBefore]="!!previousNodeId"
|
||||
[canNavigateNext]="!!nextNodeId"
|
||||
[overlayMode]="true"
|
||||
(showViewerChange)="onVisibilityChanged($event)"
|
||||
(navigateBefore)="onNavigateBefore($event)"
|
||||
(navigateNext)="onNavigateNext($event)"
|
||||
>
|
||||
<adf-viewer-sidebar *ngIf="infoDrawerOpened$ | async">
|
||||
<aca-info-drawer [node]="selection.file"></aca-info-drawer>
|
||||
</adf-viewer-sidebar>
|
||||
|
||||
<adf-viewer-open-with *ngIf="openWith.length">
|
||||
<ng-container *ngFor="let action of openWith; trackBy: trackByActionId">
|
||||
<app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
|
||||
</ng-container>
|
||||
</adf-viewer-open-with>
|
||||
|
||||
<adf-viewer-toolbar-actions *ngIf="!simplestMode">
|
||||
<ng-container *ngFor="let action of viewerToolbarActions; trackBy: trackByActionId">
|
||||
<aca-toolbar-action [actionRef]="action"></aca-toolbar-action>
|
||||
</ng-container>
|
||||
</adf-viewer-toolbar-actions>
|
||||
</adf-viewer>
|
||||
</ng-container>
|
||||
@@ -1,27 +0,0 @@
|
||||
.app-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.adf-viewer-toolbar .adf-toolbar-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-viewer-toolbar-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.adf-toolbar-divider {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
// todo: remove this when viewer supports extensions
|
||||
.adf-viewer-toolbar .mat-toolbar > button:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-viewer.right_side--hide .adf-viewer__sidebar__right {
|
||||
width: 0;
|
||||
}
|
||||
@@ -1,695 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Alfresco Example Content Application
|
||||
*
|
||||
* Copyright (C) 2005 - 2020 Alfresco Software Limited
|
||||
*
|
||||
* This file is part of the Alfresco Example Content Application.
|
||||
* If the software was purchased under a paid Alfresco license, the terms of
|
||||
* the paid license agreement will prevail. Otherwise, the software is
|
||||
* provided under the following open source license terms:
|
||||
*
|
||||
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Lesser General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Lesser General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
|
||||
import { UserPreferencesService, UploadService, NodesApiService } from '@alfresco/adf-core';
|
||||
import { ClosePreviewAction } from '@alfresco/aca-shared/store';
|
||||
import { PreviewComponent } from './preview.component';
|
||||
import { of, throwError } from 'rxjs';
|
||||
import { EffectsModule } from '@ngrx/effects';
|
||||
import { NodeEffects } from '../../store/effects/node.effects';
|
||||
import { AppTestingModule } from '../../testing/app-testing.module';
|
||||
import { ContentApiService, AppHookService } from '@alfresco/aca-shared';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { Node, NodePaging, FavoritePaging, SharedLinkPaging, PersonEntry, ResultSetPaging } from '@alfresco/js-api';
|
||||
import { PreviewModule } from './preview.module';
|
||||
|
||||
describe('PreviewComponent', () => {
|
||||
let fixture: ComponentFixture<PreviewComponent>;
|
||||
let component: PreviewComponent;
|
||||
let router: Router;
|
||||
let route: ActivatedRoute;
|
||||
let preferences: UserPreferencesService;
|
||||
let contentApi: ContentApiService;
|
||||
let uploadService: UploadService;
|
||||
let nodesApiService: NodesApiService;
|
||||
let appHookService: AppHookService;
|
||||
let store: Store<any>;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [EffectsModule.forRoot([NodeEffects]), PreviewModule, AppTestingModule]
|
||||
});
|
||||
|
||||
fixture = TestBed.createComponent(PreviewComponent);
|
||||
component = fixture.componentInstance;
|
||||
|
||||
router = TestBed.inject(Router);
|
||||
route = TestBed.inject(ActivatedRoute);
|
||||
preferences = TestBed.inject(UserPreferencesService);
|
||||
contentApi = TestBed.inject(ContentApiService);
|
||||
uploadService = TestBed.inject(UploadService);
|
||||
nodesApiService = TestBed.inject(NodesApiService);
|
||||
appHookService = TestBed.inject(AppHookService);
|
||||
store = TestBed.inject(Store);
|
||||
});
|
||||
|
||||
it('should extract the property path root', () => {
|
||||
expect(component.getRootField('some.property.path')).toBe('some');
|
||||
expect(component.getRootField('some')).toBe('some');
|
||||
expect(component.getRootField('')).toBe('');
|
||||
expect(component.getRootField(null)).toBe(null);
|
||||
});
|
||||
|
||||
it('should navigate to previous node in sub-folder', () => {
|
||||
spyOn(router, 'navigate').and.stub();
|
||||
const clickEvent = new MouseEvent('click');
|
||||
|
||||
component.previewLocation = 'personal-files';
|
||||
component.folderId = 'folder1';
|
||||
component.previousNodeId = 'previous1';
|
||||
component.onNavigateBefore(clickEvent);
|
||||
|
||||
expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1', 'preview', 'previous1']);
|
||||
});
|
||||
|
||||
it('should navigate back to previous node in the root path', () => {
|
||||
spyOn(router, 'navigate').and.stub();
|
||||
const clickEvent = new MouseEvent('click');
|
||||
|
||||
component.previewLocation = 'personal-files';
|
||||
component.folderId = null;
|
||||
component.previousNodeId = 'previous1';
|
||||
component.onNavigateBefore(clickEvent);
|
||||
|
||||
expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'preview', 'previous1']);
|
||||
});
|
||||
|
||||
it('should not navigate back if node unset', () => {
|
||||
spyOn(router, 'navigate').and.stub();
|
||||
const clickEvent = new MouseEvent('click');
|
||||
|
||||
component.previousNodeId = null;
|
||||
component.onNavigateBefore(clickEvent);
|
||||
|
||||
expect(router.navigate).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should navigate to next node in sub-folder', () => {
|
||||
spyOn(router, 'navigate').and.stub();
|
||||
const clickEvent = new MouseEvent('click');
|
||||
|
||||
component.previewLocation = 'personal-files';
|
||||
component.folderId = 'folder1';
|
||||
component.nextNodeId = 'next1';
|
||||
component.onNavigateNext(clickEvent);
|
||||
|
||||
expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1', 'preview', 'next1']);
|
||||
});
|
||||
|
||||
it('should navigate to next node in the root path', () => {
|
||||
spyOn(router, 'navigate').and.stub();
|
||||
const clickEvent = new MouseEvent('click');
|
||||
|
||||
component.previewLocation = 'personal-files';
|
||||
component.folderId = null;
|
||||
component.nextNodeId = 'next1';
|
||||
component.onNavigateNext(clickEvent);
|
||||
|
||||
expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'preview', 'next1']);
|
||||
});
|
||||
|
||||
it('should not navigate back if node unset', () => {
|
||||
spyOn(router, 'navigate').and.stub();
|
||||
const clickEvent = new MouseEvent('click');
|
||||
|
||||
component.nextNodeId = null;
|
||||
component.onNavigateNext(clickEvent);
|
||||
|
||||
expect(router.navigate).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should generate preview path for a folder only', () => {
|
||||
component.previewLocation = 'personal-files';
|
||||
|
||||
expect(component.getPreviewPath('folder1', null)).toEqual(['personal-files', 'folder1']);
|
||||
});
|
||||
|
||||
it('should generate preview path for a folder and a node', () => {
|
||||
component.previewLocation = 'personal-files';
|
||||
|
||||
expect(component.getPreviewPath('folder1', 'node1')).toEqual(['personal-files', 'folder1', 'preview', 'node1']);
|
||||
});
|
||||
|
||||
it('should generate preview path for a node only', () => {
|
||||
component.previewLocation = 'personal-files';
|
||||
|
||||
expect(component.getPreviewPath(null, 'node1')).toEqual(['personal-files', 'preview', 'node1']);
|
||||
});
|
||||
|
||||
it('should generate preview for the location only', () => {
|
||||
component.previewLocation = 'personal-files';
|
||||
|
||||
expect(component.getPreviewPath(null, null)).toEqual(['personal-files']);
|
||||
});
|
||||
|
||||
it('should navigate back to root path upon close', () => {
|
||||
spyOn(router, 'navigate').and.stub();
|
||||
|
||||
component.routesSkipNavigation = [];
|
||||
component.previewLocation = 'libraries';
|
||||
component.folderId = null;
|
||||
|
||||
component.onVisibilityChanged(false);
|
||||
|
||||
expect(router.navigate).toHaveBeenCalledWith(['libraries', {}]);
|
||||
});
|
||||
|
||||
it('should navigate back to folder path upon close', () => {
|
||||
spyOn(router, 'navigate').and.stub();
|
||||
|
||||
component.routesSkipNavigation = [];
|
||||
component.previewLocation = 'libraries';
|
||||
component.folderId = 'site1';
|
||||
|
||||
component.onVisibilityChanged(false);
|
||||
|
||||
expect(router.navigate).toHaveBeenCalledWith(['libraries', {}, 'site1']);
|
||||
});
|
||||
|
||||
it('should not navigate to root path for certain routes upon close', () => {
|
||||
spyOn(router, 'navigate').and.stub();
|
||||
|
||||
component.routesSkipNavigation = ['shared'];
|
||||
component.previewLocation = 'shared';
|
||||
component.folderId = 'folder1';
|
||||
|
||||
component.onVisibilityChanged(false);
|
||||
|
||||
expect(router.navigate).toHaveBeenCalledWith(['shared', {}]);
|
||||
});
|
||||
|
||||
it('should not navigate back if viewer is still visible', () => {
|
||||
spyOn(router, 'navigate').and.stub();
|
||||
|
||||
component.routesSkipNavigation = [];
|
||||
component.previewLocation = 'shared';
|
||||
|
||||
component.onVisibilityChanged(true);
|
||||
|
||||
expect(router.navigate).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should enable multiple document navigation from route data', () => {
|
||||
route.snapshot.data = {
|
||||
navigateMultiple: true
|
||||
};
|
||||
|
||||
component.ngOnInit();
|
||||
|
||||
expect(component.navigateMultiple).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should not enable multiple document navigation from route data', () => {
|
||||
route.snapshot.data = {};
|
||||
|
||||
component.ngOnInit();
|
||||
|
||||
expect(component.navigateMultiple).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should fetch navigation source from route', () => {
|
||||
route.snapshot.data = {
|
||||
navigateSource: 'personal-files'
|
||||
};
|
||||
|
||||
component.ngOnInit();
|
||||
|
||||
expect(component.navigateSource).toBe('personal-files');
|
||||
});
|
||||
|
||||
it('should fetch case-insensitive source from route', () => {
|
||||
route.snapshot.data = {
|
||||
navigateSource: 'PERSONAL-FILES'
|
||||
};
|
||||
|
||||
component.navigationSources = ['personal-files'];
|
||||
component.ngOnInit();
|
||||
|
||||
expect(component.navigateSource).toBe('PERSONAL-FILES');
|
||||
});
|
||||
|
||||
it('should fetch only permitted navigation source from route', () => {
|
||||
route.snapshot.data = {
|
||||
navigateSource: 'personal-files'
|
||||
};
|
||||
|
||||
component.navigationSources = ['shared'];
|
||||
component.ngOnInit();
|
||||
|
||||
expect(component.navigateSource).toBeNull();
|
||||
});
|
||||
|
||||
it('should display document upon init', () => {
|
||||
route.params = of({
|
||||
folderId: 'folder1',
|
||||
nodeId: 'node1'
|
||||
});
|
||||
|
||||
spyOn(component, 'displayNode').and.stub();
|
||||
|
||||
component.ngOnInit();
|
||||
|
||||
expect(component.folderId).toBe('folder1');
|
||||
expect(component.displayNode).toHaveBeenCalledWith('node1');
|
||||
});
|
||||
|
||||
it('should return empty nearest nodes for missing node id', async () => {
|
||||
const nearest = await component.getNearestNodes(null, 'folder1');
|
||||
|
||||
expect(nearest).toEqual({ left: null, right: null });
|
||||
});
|
||||
|
||||
it('should return empty nearest nodes for missing folder id', async () => {
|
||||
const nearest = await component.getNearestNodes('node1', null);
|
||||
|
||||
expect(nearest).toEqual({ left: null, right: null });
|
||||
});
|
||||
|
||||
it('should return empty nearest nodes for crashed fields id request', async () => {
|
||||
spyOn(component, 'getFileIds').and.returnValue(Promise.reject('err'));
|
||||
|
||||
const nearest = await component.getNearestNodes('node1', 'folder1');
|
||||
|
||||
expect(nearest).toEqual({ left: null, right: null });
|
||||
});
|
||||
|
||||
it('should return nearest nodes', async () => {
|
||||
spyOn(component, 'getFileIds').and.returnValue(Promise.resolve(['node1', 'node2', 'node3', 'node4', 'node5']));
|
||||
|
||||
let nearest = await component.getNearestNodes('node1', 'folder1');
|
||||
expect(nearest).toEqual({ left: null, right: 'node2' });
|
||||
|
||||
nearest = await component.getNearestNodes('node3', 'folder1');
|
||||
expect(nearest).toEqual({ left: 'node2', right: 'node4' });
|
||||
|
||||
nearest = await component.getNearestNodes('node5', 'folder1');
|
||||
expect(nearest).toEqual({ left: 'node4', right: null });
|
||||
});
|
||||
|
||||
it('should return empty nearest nodes if node is already deleted', async () => {
|
||||
spyOn(component, 'getFileIds').and.returnValue(Promise.resolve(['node1', 'node2', 'node3', 'node4', 'node5']));
|
||||
|
||||
const nearest = await component.getNearestNodes('node9', 'folder1');
|
||||
expect(nearest).toEqual({ left: null, right: null });
|
||||
});
|
||||
|
||||
it('should not display node when id is missing', async () => {
|
||||
spyOn(router, 'navigate').and.stub();
|
||||
spyOn(contentApi, 'getNodeInfo').and.returnValue(of(null));
|
||||
|
||||
await component.displayNode(null);
|
||||
|
||||
expect(contentApi.getNodeInfo).not.toHaveBeenCalled();
|
||||
expect(router.navigate).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should navigate to original location if node not found', async () => {
|
||||
spyOn(router, 'navigate').and.stub();
|
||||
spyOn(contentApi, 'getNodeInfo').and.returnValue(throwError('error'));
|
||||
|
||||
component.previewLocation = 'personal-files';
|
||||
await component.displayNode('folder1');
|
||||
|
||||
expect(contentApi.getNodeInfo).toHaveBeenCalledWith('folder1');
|
||||
expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1']);
|
||||
});
|
||||
|
||||
it('should navigate to original location if node is not a File', async () => {
|
||||
spyOn(router, 'navigate').and.stub();
|
||||
spyOn(contentApi, 'getNodeInfo').and.returnValue(
|
||||
of({
|
||||
isFile: false
|
||||
} as Node)
|
||||
);
|
||||
|
||||
component.previewLocation = 'personal-files';
|
||||
await component.displayNode('folder1');
|
||||
|
||||
expect(contentApi.getNodeInfo).toHaveBeenCalledWith('folder1');
|
||||
expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1']);
|
||||
});
|
||||
|
||||
it('should navigate to original location in case of Alfresco API errors', async () => {
|
||||
spyOn(router, 'navigate').and.stub();
|
||||
spyOn(contentApi, 'getNodeInfo').and.returnValue(throwError('error'));
|
||||
|
||||
component.previewLocation = 'personal-files';
|
||||
await component.displayNode('folder1');
|
||||
|
||||
expect(contentApi.getNodeInfo).toHaveBeenCalledWith('folder1');
|
||||
expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1']);
|
||||
});
|
||||
|
||||
it('should fetch and sort file ids for personal-files', async () => {
|
||||
preferences.set('personal-files.sorting.key', 'name');
|
||||
preferences.set('personal-files.sorting.direction', 'desc');
|
||||
|
||||
spyOn(contentApi, 'getNodeChildren').and.returnValue(
|
||||
of({
|
||||
list: {
|
||||
entries: [{ entry: { id: 'node1', name: 'node 1' } }, { entry: { id: 'node2', name: 'node 2' } }]
|
||||
}
|
||||
} as NodePaging)
|
||||
);
|
||||
|
||||
const ids = await component.getFileIds('personal-files', 'folder1');
|
||||
expect(ids).toEqual(['node2', 'node1']);
|
||||
});
|
||||
|
||||
it('should fetch file ids for personal-files with default sorting for missing key', async () => {
|
||||
preferences.set('personal-files.sorting.key', 'missing');
|
||||
preferences.set('personal-files.sorting.direction', 'desc');
|
||||
|
||||
spyOn(contentApi, 'getNodeChildren').and.returnValue(
|
||||
of({
|
||||
list: {
|
||||
entries: [{ entry: { id: 'node1', name: 'node 1' } }, { entry: { id: 'node2', name: 'node 2' } }]
|
||||
}
|
||||
} as NodePaging)
|
||||
);
|
||||
|
||||
const ids = await component.getFileIds('personal-files', 'folder1');
|
||||
expect(ids).toEqual(['node1', 'node2']);
|
||||
});
|
||||
|
||||
it('should sort file ids for personal-files with [modifiedAt desc]', async () => {
|
||||
spyOn(preferences, 'get').and.returnValue(null);
|
||||
|
||||
spyOn(contentApi, 'getNodeChildren').and.returnValue(
|
||||
of({
|
||||
list: {
|
||||
entries: [
|
||||
{ entry: { id: 'node1', name: 'node 1', modifiedAt: new Date(1) } },
|
||||
{ entry: { id: 'node2', name: 'node 2', modifiedAt: new Date(2) } }
|
||||
]
|
||||
}
|
||||
} as NodePaging)
|
||||
);
|
||||
|
||||
const ids = await component.getFileIds('personal-files', 'folder1');
|
||||
expect(ids).toEqual(['node2', 'node1']);
|
||||
});
|
||||
|
||||
it('should fetch and sort file ids for libraries', async () => {
|
||||
preferences.set('personal-files.sorting.key', 'name');
|
||||
preferences.set('personal-files.sorting.direction', 'desc');
|
||||
|
||||
spyOn(contentApi, 'getNodeChildren').and.returnValue(
|
||||
of({
|
||||
list: {
|
||||
entries: [{ entry: { id: 'node1', name: 'node 1' } }, { entry: { id: 'node2', name: 'node 2' } }]
|
||||
}
|
||||
} as NodePaging)
|
||||
);
|
||||
|
||||
const ids = await component.getFileIds('libraries', 'site1');
|
||||
expect(ids).toEqual(['node2', 'node1']);
|
||||
});
|
||||
|
||||
it('should require folder id to fetch ids for libraries', async () => {
|
||||
const ids = await component.getFileIds('libraries', null);
|
||||
expect(ids).toEqual([]);
|
||||
});
|
||||
|
||||
it('should sort file ids for libraries with [modifiedAt desc]', async () => {
|
||||
spyOn(preferences, 'get').and.returnValue(null);
|
||||
|
||||
spyOn(contentApi, 'getNodeChildren').and.returnValue(
|
||||
of({
|
||||
list: {
|
||||
entries: [
|
||||
{ entry: { id: 'node1', name: 'node 1', modifiedAt: new Date(1) } },
|
||||
{ entry: { id: 'node2', name: 'node 2', modifiedAt: new Date(2) } }
|
||||
]
|
||||
}
|
||||
} as NodePaging)
|
||||
);
|
||||
|
||||
const ids = await component.getFileIds('libraries', 'folder1');
|
||||
expect(ids).toEqual(['node2', 'node1']);
|
||||
});
|
||||
|
||||
it('should fetch and sort ids for favorites', async () => {
|
||||
preferences.set('favorites.sorting.key', 'name');
|
||||
preferences.set('favorites.sorting.direction', 'desc');
|
||||
|
||||
spyOn(contentApi, 'getFavorites').and.returnValue(
|
||||
of({
|
||||
list: {
|
||||
entries: [
|
||||
{ entry: { target: { file: { id: 'file3', name: 'file 3' } } } },
|
||||
{ entry: { target: { file: { id: 'file1', name: 'file 1' } } } },
|
||||
{ entry: { target: { file: { id: 'file2', name: 'file 2' } } } }
|
||||
]
|
||||
}
|
||||
} as FavoritePaging)
|
||||
);
|
||||
|
||||
const ids = await component.getFileIds('favorites');
|
||||
expect(ids).toEqual(['file3', 'file2', 'file1']);
|
||||
});
|
||||
|
||||
it('should sort file ids for favorites with [modifiedAt desc]', async () => {
|
||||
spyOn(preferences, 'get').and.returnValue(null);
|
||||
|
||||
spyOn(contentApi, 'getFavorites').and.returnValue(
|
||||
of({
|
||||
list: {
|
||||
entries: [
|
||||
{
|
||||
entry: {
|
||||
target: { file: { id: 'file3', modifiedAt: new Date(3) } }
|
||||
}
|
||||
},
|
||||
{
|
||||
entry: {
|
||||
target: { file: { id: 'file1', modifiedAt: new Date(1) } }
|
||||
}
|
||||
},
|
||||
{
|
||||
entry: {
|
||||
target: { file: { id: 'file2', modifiedAt: new Date(2) } }
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
} as FavoritePaging)
|
||||
);
|
||||
|
||||
const ids = await component.getFileIds('favorites');
|
||||
expect(ids).toEqual(['file3', 'file2', 'file1']);
|
||||
});
|
||||
|
||||
it('should fetch and sort file ids for shared files', async () => {
|
||||
preferences.set('shared.sorting.key', 'name');
|
||||
preferences.set('shared.sorting.direction', 'asc');
|
||||
|
||||
spyOn(contentApi, 'findSharedLinks').and.returnValue(
|
||||
of({
|
||||
list: {
|
||||
entries: [
|
||||
{
|
||||
entry: {
|
||||
nodeId: 'node2',
|
||||
name: 'node 2',
|
||||
modifiedAt: new Date(2)
|
||||
}
|
||||
},
|
||||
{
|
||||
entry: {
|
||||
nodeId: 'node1',
|
||||
name: 'node 1',
|
||||
modifiedAt: new Date(1)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
} as SharedLinkPaging)
|
||||
);
|
||||
|
||||
const ids = await component.getFileIds('shared');
|
||||
expect(ids).toEqual(['node1', 'node2']);
|
||||
});
|
||||
|
||||
it('should sort file ids for favorites with [modifiedAt desc]', async () => {
|
||||
spyOn(preferences, 'get').and.returnValue(null);
|
||||
|
||||
spyOn(contentApi, 'findSharedLinks').and.returnValue(
|
||||
of({
|
||||
list: {
|
||||
entries: [
|
||||
{
|
||||
entry: {
|
||||
nodeId: 'node2',
|
||||
name: 'node 2',
|
||||
modifiedAt: new Date(2)
|
||||
}
|
||||
},
|
||||
{
|
||||
entry: {
|
||||
nodeId: 'node1',
|
||||
name: 'node 1',
|
||||
modifiedAt: new Date(1)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
} as SharedLinkPaging)
|
||||
);
|
||||
|
||||
const ids = await component.getFileIds('shared');
|
||||
expect(ids).toEqual(['node2', 'node1']);
|
||||
});
|
||||
|
||||
it('should fetch and sort ids for recent-files', async () => {
|
||||
preferences.set('recent-files.sorting.key', 'name');
|
||||
preferences.set('recent-files.sorting.direction', 'asc');
|
||||
|
||||
spyOn(contentApi, 'getPerson').and.returnValue(
|
||||
of({
|
||||
entry: { id: 'user' }
|
||||
} as PersonEntry)
|
||||
);
|
||||
|
||||
spyOn(contentApi, 'search').and.returnValue(
|
||||
of({
|
||||
list: {
|
||||
entries: [
|
||||
{ entry: { id: 'node2', name: 'node 2', modifiedAt: new Date(2) } },
|
||||
{ entry: { id: 'node1', name: 'node 1', modifiedAt: new Date(1) } }
|
||||
]
|
||||
}
|
||||
} as ResultSetPaging)
|
||||
);
|
||||
|
||||
const ids = await component.getFileIds('recent-files');
|
||||
expect(ids).toEqual(['node1', 'node2']);
|
||||
});
|
||||
|
||||
it('should sort file ids for favorites with [modifiedAt desc]', async () => {
|
||||
spyOn(preferences, 'get').and.returnValue(null);
|
||||
|
||||
spyOn(contentApi, 'getPerson').and.returnValue(
|
||||
of({
|
||||
entry: { id: 'user' }
|
||||
} as PersonEntry)
|
||||
);
|
||||
|
||||
spyOn(contentApi, 'search').and.returnValue(
|
||||
of({
|
||||
list: {
|
||||
entries: [
|
||||
{ entry: { id: 'node2', name: 'node 2', modifiedAt: new Date(2) } },
|
||||
{ entry: { id: 'node1', name: 'node 1', modifiedAt: new Date(1) } }
|
||||
]
|
||||
}
|
||||
} as ResultSetPaging)
|
||||
);
|
||||
|
||||
const ids = await component.getFileIds('recent-files');
|
||||
expect(ids).toEqual(['node2', 'node1']);
|
||||
});
|
||||
|
||||
it('should return to parent folder on nodesDeleted event', async () => {
|
||||
spyOn(component, 'navigateToFileLocation');
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
appHookService.nodesDeleted.next();
|
||||
|
||||
expect(component.navigateToFileLocation).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should return to parent folder on fileUploadDeleted event', async () => {
|
||||
spyOn(component, 'navigateToFileLocation');
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
uploadService.fileUploadDeleted.next();
|
||||
|
||||
expect(component.navigateToFileLocation).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should emit nodeUpdated event on fileUploadComplete event', fakeAsync(() => {
|
||||
spyOn(nodesApiService.nodeUpdated, 'next');
|
||||
fixture.detectChanges();
|
||||
uploadService.fileUploadComplete.next({ data: { entry: {} } } as any);
|
||||
tick(300);
|
||||
|
||||
expect(nodesApiService.nodeUpdated.next).toHaveBeenCalled();
|
||||
}));
|
||||
|
||||
it('should return to parent folder when event emitted from extension', async () => {
|
||||
spyOn(component, 'navigateToFileLocation');
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
store.dispatch(new ClosePreviewAction());
|
||||
expect(component.navigateToFileLocation).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
describe('Keyboard navigation', () => {
|
||||
beforeEach(() => {
|
||||
component.nextNodeId = 'nextNodeId';
|
||||
component.previousNodeId = 'previousNodeId';
|
||||
spyOn(router, 'navigate').and.stub();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.destroy();
|
||||
});
|
||||
|
||||
it('should not navigate on keyboard event if target is child of sidebar container', () => {
|
||||
const parent = document.createElement('div');
|
||||
parent.className = 'adf-viewer__sidebar';
|
||||
|
||||
const child = document.createElement('button');
|
||||
child.addEventListener('keyup', function (e) {
|
||||
component.onNavigateNext(e);
|
||||
});
|
||||
parent.appendChild(child);
|
||||
document.body.appendChild(parent);
|
||||
|
||||
child.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft' }));
|
||||
|
||||
expect(router.navigate).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not navigate on keyboard event if target is child of cdk overlay', () => {
|
||||
const parent = document.createElement('div');
|
||||
parent.className = 'cdk-overlay-container';
|
||||
|
||||
const child = document.createElement('button');
|
||||
child.addEventListener('keyup', function (e) {
|
||||
component.onNavigateNext(e);
|
||||
});
|
||||
parent.appendChild(child);
|
||||
document.body.appendChild(parent);
|
||||
|
||||
child.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft' }));
|
||||
|
||||
expect(router.navigate).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,471 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Alfresco Example Content Application
|
||||
*
|
||||
* Copyright (C) 2005 - 2020 Alfresco Software Limited
|
||||
*
|
||||
* This file is part of the Alfresco Example Content Application.
|
||||
* If the software was purchased under a paid Alfresco license, the terms of
|
||||
* the paid license agreement will prevail. Otherwise, the software is
|
||||
* provided under the following open source license terms:
|
||||
*
|
||||
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Lesser General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Lesser General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { Component, OnInit, OnDestroy, ViewEncapsulation, HostListener } from '@angular/core';
|
||||
import { Location } from '@angular/common';
|
||||
import { ActivatedRoute, Router, UrlTree, UrlSegmentGroup, UrlSegment, PRIMARY_OUTLET } from '@angular/router';
|
||||
import { debounceTime, map, takeUntil } from 'rxjs/operators';
|
||||
import { UserPreferencesService, ObjectUtils, UploadService, NodesApiService } from '@alfresco/adf-core';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { AppStore, ClosePreviewAction, ViewerActionTypes, SetSelectedNodesAction } from '@alfresco/aca-shared/store';
|
||||
import { AppExtensionService, AppHookService, ContentApiService, PageComponent } from '@alfresco/aca-shared';
|
||||
import { ContentManagementService } from '../../services/content-management.service';
|
||||
import { ContentActionRef, ViewerExtensionRef } from '@alfresco/adf-extensions';
|
||||
import { SearchRequest } from '@alfresco/js-api';
|
||||
import { from } from 'rxjs';
|
||||
import { Actions, ofType } from '@ngrx/effects';
|
||||
|
||||
@Component({
|
||||
selector: 'app-preview',
|
||||
templateUrl: './preview.component.html',
|
||||
styleUrls: ['./preview.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'app-preview' }
|
||||
})
|
||||
export class PreviewComponent extends PageComponent implements OnInit, OnDestroy {
|
||||
previewLocation: string = null;
|
||||
routesSkipNavigation = ['shared', 'recent-files', 'favorites'];
|
||||
navigateSource: string = null;
|
||||
navigationSources = ['favorites', 'libraries', 'personal-files', 'recent-files', 'shared'];
|
||||
folderId: string = null;
|
||||
nodeId: string = null;
|
||||
previousNodeId: string;
|
||||
nextNodeId: string;
|
||||
navigateMultiple = false;
|
||||
openWith: Array<ContentActionRef> = [];
|
||||
contentExtensions: Array<ViewerExtensionRef> = [];
|
||||
showRightSide = false;
|
||||
navigateBackAsClose = false;
|
||||
simplestMode = false;
|
||||
|
||||
recentFileFilters = [
|
||||
'TYPE:"content"',
|
||||
'-PNAME:"0/wiki"',
|
||||
'-TYPE:"app:filelink"',
|
||||
'-TYPE:"fm:post"',
|
||||
'-TYPE:"cm:thumbnail"',
|
||||
'-TYPE:"cm:failedThumbnail"',
|
||||
'-TYPE:"cm:rating"',
|
||||
'-TYPE:"dl:dataList"',
|
||||
'-TYPE:"dl:todoList"',
|
||||
'-TYPE:"dl:issue"',
|
||||
'-TYPE:"dl:contact"',
|
||||
'-TYPE:"dl:eventAgenda"',
|
||||
'-TYPE:"dl:event"',
|
||||
'-TYPE:"dl:task"',
|
||||
'-TYPE:"dl:simpletask"',
|
||||
'-TYPE:"dl:meetingAgenda"',
|
||||
'-TYPE:"dl:location"',
|
||||
'-TYPE:"fm:topic"',
|
||||
'-TYPE:"fm:post"',
|
||||
'-TYPE:"ia:calendarEvent"',
|
||||
'-TYPE:"lnk:link"'
|
||||
];
|
||||
|
||||
private containersSkipNavigation = ['adf-viewer__sidebar', 'cdk-overlay-container', 'adf-image-viewer'];
|
||||
|
||||
constructor(
|
||||
private contentApi: ContentApiService,
|
||||
private preferences: UserPreferencesService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private nodesApiService: NodesApiService,
|
||||
private uploadService: UploadService,
|
||||
private actions$: Actions,
|
||||
private location: Location,
|
||||
store: Store<AppStore>,
|
||||
extensions: AppExtensionService,
|
||||
content: ContentManagementService,
|
||||
private appHookService: AppHookService
|
||||
) {
|
||||
super(store, extensions, content);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
super.ngOnInit();
|
||||
|
||||
from(this.infoDrawerOpened$)
|
||||
.pipe(takeUntil(this.onDestroy$))
|
||||
.subscribe((val) => {
|
||||
this.showRightSide = val;
|
||||
});
|
||||
|
||||
this.previewLocation = this.router.url.substr(0, this.router.url.indexOf('/', 1)).replace(/\//g, '');
|
||||
|
||||
const routeData = this.route.snapshot.data;
|
||||
this.navigateBackAsClose = !!routeData.navigateBackAsClose;
|
||||
this.simplestMode = !!routeData.simplestMode;
|
||||
|
||||
if (routeData.navigateMultiple) {
|
||||
this.navigateMultiple = true;
|
||||
}
|
||||
|
||||
if (routeData.navigateSource) {
|
||||
const source = routeData.navigateSource.toLowerCase();
|
||||
if (this.navigationSources.includes(source)) {
|
||||
this.navigateSource = routeData.navigateSource;
|
||||
}
|
||||
}
|
||||
|
||||
this.route.params.subscribe((params) => {
|
||||
this.folderId = params.folderId;
|
||||
const id = params.nodeId;
|
||||
if (id) {
|
||||
this.displayNode(id);
|
||||
}
|
||||
});
|
||||
|
||||
this.subscriptions = this.subscriptions.concat([
|
||||
this.appHookService.nodesDeleted.subscribe(() => this.navigateToFileLocation(true)),
|
||||
|
||||
this.uploadService.fileUploadDeleted.subscribe(() => this.navigateToFileLocation(true)),
|
||||
|
||||
this.uploadService.fileUploadComplete.pipe(debounceTime(300)).subscribe((file) => this.nodesApiService.nodeUpdated.next(file.data.entry)),
|
||||
|
||||
this.actions$
|
||||
.pipe(
|
||||
ofType<ClosePreviewAction>(ViewerActionTypes.ClosePreview),
|
||||
map(() => this.navigateToFileLocation(true))
|
||||
)
|
||||
.subscribe(() => {})
|
||||
]);
|
||||
|
||||
this.extensions
|
||||
.getOpenWithActions()
|
||||
.pipe(takeUntil(this.onDestroy$))
|
||||
.subscribe((actions) => {
|
||||
this.openWith = actions;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
super.ngOnDestroy();
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads the particular node into the Viewer
|
||||
*
|
||||
* @param id Unique identifier for the Node to display
|
||||
*/
|
||||
async displayNode(id: string) {
|
||||
if (id) {
|
||||
try {
|
||||
this.node = await this.contentApi.getNodeInfo(id).toPromise();
|
||||
this.store.dispatch(new SetSelectedNodesAction([{ entry: this.node }]));
|
||||
|
||||
if (this.node && this.node.isFile) {
|
||||
const nearest = await this.getNearestNodes(this.node.id, this.node.parentId);
|
||||
|
||||
this.previousNodeId = nearest.left;
|
||||
this.nextNodeId = nearest.right;
|
||||
this.nodeId = this.node.id;
|
||||
return;
|
||||
}
|
||||
await this.router.navigate([this.previewLocation, id]);
|
||||
} catch (err) {
|
||||
if (!err || err.status !== 401) {
|
||||
await this.router.navigate([this.previewLocation, id]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('document:keydown', ['$event'])
|
||||
handleKeyboardEvent(event: KeyboardEvent) {
|
||||
const key = event.keyCode;
|
||||
const rightArrow = 39;
|
||||
const leftArrow = 37;
|
||||
|
||||
if (key === rightArrow || key === leftArrow) {
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the visibility change of the Viewer component.
|
||||
*
|
||||
* @param isVisible Indicator whether Viewer is visible or hidden.
|
||||
*/
|
||||
onVisibilityChanged(isVisible: boolean): void {
|
||||
const shouldNavigate = !isVisible;
|
||||
this.navigateToFileLocation(shouldNavigate);
|
||||
}
|
||||
|
||||
navigateToFileLocation(shouldNavigate: boolean) {
|
||||
if (shouldNavigate) {
|
||||
if (this.navigateBackAsClose) {
|
||||
this.location.back();
|
||||
} else {
|
||||
const shouldSkipNavigation = this.routesSkipNavigation.includes(this.previewLocation);
|
||||
const route = this.getNavigationCommands(this.previewLocation);
|
||||
|
||||
if (!shouldSkipNavigation && this.folderId) {
|
||||
route.push(this.folderId);
|
||||
}
|
||||
this.router.navigate(route);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Handles navigation to a previous document */
|
||||
onNavigateBefore(event: MouseEvent | KeyboardEvent): void {
|
||||
if (event.type !== 'click' && this.shouldNavigate(event.target as HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.previousNodeId) {
|
||||
this.router.navigate(this.getPreviewPath(this.folderId, this.previousNodeId));
|
||||
}
|
||||
}
|
||||
|
||||
/** Handles navigation to a next document */
|
||||
onNavigateNext(event: MouseEvent | KeyboardEvent): void {
|
||||
if (event.type !== 'click' && this.shouldNavigate(event.target as HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.nextNodeId) {
|
||||
this.router.navigate(this.getPreviewPath(this.folderId, this.nextNodeId));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a node preview route based on folder and node IDs.
|
||||
*
|
||||
* @param folderId Folder ID
|
||||
* @param nodeId Node ID
|
||||
*/
|
||||
getPreviewPath(folderId: string, nodeId: string): any[] {
|
||||
const route = [this.previewLocation];
|
||||
|
||||
if (folderId) {
|
||||
route.push(folderId);
|
||||
}
|
||||
|
||||
if (nodeId) {
|
||||
route.push('preview', nodeId);
|
||||
}
|
||||
|
||||
return route;
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves nearest node information for the given node and folder.
|
||||
*
|
||||
* @param nodeId Unique identifier of the document node
|
||||
* @param folderId Unique identifier of the containing folder node.
|
||||
*/
|
||||
async getNearestNodes(nodeId: string, folderId: string): Promise<{ left: string; right: string }> {
|
||||
const empty = {
|
||||
left: null,
|
||||
right: null
|
||||
};
|
||||
|
||||
if (nodeId && folderId) {
|
||||
try {
|
||||
const ids = await this.getFileIds(this.navigateSource, folderId);
|
||||
const idx = ids.indexOf(nodeId);
|
||||
|
||||
if (idx >= 0) {
|
||||
return {
|
||||
left: ids[idx - 1] || null,
|
||||
right: ids[idx + 1] || null
|
||||
};
|
||||
} else {
|
||||
return empty;
|
||||
}
|
||||
} catch {
|
||||
return empty;
|
||||
}
|
||||
} else {
|
||||
return empty;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves a list of node identifiers for the folder and data source.
|
||||
*
|
||||
* @param source Data source name. Allowed values are: personal-files, libraries, favorites, shared, recent-files.
|
||||
* @param folderId Containing folder node identifier for 'personal-files' and 'libraries' sources.
|
||||
*/
|
||||
async getFileIds(source: string, folderId?: string): Promise<string[]> {
|
||||
if ((source === 'personal-files' || source === 'libraries') && folderId) {
|
||||
const sortKey = this.preferences.get('personal-files.sorting.key') || 'modifiedAt';
|
||||
const sortDirection = this.preferences.get('personal-files.sorting.direction') || 'desc';
|
||||
const nodes = await this.contentApi
|
||||
.getNodeChildren(folderId, {
|
||||
// orderBy: `${sortKey} ${sortDirection}`,
|
||||
fields: ['id', this.getRootField(sortKey)],
|
||||
where: '(isFile=true)'
|
||||
})
|
||||
.toPromise();
|
||||
|
||||
const entries = nodes.list.entries.map((obj) => obj.entry);
|
||||
this.sort(entries, sortKey, sortDirection);
|
||||
|
||||
return entries.map((obj) => obj.id);
|
||||
}
|
||||
|
||||
if (source === 'favorites') {
|
||||
const nodes = await this.contentApi
|
||||
.getFavorites('-me-', {
|
||||
where: '(EXISTS(target/file))',
|
||||
fields: ['target']
|
||||
})
|
||||
.toPromise();
|
||||
|
||||
const sortKey = this.preferences.get('favorites.sorting.key') || 'modifiedAt';
|
||||
const sortDirection = this.preferences.get('favorites.sorting.direction') || 'desc';
|
||||
const files = nodes.list.entries.map((obj) => obj.entry.target.file);
|
||||
this.sort(files, sortKey, sortDirection);
|
||||
|
||||
return files.map((f) => f.id);
|
||||
}
|
||||
|
||||
if (source === 'shared') {
|
||||
const sortingKey = this.preferences.get('shared.sorting.key') || 'modifiedAt';
|
||||
const sortingDirection = this.preferences.get('shared.sorting.direction') || 'desc';
|
||||
|
||||
const nodes = await this.contentApi
|
||||
.findSharedLinks({
|
||||
fields: ['nodeId', this.getRootField(sortingKey)]
|
||||
})
|
||||
.toPromise();
|
||||
|
||||
const entries = nodes.list.entries.map((obj) => obj.entry);
|
||||
this.sort(entries, sortingKey, sortingDirection);
|
||||
|
||||
return entries.map((obj) => obj.nodeId);
|
||||
}
|
||||
|
||||
if (source === 'recent-files') {
|
||||
const person = await this.contentApi.getPerson('-me-').toPromise();
|
||||
const username = person.entry.id;
|
||||
const sortingKey = this.preferences.get('recent-files.sorting.key') || 'modifiedAt';
|
||||
const sortingDirection = this.preferences.get('recent-files.sorting.direction') || 'desc';
|
||||
|
||||
const query: SearchRequest = {
|
||||
query: {
|
||||
query: '*',
|
||||
language: 'afts'
|
||||
},
|
||||
filterQueries: [
|
||||
{ query: `cm:modified:[NOW/DAY-30DAYS TO NOW/DAY+1DAY]` },
|
||||
{ query: `cm:modifier:${username} OR cm:creator:${username}` },
|
||||
{
|
||||
query: this.recentFileFilters.join(' AND ')
|
||||
}
|
||||
],
|
||||
fields: ['id', this.getRootField(sortingKey)],
|
||||
include: ['path', 'properties', 'allowableOperations'],
|
||||
sort: [
|
||||
{
|
||||
type: 'FIELD',
|
||||
field: 'cm:modified',
|
||||
ascending: false
|
||||
}
|
||||
]
|
||||
};
|
||||
const nodes = await this.contentApi.search(query).toPromise();
|
||||
|
||||
const entries = nodes.list.entries.map((obj) => obj.entry);
|
||||
this.sort(entries, sortingKey, sortingDirection);
|
||||
|
||||
return entries.map((obj) => obj.id);
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
private sort(items: any[], key: string, direction: string) {
|
||||
const options: Intl.CollatorOptions = {};
|
||||
|
||||
if (key.includes('sizeInBytes') || key === 'name') {
|
||||
options.numeric = true;
|
||||
}
|
||||
|
||||
items.sort((a: any, b: any) => {
|
||||
let left = ObjectUtils.getValue(a, key);
|
||||
if (left) {
|
||||
left = left instanceof Date ? left.valueOf().toString() : left.toString();
|
||||
} else {
|
||||
left = '';
|
||||
}
|
||||
|
||||
let right = ObjectUtils.getValue(b, key);
|
||||
if (right) {
|
||||
right = right instanceof Date ? right.valueOf().toString() : right.toString();
|
||||
} else {
|
||||
right = '';
|
||||
}
|
||||
|
||||
return direction === 'asc' ? left.localeCompare(right, undefined, options) : right.localeCompare(left, undefined, options);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the root field name from the property path.
|
||||
* Example: 'property1.some.child.property' => 'property1'
|
||||
*
|
||||
* @param path Property path
|
||||
*/
|
||||
getRootField(path: string) {
|
||||
if (path) {
|
||||
return path.split('.')[0];
|
||||
}
|
||||
return path;
|
||||
}
|
||||
|
||||
private getNavigationCommands(url: string): any[] {
|
||||
const urlTree: UrlTree = this.router.parseUrl(url);
|
||||
const urlSegmentGroup: UrlSegmentGroup = urlTree.root.children[PRIMARY_OUTLET];
|
||||
|
||||
if (!urlSegmentGroup) {
|
||||
return [url];
|
||||
}
|
||||
|
||||
const urlSegments: UrlSegment[] = urlSegmentGroup.segments;
|
||||
|
||||
return urlSegments.reduce(function (acc, item) {
|
||||
acc.push(item.path, item.parameters);
|
||||
return acc;
|
||||
}, []);
|
||||
}
|
||||
|
||||
private shouldNavigate(element: HTMLElement): boolean {
|
||||
let currentElement = element.parentElement;
|
||||
|
||||
while (currentElement && !this.isChild(currentElement.classList)) {
|
||||
currentElement = currentElement.parentElement;
|
||||
}
|
||||
|
||||
return !!currentElement;
|
||||
}
|
||||
|
||||
private isChild(list: DOMTokenList): boolean {
|
||||
return Array.from(list).some((className: string) => this.containersSkipNavigation.includes(className));
|
||||
}
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Alfresco Example Content Application
|
||||
*
|
||||
* Copyright (C) 2005 - 2020 Alfresco Software Limited
|
||||
*
|
||||
* This file is part of the Alfresco Example Content Application.
|
||||
* If the software was purchased under a paid Alfresco license, the terms of
|
||||
* the paid license agreement will prevail. Otherwise, the software is
|
||||
* provided under the following open source license terms:
|
||||
*
|
||||
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Lesser General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Lesser General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { CoreModule } from '@alfresco/adf-core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
import { ContentDirectiveModule } from '@alfresco/adf-content-services';
|
||||
import { CoreExtensionsModule } from '../../extensions/core.extensions.module';
|
||||
import { DirectivesModule } from '../../directives/directives.module';
|
||||
import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
|
||||
import { PreviewComponent } from './preview.component';
|
||||
import { AppToolbarModule } from '../toolbar/toolbar.module';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: PreviewComponent,
|
||||
data: {
|
||||
title: 'APP.PREVIEW.TITLE',
|
||||
navigateMultiple: true
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild(routes),
|
||||
CoreModule.forChild(),
|
||||
ContentDirectiveModule,
|
||||
DirectivesModule,
|
||||
AppInfoDrawerModule,
|
||||
CoreExtensionsModule.forChild(),
|
||||
AppToolbarModule
|
||||
],
|
||||
declarations: [PreviewComponent],
|
||||
exports: [PreviewComponent]
|
||||
})
|
||||
export class PreviewModule {}
|
||||
@@ -1,39 +0,0 @@
|
||||
<ng-container *ngIf="nodeId">
|
||||
<adf-viewer
|
||||
[ngClass]="{
|
||||
'right_side--hide': !showRightSide
|
||||
}"
|
||||
[fileName]="fileName"
|
||||
[maxRetries]="'viewer.maxRetries' | adfAppConfig"
|
||||
[nodeId]="nodeId"
|
||||
[versionId]="versionId"
|
||||
[allowNavigate]="navigateMultiple"
|
||||
[allowRightSidebar]="true"
|
||||
[allowPrint]="false"
|
||||
[showRightSidebar]="true"
|
||||
[allowDownload]="false"
|
||||
[allowFullScreen]="false"
|
||||
[overlayMode]="true"
|
||||
(showViewerChange)="onViewerVisibilityChanged()"
|
||||
[canNavigateBefore]="!!previousNodeId"
|
||||
[canNavigateNext]="!!nextNodeId"
|
||||
(navigateBefore)="onNavigateBefore($event)"
|
||||
(navigateNext)="onNavigateNext($event)"
|
||||
>
|
||||
<adf-viewer-sidebar *ngIf="infoDrawerOpened$ | async">
|
||||
<aca-info-drawer [node]="selection.file"></aca-info-drawer>
|
||||
</adf-viewer-sidebar>
|
||||
|
||||
<adf-viewer-open-with *ngIf="openWith.length">
|
||||
<ng-container *ngFor="let action of openWith; trackBy: trackByActionId">
|
||||
<app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
|
||||
</ng-container>
|
||||
</adf-viewer-open-with>
|
||||
|
||||
<adf-viewer-toolbar-actions>
|
||||
<ng-container *ngFor="let action of toolbarActions; trackBy: trackByActionId">
|
||||
<aca-toolbar-action [actionRef]="action"></aca-toolbar-action>
|
||||
</ng-container>
|
||||
</adf-viewer-toolbar-actions>
|
||||
</adf-viewer>
|
||||
</ng-container>
|
||||
@@ -1,27 +0,0 @@
|
||||
.app-viewer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.adf-viewer-toolbar .adf-toolbar-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-viewer-toolbar-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.adf-toolbar-divider {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
// todo: remove this when viewer supports extensions
|
||||
.adf-viewer-toolbar .mat-toolbar > button:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-viewer.right_side--hide .adf-viewer__sidebar__right {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,471 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Alfresco Example Content Application
|
||||
*
|
||||
* Copyright (C) 2005 - 2020 Alfresco Software Limited
|
||||
*
|
||||
* This file is part of the Alfresco Example Content Application.
|
||||
* If the software was purchased under a paid Alfresco license, the terms of
|
||||
* the paid license agreement will prevail. Otherwise, the software is
|
||||
* provided under the following open source license terms:
|
||||
*
|
||||
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Lesser General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Lesser General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { AppExtensionService, AppHookService, ContentApiService } from '@alfresco/aca-shared';
|
||||
import {
|
||||
AppStore,
|
||||
ClosePreviewAction,
|
||||
getAppSelection,
|
||||
isInfoDrawerOpened,
|
||||
RefreshPreviewAction,
|
||||
ReloadDocumentListAction,
|
||||
SetCurrentNodeVersionAction,
|
||||
SetSelectedNodesAction,
|
||||
ViewerActionTypes,
|
||||
ViewNodeAction
|
||||
} from '@alfresco/aca-shared/store';
|
||||
import { ContentActionRef, SelectionState } from '@alfresco/adf-extensions';
|
||||
import { MinimalNodeEntryEntity, SearchRequest, VersionEntry, VersionsApi } from '@alfresco/js-api';
|
||||
import { Component, HostListener, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, PRIMARY_OUTLET, Router } from '@angular/router';
|
||||
import { AlfrescoApiService, ObjectUtils, UploadService, UserPreferencesService, NodesApiService } from '@alfresco/adf-core';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { from, Observable, Subject } from 'rxjs';
|
||||
import { debounceTime, takeUntil } from 'rxjs/operators';
|
||||
import { Actions, ofType } from '@ngrx/effects';
|
||||
|
||||
@Component({
|
||||
selector: 'app-viewer',
|
||||
templateUrl: './viewer.component.html',
|
||||
styleUrls: ['./viewer.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'app-viewer' }
|
||||
})
|
||||
export class AppViewerComponent implements OnInit, OnDestroy {
|
||||
_versionsApi: VersionsApi;
|
||||
get versionsApi(): VersionsApi {
|
||||
this._versionsApi = this._versionsApi ?? new VersionsApi(this.apiService.getInstance());
|
||||
return this._versionsApi;
|
||||
}
|
||||
|
||||
onDestroy$ = new Subject<boolean>();
|
||||
|
||||
fileName: string;
|
||||
folderId: string = null;
|
||||
nodeId: string = null;
|
||||
versionId: string = null;
|
||||
node: MinimalNodeEntryEntity;
|
||||
selection: SelectionState;
|
||||
infoDrawerOpened$: Observable<boolean>;
|
||||
|
||||
showRightSide = false;
|
||||
openWith: ContentActionRef[] = [];
|
||||
toolbarActions: ContentActionRef[] = [];
|
||||
|
||||
navigateSource: string = null;
|
||||
previousNodeId: string;
|
||||
nextNodeId: string;
|
||||
navigateMultiple = true;
|
||||
routesSkipNavigation = ['shared', 'recent-files', 'favorites'];
|
||||
navigationSources = ['favorites', 'libraries', 'personal-files', 'recent-files', 'shared'];
|
||||
recentFileFilters = [
|
||||
'TYPE:"content"',
|
||||
'-PNAME:"0/wiki"',
|
||||
'-TYPE:"app:filelink"',
|
||||
'-TYPE:"fm:post"',
|
||||
'-TYPE:"cm:thumbnail"',
|
||||
'-TYPE:"cm:failedThumbnail"',
|
||||
'-TYPE:"cm:rating"',
|
||||
'-TYPE:"dl:dataList"',
|
||||
'-TYPE:"dl:todoList"',
|
||||
'-TYPE:"dl:issue"',
|
||||
'-TYPE:"dl:contact"',
|
||||
'-TYPE:"dl:eventAgenda"',
|
||||
'-TYPE:"dl:event"',
|
||||
'-TYPE:"dl:task"',
|
||||
'-TYPE:"dl:simpletask"',
|
||||
'-TYPE:"dl:meetingAgenda"',
|
||||
'-TYPE:"dl:location"',
|
||||
'-TYPE:"fm:topic"',
|
||||
'-TYPE:"fm:post"',
|
||||
'-TYPE:"ia:calendarEvent"',
|
||||
'-TYPE:"lnk:link"'
|
||||
];
|
||||
|
||||
private navigationPath: string;
|
||||
private previewLocation: string;
|
||||
private containersSkipNavigation = ['adf-viewer__sidebar', 'cdk-overlay-container', 'adf-image-viewer'];
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private store: Store<AppStore>,
|
||||
private extensions: AppExtensionService,
|
||||
private contentApi: ContentApiService,
|
||||
private actions$: Actions,
|
||||
private preferences: UserPreferencesService,
|
||||
private apiService: AlfrescoApiService,
|
||||
private nodesApiService: NodesApiService,
|
||||
private uploadService: UploadService,
|
||||
private appHookService: AppHookService
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.infoDrawerOpened$ = this.store.select(isInfoDrawerOpened);
|
||||
|
||||
from(this.infoDrawerOpened$)
|
||||
.pipe(takeUntil(this.onDestroy$))
|
||||
.subscribe((val) => {
|
||||
this.showRightSide = val;
|
||||
});
|
||||
|
||||
this.store
|
||||
.select(getAppSelection)
|
||||
.pipe(takeUntil(this.onDestroy$))
|
||||
.subscribe((selection) => {
|
||||
this.selection = selection;
|
||||
});
|
||||
|
||||
this.extensions
|
||||
.getViewerToolbarActions()
|
||||
.pipe(takeUntil(this.onDestroy$))
|
||||
.subscribe((actions) => {
|
||||
this.toolbarActions = actions;
|
||||
});
|
||||
|
||||
this.extensions
|
||||
.getOpenWithActions()
|
||||
.pipe(takeUntil(this.onDestroy$))
|
||||
.subscribe((actions) => {
|
||||
this.openWith = actions;
|
||||
});
|
||||
|
||||
this.route.params.subscribe((params) => {
|
||||
this.folderId = params.folderId;
|
||||
const { nodeId } = params;
|
||||
this.versionId = params.versionId;
|
||||
if (this.versionId) {
|
||||
this.versionsApi.getVersion(nodeId, this.versionId).then((version: VersionEntry) => {
|
||||
if (version) {
|
||||
this.store.dispatch(new SetCurrentNodeVersionAction(version));
|
||||
}
|
||||
});
|
||||
}
|
||||
if (nodeId) {
|
||||
this.displayNode(nodeId);
|
||||
}
|
||||
});
|
||||
|
||||
this.route.queryParams.subscribe((params) => {
|
||||
this.navigationPath = params.path || params.location;
|
||||
});
|
||||
|
||||
if (this.route.snapshot.data && this.route.snapshot.data.navigateSource) {
|
||||
const source = this.route.snapshot.data.navigateSource.toLowerCase();
|
||||
if (this.navigationSources.includes(source)) {
|
||||
this.navigateSource = this.route.snapshot.data.navigateSource;
|
||||
}
|
||||
}
|
||||
|
||||
this.actions$.pipe(ofType<ClosePreviewAction>(ViewerActionTypes.ClosePreview), takeUntil(this.onDestroy$)).subscribe(() => {
|
||||
this.store.dispatch(new SetCurrentNodeVersionAction(null));
|
||||
this.navigateToFileLocation();
|
||||
});
|
||||
|
||||
this.actions$
|
||||
.pipe(ofType<RefreshPreviewAction>(ViewerActionTypes.RefreshPreview), takeUntil(this.onDestroy$))
|
||||
.subscribe((action: RefreshPreviewAction) => {
|
||||
this.displayNode(action?.payload?.entry?.id);
|
||||
});
|
||||
|
||||
this.appHookService.nodesDeleted.pipe(takeUntil(this.onDestroy$)).subscribe(() => this.navigateToFileLocation());
|
||||
|
||||
this.uploadService.fileUploadDeleted.pipe(takeUntil(this.onDestroy$)).subscribe(() => this.navigateToFileLocation());
|
||||
|
||||
this.uploadService.fileUploadComplete.pipe(debounceTime(300), takeUntil(this.onDestroy$)).subscribe((file) => {
|
||||
this.nodesApiService.nodeUpdated.next(file.data.entry);
|
||||
this.displayNode(file.data.entry.id);
|
||||
});
|
||||
|
||||
this.previewLocation = this.router.url.substr(0, this.router.url.indexOf('/', 1)).replace(/\//g, '');
|
||||
}
|
||||
|
||||
onViewerVisibilityChanged() {
|
||||
this.store.dispatch(new ReloadDocumentListAction());
|
||||
this.navigateToFileLocation();
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.store.dispatch(new SetCurrentNodeVersionAction(null));
|
||||
this.onDestroy$.next(true);
|
||||
this.onDestroy$.complete();
|
||||
}
|
||||
|
||||
trackByActionId(_: number, obj: ContentActionRef): string {
|
||||
return obj.id;
|
||||
}
|
||||
|
||||
async displayNode(nodeId: string) {
|
||||
if (nodeId) {
|
||||
try {
|
||||
this.node = await this.contentApi.getNodeInfo(nodeId).toPromise();
|
||||
this.store.dispatch(new SetSelectedNodesAction([{ entry: this.node }]));
|
||||
this.navigateMultiple = this.extensions.canShowViewerNavigation({ entry: this.node });
|
||||
if (!this.navigateMultiple) {
|
||||
this.nodeId = this.node.id;
|
||||
this.fileName = this.node.name + this.node?.properties?.['cm:versionLabel'];
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.node && this.node.isFile) {
|
||||
const nearest = await this.getNearestNodes(this.node.id, this.node.parentId);
|
||||
this.nodeId = this.node.id;
|
||||
this.previousNodeId = nearest.left;
|
||||
this.nextNodeId = nearest.right;
|
||||
this.fileName = this.node.name + this.node?.properties?.['cm:versionLabel'];
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
const statusCode = JSON.parse(error.message).error.statusCode;
|
||||
|
||||
if (statusCode !== 401) {
|
||||
this.router.navigate([this.previewLocation, { outlets: { viewer: null } }]).then(() => {
|
||||
this.router.navigate([this.previewLocation, nodeId]);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onNavigateBefore(event: MouseEvent | KeyboardEvent): void {
|
||||
if (event.type !== 'click' && this.shouldNavigate(event.target as HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const location = this.getFileLocation();
|
||||
this.store.dispatch(new ViewNodeAction(this.previousNodeId, { location }));
|
||||
}
|
||||
|
||||
onNavigateNext(event: MouseEvent | KeyboardEvent): void {
|
||||
if (event.type !== 'click' && this.shouldNavigate(event.target as HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const location = this.getFileLocation();
|
||||
this.store.dispatch(new ViewNodeAction(this.nextNodeId, { location }));
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves nearest node information for the given node and folder.
|
||||
*
|
||||
* @param nodeId Unique identifier of the document node
|
||||
* @param folderId Unique identifier of the containing folder node.
|
||||
*/
|
||||
async getNearestNodes(nodeId: string, folderId: string): Promise<{ left: string; right: string }> {
|
||||
const empty = {
|
||||
left: null,
|
||||
right: null
|
||||
};
|
||||
|
||||
if (nodeId && folderId) {
|
||||
try {
|
||||
const ids = await this.getFileIds(this.navigateSource, folderId);
|
||||
const idx = ids.indexOf(nodeId);
|
||||
|
||||
if (idx >= 0) {
|
||||
return {
|
||||
left: ids[idx - 1] || null,
|
||||
right: ids[idx + 1] || null
|
||||
};
|
||||
} else {
|
||||
return empty;
|
||||
}
|
||||
} catch {
|
||||
return empty;
|
||||
}
|
||||
} else {
|
||||
return empty;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves a list of node identifiers for the folder and data source.
|
||||
*
|
||||
* @param source Data source name. Allowed values are: personal-files, libraries, favorites, shared, recent-files.
|
||||
* @param folderId Containing folder node identifier for 'personal-files' and 'libraries' sources.
|
||||
*/
|
||||
async getFileIds(source: string, folderId?: string): Promise<string[]> {
|
||||
if ((source === 'personal-files' || source === 'libraries') && folderId) {
|
||||
const sortKey = this.preferences.get('personal-files.sorting.key') || 'modifiedAt';
|
||||
const sortDirection = this.preferences.get('personal-files.sorting.direction') || 'desc';
|
||||
const nodes = await this.contentApi
|
||||
.getNodeChildren(folderId, {
|
||||
// orderBy: `${sortKey} ${sortDirection}`,
|
||||
fields: ['id', this.getRootField(sortKey)],
|
||||
where: '(isFile=true)'
|
||||
})
|
||||
.toPromise();
|
||||
|
||||
const entries = nodes.list.entries.map((obj) => obj.entry);
|
||||
this.sort(entries, sortKey, sortDirection);
|
||||
|
||||
return entries.map((obj) => obj.id);
|
||||
}
|
||||
|
||||
if (source === 'favorites') {
|
||||
const nodes = await this.contentApi
|
||||
.getFavorites('-me-', {
|
||||
where: '(EXISTS(target/file))',
|
||||
fields: ['target']
|
||||
})
|
||||
.toPromise();
|
||||
|
||||
const sortKey = this.preferences.get('favorites.sorting.key') || 'modifiedAt';
|
||||
const sortDirection = this.preferences.get('favorites.sorting.direction') || 'desc';
|
||||
const files = nodes.list.entries.map((obj) => obj.entry.target.file);
|
||||
this.sort(files, sortKey, sortDirection);
|
||||
|
||||
return files.map((f) => f.id);
|
||||
}
|
||||
|
||||
if (source === 'shared') {
|
||||
const sortingKey = this.preferences.get('shared.sorting.key') || 'modifiedAt';
|
||||
const sortingDirection = this.preferences.get('shared.sorting.direction') || 'desc';
|
||||
|
||||
const nodes = await this.contentApi
|
||||
.findSharedLinks({
|
||||
fields: ['nodeId', this.getRootField(sortingKey)]
|
||||
})
|
||||
.toPromise();
|
||||
|
||||
const entries = nodes.list.entries.map((obj) => obj.entry);
|
||||
this.sort(entries, sortingKey, sortingDirection);
|
||||
|
||||
return entries.map((obj) => obj.nodeId);
|
||||
}
|
||||
|
||||
if (source === 'recent-files') {
|
||||
const person = await this.contentApi.getPerson('-me-').toPromise();
|
||||
const username = person.entry.id;
|
||||
const sortingKey = this.preferences.get('recent-files.sorting.key') || 'modifiedAt';
|
||||
const sortingDirection = this.preferences.get('recent-files.sorting.direction') || 'desc';
|
||||
|
||||
const query: SearchRequest = {
|
||||
query: {
|
||||
query: '*',
|
||||
language: 'afts'
|
||||
},
|
||||
filterQueries: [
|
||||
{ query: `cm:modified:[NOW/DAY-30DAYS TO NOW/DAY+1DAY]` },
|
||||
{ query: `cm:modifier:${username} OR cm:creator:${username}` },
|
||||
{
|
||||
query: this.recentFileFilters.join(' AND ')
|
||||
}
|
||||
],
|
||||
fields: ['id', this.getRootField(sortingKey)],
|
||||
include: ['path', 'properties', 'allowableOperations'],
|
||||
sort: [
|
||||
{
|
||||
type: 'FIELD',
|
||||
field: 'cm:modified',
|
||||
ascending: false
|
||||
}
|
||||
]
|
||||
};
|
||||
const nodes = await this.contentApi.search(query).toPromise();
|
||||
|
||||
const entries = nodes.list.entries.map((obj) => obj.entry);
|
||||
this.sort(entries, sortingKey, sortingDirection);
|
||||
|
||||
return entries.map((obj) => obj.id);
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the root field name from the property path.
|
||||
* Example: 'property1.some.child.property' => 'property1'
|
||||
*
|
||||
* @param path Property path
|
||||
*/
|
||||
getRootField(path: string) {
|
||||
if (path) {
|
||||
return path.split('.')[0];
|
||||
}
|
||||
return path;
|
||||
}
|
||||
|
||||
@HostListener('document:keydown', ['$event'])
|
||||
handleKeyboardEvent(event: KeyboardEvent) {
|
||||
const key = event.keyCode;
|
||||
const rightArrow = 39;
|
||||
const leftArrow = 37;
|
||||
|
||||
if (key === rightArrow || key === leftArrow) {
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
}
|
||||
|
||||
private sort(items: any[], key: string, direction: string) {
|
||||
const options: Intl.CollatorOptions = {};
|
||||
|
||||
if (key.includes('sizeInBytes') || key === 'name') {
|
||||
options.numeric = true;
|
||||
}
|
||||
|
||||
items.sort((a: any, b: any) => {
|
||||
let left = ObjectUtils.getValue(a, key);
|
||||
if (left) {
|
||||
left = left instanceof Date ? left.valueOf().toString() : left.toString();
|
||||
} else {
|
||||
left = '';
|
||||
}
|
||||
|
||||
let right = ObjectUtils.getValue(b, key);
|
||||
if (right) {
|
||||
right = right instanceof Date ? right.valueOf().toString() : right.toString();
|
||||
} else {
|
||||
right = '';
|
||||
}
|
||||
|
||||
return direction === 'asc' ? left.localeCompare(right, undefined, options) : right.localeCompare(left, undefined, options);
|
||||
});
|
||||
}
|
||||
|
||||
private navigateToFileLocation() {
|
||||
const location = this.getFileLocation();
|
||||
this.router.navigateByUrl(location);
|
||||
}
|
||||
|
||||
private getFileLocation(): string {
|
||||
return this.navigationPath || this.router.parseUrl(this.router.url).root.children[PRIMARY_OUTLET].toString();
|
||||
}
|
||||
|
||||
private shouldNavigate(element: HTMLElement): boolean {
|
||||
let currentElement = element.parentElement;
|
||||
|
||||
while (currentElement && !this.isChild(currentElement.classList)) {
|
||||
currentElement = currentElement.parentElement;
|
||||
}
|
||||
|
||||
return !!currentElement;
|
||||
}
|
||||
|
||||
private isChild(list: DOMTokenList): boolean {
|
||||
return Array.from(list).some((className: string) => this.containersSkipNavigation.includes(className));
|
||||
}
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Alfresco Example Content Application
|
||||
*
|
||||
* Copyright (C) 2005 - 2020 Alfresco Software Limited
|
||||
*
|
||||
* This file is part of the Alfresco Example Content Application.
|
||||
* If the software was purchased under a paid Alfresco license, the terms of
|
||||
* the paid license agreement will prevail. Otherwise, the software is
|
||||
* provided under the following open source license terms:
|
||||
*
|
||||
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Lesser General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Lesser General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { CoreModule } from '@alfresco/adf-core';
|
||||
import { ContentDirectiveModule } from '@alfresco/adf-content-services';
|
||||
import { DirectivesModule } from '../../directives/directives.module';
|
||||
import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
|
||||
import { CoreExtensionsModule } from '../../extensions/core.extensions.module';
|
||||
import { AppToolbarModule } from '../toolbar/toolbar.module';
|
||||
import { AppViewerComponent } from './viewer.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
data: {
|
||||
title: 'APP.PREVIEW.TITLE',
|
||||
navigateMultiple: true
|
||||
},
|
||||
component: AppViewerComponent
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild(routes),
|
||||
CoreModule.forChild(),
|
||||
ContentDirectiveModule,
|
||||
DirectivesModule,
|
||||
AppInfoDrawerModule,
|
||||
CoreExtensionsModule.forChild(),
|
||||
AppToolbarModule
|
||||
],
|
||||
declarations: [AppViewerComponent],
|
||||
exports: [AppViewerComponent]
|
||||
})
|
||||
export class AppViewerModule {}
|
||||
Reference in New Issue
Block a user