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> <analytics-report-list></analytics-report-list>
``` ```
Example of an App that use Activiti Analytics List component : Usage example of this component :
**main.ts** **main.ts**
```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 The component shows a Form from Activiti
```html ```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** **main.ts**
```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> <activiti-process-instance-list [filter]="processFilterModel"></activiti-tasklist>
``` ```
Usage example of this component :
**main.ts** **main.ts**
```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> <activiti-tasklist [taskFilter]="taskFilterModel"></activiti-tasklist>
``` ```
Usage example of this component :
**main.ts** **main.ts**
```ts ```ts

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

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

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

@ -34,49 +34,63 @@
## 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
```sh Follow the 3 steps below:
npm install --save ng2-alfresco-documentlist
```
### Dependencies 1. Npm
Add the following dependency to your index.html: ```sh
npm install ng2-alfresco-documentlist --save
```
```html 2. 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: Include these dependencies in your index.html page:
- [ng2-translate](https://github.com/ocombe/ng2-translate) ```html
- [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 <!-- Google Material Design Lite -->
[example implementation](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js). <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 <!-- Polyfill(s) for older browsers -->
design dependency to your project: <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 <!-- Polyfill(s) for dialogs -->
npm install --save material-design-icons material-design-lite <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"> 3. SystemJs
<script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css"> 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 ## Basic usage
@ -91,28 +105,88 @@ Also make sure you include these dependencies in your `index.html` file:
</alfresco-document-list> </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 ### Properties
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| navigate | boolean | true | Toggles navigation to folder content or file preview | | `navigate` | boolean | true | Toggles navigation to folder content or file preview |
| navigationMode | string (click\|dblclick) | dblclick | User interaction for folder navigation 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 | | `thumbnails` | boolean | false | Show document thumbnails rather than icons |
| fallbackThubnail | string | | Fallback image for row ehre thubnail is missing| | `fallbackThubnail` | string | | Fallback image for row ehre thubnail is missing|
| multiselect | boolean | false | Toggles multiselect mode | | `multiselect` | boolean | false | Toggles multiselect mode |
| contentActions | boolean | false | Toggles content actions for each row | | `contentActions` | boolean | false | Toggles content actions for each row |
| contextMenuActions | boolean | false | Toggles context menus for each row | | `contextMenuActions` | boolean | false | Toggles context menus for each row |
| rowFilter | `RowFilter` | | Custom row filter, [see more](#custom-row-filter). | `rowFilter` | `RowFilter` | | Custom row filter, [see more](#custom-row-filter).
| imageResolver | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver). | `imageResolver` | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver).
### Events ### Events
| Name | Description | | Name | Description |
| --- | --- | | --- | --- |
| nodeClick | Emitted when user clicks the node | | `nodeClick` | Emitted when user clicks the node |
| nodeDblClick | Emitted when user double-clicks the node | | `nodeDblClick` | Emitted when user double-clicks the node |
| folderChange | Emitted upon display folder changed | | `folderChange` | Emitted upon display folder changed |
| preview | Emitted when document preview is requested either with single or double click | | `preview` | Emitted when document preview is requested either with single or double click |
_For a complete example source code please refer to _For a complete example source code please refer to
@ -204,13 +278,13 @@ HTML attributes:
| Name | Type | Default | Description | Name | Type | Default | Description
| --- | --- | --- | --- | | --- | --- | --- | --- |
| title | string | | Column title | | `title` | string | | Column title |
| sr-title | string | | Screen reader title, used only when `title` is empty | | `sr-title` | string | | Screen reader title, used only when `title` is empty |
| key | string | | Column source key, example: `createdByUser.displayName` | | `key` | string | | Column source key, example: `createdByUser.displayName` |
| sortable | boolean | false | Toggle sorting ability via column header clicks | | `sortable` | boolean | false | Toggle sorting ability via column header clicks |
| class | string | | CSS class list, example: `full-width ellipsis-cell` | | `class`| string | | CSS class list, example: `full-width ellipsis-cell` |
| type | string | text | Column type, text\|date\|number | | `type` | string | text | Column type, text\|date\|number |
| format | string | | Value format pattern | | `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 `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. 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 ## 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 ```sh
npm install npm install
@ -672,8 +747,8 @@ npm run build
```sh ```sh
$ npm run build:w $ npm run build:w
``` ```
### Running unit tests ## Running unit tests
```sh ```sh
npm test npm test
@ -685,11 +760,25 @@ npm test
npm test-browser npm test-browser
``` ```
This task rebuilds all the code, runs tslint, license checks and other quality check tools This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing. before performing unit testing.
### Code coverage ### Code coverage
```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)

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

@ -17,30 +17,7 @@
}, },
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@angular/common": "2.0.0", "ng2-alfresco-documentlist": "^0.3.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"
}, },
"devDependencies": { "devDependencies": {
"@types/core-js": "^0.9.32", "@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. * limitations under the License.
*/ */
import { NgModule, Component, OnInit, ViewChild } from '@angular/core';
import { NgModule, Component, OnInit } 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 { CoreModule } from 'ng2-alfresco-core'; import { CoreModule } from 'ng2-alfresco-core';
import { DataTableModule } from 'ng2-alfresco-datatable'; import { DataTableModule } from 'ng2-alfresco-datatable';
import { DocumentListModule } from 'ng2-alfresco-documentlist'; import { DocumentListModule, DocumentList } from 'ng2-alfresco-documentlist';
import { import {
AlfrescoSettingsService, AlfrescoSettingsService,
@ -142,11 +141,16 @@ import { DocumentActionsService } from 'ng2-alfresco-documentlist';
class DocumentListDemo implements OnInit { class DocumentListDemo implements OnInit {
currentPath: string = '/'; currentPath: string = '/';
authenticated: boolean = false; authenticated: boolean = false;
ecmHost: string = 'http://devproducts-platform.alfresco.me';
ecmHost: string = 'http://localhost:8080';
ticket: string; ticket: string;
@ViewChild(DocumentList)
documentList: DocumentList;
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService, constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService,
translation: AlfrescoTranslationService, private documentActions: DocumentActionsService) { translation: AlfrescoTranslationService, private documentActions: DocumentActionsService) {
@ -194,6 +198,7 @@ class DocumentListDemo implements OnInit {
console.log(ticket); console.log(ticket);
this.ticket = this.authService.getTicketEcm(); this.ticket = this.authService.getTicketEcm();
this.authenticated = true; this.authenticated = true;
this.documentList.reload();
}, },
error => { error => {
console.log(error); console.log(error);

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

@ -52,26 +52,8 @@
"alfresco" "alfresco"
], ],
"dependencies": { "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-core": "0.3.2",
"ng2-alfresco-datatable": "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"
}, },
"devDependencies": { "devDependencies": {
"@types/core-js": "^0.9.32", "@types/core-js": "^0.9.32",