Fixed clear search issue #1230

Fixed double quotes to single quotes Fixed reference for navbar html Fixed spacing issues in constructor scope Fixed clear search issue #1230
fossasia · Dec 27, 2018 · a0d1a93 · a0d1a93
1 parent 40df564
commit a0d1a93
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 30 deletions.
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
@@ -1,19 +1,16 @@
-<nav class="top-nav navbar navbar-static-top navbar-default" [style.background-color]="themeService.navbarbgColor">
-    <div class="container-fluid">
-        <div class="navbar-header" id="navcontainer">
-            <a routerLink="/">
-                <img class="navbar-brand" src="assets/images/susper.svg" alt="brand">
-            </a>
-
-            <div id="navbar-search">
-                <div id="search-bar">
-                    <app-search-bar></app-search-bar>
-                </div>
-            </div>
-
-            <div id="navbar-dropdown-box">
-                <app-dropdown></app-dropdown>
-            </div>
-        </div>
+<nav
+  class="top-nav navbar navbar-static-top navbar-default"
+  [style.background-color]="themeService.navbarbgColor"
+>
+  <div class="container-fluid">
+    <div class="navbar-header" id="navcontainer">
+      <a routerLink="/" (click)="clearSearch()">
+        <img class="navbar-brand" src="assets/images/susper.svg" alt="brand" />
+      </a>
+      <div id="navbar-search">
+        <div id="search-bar"><app-search-bar></app-search-bar></div>
+      </div>
+      <div id="navbar-dropdown-box"><app-dropdown></app-dropdown></div>
     </div>
+  </div>
 </nav>
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
@@ -1,14 +1,15 @@
-import { Component, OnInit } from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ThemeService } from '../services/theme.service';
+import { SearchBarComponent } from 'app/search-bar/search-bar.component';
 
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.css']
 })
 export class NavbarComponent implements OnInit {
-
+  @ViewChild(SearchBarComponent) searchComponent: SearchBarComponent;
   searchdata = {
     query: '',
     verify: false,
@@ -26,14 +27,16 @@ export class NavbarComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     public themeService: ThemeService
-    ) { }
+  ) {}
 
   ngOnInit() {
     this.searchdata.timezoneOffset = new Date().getTimezoneOffset();
   }
 
+  clearSearch() {
+    this.searchComponent.clearSearch();
+  }
   submit() {
-    this.router.navigate(['/search'], {queryParams: this.searchdata});
+    this.router.navigate(['/search'], { queryParams: this.searchdata });
   }
-
 }
diff --git a/src/app/search-bar/search-bar.component.ts b/src/app/search-bar/search-bar.component.ts
@@ -10,7 +10,7 @@ import {
   ViewChild,
   ViewChildren,
   ElementRef,
-  HostListener,
+  HostListener
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
@@ -25,7 +25,7 @@ import { ThemeService } from '../services/theme.service';
 @Component({
   selector: 'app-search-bar',
   templateUrl: './search-bar.component.html',
-  styleUrls: ['./search-bar.component.css'],
+  styleUrls: ['./search-bar.component.css']
 })
 export class SearchBarComponent implements OnInit, AfterViewInit {
   @ViewChildren('input')
@@ -38,7 +38,7 @@ export class SearchBarComponent implements OnInit, AfterViewInit {
     rows: 10,
     start: 0,
     fq: '',
-    mode: 'text',
+    mode: 'text'
   };
 
   showspeech: boolean = false;
@@ -84,7 +84,7 @@ export class SearchBarComponent implements OnInit, AfterViewInit {
             start: 0,
             rows: this.searchdata.rows,
             fq: this.searchdata.fq,
-            mode: this.searchdata.mode,
+            mode: this.searchdata.mode
           })
         );
       } else {
@@ -93,7 +93,7 @@ export class SearchBarComponent implements OnInit, AfterViewInit {
             query: event.target.value,
             start: 0,
             rows: this.searchdata.rows,
-            mode: this.searchdata.mode,
+            mode: this.searchdata.mode
           })
         );
       }
@@ -120,7 +120,7 @@ export class SearchBarComponent implements OnInit, AfterViewInit {
           start: 0,
           rows: this.searchdata.rows,
           fq: this.searchdata.fq,
-          mode: this.searchdata.mode,
+          mode: this.searchdata.mode
         })
       );
     } else {
@@ -129,7 +129,7 @@ export class SearchBarComponent implements OnInit, AfterViewInit {
           query: this.searchdata.query,
           start: 0,
           rows: this.searchdata.rows,
-          mode: this.searchdata.mode,
+          mode: this.searchdata.mode
         })
       );
     }
@@ -149,6 +149,13 @@ export class SearchBarComponent implements OnInit, AfterViewInit {
   ngAfterViewInit() {
     this.vc.first.nativeElement.focus();
   }
+  clearSearch() {
+    this.store.dispatch(
+      new queryactions.QueryServerAction({
+        query: ''
+      })
+    );
+  }
 
   submit() {
     if (this.searchdata.query.toString().length !== 0) {