feat(business): add search suggestions

add various topics as search suggestions when search bar is focused
michaelschoenbaechler · Sep 12, 2023 · d211f82 · d211f82
1 parent 20d05e9
commit d211f82
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 1 deletion.
diff --git a/src/app/business/container/business-list/business-list.page.html b/src/app/business/container/business-list/business-list.page.html
@@ -8,6 +8,7 @@
       appHideKeyboardOnEnter
       color="light"
       enterkeyhint="search"
+      (ionFocus)="onFocus()"
       (ionChange)="onSearch($event)"
     ></ion-searchbar>
     <ion-icon
@@ -17,14 +18,25 @@
       name="filter-outline"
     ></ion-icon>
   </ion-toolbar>
-  <div class="current-filter">
+  <div
+    class="current-filter"
+    *ngIf="selectedBusinessTypes.length > 0 || selectedBusinessStatuses.length > 0"
+  >
     <ion-chip *ngFor="let businessType of selectedBusinessTypes">
       <ion-label>{{ businessType.BusinessTypeName }}</ion-label>
     </ion-chip>
     <ion-chip *ngFor="let businesStatus of selectedBusinessStatuses">
       <ion-label>{{ businesStatus.BusinessStatusName }}</ion-label>
     </ion-chip>
   </div>
+  <div class="search-suggestions" *ngIf="showSuggestedSearches">
+    <p><small>Nach Thema suchen</small></p>
+    <ion-chip
+      *ngFor="let term of suggestedSearchTerms"
+      (click)="onSuggestedSearchTopic(term)"
+      >{{ term }}</ion-chip
+    >
+  </div>
 </ion-header>
 
 <ion-content role="feed" class="ion-padding">

diff --git a/src/app/business/container/business-list/business-list.page.scss b/src/app/business/container/business-list/business-list.page.scss
@@ -19,6 +19,12 @@ ion-chip {
   margin: 0 0.5rem 0.5rem 0;
 }
 
+.search-suggestions {
+  padding: 0.5rem 1rem 0 1rem;
+  color: #666666;
+  background-color: var(--ion-color-primary-contrast);
+}
+
 .current-filter {
   padding: 0.5rem 1rem 0 1rem;
   background-color: var(--ion-color-primary-contrast);

diff --git a/src/app/business/container/business-list/business-list.page.ts b/src/app/business/container/business-list/business-list.page.ts
@@ -8,6 +8,7 @@ import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import * as _ from 'lodash';
 import { IonSearchbar } from '@ionic/angular';
+import { Keyboard } from '@capacitor/keyboard';
 
 @UntilDestroy()
 @Component({
@@ -25,6 +26,26 @@ export class BusinessListComponent implements OnInit {
   isModalOpen = false;
   showFilterButton = false;
   presentingElement = null;
+  showSuggestedSearches: boolean = false;
+  suggestedSearchTerms: string[] = [
+    'Internationale Politik',
+    'Verkehr',
+    'Finanzwesen',
+    'Soziale Fragen',
+    'Umwelt',
+    'Bildung',
+    'Wirtschaft',
+    'Gesundheit',
+    'Staatspolitik',
+    'Migration',
+    'Gesundheit',
+    'Parlament',
+    'Strafrecht',
+    'Steuer',
+    'Europapolitik',
+    'Sicherheitspolitik',
+    'Raumplanung'
+  ];
 
   filterForm: FormGroup;
   filterError = false;
@@ -162,6 +183,10 @@ export class BusinessListComponent implements OnInit {
           this.showFilterButton = true;
         }
       });
+
+    Keyboard.addListener('keyboardWillHide', () => {
+      this.showSuggestedSearches = false;
+    });
   }
 
   ionViewDidEnter() {
@@ -176,13 +201,24 @@ export class BusinessListComponent implements OnInit {
   }
 
   onSearch(event: any) {
+    this.showSuggestedSearches = false;
     this.searchTerm$.next(event.target.value);
   }
 
+  onSuggestedSearchTopic(searchTerm: string) {
+    this.showSuggestedSearches = false;
+    this.searchBar.value = searchTerm;
+    this.searchTerm$.next(searchTerm);
+  }
+
   retrySearch() {
     this.trigger$.next();
   }
 
+  onFocus() {
+    this.showSuggestedSearches = true;
+  }
+
   resetFilter() {
     this.filterForm.reset();
     this.searchTerm$.next('');