diff --git a/src/app/business/container/business-list/business-list.page.html b/src/app/business/container/business-list/business-list.page.html index 109286c..3aff91a 100644 --- 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)" > -
+
{{ businessType.BusinessTypeName }} @@ -25,6 +29,14 @@ {{ businesStatus.BusinessStatusName }}
+
+

Nach Thema suchen

+ {{ term }} +
diff --git a/src/app/business/container/business-list/business-list.page.scss b/src/app/business/container/business-list/business-list.page.scss index 032838d..8f27729 100644 --- 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 index caf3951..6a30f4f 100644 --- 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('');