Merge pull request #1376 from Alfresco/dev-denys-1366

Node ID-based navigation for document list
This commit is contained in:
Mario Romano 2017-01-04 17:20:42 +00:00 committed by GitHub
commit 61b94488d8
19 changed files with 200 additions and 647 deletions

View File

@ -1,12 +1,11 @@
<div class="container">
<alfresco-upload-drag-area
[rootFolderId]="uploadRootFolderId"
[currentFolderPath]="uploadFolderPath"
[rootFolderId]="documentList.currentFolderId"
[versioning] = "versioning"
(onSuccess)="documentList.reload()">
<alfresco-document-list-breadcrumb
[currentFolderPath]="currentPath"
(pathChanged)="onBreadcrumbPathChanged($event)" *ngIf="!currentFolderId">
[target]="documentList"
[folderNode]="documentList.folderNode">
</alfresco-document-list-breadcrumb>
<div *ngIf="errorMessage" class="error-message">
<button (click)="resetError()" class="mdl-button mdl-js-button mdl-button--icon">
@ -16,22 +15,12 @@
</div>
<alfresco-document-list
#documentList
[rootFolderId]="rootFolderId"
[currentFolderPath]="currentPath"
[currentFolderId]="currentFolderId"
[contextMenuActions]="true"
[contentActions]="true"
(error)="onNavigationError($event)"
(success)="resetError()"
(preview)="showFile($event)"
(folderChange)="onFolderChanged($event)">
<!--
<empty-folder-content>
<template>
<h1>Sorry, no content here</h1>
</template>
</empty-folder-content>
-->
(preview)="showFile($event)">
<content-columns>
<content-column key="$thumbnail" type="image"></content-column>
<content-column
@ -40,12 +29,6 @@
sortable="true"
class="full-width ellipsis-cell">
</content-column>
<!--
<content-column
title="Type"
source="content.mimeType">
</content-column>
-->
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
key="createdByUser.displayName"
@ -116,34 +99,6 @@
<context-menu-holder></context-menu-holder>
<div class="p-10">
<ul>
<li>Current path: {{currentPath}}</li>
<li>
<button (click)="currentPath = '/'">Go to root</button>
</li>
<li>
<button (click)="currentPath = '/Sites'">Go to Sites</button>
</li>
<li>
<button (click)="currentPath = '/Sites/swsdp';">Go to Web Site Design Project site</button>
</li>
<li>
<button (click)="currentPath = '/Sites/swsdp/documentLibrary';">Go to Document Library</button>
</li>
<li>
<button (click)="currentPath = '/Sites/swsdp/documentLibrary/Agency Files/Contracts'">Go to Agency Contracts</button>
</li>
<li>
<button (click)="currentPath = '!@£$%^&*()'">Go to the wrong path</button>
</li>
<li>
<button (click)="fileDialog.toggleShowDialog()">Show/Hide File Dialog</button>
</li>
</ul>
</div>
<p style="width:250px;margin: 20px;">
<label for="switch-multiple-file" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch-multiple-file" class="mdl-switch__input" (change)="toggleMultipleFileUpload()" >
@ -183,8 +138,7 @@
</div>
<div *ngIf="!acceptedFilesTypeShow">
<alfresco-upload-button data-automation-id="multiple-file-upload"
[rootFolderId]="uploadRootFolderId"
[currentFolderPath]="uploadFolderPath"
[rootFolderId]="documentList.currentFolderId"
[multipleFiles]="multipleFileUpload"
[uploadFolders]="folderUpload"
[versioning] = "versioning"
@ -194,9 +148,8 @@
</div>
<div *ngIf="acceptedFilesTypeShow">
<alfresco-upload-button data-automation-id="multiple-file-upload"
[rootFolderId]="uploadRootFolderId"
[currentFolderPath]="uploadFolderPath"
acceptedFilesType="{{acceptedFilesType}}"
[rootFolderId]="documentList.currentFolderId"
[acceptedFilesType]="acceptedFilesType"
[multipleFiles]="multipleFileUpload"
[uploadFolders]="folderUpload"
[versioning] = "versioning"

View File

