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

#878 demo and doc search component

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ng2-components/ng2-alfresco-login/README.md
View File

@ -1,4 +1,5 @@
# Alfresco Core Component for Angular 2
<p>
<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
@ -93,7 +94,6 @@ Follow the 3 steps below:
This component allow to authenticate to Alfresco One and Alfresco Activiti.
```html
<alfresco-login [providers]="'ALL'"></alfresco-login>
```

442
ng2-components/ng2-alfresco-search/README.md
View File

@ -32,59 +32,63 @@
</a>
</p>
### Node
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
## 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).
## Install
```sh
npm install --save ng2-alfresco-core ng2-alfresco-search
```
Follow the 3 steps below:
Components included:
1. Npm
- [Search control](#search-control)
- [Search results](#search-results)
```sh
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
the related [search results](#search-results) component which performs a query and displays results.
Include these dependencies in your index.html page:
#### 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
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
```
<!-- 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 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
- ng2-alfresco-core
- ng2-alfresco-search
<!-- 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>
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
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:
Add the following components to your systemjs.config.js file:
```sh
npm install --save material-design-icons material-design-lite
```
- ng2-translate
- ng2-alfresco-core
- alfresco-js-api
- ng2-alfresco-search
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">
```
Please refer to the following example file: [systemjs.config.js](demo/systemjs
.config.js) .
#### 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.
```ts
import { Component, OnInit } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService,
AlfrescoAuthenticationService,
AlfrescoTranslationService
} from 'ng2-alfresco-core';
import {
ALFRESCO_SEARCH_DIRECTIVES
} from 'ng2-alfresco-search';
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule } from 'ng2-alfresco-core';
import { SearchModule } from 'ng2-alfresco-search';
import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
@Component({
selector: 'alfresco-search-demo',
template: `
<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]
selector: 'alfresco-app-demo',
template: `<alfresco-search-control [searchTerm]="'test'"></alfresco-search-control>`
})
class SearchDemo implements OnInit {
class SearchDemo {
public searchTerm: string = 'test';
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
authenticated: boolean;
host: string = 'http://myalfrescoip';
constructor(
private authService: AlfrescoAuthenticationService,
settings: AlfrescoSettingsService,
translation: AlfrescoTranslationService) {
settings.host = this.host;
translation.addTranslationFolder();
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
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, [
HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS
]);
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
SearchModule
],
declarations: [SearchDemo],
bootstrap: [SearchDemo]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
```
#### 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 />
**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 />
**expand**: Emitted when the expanded state of the control changes based on focus events and the content of the input control
| Name | Description |
| --- | --- |
| `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. |
| `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
**searchTerm**: {string} (optional) default "". Search term to pre-populate the field with<br />
**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 />
**autocomplete** {boolean} (optional) default true. Whether the browser should offer field auto-completion for the input field to the user.<br />
**liveSearchEnabled** {boolean} (optional) default true. Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable.<br />
**liveSearchRoot** {boolean} (optional) default "-root-". NodeRef or node name where the search should start.<br />
**liveSearchResultType** {boolean} (optional) default (none). Node type to filter live search results by, e.g. 'cm:content'.<br />
**liveSearchMaxResults** {boolean} (optional) default 5. Maximum number of results to show in the live search.<br />
**liveSearchResultSort** {boolean} (optional) default (none). Criteria to sort live search results by, must be one of "name" , "modifiedAt" or "createdAt"
| Name | Type | Optional | Default | Description |
| --- | --- | --- | --- | --- |
| `searchTerm` | {string} | (optional) | "" | Search term to pre-populate the field with |
| `inputType` | {string} | (optional) | "text" | Type of the input field to render, e.g. "search" or "text" (default) |
| `expandable` | {boolean} | (optional) | true | Whether to use an expanding search control, if false then a regular input is used. |
| `autocomplet` | {boolean} | (optional) | true | Whether the browser should offer field auto-completion for the input field to the user. |
| `liveSearchEnabled` | {boolean} | (optional) | true | Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable. |
| `liveSearchRoot` | {boolean} | (optional) | "-root-" | NodeRef or node name where the search should start. |
| `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
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
#### Basic usage Search results
```html
<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.
```ts
import { Component, OnInit } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService,
AlfrescoAuthenticationService,
AlfrescoTranslationService
} from 'ng2-alfresco-core';
import {
ALFRESCO_SEARCH_DIRECTIVES
} from 'ng2-alfresco-search';
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule } from 'ng2-alfresco-core';
import { SearchModule } from 'ng2-alfresco-search';
import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
@Component({
selector: 'alfresco-search-demo',
template: `
<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]
selector: 'alfresco-app-demo',
template: `<alfresco-search [searchTerm]="'test'"></alfresco-search>`
})
class SearchDemo {
@Input()
searchTerm: string = '';
constructor() {
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
}
bootstrap(SearchDemo, [
HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS
]);
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
SearchModule
],
declarations: [SearchDemo],
bootstrap: [SearchDemo]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
```
#### Events
**preview**: Emitted when a file result is clicked/selected<br />
**resultsLoad**: Emitted when search results have fully loaded
| Name | Description |
| --- | --- |
| `preview` | Emitted when a file result is clicked/selected |
| `resultsLoad` | Emitted when search results have fully loaded |
#### Options
**searchTerm**: {string} (optional) default "". Search term to use when executing the search. Updating this value will
run a new search and update the results.<br />
**rootNodeId** {boolean} (optional) default "-root-". NodeRef or node name where the search should start.<br />
**resultType** {boolean} (optional) default (none). Node type to filter search results by, e.g. 'cm:content'.<br />
**maxResults** {boolean} (optional) default 20. Maximum number of results to show in the search.<br />
**resultSort** {boolean} (optional) default (none). Criteria to sort search results by, must be one of "name" , "modifiedAt" or "createdAt"
| Name | Type | Optional | Default | Description |
| --- | --- | --- | --- | --- |
| `searchTerm` | {string} | (optional) | "" | Search term to use when executing the search. Updating this value will run a new search and update the results |
| `rootNodeId` | {boolean} | (optional) | "-root-" | NodeRef or node name where the search should start. |
| `resultType` | {boolean} | (optional) | (none) | Node type to filter search results by, e.g. 'cm:content'. |
| `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
$ npm run build:w
```
## Running unit tests
### Build the files and keep watching for changes
```sh
npm test
```
```sh
$ npm run build:w
```
## Running unit tests in browser
## Running unit tests
```sh
npm test-browser
```
```sh
npm test
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Running unit tests in browser
## Code coverage
```sh
npm test-browser
```
```sh
npm run coverage
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
## Demo
### Code coverage
The `demo` folder contains a complete app with both components running on a single page and linked together:
```sh
npm run coverage
```
```sh
cd demo
npm install
npm start
```
## 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)

22
ng2-components/ng2-alfresco-search/demo/package.json
View File

@ -45,28 +45,6 @@
"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",
"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"
},
"devDependencies": {

3
ng2-components/ng2-alfresco-search/demo/src/main.ts
View File

@ -28,7 +28,6 @@ import {
AlfrescoTranslationService
} from 'ng2-alfresco-core';
@Component({
selector: 'alfresco-app-demo',
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 ecmHost: string = 'http://devproducts-platform.alfresco.me';
public ecmHost: string = 'http://localhost:8080';
ticket: string;

18
ng2-components/ng2-alfresco-search/package.json
View File

@ -52,24 +52,6 @@
"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",
"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"
},
"devDependencies": {