changed search.component and the search-form.component to fill the query field w…

…ith 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.

changed search.component and the search-form.component to fill the query field w…
…ith 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.
Ábner Oliveira
1 parent 5bc45a30
Showing 7 changed files with 51 additions and 11 deletions Show diff stats
src/app/search/search-form/search-form.component.ts
src/app/search/search-form/search-form.html
src/app/search/search.component.ts
src/app/search/search.html
src/app/search/search.scss
src/languages/en.json
src/languages/pt.json
@@ -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;
+    }
 }
-<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">
 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,
-<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"}}
@@ -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
@@ -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"
 }
@@ -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"
 }
	@@ -9,9 +9,18 @@ export class SearchFormComponent {		@@ -9,9 +9,18 @@ export class SearchFormComponent {
9		9
10	query: string;	10	query: string;
11		11
12	- constructor(private $state: ng.ui.IStateService) { }	12	+ constructor(private $state: ng.ui.IStateService) {
		13	+ }
		14	+
		15	+ ngOnInit() {
		16	+ this.query = this.$state.params['query'];
		17	+ }
13		18
14	search() {	19	search() {
15	this.$state.go('main.environment.search', { query: this.query });	20	this.$state.go('main.environment.search', { query: this.query });
16	}	21	}
		22	+
		23	+ isSearchPage() {
		24	+ return "main.environment.search" === this.$state.current.name;
		25	+ }
17	}	26	}
1	-<form class="navbar-form search-form" role="search">	1	+<form class="navbar-form search-form" role="search" ng-if="!ctrl.isSearchPage()">
2	<div class="input-group">	2	<div class="input-group">
3	<input type="text" class="search-input form-control" placeholder="Search" name="q" ng-model="ctrl.query">	3	<input type="text" class="search-input form-control" placeholder="Search" name="q" ng-model="ctrl.query">
4	<div class="input-group-btn">	4	<div class="input-group-btn">
	@@ -6,7 +6,7 @@		@@ -6,7 +6,7 @@
6	}	6	}
7	.result {	7	.result {
8	margin: 25px 0;	8	margin: 25px 0;
9	-	9	+
10	.title {	10	.title {
11	h4 {	11	h4 {
12	margin: 0;	12	margin: 0;
	@@ -25,6 +25,24 @@		@@ -25,6 +25,24 @@
25	font-size: 10px;	25	font-size: 10px;
26	color: #afd6ba;	26	color: #afd6ba;
27	}	27	}
28	- }	28	+ }
29	}	29	}
30	}	30	}
		31	+
		32	+.search-box-title {
		33	+ border: 0;
		34	+ border-bottom: 1px solid rgba(0,0,0,.15);
		35	+ border-radius: 0;
		36	+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
		37	+ letter-spacing: 0;
		38	+ font-weight: 300;
		39	+ font-style: normal;
		40	+ font-size: 50px;
		41	+ height: 80px;
		42	+ padding: 0;
		43	+ width: 100%;
		44	+}
		45	+
		46	+.search-box-title:focus {
		47	+ outline: none;
		48	+}
31	\ No newline at end of file	49	\ No newline at end of file