@ -33,9 +33,8 @@ import { FormService } from 'ng2-activiti-form';
styleUrls: ['./files.component.css']
})
export class FilesComponent implements OnInit {
currentPath: string = '/Sites/swsdp/documentLibrary';
rootFolderId: string = '-root-';
currentFolderId: string = null;
// The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
currentFolderId: string = '-my-';
errorMessage: string = null;
fileNodeId: any;
@ -44,17 +43,8 @@ export class FilesComponent implements OnInit {
folderUpload: boolean = false;
acceptedFilesTypeShow: boolean = false;
versioning: boolean = false;
acceptedFilesType: string = '.jpg,.pdf,.js';
get uploadRootFolderId(): string {
return this.currentFolderId || this.rootFolderId;
}
get uploadFolderPath(): string {
return this.currentFolderId ? '/' : this.currentPath;
}
@ViewChild(DocumentList)
documentList: DocumentList;
@ -87,18 +77,6 @@ export class FilesComponent implements OnInit {
}
}
onFolderChanged(event?: any) {
if (event) {
this.currentPath = event.path;
}
}
onBreadcrumbPathChanged(event?: any) {
if (event) {
this.currentPath = event.value;
}
}
toggleMultipleFileUpload() {
this.multipleFileUpload = !this.multipleFileUpload;
return this.multipleFileUpload;
@ -123,7 +101,9 @@ export class FilesComponent implements OnInit {
ngOnInit() {
if (this.route) {
this.route.params.forEach((params: Params) => {
this.currentFolderId = params.hasOwnProperty('id') ? params['id'] : null;
if (params['id']) {
this.currentFolderId = params['id'];
}
});
}
if (this.auth.isBpmLoggedIn()) {

View File

@ -97,12 +97,10 @@ Follow the 3 steps below:
```html
<alfresco-document-list
#documentList
[currentFolderPath]="currentPath"
[currentFolderId]="'-my-'"
[contextMenuActions]="true"
[contentActions]="true"
[creationMenuActions]="true"
[multiselect]="true"
(folderChange)="onFolderChanged($event)">
[creationMenuActions]="true">
</alfresco-document-list>
```
@ -120,14 +118,15 @@ import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfr
@Component({
selector: 'alfresco-app-demo',
template: `<alfresco-document-list
template: `
<alfresco-document-list
#documentList
[currentFolderPath]="'/'"
[currentFolderPath]="'-my-'"
[contextMenuActions]="true"
[contentActions]="true"
[creationMenuActions]="true"
[multiselect]="true">
</alfresco-document-list>`
[creationMenuActions]="true">
</alfresco-document-list>
`
})
class DocumentListDemo {
@ -162,17 +161,14 @@ export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
```
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `rootFolderId` | string | -root- | Root node ID, i.e. `-root-`, `-shared-`, `-my-`, etc. or a fixed node ID |
| `currentFolderPath` | string | null | Initial path of displayed folder below the root node, e.g. "/Sites/swsdp/documentLibrary" |
| `currentFolderId` | string | null | Initial node ID of displayed folder, if given |
| `currentFolderId` | string | null | Initial node ID of displayed folder. Can be `-root-`, `-shared-`, `-my-`, or a fixed node ID |
| `folderNode` | `MinimalNodeEntryEntity` | null | Currently displayed folder node |
| `navigate` | boolean | true | Toggles navigation to folder content or file preview |
| `navigationMode` | string (click\|dblclick) | dblclick | User interaction for folder navigation or file preview |
| `thumbnails` | boolean | false | Show document thumbnails rather than icons |
@ -193,24 +189,29 @@ platformBrowserDynamic().bootstrapModule(AppModule);
| `folderChange` | Emitted upon display folder changed |
| `preview` | Emitted when document preview is requested either with single or double click |
_For a complete example source code please refer to
[DocumentList Demo](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-documentlist/demo)
repository._
### Breadcrumb
### Breadcrumb Component
DocumentList provides simple breadcrumb element to indicate the current position within a navigation hierarchy.
```html
<alfresco-document-list-breadcrumb
[target]="documentList">
[target]="documentList"
[folderNode]="documentList.folderNode">
</alfresco-document-list-breadcrumb>
```
![Breadcrumb](docs/assets/breadcrumb.png)
Parent folder button is not displayed when breadcrumb is enabled.
#### Properties
| Name | Type | Description |
| --- | --- | --- |
| `target` | DocumentList | DocumentList component to operate with. Upon clicks will instruct the given component to update. |
| `folderNode` | MinimalNodeEntryEntity | Active node, builds UI based on `folderNode.path.elements` collection. |
### Creation Menu Action

View File

@ -37,7 +37,10 @@
"alfresco-js-api": "^1.0.0",
"ng2-alfresco-core": "1.0.0",
"ng2-alfresco-datatable": "1.0.0",
"ng2-alfresco-documentlist": "^1.0.0"
"ng2-alfresco-documentlist": "^1.0.0",
"material-design-icons": "2.2.3",
"material-design-lite": "1.2.1",
"intl": "^1.2.5"
},
"devDependencies": {
"@types/jasmine": "^2.2.33",

View File

@ -19,13 +19,7 @@ import { NgModule, Component, OnInit, ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DocumentListModule, DocumentList, DocumentActionsService } from 'ng2-alfresco-documentlist';
import {
CoreModule,
StorageService,
AlfrescoSettingsService,
AlfrescoAuthenticationService,
AlfrescoTranslationService
} from 'ng2-alfresco-core';
import { CoreModule, StorageService, SettingsService, AuthService, AlfrescoTranslateService } from 'ng2-alfresco-core';
@Component({
selector: 'alfresco-app-demo',
@ -40,23 +34,15 @@ import {
</div>
<hr>
<alfresco-document-list-breadcrumb
[currentFolderPath]="currentPath"
[target]="documentList">
[target]="documentList"
[folderNode]="documentList.folderNode">
</alfresco-document-list-breadcrumb>
<alfresco-document-list
#documentList
[currentFolderPath]="currentPath"
[currentFolderId]="currentFolderId"
[contextMenuActions]="true"
[contentActions]="true"
[creationMenuActions]="true"
(folderChange)="onFolderChanged($event)">
<!--
<empty-folder-content>
<template>
<h1>Sorry, no content here</h1>
</template>
</empty-folder-content>
-->
[creationMenuActions]="true">
<content-columns>
<content-column key="$thumbnail" type="image"></content-column>
<content-column
@ -65,12 +51,6 @@ import {
sortable="true"
class="full-width ellipsis-cell">
</content-column>
<!--
<content-column
title="Type"
source="content.mimeType">
</content-column>
-->
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
key="createdByUser.displayName"
@ -138,20 +118,18 @@ import {
})
class DocumentListDemo implements OnInit {
currentPath: string = '/';
// The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
currentFolderId: string = '-my-';
authenticated: boolean = false;
ecmHost: string = 'http://localhost:8080';
ticket: string;
@ViewChild(DocumentList)
documentList: DocumentList;
constructor(private authService: AlfrescoAuthenticationService,
private settingsService: AlfrescoSettingsService,
private translation: AlfrescoTranslationService,
constructor(private authService: AuthService,
private settingsService: SettingsService,
private translateService: AlfrescoTranslateService,
private documentActions: DocumentActionsService,
private storage: StorageService) {
@ -162,7 +140,7 @@ class DocumentListDemo implements OnInit {
this.ticket = this.authService.getTicketEcm();
}
translation.addTranslationFolder();
translateService.addTranslationFolder();
documentActions.setHandler('my-handler', this.myDocumentActionHandler.bind(this));
}
@ -206,12 +184,6 @@ class DocumentListDemo implements OnInit {
this.authenticated = false;
});
}
onFolderChanged(event?: any) {
if (event) {
this.currentPath = event.path;
}
}
}
@NgModule({

View File

@ -10,8 +10,7 @@
"class-name": true,
"comment-format": [
true,
"check-space",
"check-lowercase"
"check-space"
],
"curly": true,
"eofline": true,

View File

@ -6,8 +6,8 @@
"scripts": {
"clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings",
"clean-build": "rimraf index.js index.js.map index.d.ts'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts' bundles",
"build": "npm run clean-build && npm run tslint && rimraf dist && tsc && license-check && npm run build.umd",
"build:w": "npm run clean-build && npm run tslint && rimraf dist && tsc:w && license-check npm run build.umd",
"build": "npm run clean-build && npm run tslint && rimraf dist && npm run tsc && license-check && npm run build.umd",
"build:w": "npm run clean-build && npm run tslint && rimraf dist && npm run tsc:w && license-check && npm run build.umd",
"tslint": "tslint -c tslint.json 'src/{,**/}**.ts' 'index.ts' -e '{,**/}**.d.ts' -e './gulpfile.ts'",
"tsc": "tsc",
"tsc:w": "tsc -w",

View File

@ -1,11 +1,10 @@
<ol data-automation-id="breadcrumb" class="breadcrumb">
<div>
<ol *ngIf="folderNode" data-automation-id="breadcrumb" class="breadcrumb">
<li *ngFor="let r of route; let last = last" [class.active]="last" [ngSwitch]="last">
<span *ngSwitchCase="true">{{r.name}}</span>
<a *ngSwitchDefault
href="#"
[attr.data-automation-id]="'breadcrumb_' + r.name"
(click)="onRoutePathClick(r, $event)">
<a *ngSwitchDefault href="#" [attr.data-automation-id]="'breadcrumb_' + r.name" (click)="onRoutePathClick(r, $event)">
{{r.name}}
</a>
</li>
</ol>
</div>

View File

@ -15,7 +15,8 @@
* limitations under the License.
*/
import { DocumentListBreadcrumb, PathNode } from './breadcrumb.component';
import { PathElementEntity } from 'alfresco-js-api';
import { DocumentListBreadcrumb } from './breadcrumb.component';
import { DocumentList } from '../document-list';
describe('DocumentListBreadcrumb', () => {
@ -32,42 +33,6 @@ describe('DocumentListBreadcrumb', () => {
expect(component.currentFolderPath).toBe(path);
});
it('should init with root folder by default', () => {
expect(component.route.length).toBe(1);
expect(component.route[0]).toEqual(
jasmine.objectContaining({
name: 'Root',
path: '/'
})
);
});
it('should fallback to default root for invalid path', () => {
component.currentFolderPath = null;
expect(component.currentFolderPath).toBe('/');
expect(component.route.length).toBe(1);
expect(component.route[0]).toEqual(
jasmine.objectContaining({
name: 'Root',
path: '/'
})
);
});
it('should parse the route', () => {
component.currentFolderPath = '/some/path';
expect(component.route.length).toBe(3);
expect(component.route).toEqual(
jasmine.objectContaining([
{ name: 'Root', path: '/' },
{ name: 'some', path: '/some' },
{ name: 'path', path: '/some/path' }
])
);
});
it('should prevent default click behavior', () => {
let event = jasmine.createSpyObj('event', ['preventDefault']);
component.onRoutePathClick(null, event);
@ -75,10 +40,9 @@ describe('DocumentListBreadcrumb', () => {
});
it('should emit navigation event', (done) => {
let node = <PathNode> { name: 'name', path: '/path' };
let node = <PathElementEntity> { id: '-id-', name: 'name' };
component.navigate.subscribe(val => {
expect(val.value.name).toBe(node.name);
expect(val.value.path).toBe(node.path);
expect(val.value).toBe(node);
done();
});
@ -87,39 +51,16 @@ describe('DocumentListBreadcrumb', () => {
it('should update document list on click', (done) => {
let documentList = new DocumentList(null, null, null);
spyOn(documentList, 'loadFolderByPath').and.returnValue(Promise.resolve());
spyOn(documentList, 'loadFolderByNodeId').and.stub();
let node = <PathNode> { name: 'name', path: '/path' };
let node = <PathElementEntity> { id: '-id-', name: 'name' };
component.target = documentList;
component.onRoutePathClick(node, null);
setTimeout(() => {
expect(documentList.currentFolderPath).toBe(node.path);
expect(documentList.loadFolderByNodeId).toHaveBeenCalledWith(node.id);
done();
}, 0);
});
it('should do nothing for same path', () => {
let called = 0;
component.pathChanged.subscribe(() => called++);
component.currentFolderPath = '/';
component.currentFolderPath = '/';
expect(called).toBe(0);
});
it('should emit path changed event', (done) => {
let path = '/some/path';
component.pathChanged.subscribe(e => {
expect(e.value).toBe(path);
expect(e.route).toBe(component.route);
done();
});
component.currentFolderPath = path;
});
});

View File

@ -15,12 +15,8 @@
* limitations under the License.
*/
import {
Component,
Input,
Output,
EventEmitter
} from '@angular/core';
import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { MinimalNodeEntryEntity, PathElementEntity } from 'alfresco-js-api';
import { DocumentList } from '../document-list';
@Component({
@ -29,95 +25,48 @@ import { DocumentList } from '../document-list';
templateUrl: './breadcrumb.component.html',
styleUrls: ['./breadcrumb.component.css']
})
export class DocumentListBreadcrumb {
private _currentFolderPath: string = '/';
export class DocumentListBreadcrumb implements OnChanges {
@Input()
set currentFolderPath(val: string) {
if (this._currentFolderPath !== val) {
if (val) {
this._currentFolderPath = val;
this.route = this.parsePath(val);
} else {
this._currentFolderPath = this.rootFolder.path;
this.route = [ this.rootFolder ];
}
this.pathChanged.emit({
value: this._currentFolderPath,
route: this.route
});
}
}
get currentFolderPath(): string {
return this._currentFolderPath;
}
folderNode: MinimalNodeEntryEntity;
@Input()
target: DocumentList;
private rootFolder: PathNode = {
name: 'Root',
path: '/'
};
route: PathNode[] = [ this.rootFolder ];
route: PathElementEntity[] = [];
@Output()
navigate: EventEmitter<any> = new EventEmitter();
@Output()
pathChanged: EventEmitter<any> = new EventEmitter();
ngOnChanges(changes: SimpleChanges) {
if (changes['folderNode']) {
onRoutePathClick(route: PathNode, e?: Event) {
let node: MinimalNodeEntryEntity = changes['folderNode'].currentValue;
if (node) {
// see https://github.com/Alfresco/alfresco-js-api/issues/139
let route = <PathElementEntity[]> (node.path.elements || []);
route.push(<PathElementEntity> {
id: node.id,
name: node.name
});
this.route = route;
}
}
}
onRoutePathClick(route: PathElementEntity, e?: Event) {
if (e) {
e.preventDefault();
}
if (route) {
this.navigate.emit({
value: {
name: route.name,
path: route.path
}
value: route
});
this.currentFolderPath = route.path;
if (this.target) {
this.target.currentFolderPath = route.path;
this.target.loadFolder();
this.target.loadFolderByNodeId(route.id);
}
}
}
private parsePath(path: string): PathNode[] {
let parts = path.split('/').filter(val => val ? true : false);
let result = [
this.rootFolder
];
let parentPath: string = this.rootFolder.path;
for (let i = 0; i < parts.length; i++) {
if (!parentPath.endsWith('/')) {
parentPath += '/';
}
parentPath += parts[i];
result.push({
name: parts[i],
path: parentPath
});
}
return result;
};
}
export interface PathNode {
name: string;
path: string;
}

View File

@ -1,5 +1,6 @@
<alfresco-document-menu-action *ngIf="creationMenuActions"
[currentFolderPath]="currentFolderPath"
<alfresco-document-menu-action
*ngIf="creationMenuActions"
[folderId]="currentFolderId"
(success)="onActionMenuSuccess($event)"
(error)="onActionMenuError($event)">
</alfresco-document-menu-action>

View File

@ -48,14 +48,6 @@ describe('DocumentList', () => {
window['componentHandler'] = componentHandler;
});
it('should update root folder ID', () => {
let adapter = documentList.data;
expect(adapter.rootFolderId).toBe(adapter.DEFAULT_ROOT_ID);
documentList.rootFolderId = '-shared-';
expect(adapter.rootFolderId).toBe('-shared-');
});
it('should setup default columns', () => {
spyOn(documentList, 'setupDefaultColumns').and.callThrough();
@ -158,92 +150,43 @@ describe('DocumentList', () => {
});
it('should display folder content on click', () => {
let path = '/';
let node = new FolderNode('<display name>');
spyOn(documentList, 'getNodePath').and.returnValue(path);
spyOn(documentList, 'loadFolderByPath').and.returnValue(Promise.resolve(true));
spyOn(documentList, 'loadFolder').and.returnValue(Promise.resolve(true));
documentList.navigationMode = DocumentList.SINGLE_CLICK_NAVIGATION;
documentList.onNodeClick(node);
expect(documentList.currentFolderPath).toBe(path);
expect(documentList.loadFolder).toHaveBeenCalled();
});
it('should not display folder content when no target node provided', () => {
expect(documentList.navigate).toBe(true);
spyOn(documentList, 'loadFolderByPath').and.stub();
spyOn(documentList, 'loadFolder').and.stub();
documentList.onNodeClick(null);
expect(documentList.loadFolderByPath).not.toHaveBeenCalled();
expect(documentList.loadFolder).not.toHaveBeenCalled();
});
it('should display folder content only on folder node click', () => {
expect(documentList.navigate).toBe(true);
spyOn(documentList, 'loadFolderByPath').and.stub();
spyOn(documentList, 'loadFolder').and.stub();
let node = new FileNode();
documentList.onNodeClick(node);
expect(documentList.loadFolderByPath).not.toHaveBeenCalled();
expect(documentList.loadFolder).not.toHaveBeenCalled();
});
it('should not display folder content on click when navigation is off', () => {
spyOn(documentList, 'loadFolderByPath').and.stub();
spyOn(documentList, 'loadFolder').and.stub();
let node = new FolderNode('<display name>');
documentList.navigate = false;
documentList.onNodeClick(node);
expect(documentList.loadFolderByPath).not.toHaveBeenCalled();
});
it('should require node to get path', () => {
expect(documentList.getNodePath(null)).toBe(null);
});
it('should display folder content for new folder path', () => {
spyOn(documentList, 'loadFolderByPath').and.returnValue(Promise.resolve());
let newPath = '/some/new/path';
documentList.currentFolderPath = newPath;
documentList.ngOnChanges({currentFolderPath: new SimpleChange(null, newPath)});
expect(documentList.loadFolderByPath).toHaveBeenCalledWith(newPath);
});
it('should reset to default path', () => {
spyOn(documentList, 'loadFolderByPath').and.returnValue(Promise.resolve());
documentList.currentFolderPath = null;
documentList.ngOnChanges({currentFolderPath: new SimpleChange('', null)});
expect(documentList.currentFolderPath).toBe(documentList.DEFAULT_FOLDER_PATH);
expect(documentList.loadFolderByPath).toHaveBeenCalledWith(documentList.DEFAULT_FOLDER_PATH);
});
it('should emit folder changed event', (done) => {
spyOn(documentList, 'loadFolderByPath').and.returnValue(Promise.resolve());
documentList.folderChange.subscribe(e => {
done();
});
let newPath = '/some/new/path';
documentList.currentFolderPath = newPath;
documentList.ngOnChanges({currentFolderPath: new SimpleChange(null, newPath)});
});
it('should emit folder changed event with folder details', (done) => {
spyOn(documentList, 'loadFolderByPath').and.returnValue(Promise.resolve());
let path = '/path';
documentList.folderChange.subscribe(e => {
expect(e.path).toBe(path);
done();
});
documentList.currentFolderPath = path;
documentList.ngOnChanges({currentFolderPath: new SimpleChange(null, path)});
expect(documentList.loadFolder).not.toHaveBeenCalled();
});
it('should execute context action on callback', () => {
@ -264,7 +207,7 @@ describe('DocumentList', () => {
});
it('should subscribe to context action handler', () => {
spyOn(documentList, 'loadFolderByPath').and.returnValue(Promise.resolve(true));
spyOn(documentList, 'loadFolder').and.stub();
spyOn(documentList, 'contextActionCallback').and.stub();
let value = {};
documentList.ngOnInit();
@ -338,8 +281,6 @@ describe('DocumentList', () => {
});
it('should perform navigation for folder node only', () => {
spyOn(documentList, 'getNodePath').and.returnValue('/path');
let folder = new FolderNode();
let file = new FileNode();
@ -348,15 +289,11 @@ describe('DocumentList', () => {
expect(documentList.performNavigation(null)).toBeFalsy();
});
/*
it('should not get node path for null node', () => {
expect(documentList.getNodePath(null)).toBeNull();
});
it('should trim company home from node path', () => {
let file = new FileNode('file.txt');
file.entry.path.name = '/Company Home/folder1';
expect(documentList.getNodePath(file)).toBe('/folder1/file.txt');
});
*/
it('should require valid node for file preview', () => {
let file = new FileNode();
@ -389,18 +326,9 @@ describe('DocumentList', () => {
});
it('should display folder content on reload', () => {
spyOn(documentList, 'loadFolderByPath').and.callThrough();
spyOn(documentList, 'loadFolder').and.callThrough();
documentList.reload();
expect(documentList.loadFolderByPath).toHaveBeenCalled();
});
it('should require path to display folder content', () => {
spyOn(documentListService, 'getFolder').and.callThrough();
documentList.loadFolderByPath(null);
documentList.loadFolderByPath('');
expect(documentListService.getFolder).not.toHaveBeenCalled();
expect(documentList.loadFolder).toHaveBeenCalled();
});
it('should require node to resolve context menu actions', () => {
@ -461,21 +389,6 @@ describe('DocumentList', () => {
expect(documentList.getNodeActions).toHaveBeenCalled();
});
it('should require current folder path to reload', () => {
// Redefine 'currentFolderPath' to disable native setter validation
Object.defineProperty(documentList, 'currentFolderPath', {
value: null
});
expect(documentList.currentFolderPath).toBeNull();
spyOn(documentList, 'loadFolderByPath').and.stub();
documentList.reload();
expect(documentList.loadFolderByPath).not.toHaveBeenCalled();
});
it('should enforce single-click on mobile browser', () => {
spyOn(documentList, 'isMobile').and.returnValue(true);
documentList.navigationMode = DocumentList.DOUBLE_CLICK_NAVIGATION;
@ -484,13 +397,13 @@ describe('DocumentList', () => {
expect(documentList.navigationMode).toBe(DocumentList.SINGLE_CLICK_NAVIGATION);
});
it('should emit error on wrong path', (done) => {
it('should emit error on wrong folder id', (done) => {
let raised = false;
documentList.error.subscribe(err => raised = true);
spyOn(documentList, 'loadFolderByPath').and.returnValue(Promise.reject(false));
spyOn(documentListService, 'getFolderNode').and.returnValue(Promise.reject(false));
documentList.currentFolderPath = 'wrong-path';
documentList.ngOnChanges({currentFolderPath: new SimpleChange(null, documentList.currentFolderPath)});
documentList.currentFolderId = 'wrong-id';
documentList.ngOnChanges({currentFolderId: new SimpleChange(null, documentList.currentFolderId)});
setTimeout(() => {
expect(raised).toBeTruthy();
done();
@ -512,26 +425,6 @@ describe('DocumentList', () => {
expect(documentList.isEmptyTemplateDefined()).toBeFalsy();
});
it('should set root folder ID for underlying adapter', () => {
documentList.rootFolderId = 'test';
expect(documentList.data.rootFolderId).toBe('test');
});
it('should set default root folder ID for underlying adapter', () => {
documentList.rootFolderId = null;
expect(documentList.data.rootFolderId).toBe(documentList.data.DEFAULT_ROOT_ID);
});
it('should fetch root folder ID from underlying adapter', () => {
documentList.data.rootFolderId = 'test';
expect(documentList.rootFolderId).toBe('test');
});
it('should not fetch root folder ID when adapter missing', () => {
documentList.data = null;
expect(documentList.rootFolderId).toBeNull();
});
it('should set row filter for underlying adapter', () => {
let filter = <RowFilter> {};
spyOn(documentList.data, 'setFilter').and.callThrough();
@ -568,48 +461,10 @@ describe('DocumentList', () => {
expect(documentList.onNodeDblClick).toHaveBeenCalledWith(node);
});
describe('navigate by folder ID', () => {
it('should load folder by ID on init', () => {
documentList.currentFolderId = '1d26e465-dea3-42f3-b415-faa8364b9692';
let loadbyIdSpy: jasmine.Spy = spyOn(documentList.data, 'loadById').and.returnValue(Promise.resolve());
spyOn(documentList.data, 'loadById').and.returnValue(Promise.resolve());
documentList.ngOnInit();
expect(loadbyIdSpy).toHaveBeenCalled();
expect(documentList.currentFolderPath).toBe('/');
});
it('should load folder by ID on changes', () => {
let newNodeId = '1d26e465-dea3-42f3-b415-faa8364b9692';
documentList.ngOnChanges({currentFolderId: new SimpleChange(null, newNodeId)});
let loadbyPathSpy: jasmine.Spy = spyOn(documentList.data, 'loadPath').and.returnValue(Promise.resolve());
documentList.ngOnInit();
expect(loadbyPathSpy).toHaveBeenCalled();
expect(documentList.currentFolderPath).toBe('/');
});
});
describe('configure root folder', () => {
it('should re-load folder when rootFolderId changed', () => {
let newRootFolder = '-new-';
documentList.ngOnChanges({rootFolderId: new SimpleChange(null, newRootFolder)});
let loadbyPathSpy: jasmine.Spy = spyOn(documentList.data, 'loadPath').and.returnValue(Promise.resolve());
documentList.ngOnInit();
expect(loadbyPathSpy).toHaveBeenCalled();
expect(documentList.currentFolderPath).toBe('/');
});
expect(documentList.data.loadById).toHaveBeenCalled();
});
});

View File

@ -15,32 +15,14 @@
* limitations under the License.
*/
import {
Component,
OnInit,
Input,
OnChanges,
Output,
SimpleChanges,
EventEmitter,
AfterContentInit,
TemplateRef,
NgZone,
ViewChild,
HostListener
} from '@angular/core';
import { Component, OnInit, Input, OnChanges, Output, SimpleChanges, EventEmitter, AfterContentInit, TemplateRef, NgZone, ViewChild, HostListener } from '@angular/core';
import { Subject } from 'rxjs/Rx';
import { MinimalNodeEntity } from 'alfresco-js-api';
import { MinimalNodeEntity, MinimalNodeEntryEntity } from 'alfresco-js-api';
import { AlfrescoTranslateService } from 'ng2-alfresco-core';
import { DataRowEvent, DataTableComponent, ObjectDataColumn } from 'ng2-alfresco-datatable';
import { DocumentListService } from './../services/document-list.service';
import { ContentActionModel } from './../models/content-action.model';
import {
ShareDataTableAdapter,
ShareDataRow,
RowFilter,
ImageResolver
} from './../data/share-datatable-adapter';
import { ShareDataTableAdapter, ShareDataRow, RowFilter, ImageResolver } from './../data/share-datatable-adapter';
declare var module: any;
@ -56,28 +38,11 @@ export class DocumentList implements OnInit, OnChanges, AfterContentInit {
static DOUBLE_CLICK_NAVIGATION: string = 'dblclick';
static DEFAULT_PAGE_SIZE: number = 20;
DEFAULT_FOLDER_PATH: string = '/';
baseComponentPath = module.id.replace('/components/document-list.js', '');
@Input()
fallbackThubnail: string = this.baseComponentPath + '/../assets/images/ft_ic_miscellaneous.svg';
@Input()
set rootFolderId(value: string) {
this.data.rootFolderId = value || this.data.DEFAULT_ROOT_ID;
}
@Input()
currentFolderId: string = null;
get rootFolderId(): string {
if (this.data) {
return this.data.rootFolderId;
}
return null;
}
@Input()
navigate: boolean = true;
@ -137,16 +102,12 @@ export class DocumentList implements OnInit, OnChanges, AfterContentInit {
@ViewChild(DataTableComponent)
dataTable: DataTableComponent;
private _path = this.DEFAULT_FOLDER_PATH;
// The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
@Input()
currentFolderId: string = null;
@Input()
set currentFolderPath(value: string) {
this._path = value;
}
get currentFolderPath(): string {
return this._path;
}
folderNode: MinimalNodeEntryEntity = null;
errorMessage;
actions: ContentActionModel[] = [];
@ -209,36 +170,10 @@ export class DocumentList implements OnInit, OnChanges, AfterContentInit {
}
ngOnChanges(changes: SimpleChanges) {
if (changes['currentFolderId'] && changes['currentFolderId'].currentValue) {
let folderId = changes['currentFolderId'].currentValue;
this.loadFolderById(folderId)
.then(() => {
this._path = null;
})
.catch(err => {
this.error.emit(err);
});
} else if (changes['currentFolderPath']) {
const path = changes['currentFolderPath'].currentValue || this.DEFAULT_FOLDER_PATH;
this.currentFolderPath = path;
this.loadFolderByPath(path)
.then(() => {
this._path = path;
this.folderChange.emit({ path: path });
})
.catch(err => {
this.error.emit(err);
});
} else if (changes['rootFolderId']) {
// this.currentFolderPath = this.DEFAULT_FOLDER_PATH;
this.loadFolderByPath(this.currentFolderPath)
.then(() => {
this._path = this.currentFolderPath;
this.folderChange.emit({ path: this.currentFolderPath });
})
.catch(err => {
this.error.emit(err);
});
if (changes['folderNode'] && changes['folderNode'].currentValue) {
this.loadFolder();
} else if (changes['currentFolderId'] && changes['currentFolderId'].currentValue) {
this.loadFolderByNodeId(changes['currentFolderId'].currentValue);
}
}
@ -289,10 +224,12 @@ export class DocumentList implements OnInit, OnChanges, AfterContentInit {
performNavigation(node: MinimalNodeEntity): boolean {
if (node && node.entry && node.entry.isFolder) {
this.currentFolderPath = this.getNodePath(node);
this.currentFolderId = null;
this.currentFolderId = node.entry.id;
this.folderNode = node.entry;
this.loadFolder();
this.folderChange.emit({ path: this.currentFolderPath });
this.folderChange.emit({ node: node.entry });
return true;
}
return false;
@ -309,10 +246,6 @@ export class DocumentList implements OnInit, OnChanges, AfterContentInit {
}
}
loadFolderByPath(path: string): Promise<any> {
return this.data.loadPath(path);
}
loadFolderById(id: string): Promise<any> {
return this.data.loadById(id);
}
@ -323,31 +256,22 @@ export class DocumentList implements OnInit, OnChanges, AfterContentInit {
});
}
public loadFolder() {
if (this.currentFolderId) {
this.loadFolderById(this.currentFolderId)
.catch(err => {
this.error.emit(err);
});
} else if (this.currentFolderPath) {
this.loadFolderByPath(this.currentFolderPath)
.catch(err => {
this.error.emit(err);
});
loadFolder() {
let nodeId = this.folderNode ? this.folderNode.id : this.currentFolderId;
if (nodeId) {
this.loadFolderById(nodeId)
.catch(err => this.error.emit(err));
}
}
/**
* Gets a path for a given node.
* @param node
* @returns {string}
*/
getNodePath(node: MinimalNodeEntity): string {
if (node) {
let pathWithCompanyHome = node.entry.path.name;
return pathWithCompanyHome.replace('/Company Home', '') + '/' + node.entry.name;
}
return null;
// gets folder node and its content
loadFolderByNodeId(nodeId: string) {
this.documentListService.getFolderNode(nodeId).then(node => {
this.folderNode = node;
this.currentFolderId = node.id;
this.data.loadById(node.id).catch(err => this.error.emit(err));
})
.catch(err => this.error.emit(err));
}
/**

View File

@ -15,16 +15,10 @@
* limitations under the License.
*/
import {
Component,
OnInit,
Input,
Output,
EventEmitter,
ViewChild
} from '@angular/core';
import { DocumentListService } from './../services/document-list.service';
import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { AlfrescoTranslateService } from 'ng2-alfresco-core';
import { MinimalNodeEntity } from 'alfresco-js-api';
import { DocumentListService } from './../services/document-list.service';
import { ContentActionModel } from './../models/content-action.model';
declare let dialogPolyfill: any;
@ -37,10 +31,10 @@ const ERROR_FOLDER_ALREADY_EXIST = 409;
styleUrls: ['./document-menu-action.css'],
templateUrl: './document-menu-action.html'
})
export class DocumentMenuAction implements OnInit {
export class DocumentMenuAction {
@Input()
currentFolderPath: string;
folderId: string;
@Output()
success = new EventEmitter();
@ -66,16 +60,14 @@ export class DocumentMenuAction implements OnInit {
}
}
ngOnInit() {}
public createFolder(name: string) {
this.cancel();
this.documentListService.createFolder(name, this.currentFolderPath)
this.documentListService.createFolder(name, this.folderId)
.subscribe(
res => {
let relativeDir = this.currentFolderPath;
(res: MinimalNodeEntity) => {
this.folderName = '';
this.success.emit({value: relativeDir});
console.log(res.entry);
this.success.emit({node: res.entry});
},
error => {
let errorMessagePlaceholder = this.getErrorMessage(error.response);

View File

@ -18,7 +18,7 @@
import { DataColumn, DataRow, DataSorting } from 'ng2-alfresco-datatable';
import { DocumentListServiceMock } from './../assets/document-list.service.mock';
import { ShareDataTableAdapter, ShareDataRow } from './share-datatable-adapter';
import { FileNode, FolderNode, PageNode } from './../assets/document-library.model.mock';
import { FileNode, FolderNode/*, PageNode*/ } from './../assets/document-library.model.mock';
describe('ShareDataTableAdapter', () => {
@ -102,6 +102,7 @@ describe('ShareDataTableAdapter', () => {
expect(check).toThrowError(adapter.ERR_COL_NOT_FOUND);
});
/*
it('should require path to load data', () => {
spyOn(documentListService, 'getFolder').and.callThrough();
@ -110,7 +111,9 @@ describe('ShareDataTableAdapter', () => {
expect(documentListService.getFolder).not.toHaveBeenCalled();
});
*/
/*
it('should load data for path', () => {
let folder = new FolderNode();
let path = '/some/path';
@ -128,6 +131,7 @@ describe('ShareDataTableAdapter', () => {
expect(rows.length).toBe(1);
expect((<ShareDataRow>rows[0]).node).toBe(folder);
});
*/
it('should covert cell value to formatted date', () => {
let rawValue = new Date(2015, 6, 15, 21, 43, 11); // Wed Jul 15 2015 21:43:11 GMT+0100 (BST);
@ -322,6 +326,7 @@ describe('ShareDataTableAdapter', () => {
expect(value).toBeNull();
});
/*
it('should log load error', (done) => {
let error = 'My Error';
documentListService.getFolderReject = true;
@ -336,6 +341,7 @@ describe('ShareDataTableAdapter', () => {
done();
});
});
*/
it('should generate file icon path based on mime type', () => {
let fileName = 'custom-icon.svg';
@ -399,6 +405,7 @@ describe('ShareDataTableAdapter', () => {
expect((<ShareDataRow> rows[1]).node).toBe(file1);
});
/*
it('should preserve sorting on navigation', () => {
let file1 = new FileNode('file1');
let file2 = new FileNode('file2');
@ -426,6 +433,7 @@ describe('ShareDataTableAdapter', () => {
expect((<ShareDataRow> sorted[0]).node).toBe(file3);
expect((<ShareDataRow> sorted[1]).node).toBe(file4);
});
*/
});
describe('ShareDataRow', () => {

View File

@ -17,11 +17,7 @@
import { DatePipe } from '@angular/common';
import { ObjectUtils } from 'ng2-alfresco-core';
import {
PaginationProvider, DataLoadedEventEmitter,
DataTableAdapter,
DataRow, DataColumn, DataSorting
} from 'ng2-alfresco-datatable';
import { PaginationProvider, DataLoadedEventEmitter, DataTableAdapter, DataRow, DataColumn, DataSorting } from 'ng2-alfresco-datatable';
import { NodePaging, NodeMinimalEntry } from './../models/document-library.model';
import { DocumentListService } from './../services/document-list.service';
@ -31,7 +27,6 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
ERR_ROW_NOT_FOUND: string = 'Row not found';
ERR_COL_NOT_FOUND: string = 'Column not found';
DEFAULT_ROOT_ID: string = '-root-';
DEFAULT_DATE_FORMAT: string = 'medium';
DEFAULT_PAGE_SIZE: number = 20;
MIN_PAGE_SIZE: number = 5;
@ -40,7 +35,7 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
private rows: DataRow[];
private columns: DataColumn[];
private page: NodePaging;
private currentPath: string;
private folderNodeId: string;
private filter: RowFilter;
private imageResolver: ImageResolver;
@ -53,7 +48,6 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
thumbnails: boolean = false;
dataLoaded: DataLoadedEventEmitter;
rootFolderId: string = this.DEFAULT_ROOT_ID;
constructor(private documentListService: DocumentListService,
private basePath: string,
@ -83,7 +77,7 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
set skipCount(value: number) {
if (value !== this._skipCount) {
this._skipCount = value > 0 ? value : 0;
this.loadPath(this.currentPath);
this.loadById(this.folderNodeId);
}
}
@ -94,7 +88,7 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
set maxItems(value: number) {
if (value !== this._maxItems) {
this._maxItems = value > this.MIN_PAGE_SIZE ? value : this.MIN_PAGE_SIZE;
this.loadPath(this.currentPath);
this.loadById(this.folderNodeId);
}
}
@ -203,31 +197,6 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
this.setSorting(sorting);
}
loadPath(path: string): Promise<any> {
return new Promise((resolve, reject) => {
if (path && this.documentListService) {
this.documentListService
.getFolder(path, {
maxItems: this._maxItems,
skipCount: this._skipCount,
rootFolderId: this.rootFolderId
})
.subscribe(val => {
this.currentPath = path;
this.loadPage(<NodePaging>val);
this.dataLoaded.emit(null);
resolve(true);
},
error => {
reject(error);
});
} else {
resolve(false);
}
});
}
loadById(id: string): Promise<any> {
return new Promise((resolve, reject) => {
if (id && this.documentListService) {
@ -238,6 +207,7 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
rootFolderId: id
})
.subscribe(val => {
this.folderNodeId = id;
this.loadPage(<NodePaging>val);
this.dataLoaded.emit(null);
resolve(true);
@ -255,8 +225,8 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
setFilter(filter: RowFilter) {
this.filter = filter;
if (this.filter && this.currentPath) {
this.loadPath(this.currentPath);
if (this.filter && this.folderNodeId) {
this.loadById(this.folderNodeId);
}
}

View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { AlfrescoContentService } from 'ng2-alfresco-core';
import { ContentService } from 'ng2-alfresco-core';
import { ContentActionHandler } from '../models/content-action.model';
import { DocumentActionsService } from './document-actions.service';
import { DocumentListServiceMock } from '../assets/document-list.service.mock';
@ -26,11 +26,11 @@ describe('DocumentActionsService', () => {
let service: DocumentActionsService;
let documentListService: DocumentListService;
let contentService: AlfrescoContentService;
let contentService: ContentService;
beforeEach(() => {
documentListService = new DocumentListServiceMock();
contentService = new AlfrescoContentService(null, null);
contentService = new ContentService(null, null);
service = new DocumentActionsService(documentListService, contentService);
});

View File

@ -18,16 +18,14 @@
import { Injectable } from '@angular/core';
import { ContentActionHandler } from '../models/content-action.model';
import { DocumentListService } from './document-list.service';
import { AlfrescoContentService } from 'ng2-alfresco-core';
import { ContentService } from 'ng2-alfresco-core';
@Injectable()
export class DocumentActionsService {
private handlers: { [id: string]: ContentActionHandler; } = {};
constructor(
private documentListService?: DocumentListService,
private contentService?: AlfrescoContentService
) {
constructor(private documentListService?: DocumentListService,
private contentService?: ContentService) {
this.setupActionHandlers();
}

View File

@ -18,7 +18,7 @@
import { Injectable } from '@angular/core';
import { Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { NodePaging, MinimalNodeEntity } from 'alfresco-js-api';
import { NodePaging, MinimalNodeEntity, MinimalNodeEntryEntity } from 'alfresco-js-api';
import { AuthService, ContentService, AlfrescoApiService } from 'ng2-alfresco-core';
@Injectable()
@ -96,15 +96,12 @@ export class DocumentListService {
/**
* Create a new folder in the path.
* @param name
* @param path
* @param name Folder name
* @param parentId Parent folder ID
* @returns {any}
*/
createFolder(name: string, path: string): Observable<any> {
return Observable.fromPromise(this.apiService.getInstance().nodes.createFolder(name, path))
.map(res => {
return res;
})
createFolder(name: string, parentId: string): Observable<MinimalNodeEntity> {
return Observable.fromPromise(this.apiService.getInstance().nodes.createFolder(name, '/', parentId))
.catch(this.handleError);
}
@ -121,6 +118,17 @@ export class DocumentListService {
.catch(this.handleError);
}
getFolderNode(nodeId: string): Promise<MinimalNodeEntryEntity> {
let opts: any = {
includeSource: true,
include: ['path', 'properties']
};
// see https://github.com/Alfresco/alfresco-js-api/issues/140
let nodes: any = this.apiService.getInstance().nodes;
return nodes.getNodeInfo(nodeId, opts);
}
/**
* Get thumbnail URL for the given document node.
* @param node Node to get URL for.