Public search scroll to result

bcgov · Mar 6, 2024 · eeb8372 · eeb8372
1 parent ba6e6c3
commit eeb8372
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/portal-frontend/src/app/features/public/search/public-search.component.html b/portal-frontend/src/app/features/public/search/public-search.component.html
@@ -127,15 +127,15 @@ <h3>Search by one or more of the following fields:</h3>
 
     <div class="button-controls">
       <button type="button" mat-stroked-button color="accent" (click)="onClear()">Clear</button>
-      <button type="submit" mat-flat-button color="primary" [disabled]="formEmpty || !searchForm.valid">Search</button>
+      <button type="submit" mat-flat-button color="primary" [disabled]="formEmpty || !searchForm.valid || isLoading">Search</button>
     </div>
   </form>
 
   <div *ngIf="isLoading && searchResultsHidden" class="center">
     <mat-spinner></mat-spinner>
   </div>
   <div class="search-fields-wrapper search-result-wrapper" *ngIf="!searchResultsHidden">
-    <h3 class="search-title">Search Results</h3>
+    <h3 class="search-title" id="searchResults">Search Results</h3>
     <div *ngIf="isLoading && !searchResultsHidden" class="center">
       <mat-spinner></mat-spinner>
     </div>

diff --git a/portal-frontend/src/app/features/public/search/public-search.component.ts b/portal-frontend/src/app/features/public/search/public-search.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatPaginator } from '@angular/material/paginator';
@@ -128,7 +128,8 @@ export class PublicSearchComponent implements OnInit, OnDestroy {
     private codeService: CodeService,
     private statusService: StatusService,
     private toastService: ToastService,
-    private titleService: Title
+    private titleService: Title,
+    private elementRef: ElementRef,
   ) {
     this.titleService.setTitle('ALC Portal | Public Search');
   }
@@ -193,6 +194,14 @@ export class PublicSearchComponent implements OnInit, OnDestroy {
     sessionStorage.setItem(SEARCH_SESSION_STORAGE_KEY, searchDto);
 
     this.isLoading = true;
+    const element = this.elementRef.nativeElement.querySelector(`#${CSS.escape('searchResults')}`);
+    if (element) {
+      element.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+        inline: 'start',
+      });
+    }
     const result = await this.searchService.search(searchParams);
     this.searchResultsHidden = false;
     this.isLoading = false;