inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

#878 fix documentation

Browse Source
This commit is contained in:
Mario Romano 2016-11-08 23:48:00 +00:00
parent ffbec87a6f
commit 76f17b2e74
6 changed files with 232 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -93,6 +93,7 @@ Follow the 3 steps below:
Add the following components to your systemjs.config.js file: Add the following components to your systemjs.config.js file:
- moment
- ng2-charts - ng2-charts
- ng2-translate - ng2-translate
- alfresco-js-api - alfresco-js-api

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

@ -89,8 +89,8 @@ Follow the 3 steps below:
- ng2-translat - ng2-translat
- ng2-alfresco-core - ng2-alfresco-core
- ng2-activiti-diagrams
- alfresco-js-api - alfresco-js-api
- ng2-activiti-diagrams
- raphael - raphael
Please refer to the following example file: [systemjs.config.js](demo/systemjs Please refer to the following example file: [systemjs.config.js](demo/systemjs

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

@ -89,8 +89,11 @@ Follow the 3 steps below:
Add the following components to your systemjs.config.js file: Add the following components to your systemjs.config.js file:
- moment
- ng2-translate - ng2-translate
- ng2-alfresco-core - ng2-alfresco-core
- alfresco-js-api
- ng2-activiti-form
Please refer to the following example file: [systemjs.config.js](demo/systemjs Please refer to the following example file: [systemjs.config.js](demo/systemjs
.config.js) . .config.js) .

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

@ -94,10 +94,12 @@ Follow the 3 steps below:
Add the following components to your systemjs.config.js file: Add the following components to your systemjs.config.js file:
- ng2-translate - ng2-translate
- alfresco-js-api
- ng2-alfresco-core - ng2-alfresco-core
- ng2-activiti-form - ng2-activiti-form
- ng2-activiti-tasklist
- ng2-alfresco-datatable - ng2-alfresco-datatable
- ng2-activiti-tasklist
- ng2-activiti-processlist
Please refer to the following example file: [systemjs.config.js](demo/systemjs Please refer to the following example file: [systemjs.config.js](demo/systemjs
.config.js) . .config.js) .
@ -115,10 +117,10 @@ This component renders a list containing all the process instances matched by th
**main.ts** **main.ts**
```ts ```ts
import { NgModule, Component, OnInit } from '@angular/core'; import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UserProcessInstanceFilterRepresentationModel } from 'ng2-activiti-tasklist'; import { FilterRepresentationModel } from 'ng2-activiti-tasklist';
import { CoreModule } from 'ng2-alfresco-core'; import { CoreModule } from 'ng2-alfresco-core';
import { ActivitiProcessListModule } from 'ng2-activiti-processlist'; import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core'; import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
@ -126,14 +128,14 @@ import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
@Component({ @Component({
selector: 'alfresco-app-demo', selector: 'alfresco-app-demo',
template: `<activiti-process-instance-list [filter]="processInstanceFilterRepresentation" [data]="dataProcesses" template: `<activiti-process-instance-list [filter]="filterRepresentationModel" [data]="dataProcesses"
#activitiprocesslist></activiti-process-instance-list>` #activitiprocesslist></activiti-process-instance-list>`
}) })
class MyDemoApp implements OnInit { class MyDemoApp {
dataProcesses: ObjectDataTableAdapter; dataProcesses: ObjectDataTableAdapter;
processInstanceFilterRepresentation: UserProcessInstanceFilterRepresentationModel; filterRepresentationModel: FilterRepresentationModel;
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) { constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.bpmHost = 'http://localhost:9999'; settingsService.bpmHost = 'http://localhost:9999';
@ -146,15 +148,14 @@ class MyDemoApp implements OnInit {
console.log(error); console.log(error);
}); });
this.dataProcesses = new ObjectDataTableAdapter([], this.dataProcesses = new ObjectDataTableAdapter([], [
[
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}, {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
{type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true} {type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
] ]
); );
this.dataProcesses.setSorting(new DataSorting('started', 'desc')); this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
this.processInstanceFilterRepresentation = new UserProcessInstanceFilterRepresentationModel({ this.filterRepresentationModel = new FilterRepresentationModel({
appId: '3003', appId: '3003',
filter: { filter: {
processDefinitionKey: null, processDefinitionKey: null,

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

@ -1,105 +1,222 @@
# Activiti Task List Component for Angular 2 # 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>
Displays lists of process instances both active and completed, using any defined process filter, and
render details of any chosen instance.
## Prerequisites ## Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the 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). necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
## Install ## Install
Follow the 3 steps below:
1. Npm
```sh ```sh
npm install --save ng2-activiti-tasklist npm install ng2-activiti-tasklist --save
``` ```
### Dependencies 2. Html
Add the following dependency to your index.html: Include these dependencies in your index.html page:
```html ```html
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
```
You must separately install the following libraries for your application: <!-- Moment js -->
<script src="node_modules/moment/min/moment.min.js"></script>
- [ng2-translate](https://github.com/ocombe/ng2-translate) <!-- Date picker -->
- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core) <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
- [ng2-alfresco-datatable](https://www.npmjs.com/package/ng2-alfresco-datatable) <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">
```sh
npm install --save ng2-translate ng2-alfresco-core ng2-alfresco-datatable
```
#### Material Design Lite
The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
design dependency to your project:
```sh
npm install --save material-design-icons material-design-lite
```
Also make sure you include these dependencies in your `index.html` file:
```html
<!-- Google Material Design Lite --> <!-- Google Material Design Lite -->
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css"> <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
<script src="node_modules/material-design-lite/material.min.js"></script> <script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css"> <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
```
#### Dialogs Polyfill
To make the dialog working with all the browser you have to add the dialog polyfill to you project: <!-- 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>
```sh <!-- Polyfill(s) for older browsers -->
npm install --save dialog-polyfill <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>
Also make sure you include these dependencies in your `index.html` file:
```html
<!-- Polyfill(s) for dialogs --> <!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script> <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" /> <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style> <style>._dialog_overlay { position: static !important; } </style>
._dialog_overlay {
position: static !important; <!-- Modules -->
} <script src="node_modules/zone.js/dist/zone.js"></script>
</style> <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 ## Basic usage example Activiti Task List
The component shows the list of all the tasks filter by the
FilterParamRepresentationModel passed in input. The component shows the list of all the tasks filter by the FilterParamRepresentationModel passed in input.
```html ```html
<activiti-tasklist [taskFilter]="taskFilterModel"></activiti-tasklist> <activiti-tasklist [taskFilter]="taskFilterModel"></activiti-tasklist>
``` ```
**main.ts**
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { FilterRepresentationModel, ActivitiTaskListModule } from 'ng2-activiti-tasklist';
import { CoreModule } from 'ng2-alfresco-core';
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
@Component({
selector: 'alfresco-app-demo',
template: `<activiti-tasklist [taskFilter]="filterRepresentationModel"
[data]="dataTasks"
#activititasklist></activiti-tasklist>`
})
class MyDemoApp {
dataTasks: ObjectDataTableAdapter;
filterRepresentationModel: FilterRepresentationModel;
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'));
this.filterRepresentationModel = new FilterRepresentationModel({
appId: '3003',
filter: {
processDefinitionKey: null,
assignment: 'involved',
name: null,
state: 'running',
sort: 'created-desc'
}
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
ActivitiTaskListModule.forRoot()
],
declarations: [MyDemoApp],
bootstrap: [MyDemoApp]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
```
#### Events #### Events
**onSuccess**: The event is emitted when the task list is loaded
**rowClick**: The event is emitted when the task in the list is | Name | Description |
clicked<br /> | --- | --- |
| `onSuccess` | The event is emitted when the task list is loaded |
| `rowClick` | The event is emitted when the task in the list is clicked |
#### Options #### Options
**taskFilter**: { FilterParamRepresentationModel } required) FilterParamRepresentationModel object that | Name | Description |
is passed to the task list API to filter the task list. | --- | --- |
| `taskFilter` | { FilterParamRepresentationModel } required) FilterParamRepresentationModel object that is passed to the task list API to filter the task list. |
Example: Example:
```json ```json
{ {
"appDefinitionId": "1", appId: '3003',
"processDefinitionId": "1533", filter:{
"sort": "created-desc", processDefinitionKey: null,
"text": "", name:null,
"state": "open", assignment: 'involved',
"assignment": "involved", state:'running',
"page": "0", sort: 'created-desc'
"size": "25" }
} }
``` ```
**schemaColumn**: { any[] } optional) JSON object that represent
the number and the type of the columns that you want show | Name | Description |
| --- | --- |
| `schemaColumn` | { any[] } optional) JSON object that represent the number and the type of the columns that you want show |
Example: Example:
```json ```json
[ [
{type: 'text', key: 'id', title: 'Id'}, {type: 'text', key: 'id', title: 'Id'},
@ -110,31 +227,34 @@ Example:
``` ```
## Basic usage example Activiti Task Details ## Basic usage example Activiti Task Details
The component shows the details of the task id passed in input The component shows the details of the task id passed in input
```html ```html
<activiti-task-details [taskId]="taskId"></activiti-task-details> <activiti-task-details [taskId]="taskId"></activiti-task-details>
``` ```
#### Events #### Events
| Name | Description | | Name | Description |
| --- | --- | | --- | --- |
| **formLoaded** | Invoked when form is loaded or reloaded. | | `formLoaded` | Invoked when form is loaded or reloaded. |
| **formSaved** | Invoked when form is submitted with `Save` or custom outcomes. | | `formSaved` | Invoked when form is submitted with `Save` or custom outcomes. |
| **formCompleted** | Invoked when form is submitted with `Complete` outcome. | | `formCompleted` | Invoked when form is submitted with `Complete` outcome. |
| **executeOutcome** | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` | | `executeOutcome` | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
| **onError** | Invoked at any error | | `onError` | Invoked at any error |
#### Options #### Options
| Name | Type | Required | Description | | Name | Type | Required | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| **taskId** | {string} | required | The id of the task details that we are asking for. | | `taskId` | {string} | required | The id of the task details that we are asking for. |
| **showNextTask** | {boolean} | optional | Automatically render the next one, when the task is completed. | | `showNextTask` | {boolean} | optional | Automatically render the next one, when the task is completed. |
| **showFormTitle** | {boolean} | optional | Toggle rendering of the form title. | | `showFormTitle` | {boolean} | optional | Toggle rendering of the form title. |
| **readOnlyForm** | {boolean} | optional | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. | | `readOnlyForm` | {boolean} | optional | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
| **showFormRefreshButton** | {boolean} | optional | Toggle rendering of the `Refresh` button. | | `showFormRefreshButton` | {boolean} | optional | Toggle rendering of the `Refresh` button. |
| **showFormSaveButton** | {boolean} | optional | Toggle rendering of the `Save` outcome button. | | `showFormSaveButton` | {boolean} | optional | Toggle rendering of the `Save` outcome button. |
| **showFormCompleteButton** | {boolean} | optional | Toggle rendering of the Form `Complete` outcome button | | `showFormCompleteButton` | {boolean} | optional | Toggle rendering of the Form `Complete` outcome button |
### Custom 'empty Activiti Task Details' template ### Custom 'empty Activiti Task Details' template
@ -157,6 +277,7 @@ This can be changed by adding the following custom html template:
``` ```
## Basic usage example Activiti Filter ## Basic usage example Activiti Filter
The component shows all the available filters. The component shows all the available filters.
```html ```html
@ -164,16 +285,20 @@ The component shows all the available filters.
``` ```
#### Events #### Events
**filterClick**: The event is emitted when the filter in the list is
clicked | Name | Description |
| --- | --- |
| `filterClick` | The event is emitted when the filter in the list is clicked |
#### Options #### Options
No options No options
## Build from sources ## Build from sources
Alternatively you can build component from sources with the following commands: Alternatively you can build component from sources with the following commands:
```sh ```sh
npm install npm install
npm run build npm run build
@ -185,7 +310,7 @@ npm run build
$ npm run build:w $ npm run build:w
``` ```
### Running unit tests ## Running unit tests
```sh ```sh
npm test npm test
@ -205,3 +330,17 @@ before performing unit testing.
```sh ```sh
npm run coverage 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
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

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

@ -83,6 +83,7 @@ Follow the 3 steps below:
- ng2-translate - ng2-translate
- ng2-alfresco-core - ng2-alfresco-core
- alfresco-js-api
- ng2-alfresco-login - ng2-alfresco-login
Please refer to the following example file: [systemjs.config.js](demo/systemjs Please refer to the following example file: [systemjs.config.js](demo/systemjs