Add demo folder for search component

Refs #90
2025-07-31 17:38:48 +00:00 · 2016-06-01 13:14:45 +01:00
parent 06dfbe90f4
commit 335b0f99c9
14 changed files with 507 additions and 18 deletions
--- a/ng2-components/ng2-alfresco-search/demo/README.md
+++ b/ng2-components/ng2-alfresco-search/demo/README.md
@@ -0,0 +1,13 @@
+# angular2-alfresco-search
+
+Install:
+
+```
+npm install
+```
+
+Run the project:
+
+```
+npm start
+```
--- a/ng2-components/ng2-alfresco-search/demo/i18n/en.json
+++ b/ng2-components/ng2-alfresco-search/demo/i18n/en.json
@@ -0,0 +1,4 @@
+{
+    "SEARCH": {
+    }
+}
--- a/ng2-components/ng2-alfresco-search/demo/index.html
+++ b/ng2-components/ng2-alfresco-search/demo/index.html
@@ -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>
--- a/ng2-components/ng2-alfresco-search/demo/package.json
+++ b/ng2-components/ng2-alfresco-search/demo/package.json
@@ -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/"
+  }
+}
--- a/ng2-components/ng2-alfresco-search/demo/src/main.ts
+++ b/ng2-components/ng2-alfresco-search/demo/src/main.ts
@@ -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
+]);
--- a/ng2-components/ng2-alfresco-search/demo/tsconfig.json
+++ b/ng2-components/ng2-alfresco-search/demo/tsconfig.json
@@ -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"
+  ]
+}
--- a/ng2-components/ng2-alfresco-search/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-search/demo/tslint.json
@@ -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"
+    ]
+  }
+}
--- a/ng2-components/ng2-alfresco-search/demo/typings.json
+++ b/ng2-components/ng2-alfresco-search/demo/typings.json
@@ -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"
+  }
+}
--- a/ng2-components/ng2-alfresco-search/ng2-alfresco-search.ts
+++ b/ng2-components/ng2-alfresco-search/ng2-alfresco-search.ts
@@ -16,11 +16,29 @@
 */

 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
 export * from './src/services/alfresco.service';

 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] = [
    AlfrescoService
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
@@ -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>
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
@@ -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]);
+        }
+    }
+
+}
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
@@ -1,7 +1,5 @@
-<div style="padding: 20px;">
-<h1>Search results</h1>
-<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">
+<p *ngIf="searchTerm">Found {{results.length}} results for {{searchTerm}}</p>
+<table *ngIf="searchTerm && results.length" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
    <thead>
    <tr>
        <th>
@@ -28,4 +26,3 @@
    </tr>
    </tbody>
 </table>
-</div>
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
@@ -15,7 +15,7 @@
 * 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 { AlfrescoService } from './../services/alfresco.service';

@@ -25,34 +25,35 @@ declare let __moduleName: string;
    moduleId: __moduleName,
    selector: 'alfresco-search',
    styles: [
-        `
-              :host h1 {
-                  font-size:22px
-              }
-          `
    ],
    templateUrl: './alfresco-search.component.html',
    providers: [AlfrescoService]
 })
-export class AlfrescoSearchComponent {
+export class AlfrescoSearchComponent implements OnChanges, OnInit {

    @Input()
-    currentSearchTerm: string = '';
+    searchTerm: string = '';

-    folder: any;
    results: any;
+
    errorMessage;

    route: any[] = [];

    constructor(
-        private _alfrescoService: AlfrescoService, params: RouteParams) {
+        private _alfrescoService: AlfrescoService, @Optional() params: RouteParams) {
        this.results = [];
-        this.currentSearchTerm = params.get('searchTerm');
+        if (params) {
+            this.searchTerm = params.get('q');
+        }
    }

    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
     */
    displaySearchResults(searchTerm) {
--- a/ng2-components/ng2-alfresco-search/tsconfig.json
+++ b/ng2-components/ng2-alfresco-search/tsconfig.json
@@ -11,6 +11,7 @@
        "outDir": "dist"
    },
    "exclude": [
+        "demo",
        "node_modules",
        "typings/main",
        "typings/main.d.ts",