/*! * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved. * * Alfresco Example Content Application * * 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 * from Hyland Software. If not, see . */ import { Component, OnInit, OnDestroy, ViewEncapsulation, HostListener } from '@angular/core'; import { CommonModule, Location } from '@angular/common'; import { ActivatedRoute, UrlTree, UrlSegmentGroup, UrlSegment, PRIMARY_OUTLET } from '@angular/router'; import { debounceTime, map, takeUntil } from 'rxjs/operators'; import { UserPreferencesService, ObjectUtils, ViewerModule } from '@alfresco/adf-core'; import { ClosePreviewAction, ViewerActionTypes, SetSelectedNodesAction } from '@alfresco/aca-shared/store'; import { PageComponent, AppHookService, ContentApiService, InfoDrawerComponent, ToolbarMenuItemComponent, ToolbarComponent } from '@alfresco/aca-shared'; import { ContentActionRef, ViewerExtensionRef } from '@alfresco/adf-extensions'; import { SearchRequest } from '@alfresco/js-api'; import { from } from 'rxjs'; import { Actions, ofType } from '@ngrx/effects'; import { AlfrescoViewerModule, NodesApiService } from '@alfresco/adf-content-services'; @Component({ standalone: true, imports: [CommonModule, ViewerModule, AlfrescoViewerModule, InfoDrawerComponent, ToolbarMenuItemComponent, ToolbarComponent], 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 = []; contentExtensions: Array = []; 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 nodesApiService: NodesApiService, private actions$: Actions, private location: Location, private appHookService: AppHookService ) { super(); } 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(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 { 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)); } }