inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #408 from Alfresco/dev-denys-393

Browse Source 
Documentation updates
This commit is contained in:
Eugenio Romano
2016-07-11 18:14:09 +01:00
committed by GitHub
parent 6a3719d59b 5c546c5c8d
commit f1410431e1
21 changed files with 456 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
PREREQUISITES.md
View File

@@ -5,6 +5,10 @@ The [Angular 2](https://angular.io/) based application development framework req
- An Alfresco Platform Repository (version [5.2.a-EA](https://wiki.alfresco.com/wiki/Community_file_list_201606-EA) or newer) to talk to, which has [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) enabled.
- [Node.js](https://nodejs.org/en/) JavaScript runtime.
- [npm](https://www.npmjs.com/) package manager for JavaScript.
**Verify that you are running at least node `v5.x.x` and npm `3.x.x`**
by running `node -v` and `npm -v` in a terminal/console window.
Older versions produce errors.
## Installing Alfresco

9
demo-shell-ng2/app/components/files/files.component.css
View File

@@ -0,0 +1,9 @@
.container {
margin: 10px;
}
@media only screen and (max-width: 640px) {
.container {
margin: 0;
}
}

183
demo-shell-ng2/app/components/files/files.component.html
View File

@@ -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>

278
ng2-components/ng2-alfresco-datatable/README.md
View File

@@ -28,16 +28,49 @@
</a>
</p>
### Node
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
## Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
## Install
```sh
npm install --save ng2-alfresco-datatable material-design-lite material-design-icons
npm install --save ng2-alfresco-datatable
```
## Basic usage
### Dependencies
You must separately install the following libraries for your application:
- [ng2-translate](https://github.com/ocombe/ng2-translate)
- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
```sh
npm install --save ng2-translate ng2-alfresco-core
```
#### Material Design Lite
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 `index.html` file:
```html
<!-- Google Material Design Lite -->
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
<script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
```
## Basic usage example
**my.component.html**
```html
<alfresco-datatable
@@ -45,7 +78,7 @@ npm install --save ng2-alfresco-datatable material-design-lite material-design-i
</alfresco-datatable>
```
Example of an App that declares the file viewer component :
**my.component.ts**
```ts
import { Component } from '@angular/core';
@@ -56,7 +89,7 @@ import {
@Component({
selector: 'my-view',
template: '<YOUR TEMPLATE>',
templateUrl: './my.component.html',
directives: [ALFRESCO_DATATABLE_DIRECTIVES]
})
export class MyView {
@@ -71,13 +104,23 @@ export class MyView {
],
// schema
[
{type: 'text', key: 'id', title: 'Id', sortable: true},
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
type: 'text',
key: 'name',
title: 'Name',
cssClass: 'full-width',
sortable: true
}
]
);
}
}
```
![DataTable demo](docs/assets/datatable-demo.png)
@@ -86,26 +129,181 @@ export class MyView {
| Name | Type | Default | Description
| --- | --- | --- | --- |
| data | DataTableAdapter | empty **ObjectDataTableAdapter** | data source |
| multiselect | boolean | false | toggle multiple row selection, renders checkboxes at the beginning of each row |
| actions | boolean | false | toggle data actions column |
| data | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
| actions | boolean | false | Toggles data actions column |
### Events
| Name | Description
| --- | --- |
| rowClick | emitted when user clicks the row |
| rowDblClick | emitted when user double-clicks the row |
| [rowClick](#rowclick-event) | Emitted when user clicks the row |
| [rowDblClick](#rowdblclick-event) | Emitted when user double-clicks the row |
| [showRowContextMenu](#showrowcontextmenu-event) | Emitted before context menu is displayed for a row |
| [showRowActionsMenu](#showrowactionsmenu-event) | Emitted before actions menu is displayed for a row |
| [executeRowAction](#executerowaction-event) | Emitted when row action is executed by user |
**Advanced usage example**
```html
<alfresco-datatable
[data]="data"
[actions]="contentActions"
[multiselect]="multiselect"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowDblClick)="onRowDblClick($event)">
<no-content-template>
<template>
<h1>Sorry, no content</h1>
</template>
</no-content-template>
</alfresco-datatable>
```
#### rowClick event
_This event is emitted when user clicks the row._
Event properties:
```ts
row: DataRow, // row clicked
event: Event // original HTML DOM event
```
Handler example:
```ts
onRowClicked(event) {
console.log(event.row);
}
```
#### rowDblClick event
_This event is emitted when user double-clicks the row._
Event properties:
```ts
row: DataRow, // row clicked
event: Event // original HTML DOM event
```
Handler example:
```ts
onRowDblClicked(event) {
console.log(event.row);
}
```
#### showRowContextMenu event
_Emitted before context menu is displayed for a row._
Note that DataTable itself does not populate context menu items,
you can provide all necessary content via handler.
Event properties:
```ts
args: {
row: DataRow,
col: DataColumn,
actions: []
}
```
Handler example:
```ts
onShowRowContextMenu(event) {
event.args.actions = [
{ ... },
{ ... }
]
}
```
DataTable will automatically render provided menu items.
_Please refer to [ContextMenu](https://www.npmjs.com/package/ng2-alfresco-core)
documentation for more details on context actions format and behavior._
#### showRowActionsMenu event
_Emitted before actions menu is displayed for a row.
Requires `actions` property to be set to `true`._
Note that DataTable itself does not populate action menu items,
you can provide all necessary content via handler.
Event properties:
```ts
args: {
row: DataRow,
col: DataColumn,
actions: []
}
```
Handler example:
```ts
onShowRowActionsMenu(event) {
event.args.actions = [
{ ... },
{ ... }
]
}
```
#### executeRowAction event
_Emitted when row action is executed by user._
Usually accompanies `showRowActionsMenu` event.
DataTable itself does not execute actions but provides support for external
integration. If there were actions provided with `showRowActionsMenu` event
then `executeRowAction` will be automatically executed when user clicks
corresponding menu item.
Event properties:
```ts
args: {
row: DataRow
action: any
}
```
Handler example:
```ts
onExecuteRowAction(event) {
// get event arguments
let row = event.args.row;
let action = event.args.action;
// your code to execute action
this.executeContentAction(row, action);
}
```
## Data sources
DataTable component gets data by means of data adapter.
It is possible having data retrieved from different kinds of sources by implementing
a custom `DataTableAdapter`:
a custom `DataTableAdapter` using the following interfaces:
```ts
interface DataTableAdapter {
getRows(): Array<DataRow>;
setRows(rows: Array<DataRow>): void;
getColumns(): Array<DataColumn>;
@@ -114,12 +312,28 @@ interface DataTableAdapter {
getSorting(): DataSorting;
setSorting(sorting: DataSorting): void;
sort(key?: string, direction?: string): void;
}
interface DataRow {
isSelected: boolean;
hasValue(key: string): boolean;
getValue(key: string): any;
}
interface DataColumn {
key: string;
type: string; // text|image|date
format?: string;
sortable?: boolean;
title?: string;
srTitle?: string;
cssClass?: string;
}
```
DataTable ships `ObjectDataTableAdapter` out-of-box. This is a simple data adapter
that binds to object arrays and turns object fields into columns:
DataTable provides [ObjectDataTableAdapter](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts) out-of-box.
This is a simple data adapter implementation that binds to object arrays
and turns object fields into columns:
```ts
let data = new ObjectDataTableAdapter(
@@ -130,8 +344,18 @@ let data = new ObjectDataTableAdapter(
],
// schema
[
{type: 'text', key: 'id', title: 'Id', sortable: true},
{type: 'text', key: 'name', title: 'Name', sortable: true}
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
type: 'text',
key: 'name',
title: 'Name',
sortable: true
}
]
);
```
@@ -145,19 +369,19 @@ npm install
npm run build
```
##Build the files and keep watching for changes
### Build the files and keep watching for changes
```sh
$ npm run build:w
```
```sh
$ npm run build:w
```
## Running unit tests
### Running unit tests
```sh
npm test
```
## Running unit tests in browser
### Running unit tests in browser
```sh
npm test-browser
@@ -166,7 +390,7 @@ npm test-browser
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
## Code coverage
### Code coverage
```sh
npm run coverage

2
ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts
View File

@@ -94,7 +94,7 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
}
}
onRowClick(row: DataRow, e?) {
onRowClick(row: DataRow, e?: Event) {
if (e) {
e.preventDefault();
}

364
ng2-components/ng2-alfresco-documentlist/README.md
View File

@@ -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,8 +28,10 @@
</a>
</p>
### Node
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
## Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
## Install
@@ -37,7 +39,7 @@ To correctly use this component check that on your machine is running Node versi
npm install --save ng2-alfresco-documentlist
```
#### Dependencies
### Dependencies
Add the following dependency to your index.html:
@@ -45,25 +47,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 +74,52 @@ 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:
### Properties
```ts
import { Component, OnInit } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| 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 |
| multiselect | boolean | false | Toggles multiselect mode |
| contentActions | boolean | false | Toggles content actions for each row |
| contextMenuActions | boolean | false | Toggles context menus for each row |
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService,
AlfrescoAuthenticationService,
AlfrescoPipeTranslate,
AlfrescoTranslationService,
CONTEXT_MENU_DIRECTIVES
} from 'ng2-alfresco-core';
### Events
import {
DOCUMENT_LIST_DIRECTIVES,
DOCUMENT_LIST_PROVIDERS,
DocumentActionsService
} from 'ng2-alfresco-documentlist';
| Name | Description |
| --- | --- |
| nodeClick | Emitted when user clicks the node |
| nodeDblClick | Emitted when user double-clicks the node |
| folderChange | Emitted upon display folder changed |
| preview | Emitted when document preview is requested either with single or double click |
@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>
```
![Breadcrumb](docs/assets/breadcrumb.png)
@@ -189,10 +136,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 +184,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 +199,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 +210,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 +222,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 +241,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:
![Document Actions](docs/assets/document-actions.png)
@@ -292,8 +256,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 +272,6 @@ Initiates download of the corresponding document file.
<content-action
target="document"
type="menu"
title="Download"
handler="download">
</content-action>
@@ -320,36 +283,6 @@ Initiates download of the corresponding document file.
![Download document action](docs/assets/document-action-download.png)
#### 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.
![Quick document Actions](docs/assets/quick-document-actions.png)
#### Folder actions
Folder actions have the same declaration as document actions except ```taget="folder"``` attribute value.
@@ -360,14 +293,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 +312,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 Actions](docs/assets/folder-actions.png)
#### 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>
```
![Quick folder Actions](docs/assets/quick-folder-actions.png)
### 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,103 +362,32 @@ 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:
- click
- dblclick
- **click**
- **dblclick**
The following example switches navigation to single clicks:
```html
<alfresco-document-list navigation-mode="click">
<alfresco-document-list [navigationMode]="'click'">
</alfresco-document-list>
```
### 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 +415,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 +450,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:
![Default empty folder](docs/assets/empty-folder-template-default.png)
@@ -632,7 +470,6 @@ That will give the following output:
![Custom empty folder](docs/assets/empty-folder-template-custom.png)
### Customizing default actions
It is possible extending or replacing the list of available system actions for documents and folders.
@@ -650,8 +487,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 +518,6 @@ export class MyView {
}
```
![Custom handler 1](docs/assets/custom-doc-handler-1.png?raw=true)
Upon execution users will see the following dialog:
![Custom handler 2](docs/assets/custom-doc-handler-2.png)
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 +542,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
@@ -744,4 +574,4 @@ before performing unit testing.
```sh
npm run coverage
```
```

4
ng2-components/ng2-alfresco-documentlist/demo/src/main.ts
View File

@@ -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;

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/breadcrumb.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 54 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/custom-columns.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 58 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 64 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/custom-doc-handler-2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 91 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/document-action-download.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 90 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/document-actions.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 90 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-custom.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 63 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/empty-folder-template-default.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 198 KiB

After

Width:  |  Height:  |  Size: 192 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/folder-actions.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 90 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/folder-context-menu.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 146 KiB

After

Width:  |  Height:  |  Size: 94 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/quick-document-actions.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 63 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/quick-folder-actions.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 33 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-desktop.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 83 KiB

After

Width:  |  Height:  |  Size: 74 KiB

BIN
ng2-components/ng2-alfresco-documentlist/docs/assets/responsive-mobile.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 79 KiB