feat: improve search experience

frontend/app/src/app/modules/data/list/search-page.component.ts

@@ -29,6 +29,7 @@ import {
   SCSearchQuery,
   SCSearchSort,
   SCThings,
+  SCSearchSuggestions,
 } from '@openstapps/core';
 import {NGXLogger} from 'ngx-logger';
 import {combineLatest, Subject} from 'rxjs';
@@ -117,6 +118,8 @@ export class SearchPageComponent implements OnInit {
    */
   items: Promise<SCThings[]>;
 
+  suggestions: SCSearchSuggestions | undefined;
+
   /**
    * Page size of queries
    */
@@ -227,6 +230,7 @@ export class SearchPageComponent implements OnInit {
 
     try {
       const result = await this.dataProvider.search(searchOptions);
+      this.suggestions = result.suggestions;
       this.singleTypeResponse = result.facets.find(facet => facet.field === 'type')?.buckets.length === 1;
       if (append) {
         // append results
@@ -291,6 +295,12 @@ export class SearchPageComponent implements OnInit {
     this.contextMenuService.updateContextFilter(facets);
   }
 
+  applySuggestion(target: string, suggestion: string) {
+    this.queryText = this.queryText.replaceAll(target, suggestion);
+    this.suggestions = undefined;
+    this.searchStringChanged(this.queryText);
+  }
+
   ngOnInit(defaultListeners = true) {
     this.initialize();
     this.contextMenuService.setContextSort({

frontend/app/src/app/modules/data/list/search-page.html

@@ -66,7 +66,23 @@
 </ion-header>
 
 <ion-content class="content">
+  <div class="suggestions">
+    @if (suggestions?.terms; as terms) {
+      <span>{{ 'search.SUGGESTIONS' | translate }}: </span>
+      @for (suggestion of terms | keyvalue; track suggestion) {
+        @for (term of suggestion.value; track term) {
+          @if ($index == 0) {
+            <b (click)="applySuggestion(suggestion.key, term)" class="suggestion">{{ term }}</b>
+          } @else {
+            <span (click)="applySuggestion(suggestion.key, term)" class="suggestion">{{ term }}</span>
+          }
+        }
+      }
+    }
+  </div>
+
   <div
+    class="hint"
     [class.no-results]="!showDefaultData && !items && !loading"
     [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'"
   >

frontend/app/src/app/modules/data/list/search-page.scss

@@ -46,7 +46,7 @@ ion-content {
   --background: var(--ion-background-color);
 }
 
-.content > div {
+.content > .hint {
   height: 100%;
 
   ion-label.centered-message-container {
@@ -60,3 +60,19 @@ ion-content {
 ion-header {
   background: var(--ion-color-primary);
 }
+
+.suggestions {
+  padding: var(--spacing-md);
+  padding-block-end: 0;
+}
+
+.suggestion {
+  cursor: pointer;
+}
+
+.suggestion + .suggestion::before {
+  cursor: text;
+  content: ',';
+  padding-inline-end: 0.25ch;
+  font-weight: normal;
+}

frontend/app/src/assets/i18n/de.json

@@ -425,7 +425,8 @@
       "placeholder": "Veranstaltungen, Personen, Orte und mehr"
     },
     "instruction": "Finde alle Informationen rund ums Studium und den Campus",
-    "nothing_found": "Keine Ergebnisse"
+    "nothing_found": "Keine Ergebnisse",
+    "SUGGESTIONS": "Meintest du"
   },
   "hebisSearch": {
     "title": "Bibliothekssuche",

frontend/app/src/assets/i18n/en.json

@@ -425,7 +425,8 @@
       "placeholder": "Events, places, persons and more"
     },
     "instruction": "Find all information related to your studies and campus",
-    "nothing_found": "No results"
+    "nothing_found": "No results",
+    "SUGGESTIONS": "Did you mean"
   },
   "hebisSearch": {
     "title": "Library Search",

frontend/app/src/environments/environment.ts

@@ -18,7 +18,7 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  backend_url: 'https://mobile.server.uni-frankfurt.de',
+  backend_url: 'http://localhost:3000',
   app_host: 'mobile.app.uni-frankfurt.de',
   custom_url_scheme: 'de.anyschool.app',
   backend_version: '999.0.0',