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

#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
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:
- moment
- ng2-charts
- ng2-translate
- 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-alfresco-core
- ng2-activiti-diagrams
- alfresco-js-api
- ng2-activiti-diagrams
- raphael
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:
- 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) .

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:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-activiti-form
- ng2-activiti-tasklist
- ng2-alfresco-datatable
- ng2-activiti-tasklist
- ng2-activiti-processlist
Please refer to the following example file: [systemjs.config.js](demo/systemjs
.config.js) .
@@ -115,10 +117,10 @@ This component renders a list containing all the process instances matched by th
**main.ts**
```ts
import { NgModule, Component, OnInit } from '@angular/core';
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
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 { ActivitiProcessListModule } from 'ng2-activiti-processlist';
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
@@ -126,14 +128,14 @@ import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
@Component({
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>`
})
class MyDemoApp implements OnInit {
class MyDemoApp {
dataProcesses: ObjectDataTableAdapter;
processInstanceFilterRepresentation: UserProcessInstanceFilterRepresentationModel;
filterRepresentationModel: FilterRepresentationModel;
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.bpmHost = 'http://localhost:9999';
@@ -146,15 +148,14 @@ class MyDemoApp implements OnInit {
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: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
]
);
this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
this.processInstanceFilterRepresentation = new UserProcessInstanceFilterRepresentationModel({
this.filterRepresentationModel = new FilterRepresentationModel({
appId: '3003',
filter: {
processDefinitionKey: null,

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

@@ -1,105 +1,222 @@
# 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
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
```sh
npm install --save ng2-activiti-tasklist
```
Follow the 3 steps below:
### Dependencies
1. Npm
Add the following dependency to your index.html:
```sh
npm install ng2-activiti-tasklist --save
```
```html
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
```
2. Html
You must separately install the following libraries for your application:
Include these dependencies in your index.html page:
- [ng2-translate](https://github.com/ocombe/ng2-translate)
- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
- [ng2-alfresco-datatable](https://www.npmjs.com/package/ng2-alfresco-datatable)
```html
<!-- Moment js -->
<script src="node_modules/moment/min/moment.min.js"></script>
```sh
npm install --save ng2-translate ng2-alfresco-core ng2-alfresco-datatable
```
<!-- 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">
#### Material Design Lite
<!-- 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">
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:
<!-- 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
npm install --save material-design-icons material-design-lite
```
<!-- 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>
Also make sure you include these dependencies in your `index.html` file:
<!-- 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>
```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">
```
#### Dialogs Polyfill
<!-- 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>
To make the dialog working with all the browser you have to add the dialog polyfill to you project:
```
```sh
npm install --save dialog-polyfill
```
3. SystemJs
Also make sure you include these dependencies in your `index.html` file:
Add the following components to your systemjs.config.js file:
```html
<!-- 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>
```
- 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
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
<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
**onSuccess**: The event is emitted when the task list is loaded
**rowClick**: The event is emitted when the task in the list is
clicked<br />
| 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 |
#### Options
**taskFilter**: { FilterParamRepresentationModel } required) FilterParamRepresentationModel object that
is passed to the task list API to filter the task list.
| Name | Description |
| --- | --- |
| `taskFilter` | { FilterParamRepresentationModel } required) FilterParamRepresentationModel object that is passed to the task list API to filter the task list. |
Example:
```json
{
"appDefinitionId": "1",
"processDefinitionId": "1533",
"sort": "created-desc",
"text": "",
"state": "open",
"assignment": "involved",
"page": "0",
"size": "25"
appId: '3003',
filter:{
processDefinitionKey: null,
name:null,
assignment: 'involved',
state:'running',
sort: 'created-desc'
}
}
```
**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:
```json
[
{type: 'text', key: 'id', title: 'Id'},
@@ -110,31 +227,34 @@ Example:
```
## Basic usage example Activiti Task Details
The component shows the details of the task id passed in input
```html
<activiti-task-details [taskId]="taskId"></activiti-task-details>
```
#### 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 |
#### Options
| Name | Type | Required | Description |
| --- | --- | --- | --- |
| **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. |
| **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. |
| **showFormRefreshButton** | {boolean} | optional | Toggle rendering of the `Refresh` button. |
| **showFormSaveButton** | {boolean} | optional | Toggle rendering of the `Save` outcome button. |
| **showFormCompleteButton** | {boolean} | optional | Toggle rendering of the Form `Complete` outcome button |
| `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. |
| `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. |
| `showFormRefreshButton` | {boolean} | optional | Toggle rendering of the `Refresh` button. |
| `showFormSaveButton` | {boolean} | optional | Toggle rendering of the `Save` outcome button. |
| `showFormCompleteButton` | {boolean} | optional | Toggle rendering of the Form `Complete` outcome button |
### 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
The component shows all the available filters.
```html
@@ -164,16 +285,20 @@ The component shows all the available filters.
```
#### 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
No options
## Build from sources
Alternatively you can build component from sources with the following commands:
```sh
npm install
npm run build
@@ -185,7 +310,7 @@ npm run build
$ npm run build:w
```
### Running unit tests
## Running unit tests
```sh
npm test
@@ -205,3 +330,17 @@ before performing unit testing.
```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
```
## 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-alfresco-core
- alfresco-js-api
- ng2-alfresco-login
Please refer to the following example file: [systemjs.config.js](demo/systemjs