mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
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:
committed by
Eugenio Romano
parent
132e6eac96
commit
9066ce49e0
@@ -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
|
||||||
|
@@ -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 ],
|
||||||
|
@@ -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
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
@@ -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();
|
||||||
|
|
||||||
|
@@ -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';
|
||||||
|
|
||||||
|
@@ -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);
|
||||||
|
@@ -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> {
|
||||||
|
Reference in New Issue
Block a user