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

#878 doc and demo documentlist

Browse Source
This commit is contained in:
Mario Romano 2016-11-09 00:48:44 +00:00
parent e778940f94
commit cf0b0c5974
9 changed files with 162 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

@ -93,6 +93,7 @@ Follow the 3 steps below:
## Basic usage example
Usage example of this component :
**my.component.ts**

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

@ -34,49 +34,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).
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).
## Install
```sh
npm install --save ng2-alfresco-documentlist
```
Follow the 3 steps below:
### Dependencies
1. Npm
Add the following dependency to your index.html:
```sh
npm install ng2-alfresco-documentlist --save
```
```html
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
```
2. Html
The following component needs to be added to your `systemjs.config.js` file:
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
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).
<!-- 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">
#### Material Design Lite
<!-- 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>
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 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>
```sh
npm install --save material-design-icons material-design-lite
```
<!-- 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>
Also make sure you include these dependencies in your `index.html` file:
<!-- 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>
```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">
```
```
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
@ -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
@ -672,8 +747,8 @@ npm run build
```sh
$ npm run build:w
```
### Running unit tests
## Running unit tests
```sh
npm test
@ -685,11 +760,25 @@ npm test
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
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
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

25
ng2-components/ng2-alfresco-documentlist/demo/package.json
View File

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

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

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

20
ng2-components/ng2-alfresco-documentlist/package.json
View File

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