mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
[AAE-11496] Move 'content-plugin' to projects folder as 'aca-content' (#2817)
* [AAE-11496] Move content-plugin to projects * Fix unit test
This commit is contained in:
Bartosz Sekuła
GitHub
@@ -0,0 +1,100 @@
|
||||
<aca-page-layout [hasError]="!isValidPath">
|
||||
<aca-page-layout-header>
|
||||
<adf-breadcrumb [root]="title" [folderNode]="node" [maxItems]="isSmallScreen ? 1 : 0" (navigate)="onBreadcrumbNavigate($event)"> </adf-breadcrumb>
|
||||
|
||||
<adf-toolbar class="adf-toolbar--inline">
|
||||
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||
</ng-container>
|
||||
</adf-toolbar>
|
||||
</aca-page-layout-header>
|
||||
|
||||
<aca-page-layout-error>
|
||||
<aca-generic-error></aca-generic-error>
|
||||
</aca-page-layout-error>
|
||||
|
||||
<aca-page-layout-content>
|
||||
<div class="main-content" *ngIf="!(showLoader$ | async)">
|
||||
<adf-upload-drag-area [rootFolderId]="node?.id" [disabled]="!canUpload" (updateFileVersion)="onUploadNewVersion($event)">
|
||||
<adf-document-list
|
||||
#documentList
|
||||
acaDocumentList
|
||||
acaContextActions
|
||||
[display]="documentDisplayMode$ | async"
|
||||
selectionMode="multiple"
|
||||
[currentFolderId]="node?.id"
|
||||
[loading]="true"
|
||||
[showHeader]="showHeader"
|
||||
[node]="nodeResult"
|
||||
[allowDropFiles]="true"
|
||||
[navigate]="false"
|
||||
[sorting]="['name', 'ASC']"
|
||||
[imageResolver]="imageResolver"
|
||||
[headerFilters]="true"
|
||||
[filterValue]="queryParams"
|
||||
(node-dblclick)="handleNodeClick($event)"
|
||||
(name-click)="handleNodeClick($event)"
|
||||
(sorting-changed)="onSortingChanged($event)"
|
||||
(filterSelection)="onFilterSelected($event)"
|
||||
(error)="onError()"
|
||||
>
|
||||
<data-columns>
|
||||
<ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
|
||||
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
|
||||
<data-column
|
||||
[key]="column.key"
|
||||
[title]="column.title"
|
||||
[type]="column.type"
|
||||
[format]="column.format"
|
||||
[class]="column.class"
|
||||
[sortable]="column.sortable"
|
||||
[sortingKey]="column.sortingKey || column.key"
|
||||
>
|
||||
<ng-template let-context>
|
||||
<adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
|
||||
<data-column
|
||||
[key]="column.key"
|
||||
[title]="column.title"
|
||||
[type]="column.type"
|
||||
[format]="column.format"
|
||||
[class]="column.class"
|
||||
[sortable]="column.sortable"
|
||||
[sortingKey]="column.sortingKey || column.key"
|
||||
>
|
||||
</data-column>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</data-columns>
|
||||
|
||||
<adf-custom-empty-content-template *ngIf="isFilterHeaderActive()">
|
||||
<ng-container>
|
||||
<div class="empty-search__block" aria-live="polite">
|
||||
<p class="empty-search__text">
|
||||
{{ 'APP.BROWSE.SEARCH.NO_FILTER_RESULTS' | translate }}
|
||||
</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
</adf-custom-empty-content-template>
|
||||
</adf-document-list>
|
||||
|
||||
<adf-pagination acaPagination [target]="documentList"> </adf-pagination>
|
||||
</adf-upload-drag-area>
|
||||
</div>
|
||||
|
||||
<mat-progress-spinner *ngIf="showLoader$ | async"
|
||||
id="adf-document-list-loading"
|
||||
class="adf-document-list-loading-margin"
|
||||
[color]="'primary'"
|
||||
[mode]="'indeterminate'">
|
||||
</mat-progress-spinner>
|
||||
|
||||
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
|
||||
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
||||
</div>
|
||||
</aca-page-layout-content>
|
||||
</aca-page-layout>
|
||||
@@ -0,0 +1,436 @@
|
||||
/*!
|
||||
* @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 { TestBed, fakeAsync, tick, ComponentFixture } from '@angular/core/testing';
|
||||
import { NO_ERRORS_SCHEMA, SimpleChange, SimpleChanges } from '@angular/core';
|
||||
import { Router, ActivatedRoute, convertToParamMap } from '@angular/router';
|
||||
import { DataTableComponent, UploadService, AppConfigModule, DataTableModule, PaginationModule } from '@alfresco/adf-core';
|
||||
import { DocumentListComponent, DocumentListService, FilterSearch, PathElementEntity, NodeFavoriteDirective } from '@alfresco/adf-content-services';
|
||||
import { NodeActionsService } from '../../services/node-actions.service';
|
||||
import { FilesComponent } from './files.component';
|
||||
import { AppTestingModule } from '../../testing/app-testing.module';
|
||||
import { ContentApiService, SharedDirectivesModule } from '@alfresco/aca-shared';
|
||||
import { of, throwError } from 'rxjs';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { DirectivesModule } from '../../directives/directives.module';
|
||||
import { NodeEntry, NodePaging } from '@alfresco/js-api';
|
||||
|
||||
describe('FilesComponent', () => {
|
||||
let node;
|
||||
let fixture: ComponentFixture<FilesComponent>;
|
||||
let component: FilesComponent;
|
||||
let uploadService: UploadService;
|
||||
let nodeActionsService: NodeActionsService;
|
||||
let contentApi: ContentApiService;
|
||||
let route: ActivatedRoute;
|
||||
let router: any = {
|
||||
url: '',
|
||||
navigate: jasmine.createSpy('navigate')
|
||||
};
|
||||
|
||||
let spyContent = null;
|
||||
let loadFolderByNodeIdSpy: jasmine.Spy;
|
||||
|
||||
function verifyEmptyFilterTemplate() {
|
||||
const template = fixture.debugElement.query(By.css('.empty-search__block')).nativeElement as HTMLElement;
|
||||
expect(template).toBeDefined();
|
||||
expect(template.innerText).toBe('APP.BROWSE.SEARCH.NO_FILTER_RESULTS');
|
||||
}
|
||||
|
||||
function verifyEmptyTemplate() {
|
||||
const template = fixture.debugElement.query(By.css('.adf-empty-list_template'));
|
||||
expect(template).not.toBeNull();
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [AppTestingModule, DataTableModule, PaginationModule, SharedDirectivesModule, DirectivesModule, AppConfigModule],
|
||||
declarations: [FilesComponent, DataTableComponent, NodeFavoriteDirective, DocumentListComponent],
|
||||
providers: [
|
||||
{
|
||||
provide: Router,
|
||||
useValue: router
|
||||
},
|
||||
{
|
||||
provide: ActivatedRoute,
|
||||
useValue: {
|
||||
snapshot: { data: { preferencePrefix: 'prefix' }, paramMap: convertToParamMap({ folderId: undefined }) },
|
||||
params: of({ folderId: 'someId' }),
|
||||
queryParamMap: of({})
|
||||
}
|
||||
}
|
||||
],
|
||||
schemas: [NO_ERRORS_SCHEMA]
|
||||
});
|
||||
|
||||
fixture = TestBed.createComponent(FilesComponent);
|
||||
component = fixture.componentInstance;
|
||||
|
||||
const documentListService = TestBed.inject(DocumentListService);
|
||||
const fakeNodeEntry: NodeEntry = { entry: { id: 'fake-node-entry' } } as NodeEntry;
|
||||
const fakeNodePaging: NodePaging = { list: { pagination: { count: 10, maxItems: 10, skipCount: 0 } } };
|
||||
const documentLoaderNode = { children: fakeNodePaging, currentNode: fakeNodeEntry };
|
||||
loadFolderByNodeIdSpy = spyOn(documentListService, 'loadFolderByNodeId').and.returnValue(of(documentLoaderNode));
|
||||
|
||||
uploadService = TestBed.inject(UploadService);
|
||||
router = TestBed.inject(Router);
|
||||
route = TestBed.inject(ActivatedRoute);
|
||||
nodeActionsService = TestBed.inject(NodeActionsService);
|
||||
contentApi = TestBed.inject(ContentApiService);
|
||||
spyContent = spyOn(contentApi, 'getNode');
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
node = { id: 'node-id', isFolder: true };
|
||||
spyContent.and.returnValue(of({ entry: node }));
|
||||
});
|
||||
|
||||
describe('Current page is valid', () => {
|
||||
beforeEach(() => {
|
||||
fixture.detectChanges();
|
||||
spyContent.and.stub();
|
||||
});
|
||||
|
||||
it('should be a valid current page', fakeAsync(() => {
|
||||
spyContent.and.returnValue(throwError(null));
|
||||
|
||||
component.ngOnInit();
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
expect(component.isValidPath).toBe(false);
|
||||
}));
|
||||
|
||||
it('should set current page as invalid path', fakeAsync(() => {
|
||||
fixture.detectChanges();
|
||||
tick();
|
||||
|
||||
expect(component.isValidPath).toBe(true);
|
||||
}));
|
||||
|
||||
it('should set current page as invalid path when loadFolderByNodeId API fails', fakeAsync(() => {
|
||||
fixture.detectChanges();
|
||||
spyContent.and.returnValue(throwError(null));
|
||||
loadFolderByNodeIdSpy.and.returnValue(throwError(Error('error')));
|
||||
component.documentList.loadFolder();
|
||||
tick();
|
||||
|
||||
expect(component.isValidPath).toBe(false);
|
||||
}));
|
||||
});
|
||||
|
||||
describe('OnInit', () => {
|
||||
beforeEach(() => {
|
||||
router.navigate['calls'].reset();
|
||||
});
|
||||
|
||||
it('should set current node', () => {
|
||||
fixture.detectChanges();
|
||||
expect(component.node).toBe(node);
|
||||
});
|
||||
|
||||
it('should navigate to parent if node is not a folder', () => {
|
||||
const nodeEntry = { isFolder: false, parentId: 'parent-id' };
|
||||
spyContent.and.returnValue(of({ entry: nodeEntry } as any));
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(router.navigate['calls'].argsFor(0)[0]).toEqual(['/personal-files', 'parent-id']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('refresh on events', () => {
|
||||
beforeEach(() => {
|
||||
spyOn(component, 'reload');
|
||||
fixture.detectChanges();
|
||||
|
||||
spyOn(component.documentList, 'loadFolder').and.callFake(() => {});
|
||||
});
|
||||
|
||||
it('should call refresh onContentCopied event if parent is the same', () => {
|
||||
const nodes: any[] = [{ entry: { parentId: '1' } }, { entry: { parentId: '2' } }];
|
||||
|
||||
component.node = { id: '1' } as any;
|
||||
|
||||
nodeActionsService.contentCopied.next(nodes);
|
||||
|
||||
expect(component.reload).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not call refresh onContentCopied event when parent mismatch', () => {
|
||||
const nodes: any[] = [{ entry: { parentId: '1' } }, { entry: { parentId: '2' } }];
|
||||
|
||||
component.node = { id: '3' } as any;
|
||||
|
||||
nodeActionsService.contentCopied.next(nodes);
|
||||
|
||||
expect(component.reload).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should call refresh on fileUploadComplete event if parent node match', fakeAsync(() => {
|
||||
const file: any = { file: { options: { parentId: 'parentId' } } };
|
||||
component.node = { id: 'parentId' } as any;
|
||||
|
||||
uploadService.fileUploadComplete.next(file);
|
||||
|
||||
tick(500);
|
||||
|
||||
expect(component.reload).toHaveBeenCalled();
|
||||
}));
|
||||
|
||||
it('should not call refresh on fileUploadComplete event if parent mismatch', fakeAsync(() => {
|
||||
const file: any = { file: { options: { parentId: 'otherId' } } };
|
||||
component.node = { id: 'parentId' } as any;
|
||||
|
||||
uploadService.fileUploadComplete.next(file);
|
||||
|
||||
tick(500);
|
||||
|
||||
expect(component.reload).not.toHaveBeenCalled();
|
||||
}));
|
||||
|
||||
it('should call refresh on fileUploadDeleted event if parent node match', fakeAsync(() => {
|
||||
const file: any = { file: { options: { parentId: 'parentId' } } };
|
||||
component.node = { id: 'parentId' } as any;
|
||||
|
||||
uploadService.fileUploadDeleted.next(file);
|
||||
|
||||
tick(500);
|
||||
|
||||
expect(component.reload).toHaveBeenCalled();
|
||||
}));
|
||||
|
||||
it('should not call refresh on fileUploadDeleted event if parent mismatch', fakeAsync(() => {
|
||||
const file: any = { file: { options: { parentId: 'otherId' } } };
|
||||
component.node = { id: 'parentId' } as any;
|
||||
|
||||
uploadService.fileUploadDeleted.next(file);
|
||||
|
||||
tick(500);
|
||||
|
||||
expect(component.reload).not.toHaveBeenCalled();
|
||||
}));
|
||||
});
|
||||
|
||||
describe('onBreadcrumbNavigate()', () => {
|
||||
beforeEach(() => {
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should navigates to node id', () => {
|
||||
const routeData: any = { id: 'some-where-over-the-rainbow' };
|
||||
spyOn(component, 'navigate');
|
||||
|
||||
component.onBreadcrumbNavigate(routeData);
|
||||
|
||||
expect(component.navigate).toHaveBeenCalledWith(routeData.id);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Node navigation', () => {
|
||||
beforeEach(() => {
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should navigates to node when is more that one sub node', () => {
|
||||
router.url = '/personal-files/favourites';
|
||||
component.navigate(node.id);
|
||||
|
||||
expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'favourites', node.id]);
|
||||
});
|
||||
|
||||
it('should remove the header filters param on click of folders', () => {
|
||||
router.url = '/personal-files?name=abc';
|
||||
component.navigate(node.id);
|
||||
|
||||
expect(router.navigate).toHaveBeenCalledWith(['personal-files', node.id]);
|
||||
});
|
||||
|
||||
it('should navigates to node when id provided', () => {
|
||||
router.url = '/personal-files';
|
||||
component.navigate(node.id);
|
||||
|
||||
expect(router.navigate).toHaveBeenCalledWith(['personal-files', node.id]);
|
||||
});
|
||||
|
||||
it('should navigates to home when id not provided', () => {
|
||||
router.url = '/personal-files';
|
||||
component.navigate();
|
||||
|
||||
expect(router.navigate).toHaveBeenCalledWith(['personal-files']);
|
||||
});
|
||||
|
||||
it('should navigate home if node is root', () => {
|
||||
component.node = {
|
||||
path: {
|
||||
elements: [{ id: 'node-id' }]
|
||||
}
|
||||
} as any;
|
||||
|
||||
router.url = '/personal-files';
|
||||
component.navigate(node.id);
|
||||
|
||||
expect(router.navigate).toHaveBeenCalledWith(['personal-files']);
|
||||
});
|
||||
|
||||
it('should navigate home if node is root also if it contain a uuid', () => {
|
||||
spyOn(route.snapshot.paramMap, 'get').and.returnValue('some-node-id');
|
||||
component.node = {
|
||||
path: {
|
||||
elements: [{ id: 'node-id' }]
|
||||
}
|
||||
} as any;
|
||||
|
||||
router.url = '/personal-files/895de2b3-1b69-4cc7-bff2-a0d7c86b7bc7';
|
||||
component.navigate(node.id);
|
||||
|
||||
expect(router.navigate).toHaveBeenCalledWith(['personal-files']);
|
||||
});
|
||||
|
||||
it('should navigate to sub folder from a parent folder', () => {
|
||||
router.url = '/personal-files/parent-folder-node-id';
|
||||
const childFolderNodeId = node.id;
|
||||
spyOn(route.snapshot.paramMap, 'get').and.returnValue('parent-folder-node-id');
|
||||
component.navigate(childFolderNodeId);
|
||||
expect(router.navigate).toHaveBeenCalledWith(['personal-files', childFolderNodeId]);
|
||||
});
|
||||
|
||||
it('should navigate to smart folder content', () => {
|
||||
router.url = '/libraries/vH1-6-1-1-115wji7092f0-41-MTg%3D-1-115hpo76l3h2e1f';
|
||||
spyOn(route.snapshot.paramMap, 'get').and.returnValue('vH1-6-1-1-115wji7092f0-41-MTg=-1-115hpo76l3h2e1f');
|
||||
component.navigate(node.id);
|
||||
expect(router.navigate).toHaveBeenCalledWith(['libraries', node.id]);
|
||||
});
|
||||
|
||||
it('should navigate to destination folder if node is `app:folderlink`', () => {
|
||||
node = {
|
||||
entry: {
|
||||
id: 'folder-link-id',
|
||||
isFolder: true,
|
||||
nodeType: 'app:folderlink',
|
||||
properties: {
|
||||
'cm:destination': 'original-folder-id'
|
||||
}
|
||||
}
|
||||
} as any;
|
||||
|
||||
router.url = '/personal-files';
|
||||
spyOn(route.snapshot.paramMap, 'get').and.returnValue('personal-files');
|
||||
component.navigateTo(node);
|
||||
expect(router.navigate).toHaveBeenCalledWith([node.entry.properties['cm:destination']]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('isSiteContainer', () => {
|
||||
it('should return false if node has no aspectNames', () => {
|
||||
const mock: any = { aspectNames: [] };
|
||||
|
||||
expect(component.isSiteContainer(mock)).toBe(false);
|
||||
});
|
||||
|
||||
it('should return false if node is not site container', () => {
|
||||
const mock: any = { aspectNames: ['something-else'] };
|
||||
|
||||
expect(component.isSiteContainer(mock)).toBe(false);
|
||||
});
|
||||
|
||||
it('should return true if node is a site container', () => {
|
||||
const mock: any = { aspectNames: ['st:siteContainer'] };
|
||||
|
||||
expect(component.isSiteContainer(mock)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('empty template', () => {
|
||||
beforeEach(() => {
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should show custom empty template if filter headers are applied', async () => {
|
||||
component.onFilterSelected([{ key: 'name', value: 'aaa' } as FilterSearch]);
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
verifyEmptyFilterTemplate();
|
||||
});
|
||||
|
||||
it('should display custom empty template when no data available', async () => {
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
verifyEmptyTemplate();
|
||||
});
|
||||
});
|
||||
|
||||
it('[C308041] should have sticky headers', async () => {
|
||||
fixture.detectChanges();
|
||||
|
||||
const nodeResult = {
|
||||
list: {
|
||||
entries: [{ entry: { id: '1', isFile: true } } as any, { entry: { id: '2', isFile: true } } as any],
|
||||
pagination: { count: 2 }
|
||||
}
|
||||
};
|
||||
const changes: SimpleChanges = { nodeResult: new SimpleChange(null, nodeResult, true) };
|
||||
|
||||
fixture.componentInstance.ngOnChanges(changes);
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const header = fixture.nativeElement.querySelector('.adf-sticky-header');
|
||||
expect(header).not.toBeNull();
|
||||
});
|
||||
|
||||
describe('Pagination reset when navigating', () => {
|
||||
beforeEach(() => {
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should reset the pagination when navigating using the breadcrumb', () => {
|
||||
const resetNewFolderPaginationSpy = spyOn(component.documentList, 'resetNewFolderPagination');
|
||||
const breadcrumbRoute: PathElementEntity = { id: 'fake-breadcrumb-route-id', name: 'fake' };
|
||||
component.onBreadcrumbNavigate(breadcrumbRoute);
|
||||
|
||||
expect(resetNewFolderPaginationSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should reset the pagination when navigating to a folder', () => {
|
||||
const resetNewFolderPaginationSpy = spyOn(component.documentList, 'resetNewFolderPagination');
|
||||
const fakeFolderNode = new NodeEntry({ entry: { id: 'fakeFolderNode', isFolder: true, isFile: false } });
|
||||
component.navigateTo(fakeFolderNode);
|
||||
|
||||
expect(resetNewFolderPaginationSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not reset the pagination when the node to navigate is not a folder', () => {
|
||||
const resetNewFolderPaginationSpy = spyOn(component.documentList, 'resetNewFolderPagination');
|
||||
const fakeFileNode = new NodeEntry({ entry: { id: 'fakeFileNode', isFolder: false, isFile: true } });
|
||||
component.navigateTo(fakeFileNode);
|
||||
|
||||
expect(resetNewFolderPaginationSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
362
projects/aca-content/src/lib/components/files/files.component.ts
Normal file
362
projects/aca-content/src/lib/components/files/files.component.ts
Normal file
@@ -0,0 +1,362 @@
|
||||
/*!
|
||||
* @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 { FileUploadEvent, ShowHeaderMode, UploadService } from '@alfresco/adf-core';
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Params, Router } from '@angular/router';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { MinimalNodeEntity, MinimalNodeEntryEntity, PathElement, PathElementEntity } from '@alfresco/js-api';
|
||||
import { ContentManagementService } from '../../services/content-management.service';
|
||||
import { NodeActionsService } from '../../services/node-actions.service';
|
||||
import { PageComponent } from '../page.component';
|
||||
import { AppExtensionService, ContentApiService } from '@alfresco/aca-shared';
|
||||
import { SetCurrentFolderAction, isAdmin, AppStore, UploadFileVersionAction, showLoaderSelector } from '@alfresco/aca-shared/store';
|
||||
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
||||
import { debounceTime, takeUntil } from 'rxjs/operators';
|
||||
import { FilterSearch, ShareDataRow } from '@alfresco/adf-content-services';
|
||||
import { DocumentListPresetRef } from '@alfresco/adf-extensions';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
templateUrl: './files.component.html'
|
||||
})
|
||||
export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
|
||||
isValidPath = true;
|
||||
isSmallScreen = false;
|
||||
isAdmin = false;
|
||||
selectedNode: MinimalNodeEntity;
|
||||
queryParams = null;
|
||||
|
||||
showLoader$: Observable<boolean>;
|
||||
private nodePath: PathElement[];
|
||||
|
||||
columns: DocumentListPresetRef[] = [];
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private contentApi: ContentApiService,
|
||||
store: Store<AppStore>,
|
||||
private nodeActionsService: NodeActionsService,
|
||||
private uploadService: UploadService,
|
||||
content: ContentManagementService,
|
||||
extensions: AppExtensionService,
|
||||
private breakpointObserver: BreakpointObserver
|
||||
) {
|
||||
super(store, extensions, content);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
super.ngOnInit();
|
||||
|
||||
const { route, nodeActionsService, uploadService } = this;
|
||||
const { data } = route.snapshot;
|
||||
|
||||
this.title = data.title;
|
||||
|
||||
this.showLoader$ = this.store.select(showLoaderSelector);
|
||||
route.queryParamMap.subscribe((queryMap: Params) => {
|
||||
this.queryParams = queryMap.params;
|
||||
});
|
||||
|
||||
route.params.subscribe(({ folderId }: Params) => {
|
||||
const nodeId = folderId || data.defaultNodeId;
|
||||
|
||||
this.contentApi.getNode(nodeId).subscribe(
|
||||
(node) => {
|
||||
this.isValidPath = true;
|
||||
|
||||
if (node.entry && node.entry.isFolder) {
|
||||
this.updateCurrentNode(node.entry);
|
||||
} else {
|
||||
this.router.navigate(['/personal-files', node.entry.parentId], {
|
||||
replaceUrl: true
|
||||
});
|
||||
}
|
||||
},
|
||||
() => (this.isValidPath = false)
|
||||
);
|
||||
});
|
||||
|
||||
this.subscriptions = this.subscriptions.concat([
|
||||
nodeActionsService.contentCopied.subscribe((nodes) => this.onContentCopied(nodes)),
|
||||
uploadService.fileUploadComplete.pipe(debounceTime(300)).subscribe((file) => this.onFileUploadedEvent(file)),
|
||||
uploadService.fileUploadDeleted.pipe(debounceTime(300)).subscribe((file) => this.onFileUploadedEvent(file)),
|
||||
|
||||
this.breakpointObserver.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]).subscribe((result) => {
|
||||
this.isSmallScreen = result.matches;
|
||||
})
|
||||
]);
|
||||
|
||||
this.store
|
||||
.select(isAdmin)
|
||||
.pipe(takeUntil(this.onDestroy$))
|
||||
.subscribe((value) => {
|
||||
this.isAdmin = value;
|
||||
});
|
||||
|
||||
this.columns = this.extensions.documentListPresets.files || [];
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.store.dispatch(new SetCurrentFolderAction(null));
|
||||
super.ngOnDestroy();
|
||||
}
|
||||
|
||||
navigate(nodeId: string = null) {
|
||||
const currentNodeId = this.route.snapshot.paramMap.get('folderId');
|
||||
const urlWithoutParams = decodeURIComponent(this.router.url).split('?')[0];
|
||||
const urlToNavigate: string[] = this.getUrlToNavigate(urlWithoutParams, currentNodeId, nodeId);
|
||||
this.router.navigate(urlToNavigate);
|
||||
}
|
||||
|
||||
private getUrlToNavigate(currentURL: string, currentNodeId: string, nextNodeId: string): string[] {
|
||||
return currentNodeId ? this.getNextNodeUrlToNavigate(currentURL, currentNodeId, nextNodeId) : this.appendNextNodeIdToUrl(currentURL, nextNodeId);
|
||||
}
|
||||
|
||||
private getNextNodeUrlToNavigate(currentURL: string, currentNodeId: string, nextNodeId: string): string[] {
|
||||
const urlToNavigate: string[] =
|
||||
nextNodeId && !this.isRootNode(nextNodeId)
|
||||
? this.replaceCurrentNodeIdWithNextNodeId(currentURL, currentNodeId, nextNodeId)
|
||||
: this.removeNodeIdFromUrl(currentURL, currentNodeId);
|
||||
urlToNavigate.shift();
|
||||
return urlToNavigate;
|
||||
}
|
||||
|
||||
private replaceCurrentNodeIdWithNextNodeId(currentURL: string, currentNodeId: string, nextNodeId: string): string[] {
|
||||
const nextNodeUrlToNavigate = currentURL.split('/');
|
||||
const index = nextNodeUrlToNavigate.indexOf(currentNodeId);
|
||||
if (index > 0) {
|
||||
nextNodeUrlToNavigate[index] = nextNodeId;
|
||||
}
|
||||
return nextNodeUrlToNavigate;
|
||||
}
|
||||
|
||||
private removeNodeIdFromUrl(currentURL: string, currentNodeId: string): string[] {
|
||||
const rootUrl: string[] = currentURL.replace(currentNodeId, '').split('/');
|
||||
rootUrl.pop();
|
||||
return rootUrl;
|
||||
}
|
||||
|
||||
private appendNextNodeIdToUrl(currentURL: string, nodeId: string): string[] {
|
||||
const navigateToNodeUrl = currentURL.split('/');
|
||||
if (nodeId && !this.isRootNode(nodeId)) {
|
||||
navigateToNodeUrl.push(nodeId);
|
||||
}
|
||||
navigateToNodeUrl.shift();
|
||||
return navigateToNodeUrl;
|
||||
}
|
||||
|
||||
onUploadNewVersion(ev: CustomEvent) {
|
||||
this.store.dispatch(new UploadFileVersionAction(ev));
|
||||
}
|
||||
|
||||
navigateTo(node: MinimalNodeEntity) {
|
||||
if (node && node.entry) {
|
||||
this.selectedNode = node;
|
||||
const { isFolder } = node.entry;
|
||||
|
||||
if (isFolder) {
|
||||
let id: string;
|
||||
|
||||
if (node.entry.nodeType === 'app:folderlink') {
|
||||
id = node.entry.properties['cm:destination'];
|
||||
} else {
|
||||
id = node.entry.id;
|
||||
}
|
||||
|
||||
this.documentList.resetNewFolderPagination();
|
||||
this.navigate(id);
|
||||
return;
|
||||
}
|
||||
|
||||
this.showPreview(node, { location: this.router.url });
|
||||
}
|
||||
}
|
||||
|
||||
handleNodeClick(event: Event) {
|
||||
this.navigateTo((event as CustomEvent).detail?.node);
|
||||
}
|
||||
|
||||
onBreadcrumbNavigate(route: PathElementEntity) {
|
||||
this.documentList.resetNewFolderPagination();
|
||||
|
||||
// todo: review this approach once 5.2.3 is out
|
||||
if (this.nodePath && this.nodePath.length > 2) {
|
||||
if (this.nodePath[1].name === 'Sites' && this.nodePath[2].id === route.id) {
|
||||
return this.navigate(this.nodePath[3].id);
|
||||
}
|
||||
}
|
||||
this.navigate(route.id);
|
||||
}
|
||||
|
||||
onFileUploadedEvent(event: FileUploadEvent) {
|
||||
const node: MinimalNodeEntity = event.file.data;
|
||||
|
||||
// check root and child nodes
|
||||
if (node && node.entry && node.entry.parentId === this.getParentNodeId()) {
|
||||
this.reload(this.selectedNode);
|
||||
return;
|
||||
}
|
||||
|
||||
// check the child nodes to show dropped folder
|
||||
if (event && event.file.options.parentId === this.getParentNodeId()) {
|
||||
this.displayFolderParent(event.file.options.path, 0);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event && event.file.options.parentId) {
|
||||
if (this.nodePath) {
|
||||
const correspondingNodePath = this.nodePath.find((pathItem) => pathItem.id === event.file.options.parentId);
|
||||
|
||||
// check if the current folder has the 'trigger-upload-folder' as one of its parents
|
||||
if (correspondingNodePath) {
|
||||
const correspondingIndex = this.nodePath.length - this.nodePath.indexOf(correspondingNodePath);
|
||||
this.displayFolderParent(event.file.options.path, correspondingIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
displayFolderParent(filePath = '', index: number) {
|
||||
const parentName = filePath.split('/')[index];
|
||||
const currentFoldersDisplayed = (this.documentList.data.getRows() as ShareDataRow[]) || [];
|
||||
|
||||
const alreadyDisplayedParentFolder = currentFoldersDisplayed.find((row) => row.node.entry.isFolder && row.node.entry.name === parentName);
|
||||
|
||||
if (alreadyDisplayedParentFolder) {
|
||||
return;
|
||||
}
|
||||
this.reload(this.selectedNode);
|
||||
}
|
||||
|
||||
onContentCopied(nodes: MinimalNodeEntity[]) {
|
||||
const newNode = nodes.find((node) => node && node.entry && node.entry.parentId === this.getParentNodeId());
|
||||
if (newNode) {
|
||||
this.reload(this.selectedNode);
|
||||
}
|
||||
}
|
||||
|
||||
// todo: review this approach once 5.2.3 is out
|
||||
private async updateCurrentNode(node: MinimalNodeEntryEntity) {
|
||||
this.nodePath = null;
|
||||
|
||||
if (node && node.path && node.path.elements) {
|
||||
const elements = node.path.elements;
|
||||
|
||||
this.nodePath = elements.map((pathElement) => Object.assign({}, pathElement));
|
||||
|
||||
if (elements.length > 1) {
|
||||
if (elements[1].name === 'User Homes') {
|
||||
if (!this.isAdmin) {
|
||||
elements.splice(0, 2);
|
||||
}
|
||||
} else if (elements[1].name === 'Sites') {
|
||||
await this.normalizeSitePath(node);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.node = node;
|
||||
this.store.dispatch(new SetCurrentFolderAction(node));
|
||||
}
|
||||
|
||||
// todo: review this approach once 5.2.3 is out
|
||||
private async normalizeSitePath(node: MinimalNodeEntryEntity) {
|
||||
const elements = node.path.elements;
|
||||
|
||||
// remove 'Sites'
|
||||
elements.splice(1, 1);
|
||||
|
||||
if (this.isSiteContainer(node)) {
|
||||
// rename 'documentLibrary' entry to the target site display name
|
||||
// clicking on the breadcrumb entry loads the site content
|
||||
const parentNode = await this.contentApi.getNodeInfo(node.parentId).toPromise();
|
||||
node.name = parentNode.properties['cm:title'] || parentNode.name;
|
||||
|
||||
// remove the site entry
|
||||
elements.splice(1, 1);
|
||||
} else {
|
||||
// remove 'documentLibrary' in the middle of the path
|
||||
const docLib = elements.findIndex((el) => el.name === 'documentLibrary');
|
||||
if (docLib > -1) {
|
||||
const siteFragment = elements[docLib - 1];
|
||||
const siteNode = await this.contentApi.getNodeInfo(siteFragment.id).toPromise();
|
||||
|
||||
// apply Site Name to the parent fragment
|
||||
siteFragment.name = siteNode.properties['cm:title'] || siteNode.name;
|
||||
elements.splice(docLib, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isSiteContainer(node: MinimalNodeEntryEntity): boolean {
|
||||
if (node && node.aspectNames && node.aspectNames.length > 0) {
|
||||
return node.aspectNames.indexOf('st:siteContainer') >= 0;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
isRootNode(nodeId: string): boolean {
|
||||
if (this.node && this.node.path && this.node.path.elements && this.node.path.elements.length > 0) {
|
||||
return this.node.path.elements[0].id === nodeId;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
onFilterSelected(activeFilters: FilterSearch[]) {
|
||||
if (activeFilters.length) {
|
||||
this.showHeader = ShowHeaderMode.Always;
|
||||
this.navigateToFilter(activeFilters);
|
||||
} else {
|
||||
this.router.navigate(['.'], { relativeTo: this.route });
|
||||
this.showHeader = ShowHeaderMode.Data;
|
||||
this.onAllFilterCleared();
|
||||
}
|
||||
}
|
||||
|
||||
navigateToFilter(activeFilters: FilterSearch[]) {
|
||||
const objectFromMap = {};
|
||||
activeFilters.forEach((filter: FilterSearch) => {
|
||||
let paramValue;
|
||||
if (filter.value && filter.value.from && filter.value.to) {
|
||||
paramValue = `${filter.value.from}||${filter.value.to}`;
|
||||
} else {
|
||||
paramValue = filter.value;
|
||||
}
|
||||
objectFromMap[filter.key] = paramValue;
|
||||
});
|
||||
|
||||
this.router.navigate([], { relativeTo: this.route, queryParams: objectFromMap });
|
||||
}
|
||||
|
||||
isFilterHeaderActive(): boolean {
|
||||
return this.showHeader === ShowHeaderMode.Always;
|
||||
}
|
||||
|
||||
onError() {
|
||||
this.isValidPath = false;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user