refactor: remove default data from search page

Closes #151

src/app/modules/data/detail/data-detail.html

@@ -24,7 +24,7 @@
   </ion-refresher>
   <div [ngSwitch]="true">
     <ng-container *ngSwitchCase="!item && isDisconnected()">
-      <div class="notFoundContainer">
+      <div class="centeredMessageContainer">
         <ion-icon name="no-connection"> </ion-icon>
         <ion-label>
           {{ 'data.detail.COULD_NOT_CONNECT' | translate }}
@@ -32,7 +32,7 @@
       </div>
     </ng-container>
     <ng-container *ngSwitchCase="item === null">
-      <div class="notFoundContainer">
+      <div class="centeredMessageContainer">
         <ion-icon name="broken-link"> </ion-icon>
         <ion-label>
           {{ 'data.detail.NOT_FOUND' | translate }}

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

@@ -80,6 +80,11 @@ export class DataListComponent implements OnChanges, OnInit, OnDestroy {
 
   @ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;
 
+  /**
+   * Signalizes that the data is being loaded
+   */
+  @Input() loading = true;
+
   /**
    * Calculate how many items would fill the screen
    */
@@ -130,10 +135,10 @@ export class DataListComponent implements OnChanges, OnInit, OnDestroy {
   /**
    * Function to call whenever scroll view visible range changed
    */
-  scrolled(_index: number) {
+  scrolled(index: number) {
     if (
-      // first condition prevents "load more" to be executed before event having initial items
+      // first condition prevents "load more" to be executed even before scrolling
-      this.items &&
+      index > 0 &&
       (this.items?.length ?? 0) - this.viewPort.getRenderedRange().end <=
         (this.items?.length ?? 0) * this.reloadThreshold
     ) {

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

@@ -15,12 +15,14 @@
     </ion-list>
   </cdk-virtual-scroll-viewport>
 </ng-container>
-<div [style.display]="items && items.length === 0 ? 'block' : 'none'">
+<div
-  <ion-label class="notFoundContainer">
+  [style.display]="!loading && items && items.length === 0 ? 'block' : 'none'"
+>
+  <ion-label class="centeredMessageContainer">
     {{ 'search.nothing_found' | translate | titlecase }}
   </ion-label>
 </div>
-<ion-list [style.display]="items ? 'none' : 'block'">
+<ion-list [style.display]="loading ? 'block' : 'none'">
   <stapps-skeleton-list-item
     [hideThumbnail]="singleType"
     *ngFor="let skeleton of [].constructor(skeletonItems)"

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

@@ -26,6 +26,8 @@ export class FoodDataListComponent extends SearchPageComponent {
    * Sets the forced filter to present only places for eating/drinking
    */
   initialize() {
+    this.showDefaultData = true;
+
     if (this.positionService.position) {
       this.sortQuery = [
         {

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

@@ -40,6 +40,16 @@ import {PositionService} from '../../map/position.service';
   providers: [ContextMenuService],
 })
 export class SearchPageComponent implements OnInit, OnDestroy {
+  /**
+   * Signalizes that the data is being loaded
+   */
+  loading = false;
+
+  /**
+   * Show default data (e.g. when there is user interaction)
+   */
+  @Input() showDefaultData = false;
+
   /**
    * Api query filter
    */
@@ -166,11 +176,13 @@ export class SearchPageComponent implements OnInit, OnDestroy {
       };
     }
 
-    return this.dataProvider.search(searchOptions).then(
+    this.loading = !append;
-      async result => {
+
+    try {
+      const result = await this.dataProvider.search(searchOptions);
       this.singleTypeResponse =
-          result.facets.find(facet => facet.field === 'type')?.buckets
+        result.facets.find(facet => facet.field === 'type')?.buckets.length ===
-            .length === 1;
+        1;
       if (append) {
         let items = await this.items;
         // append results
@@ -184,8 +196,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
           return result.data;
         })();
       }
-      },
+    } catch (error) {
-      async error => {
       const alert: HTMLIonAlertElement = await this.alertController.create({
         buttons: ['Dismiss'],
         header: 'Error',
@@ -193,8 +204,9 @@ export class SearchPageComponent implements OnInit, OnDestroy {
       });
 
       await alert.present();
-      },
+    } finally {
-    );
+      this.loading = false;
+    }
   }
 
   /**
@@ -268,8 +280,14 @@ export class SearchPageComponent implements OnInit, OnDestroy {
         this.filterQuery = query[1];
         this.sortQuery = query[2];
         this.from = 0;
+        if (
+          typeof this.filterQuery !== 'undefined' ||
+          this.queryText?.length > 0 ||
+          this.showDefaultData
+        ) {
           await this.fetchAndUpdateItems();
           this.queryChanged.next();
+        }
       }),
       this.settingsProvider.settingsActionChanged$.subscribe(
         ({type, payload}) => {

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

@@ -14,17 +14,26 @@
       (ngModelChange)="searchStringChanged($event)"
       [(ngModel)]="queryText"
       showClearButton="always"
+      placeholder="{{ 'search.search_bar.placeholder' | translate }}"
     >
     </ion-searchbar>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
+  <div
+    [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'"
+  >
+    <ion-label class="centeredMessageContainer">
+      {{ 'search.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>

src/app/modules/data/types/catalog/catalog-detail-content.component.ts

@@ -35,6 +35,7 @@ export class CatalogDetailContentComponent
   }
 
   initialize() {
+    this.showDefaultData = true;
     this.pageSize = 100;
 
     const nameSort: SCDucetSort = {

src/app/modules/favorites/favorites-page.component.ts

@@ -12,7 +12,7 @@
  * 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} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {FavoritesService} from './favorites.service';
 import {DataRoutingService} from '../data/data-routing.service';
 import {Router} from '@angular/router';
@@ -33,7 +33,10 @@ import {take} from 'rxjs/operators';
   providers: [ContextMenuService],
   styleUrls: ['./favorites-page.component.scss'],
 })
-export class FavoritesPageComponent extends SearchPageComponent {
+export class FavoritesPageComponent
+  extends SearchPageComponent
+  implements OnInit
+{
   constructor(
     alertController: AlertController,
     dataProvider: DataProvider,
@@ -57,7 +60,8 @@ export class FavoritesPageComponent extends SearchPageComponent {
     );
   }
 
-  ionViewWillEnter() {
+  ngOnInit() {
+    super.ngOnInit();
     this.subscriptions.push(
       this.favoritesService.favoritesChanged$.subscribe(_favoritesMap => {
         this.fetchAndUpdateItems();
@@ -77,4 +81,8 @@ export class FavoritesPageComponent extends SearchPageComponent {
         this.updateContextFilter(result.facets);
       });
   }
+
+  initialize() {
+    this.showDefaultData = true;
+  }
 }

src/app/modules/map/page/map-page.html

@@ -14,7 +14,7 @@
       (keyup)="searchKeyUp($event)"
       [(ngModel)]="queryText"
       (ionClear)="searchStringChanged()"
-      placeholder="{{ 'map.page.search.PLACEHOLDER' | translate }}"
+      placeholder="{{ 'map.page.search_bar.placeholder' | translate }}"
       showClearButton="always"
     >
     </ion-searchbar>

src/app/modules/news/page/news-page.html

@@ -39,7 +39,7 @@
       </ion-col>
     </ion-row>
   </ion-grid>
-  <ion-label *ngIf="news.length === 0" class="notFoundContainer">
+  <ion-label *ngIf="news.length === 0" class="centeredMessageContainer">
     {{ 'search.nothing_found' | translate | titlecase }}
   </ion-label>
   <ion-infinite-scroll

src/assets/i18n/de.json

@@ -126,8 +126,8 @@
   "map": {
     "page": {
       "TITLE": "Karte",
-      "search": {
+      "search_bar": {
-        "PLACEHOLDER": "Gebäude, Points of Interest, Mensen und mehr"
+        "placeholder": "Gebäude, Points of Interest, Mensen und mehr"
       },
       "buttons": {
         "SHOW_LIST": "Liste ansehen",
@@ -177,6 +177,10 @@
     "title": "Aktuelles"
   },
   "search": {
+    "search_bar": {
+      "placeholder": "Suche ..."
+    },
+    "instruction": "Starte oben zu tippen, um Veranstaltungen, Veranstaltungstermine, Personen, Orte, Essen und mehr zu finden ...",
     "nothing_found": "Keine Ergebnisse"
   },
   "schedule": {

src/assets/i18n/en.json

@@ -126,8 +126,8 @@
   "map": {
     "page": {
       "TITLE": "Map",
-      "search": {
+      "search_bar": {
-        "PLACEHOLDER": "Buildings, points of interests, canteens and more"
+        "placeholder": "Buildings, points of interests, canteens and more"
       },
       "buttons": {
         "SHOW_LIST": "Show list",
@@ -177,6 +177,10 @@
     "title": "News"
   },
   "search": {
+    "search_bar": {
+      "placeholder": "Search ..."
+    },
+    "instruction": "Start typing above to find events, persons, places, food and more ...",
     "nothing_found": "No results"
   },
   "schedule": {

src/global.scss

@@ -41,13 +41,14 @@ ion-item, ion-card.compact {
   }
 }
 
-.notFoundContainer {
+.centeredMessageContainer {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   min-height: 50vh;
+  margin: 20px;
 
   ion-icon {
     font-size: 64px;