From 575daccf9b3f39faf9d16df9b9da9bbfd8d29156 Mon Sep 17 00:00:00 2001
From: Abner Oliveira <abner.silva@gmail.com>
Date: Tue, 14 Jun 2016 18:37:59 -0300
Subject: [PATCH] changed search.component and the search-form.component to fill the query field with the query value in the current  query  param. changed the search.component to have a search text box to show then current query and allow  the user query for new terms.

---
 src/app/search/search-form/search-form.component.ts | 11 ++++++++++-
 src/app/search/search-form/search-form.html         |  2 +-
 src/app/search/search.component.ts                  | 13 ++++++++++---
 src/app/search/search.html                          |  6 ++++--
 src/app/search/search.scss                          | 22 ++++++++++++++++++++--
 src/languages/en.json                               |  4 +++-
 src/languages/pt.json                               |  4 +++-
 7 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/src/app/search/search-form/search-form.component.ts b/src/app/search/search-form/search-form.component.ts
index c8978ed..5bffbba 100644
--- a/src/app/search/search-form/search-form.component.ts
+++ b/src/app/search/search-form/search-form.component.ts
@@ -9,9 +9,18 @@ export class SearchFormComponent {
 
     query: string;
 
-    constructor(private $state: ng.ui.IStateService) { }
+    constructor(private $state: ng.ui.IStateService) {
+    }
+
+    ngOnInit() {
+        this.query = this.$state.params['query'];
+    }
 
     search() {
         this.$state.go('main.environment.search', { query: this.query });
     }
+
+    isSearchPage() {
+        return "main.environment.search" === this.$state.current.name;
+    }
 }
diff --git a/src/app/search/search-form/search-form.html b/src/app/search/search-form/search-form.html
index 3c59af3..e1878b5 100644
--- a/src/app/search/search-form/search-form.html
+++ b/src/app/search/search-form/search-form.html
@@ -1,4 +1,4 @@
-<form class="navbar-form search-form" role="search">
+<form class="navbar-form search-form" role="search" ng-if="!ctrl.isSearchPage()">
   <div class="input-group">
     <input type="text" class="search-input form-control" placeholder="Search" name="q" ng-model="ctrl.query">
     <div class="input-group-btn">
diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts
index 67ee04d..6e67f6a 100644
--- a/src/app/search/search.component.ts
+++ b/src/app/search/search.component.ts
@@ -1,11 +1,14 @@
 import {Component, Inject} from "ng-forward";
 import {ArticleService} from "./../../lib/ng-noosfero-api/http/article.service";
 
+import {SearchFormComponent} from "./search-form/search-form.component";
+
 @Component({
     selector: 'search',
-    templateUrl: 'app/search/search.html'
+    templateUrl: 'app/search/search.html',
+    directives: [SearchFormComponent]
 })
-@Inject(ArticleService, "$stateParams")
+@Inject(ArticleService, "$stateParams", "$state")
 export class SearchComponent {
 
     articles: noosfero.Article[];
@@ -14,11 +17,15 @@ export class SearchComponent {
     perPage = 10;
     currentPage: number = 0;
 
-    constructor(private articleService: ArticleService, private $stateParams: ng.ui.IStateParamsService) {
+    constructor(private articleService: ArticleService, private $stateParams: ng.ui.IStateParamsService, private $state: ng.ui.IStateService) {
         this.query = this.$stateParams['query'];
         this.loadPage();
     }
 
+    search() {
+         this.$state.go('main.environment.search', { query: this.query });
+    }
+
     loadPage() {
         let filters = {
             query: this.query,
diff --git a/src/app/search/search.html b/src/app/search/search.html
index e829ad9..ee69c3c 100644
--- a/src/app/search/search.html
+++ b/src/app/search/search.html
@@ -1,5 +1,7 @@
-<h2>Search</h2>
-
+<form ng-submit="ctrl.search()">
+<label for="query" ng-bind-html="'search.results.query.label' | translate"></label>
+<input id="query" placeholder="{{'search.results.query.placeholder' | translate}}" type="search" class="search-box-title" ng-model="ctrl.query">
+</form>
 <div class="search-results">
   <div class="summary">
     {{"search.results.summary" | translate:{results: ctrl.totalResults}:"messageformat"}}
diff --git a/src/app/search/search.scss b/src/app/search/search.scss
index 8706e04..3d3d5e8 100644
--- a/src/app/search/search.scss
+++ b/src/app/search/search.scss
@@ -6,7 +6,7 @@
   }
   .result {
     margin: 25px 0;
-    
+
     .title {
       h4 {
         margin: 0;
@@ -25,6 +25,24 @@
         font-size: 10px;
         color: #afd6ba;
       }
-    }    
+    }
   }
 }
+
+.search-box-title {
+    border: 0;
+    border-bottom: 1px solid rgba(0,0,0,.15);
+    border-radius: 0;
+    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+    letter-spacing: 0;
+    font-weight: 300;
+    font-style: normal;
+    font-size: 50px;
+    height: 80px;
+    padding: 0;
+    width: 100%;
+}
+
+.search-box-title:focus {
+  outline: none;
+}
\ No newline at end of file
diff --git a/src/languages/en.json b/src/languages/en.json
index b5cf2f4..d4d5e65 100644
--- a/src/languages/en.json
+++ b/src/languages/en.json
@@ -75,5 +75,7 @@
   "custom_content.title": "Edit content",
   "profile.custom_header.label": "Header",
   "profile.custom_footer.label": "Footer",
-  "search.results.summary": "{results, plural, one{result} other{# results}}"
+  "search.results.summary": "{results, plural, one{result} other{# results}}",
+  "search.results.query.label": "Search for:",
+  "search.results.query.placeholder": "Search"
 }
diff --git a/src/languages/pt.json b/src/languages/pt.json
index aa55abe..c6832cc 100644
--- a/src/languages/pt.json
+++ b/src/languages/pt.json
@@ -75,5 +75,7 @@
   "custom_content.title": "Editar conteúdo",
   "profile.custom_header.label": "Cabeçalho",
   "profile.custom_footer.label": "Rodapé",
-  "search.results.summary": "{results, plural, one{resultado} other{# resultados}}"
+  "search.results.summary": "{results, plural, one{# resultado} other{# resultados}}",
+  "search.results.query.label": "Buscar:",
+  "search.results.query.placeholder": "Informe aqui sua busca"
 }
--
libgit2 0.21.2