fix: inPlace in list items is placed weird

frontend/app/src/app/modules/data/list/food-data-list.component.ts

@@ -12,109 +12,94 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
-import {MapPosition} from '../../map/position.service';
+import {PositionService} from '../../map/position.service';
-import {SearchPageComponent} from './search-page.component';
 import {Geolocation} from '@capacitor/geolocation';
-import {BehaviorSubject} from 'rxjs';
+import {BehaviorSubject, catchError} from 'rxjs';
 import {pauseWhen} from '../../../util/rxjs/pause-when';
+import {SCSearchFilter} from '@openstapps/core';
+import {ContextMenuService} from '../../menu/context/context-menu.service';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 /**
  * Presents a list of places for eating/drinking
  */
 @Component({
-  templateUrl: 'search-page.html',
+  templateUrl: 'food-data-list.html',
-  styleUrls: ['../../data/list/search-page.scss'],
 })
-export class FoodDataListComponent extends SearchPageComponent implements OnInit {
+export class FoodDataListComponent {
-  title = 'canteens.title';
-
-  showNavigation = false;
-
   isNotInView$ = new BehaviorSubject(true);
 
-  /**
+  forcedFilter: SCSearchFilter = {
-   * Sets the forced filter to present only places for eating/drinking
+    arguments: {
-   */
+      filters: [
-  ngOnInit() {
+        {
-    this.positionService
+          arguments: {
-      .watchCurrentLocation({enableHighAccuracy: false, maximumAge: 1000})
+            field: 'categories',
-      .pipe(pauseWhen(this.isNotInView$), takeUntilDestroyed(this.destroy$))
+            value: 'canteen',
-      .subscribe({
+          },
-        next: (position: MapPosition) => {
+          type: 'value',
-          this.positionService.position = position;
         },
-        error: async _error => {
+        {
-          this.positionService.position = undefined;
+          arguments: {
+            field: 'categories',
+            value: 'student canteen',
+          },
+          type: 'value',
+        },
+        {
+          arguments: {
+            field: 'categories',
+            value: 'cafe',
+          },
+          type: 'value',
+        },
+        {
+          arguments: {
+            field: 'categories',
+            value: 'restaurant',
+          },
+          type: 'value',
+        },
+      ],
+      operation: 'or',
+    },
+    type: 'boolean',
+  };
+
+  constructor(positionService: PositionService, contextMenuService: ContextMenuService) {
+    positionService
+      .watchCurrentLocation({enableHighAccuracy: false, maximumAge: 1000})
+      .pipe(
+        pauseWhen(this.isNotInView$),
+        takeUntilDestroyed(),
+        catchError(async _error => {
+          await Geolocation.checkPermissions();
+        }),
+      )
+      .subscribe({
+        next(position) {
+          if (!position) return;
+          positionService.position = position;
+          contextMenuService.sortQuery.next([
+            {
+              type: 'distance',
+              order: 'asc',
+              arguments: {
+                field: 'geo',
+                position: [position.longitude, position.latitude],
+              },
+            },
+          ]);
+        },
+        async error() {
+          positionService.position = undefined;
           await Geolocation.checkPermissions();
         },
       });
-    this.showDefaultData = true;
-
-    this.sortQuery = [
-      {
-        arguments: {field: 'name'},
-        order: 'asc',
-        type: 'ducet',
-      },
-    ];
-
-    this.forcedFilter = {
-      arguments: {
-        filters: [
-          {
-            arguments: {
-              field: 'categories',
-              value: 'canteen',
-            },
-            type: 'value',
-          },
-          {
-            arguments: {
-              field: 'categories',
-              value: 'student canteen',
-            },
-            type: 'value',
-          },
-          {
-            arguments: {
-              field: 'categories',
-              value: 'cafe',
-            },
-            type: 'value',
-          },
-          {
-            arguments: {
-              field: 'categories',
-              value: 'restaurant',
-            },
-            type: 'value',
-          },
-        ],
-        operation: 'or',
-      },
-      type: 'boolean',
-    };
-
-    if (this.positionService.position) {
-      this.sortQuery = [
-        {
-          type: 'distance',
-          order: 'asc',
-          arguments: {
-            field: 'geo',
-            position: [this.positionService.position.longitude, this.positionService.position.latitude],
-          },
-        },
-      ];
-    }
-
-    super.ngOnInit();
   }
 
-  async ionViewWillEnter() {
+  ionViewWillEnter() {
-    await super.ionViewWillEnter();
     this.isNotInView$.next(false);
   }
 

frontend/app/src/app/modules/data/list/food-data-list.html

@@ -0,0 +1,7 @@
+<stapps-search-page
+  [title]="'canteens.title' | translate"
+  [navigation]="[]"
+  [showDefaultData]="true"
+  [forcedFilter]="forcedFilter"
+>
+</stapps-search-page>

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

@@ -55,17 +55,18 @@ export class SearchPageComponent implements OnInit {
 
   @Input() backUrl?: string;
 
-  isHebisAvailable = false;
-
   /**
    * Signalizes that the data is being loaded
    */
   loading = false;
 
   /**
-   * Display the navigation between default and library search
+   * Navigation elements between search pages
    */
-  @Input() showNavigation = true;
+  @Input() navigation: Array<{label: string; routerLink?: string[]}> = [
+    {label: 'search.type'},
+    {label: 'hebisSearch.type', routerLink: ['/hebis-search']},
+  ];
 
   /**
    * Show default data (e.g. when there is user interaction)
@@ -82,6 +83,8 @@ export class SearchPageComponent implements OnInit {
    */
   @Input() showTopToolbar = true;
 
+  @Input() showContextMenu = true;
+
   /**
    * Api query filter
    */
@@ -110,7 +113,7 @@ export class SearchPageComponent implements OnInit {
   /**
    * Page size of queries
    */
-  pageSize = 30;
+  @Input() pageSize = 30;
 
   /**
    * Search value from search bar
@@ -343,8 +346,13 @@ export class SearchPageComponent implements OnInit {
         });
     }
     try {
-      const features = this.configProvider.getValue('features') as SCFeatureConfiguration;
+      // TODO: make this hack more generic
-      this.isHebisAvailable = !!features.plugins?.['hebis-plugin']?.urlPath;
+      if (this.navigation[1]?.routerLink?.[0] === '/hebis-search') {
+        const features = this.configProvider.getValue('features') as SCFeatureConfiguration;
+        if (features.plugins?.['hebis-plugin']?.urlPath === undefined) {
+          this.navigation = [];
+        }
+      }
     } catch (error) {
       this.logger.error(error);
     }

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

@@ -13,7 +13,9 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<stapps-context contentId="data-list"></stapps-context>
+@if (showContextMenu) {
+  <stapps-context contentId="data-list"></stapps-context>
+}
 <ion-header>
   @if (showDrawer && showTopToolbar) {
     <ion-toolbar color="primary" mode="ios">
@@ -37,23 +39,30 @@
       class="filterable"
       [autofocus]="!showDefaultData"
     >
-      <ion-menu-button menu="context" auto-hide="false">
+      @if (showContextMenu) {
-        <ion-icon name="tune"></ion-icon>
+        <ion-menu-button menu="context" auto-hide="false">
-      </ion-menu-button>
+          <ion-icon name="tune"></ion-icon>
+        </ion-menu-button>
+      }
     </ion-searchbar>
   </ion-toolbar>
-  @if (showNavigation && isHebisAvailable) {
+  @if (navigation.length > 0) {
     <ion-toolbar color="primary" class="category-tab">
       <ion-buttons class="ion-justify-content-between">
-        <ion-button class="button-active" size="large">{{ 'search.type' | translate }}</ion-button>
+        @for (target of navigation; track target) {
-        <ion-button
+          @if (target.routerLink) {
-          [routerLink]="['/hebis-search']"
+            <ion-button
-          queryParamsHandling="merge"
+              [routerLink]="target.routerLink"
-          [routerAnimation]="routeAnimation"
+              queryParamsHandling="merge"
-          fill="outline"
+              [routerAnimation]="routeAnimation"
-          size="large"
+              fill="outline"
-          >{{ 'hebisSearch.type' | translate }}
+              size="large"
-        </ion-button>
+              >{{ target.label | translate }}
+            </ion-button>
+          } @else {
+            <ion-button class="button-active" size="large">{{ target.label | translate }}</ion-button>
+          }
+        }
       </ion-buttons>
     </ion-toolbar>
   }

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

@@ -22,6 +22,9 @@
 
 ion-toolbar {
   --ion-color-base: none !important;
+
+  // account for back button
+  min-height: 42px;
 }
 
 ion-toolbar:first-of-type {

frontend/app/src/app/modules/data/types/article/article-item.component.ts

@@ -22,6 +22,7 @@ import {DataListItemComponent} from '../../list/data-list-item.component';
 @Component({
   selector: 'stapps-article-item',
   templateUrl: 'article-list-item.html',
+  styleUrl: 'article-list-item.scss',
 })
 export class ArticleListItemComponent extends DataListItemComponent {
   /**

frontend/app/src/app/modules/data/types/article/article-list-item.html

@@ -13,26 +13,20 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ion-grid>
+<ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
-  <ion-row>
+<p class="title-sub">
-    <ion-col>
+  @for (author of item.authors; track author) {
-      <h2 class="name">{{ 'name' | thingTranslate: item }}</h2>
+    {{ 'name' | thingTranslate: author }}
-      <p>
+  }
-        @for (author of item.authors; track author) {
+  @if (item.authors && item.authors && item.firstPublished) {
-          {{ 'name' | thingTranslate: author }}
+    ,&nbsp;
-        }
+  }
-        @if (item.authors && item.authors && item.firstPublished) {
+  @if (item.firstPublished && !item.lastPublished) {
-          ,&nbsp;
+    {{ item.firstPublished }}
-        }
+  } @else {
-        @if (item.firstPublished && !item.lastPublished) {
+    @if (item.firstPublished && item.lastPublished) {
-          {{ item.firstPublished }}
+      {{ [item.firstPublished, item.lastPublished] | join: ' - ' }}
-        } @else {
+    }
-          @if (item.firstPublished && item.lastPublished) {
+  }
-            {{ [item.firstPublished, item.lastPublished] | join: ' - ' }}
+</p>
-          }
+<ion-note> {{ 'categories' | thingTranslate: item }} </ion-note>
-        }
-      </p>
-      <ion-note> {{ 'categories' | thingTranslate: item }} </ion-note>
-    </ion-col>
-  </ion-row>
-</ion-grid>

frontend/app/src/app/modules/data/types/article/article-list-item.scss

@@ -0,0 +1,3 @@
+p.title-sub {
+  white-space: unset;
+}

frontend/app/src/app/modules/data/types/book/book-list-item.component.ts

@@ -22,6 +22,7 @@ import {DataListItemComponent} from '../../list/data-list-item.component';
 @Component({
   selector: 'stapps-book-list-item',
   templateUrl: 'book-list-item.html',
+  styleUrl: 'book-list-item.scss',
 })
 export class BookListItemComponent extends DataListItemComponent {
   /**

frontend/app/src/app/modules/data/types/book/book-list-item.html

@@ -13,26 +13,20 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ion-grid>
+<ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
-  <ion-row>
+<p class="title-sub">
-    <ion-col>
+  @for (author of item.authors; track author) {
-      <h2 class="name">{{ 'name' | thingTranslate: item }}</h2>
+    {{ 'name' | thingTranslate: author }}
-      <p>
+  }
-        @for (author of item.authors; track author) {
+  @if (item.authors && item.authors && item.firstPublished) {
-          {{ 'name' | thingTranslate: author }}
+    ,&nbsp;
-        }
+  }
-        @if (item.authors && item.authors && item.firstPublished) {
+  @if (item.firstPublished && !item.lastPublished) {
-          ,&nbsp;
+    {{ item.firstPublished }}
-        }
+  } @else {
-        @if (item.firstPublished && !item.lastPublished) {
+    @if (item.firstPublished && item.lastPublished) {
-          {{ item.firstPublished }}
+      {{ [item.firstPublished, item.lastPublished] | join: ' - ' }}
-        } @else {
+    }
-          @if (item.firstPublished && item.lastPublished) {
+  }
-            {{ [item.firstPublished, item.lastPublished] | join: ' - ' }}
+</p>
-          }
+<ion-note> {{ 'categories' | thingTranslate: item }} </ion-note>
-        }
-      </p>
-      <ion-note> {{ 'categories' | thingTranslate: item }} </ion-note>
-    </ion-col>
-  </ion-row>
-</ion-grid>

frontend/app/src/app/modules/data/types/book/book-list-item.scss

@@ -0,0 +1,3 @@
+p.title-sub {
+  white-space: unset;
+}

frontend/app/src/app/modules/data/types/periodical/periodical-list-item.component.ts

@@ -22,6 +22,7 @@ import {DataListItemComponent} from '../../list/data-list-item.component';
 @Component({
   selector: 'stapps-periodical-list-item',
   templateUrl: 'periodical-list-item.html',
+  styleUrl: 'periodical-list-item.scss',
 })
 export class PeriodicalListItemComponent extends DataListItemComponent {
   /**

frontend/app/src/app/modules/data/types/periodical/periodical-list-item.html

@@ -13,26 +13,20 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<ion-grid>
+<ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
-  <ion-row>
+<p class="title-sub">
-    <ion-col>
+  @for (author of item.authors; track author) {
-      <h2 class="name">{{ 'name' | thingTranslate: item }}</h2>
+    {{ 'name' | thingTranslate: author }}
-      <p>
+  }
-        @for (author of item.authors; track author) {
+  @if (item.authors && item.authors && item.firstPublished) {
-          {{ 'name' | thingTranslate: author }}
+    ,&nbsp;
-        }
+  }
-        @if (item.authors && item.authors && item.firstPublished) {
+  @if (item.firstPublished && !item.lastPublished) {
-          ,&nbsp;
+    {{ item.firstPublished }}
-        }
+  } @else {
-        @if (item.firstPublished && !item.lastPublished) {
+    @if (item.firstPublished && item.lastPublished) {
-          {{ item.firstPublished }}
+      {{ [item.firstPublished, item.lastPublished] | join: ' - ' }}
-        } @else {
+    }
-          @if (item.firstPublished && item.lastPublished) {
+  }
-            {{ [item.firstPublished, item.lastPublished] | join: ' - ' }}
+</p>
-          }
+<ion-note> {{ 'categories' | thingTranslate: item }} </ion-note>
-        }
-      </p>
-      <ion-note> {{ 'categories' | thingTranslate: item }} </ion-note>
-    </ion-col>
-  </ion-row>
-</ion-grid>

frontend/app/src/app/modules/data/types/periodical/periodical-list-item.scss

@@ -0,0 +1,3 @@
+p.title-sub {
+  white-space: unset;
+}

frontend/app/src/app/modules/data/types/place/place-list-item.html

@@ -12,36 +12,29 @@
 ~ You should have received a copy of the GNU General Public License along with
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
-<ng-template #distanceView>
-  @if (distance | async; as distance) {
-    <ion-label class="distance" @fade>
-      <ion-icon name="directions_walk"></ion-icon>
-      {{ distance | metersLocalized }}
-    </ion-label>
-  }
-</ng-template>
 <ion-label class="title">{{ 'name' | thingTranslate: _item }}</ion-label>
 @if (_item.type !== 'floor') {
-  <stapps-opening-hours [openingHours]="_item.openingHours"></stapps-opening-hours>
+  <p class="title-sub">
-  @if (_item.categories && _item.type !== 'building') {
+    <stapps-opening-hours [openingHours]="_item.openingHours"></stapps-opening-hours>
-    <ion-note>
+    @if (_item.type !== 'building' && _item.inPlace) {
+      <ion-icon name="pin_drop"></ion-icon>
+      <ion-label>{{ 'name' | thingTranslate: _item.inPlace }}</ion-label>
+    }
+  </p>
+  <ion-note>
+    @if (_item.categories && _item.type !== 'building') {
       <ion-label> {{ 'categories' | thingTranslate: _item | join: ', ' | titlecase }} </ion-label>
-      <ng-container *ngTemplateOutlet="distanceView"></ng-container>
+    } @else {
-    </ion-note>
-  } @else {
-    <ion-note>
       <ion-label> {{ 'type' | thingTranslate: _item | titlecase }} </ion-label>
-      <ng-container *ngTemplateOutlet="distanceView"></ng-container>
+    }
-    </ion-note>
+    @if (distance | async; as distance) {
-  }
+      <ion-label @fade>
+        <ion-icon name="directions_walk"></ion-icon>
+        {{ distance | metersLocalized }}
+      </ion-label>
+    }
+  </ion-note>
 }
 @if (_item.description) {
   <p>{{ 'description' | thingTranslate: _item }}</p>
 }
-@if (_item.type !== 'building') {
-  @if (_item.inPlace) {
-    <ion-col size="auto" class="in-place">
-      <ion-icon name="pin_drop"></ion-icon><ion-label>{{ 'name' | thingTranslate: _item.inPlace }}</ion-label>
-    </ion-col>
-  }
-}

frontend/app/src/app/modules/data/types/place/place-list-item.scss

@@ -15,6 +15,8 @@
 
 ion-note {
   display: flex;
+  align-items: center;
+  justify-content: flex-start;
 
   > ion-label {
     display: inline-flex;
@@ -23,15 +25,14 @@ ion-note {
   }
 }
 
-ion-label + ion-label.distance::before {
+p.title-sub {
-  content: '•';
-  margin-inline: var(--spacing-xs);
-}
-
-.in-place {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+}
+
+ion-label + ion-label::before {
+  content: '•';
+  margin-inline: var(--spacing-xs);
 }
 
 stapps-opening-hours ::ng-deep div {

frontend/app/src/app/modules/hebis/hebis-data.provider.ts

@@ -21,6 +21,7 @@ import {StAppsWebHttpClient} from '../data/stapps-web-http-client.provider';
 import {HttpClient} from '@angular/common/http';
 import {DataProvider} from '../data/data.provider';
 import {SCHebisSearchRoute} from './protocol/route';
+import {SCSearchRequest, SCSearchResponse} from '@openstapps/core';
 
 const HEBIS_PREFIX = 'HEB';
 
@@ -46,12 +47,6 @@ export class HebisDataProvider extends DataProvider {
    */
   private readonly hebisSearchRoute = new SCHebisSearchRoute();
 
-  /**
-   * TODO
-   * @param stAppsWebHttpClient TODO
-   * @param storageProvider TODO
-   * @param httpClient TODO
-   */
   constructor(
     stAppsWebHttpClient: StAppsWebHttpClient,
     storageProvider: StorageProvider,
@@ -63,6 +58,23 @@ export class HebisDataProvider extends DataProvider {
     this.client = new Client(stAppsWebHttpClient, this.backendUrl, this.appVersion);
   }
 
+  override async search(query: SCSearchRequest): Promise<SCSearchResponse> {
+    const response = await this.hebisSearch({
+      query: query.query ?? '',
+      page: query.from,
+    });
+    console.log(response.pagination);
+
+    return {
+      data: response.data,
+      facets: [],
+      pagination: response.pagination,
+      stats: {
+        time: Number.NaN,
+      },
+    };
+  }
+
   /**
    * Send a search request to the backend
    *

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

@@ -12,13 +12,12 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
-import {combineLatest} from 'rxjs';
-import {debounceTime, distinctUntilChanged, startWith} from 'rxjs/operators';
-import {SearchPageComponent} from '../../data/list/search-page.component';
 import {HebisDataProvider} from '../hebis-data.provider';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {DataProvider} from '../../data/data.provider';
+import {DataRoutingService} from '../../data/data-routing.service';
+import {Router} from '@angular/router';
 
 /**
  * HebisSearchPageComponent queries things and shows list of things as search results and filter as context menu
@@ -29,111 +28,16 @@ import {DataProvider} from '../../data/data.provider';
   styleUrls: ['../../data/list/search-page.scss'],
   providers: [{provide: DataProvider, useClass: HebisDataProvider}],
 })
-export class HebisSearchPageComponent extends SearchPageComponent implements OnInit {
+export class HebisSearchPageComponent {
-  /**
+  constructor(dataRoutingService: DataRoutingService, router: Router) {
-   * If routing should be done if the user clicks on an item
+    dataRoutingService
-   */
-  @Input() itemRouting? = true;
-
-  /**
-   * Current page to start query
-   */
-  page = 0;
-
-  /**
-   * Fetches items with set query configuration
-   * @param append If true fetched data gets appended to existing, override otherwise (default false)
-   */
-  protected async fetchAndUpdateItems(append = false): Promise<void> {
-    // build query search options
-    const searchOptions: {page: number; query: string} = {
-      page: this.page,
-      query: '',
-    };
-
-    if (this.queryText && this.queryText.length > 0) {
-      // add query string
-      searchOptions.query = this.queryText;
-    }
-
-    return (this.dataProvider as HebisDataProvider).hebisSearch(searchOptions).then(
-      async result => {
-        /*this.singleTypeResponse =
-          result.facets.find(facet => facet.field === 'type')?.buckets
-            .length === 1;*/
-        if (append) {
-          let items = await this.items;
-          // append results
-          items = [...items, ...result.data];
-          this.items = (async () => items)();
-        } else {
-          // override items with results
-          this.items = (async () => {
-            return result.data;
-          })();
-        }
-      },
-      async error => {
-        const alert: HTMLIonAlertElement = await this.alertController.create({
-          buttons: ['Dismiss'],
-          header: 'Error',
-          subHeader: error.message,
-        });
-
-        await alert.present();
-      },
-    );
-  }
-
-  /**
-   * Loads next page of things
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  async loadMore(): Promise<void> {
-    this.page += 1;
-    await this.fetchAndUpdateItems(true);
-  }
-
-  ngOnInit() {
-    //this.fetchAndUpdateItems();
-    this.initialize();
-
-    combineLatest([
-      this.queryTextChanged.pipe(
-        debounceTime(this.searchQueryDueTime),
-        distinctUntilChanged(),
-        startWith(this.queryText),
-      ),
-    ])
-      .pipe(takeUntilDestroyed(this.destroy$))
-      .subscribe(async query => {
-        this.queryText = query[0];
-        this.page = 0;
-        if (this.queryText?.length > 0 || this.showDefaultData) {
-          await this.fetchAndUpdateItems();
-          this.queryChanged.next();
-        }
-      });
-    this.settingsProvider.settingsActionChanged$
-      .pipe(takeUntilDestroyed(this.destroy$))
-      .subscribe(({type, payload}) => {
-        if (type === 'stapps.settings.changed') {
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          const {category, name, value} = payload!;
-          this.logger.log(`received event "settings.changed" with category:
-            ${category}, name: ${name}, value: ${JSON.stringify(value)}`);
-        }
-      });
-    this.dataRoutingService
       .itemSelectListener()
-      .pipe(takeUntilDestroyed(this.destroy$))
+      .pipe(takeUntilDestroyed())
       .subscribe(async item => {
-        if (this.itemRouting) {
+        void router.navigate(
-          void this.router.navigate(
+          ['hebis-detail', (item.origin && 'originalId' in item.origin && item.origin['originalId']) || ''],
-            ['hebis-detail', (item.origin && 'originalId' in item.origin && item.origin['originalId']) || ''],
+          {state: {item}},
-            {state: {item}},
+        );
-          );
-        }
       });
   }
 }

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

@@ -13,52 +13,13 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<ion-header>
+<stapps-search-page
-  <ion-toolbar color="primary" mode="ios">
+  [placeholder]="'hebisSearch.search_bar.placeholder' | translate"
-    <ion-buttons slot="start">
+  [title]="'hebisSearch.title' | translate"
-      <ion-back-button></ion-back-button>
+  [searchInstruction]="'hebisSearch.instruction' | translate"
-    </ion-buttons>
+  [itemRouting]="false"
-    <ion-title>{{ 'hebisSearch.title' | translate }}</ion-title>
+  [showContextMenu]="false"
-  </ion-toolbar>
+  [pageSize]="1"
-  <ion-toolbar color="primary" mode="ios">
+  [navigation]="[{label: 'search.type', routerLink: ['/search']}, {label: 'hebisSearch.type'}]"
-    <ion-searchbar
+>
-      (ngModelChange)="searchStringChanged($event)"
+</stapps-search-page>
-      (keyup.enter)="hideKeyboard()"
-      (search)="hideKeyboard()"
-      [(ngModel)]="queryText"
-      mode="md"
-      placeholder="{{ 'hebisSearch.search_bar.placeholder' | translate }}"
-      showClearButton="always"
-      type="search"
-      enterkeyhint="search"
-    >
-    </ion-searchbar>
-  </ion-toolbar>
-  <ion-toolbar color="primary" class="category-tab">
-    <ion-buttons class="ion-justify-content-between">
-      <ion-button
-        [routerLink]="['/search']"
-        queryParamsHandling="preserve"
-        [routerAnimation]="routeAnimation"
-        fill="outline"
-        size="large"
-        >{{ 'search.type' | translate }}
-      </ion-button>
-      <ion-button class="button-active" size="large">{{ 'hebisSearch.type' | translate }}</ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <div [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'">
-    <ion-label class="centered-message-container"> {{ 'hebisSearch.instruction' | translate }} </ion-label>
-  </div>
-  <stapps-data-list
-    id="data-list"
-    [items]="items | async"
-    [singleType]="singleTypeResponse"
-    (loadmore)="loadMore()"
-    [resetToTop]="queryChanged.asObservable()"
-    [loading]="loading"
-  ></stapps-data-list>
-</ion-content>

frontend/app/src/app/modules/jobs/page/jobs-page.html

@@ -2,7 +2,7 @@
   [title]="'jobs.title' | translate"
   [placeholder]="'jobs.placeholder' | translate"
   [showDefaultData]="true"
-  [showNavigation]="false"
+  [navigation]="[]"
   [forcedFilter]="forcedFilter"
   [backUrl]="'/'"
 ></stapps-search-page>

frontend/app/src/app/modules/schedule/page/choose-events-page.html

@@ -13,7 +13,7 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 <stapps-search-page
-  [showNavigation]="false"
+  [navigation]="[]"
   [showDefaultData]="false"
   [forcedFilter]="forcedFilter"
   [backUrl]="'..'"

frontend/app/src/theme/common/_ion-button.scss

@@ -13,6 +13,10 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
+.can-go-back ion-header ion-back-button {
+  display: block;
+}
+
 app-root {
   .button {
     --padding-top: var(--spacing-sm);