10 KiB
Search Component for Angular 2
Node
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
Install
npm set registry http://devproducts.alfresco.me:4873
npm install --save ng2-alfresco-core ng2-alfresco-search
Components included:
Search control
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 component which performs a query and displays results.
Dependencies
Add the following dependency to your index.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 :
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:
npm install --save material-design-icons material-design-lite
Also make sure you include these dependencies in your .html page:
<!-- 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
<alfresco-search-control [searchTerm]="searchTerm"
inputType="search"
(searchChange)="customMethod($event);">
</alfresco-search-control>
Example of an component that uses the search control. In this example the search term is simply logged to the console but instead the component could emit an event to be consumed upstream, or it could trigger a change inside a search results component embedded inside the same component.
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';
@Component({
selector: 'alfresco-search-demo',
template: `
<alfresco-search-control *ngIf="authenticated" [searchTerm]="searchTerm" (searchChange)="searchTermChange($event);">
</alfresco-search-control>
<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.100:8080';
constructor(
private authService: AlfrescoAuthenticationService,
settings: AlfrescoSettingsService,
translation: AlfrescoTranslationService) {
settings.host = this.host;
translation.addTranslationFolder();
}
searchTermChange(event) {
console.log('Search term changed', event);
this.searchTerm = event.value;
}
ngOnInit() {
this.login();
}
login() {
this.authService.login('admin', 'admin').subscribe(token => {
this.authenticated = true;
});
}
}
bootstrap(SearchDemo, [
HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS
]);
Events
searchChange: Emitted when the search term is changed and the form submitted, provided that the term is at least three characters in length
Options
searchTerm: {string} (optional) default "". Search term to pre-populate the field with
inputType: {string} (optional) default "text". Type of the input field to render, e.g. "search" or "text" (default)
expandable {boolean} (optional) default true. Whether to use an expanding search control, if false then a regular input is used.
autocomplete {boolean} (optional) default true. Whether the browser should offer field auto-completion for the input field to the user.
Search results
This component displays the results of a search to the user.
Dependencies
Add the following dependency to your index.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 :
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:
npm install --save material-design-icons material-design-lite
Also make sure you include these dependencies in your .html page:
<!-- 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
<alfresco-search [searchTerm]="searchTerm"></alfresco-search>
Example of an component that displays search results, using the Angular2 router to supply a 'q' parameter containing the search term. If no ruter is present pon the page of if the router does not provide such a parameter then an empty results page will be shown.
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';
@Component({
selector: 'alfresco-search-demo',
template: `
<alfresco-search *ngIf="authenticated" [searchTerm]="searchTerm"></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();
}
searchTermChange(event) {
console.log('Search term changed', event);
this.searchTerm = event.value;
}
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.
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 {
@Input()
searchTerm: string = '';
constructor() {
}
}
bootstrap(SearchDemo, [
HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS
]);
Events
None
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.
Build from sources
Alternatively you can build the component from source with the following commands:
npm install
npm run build
##Build the files and keep watching for changes
```sh
$ npm run build:w
```
Running unit tests
npm test
Running unit tests in browser
npm test-browser
This task rebuilds all the code, runs tslint, license checks and other quality check tools before performing unit testing.
Code coverage
npm run coverage
Demo
The demo folder contains a complete app with both components running on a single page and linked together:
cd demo
npm install
npm start