document-list improvements (#1169)

* #1167 document-list improvements

- allow setting custom root path
- document-list module now re-exports datatable module (no need
importing it separately if document-list is already used)
- documentation updates and fixes

* readme updates and unit test
This commit is contained in:
Denys Vuika
2016-11-29 12:03:24 +00:00
committed by Eugenio Romano
parent 132e6eac96
commit 9066ce49e0
7 changed files with 43 additions and 30 deletions

View File

@@ -114,7 +114,6 @@ import { NgModule, Component, ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule } from 'ng2-alfresco-core'; import { CoreModule } from 'ng2-alfresco-core';
import { DataTableModule } from 'ng2-alfresco-datatable';
import { DocumentListModule, DocumentList } from 'ng2-alfresco-documentlist'; import { DocumentListModule, DocumentList } from 'ng2-alfresco-documentlist';
import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core'; import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
@@ -133,7 +132,8 @@ class DocumentListDemo {
@ViewChild(DocumentList) @ViewChild(DocumentList)
documentList: DocumentList; documentList: DocumentList;
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) { constructor(private authService: AlfrescoAuthenticationService,
private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080'; settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe( this.authService.login('admin', 'admin').subscribe(
@@ -151,7 +151,6 @@ class DocumentListDemo {
imports: [ imports: [
BrowserModule, BrowserModule,
CoreModule.forRoot(), CoreModule.forRoot(),
DataTableModule,
DocumentListModule.forRoot() DocumentListModule.forRoot()
], ],
declarations: [DocumentListDemo], declarations: [DocumentListDemo],
@@ -169,6 +168,7 @@ platformBrowserDynamic().bootstrapModule(AppModule);
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| `rootPath` | string | -root- | Root node path, i.e. `-root-`, `-shared-`, `-my-`, etc. |
| `navigate` | boolean | true | Toggles navigation to folder content or file preview | | `navigate` | boolean | true | Toggles navigation to folder content or file preview |
| `navigationMode` | string (click\|dblclick) | dblclick | User interaction for folder navigation 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 | | `thumbnails` | boolean | false | Show document thumbnails rather than icons |
@@ -282,7 +282,7 @@ HTML attributes:
| `sr-title` | string | | Screen reader title, used only when `title` is empty | | `sr-title` | string | | Screen reader title, used only when `title` is empty |
| `key` | string | | Column source key, example: `createdByUser.displayName` | | `key` | string | | Column source key, example: `createdByUser.displayName` |
| `sortable` | boolean | false | Toggle sorting ability via column header clicks | | `sortable` | boolean | false | Toggle sorting ability via column header clicks |
| `class`| string | | CSS class list, example: `full-width ellipsis-cell` | | `class` | string | | CSS class list, example: `full-width ellipsis-cell` |
| `type` | string | text | Column type, text\|date\|number | | `type` | string | text | Column type, text\|date\|number |
| `format` | string | | Value format pattern | | `format` | string | | Value format pattern |
@@ -414,24 +414,12 @@ into context menu items like shown below:
Enabling context menu is very simple: Enabling context menu is very simple:
```ts ```ts
import {
CONTEXT_MENU_DIRECTIVES,
CONTEXT_MENU_PROVIDERS
} from 'ng2-alfresco-core';
import {
DOCUMENT_LIST_DIRECTIVES,
DOCUMENT_LIST_PROVIDERS
} from 'ng2-alfresco-documentlist';
@Component({ @Component({
selector: 'my-view', selector: 'my-view',
template: ` template: `
<alfresco-document-list>...</alfresco-document-list> <alfresco-document-list>...</alfresco-document-list>
<context-menu-holder></context-menu-holder> <context-menu-holder></context-menu-holder>
`, `
directives: [DOCUMENT_LIST_DIRECTIVES, CONTEXT_MENU_DIRECTIVES],
providers: [DOCUMENT_LIST_PROVIDERS, CONTEXT_MENU_PROVIDERS]
}) })
export class MyView { export class MyView {
} }
@@ -464,10 +452,10 @@ DocumentList emits the following events:
| Name | Description | | Name | Description |
| --- | --- | | --- | --- |
| nodeClick | emitted when user clicks a list node | | `nodeClick` | emitted when user clicks a list node |
| nodeDblClick | emitted when user double-clicks list node | | `nodeDblClick` | emitted when user double-clicks list node |
| folderChange | emitted once current display folder has changed | | `folderChange` | emitted once current display folder has changed |
| preview | emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration | | `preview` | emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration |
## Advanced usage and customization ## Advanced usage and customization
@@ -691,9 +679,7 @@ You register custom handler called `my-handler` that will be executing `myDocume
function each time upon being invoked. function each time upon being invoked.
```ts ```ts
import { import { DocumentActionsService } from 'ng2-alfresco-documentlist';
DocumentActionsService
} from 'ng2-alfresco-documentlist';
export class MyView { export class MyView {
@@ -745,7 +731,7 @@ npm run build
### Build the files and keep watching for changes ### Build the files and keep watching for changes
```sh ```sh
$ npm run build:w npm run build:w
``` ```
## Running unit tests ## Running unit tests

View File

@@ -19,7 +19,6 @@ import { NgModule, Component, OnInit, ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule } from 'ng2-alfresco-core'; import { CoreModule } from 'ng2-alfresco-core';
import { DataTableModule } from 'ng2-alfresco-datatable';
import { DocumentListModule, DocumentList } from 'ng2-alfresco-documentlist'; import { DocumentListModule, DocumentList } from 'ng2-alfresco-documentlist';
import { import {
@@ -217,7 +216,6 @@ class DocumentListDemo implements OnInit {
imports: [ imports: [
BrowserModule, BrowserModule,
CoreModule.forRoot(), CoreModule.forRoot(),
DataTableModule,
DocumentListModule.forRoot() DocumentListModule.forRoot()
], ],
declarations: [ DocumentListDemo ], declarations: [ DocumentListDemo ],

View File

@@ -80,6 +80,7 @@ export const DOCUMENT_LIST_PROVIDERS: any[] = [
...DOCUMENT_LIST_PROVIDERS ...DOCUMENT_LIST_PROVIDERS
], ],
exports: [ exports: [
DataTableModule,
...DOCUMENT_LIST_DIRECTIVES ...DOCUMENT_LIST_DIRECTIVES
] ]
}) })

View File

@@ -47,6 +47,14 @@ describe('DocumentList', () => {
window['componentHandler'] = componentHandler; window['componentHandler'] = componentHandler;
}); });
it('should update root path', () => {
let adapter = documentList.data;
expect(adapter.rootPath).toBe(adapter.DEFAULT_ROOT_PATH);
documentList.rootPath = '-shared-';
expect(adapter.rootPath).toBe('-shared-');
});
it('should setup default columns', () => { it('should setup default columns', () => {
spyOn(documentList, 'setupDefaultColumns').and.callThrough(); spyOn(documentList, 'setupDefaultColumns').and.callThrough();

View File

@@ -56,6 +56,18 @@ export class DocumentList implements OnInit, AfterContentInit {
baseComponentPath = module.id.replace('/components/document-list.js', ''); baseComponentPath = module.id.replace('/components/document-list.js', '');
@Input()
set rootPath(value: string) {
this.data.rootPath = value || this.data.DEFAULT_ROOT_PATH;
}
get rootPath(): string {
if (this.data) {
return this.data.rootPath;
}
return null;
}
@Input() @Input()
fallbackThubnail: string = this.baseComponentPath + '/img/ft_ic_miscellaneous.svg'; fallbackThubnail: string = this.baseComponentPath + '/img/ft_ic_miscellaneous.svg';

View File

@@ -31,6 +31,7 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
ERR_ROW_NOT_FOUND: string = 'Row not found'; ERR_ROW_NOT_FOUND: string = 'Row not found';
ERR_COL_NOT_FOUND: string = 'Column not found'; ERR_COL_NOT_FOUND: string = 'Column not found';
DEFAULT_ROOT_PATH: string = '-root-';
DEFAULT_DATE_FORMAT: string = 'medium'; DEFAULT_DATE_FORMAT: string = 'medium';
DEFAULT_PAGE_SIZE: number = 20; DEFAULT_PAGE_SIZE: number = 20;
MIN_PAGE_SIZE: number = 5; MIN_PAGE_SIZE: number = 5;
@@ -52,6 +53,7 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
thumbnails: boolean = false; thumbnails: boolean = false;
dataLoaded: DataLoadedEventEmitter; dataLoaded: DataLoadedEventEmitter;
rootPath: string = this.DEFAULT_ROOT_PATH;
constructor(private documentListService: DocumentListService, constructor(private documentListService: DocumentListService,
private basePath: string, private basePath: string,
@@ -207,7 +209,8 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
this.documentListService this.documentListService
.getFolder(path, { .getFolder(path, {
maxItems: this._maxItems, maxItems: this._maxItems,
skipCount: this._skipCount skipCount: this._skipCount,
rootPath: this.rootPath
}) })
.subscribe(val => { .subscribe(val => {
this.loadPage(<NodePaging>val); this.loadPage(<NodePaging>val);

View File

@@ -63,7 +63,12 @@ export class DocumentListService {
} }
private getNodesPromise(folder: string, opts?: any): Promise<NodePaging> { private getNodesPromise(folder: string, opts?: any): Promise<NodePaging> {
let nodeId = '-root-'; let rootPath = '-root-';
if (opts && opts.rootPath) {
rootPath = opts.rootPath;
}
let params: any = { let params: any = {
relativePath: folder, relativePath: folder,
include: ['path', 'properties'] include: ['path', 'properties']
@@ -78,7 +83,7 @@ export class DocumentListService {
} }
} }
return this.apiService.getInstance().nodes.getNodeChildren(nodeId, params); return this.apiService.getInstance().nodes.getNodeChildren(rootPath, params);
} }
deleteNode(nodeId: string): Observable<any> { deleteNode(nodeId: string): Observable<any> {