Improve searchbar interaction and copy file ID to advanced search (#1015

) * Focus or select ngIf input field on toggle and search * Copy File ID to advanced search when navigating with text
bcgov · Sep 27, 2023 · fff7a8f · fff7a8f
1 parent f668f1b
commit fff7a8f
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 26 deletions.
diff --git a/alcs-frontend/src/app/shared/header/search-bar/search-bar.component.html b/alcs-frontend/src/app/shared/header/search-bar/search-bar.component.html
@@ -24,8 +24,6 @@
     </button>
   </div>
   <div class="advanced-search">
-    <a href="/search">
-      <button mat-stroked-button color="primary">Advanced Search</button>
-    </a>
+    <button mat-stroked-button color="primary" (click)="navigateToAdvancedSearch()">Advanced Search</button>
   </div>
 </div>
diff --git a/alcs-frontend/src/app/shared/header/search-bar/search-bar.component.scss b/alcs-frontend/src/app/shared/header/search-bar/search-bar.component.scss
@@ -24,12 +24,6 @@
   border-radius: 0 0 4px 4px;
   z-index: 9999;
 
-  a {
-    display: flex;
-    height: fit-content;
-    text-decoration: none;
-  }
-
   button {
     width: 100%;
     background: colors.$white;
@@ -82,14 +76,6 @@
   }
 }
 
-input {
-  color: colors.$primary-color;
-}
-
-.mat-mdc-input-element {
-  color: colors.$primary-color !important;
-}
-
 :host ::ng-deep .mat-form-field-wrapper {
   margin: 0 !important;
   padding: 0;

diff --git a/alcs-frontend/src/app/shared/header/search-bar/search-bar.component.ts b/alcs-frontend/src/app/shared/header/search-bar/search-bar.component.ts
@@ -1,5 +1,5 @@
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, HostListener, QueryList, ViewChildren } from '@angular/core';
 import { Router } from '@angular/router';
 import { SearchService } from '../../../services/search/search.service';
 import { ToastService } from '../../../services/toast/toast.service';
@@ -13,11 +13,11 @@ import { animate, style, transition, trigger } from '@angular/animations';
     trigger('inAnimation', [transition(':enter', [style({ height: 0, opacity: 0 }), animate('100ms ease-out')])]),
   ],
 })
-export class SearchBarComponent {
+export class SearchBarComponent implements AfterViewInit {
   searchText = '';
   showInput = false;
   wasInside = false;
-  @ViewChild('searchInput') input!: ElementRef;
+  @ViewChildren('searchInput') input!: QueryList<ElementRef>;
 
   constructor(private toastService: ToastService, private router: Router, private searchService: SearchService) {}
 
@@ -34,20 +34,45 @@ export class SearchBarComponent {
     this.wasInside = false;
   }
 
-  async toggleInput() {
+  ngAfterViewInit(): void {
+    this.input.changes.subscribe(() => {
+      this.focusInput();
+    });
+  }
+
+  focusInput() {
+    if (this.input.length > 0) {
+      this.input.first.nativeElement.focus();
+    }
+  }
+
+  selectInput() {
+    if (this.input.length > 0) {
+      this.input.first.nativeElement.select();
+    }
+  }
+
+  toggleInput() {
     this.showInput = !this.showInput;
   }
 
+  resetInput() {
+    this.toggleInput();
+    this.searchText = '';
+  }
+
   async onSearch() {
     if (!this.searchText) {
       this.toastService.showErrorToast(`File not found, try again`);
+      this.focusInput();
       return;
     }
 
     try {
       const searchResult = await this.searchService.fetch(this.searchText);
       if (!searchResult || searchResult.length < 1) {
         this.toastService.showWarningToast(`File ID ${this.searchText} not found, try again`);
+        this.selectInput();
         return;
       }
 
@@ -72,21 +97,29 @@ export class SearchBarComponent {
           default:
             this.toastService.showErrorToast(`Unable to navigate to ${result.referenceId}`);
         }
-        this.toggleInput();
       }
 
       if (searchResult?.length > 1) {
         await this.router.navigateByUrl(`/search?searchText=${this.searchText}`);
-        this.toggleInput();
       }
 
-      this.searchText = '';
+      this.resetInput();
     } catch (e) {
       if (e instanceof HttpErrorResponse && e.status === 404) {
         this.toastService.showWarningToast(`File ID ${this.searchText} not found, try again`);
-        const inputElem = <HTMLInputElement>this.input.nativeElement;
-        inputElem.select();
+        this.selectInput();
       }
     }
   }
+
+  async navigateToAdvancedSearch() {
+    let url = '/search';
+
+    if (this.searchText) {
+      url += `?searchText=${this.searchText}`;
+    }
+
+    await this.router.navigateByUrl(url);
+    this.resetInput();
+  }
 }