diff --git a/ng2-components/ng2-activiti-analytics/README.md b/ng2-components/ng2-activiti-analytics/README.md index d01dc3394f..136f8cad99 100644 --- a/ng2-components/ng2-activiti-analytics/README.md +++ b/ng2-components/ng2-activiti-analytics/README.md @@ -112,7 +112,7 @@ The component shows the list of all the available reports ``` -Example of an App that use Activiti Analytics List component : +Usage example of this component : **main.ts** ```ts diff --git a/ng2-components/ng2-activiti-form/README.md b/ng2-components/ng2-activiti-form/README.md index f4f717c3b9..164722c525 100644 --- a/ng2-components/ng2-activiti-form/README.md +++ b/ng2-components/ng2-activiti-form/README.md @@ -103,10 +103,10 @@ Follow the 3 steps below: The component shows a Form from Activiti ```html - + ``` -Example of an App that use Activiti Analytics List component : +Usage example of this component : **main.ts** ```ts diff --git a/ng2-components/ng2-activiti-processlist/README.md b/ng2-components/ng2-activiti-processlist/README.md index 66c4030fb8..6ff436c351 100644 --- a/ng2-components/ng2-activiti-processlist/README.md +++ b/ng2-components/ng2-activiti-processlist/README.md @@ -114,6 +114,8 @@ This component renders a list containing all the process instances matched by th ``` +Usage example of this component : + **main.ts** ```ts diff --git a/ng2-components/ng2-activiti-tasklist/README.md b/ng2-components/ng2-activiti-tasklist/README.md index ff5dfb65c8..5a860a5885 100644 --- a/ng2-components/ng2-activiti-tasklist/README.md +++ b/ng2-components/ng2-activiti-tasklist/README.md @@ -112,6 +112,8 @@ The component shows the list of all the tasks filter by the FilterParamRepresent ``` +Usage example of this component : + **main.ts** ```ts diff --git a/ng2-components/ng2-alfresco-datatable/README.md b/ng2-components/ng2-alfresco-datatable/README.md index 07b851cb97..401b24edb6 100644 --- a/ng2-components/ng2-alfresco-datatable/README.md +++ b/ng2-components/ng2-alfresco-datatable/README.md @@ -93,6 +93,7 @@ Follow the 3 steps below: ## Basic usage example +Usage example of this component : **my.component.ts** diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md index 5d0880d7c9..7b72db8845 100644 --- a/ng2-components/ng2-alfresco-documentlist/README.md +++ b/ng2-components/ng2-alfresco-documentlist/README.md @@ -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 - -``` +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). + + + + -#### 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 - - - - -``` + ``` + +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: ``` +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: ` + ` +}) +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) \ No newline at end of file diff --git a/ng2-components/ng2-alfresco-documentlist/demo/package.json b/ng2-components/ng2-alfresco-documentlist/demo/package.json index f2f4226a1e..cf9426d88f 100644 --- a/ng2-components/ng2-alfresco-documentlist/demo/package.json +++ b/ng2-components/ng2-alfresco-documentlist/demo/package.json @@ -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", diff --git a/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts b/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts index 5e9cc10c94..a094e8b144 100644 --- a/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts +++ b/ng2-components/ng2-alfresco-documentlist/demo/src/main.ts @@ -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); diff --git a/ng2-components/ng2-alfresco-documentlist/package.json b/ng2-components/ng2-alfresco-documentlist/package.json index 93290cb4c4..eb198783bc 100644 --- a/ng2-components/ng2-alfresco-documentlist/package.json +++ b/ng2-components/ng2-alfresco-documentlist/package.json @@ -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",