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

[ADF-591] documentation refinements (#1959)

Browse Source 
* refine ng2-activiti-analytics

* refine ng2-activiti-diagrams docs

* refine ng2-activiti-form

* refine ng2-activiti-processlist

* refine ng2-activiti-tasklist

* refine ng2-alfresco-core

* refine ng2-alfresco-datatable

* refine ng2-alfresco-datatable

* refine gn2-alfresco-login

* refine ng2-alfresco-search

* refine ng2-alfresco-social

* refine ng2-alfresco-tag

* refine ng2-alfresco-upload

* refine ng2-alfresco-userinfo

* refine ng2-alfresco-viewer

* refine ng2-alfresco-webscript

* various readme cleanups
This commit is contained in:
Denys Vuika
2017-06-14 10:16:53 +01:00
committed by Eugenio Romano
parent b21c4e3dca
commit 774498e045
19 changed files with 1079 additions and 3652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
README.md
View File

@@ -1,4 +1,4 @@
# ALFRESCO ANGULAR 2 COMPONENTS
# ALFRESCO ANGULAR COMPONENTS
[![Join the chat at https://gitter.im/Alfresco/alfresco-ng2-components](https://badges.gitter.im/Alfresco/alfresco-ng2-components.svg)](https://gitter.im/Alfresco/alfresco-ng2-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -17,27 +17,6 @@
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
<p align="center">
<img title="alfresco" alt='alfresco' src='assets/alfresco.png' width="280px" height="150px"></img>
<img title="angular2" alt='angular2' src='assets/angular2.png' width="150px" height="150px"></img>
</p>
<p align="center">
<img title="browser stack" alt='browser stack' src='assets/browserstack.png' width="350px" height="225px"></img>
</p>
## Introduction

67
ng2-components/README.md
View File

@@ -1,33 +1,4 @@
# Alfresco Angular 2 Components
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# Alfresco Angular Components
## Base components
@@ -36,7 +7,6 @@
- [adf-accordion-group](ng2-alfresco-core/README.md)
- [adf-accordion](ng2-alfresco-core/README.md)
- [context-menu](ng2-alfresco-core/README.md)
* Material Design elements
* Context Menu component
## ECM components
@@ -92,38 +62,3 @@
You can browse all the components at the following address:
http://devproducts.alfresco.com/
## How to test a change to a generic component in its own demo
Let's suppose that for some reason you have changed a component and you want to test this changes.
The example is based on the ng2-alfresco-login component, but you can use the same steps for any component.
1. Move inside the component folder and link it.
```sh
cd ng2-alfresco-login
npm link
```
2. Build the component with the watcher enabled.
```sh
npm run build:w
```
3. From another terminal move inside the demo sub folder and link the component to the local node_modules folder.
```sh
cd demo
npm link ng2-alfresco-login
```
4. Start the demo project.
```sh
npm run start
```

363
ng2-components/ng2-activiti-analytics/README.md
View File

@@ -1,340 +1,121 @@
# Activiti Analytics Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-activiti-analytics'>
<img src='https://img.shields.io/npm/dt/ng2-activiti-analytics.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# Activiti Analytics Components
## 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).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
Follow the 3 steps below:
```sh
npm install ng2-activiti-analytics
```
1. Npm
```sh
npm install ng2-activiti-analytics --save
```
2. Html
Include these dependencies in your index.html page:
```html
<!-- Charts -->
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
<script src="node_modules/raphael/raphael.min.js"></script>
<!-- Moment js -->
<script src="node_modules/moment/min/moment.min.js"></script>
<!-- Date picker -->
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
<!-- 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">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- moment
- ng2-charts
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-activiti-diagrams
- ng2-activiti-analytics
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
## Basic usage example Activiti Analytics List
## Activiti Analytics List Component
The component shows the list of all the available reports
```html
<analytics-report-list [layoutType]="'LIST'"></analytics-report-list>
<analytics-report-list
[layoutType]="'LIST'">
</analytics-report-list>
```
Usage example of this component :
**main.ts**
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { AnalyticsModule } from 'ng2-activiti-analytics';
@Component({
selector: 'activiti-analytics-demo',
template: `
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
<analytics-report-list [layoutType]="'LIST'"></analytics-report-list>
</div>
</div>
</div>`
})
export class AnalyticsDemoComponent {
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.bpmHost = 'http://localhost:9999';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
AnalyticsModule
],
declarations: [ AnalyticsDemoComponent ],
bootstrap: [ AnalyticsDemoComponent ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
#### Events
| Name | Description |
| --- | --- |
|`onSuccess`| The event is emitted when the report list are loaded |
|`onError`| The event is emitted when an error occur during the loading |
|`reportClick`| The event is emitted when the report in the list is selected |
#### Options
### Properties
| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `appId` | {string} | optional | | The application id |
| `layoutType` | {string} | required | | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value|
| `selectFirst` | {boolean} | optional | false | Change the value to true if you want select the first item in the list as default|
| appId | string | optional | | The application id |
| layoutType | string | required | | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value|
| selectFirst | boolean | optional | false | Change the value to true if you want select the first item in the list as default|
## Basic usage example Activiti Analytics
### Events
| Name | Description |
| --- | --- |
| onSuccess | The event is emitted when the report list are loaded |
| onError | The event is emitted when an error occur during the loading |
| reportClick | The event is emitted when the report in the list is selected |
## Activiti Analytics Component
The component shows the charts related to the reportId passed as input
```html
<activiti-analytics [appId]="appId" [reportId]="reportId"></activiti-analytics>
<activiti-analytics
[appId]="1001"
[reportId]="2006">
</activiti-analytics>
```
Example of an App that use Activiti Analytics component :
### Properties
**main.ts**
```ts
| Name | Type | Description |
| --- | --- | --- |
| appId | string | The application id |
| reportId | string | The report id |
| hideParameters | boolean | Toggle the analytics parameters |
| debug | boolean | Toggle debug mode, outputs the Form values in the console log if enabled. |
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { AnalyticsModule } from 'ng2-activiti-analytics';
@Component({
selector: 'activiti-analytics-demo',
template: `
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
<activiti-analytics [appId]="1001" [reportId]="2006" [hideParameters]="false"></activiti-analytics>
</div>
</div>
</div>`
})
export class AnalyticsDemoComponent {
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.bpmHost = 'http://localhost:9999';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
AnalyticsModule
],
declarations: [ AnalyticsDemoComponent ],
bootstrap: [ AnalyticsDemoComponent ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
#### Events
| Name | Description |
| --- | --- |
|`onSuccess` | The event is emitted when the report parameters are loaded |
|`onError` | The event is emitted when an error occur during the loading |
|`reportSaved` | The event is emitted when a report is saved |
|`reportDeleted` | The event is emitted when a report is deleted |
#### Options
| Name | Description |
| --- | --- |
|`appId` | The application id |
|`reportId` | The report id |
|`hideParameters` | Boolean to hide or show the analytics parameters |
|`debug` | Flag to enable or disable the Form values in the console log |
You can also use the activiti analytic component to show straight away the charts without show the parameters setting the hideParameters to true
You can also hide chart parameters UI by setting the `hideParameters` to `true`:
```html
<activiti-analytics [appId]="appId" [reportId]="reportId" [hideParameters]="true"></activiti-analytics>
<activiti-analytics
[appId]="appId"
[reportId]="reportId"
[hideParameters]="true">
</activiti-analytics>
```
![Analytics-without-parameters](docs/assets/analytics-without-parameters.png)
## Basic usage example Analytics Generator
### Events
| Name | Description |
| --- | --- |
| onSuccess | The event is emitted when the report parameters are loaded |
| onError | The event is emitted when an error occur during the loading |
| reportSaved | The event is emitted when a report is saved |
| reportDeleted | The event is emitted when a report is deleted |
## Analytics Generator Component
The component generate and show the charts
```html
<activiti-analytics-generator [reportId]="reportId" [reportParamQuery]="reportParamQuery"></activiti-analytics>
<activiti-analytics-generator
[reportId]="reportId"
[reportParamQuery]="reportParamQuery">
</activiti-analytics>
```
#### Events
### Properties
| Name | Type | Description |
| --- | --- | -- |
| reportId | string | The report id |
| reportParamQuery | ReportQuery | The object contains all the parameters that the report needs |
### Events
| Name | Description |
| --- | --- |
|`onSuccess` | The event is emitted when the charts are loaded |
|`onError` | The event is emitted when an error occur during the loading |
#### Options
| Name | Description |
| --- | --- |
|`reportId` | The report id |
|`reportParamQuery` | The object contains all the parameters that the report needs |
| onSuccess | Raised when the charts are loaded |
| onError | Raised when an error occur during the loading |
## 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
npm run build
```
## Running unit tests
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
## NPM scripts
@@ -345,6 +126,16 @@ npm start
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## Demo
Please check the demo folder for a demo project
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

222
ng2-components/ng2-activiti-diagrams/README.md
View File

@@ -1,219 +1,65 @@
# Activiti Diagrams Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-activiti-diagrams'>
<img src='https://img.shields.io/npm/dt/ng2-activiti-diagrams.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# Activiti Diagrams Component
## 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).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
Follow the 3 steps below:
```sh
npm install ng2-activiti-diagrams
```
1. Npm
```sh
npm install ng2-activiti-diagrams --save
```
2. Html
Include these dependencies in your index.html page:
```html
<!-- Raphael -->
<script src="node_modules/raphael/raphael.min.js"></script>
<!-- Diagrams -->
<script src="node_modules/ng2-activiti-diagrams/assets/Polyline.js"></script>
<!-- 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">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translat
- ng2-alfresco-core
- alfresco-js-api
- ng2-activiti-diagrams
- raphael
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
## Basic usage example Activiti Diagrams
## Activiti Diagram Component
This component shows the diagram of a process.
```html
<activiti-diagram [processDefinitionId]="processDefinitionId"></activiti-diagram>
<activiti-diagram
[processDefinitionId]="processDefinitionId">
</activiti-diagram>
```
Or below component shows the diagram of a running process instance with the activities highlighted according to their state (Active/Completed/Pending).
```html
<activiti-diagram [processInstanceId]="processInstanceId"></activiti-diagram>
<activiti-diagram
[processInstanceId]="processInstanceId">
</activiti-diagram>
```
Usage example of this component :
### Properties
**main.ts**
```ts
| Name | Type | Description |
| --- | --- | -- |
| metricPercentages | any | The array that contains the percentage of the time for each element |
| processInstanceId | any | |
| metricColor | any | The array that contains the color for each element |
| metricType | any | The string that specifies the metric type |
| width | number | |
| height | number | |
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { DiagramsModule } from 'ng2-activiti-diagrams';
@Component({
selector: 'activiti-diagrams-demo',
template: `<activiti-diagram [processDefinitionId]="'HealthCareExpressVisitationLog:10:27642'"></activiti-diagram>`
})
export class DiagramDemoComponent {
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.bpmHost = 'http://localhost:9999';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
DiagramsModule
],
declarations: [ DiagramDemoComponent ],
bootstrap: [ DiagramDemoComponent ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
#### Events
### Events
| Name | Description |
| --- | --- |
| `onSuccess` | The event is emitted when the diagrams element are loaded |
| `onError` | The event is emitted when the an error occur during the loading |
#### Options
| Name | Description |
| --- | --- |
| `metricPercentages` | The array that contains the percentage of the time for each element |
| `metricColor` | The array that contains the color for each element |
| `metricType` | The string that specifies the metric type |
| onSuccess | Raised when the diagrams element are loaded |
| onError | Raised when the an error occur during the loading |
## 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
npm run build
```
## Running unit tests
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
## NPM scripts
@@ -224,6 +70,16 @@ npm start
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## Demo
Please check the demo folder for a demo project
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

302
ng2-components/ng2-activiti-form/README.md
View File

@@ -1,35 +1,4 @@
# Activiti Form Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-activiti-form'>
<img src='https://img.shields.io/npm/dtng2-activiti-form.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# APS Form Component
See it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/)
@@ -54,128 +23,25 @@ See it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/)
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).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
Follow the 3 steps below:
1. Npm
```sh
npm install ng2-activiti-form --save
```
2. Html
Include these dependencies in your index.html page:
```html
<!-- Moment js -->
<script src="node_modules/moment/min/moment.min.js"></script>
<!-- Date picker -->
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
<!-- 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">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- moment
- ng2-translate
- ng2-alfresco-core
- alfresco-js-api
- ng2-activiti-form
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
```sh
npm install ng2-activiti-form
```
## ActivitiForm Component
### Basic usage
The component shows a Form from Activiti
```html
<activiti-form [taskId]="taskId"></activiti-form>
<activiti-form
[taskId]="taskId">
</activiti-form>
```
Usage example of this component :
**main.ts**
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { ActivitiFormModule } from 'ng2-activiti-form';
@Component({
selector: 'activiti-app-demo',
template: `<activiti-form [taskId]="77501"></activiti-form>`
})
export class FormDemoComponent {
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.bpmHost = 'http://localhost:9999';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
ActivitiFormModule.forRoot()
],
declarations: [FormDemoComponent],
bootstrap: [FormDemoComponent]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
```
### Display form instance by task id
**Display form instance by task id:**
```html
<activiti-form
@@ -185,7 +51,7 @@ platformBrowserDynamic().bootstrapModule(AppModule);
For an existing Task both form and values will be fetched and displayed.
### Display form definition by form id
**Display form definition by form id:**
```html
<activiti-form
@@ -196,7 +62,7 @@ For an existing Task both form and values will be fetched and displayed.
Only form definition will be fetched.
### Display form definition by form name
**Display form definition by form name:**
```html
<activiti-form
@@ -205,7 +71,7 @@ Only form definition will be fetched.
</activiti-form>
```
### Display form definition by ECM nodeId
**Display form definition by ECM nodeId:**
In this case the metadata of the node are showed in an activiti Form.
If there is no form definied in activiti for the type of the node,
@@ -217,7 +83,7 @@ a new form will be automaticaly created in Activiti.
</activiti-form>
```
### Display form definition by form name, and store the form field as metadata.
**Display form definition by form name, and store the form field as metadata:**
The param nameNode is optional.
@@ -230,7 +96,7 @@ The param nameNode is optional.
</activiti-form>
```
### Display form definition by ECM nodeId
**Display form definition by ECM nodeId:**
In this case the metadata of the node are showed in an activiti Form,
and store the form field as metadata. The param nameNode is optional.
@@ -244,51 +110,50 @@ and store the form field as metadata. The param nameNode is optional.
</activiti-form>
```
### Configuration
#### Properties
### Properties
The recommended set of properties can be found in the following table:
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `taskId` | string | | Task id to fetch corresponding form and values. |
| `formId` | string | | The id of the form definition to load and display with custom values. |
| `formName` | string | | Name of hte form definition to load and display with custom values. |
| `data` | FormValues | | Custom form values map to be used with the rendered form. |
| `showTitle` | boolean | true | Toggle rendering of the form title. |
| `showCompleteButton` | boolean | true | Toggle rendering of the `Complete` outcome button. |
| `showSaveButton` | boolean | true | Toggle rendering of the `Save` outcome button. |
| `showDebugButton` | boolean | false | Toggle debug options. |
| `readOnly` | boolean | false | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
| `showRefreshButton` | boolean | true | Toggle rendering of the `Refresh` button. |
| `showValidationIcon` | boolean | true | Toggle rendering of the validation icon next form title. |
| `saveMetadata` | boolean | false | Store the value of the form as metadata. |
| `path` | string | | Path of the folder where to store the metadata. |
| `nameNode` (optional) | string | true | Name to assign to the new node where the metadata are stored. |
| taskId | string | | Task id to fetch corresponding form and values. |
| formId | string | | The id of the form definition to load and display with custom values. |
| formName | string | | Name of hte form definition to load and display with custom values. |
| data | FormValues | | Custom form values map to be used with the rendered form. |
| showTitle | boolean | true | Toggle rendering of the form title. |
| showCompleteButton | boolean | true | Toggle rendering of the `Complete` outcome button. |
| showSaveButton | boolean | true | Toggle rendering of the `Save` outcome button. |
| readOnly | boolean | false | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
| showRefreshButton | boolean | true | Toggle rendering of the `Refresh` button. |
| showValidationIcon | boolean | true | Toggle rendering of the validation icon next form title. |
| saveMetadata | boolean | false | Store the value of the form as metadata. |
| path | string | | Path of the folder where to store the metadata. |
| nameNode | string | true | Name to assign to the new node where the metadata are stored. |
##### Advanced properties
### Advanced properties
The following properties are for complex customisation purposes:
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `form` | FormModel | | Underlying form model instance. |
| `debugMode` | boolean | false | Toggle debug mode, allows displaying additional data for development and debugging purposes. |
| form | FormModel | | Underlying form model instance. |
| showDebugButton | boolean | false | Toggle debug options. |
| debugMode | boolean | false | Toggle debug mode, allows displaying additional data for development and debugging purposes. |
#### Events
### Events
| Name | Description |
| --- | --- |
| `formLoaded` | Invoked when form is loaded or reloaded. |
| `formSaved` | Invoked when form is submitted with `Save` or custom outcomes. |
| `formCompleted` | Invoked when form is submitted with `Complete` outcome. |
| `executeOutcome` | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
| `onError` | Invoked at any error |
| formLoaded | Invoked when form is loaded or reloaded. |
| formSaved | Invoked when form is submitted with `Save` or custom outcomes. |
| formCompleted | Invoked when form is submitted with `Complete` outcome. |
| executeOutcome | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
| onError | Invoked at any error |
All `form*` events receive an instance of the `FormModel` as event argument for ease of development:
**MyView.component.html**
```html
<activiti-form
[taskId]="selectedTask?.id"
@@ -297,13 +162,14 @@ All `form*` events receive an instance of the `FormModel` as event argument for
```
**MyView.component.ts**
```ts
onFormSaved(form: FormModel) {
console.log(form);
}
```
#### Controlling outcome execution behaviour
### Controlling outcome execution behaviour
If absolutely needed it is possible taking full control over form outcome execution by means of `executeOutcome` event.
This event is fired upon each outcome execution, both system and custom ones.
@@ -314,6 +180,7 @@ This allows for example having custom form validation scenarios and/or additiona
Alternatively you may want just running additional code on outcome execution without suppressing default one.
**MyView.component.html**
```html
<activiti-form
[taskId]="selectedTask?.id"
@@ -322,6 +189,7 @@ Alternatively you may want just running additional code on outcome execution wit
```
**MyView.component.ts**
```ts
import { FormOutcomeEvent } from 'ng2-activiti-form';
@@ -355,48 +223,49 @@ will also be executed after your custom code.**
## Activiti Content Component
### Basic usage
The component shows the content preview.
```html
<activiti-content [contentId]="'1001'"></activiti-content>
<activiti-content
[contentId]="'1001'">
</activiti-content>
```
### Configuration
#### Properties
### Properties
The recommended set of properties can be found in the following table:
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `contentId` | string | | The content id to show. |
| contentId | string | | The content id to show. |
#### Events
### Events
| Name | Description |
| --- | --- |
| `contentClick` | Invoked when the content is clicked. |
| contentClick | Invoked when the content is clicked. |
## FormService
## FormService Service
```ts
import { Component } from '@angular/core';
import { FormService, FormEvent, FormFieldEvent } from 'ng2-activiti-form';
@Component(...)
class MyComponent {
constructor(private formService: FormService) {
constructor(formService: FormService) {
formService.formLoaded.subscribe((e: FormEvent) => {
console.log(`Form loaded: ${e.form.id}`);
});
formService.formLoaded.subscribe(
(e: FormEvent) => {
console.log(`Form loaded: ${e.form.id}`);
}
);
formService.formFieldValueChanged.subscribe((e: FormFieldEvent) => {
console.log(`Field value changed. Form: ${e.form.id}, Field: ${e.field.id}, Value: ${e.field.value}`);
});
formService.formFieldValueChanged.subscribe(
(e: FormFieldEvent) => {
console.log(`Field value changed. Form: ${e.form.id}, Field: ${e.field.id}, Value: ${e.field.value}`);
}
);
}
@@ -473,44 +342,15 @@ The result should be as following:
## 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
npm run build
```
## Running unit tests
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
## NPM scripts
@@ -521,6 +361,16 @@ npm start
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## Demo
Please check the demo folder for a demo project
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

42
ng2-components/ng2-activiti-form/src/components/activiti-form.component.ts
View File

@@ -28,48 +28,6 @@ import { WidgetVisibilityService } from './../services/widget-visibility.servic
declare var componentHandler: any;
/**
* @Input
* ActivitiForm can show 4 types of forms searching by 4 type of params:
* 1) Form attached to a task passing the {taskId}.
*
* 2) Form that are only defined with the {formId} (in this case you receive only the form definition and the form will not be
* attached to any process, useful in case you want to use ActivitiForm as form designer), in this case you can pass also other 2
* parameters:
* - {saveOption} as parameter to tell what is the function to call on the save action.
* - {data} to fill the form field with some data, the id of the form must to match the name of the field of the provided data object.
*
* 3) Form that are only defined with the {formName} (in this case you receive only the form definition and the form will not be
* attached to any process, useful in case you want to use ActivitiForm as form designer),
* in this case you can pass also other 2 parameters:
* - {saveOption} as parameter to tell what is the function to call on the save action.
* - {data} to fill the form field with some data, the id of the form must to match the name of the field of the provided data object.
*
* 4) Form that show the metadata of a {nodeId}
*
* {showTitle} boolean - to hide the title of the form pass false, default true;
*
* {showRefreshButton} boolean - to hide the refresh button of the form pass false, default true;
*
* {showDebugButton} boolean - to show the debug options, default false;
*
* {showCompleteButton} boolean - to hide the complete button of the form pass false, default true;
*
* {showSaveButton} boolean - to hide the save button of the form pass false, default true;
*
* {saveMetadata} boolean - store the value of the form as metadata, default false;
*
* {path} string - path of the folder where to store the metadata;
*
* {nameNode} string (optional) - Name to assign to the new node where the metadata are stored;
*
* @Output
* {formLoaded} EventEmitter - This event is fired when the form is loaded, it pass all the value in the form.
* {formSaved} EventEmitter - This event is fired when the form is saved, it pass all the value in the form.
* {formCompleted} EventEmitter - This event is fired when the form is completed, it pass all the value in the form.
*
* @returns {ActivitiForm} .
*/
@Component({
selector: 'activiti-form',
templateUrl: './activiti-form.component.html',

469
ng2-components/ng2-activiti-processlist/README.md
View File

@@ -1,205 +1,42 @@
# Activiti Process List Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-activiti-processlist'>
<img src='https://img.shields.io/npm/dt/ng2-activiti-processlist.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# Activiti Process List Component
Displays lists of process instances both active and completed, using any defined process filter, and
render details of any chosen instance.
Displays lists of process instances both active and completed, using any defined process filter, and renders details for any chosen instance.
## Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
Follow the 3 steps below:
```sh
npm install ng2-activiti-processlist
```
1. Npm
```sh
npm install ng2-activiti-processlist --save
```
2. Html
Include these dependencies in your index.html page:
```html
<!-- Moment js -->
<script src="node_modules/moment/min/moment.min.js"></script>
<!-- Date picker -->
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
<!-- 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">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-activiti-form
- ng2-alfresco-datatable
- ng2-activiti-tasklist
- ng2-activiti-processlist
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
## Basic usage
### Activiti Process Instance List
## Activiti Process Instance List
This component renders a list containing all the process instances matched by the parameters specified.
**app.component.html**
```html
<activiti-process-instance-list [appId]="'1'" [state]="'open'"></activiti-process-instance-list>
<activiti-process-instance-list
[appId]="'1'"
[state]="'open'">
</activiti-process-instance-list>
```
Usage example of this component :
**main.ts**
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { FilterRepresentationModel } from 'ng2-activiti-tasklist';
import { CoreModule } from 'ng2-alfresco-core';
import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
@Component({
selector: 'alfresco-app-demo',
template: `<activiti-process-instance-list [appId]="appId" [state]="state" [data]="dataProcesses"
#activitiprocesslist></activiti-process-instance-list>`
})
class MyDemoApp {
dataProcesses: ObjectDataTableAdapter;
appId: string = '1';
state: string = 'open';
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.bpmHost = 'http://localhost:9999';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
this.dataProcesses = new ObjectDataTableAdapter([], [
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
{type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
]
);
this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
this.filterRepresentationModel = new FilterRepresentationModel({
appId: '3003',
filter: {
processDefinitionKey: null,
name: null,
state: 'running',
sort: 'created-desc'
}
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
ActivitiProcessListModule
],
declarations: [MyDemoApp],
bootstrap: [MyDemoApp]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
```
#### Options
### Properties
| Name | Description |
| --- | --- |
|`appId`| { appId } The id of the app. |
|`processDefinitionKey`| { processDefinitionKey } The processDefinitionKey of the process. |
|`state`| { state } Define state of the processes. Possible values are running, completed and all |
|`sort`| { sort } Define sort of the processes. Possible values are created-desc, created-asc, ended-desc, ended-asc |
|`schemaColumn`| {any} List of columns to display in the process instances datatable |
| appId | The id of the app. |
| processDefinitionKey | The processDefinitionKey of the process. |
| state | Define state of the processes. Possible values are `running`, `completed` and `all` |
| sort | Define sort of the processes. Possible values are `created-desc`, `created-asc`, `ended-desc`, `ended-asc` |
| schemaColumn | List of columns to display in the process instances datatable |
Example:
@@ -212,13 +49,13 @@ Example:
]
```
#### Events
### Events
- **rowClick**: Emitted when a row in the process list is clicked
- **onSuccess**: Emitted when the list of process instances has been loaded successfully from the server
- **onError**: Emitted when an error is encountered loading the list of process instances from the server
### Process Filters component
## Process Filters Component
Process filters are a collection of criteria used to filter process instances, which may be customized
by users. This component displays a list of available filters and allows the user to select any given
@@ -228,36 +65,42 @@ The most common usage is in driving a process instance list in order to allow th
process instances are displayed in the list.
```html
<activiti-process-instance-filters appId="1001"></activiti-process-instance-filters>
<activiti-process-instance-filters
appId="1001">
</activiti-process-instance-filters>
```
#### Options
### Properties
| Name | Type | Required | Description |
| Name | Type | Description |
| --- | --- | --- | --- |
| `filterParam` | {[Filter Params models](#filter-params--models)} | optional | The params to filter the task filter. If there is no match the default one (first filter of the list) is selected |
| `appId` | {string} | optional | Display filters available to the current user for the application with the specified ID. |
| `appName` | {string} | optional | Display filters available to the current user for the application with the specified name. |
| `hasIcon` | {boolean} | optional | Toggle to show or not the filter's icon. |
| filterParam | [FilterParamsModel](#filterparamsmodel) | The params to filter the task filter. If there is no match the default one (first filter of the list) is selected |
| appId | string | Display filters available to the current user for the application with the specified ID. |
| appName | string | Display filters available to the current user for the application with the specified name. |
| hasIcon | boolean | Toggle to show or not the filter's icon. |
If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored.
#### Events
### Events
| Name | Description |
| --- | --- |
| `onSuccess` | Emitted when the list of filters hase been successfully loaded from the server |
| `onError` | Emitted when an error occurs |
| `filterClick` | Emitted when the user selects a filter from the list |
| onSuccess | Raised when the list of filters hase been successfully loaded from the server |
| onError | Raised when an error occurs |
| filterClick | Raised when the user selects a filter from the list |
### How filter the activiti process filters
```html
<activiti-process-instance-filters [filterParam]="{index: 0}"></activiti-filters>
<activiti-process-instance-filters
[filterParam]="{index: 0}">
</activiti-filters>
```
You can use inside the filterParam one of the following property.
## Filter Params models
## FilterParamsModel
```json
{
"id": "number",
@@ -266,12 +109,11 @@ You can use inside the filterParam one of the following property.
}
```
| Name | Description |
| --- | --- |
| `id` | The id of the task filter |
| `name` | The name of the task filter, lowercase is checked |
| `index` | The position of the filter in the array. The first position is 0 |
| Name | Type | Description |
| --- | --- | --- |
| id | string | The id of the task filter. |
| name | string | The name of the task filter, lowercase is checked. |
| index | number | Zero-based position of the filter in the array. |
### How to create an accordion menu with the processes filter
@@ -280,7 +122,10 @@ The AccordionComponent is exposed by the alfresco-core.
```html
<adf-accordion>
<adf-accordion-group [heading]="'Processes'" [isSelected]="true" [headingIcon]="'assessment'">
<adf-accordion-group
[heading]="'Processes'"
[isSelected]="true"
[headingIcon]="'assessment'">
<activiti-process-instance-filters
[appId]="appId"
(filterClick)="onProcessFilterClick($event)"
@@ -292,212 +137,184 @@ The AccordionComponent is exposed by the alfresco-core.
![how-create-accordion-menu](docs/assets/how-to-create-accordion-menu.png)
### Start Process component
## Start Process component
Displays a button which in turn displays a dialog when clicked, allowing the user
to specify some basic details needed to start a new process instance.
```html
<activiti-start-process appId="YOUR_APP_ID" ></activiti-start-process>
<activiti-start-process
appId="YOUR_APP_ID" >
</activiti-start-process>
```
#### Options
### Properties
| Name | Description |
| --- | --- |
| `appId` | (required): Limit the list of processes which can be started to those contained in the specified app |
| `variables` | Variables in input to the process [RestVariable]**](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-activiti-rest-api/docs/RestVariable.md)|
| appId | (required): Limit the list of processes which can be started to those contained in the specified app |
| variables | Variables in input to the process [RestVariable]**](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-activiti-rest-api/docs/RestVariable.md)|
#### Events
### Events
| Name | Description |
| --- | --- |
| `start` | The event is emitted when the process start |
| `error` | The event is emitted when the start process fail |
| start | Raised when the process start |
| error | Raised when the start process fail |
### Process Details component
## Process Details component
This component displays detailed information on a specified process instance
```html
<activiti-process-instance-details processInstanceId="YOUR_PROCESS_INSTANCE_ID"></activiti-process-instance-details>
<activiti-process-instance-details
processInstanceId="YOUR_PROCESS_INSTANCE_ID">
</activiti-process-instance-details>
```
#### Options
### Properties
| Name | Type | Description |
| --- | --- | --- |
| processInstanceId | string | (required): The numeric ID of the process instance to display |
### Events
| Name | Description |
| --- | --- |
| `processInstanceId` | (required): The numeric ID of the process instance to display |
| processCancelledEmitter | Raised when the current process is cancelled by the user from within the component |
| taskFormCompletedEmitter | Raised when the form associated with an active task is completed from within the component |
| showProcessDiagram | Raised when the show diagram button is clicked |
#### Events
| Name | Description |
| --- | --- |
| `processCancelledEmitter` | Emitted when the current process is cancelled by the user from within the component |
| `taskFormCompletedEmitter` | Emitted when the form associated with an active task is completed from within the component |
| `showProcessDiagram` | Emitted when the show diagram button is clicked |
### Process Instance Details Header component
## Process Instance Details Header component
This is a sub-component of the process details component, which renders some general information about the selected process.
```html
<activiti-process-instance-header processInstance="localProcessDetails"></activiti-process-instance-details>
<activiti-process-instance-header
processInstance="localProcessDetails">
</activiti-process-instance-details>
```
#### Options
### Properties
| Name | Type| Description |
| --- | --- | --- |
| processInstance | string | (**required**): Full details of the process instance to display information about |
| showDiagram | boolean | If the value is true the button show diagram is shown |
### Events
| Name | Description |
| --- | --- |
| `processInstance` | (required): Full details of the process instance to display information about |
| `showDiagram` | (optional): If the value is true the button show diagram is shown |
| showProcessDiagram | Raised when the show diagram button is clicked |
#### Events
| Name | Description |
| --- | --- |
| `showProcessDiagram` | Emitted when the show diagram button is clicked |
### Process Instance Tasks component
## Process Instance Tasks component
Lists both the active and completed tasks associated with a particular process instance
```html
<activiti-process-instance-tasks processInstanceId="YOUR_PROCESS_INSTANCE_ID" showRefreshButton="true"></activiti-process-instance-tasks>
<activiti-process-instance-tasks
processInstanceId="YOUR_PROCESS_INSTANCE_ID"
showRefreshButton="true">
</activiti-process-instance-tasks>
```
#### Options
### Properties
| Name | Type | Description |
| --- | --- | --- |
| processInstanceId | string | (**required**): The ID of the process instance to display tasks for |
| showRefreshButton | boolean | (default: `true`): Whether to show a refresh button next to the list of tasks to allow this to be updated from the server |
### Events
| Name | Description |
| --- | --- |
| `processInstanceId` | (required): The numeric ID of the process instance to display tasks for |
| `showRefreshButton` | (default: `true`): Whether to show a refresh button next to the list of tasks to allow this to be updated from the server |
| taskFormCompletedEmitter | Raised when the form associated with an active task is completed from within the component |
#### Events
| Name | Description |
| --- | --- |
| `taskFormCompletedEmitter` | Emitted when the form associated with an active task is completed from within the component |
### Process Instance Comments component
## Process Instance Comments component
Displays comments associated with a particular process instances and allows the user to add new comments
```html
<activiti-process-instance-comments processInstanceId="YOUR_PROCESS_INSTANCE_ID"></activiti-process-instance-comments>
<activiti-process-instance-comments
processInstanceId="YOUR_PROCESS_INSTANCE_ID">
</activiti-process-instance-comments>
```
#### Options
### Properties
| Name | Type | Description |
| --- | --- | --- |
| processInstanceId | string | (**required**): The numeric ID of the process instance to display comments for |
| Name | Description |
| --- | --- |
| `processInstanceId` | (required): The numeric ID of the process instance to display comments for |
#### Events
No events are emitted by this component
### Process Attachment List component
## Process Attachment List component
This component displays attached documents on a specified process instance
```html
<adf-process-attachment-list [processInstanceId]="YOUR_PROCESS_INSTANCE_ID"
(attachmentClick)="YOUR_ATTACHMENT_CLICK_EMITTER_HANDLER"></adf-process-attachment-list>
<adf-process-attachment-list
[processInstanceId]="YOUR_PROCESS_INSTANCE_ID"
(attachmentClick="YOUR_ATTACHMENT_CLICK_EMITTER_HANDLER">
</adf-process-attachment-list>
```
![process-attachment-list-sample](docs/assets/process-attachment-list.png)
#### Options
### Properties
| Name | Type | Description |
| --- | --- | -- |
| processInstanceId | string | (**required**): The ID of the process instance to display |
### Events
| Name | Description |
| --- | --- |
| `processInstanceId` | (required): The numeric ID of the process instance to display |
| attachmentClick | Raised when the attachment double clicked or selected view option from context menu by the user from within the component and return a Blob obj of the object clicker|
| success | Raised when the attachment list fetch all the attach and return a list of attachments |
| error | Raised when the attachment list is not able to fetch the attachments for example network error |
#### Events
| Name | Description |
| --- | --- |
| `attachmentClick` | Emitted when the attachment double clicked or selected view option from context menu by the user from within the component and return a Blob obj of the object clicker|
| `success` | Emitted when the attachment list fetch all the attach and return a list of attachments |
| `error` | Emitted when the attachment list is not able to fetch the attachments for example network error |
### Create Process Attachment component
## Create Process Attachment component
This component displays Upload Component(Drag and Click) to upload the attachment to a specified process instance
```html
<activiti-create-process-attachment [processInstanceId]="YOUR_PROCESS_INSTANCE_ID"
(error)="YOUR_CREATE_ATTACHMENT_ERROR_HANDLER"
(success)="YOUR_CREATE_ATTACHMENT_SUCCESS_HANDLER"
></activiti-create-process-attachment>
<activiti-create-process-attachment
[processInstanceId]="YOUR_PROCESS_INSTANCE_ID"
(error)="YOUR_CREATE_ATTACHMENT_ERROR_HANDLER"
(success)="YOUR_CREATE_ATTACHMENT_SUCCESS_HANDLER">
</activiti-create-process-attachment>
```
![process-create-attachment](docs/assets/process-create-attachment.png)
#### Options
### Properties
| Name | Type | Description |
| --- | --- | --- |
| processInstanceId | string | (**required**): The ID of the process instance to display |
### Events
| Name | Description |
| --- | --- |
| `processInstanceId` | (required): The numeric ID of the process instance to display |
#### Events
| Name | Description |
| --- | --- |
| `error` | Emitted when the error occured while creating/uploading the attachment by the user from within the component |
| `success` | Emitted when the attachement created/uploaded successfully from within the component |
| error | Raised when the error occured while creating/uploading the attachment by the user from within the component |
| success | Raised when the attachement created/uploaded successfully from within the component |
## 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
npm run build
```
## Running unit tests
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
## NPM scripts
@@ -508,6 +325,16 @@ npm start
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## Demo
Please check the demo folder for a demo project
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

453
ng2-components/ng2-activiti-tasklist/README.md
View File

@@ -1,35 +1,4 @@
# Activiti Task List Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-activiti-tasklist'>
<img src='https://img.shields.io/npm/dt/ng2-activiti-tasklist.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# APS Task List Component
Displays lists of process instances both active and completed, using any defined process filter, and
render details of any chosen instance.
@@ -39,140 +8,24 @@ render details of any chosen instance.
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
Follow the 3 steps below:
```sh
npm install ng2-activiti-tasklist
```
1. Npm
```sh
npm install ng2-activiti-tasklist --save
```
2. Html
Include these dependencies in your index.html page:
```html
<!-- Moment js -->
<script src="node_modules/moment/min/moment.min.js"></script>
<!-- Date picker -->
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
<!-- 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">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-activiti-form
- ng2-alfresco-datatable
- ng2-activiti-tasklist
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
## Basic usage example Activiti Task List
## Activiti Task List
This component renders a list containing all the tasks matched by the parameters specified.
```html
<activiti-tasklist [appId]="'1'" [state]="'open'" [assignment]="'assignee'"></activiti-tasklist>
```
Usage example of this component :
**main.ts**
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
import { CoreModule, AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
@Component({
selector: 'alfresco-app-demo',
template: `
<activiti-tasklist
[appId]="appId"
[state]="state"
[assignment]="assignment"
[data]="dataTasks">
</activiti-tasklist>
`
})
class MyDemoApp {
dataTasks: ObjectDataTableAdapter;
appId: string = '1';
assignment: string = 'assignee';
state: string = 'open';
constructor(private authService: AlfrescoAuthenticationService,
private settingsService: AlfrescoSettingsService) {
settingsService.bpmHost = 'http://localhost:9999';
this.authService.login('admin', 'admin').subscribe(
ticket => console.log(ticket),
error => console.log(error)
);
this.dataTasks = new ObjectDataTableAdapter([], [
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
{type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
]);
this.dataTasks.setSorting(new DataSorting('started', 'desc'));
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
ActivitiTaskListModule.forRoot()
],
declarations: [MyDemoApp],
bootstrap: [MyDemoApp]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
<activiti-tasklist
[appId]="'1'"
[state]="'open'"
[assignment]="'assignee'">
</activiti-tasklist>
```
You can also use HTML-based schema declaration like shown below:
@@ -205,22 +58,21 @@ Here's the list of available properties you can define for a Data Column definit
| Name | Description |
| --- | --- |
| `onSuccess` | The event is emitted when the task list is loaded |
| `rowClick` | The event is emitted when the task in the list is clicked |
| onSuccess | Raised when the task list is loaded |
| rowClick | Raised when the task in the list is clicked |
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
|`appId`| { string } || The id of the app. |
|`processDefinitionKey`| { string } || The processDefinitionKey of the process. |
|`assignment`| { string } || The assignment of the process. <ul>Possible values are: <li>assignee : where the current user is the assignee</li> <li>candidate: where the current user is a task candidate </li><li>group_x: where the task is assigned to a group where the current user is a member of.</li> <li>no value: where the current user is involved</li> </ul> |
|`state`| { string } || Define state of the processes. Possible values are: completed, active |
|`hasIcon` | boolean | true | Show/Hide the icon on the left . |
|`landingTaskId`| { string } | | Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task |
|`sort`| { string } ||Define the sort of the processes. Possible values are : created-desc, created-asc, due-desc, due-asc |
| `data` | { DataTableAdapter }| (optional)|JSON object that represent the number and the type of the columns that you want show
| appId | string || The id of the app. |
| processDefinitionKey | string || The processDefinitionKey of the process. |
| assignment | string || The assignment of the process. <ul>Possible values are: <li>assignee : where the current user is the assignee</li> <li>candidate: where the current user is a task candidate </li><li>group_x: where the task is assigned to a group where the current user is a member of.</li> <li>no value: where the current user is involved</li> </ul> |
| state | string || Define state of the processes. Possible values are: `completed`, `active` |
| hasIcon | boolean | true | Toggle the icon on the left . |
| landingTaskId | string | | Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task |
| sort | string | | Define the sort of the processes. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
| data | DataTableAdapter | | JSON object that represent the number and the type of the columns that you want show |
Example:
@@ -233,42 +85,44 @@ Example:
]
```
## Basic usage example Activiti Task Details
## Activiti Task Details
The component shows the details of the task id passed in input
```html
<activiti-task-details [taskId]="taskId"></activiti-task-details>
<activiti-task-details
[taskId]="taskId">
</activiti-task-details>
```
#### Properties
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `taskId` | string | | (**required**) The id of the task details that we are asking for. |
| `showNextTask` | boolean | true | Automatically render the next one, when the task is completed. |
| `showFormTitle` | boolean | true | Toggle rendering of the form title. |
| `readOnlyForm` | boolean | false | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
| `showFormRefreshButton` | true | optional | Toggle rendering of the `Refresh` button. |
| `showFormSaveButton` | true | optional | Toggle rendering of the `Save` outcome button. |
| `showFormCompleteButton` | true | optional | Toggle rendering of the Form `Complete` outcome button |
| `peopleIconImageUrl` | string | | Define a custom people icon image |
| `showHeader` | boolean | true | Toggle task details Header component |
| `showHeaderContent` | boolean | true | Toggle collapsed/expanded state of the Header component |
| `showInvolvePeople` | boolean | true | Toggle `Involve People` feature for Header component |
| `showComments` | boolean | true | Toggle `Comments` feature for Header component |
| `showChecklist` | boolean | true | Toggle `Checklist` feature for Header component |
| taskId | string | | (**required**) The id of the task details that we are asking for. |
| showNextTask | boolean | true | Automatically render the next one, when the task is completed. |
| showFormTitle | boolean | true | Toggle rendering of the form title. |
| readOnlyForm | boolean | false | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
| showFormRefreshButton | boolean | true | Toggle rendering of the `Refresh` button. |
| showFormSaveButton | boolean | true| Toggle rendering of the `Save` outcome button. |
| showFormCompleteButton | boolean | true | Toggle rendering of the Form `Complete` outcome button |
| peopleIconImageUrl | string | | Define a custom people icon image |
| showHeader | boolean | true | Toggle task details Header component |
| showHeaderContent | boolean | true | Toggle collapsed/expanded state of the Header component |
| showInvolvePeople | boolean | true | Toggle `Involve People` feature for Header component |
| showComments | boolean | true | Toggle `Comments` feature for Header component |
| showChecklist | boolean | true | Toggle `Checklist` feature for Header component |
#### Events
### Events
| Name | Description |
| --- | --- |
| `formLoaded` | Invoked when form is loaded or reloaded. |
| `formSaved` | Invoked when form is submitted with `Save` or custom outcomes. |
| `formCompleted` | Invoked when form is submitted with `Complete` outcome. |
| `taskCreated` | Invoked when a checklist task is created. |
| `executeOutcome` | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
| `onError` | Invoked at any error |
| formLoaded | Raised when form is loaded or reloaded. |
| formSaved | Raised when form is submitted with `Save` or custom outcomes. |
| formCompleted | Raised when form is submitted with `Complete` outcome. |
| taskCreated | Raised when a checklist task is created. |
| executeOutcome | Raised when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
| onError | Raised at any error |
### Custom 'empty Activiti Task Details' template
@@ -293,40 +147,47 @@ This can be changed by adding the following custom html template:
Note that can put any HTML content as part of the template, includuing other Angualr components.
## Basic usage example Activiti Apps
## Activiti Apps Component
The component shows all the available apps.
```html
<activiti-apps [layoutType]="'GRID'"></activiti-apps>
<activiti-apps
[layoutType]="'GRID'">
</activiti-apps>
```
#### Events
### Properties
| Name | Type | Description |
| --- | --- | --- |
| layoutType | string | (**required**) Define the layout of the apps. There are two possible values: GRID or LIST. |
| filtersAppId | Object | Provide a way to filter the apps to show. |
### Events
| Name | Description |
| --- | --- |
| `appClick` | Invoked when an app is clicked |
#### Options
| Name | Type | Required | Description |
| --- | --- | --- | --- |
| `layoutType` | {string} | required | Define the layout of the apps. There are two possible values: GRID or LIST. |
| `filtersAppId` | {Object} | | Provide a way to filter the apps to show. |
| appClick | Raised when an app entry is clicked |
### How filter the activiti apps
If you want show some specific apps you can specify them through the filtersAppId parameters
```html
<activiti-apps [filtersAppId]="'[{defaultAppId: 'tasks'}, {deploymentId: '15037'}, {name : 'my app name'}]'"></activiti-apps>
<activiti-apps
[filtersAppId]="'[
{defaultAppId: 'tasks'},
{deploymentId: '15037'},
{name : 'my app name'}]'">
</activiti-apps>
```
In this specific case only the Tasks app, the app with deploymentId 15037 and the app with "my app name" will be showed
![how-filter-apps](docs/assets/how-filter-apps.png)
You can use inside the filter one of the following property
```json
{
"defaultAppId": "string",
@@ -338,7 +199,7 @@ You can use inside the filter one of the following property
}
```
## Basic usage example Activiti Filter
## Activiti Filter
The component shows all the available filters.
@@ -346,33 +207,37 @@ The component shows all the available filters.
<activiti-filters></activiti-filters>
```
#### Events
### Properties
| Name | Type | Description |
| --- | --- | --- |
| filterParam | [FilterParamsModel](#filterparamsmodel) | The params to filter the task filter. If there is no match the default one (first filter of the list) is selected |
| appId | string | Display filters available to the current user for the application with the specified ID. |
| `appName` | string | Display filters available to the current user for the application with the specified name. |
| `hasIcon` | boolean | Toggle to show or not the filter's icon. |
If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored.
### Events
| Name | Description |
| --- | --- |
| `filterClick` | The event is emitted when the filter in the list is clicked |
| `onSuccess` | The event is emitted when the list is loaded |
| `onError` | The event is emitted if there is an error during the loading |
#### Options
| Name | Type | Required | Description |
| --- | --- | --- | --- |
| `filterParam` | {[Filter Params models](#filter-params--models)} | optional | The params to filter the task filter. If there is no match the default one (first filter of the list) is selected |
| `appId` | {string} | optional | Display filters available to the current user for the application with the specified ID. |
| `appName` | {string} | optional | Display filters available to the current user for the application with the specified name. |
| `hasIcon` | {boolean} | optional | Toggle to show or not the filter's icon. |
If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored.
| filterClick | Raised when the filter in the list is clicked |
| onSuccess | Raised when the list is loaded |
| onError | Raised if there is an error during the loading |
### How filter the activiti task filters
```html
<activiti-filters [filterParam]="{name:'My tasks'}"></activiti-filters>
```
<activiti-filters
[filterParam]="{name:'My tasks'}">
</activiti-filters>
```
You can use inside the filterParam one of the following property.
## Filter Params models
### FilterParamsModel
```json
{
"id": "number",
@@ -381,13 +246,11 @@ You can use inside the filterParam one of the following property.
}
```
| Name | Description |
| --- | --- |
| `id` | The id of the task filter |
| `name` | The name of the task filter, lowercase is checked |
| `index` | The position of the filter in the array. The first position is 0 |
| Name | Type | Description |
| --- | --- | --- |
| id | string | The id of the task filter |
| name | string | The name of the task filter, lowercase is checked |
| index | string | The zero-based position of the filter in the array. |
### How to create an accordion menu with the task filter
@@ -410,124 +273,90 @@ The AccordionComponent is exposed by the alfresco-core.
![how-create-accordion-menu](docs/assets/how-to-create-accordion-menu.png)
## Basic usage example Activiti Checklist
## Activiti Checklist Component
The component shows the checklist task functionality.
```html
<activiti-checklist></activiti-checklist>
<activiti-checklist
[readOnly]="false"
[taskId]="taskId"
[assignee]="taskAssignee.id"
</activiti-checklist>
```
#### Options
### Properties
| Name | Type | Required | Description |
| --- | --- | --- | --- |
| `taskId` | {string} | required | The id of the parent task which sub tasks are attached on. |
| `readOnlyForm` | {boolean} | optional | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
| `assignee` | {string} | required | The assignee id where the subtasks are assigned to. |
| Name | Type | Description |
| --- | --- | --- |
| taskId | string | (**required**) The id of the parent task which sub tasks are attached on. |
| readOnlyForm | boolean | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
| assignee | string | (**required**) The assignee id where the subtasks are assigned to. |
## Basic usage example Activiti Checklist
The component shows all the available filters.
```html
<activiti-checklist [readOnly]="false" [taskId]="taskId" [assignee]="taskAssignee.id" #activitichecklist></activiti-checklist>
```
### Task Attachment List component
## Task Attachment List Component
This component displays attached documents on a specified task
```html
<adf-task-attachment-list [taskId]="YOUR_TASK_ID"
(attachmentClick)="YOUR_ATTACHMENT_CLICK_EMITTER_HANDLER"></adf-task-attachment-list>
<adf-task-attachment-list
[taskId]="YOUR_TASK_ID"
(attachmentClick)="YOUR_HANDLER">
</adf-task-attachment-list>
```
![task-attachment-list-sample](docs/assets/task-attachment-list.png)
#### Options
### Properties
| Name | Type | Description |
| --- | --- | --- |
| taskId | string | (**required**): The ID of the task to display |
### Events
| Name | Description |
| --- | --- |
| `taskId` | (required): The numeric ID of the task to display |
| attachmentClick | Raised when the attachment double clicked or selected view option from context menu by the user from within the component and return a Blob obj of the object clicker|
| success | Raised when the attachment list fetch all the attach and return a list of attachments |
| error | Raised when the attachment list is not able to fetch the attachments for example network error |
#### Events
| Name | Description |
| --- | --- |
| `attachmentClick` | Emitted when the attachment double clicked or selected view option from context menu by the user from within the component and return a Blob obj of the object clicker|
| `success` | Emitted when the attachment list fetch all the attach and return a list of attachments |
| `error` | Emitted when the attachment list is not able to fetch the attachments for example network error |
### Create Task Attachment component
## Create Task Attachment Component
This component displays Upload Component(Drag and Click) to upload the attachment to a specified task
```html
<adf-create-task-attachment [taskId]="YOUR_TASK_ID"
(error)="YOUR_CREATE_ATTACHMENT_ERROR_HANDLER"
(success)="YOUR_CREATE_ATTACHMENT_SUCCESS_HANDLER"></adf-create-task-attachment>
<adf-create-task-attachment
[taskId]="YOUR_TASK_ID"
(error)="YOUR_CREATE_ATTACHMENT_ERROR_HANDLER"
(success)="YOUR_CREATE_ATTACHMENT_SUCCESS_HANDLER">
</adf-create-task-attachment>
```
![task-create-attachment](docs/assets/task-create-attachment.png)
#### Options
### Properties
| Name | Description |
| --- | --- |
| `taskId` | (required): The numeric ID of the task to display |
| Name | Type | Description |
| --- | --- | --- |
| taskId | string | (**required**): The numeric ID of the task to display |
#### Events
| Name | Description |
| --- | --- |
| `error` | Emitted when the error occured while creating/uploading the attachment by the user from within the component |
| `success` | Emitted when the attachement created/uploaded successfully from within the component |
| error | Raised when the error occured while creating/uploading the attachment by the user from within the component |
| success | Raised when the attachement created/uploaded successfully from within the component |
## 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
npm run build
```
## Running unit tests
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
## NPM scripts
@@ -538,6 +367,16 @@ npm start
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## Demo
Please check the demo folder for a demo project
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

166
ng2-components/ng2-alfresco-core/README.md
View File

@@ -1,46 +1,16 @@
# Alfresco Angular Components Core
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-alfresco-core'>
<img src='https://img.shields.io/npm/dt/ng2-alfresco-core.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# Alfresco Core Library
## 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).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
```sh
npm install --save ng2-alfresco-core
npm install ng2-alfresco-core
```
## Library content
@@ -244,7 +214,6 @@ for example you may want drawing a dashed border around the table row on drag:
Provides access to initialized **AlfrescoJSApi** instance.
```ts
export class MyComponent implements OnInit {
constructor(private apiService: AlfrescoApiService) {
@@ -345,6 +314,7 @@ export class MyComponent implements OnInit {
```
## Accordion Component
The component provide a way to easy create an accordion menu. You can customize the header and the icon.
```html
@@ -370,15 +340,14 @@ export class MyComponent implements OnInit {
}
```
### Options
| Name | Type | Required | Description |
| --- | --- | --- | --- |
| `heading` | {string} | optional | The header title. |
| `isSelected` | {boolean} | optional | Define if the accordion group is selected or not. |
| `headingIcon` | {string} | optional | The material design icon. |
| `hasAccordionIcon` | {boolean} | optional | Define if the accordion (expand) icon needs to be shown or not, the default value is true |
### Properties
| Name | Type | Description |
| --- | --- | --- |
| heading | string | The header title. |
| isSelected | boolean | Define if the accordion group is selected or not. |
| headingIcon | string | The material design icon. |
| hasAccordionIcon | boolean | Define if the accordion (expand) icon needs to be shown or not, the default value is true |
## Authentication Service
@@ -391,74 +360,24 @@ The authentication service is used inside the [login component](../ng2-alfresco-
| onLogin | Raised when user logs in |
| onLogout | Raised when user logs out |
**app.component.ts**
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
@Component({
selector: 'alfresco-app-demo',
template: `
<div *ngIf="!authenticated" >
Authentication failed to ip {{ ecmHost }} with user: admin, admin
</div>
<div *ngIf="authenticated">
<H5>ECM</H5>
Authentication successfull to ip {{ ecmHost }} with user: admin, admin<br>
your token is {{ tokenEcm }}<br>
<H5>BPM</H5>
Authentication successfull to ip {{ bpmHost }} with user: admin, admin<br>
your token is {{ tokenBpm }}<br>
</div>
`
})
class MyDemoApp {
authenticated: boolean = false;
ecmHost: string = 'http://localhost:8080';
bpmHost: string = 'http://localhost:9999';
tokenBpm: string;
tokenEcm: string;
constructor(public alfrescoAuthenticationService: AlfrescoAuthenticationService,
private alfrescoSettingsService: AlfrescoSettingsService) {
alfrescoSettingsService.ecmHost = this.ecmHost;
alfrescoSettingsService.bpmHost = this.bpmHost;
alfrescoSettingsService.setProviders('ALL');
}
ngOnInit() {
this.login();
}
login() {
@Component({...})
export class AppComponent {
constructor(authService: AlfrescoAuthenticationService) {
this.alfrescoAuthenticationService.login('admin', 'admin').subscribe(
token => {
this.tokenBpm = this.alfrescoAuthenticationService.getTicketBpm();
this.tokenEcm = this.alfrescoAuthenticationService.getTicketEcm();
this.authenticated = true;
console.log(token);
},
error => {
console.log(error);
this.authenticated = false;
});
}
);
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot()
],
declarations: [MyDemoApp],
bootstrap: [MyDemoApp]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
```
## AlfrescoTranslationService
@@ -468,7 +387,7 @@ and registering path to it's parent `i18n` folder:
```ts
class MainApplication {
constructor(private translateService: AlfrescoTranslationService) {
constructor(translateService: AlfrescoTranslationService) {
translateService.addTranslationFolder('app', 'resources');
}
}
@@ -523,40 +442,15 @@ npm run build
## 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
npm run build
```
### Build the files and keep watching for changes
```sh
$ npm run build:w
```
## Running unit tests
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
## NPM scripts
@@ -567,6 +461,16 @@ npm run coverage
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## Demo
Please check the demo folder for a demo project
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

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

@@ -1,36 +1,4 @@
# DataTable Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-alfresco-datatable'>
<img src='https://img.shields.io/npm/dt/ng2-alfresco-datatable.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# DataTable Component
See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/)
@@ -39,81 +7,29 @@ See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/
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).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
Follow the 3 steps below:
1. Npm
```sh
npm install ng2-alfresco-datatable --save
```
2. Html
Include these dependencies in your index.html page:
```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">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-alfresco-datatable
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
```sh
npm install ng2-alfresco-datatable
```
## Basic usage
**my.component.ts**
**app.component.html**
```html
<alfresco-datatable
[data]="data">
</alfresco-datatable>
```
**app.component.ts**
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule } from 'ng2-alfresco-core';
import { DataTableModule, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
@Component({
selector: 'alfresco-app-demo',
template: `
<alfresco-datatable [data]="data">
</alfresco-datatable>
`
})
@Component({...})
export class DataTableDemo {
data: ObjectDataTableAdapter;
@@ -143,46 +59,28 @@ export class DataTableDemo {
);
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
DataTableModule.forRoot()
],
declarations: [DataTableDemo],
bootstrap: [DataTableDemo]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
```
![DataTable demo](docs/assets/datatable-demo.png)
You can also use HTML-based schema declaration like shown below:
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule } from 'ng2-alfresco-core';
import { DataTableModule, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
```html
<alfresco-datatable [data]="data">
<data-columns>
<data-column key="icon" type="image" [sortable]="false"></data-column>
<data-column key="id" title="Id"></data-column>
<data-column key="createdOn" title="Created"></data-column>
<data-column key="name" title="Name" class="full-width name-column"></data-column>
<data-column key="createdBy.name" title="Created By"></data-column>
</data-columns>
</alfresco-datatable>
```
@Component({
selector: 'alfresco-app-demo',
template: `
<alfresco-datatable [data]="data">
<data-columns>
<data-column key="icon" type="image" [sortable]="false"></data-column>
<data-column key="id" title="Id"></data-column>
<data-column key="createdOn" title="Created"></data-column>
<data-column key="name" title="Name" class="full-width name-column"></data-column>
<data-column key="createdBy.name" title="Created By"></data-column>
</data-columns>
</alfresco-datatable>
`
})
```ts
import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
@Component({...})
export class DataTableDemo {
data: ObjectDataTableAdapter;
@@ -208,36 +106,23 @@ export class DataTableDemo {
);
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
DataTableModule.forRoot()
],
declarations: [DataTableDemo],
bootstrap: [DataTableDemo]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
```
### DataTable Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `selectionMode` | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
| `rowStyle` | string | | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples |
| `rowStyleClass` | string | | The CSS class to apply to every row |
| `data` | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
| `rows` | Object[] | [] | The rows that the datatable should show |
| `multiselect` | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
| `actions` | boolean | false | Toggles data actions column |
| `actionsPosition` | string (left\|right) | right | Position of the actions dropdown menu. |
| `fallbackThumbnail` | string | | Fallback image for row ehre thubnail is missing|
| `contextMenu` | boolean | false | Toggles custom context menu for the component |
| `allowDropFiles` | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
| rowStyle | string | | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples |
| rowStyleClass | string | | The CSS class to apply to every row |
| data | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
| rows | Object[] | [] | The rows that the datatable should show |
| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
| actions | boolean | false | Toggles data actions column |
| actionsPosition | string (left\|right) | right | Position of the actions dropdown menu. |
| fallbackThumbnail | string | | Fallback image for row ehre thubnail is missing|
| contextMenu | boolean | false | Toggles custom context menu for the component |
| allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
### DataColumn Properties
@@ -586,23 +471,21 @@ let data = [
let schema = ObjectDataTableAdapter.generateSchema(data);
/*Auto generated schema value:
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: false
},
{
type: 'text',
key: 'name',
title: 'Name',
sortable: false
}
]
*/
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: false
},
{
type: 'text',
key: 'name',
title: 'Name',
sortable: false
}
]
*/
```
@@ -617,60 +500,31 @@ The pagination object is a generic component to paginate component. The Alfresco
| Name | Type | Default | Description
| --- | --- | --- | --- |
| `supportedPageSizes` | numer[] | [5, 10, 20, 50, 100] | This array describe the set of options showed in the pick list |
| `maxItems` | boolean | false | Max number of element showed per page. If you pick another size from the pick list this option will be overwritten |
| `pagination` | Pagination | {count: 0, totalItems: 0, skipCount: 0, maxItems: 20 , hasMoreItems: true} | The Alfresco Api return a pagination object, you can use it to feed the pagination component, or create your own. |
| supportedPageSizes | numer[] | [5, 10, 20, 50, 100] | This array describe the set of options showed in the pick list |
| maxItems | boolean | false | Max number of element showed per page. If you pick another size from the pick list this option will be overwritten |
| pagination | Pagination | {count: 0, totalItems: 0, skipCount: 0, maxItems: 20 , hasMoreItems: true} | The Alfresco Api return a pagination object, you can use it to feed the pagination component, or create your own. |
### Events
| Name | Description
| --- | --- |
| `changePageSize` | Emitted when user picks one of the options from the pick list |
| `nextPage` | Emitted when user clicks next page button |
| `prevPage` | Emitted when user clicks prev page button |
| changePageSize | Emitted when user picks one of the options from the pick list |
| nextPage | Emitted when user clicks next page button |
| prevPage | Emitted when user clicks prev page button |
All the events carry with them the current pagination object.
## 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
npm run build
```
## Running unit tests
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
## NPM scripts
@@ -681,6 +535,16 @@ npm start
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## Demo
Please check the demo folder for a demo project
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

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

@@ -1,103 +1,21 @@
# DocumentList Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-alfresco-documentlist'>
<img src='https://img.shields.io/npm/dt/ng2-alfresco-documentlist.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# DocumentList Component
## Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## See also
- [Walkthrough: adding indicators to clearly highlight information about a node](docs/metadata-indicators.md)
## Install
Follow the 3 steps below:
1. Npm
```sh
npm install ng2-alfresco-documentlist --save
```
2. Html
Include these dependencies in your index.html page:
```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">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-alfresco-datatable
- ng2-alfresco-documentlist
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
```sh
npm install ng2-alfresco-documentlist
```
## Basic usage
@@ -111,93 +29,34 @@ Follow the 3 steps below:
</alfresco-document-list>
```
Usage example of this component :
**main.ts**
```ts
import { NgModule, Component, ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule } from 'ng2-alfresco-core';
import { DocumentListModule, DocumentList } from 'ng2-alfresco-documentlist';
import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
@Component({
selector: 'alfresco-app-demo',
template: `
<alfresco-document-list
#documentList
[currentFolderId]="'-my-'"
[contextMenuActions]="true"
[contentActions]="true"
[creationMenuActions]="true">
</alfresco-document-list>
`
})
class DocumentListDemo {
@ViewChild(DocumentList)
documentList: DocumentListComponent;
constructor(private authService: AlfrescoAuthenticationService,
private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
this.documentList.reload();
},
error => {
console.log(error);
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
DocumentListModule.forRoot()
],
declarations: [DocumentListDemo],
bootstrap: [DocumentListDemo]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
```
### Properties
## Properties
The properties currentFolderId, folderNode and node are the entry initialization properties of the document list. They can not be used together, choose the one that suites more your use case.
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `selectionMode` | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
| `rowStyle` | string | | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples |
| `rowStyleClass` | string | | The CSS class to apply to every row |
| `currentFolderId` | string | null | Initial node ID of displayed folder. Can be `-root-`, `-shared-`, `-my-`, or a fixed node ID |
| `folderNode` | `MinimalNodeEntryEntity` | null | Currently displayed folder node |
| `node` | `NodePaging` | null | Document list will show all the node contained in the NodePaging entity |
| `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 |
| `fallbackThumbnail` | string | | Path to fallback image to use if the row thumbnail is missing |
| `multiselect` | boolean | false | Toggles multiselect mode |
| `contentActions` | boolean | false | Toggles content actions for each row |
| `contentActionsPosition` | string (left\|right) | right | Position of the content actions dropdown menu. |
| `contextMenuActions` | boolean | false | Toggles context menus for each row |
| `enablePagination` | boolean | true | Shows pagination |
| `creationMenuActions` | boolean | true | Toggles the creation menu actions |
| `rowFilter` | `RowFilter` | | Custom row filter, [see more](#custom-row-filter). |
| `imageResolver` | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver). |
| `allowDropFiles` | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
| `sorting` | string[] | | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override default sorting detected by the component based on columns. |
| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
| rowStyle | string | | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples |
| rowStyleClass | string | | The CSS class to apply to every row |
| currentFolderId | string | null | Initial node ID of displayed folder. Can be `-root-`, `-shared-`, `-my-`, or a fixed node ID |
| folderNode | `MinimalNodeEntryEntity` | null | Currently displayed folder node |
| node | `NodePaging` | null | Document list will show all the node contained in the NodePaging entity |
| 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 |
| fallbackThumbnail | string | | Path to fallback image to use if the row thumbnail is missing |
| multiselect | boolean | false | Toggles multiselect mode |
| contentActions | boolean | false | Toggles content actions for each row |
| contentActionsPosition | string (left\|right) | right | Position of the content actions dropdown menu. |
| contextMenuActions | boolean | false | Toggles context menus for each row |
| enablePagination | boolean | true | Shows pagination |
| creationMenuActions | boolean | true | Toggles the creation menu actions |
| rowFilter | `RowFilter` | | Custom row filter, [see more](#custom-row-filter). |
| imageResolver | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver). |
| allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
| sorting | string[] | | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override default sorting detected by the component based on columns. |
### Events
## Events
| Name | Description |
| --- | --- |
@@ -210,7 +69,7 @@ _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._
### DOM Events
## DOM Events
Below are the DOM events the DocumentList component emits.
All of them are `bubbling`, meaning you can handle them in any component up the parent hierarchy, even if DocumentList is wrapped by another component(s).
@@ -229,7 +88,7 @@ Every event is represented by a [CustomEvent](https://developer.mozilla.org/en/d
}
```
#### Handling DOM events
## Handling DOM events
Here's a basic example on handling DOM events in the parent elements:
@@ -246,7 +105,7 @@ Here's a basic example on handling DOM events in the parent elements:
</div>
```
### Setting default folder
## Setting default folder
You can set current folder path by assigning a value for `currentFolderId` property.
It can be either one of the well-known locations as **-root-**, **-shared-** or **-my-** or a node ID (guid).
@@ -294,12 +153,14 @@ It helps examining other valuable information you can have access to if needed:
**Important note**: for this particular scenario you must also trigger `changeDetector.detectChanges()` as in the example above.
### Calling DocumentList api directly
## Calling DocumentList api directly
Typically you will be binding DocumentList properties to your application/component class properties:
```html
<alfresco-document-list [currentFolderId]="myStartFolder"></alfresco-document-list>
<alfresco-document-list
[currentFolderId]="myStartFolder">
</alfresco-document-list>
```
with the underlying class being implemented similar to the following one:
@@ -363,7 +224,7 @@ It is important accessing child components at least at the `AfterViewInit` state
Any UI click (buttons, links, etc.) event handlers are absolutely fine. This cannot be `ngOnInit` event though.
You can get more details in [Component lifecycle hooks](https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html) article.
### Breadcrumb Component
## Breadcrumb Component
DocumentList provides simple breadcrumb element to indicate the current position within a navigation hierarchy.
@@ -376,14 +237,14 @@ DocumentList provides simple breadcrumb element to indicate the current position
![Breadcrumb](docs/assets/breadcrumb.png)
#### Properties
### Properties
| Name | Type | Description |
| --- | --- | --- |
| `target` | DocumentListComponent | DocumentList component to operate with. Upon clicks will instruct the given component to update. |
| `folderNode` | MinimalNodeEntryEntity | Active node, builds UI based on `folderNode.path.elements` collection. |
| target | DocumentListComponent | DocumentList component to operate with. Upon clicks will instruct the given component to update. |
| folderNode | MinimalNodeEntryEntity | Active node, builds UI based on `folderNode.path.elements` collection. |
### Creation Menu Action
## Creation Menu Action
DocumentList provides simple creation menu actions that provide the action to create a new folder.
@@ -400,7 +261,7 @@ When the "New Folder" button is pressed the dialog appears.
![Creation Menu Action](docs/assets/document-list-creation-menu-actions-2.png)
### Custom columns
## Custom columns
It is possible to reorder, extend or completely redefine data columns displayed by the component.
By default special `$thumbnail` and `displayName` columns are rendered.
@@ -451,7 +312,7 @@ You can also use HTML-based schema declaration used by DataTable, TaskList and o
</alfresco-datatable>
```
#### DataColumn Properties
### DataColumn Properties
Here's the list of available properties you can define for a Data Column definition.
@@ -509,25 +370,25 @@ Here's a short example:
</alfresco-document-list>
```
### Column definition
## Column definition
Properties:
| Name | Type | Default | Description
| --- | --- | --- | --- |
| `title` | string | | Column title |
| `sr-title` | string | | Screen reader title, used only when `title` is empty |
| `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 |
| `template` | `TemplateRef<any>` | | Column template |
| title | string | | Column title |
| sr-title | string | | Screen reader title, used only when `title` is empty |
| 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 |
| template | `TemplateRef<any>` | | Column template |
For `date` column type the [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) formatting is used.
For a full list of available `format` values please refer to [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) documentation.
#### Column Template
### Column Template
It is possible providing custom column/cell template that may contain other Angular components or HTML elmements:
@@ -657,6 +518,7 @@ All system handler names are case-insensitive, `handler="download"` and `handler
will trigger the same `download` action.
##### Delete - Show notification message with no permission
You can show a notification error when the user don't have the right permission to perform the action.
The ContentActionComponent provides the event permissionEvent that is raised when the permission specified in the permission property is missing
You can subscribe to this event from your component and use the NotificationService to show a message.
@@ -675,13 +537,14 @@ You can subscribe to this event from your component and use the NotificationServ
</content-actions>
</alfresco-document-list>
```
```ts
export class MyComponent {
onPermissionsFailed(event: any) {
this.notificationService.openSnackMessage(`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000);
}
onPermissionsFailed(event: any) {
this.notificationService.openSnackMessage(`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000);
}
}
```
@@ -689,6 +552,7 @@ onPermissionsFailed(event: any) {
![Delete show notification message](docs/assets/content-action-notification-message.png)
##### Delete - Disable button checking the permission
You can easily disable a button when the user doesn't own the permission to perform the action related to the button.
The ContentActionComponent provides the property permission that must contain the permission to check and a property disableWithNoPermission that can be true if
you want see the button disabled.
@@ -809,7 +673,8 @@ The following navigation modes are supported:
The following example switches navigation to single clicks:
```html
<alfresco-document-list [navigationMode]="'click'">
<alfresco-document-list
[navigationMode]="'click'">
</alfresco-document-list>
```
@@ -819,11 +684,11 @@ DocumentList emits the following events:
| Name | Description |
| --- | --- |
| `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 |
| `permissionError` | emitted when user is attempting to create a folder via action menu but it doesn't have the permission to do it |
| 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 |
| permissionError | emitted when user is attempting to create a folder via action menu but it doesn't have the permission to do it |
## Advanced usage and customization
@@ -841,6 +706,7 @@ myFilter(row: ShareDataRow): boolean {
_Note that for the sake of simplicity the example code below was reduced to the main points of interest only._
**View1.component.html**
```html
<alfresco-document-list
[rowFilter]="folderFilter">
@@ -1088,44 +954,15 @@ 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
npm run build
```
## Running unit tests
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
## NPM scripts
@@ -1136,6 +973,16 @@ npm start
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## Demo
Please check the demo folder for a demo project
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

222
ng2-components/ng2-alfresco-login/README.md
View File

@@ -1,137 +1,39 @@
# Alfresco Core Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-alfresco-login'>
<img src='https://img.shields.io/npm/dt/ng2-alfresco-login.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# Login Component
## 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).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
See it live: [Login Quickstart](http://embed.plnkr.co/PfZytJyHcl3xIsa8pdMo/)
## Install
Follow the 3 steps below:
1. Npm
```sh
npm install ng2-alfresco-login --save
```
2. Html
Include these dependencies in your index.html page:
```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">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- ng2-alfresco-core
- alfresco-js-api
- ng2-alfresco-login
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
```sh
npm install ng2-alfresco-login
```
## Basic usage
This component allow to authenticate to Alfresco One and Alfresco Activiti.
**app.component.html**
```html
<alfresco-login [providers]="'ALL'"></alfresco-login>
<alfresco-login
[providers]="'ALL'"
(onSuccess)="mySuccessMethod($event)"
(onError)="myErrorMethod($event)">
</alfresco-login>
```
Usage example of this component :
**main.ts**
**app.component.ts**
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { LoginModule } from 'ng2-alfresco-login';
@Component({
selector: 'my-app',
template: `
<alfresco-login [providers]="'ALL'"
[disableCsrf]="true"
(onSuccess)="mySuccessMethod($event)"
(onError)="myErrorMethod($event)">
</alfresco-login>`
})
export class AppComponent {
constructor(public auth: AlfrescoAuthenticationService,
private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080/';
settingsService.bpmHost = 'http://localhost:9999/';
}
mySuccessMethod($event) {
console.log('Success Login EventEmitt called with: ' + $event.value);
}
@@ -140,42 +42,29 @@ export class AppComponent {
console.log('Error Login EventEmitt called with: ' + $event.value);
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
LoginModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
#### Properties
## Properties
| Name | Type | Default Value | Description |
| --- | --- | --- | --- |
| `providers` | string | ECM | Possible valid value are ECM, BPM or ALL. The default behaviour of this component will logged in only in the ECM . If you want log in in both system the correct value to use is ALL |
| `disableCsrf` | boolean | false | To prevent the CSRF Token from been submitted. Only for Activiti call |
| `needHelpLink` | string | '' | It will change the url of the NEED HELP link in the footer |
| `registerLink` | string | '' | It will change the url of the REGISTER link in the footer |
| `logoImageUrl` | string | Alfresco logo image | To change the logo image with a customised image |
| `backgroundImageUrl` | string | Alfresco background image | To change the background image with a customised image |
| `fieldsValidation` | { [key: string]: any; }, extra?: { [key: string]: any; } | | Use it to customise the validation rules of the login form |
| `showRememberMe` | boolean | false | Toggle `Remember me` checkbox visibility |
| `showLoginActions` | boolean | false | Toggle extra actions visibility (`Need Help`, `Register`, etc.) |
| providers | string | ECM | Possible valid value are ECM, BPM or ALL. The default behaviour of this component will logged in only in the ECM . If you want log in in both system the correct value to use is ALL |
| disableCsrf | boolean | false | To prevent the CSRF Token from been submitted. Only for Activiti call |
| needHelpLink | string | | It will change the url of the NEED HELP link in the footer |
| registerLink | string | | It will change the url of the REGISTER link in the footer |
| logoImageUrl | string | Alfresco logo image | To change the logo image with a customised image |
| backgroundImageUrl | string | Alfresco background image | To change the background image with a customised image |
| fieldsValidation | { [key: string]: any; }, extra?: { [key: string]: any; } | | Use it to customise the validation rules of the login form |
| showRememberMe | boolean | false | Toggle `Remember me` checkbox visibility |
| showLoginActions | boolean | false | Toggle extra actions visibility (`Need Help`, `Register`, etc.) |
#### Events
## Events
| Name | Description |
| --- | --- |
| `onSuccess` | The event is emitted when the login is done |
| `onError` | The event is emitted when the login fails |
| `executeSubmit` | The event is emitted when the form is submitted |
| onSuccess | Raised when the login is done |
| onError | Raised when the login fails |
| executeSubmit | Raised when the form is submitted |
## Change footer content
@@ -242,7 +131,7 @@ Alternatively you can bind to your component properties and provide values dynam
</alfresco-login>
```
#### Customize Validation rules
## Customize Validation rules
If needed it is possible customise the validation rules of the login
form. You can add/modify the default rules of the login form.
@@ -257,9 +146,13 @@ form. You can add/modify the default rules of the login form.
```
**MyCustomLogin.component.ts**
```ts
```ts
export class MyCustomLogin {
@ViewChild('alfrescologin')
alfrescologin: any;
customValidation: any;
constructor(public router: Router) {
@@ -276,7 +169,7 @@ export class MyCustomLogin {
}
```
#### Controlling form submit execution behaviour
## Controlling form submit execution behaviour
If absolutely needed it is possible taking full control over form
submit execution by means of `executeSubmit` event.
@@ -320,44 +213,15 @@ will also be executed after your custom code.**
## 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
npm run build
```
## Running unit tests
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
## NPM scripts
@@ -368,6 +232,16 @@ npm start
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## Demo
Please check the demo folder for a demo project
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

312
ng2-components/ng2-alfresco-search/README.md
View File

@@ -1,107 +1,27 @@
# Search Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-alfresco-search'>
<img src='https://img.shields.io/npm/dt/ng2-alfresco-search.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# Search Component
## 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).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
Follow the 3 steps below:
```sh
npm install ng2-alfresco-search
```
1. Npm
```sh
npm install ng2-alfresco-search --save
```
2. Html
Include these dependencies in your index.html page:
```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">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- ng2-alfresco-core
- alfresco-js-api
- ng2-alfresco-search
- ng2-alfresco-documentlist
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
#### Basic usage
## Basic usage
```html
<alfresco-search-control [searchTerm]="searchTerm"
inputType="search"
(searchChange)="onSearchChange($event);"
(searchSubmit)="onSearchSubmit($event);"
(fileSelect)="onSearchResultSelect($event);">
<alfresco-search-control
[searchTerm]="searchTerm"
inputType="search"
(searchChange)="onSearchChange($event);"
(searchSubmit)="onSearchSubmit($event);"
(fileSelect)="onSearchResultSelect($event);">
</alfresco-search-control>
```
@@ -109,180 +29,70 @@ Example of an component that uses the search control. In this example the search
but instead the component could emit an event to be consumed upstream, or it could trigger a change inside a search
results component embedded inside the same component.
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule } from 'ng2-alfresco-core';
import { SearchModule } from 'ng2-alfresco-search';
import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
## Properties
@Component({
selector: 'alfresco-app-demo',
template: `<alfresco-search-control [searchTerm]="'test'"></alfresco-search-control>`
})
class SearchDemo {
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| searchTerm | string | | Search term to pre-populate the field with |
| inputType | string | "text" | Type of the input field to render, e.g. "search" or "text" (default) |
| expandable | boolean | true | Whether to use an expanding search control, if false then a regular input is used. |
| autocomplete | boolean | true | Whether the browser should offer field auto-completion for the input field to the user. |
| liveSearchEnabled | boolean | true | Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable. |
| liveSearchRoot | boolean | "-root-" | NodeRef or node name where the search should start. |
| liveSearchResultType | boolean | | Node type to filter live search results by, e.g. 'cm:content'. |
| liveSearchMaxResults | boolean | 5 | Maximum number of results to show in the live search. |
| liveSearchResultSort | boolean | | Criteria to sort live search results by, must be one of "name" , "modifiedAt" or "createdAt" |
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
SearchModule
],
declarations: [SearchDemo],
bootstrap: [SearchDemo]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
```
#### Events
## Events
| Name | Description |
| --- | --- |
| `searchChange` | Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is at less than three characters in length then the term is truncated to an empty string. |
| `searchSubmit` | Emitted when the search form is submitted. The search term is provided in the 'value' property of the returned object. |
| `fileSelect` | Emitted when a file item from the list of find-as-you-type results is selected |
| `expand` | Emitted when the expanded state of the control changes based on focus events and the content of the input control |
| searchChange | Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is at less than three characters in length then the term is truncated to an empty string. |
| searchSubmit | Emitted when the search form is submitted. The search term is provided in the 'value' property of the returned object. |
| fileSelect | Emitted when a file item from the list of find-as-you-type results is selected |
| expand | Emitted when the expanded state of the control changes based on focus events and the content of the input control |
#### Options
| Name | Type | Optional | Default | Description |
| --- | --- | --- | --- | --- |
| `searchTerm` | {string} | (optional) | "" | Search term to pre-populate the field with |
| `inputType` | {string} | (optional) | "text" | Type of the input field to render, e.g. "search" or "text" (default) |
| `expandable` | {boolean} | (optional) | true | Whether to use an expanding search control, if false then a regular input is used. |
| `autocomplete` | {boolean} | (optional) | true | Whether the browser should offer field auto-completion for the input field to the user. |
| `liveSearchEnabled` | {boolean} | (optional) | true | Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable. |
| `liveSearchRoot` | {boolean} | (optional) | "-root-" | NodeRef or node name where the search should start. |
| `liveSearchResultType` | {boolean} | (optional) | (none) | Node type to filter live search results by, e.g. 'cm:content'. |
| `liveSearchMaxResults` | {boolean} | (optional) | 5 | Maximum number of results to show in the live search. |
| `iveSearchResultSort` | {boolean} | (optional) | (none) | Criteria to sort live search results by, must be one of "name" , "modifiedAt" or "createdAt" |
#### Basic usage Search results
## Basic usage Search results
```html
<alfresco-search [searchTerm]="searchTerm"></alfresco-search>
<alfresco-search
[searchTerm]="searchTerm">
</alfresco-search>
```
Example of an component that displays search results, using the Angular2 router to supply a 'q' parameter containing the
search term. If no router is present on the page of if the router does not provide such a parameter then an empty
results page will be shown.
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule } from 'ng2-alfresco-core';
import { SearchModule } from 'ng2-alfresco-search';
import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
@Component({
selector: 'alfresco-app-demo',
template: `<alfresco-search [searchTerm]="'test'"></alfresco-search>`
})
class SearchDemo {
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
SearchModule
],
declarations: [SearchDemo],
bootstrap: [SearchDemo]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
```
#### Events
| Name | Description |
| --- | --- |
| `preview` | emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration |
| `resultsLoad` | Emitted when search results have fully loaded |
#### Options
### Properties
| Name | Type | Optional | Default | Description |
| --- | --- | --- | --- | --- |
| `searchTerm` | {string} | (optional) | "" | Search term to use when executing the search. Updating this value will run a new search and update the results |
| `rootNodeId` | {boolean} | (optional) | "-root-" | NodeRef or node name where the search should start. |
| `resultType` | {boolean} | (optional) | (none) | Node type to filter search results by, e.g. 'cm:content'. |
| `maxResults` | {boolean} | (optional) | 20 | Maximum number of results to show in the search. |
| `resultSort` | {boolean} | (optional) | (none) | Criteria to sort search results by, must be one of "name" , "modifiedAt" or "createdAt" |
| `navigationMode` | {string} | (optional) | "dblclick" | Event used to initiate a navigation action to a specific result, one of "click" or "dblclick" |
| searchTerm | string | | Search term to use when executing the search. Updating this value will run a new search and update the results |
| rootNodeId | boolean | "-root-" | NodeRef or node name where the search should start. |
| resultType | boolean | | Node type to filter search results by, e.g. 'cm:content'. |
| maxResults | boolean | 20 | Maximum number of results to show in the search. |
| resultSort | boolean | | Criteria to sort search results by, must be one of "name" , "modifiedAt" or "createdAt" |
| navigationMode | string | "dblclick" | Event used to initiate a navigation action to a specific result, one of "click" or "dblclick" |
### Build from sources
### Events
Alternatively you can build component from sources with the following commands:
| Name | Description |
| --- | --- |
| preview | emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration |
| resultsLoad | Emitted when search results have fully loaded |
## Build from sources
```sh
npm install
npm run build
```
You can build component from sources with the following commands:
## Running unit tests
```sh
npm install
npm run build
```
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
## NPM scripts
@@ -293,6 +103,16 @@ platformBrowserDynamic().bootstrapModule(AppModule);
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
## Demo
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
Please check the demo folder for a demo project
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

255
ng2-components/ng2-alfresco-social/README.md
View File

@@ -1,268 +1,91 @@
# Alfresco Social Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-alfresco-social'>
<img src='https://img.shields.io/npm/dt/ng2-alfresco-social.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# Alfresco Social Component
## Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
Follow the 3 steps below:
```sh
npm install ng2-alfresco-social
```
1. Npm
## Basic usage
```sh
npm install ng2-alfresco-social --save
```
2. Html
Include these dependencies in your index.html page:
```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">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-alfresco-social
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
#### Basic usage
In this component are present two different components :
In this component are present two different components:
* adf-like
* adf-rating
## adf-like
```html
<adf-like [nodeId]="nodeId"></adf-like>
```
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
### Properties
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { SocialModule } from 'ng2-alfresco-social';
| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| nodeId | string | | The identifier of a node.|
@Component({
selector: 'alfresco-app-demo',
template: `<adf-like [nodeId]="'74cd8a96-8a21-47e5-9b3b-a1b3e296787d'"></adf-like>
`
})
class LikeDemo {
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
SocialModule
],
declarations: [ LikeDemo ],
bootstrap: [ LikeDemo ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
### Options
Attribute | Options | Default | Description | Mandatory
--- | --- | --- | --- | ---
`nodeId` | *string* | | The identifier of a node.|
#### Events
### Events
| Name | Description |
| --- | --- |
| `changeVote` | The event is emitted when vote change |
| changeVote | Raised when vote gets changed |
![Custom columns](docs/assets/social1.png)
## adf-rating
```html
<adf-rating [nodeId]="'74cd8a96-8a21-47e5-9b3b-a1b3e296787d'" ></adf-rating>
<adf-rating
[nodeId]="'74cd8a96-8a21-47e5-9b3b-a1b3e296787d'">
</adf-rating>
```
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
### Properties
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { SocialModule } from 'ng2-alfresco-social';
| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| nodeId | string | | The identifier of a node |
@Component({
selector: 'alfresco-app-demo',
template: `<adf-rating [nodeId]="'74cd8a96-8a21-47e5-9b3b-a1b3e296787d'></adf-rating>`
})
class RatingDemo {
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
SocialModule
],
declarations: [ RatingDemo ],
bootstrap: [ RatingDemo ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
### Options
Attribute | Options | Default | Description | Mandatory
--- | --- | --- | --- | ---
`nodeId` | *string* | | The identifier of a node.|
#### Events
### Events
| Name | Description |
| --- | --- |
| `changeVote` | The event is emitted when vote change |
| changeVote | Raised when vote gets changed |
![Custom columns](docs/assets/social2.png)
## 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
npm run build
```
## Running unit tests
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
```sh
npm test
```
## NPM scripts
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## Demo
If you want have a demo of how the component works, please check the demo folder :
Please check the demo folder for a demo project
```sh
cd demo
@@ -270,16 +93,6 @@ npm install
npm start
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

296
ng2-components/ng2-alfresco-tag/README.md
View File

@@ -1,102 +1,21 @@
# Alfresco Tag Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-alfresco-tag'>
<img src='https://img.shields.io/npm/dt/ng2-alfresco-tag.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# Alfresco Tag Component
## Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
Follow the 3 steps below:
```sh
npm install ng2-alfresco-tag
```
1. Npm
## Basic usage
```sh
npm install ng2-alfresco-tag --save
```
2. Html
Include these dependencies in your index.html page:
```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">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-alfresco-tag
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
#### Basic usage
In this component are present three different tags :
In this component are present three different tags:
* alfresco-tag-node-actions-list
* alfresco-tag-list
@@ -105,205 +24,50 @@ In this component are present three different tags :
## alfresco-tag-node-actions-list
```html
<alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list>
<alfresco-tag-node-actions-list
[nodeId]="nodeId">
</alfresco-tag-node-actions-list>
```
```ts
import { NgModule, Component, Input } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
### Properties
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { TagModule } from 'ng2-alfresco-tag';
@Component({
selector: 'alfresco-app-demo',
template: `<alfresco-tag-node-actions-list [nodeId]="'74cd8a96-8a21-47e5-9b3b-a1b3e296787d'"></alfresco-tag-node-actions-list>
`
})
class TagDemo {
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
TagModule
],
declarations: [ TagDemo ],
bootstrap: [ TagDemo ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
### Options
Attribute | Options | Default | Description | Mandatory
--- | --- | --- | --- | ---
`nodeId` | *string* | | The identifier of a node.|
| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| nodeId | string | | The identifier of a node |
![Custom columns](docs/assets/tag3.png)
## alfresco-tag-node-list
```html
<alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
<alfresco-tag-node-list
[nodeId]="nodeId">
</alfresco-tag-node-list>
```
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
### Properties
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { TagModule } from 'ng2-alfresco-tag';
@Component({
selector: 'alfresco-app-demo',
template: `<alfresco-tag-node-list [nodeId]="'74cd8a96-8a21-47e5-9b3b-a1b3e296787d'"></alfresco-tag-node-list>
`
})
class TagDemo {
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
TagModule
],
declarations: [ TagDemo ],
bootstrap: [ TagDemo ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
### Options
Attribute | Options | Default | Description | Mandatory
--- | --- | --- | --- | ---
`nodeId` | *string* | | The identifier of a node.|
| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| nodeId | string | | The identifier of a node |
![Custom columns](docs/assets/tag1.png)
## alfresco-tag-list
```html
<alfresco-tag-list></alfresco-tag-list>
```
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { TagModule } from 'ng2-alfresco-tag';
@Component({
selector: 'alfresco-app-demo',
template: `<alfresco-tag-list></alfresco-tag-list>`
})
class TagDemo {
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
TagModule
],
declarations: [ TagDemo ],
bootstrap: [ TagDemo ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
![Custom columns](docs/assets/tag2.png)
## 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
npm run build
```
## Running unit tests
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
## NPM scripts
@@ -314,6 +78,16 @@ npm start
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## Demo
Please check the demo folder for a demo project
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

178
ng2-components/ng2-alfresco-upload/README.md
View File

@@ -1,24 +1,4 @@
# Alfresco Upload Component for Angular
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-alfresco-upload'>
<img src='https://img.shields.io/npm/dt/ng2-alfresco-upload.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
</p>
# Alfresco Upload Component
## Content
@@ -42,61 +22,13 @@
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
Follow the 3 steps below:
1. Npm
```sh
npm install ng2-alfresco-upload --save
```
2. Html
Include these dependencies in your index.html page:
```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">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-alfresco-upload
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
```sh
npm install ng2-alfresco-upload
```
## UploadButtonComponent
@@ -112,26 +44,26 @@ Follow the 3 steps below:
<file-uploading-dialog></file-uploading-dialog>
```
### Events
| Name | Description |
| --- | --- |
| `onSuccess` | The event is emitted when the file is uploaded |
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `disabled` | *boolean* | false | Toggle component disabled state |
| **(deprecated)** `showNotificationBar` | *boolean* | true | Hide/show notification bar. **Deprecated in 1.6.0: use UploadService events and NotificationService api instead.** |
| `uploadFolders` | *boolean* | false | Allow/disallow upload folders (only for chrome) |
| `multipleFiles` | *boolean* | false | Allow/disallow multiple files |
| `acceptedFilesType` | *string* | * | array of allowed file extensions , example: ".jpg,.gif,.png,.svg" |
| **(deprecated)** `currentFolderPath` | *string* | '/Sites/swsdp/documentLibrary' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** |
| `rootFolderId` | *string* | '-root-' | The ID of the root folder node. |
| `versioning` | *boolean* | false | Versioning false is the default uploader behaviour and it rename using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
| `staticTitle` | *string* | 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' or 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' string in the JSON text file | define the text of the upload button |
| `disableWithNoPermission` | *boolean* | false | If the value is true and the user doesn't have the permission to delete the node the button will be disabled |
| disabled | boolean | false | Toggle component disabled state |
| **(deprecated)** showNotificationBar | boolean | true | Hide/show notification bar. **Deprecated in 1.6.0: use UploadService events and NotificationService api instead.** |
| uploadFolders | boolean | false | Allow/disallow upload folders (only for chrome) |
| multipleFiles | boolean | false | Allow/disallow multiple files |
| acceptedFilesType | string | * | array of allowed file extensions , example: ".jpg,.gif,.png,.svg" |
| **(deprecated)** currentFolderPath | string | '/Sites/swsdp/documentLibrary' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** |
| rootFolderId | string | '-root-' | The ID of the root folder node. |
| versioning | boolean | false | Versioning false is the default uploader behaviour and it rename using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
| staticTitle | string | (predefined) | define the text of the upload button |
| disableWithNoPermission | boolean | false | If the value is true and the user doesn't have the permission to delete the node the button will be disabled |
### Events
| Name | Description |
| --- | --- |
| onSuccess | Raised when the file is uploaded |
### Advanced usage
@@ -199,21 +131,21 @@ export class AppComponent {
}
```
### Events
| Name | Description |
| --- | --- |
| `onSuccess` | The event is emitted when the file is uploaded |
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `enabled` | *boolean* | true | Toggle component enabled state |
| **(deprecated)** `showNotificationBar` | *boolean* | true | Hide/show notification bar. **Deprecated in 1.6.0: use UploadService events and NotificationService api instead.** |
| `rootFolderId` | *string* | '-root-' | The ID of the root folder node. |
| **(deprecated)** `currentFolderPath` | *string* | '/' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** |
| `versioning` | *boolean* | false | Versioning false is the default uploader behaviour and it rename using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
| enabled | boolean | true | Toggle component enabled state |
| **(deprecated)** showNotificationBar | boolean | true | Hide/show notification bar. **Deprecated in 1.6.0: use UploadService events and NotificationService api instead.** |
| rootFolderId | string | '-root-' | The ID of the root folder node. |
| **(deprecated)** currentFolderPath | string | '/' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** |
| versioning | boolean | false | Versioning false is the default uploader behaviour and it rename using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
### Events
| Name | Description |
| --- | --- |
| onSuccess | Raised when the file is uploaded |
## FileUploadingDialogComponent
@@ -243,43 +175,15 @@ Provides access to various APIs related to file upload features.
## 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
npm run build
```
## Running unit tests
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
## NPM scripts
@@ -290,6 +194,16 @@ npm start
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## Demo
Please check the demo folder for a demo project
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

146
ng2-components/ng2-alfresco-userinfo/README.md
View File

@@ -1,98 +1,17 @@
# Alfresco User Info Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-alfresco-userinfo'>
<img src='https://img.shields.io/npm/dt/ng2-alfresco-userinfo.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# Alfresco User Info Component
## Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
Follow the 3 steps below:
1. Npm
```sh
npm install ng2-alfresco-userinfo --save
```
2. Html
Include these dependencies in your index.html page:
```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">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-alfresco-userinfo
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
.
```sh
npm install ng2-alfresco-userinfo
```
## Basic usage
@@ -104,54 +23,25 @@ Follow the 3 steps below:
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ecmBackgroundImage` | string | ng2-alfresco-userinfo/src/img/orangeBanner.gif | Custom path for the background banner image for ECM users |
| `bpmBackgroundImage` | string | ng2-alfresco-userinfo/src/img/blueBanner.gif | Custom path for the background banner image for BPM users |
| `menuOpenType` | string | right | Custom choice for opening menu bottom : `right` or `left` |
| `fallBackThumbnailImage` | string | ng2-alfresco-userinfo/src/img/anonymous.gif | Fallback image for profile when thubnail is missing|
| ecmBackgroundImage | string | (alfresco image) | Custom path for the background banner image for ECM users |
| bpmBackgroundImage | string | (alfresco image) | Custom path for the background banner image for BPM users |
| menuOpenType | string | right | Custom choice for opening menu bottom : `right` or `left` |
| fallBackThumbnailImage | string | (alfresco image) | Fallback image for profile when thubnail is missing|
This will show a round icon with user and on click some user information are showed.
If user is logged in with ECM and BPM the ECM image will be showed.
## 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
npm run build
```
## Running unit tests
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
## NPM scripts
@@ -162,6 +52,16 @@ npm start
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## Demo
Please check the demo folder for a demo project
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

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

@@ -1,36 +1,4 @@
# Alfresco File Viewer Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-alfresco-viewer'>
<img src='https://img.shields.io/npm/dt/ng2-alfresco-viewer.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# Alfresco File Viewer Component
See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
@@ -39,196 +7,60 @@ See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
Follow the 3 steps below:
```sh
npm install ng2-alfresco-viewer
```
1. Npm
## Basic usage
```sh
npm install ng2-alfresco-viewer --save
```
2. Html
Include these dependencies in your index.html page:
```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">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- Polyfill(s) for pdf support -->
<script src="node_modules/pdfjs-dist/web/compatibility.js"></script>
<script src="node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
<script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-alfresco-viewer
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
#### Basic usage with node id
Using with node id:
```html
<alfresco-viewer [overlayMode]="true" [urlFile]="'filename.pdf'"></alfresco-viewer>
<alfresco-viewer
[showViewer]="true"
[overlayMode]="true"
[fileNodeId]="'d367023a-7ebe-4f3a-a7d0-4f27c43f1045'">
</alfresco-viewer>
```
Example of an App that declares the file viewer component :
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { ViewerModule } from 'ng2-alfresco-viewer';
@Component({
selector: 'alfresco-app-demo',
template: `
<alfresco-viewer
[showViewer]="true"
[overlayMode]="true"
[fileNodeId]="'d367023a-7ebe-4f3a-a7d0-4f27c43f1045'">
</alfresco-viewer>`
})
class MyDemoApp {
constructor(private authService: AlfrescoAuthenticationService,
private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe(
ticket => console.log(ticket),
error => console.log(error)
);
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
ViewerModule.forRoot()
],
declarations: [ MyDemoApp ],
bootstrap: [ MyDemoApp ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
#### Basic usage with urlFile
Using with file url:
```html
<alfresco-viewer [overlayMode]="true" [urlFile]="'filename.pdf'"></alfresco-viewer>
<alfresco-viewer
[overlayMode]="true"
[urlFile]="'filename.pdf'">
</alfresco-viewer>
```
Example of an App that declares the file viewer component :
## Properties
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { ViewerModule } from 'ng2-alfresco-viewer';
| Attribute | Options | Default | Description |
| --- | --- | --- | --- |
| fileNodeId | string | | Node Id of the file to load the file |
| urlFile | string | | If you want load an external file that not comes from the ECM you can use this Url where to load the file |
| urlBlob | Blob | | If you want load a Blob File |
| overlayMode | boolean | false | if `true` Show the Viewer full page over the present content otherwise will fit the parent div |
| showViewer | boolean | true | Hide or show the viewer |
| showToolbar | boolean | true | Hide or show the toolbars |
| displayName | string | | You can specify the name of the file |
@Component({
selector: 'alfresco-app-demo',
template: `
<alfresco-viewer
[showViewer]="true"
[overlayMode]="true"
[urlFile]="'localTestFile.pdf'">
</alfresco-viewer>`
})
class MyDemoApp {
## Supported file formats
constructor(private authService: AlfrescoAuthenticationService,
private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe(
ticket => console.log(ticket),
error => console.log(error)
);
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
ViewerModule.forRoot()
],
declarations: [ MyDemoApp ],
bootstrap: [ MyDemoApp ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
#### Options
| Attribute | Options | Default | Description | Mandatory
| --- | --- | --- | --- | --- |
| `fileNodeId` | *string* | | Node Id of the file to load the file |
| `urlFile` | *string* | | If you want load an external file that not comes from the ECM you can use this Url where to load the file |
| `urlBlob` | *Blob* | | If you want load a Blob File |
| `overlayMode` | *boolean* | `false` | if true Show the Viewer full page over the present content otherwise will fit the parent div |
| `showViewer` | *boolean* | `true` | Hide or show the viewer |
| `showToolbar` | *boolean* | `true` | Hide or show the toolbars |
| `displayName` | *string* | | You can specify the name of the file |
#### Supported file formats
| Type | extensions |
| Type | Extension |
| --- | --- |
| Media | wav, Mp3, Mp4, WebM, Ogv |
| Images | png, jpg, jpeg, gif, bmp |
| Text | pdf, txt |
# Custom extension handler
## Custom extension handler
If you want handle other file formats that are not yet supported by the ng2-alfresco-viewer you can define your own custom handler.
Below you can find an example where with the use of ```extension-viewer``` if you can handle 3d files
Below you can find an example where with the use of `extension-viewer` if you can handle 3d files
```html
<alfresco-viewer
@@ -250,7 +82,7 @@ Below you can find an example where with the use of ```extension-viewer``` if yo
Note: you need adding `ng2-3d-editor` dependency to your `package.json` file to make example above work.
It is possible to define multiple ```extension-viewer``` templates:
It is possible to define multiple `extension-viewer` templates:
```html
<alfresco-viewer
@@ -278,43 +110,15 @@ It is possible to define multiple ```extension-viewer``` templates:
## 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
npm run build
```
## Running unit tests
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
## NPM scripts
@@ -325,6 +129,16 @@ npm start
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## Demo
Please check the demo folder for a demo project
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

322
ng2-components/ng2-alfresco-webscript/README.md
View File

@@ -1,219 +1,106 @@
# Alfresco Webscript Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
Status' />
</a>
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
Status' />
</a>
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
</a>
<a href='https://www.npmjs.com/package/ng2-alfresco-webscript'>
<img src='https://img.shields.io/npm/dt/ng2-alfresco-webscript.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
# Alfresco Webscript Component
## Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
## Install
Follow the 3 steps below:
1. Npm
```sh
npm install ng2-alfresco-webscript --save
```
2. Html
Include these dependencies in your index.html page:
```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">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```
3. SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-alfresco-datatable
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
#### Basic usage
```html
<alfresco-webscript-get [scriptPath]="string"
[scriptArgs]="Object"
[contextRoot]="string"
[servicePath]="string"
[showData]="boolean"
[contentType]="JSON | HTML | DATATABLE | TEXT"
(onSuccess)= "logData($event)">
</alfresco-webscript-get>
```
Example of an App that use Alfresco webscript component :
main.ts
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { DataTableModule } from 'ng2-alfresco-datatable';
import { WebScriptModule } from 'ng2-alfresco-webscript';
@Component({
selector: 'alfresco-app-demo',
template: `<alfresco-webscript-get [scriptPath]="scriptPath"
[scriptArgs]="scriptArgs"
[contextRoot]="contextRoot"
[servicePath]="servicePath"
[contentType]="'HTML'">
</alfresco-webscript-get>
`
})
class WebscriptDemo {
scriptPath: string = 'sample/folder/Company%20Home';
contextRoot: string = 'alfresco';
servicePath: string = 'service';
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
DataTableModule,
WebScriptModule
],
declarations: [ WebscriptDemo ],
bootstrap: [ WebscriptDemo ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```sh
npm install ng2-alfresco-webscript
```
#### Options
## Basic usage
```html
<alfresco-webscript-get
[scriptPath]="string"
[scriptArgs]="Object"
[contextRoot]="string"
[servicePath]="string"
[showData]="boolean"
[contentType]="JSON | HTML | DATATABLE | TEXT"
(onSuccess)= "logData($event)">
</alfresco-webscript-get>
```
Attribute | Options | Default | Description | Mandatory
--- | --- | --- | --- | ---
`scriptPath` | *string* | | path to Web Script (as defined by Web Script) | mandatory
`scriptArgs` | *Object* | | arguments to pass to Web Script |
`contextRoot` | *string* | | path where application is deployed |
`scriptPath` | *string* | | path to Web Script (as defined by Web Script) | alfresco
`contentType` | *string* | | path where Web Script service is mapped default value | service
`contentType` | *string* | | how to handle the data received from te web script JSON , HTML , DATATABLE or TEXT | TEXT
`onSuccess` | *event* | | You can get the plain data from the webscript through the **onSuccess** event parameter and use it as you need in your application |
`showData` | *booleann* | | render the webscript data |true
Another example:
**app.component.html**
```html
<alfresco-webscript-get
[scriptPath]="scriptPath"
[scriptArgs]="scriptArgs"
[contextRoot]="contextRoot"
[servicePath]="servicePath"
[contentType]="'HTML'">
</alfresco-webscript-get>
```
**app.component.ts**
```ts
export class AppComponent {
scriptPath: string = 'sample/folder/Company%20Home';
contextRoot: string = 'alfresco';
servicePath: string = 'service';
}
```
## Properties
| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| scriptPath | string | | (**mandatory**) path to Web Script (as defined by Web Script) |
| scriptArgs | Object | | arguments to pass to Web Script |
| contextRoot | string | | path where application is deployed |
| scriptPath | string | alfresco | path to Web Script (as defined by Web Script) |
| contentType | string | service | path where Web Script service is mapped default value |
| contentType | string | TEXT | how to handle the data received from te web script JSON , HTML , DATATABLE or TEXT |
| onSuccess | event | | You can get the plain data from the webscript through the **onSuccess** event parameter and use it as you need in your application |
| showData | booleann | true | render the webscript data |
**contentType** {string}
***data*** {string} data contain the plain value get from the webscipt is an output parameter
## Webscript View HTML example
This sample demonstrates how to implement a Webscript component that renders the HTML contents that come from a webscript
This sample Web Scripts reside in your Alfresco Server AND you can access the folder webscript here:
http://localhost:8080/alfresco/service/sample/folder/Company%20Home
```html
<alfresco-webscript-get [scriptPath]="scriptPath"
[contextRoot]= "'alfresco'"
[servicePath]= "'service'";
[scriptPath]= "'Sample/folder/Company%20Home'"
[contentType]= "'HTML'">
</alfresco-webscript-get>
<alfresco-webscript-get
[scriptPath]="scriptPath"
[contextRoot]="'alfresco'"
[servicePath]="'service'";
[scriptPath]="'Sample/folder/Company%20Home'"
[contentType]="'HTML'">
</alfresco-webscript-get>
```
![Custom columns](docs/assets/HTML.png)
## Webscript View DATATABLE example
This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
http://localhost:8080/alfresco/service/sample/folder/DATATABLE
```html
<alfresco-webscript-get [scriptPath]="scriptPath"
[contextRoot]= "'alfresco'"
[servicePath]= "'service'";
[scriptPath]= "'Sample/folder/DATATABLE'"
[contentType]= "'DATATABLE'">
</alfresco-webscript-get>
<alfresco-webscript-get
[scriptPath]="scriptPath"
[contextRoot]="'alfresco'"
[servicePath]="'service'";
[scriptPath]="'Sample/folder/DATATABLE'"
[contentType]="'DATATABLE'">
</alfresco-webscript-get>
```
If you want show the result from a webscript inside a ng2-alfresco-datatable you have to return from the GET of the webscript the datatructure below:
@@ -257,73 +144,44 @@ that will render the follow table
![Custom columns](docs/assets/datatable.png)
## Webscript View JSON example
This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
This sample Web Scripts reside in your Alfresco Server AND you can access the folder webscript here:
http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE
```html
<alfresco-webscript-get [scriptPath]="scriptPath"
[contextRoot]= "'alfresco'"
[servicePath]= "'service'";
[scriptPath]= "'Sample/folder/JSON_EXAMPLE'"
[contentType]= "'HTML'"
[showData] = "false"
(onSuccess)= "logDataExample($event)">
</alfresco-webscript-get>
<alfresco-webscript-get
[scriptPath]="scriptPath"
[contextRoot]="'alfresco'"
[servicePath]="'service'";
[scriptPath]="'Sample/folder/JSON_EXAMPLE'"
[contentType]="'HTML'"
[showData]="false"
(onSuccess)="logDataExample($event)">
</alfresco-webscript-get>
```
You can get the plain data from the webscript through the **onSuccess** event parameter and use it as you need in your application
```ts
logDataExample(data) {
console.log('You webscript data are here' + data);
}
logDataExample(data) {
console.log('You webscript data are here' + data);
}
```
## 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
npm run build
```
## Running unit tests
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```sh
npm run coverage
```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
> The `build` task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.
## NPM scripts
@@ -334,6 +192,16 @@ npm start
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## Demo
Please check the demo folder for a demo project
```sh
cd demo
npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)