-### Node
-To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
-
## Install
```sh
npm install --save ng2-alfresco-documentlist
```
+To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
+
+```sh
+node -v
+```
+
#### Dependencies
Add the following dependency to your index.html:
@@ -45,25 +48,25 @@ Add the following dependency to your index.html:
```
-The following component needs to be added to your systemjs.config:
+The following component needs to be added to your `systemjs.config.js` file:
-- ng2-translate
-- ng2-alfresco-core
-- ng2-alfresco-documentlist
+- [ng2-translate](https://github.com/ocombe/ng2-translate)
+- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
+- [ng2-alfresco-datatable](https://www.npmjs.com/package/ng2-alfresco-datatable)
-Please refer to the following example to have an idea of how your systemjs.config should look like :
+You can get more details in the
+[example implementation](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js).
-https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js
+#### Material Design Lite
-#### Style
-The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
+The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
design dependency to your project:
```sh
npm install --save material-design-icons material-design-lite
```
-Also make sure you include these dependencies in your .html page:
+Also make sure you include these dependencies in your `index.html` file:
```html
@@ -72,107 +75,31 @@ Also make sure you include these dependencies in your .html page:
```
-
## Basic usage
```html
+ #documentList
+ [currentFolderPath]="currentPath"
+ [contextMenuActions]="true"
+ [contentActions]="true"
+ [multiselect]="true"
+ (folderChange)="onFolderChanged($event)">
```
-Example of the component that declares document list and provides values for bindings:
-
-```ts
-import { Component, OnInit } from '@angular/core';
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { HTTP_PROVIDERS } from '@angular/http';
-
-import {
- ALFRESCO_CORE_PROVIDERS,
- AlfrescoSettingsService,
- AlfrescoAuthenticationService,
- AlfrescoPipeTranslate,
- AlfrescoTranslationService,
- CONTEXT_MENU_DIRECTIVES
-} from 'ng2-alfresco-core';
-
-import {
- DOCUMENT_LIST_DIRECTIVES,
- DOCUMENT_LIST_PROVIDERS,
- DocumentActionsService
-} from 'ng2-alfresco-documentlist';
-
-@Component({
- selector: 'alfresco-documentlist-demo',
- template: `
-
-
-
-
- `,
- styles: [':host > .container {padding: 10px}'],
- directives: [DOCUMENT_LIST_DIRECTIVES],
- providers: [DOCUMENT_LIST_PROVIDERS],
- pipes: [AlfrescoPipeTranslate]
-})
-class DocumentListDemo implements OnInit {
-
- authenticated: boolean;
-
- constructor(private authService: AlfrescoAuthenticationService,
- settings: AlfrescoSettingsService,
- translation: AlfrescoTranslationService,
- documentActions: DocumentActionsService) {
-
- settings.host = 'http://myalfrescoip';
- translation.addTranslationFolder();
- documentActions.setHandler('my-handler', this.myDocumentActionHandler.bind(this));
- }
-
- ngOnInit() {
- this.login();
- }
-
- myDocumentActionHandler(obj: any) {
- window.alert('my custom action handler');
- }
-
- myCustomAction1(event) {
- alert('Custom document action for ' + event.value.displayName);
- }
-
- myFolderAction1(event) {
- alert('Custom folder action for ' + event.value.displayName);
- }
-
- login() {
- this.authService.login('admin', 'admin').subscribe(token => {
- this.authenticated = true;
- });
- }
-}
-
-bootstrap(DocumentListDemo, [
- HTTP_PROVIDERS,
- ALFRESCO_CORE_PROVIDERS
-]);
-```
-
-Note the use of ```DOCUMENT_LIST_DIRECTIVES``` barrel that consolidates all the document list related directives together.
-It gives you access to ``````, `````` and many other directives.
-In addition ```DOCUMENT_LIST_PROVIDERS``` exports all primary services and providers needed for component to function.
+_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
-Document List provides simple breadcrumb element to indicate the current position within a navigation hierarchy.
-It can be enabled via `breadcrumb` attribute:
+DocumentList provides simple breadcrumb element to indicate the current position within a navigation hierarchy.
```html
-
-
+
+
```
@@ -189,10 +116,27 @@ A custom set of columns can look like the following:
```html
-
-
-
-
+
+
+
+
+
+
+
```
@@ -220,9 +164,9 @@ the binding value for the Site column to display location site will be `location
```html
-
-
-
+
+
+
```
@@ -235,8 +179,9 @@ HTML attributes:
| --- | --- | --- | --- |
| title | string | | Column title |
| sr-title | string | | Screen reader title, used only when `title` is empty |
-| source | string | | Column source, example: `createdByUser.displayName` |
-| class | string | | CSS class list, example: `full-width name-column` |
+| key | string | | Column source key, example: `createdByUser.displayName` |
+| sortable | boolean | false | Toggle sorting ability via column header clicks |
+| class | string | | CSS class list, example: `full-width ellipsis-cell` |
| type | string | text | Column type, text\|date\|number |
| format | string | | Value format pattern |
@@ -245,7 +190,7 @@ For a full list of available `format` values please refer to [DatePipe](https://
### Actions
-Document List supports declarative actions for Documents and Folders.
+DocumentList supports declarative actions for Documents and Folders.
Each action can be bound to either default out-of-box handler or a custom behavior.
You can define both folder and document actions at the same time.
@@ -257,14 +202,12 @@ You can define both folder and document actions at the same time.
@@ -278,12 +221,13 @@ export class MyView {
// ...
myCustomAction1(event) {
- alert('Custom document action for ' + event.value.displayName);
+ let entry = event.value.entry;
+ alert(`Custom document action for ${entry.name}`);
}
}
```
-All document actions with `type="menu"` are rendered as a dropdown menu as on the picture below:
+All document actions are rendered as a dropdown menu as on the picture below:
@@ -292,8 +236,8 @@ All document actions with `type="menu"` are rendered as a dropdown menu as on th
The following action handlers are provided out-of-box:
-- Download (document)
-- Delete (document, folder)
+- **Download** (document)
+- **Delete** (document, folder)
All system handler names are case-insensitive, `handler="download"` and `handler="DOWNLOAD"`
will trigger the same `download` action.
@@ -308,7 +252,6 @@ Initiates download of the corresponding document file.
@@ -320,36 +263,6 @@ Initiates download of the corresponding document file.
-#### Document action buttons
-
-It is also possible to display most frequent actions within a separate buttons panel:
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-```
-
-Button actions provide same support for system and custom handlers.
-
-
-
#### Folder actions
Folder actions have the same declaration as document actions except ```taget="folder"``` attribute value.
@@ -360,14 +273,12 @@ Folder actions have the same declaration as document actions except ```taget="fo
@@ -381,40 +292,18 @@ export class MyView {
// ...
myFolderAction1(event) {
- alert('Custom folder action for ' + event.value.displayName);
+ let entry = event.value.entry;
+ alert(`Custom folder action for ${entry.name}`);
}
}
```
-#### Folder action buttons
-
-Every folder action is rendered as a separate button.
-
-```html
-
-
-
-
-
-
-
-
-```
-
-
-
-
### Context Menu
-DocumentList also provide integration for 'Context Menu Service' from the
-`ng2-alfresco-core` library.
+DocumentList also provide integration for 'Context Menu Service' from the
+[ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core) library.
You can automatically turn all menu actions (for the files and folders)
into context menu items like shown below:
@@ -453,7 +342,7 @@ This enables context menu items for documents and folders.
By default DocumentList component uses 'double-click' mode for navigation.
That means user will see the contents of the folder by double-clicking its name
-or icon (similar Google Drive behaviour). However it is possible switching to
+or icon (similar to Google Drive behaviour). However it is possible switching to
other modes, like single-click navigation for example.
The following navigation modes are supported:
@@ -470,86 +359,15 @@ The following example switches navigation to single clicks:
### Events
-Document List emits the following events:
+DocumentList emits the following events:
| Name | Description |
| --- | --- |
-| itemClick | emitted when user clicks a document list entry |
-| itemDblClick | emitted when user double-clicks document a document list entry |
+| nodeClick | emitted when user clicks a list node |
+| nodeDblClick | emitted when user double-clicks list node |
| 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 |
-### itemClick event
-
-Emitted when user clicks on document or folder.
-
-```html
-
-
-```
-
-```ts
-export class MyView {
- ...
- onItemClick(e) {
- console.log(e.value);
- }
-}
-```
-
-For the event `value` the full node info is provided, i.e.:
-
-```json
-{
- "nodeRef": "workspace://SpacesStore/8bb36efb-c26d-4d2b-9199-ab6922f53c28",
- "nodeType": "cm:folder",
- "type": "folder",
- "mimetype": "",
- "isFolder": true,
- "isLink": false,
- "fileName": "Agency Files",
- "displayName": "Agency Files",
- "status": "",
- "title": "Agency related files",
- "description": "This folder holds the agency related files for the project",
- "author": "",
- "createdOn": "2011-02-15T20:47:03.951Z",
- "createdBy": "Mike Jackson",
- "createdByUser": "mjackson",
- "modifiedOn": "2011-02-15T21:00:43.616Z",
- "modifiedBy": "Mike Jackson",
- "modifiedByUser": "mjackson"
-}
-```
-
-_The content of the json above was reduced for the sake of simplicity._
-
-### folderChange event
-
-This event is emitted every time current folder is changed.
-Event handler gets the following data available:
-
-- folder
-- absolutePath
-- relativePath
-
-```html
-
-
-```
-
-```ts
-export class MyView {
- ...
- onFolderChanged(e) {
- console.log(e.value);
- console.log(e.absolutePath);
- console.log(e.relativePath);
- }
-}
-```
-
## Advanced usage and customization
### Hiding columns on small screens
@@ -577,23 +395,23 @@ Now you can declare columns and assign `desktop-only` class where needed:
-
+
+ key="name"
+ class="full-width ellipsis-cell">
@@ -612,7 +430,7 @@ Now you can declare columns and assign `desktop-only` class where needed:
### Custom 'empty folder' template
-By default Document List provides the following content for the empty folder:
+By default DocumentList provides the following content for the empty folder:
@@ -632,7 +450,6 @@ That will give the following output:
-
### Customizing default actions
It is possible extending or replacing the list of available system actions for documents and folders.
@@ -650,8 +467,7 @@ Example below demonstrates how a new action handler can be registered with the
@@ -682,12 +498,6 @@ export class MyView {
}
```
-
-
-Upon execution users will see the following dialog:
-
-
-
The same approach allows changing the way out-of-box action handlers behave.
Registering custom action with the name `download` replaces default one:
@@ -712,7 +522,7 @@ by means of custom application service.
## Build from sources
-Alternatively you can build component from sources with the following commands:
+You can build component from sources with the following commands:
```sh
npm install
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts b/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts
index ecdd7eb3b2..2664436e61 100644
--- a/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts
+++ b/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts
@@ -143,8 +143,8 @@ class DocumentListDemo implements OnInit {
currentPath: string = '/';
authenticated: boolean;
- // host: string = 'http://devproducts-platform.alfresco.me';
- host: string = 'http://127.0.0.1:8080';
+ host: string = 'http://devproducts-platform.alfresco.me';
+ // host: string = 'http://127.0.0.1:8080';
token: string;
diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/breadcrumb.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/breadcrumb.png
index 35a0c4b8cc..36c745dc5f 100644
Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/breadcrumb.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/breadcrumb.png differ
diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-columns.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-columns.png
index 10ef72c925..1ba048d759 100644
Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-columns.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-columns.png differ
diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-1.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-1.png
deleted file mode 100644
index cd4d0211db..0000000000
Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-1.png and /dev/null differ
diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-2.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-2.png
deleted file mode 100644
index 15065f5d2f..0000000000
Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-2.png and /dev/null differ
diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/document-action-download.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/document-action-download.png
index 05f8e005dc..05d60793b2 100644
Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/document-action-download.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/document-action-download.png differ
diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/document-actions.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/document-actions.png
index ff05ebe708..f0fcee4a2f 100644
Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/document-actions.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/document-actions.png differ
diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-custom.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-custom.png
index 244955a774..f8f18dbb80 100644
Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-custom.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-custom.png differ
diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-default.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-default.png
index 5749a98382..558b81f300 100644
Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-default.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-default.png differ
diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-actions.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-actions.png
index d88066464c..2c698df6ef 100644
Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-actions.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-actions.png differ
diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-context-menu.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-context-menu.png
index 74f4784979..1907ecd75d 100644
Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-context-menu.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/folder-context-menu.png differ
diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/quick-document-actions.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/quick-document-actions.png
deleted file mode 100644
index b26f1d51bb..0000000000
Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/quick-document-actions.png and /dev/null differ
diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/quick-folder-actions.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/quick-folder-actions.png
deleted file mode 100644
index 0c47abd528..0000000000
Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/quick-folder-actions.png and /dev/null differ
diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-desktop.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-desktop.png
index ce57f0fc77..da7f0dac32 100644
Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-desktop.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-desktop.png differ
diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-mobile.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-mobile.png
index bf926dab4e..933ce1f60b 100644
Binary files a/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-mobile.png and b/ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-mobile.png differ