[Dev] Test search via API

.env.example

@@ -27,6 +27,10 @@ NG_USE_Q_AND_AS=true
 # Enable Search-feature for 'Q & A's (Possible value: `true` or leave empty for `false`)
 NG_USE_Q_AND_A_SEARCH=true
 
+# (Optional) Server-side Search-feature via API (Requires NG_USE_Q_AND_A_SEARCH to be true!)
+SEARCH_API=
+SEARCH_API_KEY=
+
 # Enable Feedback-prompt on Sub-Category and Offer pages (Possible value: `true` or leave empty for `false`)
 NG_USE_FEEDBACK_PROMPT=true
 

src/app/components/feedback-link/feedback-link.component.ts

@@ -115,6 +115,7 @@ export class FeedbackLinkComponent implements OnChanges, OnInit {
       LoggingEventCategory.ai,
       LoggingEvent.FeedbackAnswered,
       {
+        name: value, // Use "name"-property for Matomo
         answer: value,
       },
     );

src/app/components/offer/offer.component.ts

@@ -1,6 +1,5 @@
 import { NgFor, NgIf } from '@angular/common';
 import { Component, Input } from '@angular/core';
-import { RouterLink } from '@angular/router';
 import { IonImg } from '@ionic/angular/standalone';
 import { MarkdownModule } from 'ngx-markdown';
 import {
@@ -17,7 +16,7 @@ import { formatPhoneNumberAsUrl } from 'src/app/shared/utils';
   templateUrl: './offer.component.html',
   styleUrls: ['./offer.component.scss'],
   standalone: true,
-  imports: [MarkdownModule, IonImg, NgIf, NgFor, RouterLink],
+  imports: [MarkdownModule, IonImg, NgIf, NgFor],
 })
 export class OfferComponent {
   @Input()

src/app/components/q-a-set/q-a-set.component.ts

@@ -53,6 +53,7 @@ export class QASetComponent {
         ? LoggingEvent.QuestionOpen
         : LoggingEvent.QuestionClose,
       {
+        name: slug, // Use "name"-property for Matomo
         questionSlug: slug,
         question: question.substring(0, 100),
       },

src/app/components/search-input/search-input.component.html

@@ -2,18 +2,31 @@
   role="search"
   #ngForm
   (ngSubmit)="doSubmit()"
+  class="search-input"
 >
-  <input
-    type="search"
-    name="q"
-    [(ngModel)]="searchQuery"
-    enterkeyhint="search"
-    class="input-field--text text-style--size-1"
-  />
+  <span class="search-input--input">
+    <input
+      type="search"
+      name="q"
+      [(ngModel)]="searchQuery"
+      enterkeyhint="search"
+      class="input-field--text text-style--size-1"
+    />
+
+    <button
+      *ngIf="!!searchQuery"
+      type="button"
+      class="input-field--clear"
+      [title]="clearLabel || 'Clear'"
+      (click)="searchQuery = ''; doSubmit(); ngForm.q.focus()"
+    >
+      <strong>&times;</strong>
+    </button>
+  </span>
 
   <button
     type="submit"
-    class="action is_round is_inline is_outline text-style--alt text-style--size-1"
+    class="search-input--action action is_round is_inline is_outline text-style--alt text-style--size-1"
   >
     <strong>
       {{ actionLabel || 'Search' }}

src/app/components/search-input/search-input.component.scss

@@ -7,19 +7,34 @@
   --search-input--focus: var(--hia_level_text, black);
 }
 
-form {
+.search-input {
   padding-block-start: 1em;
   padding-block-end: 1em;
 
   // Layout
   display: flex;
   gap: 0.5em;
 
-  input[type='search'] {
+  .search-input--input {
     flex: 1 1 80%;
+    position: relative;
   }
-  button[type='submit'] {
-    flex: 0 0 auto;
+  .search-input--action {
+    flex: 0 0 20%;
+    word-wrap: normal;
+  }
+}
+
+.input-field--clear,
+.input-field--text {
+  border: 0;
+  border-radius: 0.25em;
+
+  &:focus {
+    outline-color: var(--search-input--focus);
+    outline-offset: 0.125rem;
+    outline-width: 0.125rem;
+    outline-style: solid;
   }
 }
 
@@ -30,11 +45,18 @@ form {
   border-radius: 0.25em;
   padding-block: 0.25em;
   padding-inline: 0.5em;
+  width: 100%;
+}
+
+.input-field--clear {
+  position: absolute;
+  inset-block-start: 0.25rem;
+  inset-inline-end: 0.25rem;
+  display: inline-block;
+  padding: 0.25rem;
+  background: transparent;
 
   &:focus {
-    outline-color: var(--search-input--focus);
-    outline-offset: 2px;
-    outline-width: 2px;
-    outline-style: solid;
+    outline-color: gold;
   }
 }

src/app/components/search-input/search-input.component.ts

@@ -1,3 +1,4 @@
+import { NgIf } from '@angular/common';
 import type { OnInit } from '@angular/core';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -7,7 +8,7 @@ import { FormsModule } from '@angular/forms';
   templateUrl: './search-input.component.html',
   styleUrls: ['./search-input.component.scss'],
   standalone: true,
-  imports: [FormsModule],
+  imports: [FormsModule, NgIf],
 })
 export class SearchInputComponent implements OnInit {
   @Input()
@@ -22,6 +23,9 @@ export class SearchInputComponent implements OnInit {
   @Input()
   public actionLabel: string;
 
+  @Input()
+  public clearLabel: string;
+
   private previousQuery: string;
 
   constructor() {}

src/app/pages/search/search.page.html

@@ -1,12 +1,17 @@
 <app-parent-link [region]="region"></app-parent-link>
 
 <h2 class="text-style--alt text-style--size-2">
-  {{ regionData?.labelSearchPageTitle }}
+  <ng-container *ngIf="!useSearchApi">
+    {{ regionData?.labelSearchPageTitle }}
+  </ng-container>
+  <ng-container *ngIf="useSearchApi"> What are you looking for? </ng-container>
 </h2>
 
+<p *ngIf="useSearchApi">Search by typing a question or relevant keywords.</p>
+
 <app-search-input
   [(searchQuery)]="searchQuery"
-  (doSearch)="performSearch($event)"
+  (doSearch)="onSearchInput($event)"
   [actionLabel]="regionData?.labelSearchAction"
   class="ion-margin-vertical"
 ></app-search-input>
@@ -17,12 +22,38 @@ <h2 class="text-style--alt text-style--size-2">
   [tabindex]="-1"
   class="focus--minimal focus--fade-out"
 >
-  <p *ngIf="!!searchQuery">
-    {{ regionData?.labelSearchResultsCount }}
-    <strong>{{ searchResults?.length }}</strong>
+  <div
+    *ngIf="useSearchApi"
+    class="ion-padding"
+    style="border: 1px solid white; border-radius: 0.25em"
+  >
+    <div *ngIf="loadingSearch">
+      <span
+        class="loading-text"
+        style="width: 95%"
+      ></span>
+      <span class="loading-text"></span>
+      <span
+        class="loading-text"
+        style="width: 88%"
+      ></span>
+      <span
+        class="loading-text"
+        style="width: 75%"
+      ></span>
+    </div>
+  </div>
+
+  <p
+    *ngIf="
+      useSearchApi && !!searchQuery && !loadingSearch && searchResults?.length
+    "
+  >
+    For more detailed information, check out these FAQs:
   </p>
 
   <app-q-a-set-list
+    *ngIf="!!searchQuery && !loadingSearch"
     [baseUrl]="'../'"
     [list]="searchResults"
     [showDateUpdatedOutsideQuestion]="false"

src/app/pages/search/search.page.ts

@@ -2,37 +2,52 @@ import { NgIf } from '@angular/common';
 import type { OnInit } from '@angular/core';
 import { Component } from '@angular/core';
 import type { Params } from '@angular/router';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ParentLinkComponent } from 'src/app/components/parent-link/parent-link.component';
 import { QASetListComponent } from 'src/app/components/q-a-set-list/q-a-set-list.component';
 import { SearchInputComponent } from 'src/app/components/search-input/search-input.component';
 import type { QASet } from 'src/app/models/qa-set.model';
 import type { RegionData } from 'src/app/models/region-data';
+import { ConfigService } from 'src/app/services/config.service';
 import { OffersService } from 'src/app/services/offers.service';
 import { PageMetaService } from 'src/app/services/page-meta.service';
 import { RegionDataService } from 'src/app/services/region-data.service';
 import { SearchService } from 'src/app/services/search.service';
+import { environment } from 'src/environments/environment';
 import { AppPath } from 'src/routes';
 
+type SearchApiResponse = {
+  status?: number;
+  references?: {
+    category: string;
+    subcategory: string;
+    slug?: string;
+    parent?: string;
+  }[];
+};
+
 @Component({
   selector: 'app-search-page',
   templateUrl: './search.page.html',
   styleUrls: ['./search.page.css'],
   standalone: true,
   imports: [
     NgIf,
-    RouterLink,
     QASetListComponent,
     SearchInputComponent,
     ParentLinkComponent,
   ],
 })
 export default class SearchPageComponent implements OnInit {
+  public useSearchApi = environment.useQandASearch && !!environment.searchApi;
+
   public region: string;
   public regionData: RegionData;
   public qaSets: QASet[];
+
   public searchQuery: string;
   public searchResults: QASet[];
+  public loadingSearch: boolean;
 
   constructor(
     private route: ActivatedRoute,
@@ -41,6 +56,7 @@ export default class SearchPageComponent implements OnInit {
     private offersService: OffersService,
     private searchService: SearchService,
     private pageMeta: PageMetaService,
+    private configService: ConfigService,
   ) {}
 
   async ngOnInit() {
@@ -89,15 +105,34 @@ export default class SearchPageComponent implements OnInit {
     }
   }
 
-  public performSearch(rawQuery: string): void {
-    const safeQuery = this.searchService.sanitizeSearchQuery(rawQuery);
+  public onSearchInput(rawQuery: string) {
+    const safeQuery = this.useSearchApi
+      ? rawQuery
+      : this.searchService.sanitizeSearchQuery(rawQuery);
 
     this.router.navigate([], {
       queryParams: { q: safeQuery },
       queryParamsHandling: 'merge',
     });
+  }
+
+  public async performSearch(query: string): Promise<void> {
+    const safeQuery = this.searchService.sanitizeSearchQuery(query);
 
-    this.searchResults = this.searchService.query(safeQuery);
+    if (this.useSearchApi) {
+      this.loadingSearch = true;
+      const apiResponse: SearchApiResponse =
+        await this.fetchApiResults(safeQuery);
+
+      if (apiResponse) {
+        this.loadingSearch = false;
+      }
+      if (apiResponse && apiResponse.references) {
+        this.searchResults = this.createReferences(apiResponse.references);
+      }
+    } else {
+      this.searchResults = this.searchService.query(safeQuery);
+    }
 
     if (this.searchResults.length > 1) {
       this.pageMeta.setTitle({
@@ -111,4 +146,48 @@ export default class SearchPageComponent implements OnInit {
       }
     }
   }
+
+  private createReferences(
+    references: SearchApiResponse['references'],
+  ): QASet[] {
+    const results = references.map((reference) => {
+      const result = this.qaSets.find((qa) => {
+        return (
+          qa.categoryID === Number(reference.category) &&
+          qa.subCategoryID === Number(reference.subcategory)
+        );
+      });
+
+      return result;
+    });
+    return results;
+  }
+
+  private async fetchApiResults(query: string): Promise<SearchApiResponse> {
+    const response = await window.fetch(environment.searchApi, {
+      method: 'POST',
+      credentials: 'omit',
+      mode: 'cors',
+      headers: {
+        Authorization: environment.searchApiKey,
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        question: query,
+        googleSheetId: this.configService.getRegionByRegionSlug(this.region)
+          .sheetId,
+        locale: this.regionData.localeLanguage,
+      }),
+    });
+
+    if (!response || !response.ok) {
+      console.warn('Something went wrong:', response);
+      return {
+        references: [],
+      };
+    }
+
+    return await response.json();
+  }
 }

src/app/referral/referral.page.ts

@@ -9,7 +9,7 @@ import {
   RouterLink,
   RouterOutlet,
 } from '@angular/router';
-import { IonContent, IonFooter, IonHeader } from '@ionic/angular/standalone';
+import { IonContent, IonHeader } from '@ionic/angular/standalone';
 import { MarkdownComponent } from 'ngx-markdown';
 import { filter } from 'rxjs';
 import { AppHeaderComponent } from 'src/app/components/header/header.component';
@@ -46,7 +46,6 @@ import { AppPath } from 'src/routes';
     RouterOutlet,
     IonHeader,
     IonContent,
-    IonFooter,
   ],
 })
 export class ReferralPageComponent implements OnInit {