#878 demo and doc search component

This commit is contained in:
Mario Romano 2016-11-09 01:58:02 +00:00
parent cf0b0c5974
commit 7579253a50
5 changed files with 171 additions and 316 deletions

View File

@ -1,4 +1,5 @@
# Alfresco Core Component for Angular 2 # Alfresco Core Component for Angular 2
<p> <p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components"> <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 <img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
@ -93,7 +94,6 @@ Follow the 3 steps below:
This component allow to authenticate to Alfresco One and Alfresco Activiti. This component allow to authenticate to Alfresco One and Alfresco Activiti.
```html ```html
<alfresco-login [providers]="'ALL'"></alfresco-login> <alfresco-login [providers]="'ALL'"></alfresco-login>
``` ```

View File

@ -32,59 +32,63 @@
</a> </a>
</p> </p>
### Node ## Prerequisites
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
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).
## Install ## Install
```sh Follow the 3 steps below:
npm install --save ng2-alfresco-core ng2-alfresco-search
```
Components included: 1. Npm
- [Search control](#search-control) ```sh
- [Search results](#search-results) npm install ng2-alfresco-search --save
```
### Search control 2. Html
This component displays a search box on the page, which the user can use to enter a search query. It is decoupled from Include these dependencies in your index.html page:
the related [search results](#search-results) component which performs a query and displays results.
#### Dependencies ```html
Add the following dependency to your index.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">
```html <!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script> <script src="node_modules/intl/dist/Intl.min.js"></script>
``` <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
The following component needs to be added to your systemjs.config: <!-- 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>
- ng2-translate <!-- Polyfill(s) for dialogs -->
- ng2-alfresco-core <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
- ng2-alfresco-search <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
Please refer to the following example to have an idea of how your systemjs.config should look like : <!-- 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>
```
https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-search/demo/systemjs.config.js 3. SystemJs
#### Style Add the following components to your systemjs.config.js file:
The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
design dependency to your project:
```sh - ng2-translate
npm install --save material-design-icons material-design-lite - ng2-alfresco-core
``` - alfresco-js-api
- ng2-alfresco-search
Also make sure you include these dependencies in your .html page: Please refer to the following example file: [systemjs.config.js](demo/systemjs
.config.js) .
```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">
```
#### Basic usage #### Basic usage
@ -102,132 +106,70 @@ but instead the component could emit an event to be consumed upstream, or it cou
results component embedded inside the same component. results component embedded inside the same component.
```ts ```ts
import { Component, OnInit } from '@angular/core'; import { NgModule, Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser';
import { HTTP_PROVIDERS } from '@angular/http'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { import { CoreModule } from 'ng2-alfresco-core';
ALFRESCO_CORE_PROVIDERS, import { SearchModule } from 'ng2-alfresco-search';
AlfrescoSettingsService, import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
AlfrescoAuthenticationService,
AlfrescoTranslationService
} from 'ng2-alfresco-core';
import {
ALFRESCO_SEARCH_DIRECTIVES
} from 'ng2-alfresco-search';
@Component({ @Component({
selector: 'alfresco-search-demo', selector: 'alfresco-app-demo',
template: ` template: `<alfresco-search-control [searchTerm]="'test'"></alfresco-search-control>`
<alfresco-search-control *ngIf="authenticated" [searchTerm]="searchTerm" (searchChange)="onSearchChange($event);" (searchSubmit)="onSearchSubmit($event)">
</alfresco-search-control>
<div *ngIf="!authenticated">
Authentication failed to ip {{ host }}
</div>
`,
directives: [ALFRESCO_SEARCH_DIRECTIVES]
}) })
class SearchDemo implements OnInit { class SearchDemo {
public searchTerm: string = 'test'; constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
authenticated: boolean; this.authService.login('admin', 'admin').subscribe(
ticket => {
host: string = 'http://myalfrescoip'; console.log(ticket);
},
constructor( error => {
private authService: AlfrescoAuthenticationService, console.log(error);
settings: AlfrescoSettingsService, });
translation: AlfrescoTranslationService) {
settings.host = this.host;
translation.addTranslationFolder();
} }
onSearchChange(event) {
console.log('Search term changed', event);
this.searchTerm = event.value;
}
onSearchSubmit(event) {
console.log('Search submitted', event);
}
ngOnInit() {
this.login();
}
login() {
this.authService.login('admin', 'admin').subscribe(token => {
this.authenticated = true;
});
}
} }
bootstrap(SearchDemo, [ @NgModule({
HTTP_PROVIDERS, imports: [
ALFRESCO_CORE_PROVIDERS BrowserModule,
]); CoreModule.forRoot(),
SearchModule
],
declarations: [SearchDemo],
bootstrap: [SearchDemo]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
``` ```
#### Events #### Events
**searchChange**: Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is at less than three characters in length then the term is truncated to an empty string.<br /> | Name | Description |
**searchSubmit**: Emitted when the search form is submitted. The search term is provided in the 'value' property of the returned object.<br /> | --- | --- |
**fileSelect**: Emitted when a file item from the list of find-as-you-type results is selected<br /> | `searchChange` | Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is at less than three characters in length then the term is truncated to an empty string. |
**expand**: Emitted when the expanded state of the control changes based on focus events and the content of the input control | `searchSubmit` | Emitted when the search form is submitted. The search term is provided in the 'value' property of the returned object. |
| `fileSelect` | Emitted when a file item from the list of find-as-you-type results is selected |
| `expand` | Emitted when the expanded state of the control changes based on focus events and the content of the input control |
#### Options #### Options
**searchTerm**: {string} (optional) default "". Search term to pre-populate the field with<br /> | Name | Type | Optional | Default | Description |
**inputType**: {string} (optional) default "text". Type of the input field to render, e.g. "search" or "text" (default)<br /> | --- | --- | --- | --- | --- |
**expandable** {boolean} (optional) default true. Whether to use an expanding search control, if false then a regular input is used.<br /> | `searchTerm` | {string} | (optional) | "" | Search term to pre-populate the field with |
**autocomplete** {boolean} (optional) default true. Whether the browser should offer field auto-completion for the input field to the user.<br /> | `inputType` | {string} | (optional) | "text" | Type of the input field to render, e.g. "search" or "text" (default) |
**liveSearchEnabled** {boolean} (optional) default true. Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable.<br /> | `expandable` | {boolean} | (optional) | true | Whether to use an expanding search control, if false then a regular input is used. |
**liveSearchRoot** {boolean} (optional) default "-root-". NodeRef or node name where the search should start.<br /> | `autocomplet` | {boolean} | (optional) | true | Whether the browser should offer field auto-completion for the input field to the user. |
**liveSearchResultType** {boolean} (optional) default (none). Node type to filter live search results by, e.g. 'cm:content'.<br /> | `liveSearchEnabled` | {boolean} | (optional) | true | Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable. |
**liveSearchMaxResults** {boolean} (optional) default 5. Maximum number of results to show in the live search.<br /> | `liveSearchRoot` | {boolean} | (optional) | "-root-" | NodeRef or node name where the search should start. |
**liveSearchResultSort** {boolean} (optional) default (none). Criteria to sort live search results by, must be one of "name" , "modifiedAt" or "createdAt" | `liveSearchResultType` | {boolean} | (optional) | (none) | Node type to filter live search results by, e.g. 'cm:content'. |
| `liveSearchMaxResults` | {boolean} | (optional) | 5 | Maximum number of results to show in the live search. |
| `iveSearchResultSort` | {boolean} | (optional) | (none) | Criteria to sort live search results by, must be one of "name" , "modifiedAt" or "createdAt" |
### Search results #### Basic usage Search results
This component displays the results of a search to the user.
#### Dependencies
Add the following dependency to your index.html:
```html
<script src="node_modules/alfresco-js-api/bundle.js"></script>
```
The following component needs to be added to your systemjs.config:
- ng2-translate
- ng2-alfresco-core
- ng2-alfresco-search
Please refer to the following example to have an idea of how your systemjs.config should look like :
https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-search/demo/systemjs.config.js
#### Style
The style of this component is based on material design, 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 .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">
```
#### Basic usage
```html ```html
<alfresco-search [searchTerm]="searchTerm"></alfresco-search> <alfresco-search [searchTerm]="searchTerm"></alfresco-search>
@ -238,157 +180,111 @@ search term. If no router is present on the page of if the router does not provi
results page will be shown. results page will be shown.
```ts ```ts
import { Component, OnInit } from '@angular/core'; import { NgModule, Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser';
import { HTTP_PROVIDERS } from '@angular/http'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule } from 'ng2-alfresco-core';
import { import { SearchModule } from 'ng2-alfresco-search';
ALFRESCO_CORE_PROVIDERS, import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
AlfrescoSettingsService,
AlfrescoAuthenticationService,
AlfrescoTranslationService
} from 'ng2-alfresco-core';
import {
ALFRESCO_SEARCH_DIRECTIVES
} from 'ng2-alfresco-search';
@Component({ @Component({
selector: 'alfresco-search-demo', selector: 'alfresco-app-demo',
template: ` template: `<alfresco-search [searchTerm]="'test'"></alfresco-search>`
<alfresco-search *ngIf="authenticated"></alfresco-search>
<div *ngIf="!authenticated">
Authentication failed to ip {{ host }}
</div>
`,
directives: [ALFRESCO_SEARCH_DIRECTIVES]
})
class SearchDemo implements OnInit {
public searchTerm: string = 'test';
authenticated: boolean;
host: string = 'http://192.168.99.101:8080';
constructor(
private authService: AlfrescoAuthenticationService,
settings: AlfrescoSettingsService,
translation: AlfrescoTranslationService) {
settings.host = this.host;
translation.addTranslationFolder();
}
ngOnInit() {
this.login();
}
login() {
this.authService.login('admin', 'admin').subscribe(token => {
this.authenticated = true;
});
}
}
bootstrap(SearchDemo, [
HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS
]);
```
Example of an component that displays search results, taking the search term from a `@Input` property provided by the container.
When the input is updated by the application, the search control will run a new search and display the results.
```ts
import { Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS
} from 'ng2-alfresco-core';
import {
ALFRESCO_SEARCH_DIRECTIVES
} from 'ng2-alfresco-search';
@Component({
selector: 'alfresco-search-demo',
template: `
<alfresco-search [searchTerm]="searchTerm"></alfresco-search>
`,
directives: [ALFRESCO_SEARCH_DIRECTIVES]
}) })
class SearchDemo { class SearchDemo {
@Input()
searchTerm: string = ''; constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
constructor() { settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
} }
} }
bootstrap(SearchDemo, [ @NgModule({
HTTP_PROVIDERS, imports: [
ALFRESCO_CORE_PROVIDERS BrowserModule,
]); CoreModule.forRoot(),
SearchModule
],
declarations: [SearchDemo],
bootstrap: [SearchDemo]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
``` ```
#### Events #### Events
**preview**: Emitted when a file result is clicked/selected<br /> | Name | Description |
**resultsLoad**: Emitted when search results have fully loaded | --- | --- |
| `preview` | Emitted when a file result is clicked/selected |
| `resultsLoad` | Emitted when search results have fully loaded |
#### Options #### Options
**searchTerm**: {string} (optional) default "". Search term to use when executing the search. Updating this value will | Name | Type | Optional | Default | Description |
run a new search and update the results.<br /> | --- | --- | --- | --- | --- |
**rootNodeId** {boolean} (optional) default "-root-". NodeRef or node name where the search should start.<br /> | `searchTerm` | {string} | (optional) | "" | Search term to use when executing the search. Updating this value will run a new search and update the results |
**resultType** {boolean} (optional) default (none). Node type to filter search results by, e.g. 'cm:content'.<br /> | `rootNodeId` | {boolean} | (optional) | "-root-" | NodeRef or node name where the search should start. |
**maxResults** {boolean} (optional) default 20. Maximum number of results to show in the search.<br /> | `resultType` | {boolean} | (optional) | (none) | Node type to filter search results by, e.g. 'cm:content'. |
**resultSort** {boolean} (optional) default (none). Criteria to sort search results by, must be one of "name" , "modifiedAt" or "createdAt" | `maxResults` | {boolean} | (optional) | 20 | Maximum number of results to show in the search. |
| `resultSort` | {boolean} | (optional) | (none) | Criteria to sort search results by, must be one of "name" , "modifiedAt" or "createdAt" |
## Build from sources ### Build from sources
Alternatively you can build the component from source with the following commands: Alternatively you can build component from sources with the following commands:
```sh
npm install
npm run build
```
##Build the files and keep watching for changes ```sh
npm install
npm run build
```
```sh ### Build the files and keep watching for changes
$ npm run build:w
```
## Running unit tests ```sh
$ npm run build:w
```
```sh ## Running unit tests
npm test
```
## Running unit tests in browser ```sh
npm test
```
```sh ### Running unit tests in browser
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools ```sh
before performing unit testing. npm test-browser
```
## Code coverage This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
```sh ### Code coverage
npm run coverage
```
## Demo ```sh
npm run coverage
```
The `demo` folder contains a complete app with both components running on a single page and linked together: ## Demo
```sh If you want have a demo of how the component works, please check the demo folder :
cd demo
npm install ```sh
npm start cd demo
``` npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

View File

@ -45,28 +45,6 @@
"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",
"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",
"ng2-translate": "2.5.0",
"material-design-icons": "2.2.3",
"material-design-lite": "1.2.1",
"alfresco-js-api": "^0.3.0",
"ng2-alfresco-core": "^0.3.0",
"ng2-alfresco-search": "^0.3.0" "ng2-alfresco-search": "^0.3.0"
}, },
"devDependencies": { "devDependencies": {

View File

@ -28,7 +28,6 @@ import {
AlfrescoTranslationService AlfrescoTranslationService
} from 'ng2-alfresco-core'; } from 'ng2-alfresco-core';
@Component({ @Component({
selector: 'alfresco-app-demo', selector: 'alfresco-app-demo',
template: `<label for="ticket"><b>Insert a valid access ticket / ticket:</b></label><br> template: `<label for="ticket"><b>Insert a valid access ticket / ticket:</b></label><br>
@ -54,7 +53,7 @@ class SearchDemo implements OnInit {
public searchTerm: string = 'test'; public searchTerm: string = 'test';
public ecmHost: string = 'http://devproducts-platform.alfresco.me'; public ecmHost: string = 'http://localhost:8080';
ticket: string; ticket: string;

View File

@ -52,24 +52,6 @@
"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",
"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",
"ng2-translate": "2.5.0",
"alfresco-js-api": "^0.3.0",
"ng2-alfresco-core": "0.3.2" "ng2-alfresco-core": "0.3.2"
}, },
"devDependencies": { "devDependencies": {