mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
#878 doc and demo documentlist
This commit is contained in:
Mario Romano
parent
e778940f94
commit
cf0b0c5974
@ -112,7 +112,7 @@ The component shows the list of all the available reports
|
||||
<analytics-report-list></analytics-report-list>
|
||||
```
|
||||
|
||||
Example of an App that use Activiti Analytics List component :
|
||||
Usage example of this component :
|
||||
|
||||
**main.ts**
|
||||
```ts
|
||||
|
||||
@ -103,10 +103,10 @@ Follow the 3 steps below:
|
||||
The component shows a Form from Activiti
|
||||
|
||||
```html
|
||||
<analytics-report-list></analytics-report-list>
|
||||
<activiti-form [taskId]="taskId"></activiti-form>
|
||||
```
|
||||
|
||||
Example of an App that use Activiti Analytics List component :
|
||||
Usage example of this component :
|
||||
|
||||
**main.ts**
|
||||
```ts
|
||||
|
||||
@ -114,6 +114,8 @@ This component renders a list containing all the process instances matched by th
|
||||
<activiti-process-instance-list [filter]="processFilterModel"></activiti-tasklist>
|
||||
```
|
||||
|
||||
Usage example of this component :
|
||||
|
||||
**main.ts**
|
||||
```ts
|
||||
|
||||
|
||||
@ -112,6 +112,8 @@ The component shows the list of all the tasks filter by the FilterParamRepresent
|
||||
<activiti-tasklist [taskFilter]="taskFilterModel"></activiti-tasklist>
|
||||
```
|
||||
|
||||
Usage example of this component :
|
||||
|
||||
**main.ts**
|
||||
```ts
|
||||
|
||||
|
||||
@ -93,6 +93,7 @@ Follow the 3 steps below:
|
||||
|
||||
## Basic usage example
|
||||
|
||||
Usage example of this component :
|
||||
|
||||
**my.component.ts**
|
||||
|
||||
|
||||
@ -35,49 +35,63 @@
|
||||
## 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-alfresco-documentlist
|
||||
```
|
||||
Follow the 3 steps below:
|
||||
|
||||
### Dependencies
|
||||
|
||||
Add the following dependency to your index.html:
|
||||
|
||||
```html
|
||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
||||
```
|
||||
|
||||
The following component needs to be added to your `systemjs.config.js` file:
|
||||
|
||||
- [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)
|
||||
|
||||
You can get more details in the
|
||||
[example implementation](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js).
|
||||
|
||||
#### 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:
|
||||
1. Npm
|
||||
|
||||
```sh
|
||||
npm install --save material-design-icons material-design-lite
|
||||
npm install ng2-alfresco-documentlist --save
|
||||
```
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
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">
|
||||
|
||||
<!-- 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) .
|
||||
|
||||
## Basic usage
|
||||
|
||||
```html
|
||||
@ -91,28 +105,88 @@ Also make sure you include these dependencies in your `index.html` file:
|
||||
</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 { DataTableModule } from 'ng2-alfresco-datatable';
|
||||
import { DocumentListModule, DocumentList } from 'ng2-alfresco-documentlist';
|
||||
import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `<alfresco-document-list
|
||||
#documentList
|
||||
[currentFolderPath]="'/'"
|
||||
[contextMenuActions]="true"
|
||||
[contentActions]="true"
|
||||
[multiselect]="true">
|
||||
</alfresco-document-list>`
|
||||
})
|
||||
class DocumentListDemo {
|
||||
|
||||
@ViewChild(DocumentList)
|
||||
documentList: DocumentList;
|
||||
|
||||
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(),
|
||||
DataTableModule,
|
||||
DocumentListModule.forRoot()
|
||||
],
|
||||
declarations: [DocumentListDemo],
|
||||
bootstrap: [DocumentListDemo]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| navigate | boolean | true | Toggles navigation to folder content or file preview |
|
||||
| navigationMode | string (click\|dblclick) | dblclick | User interaction for folder navigation or file preview |
|
||||
| thumbnails | boolean | false | Show document thumbnails rather than icons |
|
||||
| fallbackThubnail | string | | Fallback image for row ehre thubnail is missing|
|
||||
| multiselect | boolean | false | Toggles multiselect mode |
|
||||
| contentActions | boolean | false | Toggles content actions for each row |
|
||||
| contextMenuActions | boolean | false | Toggles context menus for each row |
|
||||
| rowFilter | `RowFilter` | | Custom row filter, [see more](#custom-row-filter).
|
||||
| imageResolver | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver).
|
||||
| `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 |
|
||||
| `fallbackThubnail` | string | | Fallback image for row ehre thubnail is missing|
|
||||
| `multiselect` | boolean | false | Toggles multiselect mode |
|
||||
| `contentActions` | boolean | false | Toggles content actions for each row |
|
||||
| `contextMenuActions` | boolean | false | Toggles context menus for each row |
|
||||
| `rowFilter` | `RowFilter` | | Custom row filter, [see more](#custom-row-filter).
|
||||
| `imageResolver` | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver).
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| nodeClick | Emitted when user clicks the node |
|
||||
| nodeDblClick | Emitted when user double-clicks the node |
|
||||
| folderChange | Emitted upon display folder changed |
|
||||
| preview | Emitted when document preview is requested either with single or double click |
|
||||
| `nodeClick` | Emitted when user clicks the node |
|
||||
| `nodeDblClick` | Emitted when user double-clicks the node |
|
||||
| `folderChange` | Emitted upon display folder changed |
|
||||
| `preview` | Emitted when document preview is requested either with single or double click |
|
||||
|
||||
|
||||
_For a complete example source code please refer to
|
||||
@ -204,13 +278,13 @@ HTML attributes:
|
||||
|
||||
| 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 |
|
||||
| `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 |
|
||||
|
||||
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.
|
||||
@ -660,7 +734,8 @@ by means of custom application service.
|
||||
|
||||
## Build from sources
|
||||
|
||||
You can build component from sources with the following commands:
|
||||
Alternatively you can build component from sources with the following commands:
|
||||
|
||||
|
||||
```sh
|
||||
npm install
|
||||
@ -673,7 +748,7 @@ npm run build
|
||||
$ npm run build:w
|
||||
```
|
||||
|
||||
### Running unit tests
|
||||
## Running unit tests
|
||||
|
||||
```sh
|
||||
npm test
|
||||
@ -693,3 +768,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)
|
||||
@ -17,30 +17,7 @@
|
||||
},
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@angular/common": "2.0.0",
|
||||
"@angular/compiler": "2.0.0",
|
||||
"@angular/core": "2.0.0",
|
||||
"@angular/forms": "2.0.0",
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.1.3",
|
||||
"ng2-translate": "2.5.0",
|
||||
"intl": "1.2.4",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-core": "^0.3.0",
|
||||
"ng2-alfresco-documentlist": "^0.3.0",
|
||||
"ng2-alfresco-datatable": "^0.3.0"
|
||||
"ng2-alfresco-documentlist": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/core-js": "^0.9.32",
|
||||
|
||||
@ -15,13 +15,12 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
|
||||
import { NgModule, Component, OnInit } from '@angular/core';
|
||||
import { NgModule, Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { DataTableModule } from 'ng2-alfresco-datatable';
|
||||
import { DocumentListModule } from 'ng2-alfresco-documentlist';
|
||||
import { DocumentListModule, DocumentList } from 'ng2-alfresco-documentlist';
|
||||
|
||||
import {
|
||||
AlfrescoSettingsService,
|
||||
@ -142,11 +141,16 @@ import { DocumentActionsService } from 'ng2-alfresco-documentlist';
|
||||
class DocumentListDemo implements OnInit {
|
||||
|
||||
currentPath: string = '/';
|
||||
|
||||
authenticated: boolean = false;
|
||||
ecmHost: string = 'http://devproducts-platform.alfresco.me';
|
||||
|
||||
ecmHost: string = 'http://localhost:8080';
|
||||
|
||||
ticket: string;
|
||||
|
||||
@ViewChild(DocumentList)
|
||||
documentList: DocumentList;
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService,
|
||||
translation: AlfrescoTranslationService, private documentActions: DocumentActionsService) {
|
||||
|
||||
@ -194,6 +198,7 @@ class DocumentListDemo implements OnInit {
|
||||
console.log(ticket);
|
||||
this.ticket = this.authService.getTicketEcm();
|
||||
this.authenticated = true;
|
||||
this.documentList.reload();
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
|
||||
@ -52,26 +52,8 @@
|
||||
"alfresco"
|
||||
],
|
||||
"dependencies": {
|
||||
"@angular/common": "2.0.0",
|
||||
"@angular/compiler": "2.0.0",
|
||||
"@angular/core": "2.0.0",
|
||||
"@angular/forms": "2.0.0",
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/node": "^6.0.42",
|
||||
"alfresco-js-api": "^0.3.1",
|
||||
"core-js": "^2.4.1",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-alfresco-datatable": "0.3.2",
|
||||
"ng2-translate": "2.5.0",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23"
|
||||
"ng2-alfresco-datatable": "0.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/core-js": "^0.9.32",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user