inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add demo folder for search component

Browse Source 
Refs #90
This commit is contained in:
Will Abson
2016-06-01 13:14:45 +01:00
parent 06dfbe90f4
commit 335b0f99c9
14 changed files with 507 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
ng2-components/ng2-alfresco-search/demo/README.md Normal file
View File

@@ -0,0 +1,13 @@
# angular2-alfresco-search
Install:
```
npm install
```
Run the project:
```
npm start
```

4
ng2-components/ng2-alfresco-search/demo/i18n/en.json Normal file
View File

@@ -0,0 +1,4 @@
{
"SEARCH": {
}
}

66
ng2-components/ng2-alfresco-search/demo/index.html Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alfresco Angular 2 Search - Demo</title>
<base href="/">
<!-- 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">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="node_modules/alfresco-core-rest-api/bundle.js"></script>
<script>
System.config({
defaultJSExtensions: true,
map: {
'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
'ng2-alfresco-search': 'node_modules/ng2-alfresco-search',
'rxjs': 'node_modules/rxjs',
'angular2': 'node_modules/angular2',
'ng2-translate': 'node_modules/ng2-translate',
'src': 'src'
},
packages: {
'src': {
defaultExtension: 'js'
},
'ng2-alfresco-core': {
defaultExtension: 'js'
},
'ng2-alfresco-search': {
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
},
'angular2': {
defaultExtension: 'js'
}
}
});
System.import('dist/main').catch(console.log.bind(console));
</script>
</head>
<body>
<div mdl class="mdl-layout mdl-js-layout">
<alfresco-search-demo></alfresco-search-demo>
</div>
</body>
</html>

71
ng2-components/ng2-alfresco-search/demo/package.json Normal file
View File

@@ -0,0 +1,71 @@
{
"name": "ng2-alfresco-search-demo",
"description": "Alfresco Angular2 Search Component - Demo",
"version": "0.1.0",
"author": "Alfresco Software, Ltd.",
"main": "index.js",
"scripts": {
"postinstall": "npm run typings && npm run build",
"typings": "typings install",
"start": "rm -rf dist && npm install && npm run server",
"server": "lite-server",
"build": "npm run tslint && rm -rf dist && tsc",
"tslint": "npm run tslint-src && npm run tslint-root",
"tslint-src": "tslint -c tslint.json src/**/*.ts",
"tslint-root": "tslint -c tslint.json *.ts"
},
"license": "Apache-2.0",
"contributors": [
{
"name": "Denys Vuika",
"email": "denis.vuyka@gmail.com"
},
{
"name": "Mario Romano",
"email": "mario.romano83@gmail.com"
},
{
"name": "Will Abson",
"email": "will.abson@alfresco.com"
},
{
"name": "Eugenio Romano",
"email": "eugenio.romano@alfresco.com"
},
{
"name": "Maurizio Vitale",
"email": "maurizio.vitale@alfresco.com"
}
],
"keywords": [
"ng2",
"angular",
"angular2",
"alfresco"
],
"dependencies": {
"alfresco-core-rest-api": "^0.1.0",
"angular2": "2.0.0-beta.15",
"es6-shim": "^0.35.0",
"material-design-icons": "^2.2.3",
"material-design-lite": "^1.1.3",
"ng2-translate": "^1.11.3",
"ng2-alfresco-core": "^0.1.0",
"ng2-alfresco-search": "^0.1.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "0.19.26",
"zone.js": "0.6.10"
},
"devDependencies": {
"browser-sync": "^2.10.0",
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"tslint": "^3.8.1",
"typescript": "^1.8.10",
"typings": "^0.7.12"
},
"publishConfig": {
"registry": "http://devproducts.alfresco.me:4873/"
}
}

85
ng2-components/ng2-alfresco-search/demo/src/main.ts Normal file
View File

