Extract search box into its own component

- Upgraded to latest 0.1.5 version of search
- Search is now only shown if the user is logged in
- Heading now lives inside the demo app not inside search

Refs #69

demo-shell-ng2/app/app.component.html

@@ -7,17 +7,9 @@
             <!-- Add spacer, to align navigation to the right -->
             <div class="mdl-layout-spacer"></div>
 
-            <form [ngFormModel]="searchForm" (submit)="onSearch(searchForm.value, $event)">
+            <!-- Search box -->
-                <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
+            <alfresco-search-control *ngIf="isLoggedIn()" [searchTerm]="searchTerm"
-                    <label class="mdl-button mdl-js-button mdl-button--icon" for="searchTerm">
+            (searchChange)="searchTermChange($event);"></alfresco-search-control>
-                        <i class="material-icons">search</i>
-                    </label>
-                    <div class="mdl-textfield__expandable-holder">
-                        <input class="mdl-textfield__input" type="text" id="searchTerm" ngControl="searchTerm">
-                        <label class="mdl-textfield__label" for="searchTerm">Expandable Input</label>
-                    </div>
-                </div>
-            </form>
 
             <!-- Navigation. We hide it in small screens. -->
             <nav class="mdl-navigation mdl-layout--large-screen-only">

demo-shell-ng2/app/app.component.ts

@@ -16,7 +16,6 @@
  */
 
 import { Component } from 'angular2/core';
-import { ControlGroup, FormBuilder, Validators } from 'angular2/common';
 import { Router, RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
 import { MDL } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
 import { FilesComponent } from './components/files/files.component';
@@ -29,7 +28,8 @@ import {
 } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
 import { UploadButtonComponent } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload';
 import { DataTableDemoComponent } from './components/datatable/datatable-demo.component';
-import { AlfrescoSearchComponent } from 'ng2-alfresco-search/dist/ng2-alfresco-search';
+import { SearchComponent } from './components/search/search.component';
+import { ALFRESCO_SEARCH_DIRECTIVES } from 'ng2-alfresco-search/dist/ng2-alfresco-search';
 import { LoginDemoComponent } from './components/login/login-demo.component';
 import { ViewerFileComponent } from './components/viewer/viewer.component';
 
@@ -38,7 +38,7 @@ declare var document: any;
 @Component({
     selector: 'my-app',
     templateUrl: 'app/app.component.html',
-    directives: [ROUTER_DIRECTIVES, AuthRouterOutlet, MDL],
+    directives: [ALFRESCO_SEARCH_DIRECTIVES, ROUTER_DIRECTIVES, AuthRouterOutlet, MDL],
     pipes: [AlfrescoPipeTranslate]
 })
 @RouteConfig([
@@ -47,24 +47,19 @@ declare var document: any;
     {path: '/datatable', name: 'DataTable', component: DataTableDemoComponent},
     {path: '/uploader', name: 'Uploader', component: UploadButtonComponent},
     {path: '/login', name: 'Login', component: LoginDemoComponent},
-    {path: '/search', name: 'Search', component: AlfrescoSearchComponent},
+    {path: '/search', name: 'Search', component: SearchComponent},
     {path: '/viewer', name: 'Viewer', component: ViewerFileComponent}
 ])
 export class AppComponent {
     translate: AlfrescoTranslationService;
-    searchForm: ControlGroup;
+    searchTerm: string = '';
 
-    constructor(private _fb: FormBuilder,
+    constructor(public auth: AlfrescoAuthenticationService,
-                public auth: AlfrescoAuthenticationService,
                 public router: Router,
                 translate: AlfrescoTranslationService,
                 alfrescoSettingsService: AlfrescoSettingsService) {
         alfrescoSettingsService.host = 'http://192.168.99.100:8080';
 
-        this.searchForm = this._fb.group({
-            searchTerm: ['', Validators.compose([Validators.required, Validators.minLength(3)])]
-        });
-
         this.translate = translate;
         this.translate.translationInit();
     }
@@ -95,14 +90,13 @@ export class AppComponent {
     }
 
     /**
-     * Method called on submit form
+     * Called when a new search term is submitted
-     * @param value
+     *
-     * @param event
+     * @param params Parameters relating to the search
      */
-    onSearch(value: any, event) {
+    searchTermChange(params) {
-        if (event) {
+        this.router.navigate(['Search', {
-            event.preventDefault();
+            q: params.value
-        }
+        }]);
-        this.router.navigate(['Search', value]);
     }
 }

demo-shell-ng2/app/components/search/search.component.html

@@ -0,0 +1,4 @@
+<div>
+    <h1>Search results</h1>
+    <alfresco-search></alfresco-search>
+</div>

demo-shell-ng2/app/components/search/search.component.ts

@@ -0,0 +1,41 @@
+/**
+ * @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 } from 'angular2/core';
+import { ALFRESCO_SEARCH_DIRECTIVES } from 'ng2-alfresco-search/dist/ng2-alfresco-search';
+
+declare let __moduleName: string;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'search-component',
+    templateUrl: './search.component.html',
+    styles: [`
+        :host div {
+            padding: 0 20px;
+        }
+        :host h1 {
+            font-size: 22px;
+        }
+    `],
+    directives: [ ALFRESCO_SEARCH_DIRECTIVES ]
+})
+export class SearchComponent {
+    constructor() {
+        console.log('SearchComponent constructor');
+    }
+}

demo-shell-ng2/package.json

@@ -60,7 +60,7 @@
     "ng2-alfresco-datatable": "^0.1.0",
     "ng2-alfresco-documentlist": "^0.1.0",
     "ng2-alfresco-login": "^0.1.0",
-    "ng2-alfresco-search": "^0.1.2",
+    "ng2-alfresco-search": "^0.1.5",
     "ng2-alfresco-upload": "^0.1.0",
     "ng2-alfresco-viewer": "^0.1.6",
     "ng2-translate": "^1.11.3",