mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
#393 readme update
This commit is contained in:
Denys Vuika
@@ -0,0 +1,9 @@
|
||||
.container {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.container {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,98 +1,99 @@
|
||||
<alfresco-upload-drag-area
|
||||
[showUploadDialog]="true"
|
||||
[currentFolderPath]="currentPath"
|
||||
[uploaddirectory]=""
|
||||
(onSuccess)="documentList.reload()">
|
||||
<alfresco-document-list-breadcrumb
|
||||
[currentFolderPath]="currentPath"
|
||||
[target]="documentList">
|
||||
</alfresco-document-list-breadcrumb>
|
||||
<alfresco-document-list
|
||||
#documentList
|
||||
<div class="container">
|
||||
<alfresco-upload-drag-area
|
||||
[showUploadDialog]="true"
|
||||
[currentFolderPath]="currentPath"
|
||||
[contextMenuActions]="true"
|
||||
[contentActions]="true"
|
||||
(preview)="showFile($event)"
|
||||
(folderChange)="onFolderChanged($event)">
|
||||
<!--
|
||||
<empty-folder-content>
|
||||
<template>
|
||||
<h1>Sorry, no content here</h1>
|
||||
</template>
|
||||
</empty-folder-content>
|
||||
-->
|
||||
<content-columns>
|
||||
<content-column key="$thumbnail" type="image"></content-column>
|
||||
<content-column
|
||||
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
|
||||
key="name"
|
||||
sortable="true"
|
||||
class="full-width ellipsis-cell">
|
||||
</content-column>
|
||||
[uploaddirectory]=""
|
||||
(onSuccess)="documentList.reload()">
|
||||
<alfresco-document-list-breadcrumb
|
||||
[currentFolderPath]="currentPath"
|
||||
[target]="documentList">
|
||||
</alfresco-document-list-breadcrumb>
|
||||
<alfresco-document-list
|
||||
#documentList
|
||||
[currentFolderPath]="currentPath"
|
||||
[contextMenuActions]="true"
|
||||
[contentActions]="true"
|
||||
(preview)="showFile($event)"
|
||||
(folderChange)="onFolderChanged($event)">
|
||||
<!--
|
||||
<content-column
|
||||
title="Type"
|
||||
source="content.mimeType">
|
||||
</content-column>
|
||||
<empty-folder-content>
|
||||
<template>
|
||||
<h1>Sorry, no content here</h1>
|
||||
</template>
|
||||
</empty-folder-content>
|
||||
-->
|
||||
<content-column
|
||||
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
|
||||
key="createdByUser.displayName"
|
||||
sortable="true"
|
||||
class="desktop-only">
|
||||
</content-column>
|
||||
<content-column
|
||||
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
|
||||
key="createdAt"
|
||||
type="date"
|
||||
format="medium"
|
||||
sortable="true"
|
||||
class="desktop-only">
|
||||
</content-column>
|
||||
</content-columns>
|
||||
<content-columns>
|
||||
<content-column key="$thumbnail" type="image"></content-column>
|
||||
<content-column
|
||||
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
|
||||
key="name"
|
||||
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"
|
||||
sortable="true"
|
||||
class="desktop-only">
|
||||
</content-column>
|
||||
<content-column
|
||||
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
|
||||
key="createdAt"
|
||||
type="date"
|
||||
format="medium"
|
||||
sortable="true"
|
||||
class="desktop-only">
|
||||
</content-column>
|
||||
</content-columns>
|
||||
|
||||
<content-actions>
|
||||
<!-- folder actions -->
|
||||
<content-action
|
||||
target="folder"
|
||||
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
|
||||
handler="system1">
|
||||
</content-action>
|
||||
<content-action
|
||||
target="folder"
|
||||
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
|
||||
(execute)="myFolderAction1($event)">
|
||||
</content-action>
|
||||
<content-action
|
||||
target="folder"
|
||||
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
|
||||
handler="delete">
|
||||
</content-action>
|
||||
|
||||
<!-- document actions -->
|
||||
<content-action
|
||||
target="document"
|
||||
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
|
||||
handler="download">
|
||||
</content-action>
|
||||
<content-action
|
||||
target="document"
|
||||
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
|
||||
handler="system2">
|
||||
</content-action>
|
||||
<content-action
|
||||
target="document"
|
||||
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
|
||||
(execute)="myCustomAction1($event)">
|
||||
</content-action>
|
||||
<content-action
|
||||
target="document"
|
||||
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
|
||||
handler="delete">
|
||||
</content-action>
|
||||
</content-actions>
|
||||
</alfresco-document-list>
|
||||
</alfresco-upload-drag-area>
|
||||
<content-actions>
|
||||
<!-- folder actions -->
|
||||
<content-action
|
||||
target="folder"
|
||||
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
|
||||
handler="system1">
|
||||
</content-action>
|
||||
<content-action
|
||||
target="folder"
|
||||
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
|
||||
(execute)="myFolderAction1($event)">
|
||||
</content-action>
|
||||
<content-action
|
||||
target="folder"
|
||||
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
|
||||
handler="delete">
|
||||
</content-action>
|
||||
<!-- document actions -->
|
||||
<content-action
|
||||
target="document"
|
||||
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
|
||||
handler="download">
|
||||
</content-action>
|
||||
<content-action
|
||||
target="document"
|
||||
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
|
||||
handler="system2">
|
||||
</content-action>
|
||||
<content-action
|
||||
target="document"
|
||||
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
|
||||
(execute)="myCustomAction1($event)">
|
||||
</content-action>
|
||||
<content-action
|
||||
target="document"
|
||||
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
|
||||
handler="delete">
|
||||
</content-action>
|
||||
</content-actions>
|
||||
</alfresco-document-list>
|
||||
</alfresco-upload-drag-area>
|
||||
</div>
|
||||
|
||||
<context-menu-holder></context-menu-holder>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# Document List Component for Angular 2
|
||||
# DocumentList Component for Angular 2
|
||||
|
||||
<p>
|
||||
<a title='Build Status' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
|
||||
@@ -28,15 +28,18 @@
|
||||
</a>
|
||||
</p>
|
||||
|
||||
### 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:
|
||||
<script src="node_modules/alfresco-js-api/bundle.js"></script>
|
||||
```
|
||||
|
||||
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
|
||||
<!-- Google Material Design Lite -->
|
||||
@@ -72,107 +75,31 @@ Also make sure you include these dependencies in your .html page:
|
||||
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
||||
```
|
||||
|
||||
|
||||
## Basic usage
|
||||
|
||||
```html
|
||||
<alfresco-document-list
|
||||
[breadcrumb]="breadcrumb"
|
||||
[navigate]="navigation"
|
||||
(itemClick)="onItemClick($event)">
|
||||
#documentList
|
||||
[currentFolderPath]="currentPath"
|
||||
[contextMenuActions]="true"
|
||||
[contentActions]="true"
|
||||
[multiselect]="true"
|
||||
(folderChange)="onFolderChanged($event)">
|
||||
</alfresco-document-list>
|
||||
```
|
||||
|
||||
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: `
|
||||
<div class="container">
|
||||
<alfresco-document-list [breadcrumb]="true" *ngIf="authenticated">
|
||||
</alfresco-document-list>
|
||||
</div>
|
||||
`,
|
||||
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 ```<document-actions>```, ```<folder-actions>``` 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
|
||||
<alfresco-document-list [breadcrumb]="true">
|
||||
</alfresco-document-list>
|
||||
<alfresco-document-list-breadcrumb
|
||||
[target]="documentList">
|
||||
</alfresco-document-list-breadcrumb>
|
||||
```
|
||||
|
||||
|
||||
@@ -189,10 +116,27 @@ A custom set of columns can look like the following:
|
||||
```html
|
||||
<alfresco-document-list ...>
|
||||
<content-columns>
|
||||
<content-column source="$thumbnail" type="image"></content-column>
|
||||
<content-column title="Name" source="name" class="full-width name-column"></content-column>
|
||||
<content-column title="Created By" source="createdByUser.displayName"></content-column>
|
||||
<content-column title="Created On" source="createdAt" type="date" format="medium"></content-column>
|
||||
<content-column key="$thumbnail" type="image"></content-column>
|
||||
<content-column
|
||||
title="Name"
|
||||
key="name"
|
||||
sortable="true"
|
||||
class="full-width ellipsis-cell">
|
||||
</content-column>
|
||||
<content-column
|
||||
title="Created By"
|
||||
key="createdByUser.displayName"
|
||||
sortable="true"
|
||||
class="desktop-only">
|
||||
</content-column>
|
||||
<content-column
|
||||
title="Created On"
|
||||
key="createdAt"
|
||||
type="date"
|
||||
format="medium"
|
||||
sortable="true"
|
||||
class="desktop-only">
|
||||
</content-column>
|
||||
</content-columns>
|
||||
</alfresco-document-list>
|
||||
```
|
||||
@@ -220,9 +164,9 @@ the binding value for the Site column to display location site will be `location
|
||||
```html
|
||||
<alfresco-document-list ...>
|
||||
<content-columns>
|
||||
<content-column source="$thumbnail" type="image"></content-column>
|
||||
<content-column title="Name" source="displayName" class="full-width name-column"></content-column>
|
||||
<content-column title="Site" source="location.site"></content-column>
|
||||
<content-column key="$thumbnail" type="image"></content-column>
|
||||
<content-column title="Name" key="displayName" class="full-width ellipsis-cell"></content-column>
|
||||
<content-column title="Site" key="location.site"></content-column>
|
||||
</content-columns>
|
||||
</alfresco-document-list>
|
||||
```
|
||||
@@ -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.
|
||||
|
||||
<content-action
|
||||
target="document"
|
||||
type="menu"
|
||||
title="System action"
|
||||
handler="system2">
|
||||
</content-action>
|
||||
|
||||
<content-action
|
||||
target="document"
|
||||
type="menu"
|
||||
title="Custom action"
|
||||
(execute)="myCustomAction1($event)">
|
||||
</content-action>
|
||||
@@ -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.
|
||||
|
||||
<content-action
|
||||
target="document"
|
||||
type="menu"
|
||||
title="Download"
|
||||
handler="download">
|
||||
</content-action>
|
||||
@@ -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
|
||||
<alfresco-document-list ...>
|
||||
<content-actions>
|
||||
|
||||
<content-action
|
||||
target="document"
|
||||
type="button"
|
||||
icon="extension"
|
||||
handler="system1">
|
||||
</content-action>
|
||||
|
||||
<content-action
|
||||
target="document"
|
||||
type="button"
|
||||
icon="thumb_up"
|
||||
handler="system2">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
</alfresco-document-list>
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
<content-action
|
||||
target="folder"
|
||||
type="menu"
|
||||
title="Default folder action 1"
|
||||
handler="system1">
|
||||
</content-action>
|
||||
|
||||
<content-action
|
||||
target="folder"
|
||||
type="menu"
|
||||
title="Custom folder action"
|
||||
(execute)="myFolderAction1($event)">
|
||||
</content-action>
|
||||
@@ -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
|
||||
<alfresco-document-list ...>
|
||||
<content-actions>
|
||||
|
||||
<content-action
|
||||
target="folder"
|
||||
type="button"
|
||||
icon="delete"
|
||||
title="Delete"
|
||||
handler="system1">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
</alfresco-document-list>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
<alfresco-document-list (itemClick)="onItemClick($event)">
|
||||
</alfresco-document-list>
|
||||
```
|
||||
|
||||
```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
|
||||
<alfresco-document-list
|
||||
(folderchange)="onFolderChanged($event)">
|
||||
</alfresco-document-list>
|
||||
```
|
||||
|
||||
```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:
|
||||
|
||||
<!-- always visible columns -->
|
||||
|
||||
<content-column source="$thumbnail" type="image"></content-column>
|
||||
<content-column key="$thumbnail" type="image"></content-column>
|
||||
<content-column
|
||||
title="Name"
|
||||
source="name"
|
||||
class="full-width name-column">
|
||||
key="name"
|
||||
class="full-width ellipsis-cell">
|
||||
</content-column>
|
||||
|
||||
<!-- desktop-only columns -->
|
||||
|
||||
<content-column
|
||||
title="Created by"
|
||||
source="createdByUser.displayName"
|
||||
key="createdByUser.displayName"
|
||||
class="desktop-only">
|
||||
</content-column>
|
||||
<content-column
|
||||
title="Created on"
|
||||
source="createdAt"
|
||||
key="createdAt"
|
||||
type="date"
|
||||
format="medium"
|
||||
class="desktop-only">
|
||||
@@ -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
|
||||
|
||||
<content-action
|
||||
target="document"
|
||||
type="button"
|
||||
icon="account_circle"
|
||||
title="My action"
|
||||
handler="my-handler">
|
||||
</content-action>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 198 KiB After Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 146 KiB After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 79 KiB |
Reference in New Issue
Block a user