@@ -0,0 +1,85 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, OnInit } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { HTTP_PROVIDERS } from 'angular2/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService,
AlfrescoAuthenticationService,
AlfrescoPipeTranslate,
AlfrescoTranslationService
} from 'ng2-alfresco-core/dist/ng2-alfresco-core';
import {
ALFRESCO_SEARCH_PROVIDERS,
ALFRESCO_SEARCH_DIRECTIVES,
AlfrescoService
} from 'ng2-alfresco-search/dist/ng2-alfresco-search';
@Component({
selector: 'alfresco-search-demo',
template: `
<div class="container">
<alfresco-search-control *ngIf="authenticated" [searchTerm]="searchTerm"
(searchChange)="searchTermChange($event);"></alfresco-search-control>
<alfresco-search [searchTerm]="searchTerm"></alfresco-search>
</div>
`,
styles: [':host > .container {padding: 10px}'],
providers: [ALFRESCO_SEARCH_PROVIDERS],
directives: [ALFRESCO_SEARCH_DIRECTIVES],
pipes: [AlfrescoPipeTranslate]
})
class SearchDemo implements OnInit {
authenticated: boolean;
public searchTerm: string = 'foo bar';
constructor(
private authService: AlfrescoAuthenticationService,
settings: AlfrescoSettingsService,
translation: AlfrescoTranslationService,
searchService: AlfrescoService) {
settings.host = 'http://192.168.99.100:8080';
translation.translationInit();
}
ngOnInit() {
this.login();
}
login() {
this.authService.login('admin', 'admin').subscribe(token => {
this.authenticated = true;
});
}
searchTermChange(event) {
console.log('Search term changed', event);
this.searchTerm = event.value;
}
}
bootstrap(SearchDemo, [
HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS
]);

19
ng2-components/ng2-alfresco-search/demo/tsconfig.json Normal file
View File

@@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"removeComments": true,
"declaration": true,
"outDir": "dist"
},
"exclude": [
"dist",
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}

124
ng2-components/ng2-alfresco-search/demo/tslint.json Normal file
View File

@@ -0,0 +1,124 @@
{
"rules": {
"align": [
true,
"parameters",
"arguments",
"statements"
],
"ban": false,
"class-name": true,
"comment-format": [
true,
"check-space",
"check-lowercase"
],
"curly": true,
"eofline": true,
"forin": true,
"indent": [
true,
"spaces"
],
"interface-name": false,
"jsdoc-format": true,
"label-position": true,
"label-undefined": true,
"max-line-length": [
true,
140
],
"member-ordering": [
true,
"public-before-private",
"static-before-instance",
"variables-before-functions"
],
"no-any": false,
"no-arg": true,
"no-bitwise": true,
"no-conditional-assignment": true,
"no-consecutive-blank-lines": false,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-constructor-vars": false,
"no-debugger": true,
"no-duplicate-key": true,
"no-duplicate-variable": true,
"no-empty": true,
"no-eval": true,
"no-inferrable-types": false,
"no-internal-module": true,
"no-require-imports": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": true,
"no-unreachable": true,
"no-unused-expression": true,
"no-unused-variable": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"no-var-requires": true,
"object-literal-sort-keys": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-whitespace"
],
"quotemark": [
true,
"single",
"avoid-escape"
],
"radix": true,
"semicolon": true,
"switch-default": true,
"trailing-comma": [
true,
{
"multiline": "never",
"singleline": "never"
}
],
"triple-equals": [
true,
"allow-null-check"
],
"typedef": false,
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"use-strict": false,
"variable-name": [
true,
"check-format",
"allow-leading-underscore",
"ban-keywords"
],
"whitespace": [
true,
"check-branch",
"check-operator",
"check-separator",
"check-type",
"check-module",
"check-decl"
]
}
}

6
ng2-components/ng2-alfresco-search/demo/typings.json Normal file
View File

@@ -0,0 +1,6 @@
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c",
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#d594ef506d1efe2fea15f8f39099d19b39436b71"
}
}

18
ng2-components/ng2-alfresco-search/ng2-alfresco-search.ts
View File

@@ -16,11 +16,29 @@
*/ */
import { AlfrescoService } from './src/services/alfresco.service'; import { AlfrescoService } from './src/services/alfresco.service';
import { AlfrescoSearchComponent } from './src/components/alfresco-search.component';
import { AlfrescoSearchControlComponent } from './src/components/alfresco-search-control.component';
// services // services
export * from './src/services/alfresco.service'; export * from './src/services/alfresco.service';
export * from './src/components/alfresco-search.component'; export * from './src/components/alfresco-search.component';
export * from './src/components/alfresco-search-control.component';
export default {
directives: [
AlfrescoSearchComponent,
AlfrescoSearchControlComponent
],
providers: [
AlfrescoService
]
};
export const ALFRESCO_SEARCH_DIRECTIVES: [any] = [
AlfrescoSearchComponent,
AlfrescoSearchControlComponent
];
export const ALFRESCO_SEARCH_PROVIDERS: [any] = [ export const ALFRESCO_SEARCH_PROVIDERS: [any] = [
AlfrescoService AlfrescoService

11
ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html Normal file
View File

@@ -0,0 +1,11 @@
<form (submit)="onSearch($event)">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="searchTerm">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="searchTerm" [ngFormControl]="searchControl" [(ngModel)]="searchTerm">
<label class="mdl-textfield__label" for="searchTerm">Search content</label>
</div>
</div>
</form>

73
ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts Normal file
View File

@@ -0,0 +1,73 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Control, Validators } from 'angular2/common';
import { Component, Input, Output, EventEmitter } from 'angular2/core';
import { AlfrescoService } from './../services/alfresco.service';
declare let __moduleName: string;
declare var componentHandler: any;
@Component({
moduleId: __moduleName,
selector: 'alfresco-search-control',
styles: [
],
templateUrl: './alfresco-search-control.component.html',
providers: [AlfrescoService]
})
export class AlfrescoSearchControlComponent {
@Input()
searchTerm = 'Default search';
@Output()
searchChange = new EventEmitter();
searchControl: Control;
constructor() {
this.searchControl = new Control(
this.searchTerm,
Validators.compose([Validators.required, Validators.minLength(3)])
);
}
ngAfterViewInit() {
componentHandler.upgradeAllRegistered();
}
/**
* Method called on form submit, i.e. when the user has hit enter
*
* @param event Submit event that was fired
*/
onSearch(event) {
if (event) {
event.preventDefault();
}
if (this.searchControl.valid) {
this.searchChange.emit({
value: this.searchTerm
});
// this.router.navigate(['Search', term]);
}
}
}

7
ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
View File

@@ -1,7 +1,5 @@
<div style="padding: 20px;"> <p *ngIf="searchTerm">Found {{results.length}} results for {{searchTerm}}</p>
<h1>Search results</h1> <table *ngIf="searchTerm && results.length" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
<p *ngIf="results">Found {{results.length}} results for {{currentSearchTerm}}</p>
<table *ngIf="results" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
<thead> <thead>
<tr> <tr>
<th> <th>
@@ -28,4 +26,3 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>

27
ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { Component, Input } from 'angular2/core'; import { Component, Input, Optional, OnChanges, OnInit } from 'angular2/core';
import { RouteParams } from 'angular2/router'; import { RouteParams } from 'angular2/router';
import { AlfrescoService } from './../services/alfresco.service'; import { AlfrescoService } from './../services/alfresco.service';
@@ -25,34 +25,35 @@ declare let __moduleName: string;
moduleId: __moduleName, moduleId: __moduleName,
selector: 'alfresco-search', selector: 'alfresco-search',
styles: [ styles: [
`
:host h1 {
font-size:22px
}
`
], ],
templateUrl: './alfresco-search.component.html', templateUrl: './alfresco-search.component.html',
providers: [AlfrescoService] providers: [AlfrescoService]
}) })
export class AlfrescoSearchComponent { export class AlfrescoSearchComponent implements OnChanges, OnInit {
@Input() @Input()
currentSearchTerm: string = ''; searchTerm: string = '';
folder: any;
results: any; results: any;
errorMessage; errorMessage;
route: any[] = []; route: any[] = [];
constructor( constructor(
private _alfrescoService: AlfrescoService, params: RouteParams) { private _alfrescoService: AlfrescoService, @Optional() params: RouteParams) {
this.results = []; this.results = [];
this.currentSearchTerm = params.get('searchTerm'); if (params) {
this.searchTerm = params.get('q');
}
} }
ngOnInit() { ngOnInit() {
this.displaySearchResults(this.currentSearchTerm); this.displaySearchResults(this.searchTerm);
}
ngOnChanges(changes) {
this.displaySearchResults(this.searchTerm);
} }
/** /**
@@ -80,7 +81,7 @@ export class AlfrescoSearchComponent {
} }
/** /**
* Loads and displays folder content * Loads and displays search results
* @param searchTerm Search query entered by user * @param searchTerm Search query entered by user
*/ */
displaySearchResults(searchTerm) { displaySearchResults(searchTerm) {

1
ng2-components/ng2-alfresco-search/tsconfig.json
View File

@@ -11,6 +11,7 @@
"outDir": "dist" "outDir": "dist"
}, },
"exclude": [ "exclude": [
"demo",
"node_modules", "node_modules",
"typings/main", "typings/main",
"typings/main.d.ts", "typings/main.d.ts",